fix(web): notification media preview and theme switching

- show media labels instead of raw URLs in browser notifications

- support notification icon preview for image messages

- implement effective light/dark/system theme application

- apply appearance prefs on app startup

web/src/utils/preferences.ts

@@ -73,8 +73,20 @@ export function applyAppearancePreferences(prefs: AppPreferences): void {
   if (typeof document === "undefined") {
     return;
   }
+  const resolvedTheme = resolveTheme(prefs.theme);
   document.documentElement.style.setProperty("--bm-font-size", `${prefs.messageFontSize}px`);
-  document.documentElement.setAttribute("data-theme", prefs.theme);
+  document.documentElement.setAttribute("data-theme", resolvedTheme);
+  document.documentElement.setAttribute("data-theme-mode", prefs.theme);
+}
+
+function resolveTheme(theme: ThemeMode): "light" | "dark" {
+  if (theme === "light" || theme === "dark") {
+    return theme;
+  }
+  if (typeof window === "undefined") {
+    return "dark";
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
 
 function normalizeFontSize(value: number | undefined): number {
@@ -84,4 +96,3 @@ function normalizeFontSize(value: number | undefined): number {
   }
   return Math.max(12, Math.min(24, Math.round(input)));
 }
-