rick/rosterchirp-dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V0.8.8 removed the pinning feature

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-13 12:57:36 -04:00
parent 83b2105a9a
commit 9f7266bc6a
8 changed files with 32 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
frontend/src/components/Sidebar.css
View File

@@ -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 {

135
frontend/src/components/Sidebar.jsx
View File

@@ -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' });
}

4
frontend/src/utils/api.js
View File

@@ -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'),