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/components/MessageList.tsx

@@ -27,9 +27,9 @@ export function MessageList() {
           <div className={`mb-3 flex ${message.sender_id === me?.id ? "justify-end" : "justify-start"}`} key={message.id}>
             <div className="max-w-[80%] rounded-lg bg-slate-800 px-3 py-2">
               {message.type === "voice" && message.text ? (
-                <audio controls src={message.text} />
+                renderContent(message.type, message.text)
               ) : (
-                <p className="whitespace-pre-wrap break-words">{message.text}</p>
+                renderContent(message.type, message.text)
               )}
               <p className="mt-1 text-right text-[11px] text-slate-400">{formatTime(message.created_at)}</p>
             </div>
@@ -42,3 +42,25 @@ export function MessageList() {
     </div>
   );
 }
+  function renderContent(messageType: string, text: string | null) {
+    if (!text) {
+      return <p className="text-slate-300">[empty]</p>;
+    }
+    if (messageType === "image") {
+      return <img alt="attachment" className="max-h-64 rounded" src={text} />;
+    }
+    if (messageType === "video" || messageType === "circle_video") {
+      return <video className="max-h-64 rounded" controls src={text} />;
+    }
+    if (messageType === "audio" || messageType === "voice") {
+      return <audio controls src={text} />;
+    }
+    if (messageType === "file") {
+      return (
+        <a className="text-accent underline" href={text} rel="noreferrer" target="_blank">
+          Open file
+        </a>
+      );
+    }
+    return <p className="whitespace-pre-wrap break-words">{text}</p>;
+  }