V0.7.1 New user online and pin features

frontend/src/components/Sidebar.jsx

@@ -45,16 +45,45 @@ function useAppSettings() {
   return settings;
 }
 
-export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifications, unreadGroups = new Map(), onNewChat, onProfile, onUsers, onSettings: onOpenSettings, onGroupsUpdated, isMobile, onAbout, onHelp }) {
+export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifications, unreadGroups = new Map(), onNewChat, onProfile, onUsers, onSettings: onOpenSettings, onGroupsUpdated, isMobile, onAbout, onHelp, onlineUserIds = new Set() }) {
   const { user, logout } = useAuth();
   const { connected } = useSocket();
   const toast = useToast();
   const [showMenu, setShowMenu] = useState(false);
+  const [contextMenu, setContextMenu] = useState(null); // { groupId, x, y, isPinned }
   const settings = useAppSettings();
   const [dark, setDark] = useTheme();
   const menuRef = useRef(null);
   const footerBtnRef = useRef(null);
 
+  const handlePin = async (groupId) => {
+    try {
+      await api.pinDM(groupId);
+      onGroupsUpdated();
+    } catch (e) { toast(e.message, 'error'); }
+    setContextMenu(null);
+  };
+
+  const handleUnpin = async (groupId) => {
+    try {
+      await api.unpinDM(groupId);
+      onGroupsUpdated();
+    } catch (e) { toast(e.message, 'error'); }
+    setContextMenu(null);
+  };
+
+  // Close context menu on outside click
+  useEffect(() => {
+    if (!contextMenu) return;
+    const close = () => setContextMenu(null);
+    document.addEventListener('mousedown', close);
+    document.addEventListener('touchstart', close);
+    return () => {
+      document.removeEventListener('mousedown', close);
+      document.removeEventListener('touchstart', close);
+    };
+  }, [contextMenu]);
+
   // Fix 6: swipe right to go back on mobile — handled in ChatWindow, but prevent sidebar swipe exit
   // Close menu on click outside
   useEffect(() => {
@@ -82,7 +111,20 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
   ];
 
   const publicFiltered = allGroups.filter(g => g.type === 'public');
-  const privateFiltered = allGroups.filter(g => g.type === 'private');
+  const pinnedDMs = allGroups
+    .filter(g => g.type === 'private' && g.is_direct && g.pin_order != null)
+    .sort((a, b) => a.pin_order - b.pin_order);
+  const unpinnedDMs = allGroups
+    .filter(g => g.type === 'private' && g.is_direct && g.pin_order == null)
+    .sort((a, b) => {
+      if (!a.last_message_at && !b.last_message_at) return 0;
+      if (!a.last_message_at) return 1;
+      if (!b.last_message_at) return -1;
+      return new Date(b.last_message_at) - new Date(a.last_message_at);
+    });
+  const privateNonDM = allGroups.filter(g => g.type === 'private' && !g.is_direct);
+  const privateFiltered = [...privateNonDM, ...pinnedDMs, ...unpinnedDMs];
+  const pinnedGroupIds = new Set(pinnedDMs.map(g => g.id));
 
   const getNotifCount = (groupId) => notifications.filter(n => n.groupId === groupId).length;
 
@@ -93,21 +135,37 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
     const unreadCount = unreadGroups.get(group.id) || 0;
     const hasUnread = unreadCount > 0;
     const isActive = group.id === activeGroupId;
+    const isPinned = pinnedGroupIds.has(group.id);
+    const isOnline = group.is_direct && group.peer_id && onlineUserIds.has(group.peer_id);
+
+    const handleContextMenu = (e) => {
+      if (!group.is_direct) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setContextMenu({ groupId: group.id, x: e.clientX, y: e.clientY, isPinned });
+    };
 
     return (
-      <div className={`group-item ${isActive ? 'active' : ''} ${hasUnread ? 'has-unread' : ''}`} onClick={() => onSelectGroup(group.id)}>
-        {group.is_direct && group.peer_avatar ? (
-          <img
-            src={group.peer_avatar}
-            alt={group.name}
-            className="group-icon"
-            style={{ objectFit: 'cover', padding: 0 }}
-          />
-        ) : (
-          <div className="group-icon" style={{ background: group.type === 'public' ? '#1a73e8' : '#a142f4' }}>
-            {group.type === 'public' ? '#' : group.is_direct ? (group.peer_real_name || group.name)[0]?.toUpperCase() : group.name[0]?.toUpperCase()}
-          </div>
-        )}
+      <div
+        className={`group-item ${isActive ? 'active' : ''} ${hasUnread ? 'has-unread' : ''}`}
+        onClick={() => onSelectGroup(group.id)}
+        onContextMenu={handleContextMenu}
+      >
+        <div className="group-icon-wrap">
+          {group.is_direct && group.peer_avatar ? (
+            <img
+              src={group.peer_avatar}
+              alt={group.name}
+              className="group-icon"
+              style={{ objectFit: 'cover', padding: 0 }}
+            />
+          ) : (
+            <div className="group-icon" style={{ background: group.type === 'public' ? '#1a73e8' : '#a142f4' }}>
+              {group.type === 'public' ? '#' : group.is_direct ? (group.peer_real_name || group.name)[0]?.toUpperCase() : group.name[0]?.toUpperCase()}
+            </div>
+          )}
+          {isOnline && <span className="online-dot" />}
+        </div>
         <div className="group-info flex-1 overflow-hidden">
           <div className="flex items-center justify-between">
             <span className={`group-name truncate ${hasUnread ? 'unread-name' : ''}`}>
@@ -161,7 +219,18 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
         {privateFiltered.length > 0 && (
           <div className="group-section">
             <div className="section-label">DIRECT MESSAGES</div>
-            {privateFiltered.map(g => <GroupItem key={g.id} group={g} />)}
+            {pinnedDMs.length > 0 && (
+              <>
+                <div className="section-sublabel">
+                  <svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor" style={{ marginRight: 3 }}><path d="M16 2v4l-3 3v7l-4-4-4 4V9L2 6V2h14zm2 0h2v2h-2V2z"/></svg>
+                  PINNED
+                </div>
+                {pinnedDMs.map(g => <GroupItem key={g.id} group={g} />)}
+                {unpinnedDMs.length > 0 && <div className="section-divider" />}
+              </>
+            )}
+            {privateNonDM.map(g => <GroupItem key={g.id} group={g} />)}
+            {unpinnedDMs.map(g => <GroupItem key={g.id} group={g} />)}
           </div>
         )}
         {allGroups.length === 0 && (
@@ -250,6 +319,26 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
           </div>
         )}
       </div>
+      {/* DM pin context menu */}
+      {contextMenu && (
+        <div
+          className="dm-context-menu"
+          style={{ top: contextMenu.y, left: Math.min(contextMenu.x, window.innerWidth - 160) }}
+          onMouseDown={e => e.stopPropagation()}
+        >
+          {contextMenu.isPinned ? (
+            <button onClick={() => handleUnpin(contextMenu.groupId)}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M16 2v4l-3 3v7l-4-4-4 4V9L2 6V2h14zm2 0h2v2h-2V2z"/></svg>
+              Unpin conversation
+            </button>
+          ) : (
+            <button onClick={() => handlePin(contextMenu.groupId)}>
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M16 2v4l-3 3v7l-4-4-4 4V9L2 6V2h14zm2 0h2v2h-2V2z"/></svg>
+              Pin conversation
+            </button>
+          )}
+        </div>
+      )}
     </div>
   );
 }