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/hooks/useRealtime.ts

@@ -255,9 +255,10 @@ function maybeShowBrowserNotification(chatId: number, message: Message, activeCh
     return;
   }
   const title = chat?.display_title || chat?.title || "New message";
-  const body = prefs.messagePreview ? (message.text?.trim() || messagePreviewByType(message.type)) : "New message";
+  const preview = buildNotificationPreview(message, prefs.messagePreview);
   const notification = new Notification(title, {
-    body,
+    body: preview.body,
+    icon: preview.image,
     tag: `chat-${chatId}`,
   });
   notification.onclick = () => {
@@ -278,3 +279,33 @@ function messagePreviewByType(type: Message["type"]): string {
   if (type === "circle_video") return "Video message";
   return "New message";
 }
+
+function buildNotificationPreview(
+  message: Message,
+  withPreview: boolean
+): { body: string; image?: string } {
+  if (!withPreview) {
+    return { body: "New message" };
+  }
+  if (message.type !== "text") {
+    if (message.type === "image") {
+      const imageUrl = typeof message.text === "string" && isLikelyUrl(message.text) ? message.text : undefined;
+      return { body: "🖼 Photo", image: imageUrl };
+    }
+    return { body: messagePreviewByType(message.type) };
+  }
+  const text = message.text?.trim();
+  if (!text) {
+    return { body: "New message" };
+  }
+  return { body: text };
+}
+
+function isLikelyUrl(value: string): boolean {
+  try {
+    const parsed = new URL(value);
+    return parsed.protocol === "http:" || parsed.protocol === "https:";
+  } catch {
+    return false;
+  }
+}