fix: restore translucent dashboard styling (#6664)

* fix: restore translucent dashboard styling

* fix: restore dashboard widget transparency

* fix: address dashboard review feedback

* fix: apply board opacity to containers

* fix: flatten demo board container

* fix: default board roundness to sm

* fix: restore assistant widget transparency

* Revert "fix: default board roundness to sm"

This reverts commit c235cbdf2b.

* fix: address remaining dashboard review comments

* test: align grid geometry expectations

packages/widgets/src/immich/server-stats/component.module.css

@@ -1,13 +1,22 @@
 .statItem {
-  padding: 12px;
-  border-radius: var(--mantine-radius-md);
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  padding: 8px 10px;
+  border: 0.0625rem solid rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.38));
+  border-radius: var(--mantine-radius-sm);
+  background-color: transparent;
 }
 
 .statItemDense {
   min-width: 0;
-  min-height: 44px;
-  padding: 4px 6px;
+  min-height: 40px;
+  padding: 3px 6px;
+  border: 0.0625rem solid rgb(from var(--mantine-color-secondaryColor-filled) r g b / calc(var(--opacity, 1) * 0.32));
   border-radius: var(--mantine-radius-sm);
-  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  background-color: transparent;
+}
+
+@media (forced-colors: active) {
+  .statItem,
+  .statItemDense {
+    border-color: CanvasText;
+  }
 }

packages/widgets/src/immich/server-stats/component.tsx

@@ -55,42 +55,49 @@ export default function ImmichServerStatsWidget({
     Number(statVisibility.showStorage);
   const statsLayout = getImmichStatsLayout(width, height, statCount, isAdvanced);
 
-  const statsContent = (
-    <SimpleGrid cols={statsLayout.columns} spacing={statsLayout.dense ? 4 : "sm"}>
-      {statVisibility.showUsers && (
-        <StatItem
-          icon={<IconUsers size="var(--mantine-font-size-xl)" />}
-          label={t("users")}
-          value={stats.userCount.toLocaleString(locale)}
-          dense={statsLayout.dense}
-        />
-      )}
-      {statVisibility.showPhotos && (
-        <StatItem
-          icon={<IconPhoto size="var(--mantine-font-size-xl)" />}
-          label={t("photos")}
-          value={stats.photoCount.toLocaleString(locale)}
-          dense={statsLayout.dense}
-        />
-      )}
-      {statVisibility.showVideos && (
-        <StatItem
-          icon={<IconVideo size="var(--mantine-font-size-xl)" />}
-          label={t("videos")}
-          value={stats.videoCount.toLocaleString(locale)}
-          dense={statsLayout.dense}
-        />
-      )}
-      {statVisibility.showStorage && (
-        <StatItem
-          icon={<IconDatabase size="var(--mantine-font-size-xl)" />}
-          label={t("storage")}
-          value={formatBytes(stats.totalLibraryUsageInBytes)}
-          dense={statsLayout.dense}
-        />
-      )}
-    </SimpleGrid>
-  );
+  const statItems = [
+    {
+      key: "users",
+      enabled: statVisibility.showUsers,
+      icon: <IconUsers size={statsLayout.dense ? 16 : 18} />,
+      label: t("users"),
+      value: stats.userCount.toLocaleString(locale),
+    },
+    {
+      key: "photos",
+      enabled: statVisibility.showPhotos,
+      icon: <IconPhoto size={statsLayout.dense ? 16 : 18} />,
+      label: t("photos"),
+      value: stats.photoCount.toLocaleString(locale),
+    },
+    {
+      key: "videos",
+      enabled: statVisibility.showVideos,
+      icon: <IconVideo size={statsLayout.dense ? 16 : 18} />,
+      label: t("videos"),
+      value: stats.videoCount.toLocaleString(locale),
+    },
+    {
+      key: "storage",
+      enabled: statVisibility.showStorage,
+      icon: <IconDatabase size={statsLayout.dense ? 16 : 18} />,
+      label: t("storage"),
+      value: formatBytes(stats.totalLibraryUsageInBytes),
+    },
+  ]
+    .filter((item) => item.enabled)
+    .map(({ key, icon, label, value }) => (
+      <StatItem key={key} icon={icon} label={label} value={value} dense={statsLayout.dense} />
+    ));
+
+  const statsContent =
+    isAdvanced || statsLayout.dense ? (
+      <SimpleGrid cols={statsLayout.columns} spacing={statsLayout.dense ? 4 : "sm"}>
+        {statItems}
+      </SimpleGrid>
+    ) : (
+      <Stack gap="xs">{statItems}</Stack>
+    );
 
   if (!isAdvanced) {
     return (