feat(web): add telegram-like message status indicators

- optimistic sending state with pending clock icon

- transition statuses sent -> delivered -> read via realtime events

- render checkmarks next to outgoing message timestamps

web/src/components/MessageList.tsx

@@ -31,7 +31,10 @@ export function MessageList() {
               ) : (
                 renderContent(message.type, message.text)
               )}
-              <p className="mt-1 text-right text-[11px] text-slate-400">{formatTime(message.created_at)}</p>
+              <p className="mt-1 flex items-center justify-end gap-1 text-right text-[11px] text-slate-400">
+                <span>{formatTime(message.created_at)}</span>
+                {message.sender_id === me?.id ? <span className={message.delivery_status === "read" ? "text-sky-400" : ""}>{renderStatus(message.delivery_status)}</span> : null}
+              </p>
             </div>
           </div>
         ))}
@@ -61,6 +64,19 @@ export function MessageList() {
           Open file
         </a>
       );
-    }
+  }
     return <p className="whitespace-pre-wrap break-words">{text}</p>;
   }
+
+function renderStatus(status: string | undefined): string {
+  if (status === "sending") {
+    return "⌛";
+  }
+  if (status === "delivered") {
+    return "✓✓";
+  }
+  if (status === "read") {
+    return "✓✓";
+  }
+  return "✓";
+}