feat: improve chat realtime and media composer UX

- add media preview and upload confirmation for image/video

- add upload progress tracking for presigned uploads

- keep voice recording/upload flow with better UI states

- include related realtime/chat updates currently in working tree

web/src/hooks/useRealtime.ts

@@ -14,6 +14,8 @@ export function useRealtime() {
   const accessToken = useAuthStore((s) => s.accessToken);
   const me = useAuthStore((s) => s.me);
   const prependMessage = useChatStore((s) => s.prependMessage);
+  const loadChats = useChatStore((s) => s.loadChats);
+  const chats = useChatStore((s) => s.chats);
   const typingByChat = useRef<Record<number, Set<number>>>({});
 
   const wsUrl = useMemo(() => {
@@ -32,6 +34,9 @@ export function useRealtime() {
         const chatId = Number(event.payload.chat_id);
         const message = event.payload.message as Message;
         prependMessage(chatId, message);
+        if (!chats.some((chat) => chat.id === chatId)) {
+          void loadChats();
+        }
       }
       if (event.event === "typing_start") {
         const chatId = Number(event.payload.chat_id);
@@ -54,7 +59,7 @@ export function useRealtime() {
     };
 
     return () => ws.close();
-  }, [wsUrl, prependMessage, me?.id]);
+  }, [wsUrl, prependMessage, loadChats, chats, me?.id]);
 
   return null;
 }