V0.8.8 removed the pinning feature

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jama-frontend",
-  "version": "0.8.7",
+  "version": "0.8.8",
   "private": true,
   "scripts": {
     "dev": "vite",

frontend/src/components/Sidebar.css

@@ -154,55 +154,6 @@
   flex-shrink: 0;
 }
 
-/* Conversation pin button — visible on hover (desktop) or always when pinned */
-.group-item-actions {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  flex-shrink: 0;
-}
-
-.conv-pin-btn {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: 22px;
-  height: 22px;
-  border-radius: 4px;
-  color: var(--text-tertiary);
-  opacity: 0;
-  transition: opacity var(--transition), color var(--transition), background var(--transition);
-  flex-shrink: 0;
-}
-.conv-pin-btn:hover { background: var(--border); color: var(--primary); }
-.conv-pin-btn.pinned {
-  display: flex;
-  opacity: 1;
-  color: var(--primary);
-}
-.group-item:hover .conv-pin-btn {
-  display: flex;
-  opacity: 0.7;
-}
-.group-item:hover .conv-pin-btn:hover { opacity: 1; }
-
-/* Small pin icon inline before the name when conversation is pinned */
-.conv-pin-indicator {
-  display: inline;
-  vertical-align: middle;
-  margin-right: 3px;
-  color: var(--primary);
-  opacity: 0.7;
-  position: relative;
-  top: -1px;
-}
-
-/* Pinned conversations get a subtle left accent */
-.group-item.is-pinned {
-  border-left: 2px solid var(--primary);
-  padding-left: 14px;
-}
-
 .group-last-msg {
   font-size: 13px;
   color: var(--text-secondary);
@@ -299,25 +250,6 @@
   pointer-events: none;
 }
 
-/* Pin sublabel */
-.section-sublabel {
-  display: flex;
-  align-items: center;
-  font-size: 10px;
-  font-weight: 600;
-  letter-spacing: 0.06em;
-  color: var(--text-tertiary);
-  padding: 4px 12px 2px;
-  text-transform: uppercase;
-}
-
-/* Thin divider between pinned and unpinned */
-.section-divider {
-  height: 1px;
-  background: var(--border);
-  margin: 4px 12px;
-  opacity: 0.6;
-}
 
 /* DM right-click context menu */
 .dm-context-menu {

frontend/src/components/Sidebar.jsx

@@ -8,43 +8,49 @@ import './Sidebar.css';
 
 function useTheme() {
   const [dark, setDark] = useState(() => localStorage.getItem('jama-theme') === 'dark');
-
   useEffect(() => {
     document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
     localStorage.setItem('jama-theme', dark ? 'dark' : 'light');
   }, [dark]);
-
   return [dark, setDark];
 }
 
 function useAppSettings() {
   const [settings, setSettings] = useState({ app_name: 'jama', logo_url: '' });
-
   const fetchSettings = () => {
     api.getSettings().then(({ settings }) => setSettings(settings)).catch(() => {});
   };
-
   useEffect(() => {
     fetchSettings();
     window.addEventListener('jama:settings-changed', fetchSettings);
     return () => window.removeEventListener('jama:settings-changed', fetchSettings);
   }, []);
-
   useEffect(() => {
     const name = settings.app_name || 'jama';
-    // Preserve any unread badge prefix already set by Chat.jsx
     const prefix = document.title.match(/^(\(\d+\)\s*)/)?.[1] || '';
     document.title = prefix + name;
-    const logoUrl = settings.logo_url;
-    const faviconUrl = logoUrl || '/icons/jama.png';
+    const faviconUrl = settings.logo_url || '/icons/jama.png';
     let link = document.querySelector("link[rel~='icon']");
     if (!link) { link = document.createElement('link'); link.rel = 'icon'; document.head.appendChild(link); }
     link.href = faviconUrl;
   }, [settings]);
-
   return settings;
 }
 
+function formatTime(dateStr) {
+  if (!dateStr) return '';
+  const date = parseTS(dateStr);
+  const now = new Date();
+  const diff = now - date;
+  if (diff < 86400000 && date.getDate() === now.getDate()) {
+    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  }
+  if (diff < 604800000) {
+    return date.toLocaleDateString([], { weekday: 'short' });
+  }
+  return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
+}
+
 export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifications, unreadGroups = new Map(), onNewChat, onProfile, onUsers, onSettings: onOpenSettings, onBranding, onGroupsUpdated, isMobile, onAbout, onHelp, onlineUserIds = new Set() }) {
   const { user, logout } = useAuth();
   const { connected } = useSocket();
@@ -55,8 +61,6 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
   const menuRef = useRef(null);
   const footerBtnRef = useRef(null);
 
-  // Fix 6: swipe right to go back on mobile — handled in ChatWindow, but prevent sidebar swipe exit
-  // Close menu on click outside
   useEffect(() => {
     if (!showMenu) return;
     const handler = (e) => {
@@ -73,59 +77,21 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
     };
   }, [showMenu]);
 
-  const appName = settings.app_name || 'jama';
-  const logoUrl = settings.logo_url;
-
-  // Conversation pinning — derive from groups data (is_pinned flag from backend)
-  const [pinnedConvIds, setPinnedConvIds] = useState(new Set());
-
-  // Sync pinnedConvIds whenever groups data changes
-  useEffect(() => {
-    const allG = [...(groups.publicGroups || []), ...(groups.privateGroups || [])];
-    setPinnedConvIds(new Set(allG.filter(g => g.is_pinned).map(g => g.id)));
-  }, [groups]);
-
-  const handlePinConversation = async (e, groupId) => {
-    e.stopPropagation();
-    try {
-      await api.pinConversation(groupId);
-      setPinnedConvIds(prev => new Set([...prev, groupId]));
-    } catch (err) {
-      toast('Could not pin conversation', 'error');
-    }
-  };
-
-  const handleUnpinConversation = async (e, groupId) => {
-    e.stopPropagation();
-    try {
-      await api.unpinConversation(groupId);
-      setPinnedConvIds(prev => { const n = new Set(prev); n.delete(groupId); return n; });
-    } catch (err) {
-      toast('Could not unpin conversation', 'error');
-    }
-  };
-
   const allGroups = [
     ...(groups.publicGroups || []),
     ...(groups.privateGroups || [])
   ];
 
   const publicFiltered = allGroups.filter(g => g.type === 'public');
-  // All private groups (DMs + group chats) sorted together by most recent message
-  const sortWithPinned = (arr) => [...arr].sort((a, b) => {
-    const aPinned = pinnedConvIds.has(a.id) ? 1 : 0;
-    const bPinned = pinnedConvIds.has(b.id) ? 1 : 0;
-    if (bPinned !== aPinned) return bPinned - aPinned;
+
+  const privateFiltered = [...allGroups.filter(g => g.type === 'private')].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 privateFiltered = sortWithPinned(allGroups.filter(g => g.type === 'private'));
-
   const getNotifCount = (groupId) => notifications.filter(n => n.groupId === groupId).length;
-
   const handleLogout = async () => { await logout(); };
 
   const GroupItem = ({ group }) => {
@@ -134,33 +100,15 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
     const hasUnread = unreadCount > 0;
     const isActive = group.id === activeGroupId;
     const isOnline = !!group.is_direct && !!group.peer_id && (onlineUserIds instanceof Set ? onlineUserIds.has(Number(group.peer_id)) : false);
-    const isPinned = pinnedConvIds.has(group.id);
-    // Long-press for mobile pin
-    const longPressTimer = useRef(null);
-    const handleTouchStart = () => {
-      longPressTimer.current = setTimeout(() => {
-        isPinned ? handleUnpinConversation({ stopPropagation: () => {} }, group.id)
-                 : handlePinConversation({ stopPropagation: () => {} }, group.id);
-      }, 600);
-    };
-    const handleTouchEnd = () => clearTimeout(longPressTimer.current);
 
     return (
       <div
-        className={`group-item ${isActive ? 'active' : ''} ${hasUnread ? 'has-unread' : ''} ${isPinned ? 'is-pinned' : ''}`}
+        className={`group-item ${isActive ? 'active' : ''} ${hasUnread ? 'has-unread' : ''}`}
         onClick={() => onSelectGroup(group.id)}
-        onTouchStart={handleTouchStart}
-        onTouchEnd={handleTouchEnd}
-        onTouchMove={handleTouchEnd}
       >
         <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 }}
-            />
+            <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()}
@@ -171,37 +119,21 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
         <div className="group-info flex-1 overflow-hidden">
           <div className="flex items-center justify-between">
             <span className={`group-name truncate ${hasUnread ? 'unread-name' : ''}`}>
-              {isPinned && (
-                <svg className="conv-pin-indicator" width="10" height="10" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M16 2v4l-3 3v6l-2-2-2 2V9L6 6V2h10z"/>
-                </svg>
-              )}
               {group.is_direct && group.peer_display_name
                 ? <>{group.peer_display_name}<span className="dm-real-name"> ({group.peer_real_name})</span></>
                 : group.is_direct && group.peer_real_name ? group.peer_real_name : group.name}
             </span>
-            <div className="group-item-actions">
-              {group.last_message_at && (
-                <span className="group-time">{formatTime(group.last_message_at)}</span>
-              )}
-              <button
-                className={`conv-pin-btn ${isPinned ? 'pinned' : ''}`}
-                onClick={(e) => isPinned ? handleUnpinConversation(e, group.id) : handlePinConversation(e, group.id)}
-                title={isPinned ? 'Unpin conversation' : 'Pin to top'}
-              >
-                <svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M16 2v4l-3 3v6l-2-2-2 2V9L6 6V2h10z"/>
-                </svg>
-              </button>
-            </div>
+            {group.last_message_at && (
+              <span className="group-time">{formatTime(group.last_message_at)}</span>
+            )}
           </div>
           <div className="flex items-center justify-between gap-2">
             <span className="group-last-msg truncate">
-{(() => {
+              {(() => {
                 const preview = (group.last_message || '').replace(/@\[([^\]]+)\]/g, '@$1');
                 if (!preview) return group.is_readonly ? '📢 Read-only' : 'No messages yet';
                 const isOwn = group.last_message_user_id && user && group.last_message_user_id === user.id;
-                return isOwn ? <><strong style={{fontWeight:600}}>You:</strong> {preview}</> : preview;
+                return isOwn ? <><strong style={{ fontWeight: 600 }}>You:</strong> {preview}</> : preview;
               })()}
             </span>
             {notifs > 0 && <span className="badge shrink-0">{notifs}</span>}
@@ -214,7 +146,6 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
 
   return (
     <div className="sidebar">
-      {/* New Chat button replacing search bar */}
       <div className="sidebar-newchat-bar">
         {!isMobile && (
           <button className="newchat-btn" onClick={onNewChat}>
@@ -226,7 +157,6 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
         )}
       </div>
 
-      {/* Groups list */}
       <div className="groups-list">
         {publicFiltered.length > 0 && (
           <div className="group-section">
@@ -247,7 +177,6 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
         )}
       </div>
 
-      {/* Mobile FAB: New Chat button floats above user footer */}
       {isMobile && (
         <button className="newchat-fab" onClick={onNewChat} title="New Chat">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" width="24" height="24">
@@ -256,7 +185,6 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
         </button>
       )}
 
-      {/* User footer */}
       <div className="sidebar-footer">
         <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
           <button ref={footerBtnRef} className="user-footer-btn" style={{ flex: 1 }} onClick={() => setShowMenu(!showMenu)}>
@@ -333,18 +261,3 @@ export default function Sidebar({ groups, activeGroupId, onSelectGroup, notifica
     </div>
   );
 }
-
-function formatTime(dateStr) {
-  if (!dateStr) return '';
-  const date = parseTS(dateStr);
-  const now = new Date();
-  const diff = now - date;
-  if (diff < 86400000 && date.getDate() === now.getDate()) {
-    return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
-  }
-  if (diff < 604800000) {
-    return date.toLocaleDateString([], { weekday: 'short' });
-  }
-  return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
-}
-

frontend/src/utils/api.js

@@ -122,9 +122,7 @@ export const api = {
   // Link preview
   getLinkPreview: (url) => req('GET', `/link-preview?url=${encodeURIComponent(url)}`),
 
-  // Conversation pinning (pin a group to top of sidebar)
-  pinConversation:   (groupId) => req('POST',   `/groups/${groupId}/pin`),
-  unpinConversation: (groupId) => req('DELETE',  `/groups/${groupId}/pin`),
+
 
   // VAPID key management (admin only)
   generateVapidKeys: () => req('POST', '/push/generate-vapid'),