feat: realtime sync, settings UX and chat list improvements

- add chat_updated realtime event and dynamic chat subscriptions

- auto-join invite links in web app

- implement Telegram-like settings panel (general/notifications/privacy)

- add browser notification preferences and keyboard send mode

- improve chat list with last message preview/time and online badge

- rework chat members UI with context actions and role crowns

web/src/app/App.tsx

@@ -1,8 +1,12 @@
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
+import { joinByInvite } from "../api/chats";
 import { ToastViewport } from "../components/ToastViewport";
 import { AuthPage } from "../pages/AuthPage";
 import { ChatsPage } from "../pages/ChatsPage";
 import { useAuthStore } from "../store/authStore";
+import { useChatStore } from "../store/chatStore";
+
+const PENDING_INVITE_TOKEN_KEY = "bm_pending_invite_token";
 
 export function App() {
   const accessToken = useAuthStore((s) => s.accessToken);
@@ -10,6 +14,9 @@ export function App() {
   const loadMe = useAuthStore((s) => s.loadMe);
   const refresh = useAuthStore((s) => s.refresh);
   const logout = useAuthStore((s) => s.logout);
+  const loadChats = useChatStore((s) => s.loadChats);
+  const setActiveChatId = useChatStore((s) => s.setActiveChatId);
+  const [joiningInvite, setJoiningInvite] = useState(false);
 
   useEffect(() => {
     if (!accessToken) {
@@ -25,6 +32,36 @@ export function App() {
     });
   }, [accessToken, loadMe, refresh, logout]);
 
+  useEffect(() => {
+    const token = extractInviteTokenFromLocation();
+    if (!token) {
+      return;
+    }
+    window.localStorage.setItem(PENDING_INVITE_TOKEN_KEY, token);
+    window.history.replaceState(null, "", "/");
+  }, []);
+
+  useEffect(() => {
+    if (!accessToken || !me || joiningInvite) {
+      return;
+    }
+    const token = window.localStorage.getItem(PENDING_INVITE_TOKEN_KEY);
+    if (!token) {
+      return;
+    }
+    setJoiningInvite(true);
+    void (async () => {
+      try {
+        const chat = await joinByInvite(token);
+        await loadChats();
+        setActiveChatId(chat.id);
+        window.localStorage.removeItem(PENDING_INVITE_TOKEN_KEY);
+      } finally {
+        setJoiningInvite(false);
+      }
+    })();
+  }, [accessToken, me, joiningInvite, loadChats, setActiveChatId]);
+
   if (!accessToken || !me) {
     return <AuthPage />;
   }
@@ -35,3 +72,16 @@ export function App() {
     </>
   );
 }
+
+function extractInviteTokenFromLocation(): string | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const url = new URL(window.location.href);
+  const tokenFromQuery = url.searchParams.get("token")?.trim();
+  if (tokenFromQuery) {
+    return tokenFromQuery;
+  }
+  const match = url.pathname.match(/^\/join\/([^/]+)$/i);
+  return match?.[1]?.trim() || null;
+}