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

v0.12.11 new drawer menu notification feature

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-23 22:59:03 -04:00
parent bcd9f4a060
commit dec24eb842
7 changed files with 62 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/package.json
View File

@@ -1,6 +1,6 @@
{
"name": "rosterchirp-frontend",
"version": "0.12.10",
"version": "0.12.11",
"private": true,
"scripts": {
"dev": "vite",

23
frontend/src/components/GlobalBar.jsx
View File

@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
import { useSocket } from '../contexts/SocketContext.jsx';
import { api } from '../utils/api.js';
export default function GlobalBar({ isMobile, showSidebar, onBurger }) {
export default function GlobalBar({ isMobile, showSidebar, onBurger, hasUnread = false }) {
const { connected } = useSocket();
const [settings, setSettings] = useState({ app_name: 'rosterchirp', logo_url: '' });
const [isDark, setIsDark] = useState(() => document.documentElement.getAttribute('data-theme') === 'dark');
@@ -41,11 +41,22 @@ export default function GlobalBar({ isMobile, showSidebar, onBurger }) {
title="Menu"
aria-label="Open menu"
>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
<line x1="3" y1="6" x2="21" y2="6"/>
<line x1="3" y1="12" x2="21" y2="12"/>
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>
<div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
<line x1="3" y1="6" x2="21" y2="6"/>
<line x1="3" y1="12" x2="21" y2="12"/>
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>
{hasUnread && (
<span style={{
position: 'absolute', bottom: -1, right: -1,
width: 9, height: 9, borderRadius: '50%',
background: 'var(--primary)',
border: '2px solid var(--surface)',
flexShrink: 0,
}} />
)}
</div>
</button>
<div className="global-bar-brand">
<img src={logoUrl || '/icons/rosterchirp.png'} alt={appName} className="global-bar-logo" />

9
frontend/src/components/NavDrawer.css
View File

@@ -83,3 +83,12 @@
color: var(--primary);
}
.nav-drawer-item.active:hover { background: var(--primary-light); }
.nav-drawer-unread-dot {
margin-left: auto;
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--primary);
flex-shrink: 0;
}

9
frontend/src/components/NavDrawer.jsx
View File

@@ -13,7 +13,7 @@ const NAV_ICON = {
settings: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="3"/><path d="M19.07 4.93l-1.41 1.41M5.34 18.66l-1.41 1.41M12 2v2M12 20v2M4.93 4.93l1.41 1.41M18.66 18.66l1.41 1.41M2 12h2M20 12h2"/></svg>,
};
export default function NavDrawer({ open, onClose, onMessages, onGroupMessages, onSchedule, onScheduleManager, onBranding, onSettings, onUsers, onGroupManager, onHostPanel, features = {}, currentPage = 'chat', isMobile = false }) {
export default function NavDrawer({ open, onClose, onMessages, onGroupMessages, onSchedule, onScheduleManager, onBranding, onSettings, onUsers, onGroupManager, onHostPanel, features = {}, currentPage = 'chat', isMobile = false, unreadMessages = false, unreadGroupMessages = false }) {
const { user } = useAuth();
const drawerRef = useRef(null);
const isAdmin = user?.role === 'admin';
@@ -36,7 +36,7 @@ export default function NavDrawer({ open, onClose, onMessages, onGroupMessages,
}, [open, onClose]);
const item = (icon, label, onClick, opts = {}) => {
const { active, disabled, badge } = opts;
const { active, disabled, badge, dot } = opts;
return (
<button
className={`nav-drawer-item${active ? ' active' : ''}${disabled ? ' disabled' : ''}`}
@@ -46,6 +46,7 @@ export default function NavDrawer({ open, onClose, onMessages, onGroupMessages,
{icon}
<span>{label}</span>
{badge && <span className="nav-drawer-badge">{badge}</span>}
{dot && <span className="nav-drawer-unread-dot" />}
</button>
);
};
@@ -64,8 +65,8 @@ export default function NavDrawer({ open, onClose, onMessages, onGroupMessages,
</div>
{/* User section */}
{item(NAV_ICON.messages, 'Messages', onMessages, { active: currentPage === 'chat' })}
{hasUserGroups && item(NAV_ICON.groupmessages, 'Group Messages', onGroupMessages, { active: currentPage === 'groupmessages' })}
{item(NAV_ICON.messages, 'Messages', onMessages, { active: currentPage === 'chat', dot: unreadMessages })}
{hasUserGroups && item(NAV_ICON.groupmessages, 'Group Messages', onGroupMessages, { active: currentPage === 'groupmessages', dot: unreadGroupMessages })}
{features.scheduleManager && item(NAV_ICON.schedules, 'Schedules', onSchedule, { active: currentPage === 'schedule' })}
{/* Admin section */}

50
frontend/src/pages/Chat.jsx
View File

@@ -395,10 +395,20 @@ export default function Chat() {
const isToolManager = user?.role === 'admin' || (features.teamToolManagers || []).some(gid => (features.userGroupMemberships || []).includes(gid));
// Unread indicators for burger icon and nav drawer
const allGroupsFlat = [...(groups.publicGroups || []), ...(groups.privateGroups || [])];
const hasUnreadChat = allGroupsFlat.some(g =>
(g.type === 'public' || !g.is_managed) && (unreadGroups.get(g.id) || 0) > 0
);
const hasUnreadGroupMessages = (groups.privateGroups || []).some(g =>
g.is_managed && (unreadGroups.get(g.id) || 0) > 0
);
const hasAnyUnread = hasUnreadChat || hasUnreadGroupMessages;
if (page === 'users') {
return (
<div className="chat-layout">
<GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} />
<GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
<div className="chat-body" style={{ overflow: 'hidden' }}>
<UserManagerPage isMobile={isMobile} onProfile={() => setModal('profile')} onHelp={() => setModal('help')} onAbout={() => setModal('about')} />
</div>
@@ -412,7 +422,8 @@ export default function Chat() {
onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
onUsers={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
features={features} currentPage={page} isMobile={isMobile} />
features={features} currentPage={page} isMobile={isMobile}
unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
{modal === 'profile' && <ProfileModal onClose={() => setModal(null)} />}
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
{modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
@@ -425,20 +436,10 @@ export default function Chat() {
if (page === 'groups') {
return (
<div className="chat-layout">
<GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} />
<GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
<div className="chat-body" style={{ overflow: 'hidden' }}>
<GroupManagerPage isMobile={isMobile} onProfile={() => setModal('profile')} onHelp={() => setModal('help')} onAbout={() => setModal('about')} />
</div>
<NavDrawer
open={drawerOpen} onClose={() => setDrawerOpen(false)}
onMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('chat'); }}
onSchedule={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('schedule'); }}
onGroupManager={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('groups'); }}
onBranding={() => { setDrawerOpen(false); setModal('branding'); }}
onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
onUsers={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
features={features} currentPage={page} isMobile={isMobile} />
<NavDrawer
open={drawerOpen} onClose={() => setDrawerOpen(false)}
onMessages={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('chat'); }}
@@ -449,7 +450,8 @@ export default function Chat() {
onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
onUsers={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
features={features} currentPage={page} isMobile={isMobile} />
features={features} currentPage={page} isMobile={isMobile}
unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
{modal === 'profile' && <ProfileModal onClose={() => setModal(null)} />}
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
{modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
@@ -462,7 +464,7 @@ export default function Chat() {
if (page === 'groupmessages') {
return (
<div className="chat-layout">
<GlobalBar isMobile={isMobile} showSidebar={showSidebar} onBurger={() => setDrawerOpen(true)} />
<GlobalBar isMobile={isMobile} showSidebar={showSidebar} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
<div className="chat-body">
{(!isMobile || showSidebar) && (
<Sidebar
@@ -506,7 +508,8 @@ export default function Chat() {
onSettings={() => { setDrawerOpen(false); setModal('settings'); }}
onUsers={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('users'); }}
onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
features={features} currentPage={page} isMobile={isMobile} />
features={features} currentPage={page} isMobile={isMobile}
unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
{modal === 'profile' && <ProfileModal onClose={() => setModal(null)} />}
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
{modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
@@ -520,7 +523,7 @@ export default function Chat() {
if (page === 'hostpanel') {
return (
<div className="chat-layout">
<GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} />
<GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
<div className="chat-body" style={{ overflow: 'hidden' }}>
<HostPanel onProfile={() => setModal('profile')} onHelp={() => setModal('help')} onAbout={() => setModal('about')} />
</div>
@@ -538,7 +541,8 @@ export default function Chat() {
onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
features={features}
currentPage={page}
isMobile={isMobile} />
isMobile={isMobile}
unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
{modal === 'profile' && <ProfileModal onClose={() => setModal(null)} />}
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
{modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
@@ -551,7 +555,7 @@ export default function Chat() {
if (page === 'schedule') {
return (
<div className="chat-layout">
<GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} />
<GlobalBar isMobile={isMobile} showSidebar={true} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
<div className="chat-body" style={{ overflow: 'hidden' }}>
<SchedulePage
isToolManager={isToolManager}
@@ -575,7 +579,8 @@ export default function Chat() {
onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
features={features}
currentPage={page}
isMobile={isMobile} />
isMobile={isMobile}
unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
{modal === 'profile' && <ProfileModal onClose={() => setModal(null)} />}
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
{modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}
@@ -594,7 +599,7 @@ export default function Chat() {
return (
<div className="chat-layout">
{/* Global top bar — spans full width on desktop, visible on mobile sidebar view */}
<GlobalBar isMobile={isMobile} showSidebar={showSidebar} onBurger={() => setDrawerOpen(true)} />
<GlobalBar isMobile={isMobile} showSidebar={showSidebar} onBurger={() => setDrawerOpen(true)} hasUnread={hasAnyUnread} />
<div className="chat-body">
{(!isMobile || showSidebar) && (
@@ -645,7 +650,8 @@ export default function Chat() {
onHostPanel={() => { setDrawerOpen(false); setActiveGroupId(null); setChatHasText(false); setPage('hostpanel'); }}
features={features}
currentPage={page}
isMobile={isMobile} />
isMobile={isMobile}
unreadMessages={hasUnreadChat} unreadGroupMessages={hasUnreadGroupMessages} />
{modal === 'profile' && <ProfileModal onClose={() => setModal(null)} />}
{modal === 'settings' && <SettingsModal onClose={() => setModal(null)} onFeaturesChanged={setFeatures} />}
{modal === 'branding' && <BrandingModal onClose={() => setModal(null)} />}