v0.11.10 ui changes

frontend/src/components/ChatWindow.jsx

@@ -8,7 +8,7 @@ import { useSocket } from '../contexts/SocketContext.jsx';
 import './ChatWindow.css';
 import GroupInfoModal from './GroupInfoModal.jsx';
 
-export default function ChatWindow({ group, onBack, onGroupUpdated, onDirectMessage, onlineUserIds = new Set() }) {
+export default function ChatWindow({ group, onBack, onGroupUpdated, onDirectMessage, onMessageDeleted, onlineUserIds = new Set() }) {
   const { user: currentUser } = useAuth();
   const { socket } = useSocket();
   const { toast } = useToast();
@@ -82,10 +82,17 @@ export default function ChatWindow({ group, onBack, onGroupUpdated, onDirectMess
       setTimeout(() => scrollToBottom(true), 50);
     };
 
-    const handleDeleted = ({ messageId }) => {
-      setMessages(prev => prev.map(m =>
-        m.id === messageId ? { ...m, is_deleted: 1, content: null, image_url: null } : m
-      ));
+    const handleDeleted = ({ messageId, groupId }) => {
+      setMessages(prev => {
+        const updated = prev.map(m =>
+          m.id === messageId ? { ...m, is_deleted: 1, content: null, image_url: null } : m
+        );
+        // Notify Chat.jsx so the sidebar preview updates immediately — pass the
+        // post-delete messages so it can derive the new last non-deleted message
+        // without an extra API call.
+        onMessageDeleted?.({ groupId, messages: updated });
+        return updated;
+      });
     };
 
     const handleReaction = ({ messageId, reactions }) => {

frontend/src/pages/Chat.jsx

@@ -146,6 +146,30 @@ export default function Chat() {
     return () => document.removeEventListener('visibilitychange', handleVisibility);
   }, []);
 
+  // When a message is deleted, update the sidebar preview immediately.
+  // ChatWindow passes back the full post-delete messages array so we can derive
+  // the new latest non-deleted message without an extra API call.
+  const handleMessageDeleted = useCallback(({ groupId, messages: updatedMessages }) => {
+    const latest = [...updatedMessages]
+      .reverse()
+      .find(m => !m.is_deleted);
+    setGroups(prev => {
+      const updateGroup = (g) => {
+        if (g.id !== groupId) return g;
+        return {
+          ...g,
+          last_message:         latest ? (latest.content || (latest.image_url ? '📷 Image' : '')) : null,
+          last_message_at:      latest ? latest.created_at : null,
+          last_message_user_id: latest ? latest.user_id    : null,
+        };
+      };
+      return {
+        publicGroups:  prev.publicGroups.map(updateGroup),
+        privateGroups: prev.privateGroups.map(updateGroup),
+      };
+    });
+  }, []);
+
   // Socket message events to update group previews
   useEffect(() => {
     if (!socket) return;
@@ -490,6 +514,7 @@ export default function Chat() {
             onBack={isMobile ? () => { setShowSidebar(true); setActiveGroupId(null); } : null}
             onGroupUpdated={loadGroups}
             onDirectMessage={(g) => { loadGroups(); selectGroup(g.id); }}
+            onMessageDeleted={handleMessageDeleted}
             onlineUserIds={onlineUserIds} />
         )}
       </div>