Feature: Plex mono font support, card + block styles (#7169)

src/components/bookmarks/item.jsx

@@ -7,6 +7,10 @@ import { SettingsContext } from "utils/contexts/settings";
 export default function Item({ bookmark, iconOnly = false }) {
   const description = bookmark.description ?? new URL(bookmark.href).hostname;
   const { settings } = useContext(SettingsContext);
+  const cardStyle =
+    settings.cardStyle === "hairline"
+      ? "shadow-xs inset-ring inset-ring-black/5 dark:inset-ring-white/5 hover:inset-ring-black/10 dark:hover:inset-ring-white/10"
+      : "shadow-md shadow-theme-900/10 dark:shadow-theme-900/20";
 
   return (
     <li
@@ -22,7 +26,8 @@ export default function Item({ bookmark, iconOnly = false }) {
         target={bookmark.target ?? settings.target ?? "_blank"}
         className={classNames(
           settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
-          "text-left cursor-pointer transition-all rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10",
+          cardStyle,
+          "text-left cursor-pointer transition-all rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10",
           iconOnly ? "h-[60px] w-[60px] grid" : "block w-full mb-3",
         )}
       >

src/components/bookmarks/item.test.jsx

@@ -21,6 +21,16 @@ describe("components/bookmarks/item", () => {
     expect(screen.getByRole("link").getAttribute("target")).toBe("_self");
   });
 
+  it("applies hairline card styles when cardStyle is set", () => {
+    renderWithProviders(<Item bookmark={{ name: "A", href: "http://example.com/x", abbr: "A" }} iconOnly={false} />, {
+      settings: { cardStyle: "hairline" },
+    });
+
+    const className = screen.getByRole("link").className;
+    expect(className).toContain("inset-ring");
+    expect(className).not.toContain("shadow-md");
+  });
+
   it("renders icon-only layout with icon when provided", () => {
     renderWithProviders(
       <Item bookmark={{ name: "A", href: "http://example.com/x", abbr: "A", icon: "mdi-home" }} iconOnly />,

src/components/services/item.jsx

@@ -19,6 +19,10 @@ export default function Item({ service, groupName, useEqualHeights }) {
   const { settings } = useContext(SettingsContext);
   const showStats = service.showStats === false ? false : settings.showStats;
   const statusStyle = service.statusStyle !== undefined ? service.statusStyle : settings.statusStyle;
+  const cardStyle =
+    settings.cardStyle === "hairline"
+      ? "shadow-xs inset-ring inset-ring-black/5 dark:inset-ring-white/5 hover:inset-ring-black/10 dark:hover:inset-ring-white/10"
+      : "shadow-md shadow-theme-900/10 dark:shadow-theme-900/20";
   const [statsOpen, setStatsOpen] = useState(service.showStats);
   const [statsClosing, setStatsClosing] = useState(false);
 
@@ -39,7 +43,8 @@ export default function Item({ service, groupName, useEqualHeights }) {
         className={classNames(
           settings.cardBlur !== undefined && `backdrop-blur${settings.cardBlur.length ? "-" : ""}${settings.cardBlur}`,
           useEqualHeights && "h-[calc(100%-0.5rem)]",
-          "transition-all mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 shadow-md shadow-theme-900/10 dark:shadow-theme-900/20 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card",
+          cardStyle,
+          "transition-all mb-2 p-1 rounded-md font-medium text-theme-700 dark:text-theme-200 dark:hover:text-theme-300 bg-theme-100/20 hover:bg-theme-300/20 dark:bg-white/5 dark:hover:bg-white/10 relative overflow-clip service-card",
         )}
       >
         <div className="flex select-none z-0 service-title">

src/components/services/widget/block.jsx

@@ -4,11 +4,14 @@ import { useContext, useMemo } from "react";
 
 import { BlockHighlightContext } from "./highlight-context";
 
+import { SettingsContext } from "utils/contexts/settings";
 import { evaluateHighlight, getHighlightClass } from "utils/highlights";
 
 export default function Block({ value, highlightValue, label, field }) {
   const { t } = useTranslation();
   const highlightConfig = useContext(BlockHighlightContext);
+  const { settings } = useContext(SettingsContext);
+  const refined = settings?.blockStyle === "refined";
 
   const highlight = useMemo(() => {
     if (!highlightConfig) return null;
@@ -45,9 +48,20 @@ export default function Block({ value, highlightValue, label, field }) {
       data-highlight-level={highlight?.level}
       data-highlight-source={highlight?.source}
     >
-      <div className="font-thin text-sm">{value === undefined || value === null ? "-" : value}</div>
       <div
-        className={classNames("font-bold text-xs uppercase", applyToValueOnly && "text-theme-700 dark:text-theme-200")}
+        className={classNames(
+          refined ? "text-[13px] font-medium tabular-nums" : "font-thin text-sm",
+          "service-block-value",
+        )}
+      >
+        {value === undefined || value === null ? "-" : value}
+      </div>
+      <div
+        className={classNames(
+          refined ? "text-[10px] font-semibold uppercase tracking-wider opacity-60" : "font-bold text-xs uppercase",
+          applyToValueOnly && "text-theme-700 dark:text-theme-200",
+          "service-block-label",
+        )}
       >
         {t(label)}
       </div>

src/components/services/widget/block.test.jsx

@@ -39,6 +39,24 @@ describe("components/services/widget/block", () => {
     expect(el.className).toContain("danger-class");
   });
 
+  it("uses the standard block styles by default", () => {
+    const { container } = renderWithProviders(<Block label="some.label" value="1" />, { settings: {} });
+
+    expect(container.querySelector(".service-block-value").className).toContain("font-thin");
+    expect(container.querySelector(".service-block-label").className).toContain("font-bold");
+  });
+
+  it("applies refined block styles when blockStyle is set", () => {
+    const { container } = renderWithProviders(<Block label="some.label" value="1" />, {
+      settings: { blockStyle: "refined" },
+    });
+
+    const value = container.querySelector(".service-block-value");
+    expect(value.className).toContain("tabular-nums");
+    expect(value.className).not.toContain("font-thin");
+    expect(container.querySelector(".service-block-label").className).toContain("tracking-wider");
+  });
+
   it("prefers highlightValue over the rendered value for numeric highlighting", () => {
     const highlightConfig = {
       levels: { warn: "warn-class" },

src/components/widgets/widget/resource.jsx

@@ -25,12 +25,12 @@ export default function Resource({
         }`}
       >
         <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between gap-2">
-          <div className="pl-0.5">{value}</div>
+          <div className="pl-0.5 resource-value">{value}</div>
           <div className="pr-1">{label}</div>
         </div>
         {expanded && (
           <div className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between gap-2">
-            <div className="pl-0.5">{expandedValue}</div>
+            <div className="pl-0.5 resource-value">{expandedValue}</div>
             <div className="pr-1">{expandedLabel}</div>
           </div>
         )}