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

v0.10.9 update ui settings

Browse Source
This commit is contained in:
Ricky Stretch
2026-03-20 22:28:14 -04:00
parent 8a99fb5ed6
commit d2c157e8d0
7 changed files with 132 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
frontend/src/pages/GroupManagerPage.jsx
View File

@@ -1,5 +1,18 @@
import { useState, useEffect, useCallback } from 'react';
import UserFooter from '../components/UserFooter.jsx';
// ── useKeyboardOpen — true when software keyboard is visible ─────────────────
function useKeyboardOpen() {
const [open, setOpen] = useState(false);
useEffect(() => {
const vv = window.visualViewport;
if (!vv) return;
const handler = () => setOpen(vv.height < window.innerHeight * 0.75);
vv.addEventListener('resize', handler);
return () => vv.removeEventListener('resize', handler);
}, []);
return open;
}
import { api } from '../utils/api.js';
import { useToast } from '../contexts/ToastContext.jsx';
import Avatar from '../components/Avatar.jsx';
@@ -502,6 +515,7 @@ export default function GroupManagerPage({ isMobile = false, onProfile, onHelp,
const [allUsers, setAllUsers] = useState([]);
const [allUserGroups, setAllUserGroups] = useState([]);
const [refreshKey, setRefreshKey] = useState(0);
const keyboardOpen = useKeyboardOpen();
const onRefresh = () => setRefreshKey(k => k+1);
useEffect(() => {
@@ -509,12 +523,36 @@ export default function GroupManagerPage({ isMobile = false, onProfile, onHelp,
api.getUserGroups().then(({ groups }) => setAllUserGroups(groups)).catch(() => {});
}, [refreshKey]);
// Nav item helper — matches Schedule page style
const navItem = (label, key) => (
<button key={key} onClick={() => setTab(key)}
style={{ display:'block', width:'100%', textAlign:'left', padding:'8px 10px',
borderRadius:'var(--radius)', border:'none',
background: tab===key ? 'var(--primary-light)' : 'transparent',
color: tab===key ? 'var(--primary)' : 'var(--text-primary)',
cursor:'pointer', fontWeight: tab===key ? 600 : 400, fontSize:14, marginBottom:2 }}>
{label}
</button>
);
return (
<div style={{ display:'flex', flex:1, overflow:'hidden', minHeight:0 }}>
{/* ── Left panel (desktop only) ── */}
{!isMobile && (
<div style={{ width:SIDEBAR_W, flexShrink:0, borderRight:'1px solid var(--border)', display:'flex', flexDirection:'column', background:'var(--surface)', overflow:'hidden' }}>
<div style={{ padding:'16px 16px 0' }}>
{/* Title — matches Schedule page */}
<div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:16 }}>
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
<span style={{ fontSize:16, fontWeight:700, color:'var(--text-primary)' }}>Group Manager</span>
</div>
{/* Tab navigation */}
<div className="section-label" style={{ marginBottom:6 }}>View</div>
{navItem('User Groups', 'all')}
{navItem('Multi-Group DMs', 'dm')}
{navItem('U2U Restrictions', 'u2u')}
</div>
<div style={{ flex:1 }} />
<UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} />
</div>
@@ -523,20 +561,15 @@ export default function GroupManagerPage({ isMobile = false, onProfile, onHelp,
{/* ── Right panel ── */}
<div style={{ flex:1, display:'flex', flexDirection:'column', overflow:'hidden', minWidth:0, background:'var(--background)' }}>
{/* Header */}
<div style={{ background:'var(--surface)', borderBottom:'1px solid var(--border)', padding:'0 16px', flexShrink:0 }}>
<div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', height:52, gap:8 }}>
<div style={{ display:'flex', alignItems:'center', gap:8 }}>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="var(--primary)" strokeWidth="2"><rect x="2" y="7" width="20" height="14" rx="2"/><path d="M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2"/></svg>
<span style={{ fontWeight:700, fontSize:15 }}>Group Manager</span>
</div>
<div style={{ display:'flex', gap:6, flexShrink:0 }}>
<button className={`btn btn-sm ${tab==='all'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('all')}>{isMobile ? 'Groups' : 'User Groups'}</button>
<button className={`btn btn-sm ${tab==='dm'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('dm')}>{isMobile ? 'Multi-DMs' : 'Multi-Group DMs'}</button>
<button className={`btn btn-sm ${tab==='u2u'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('u2u')}>U2U</button>
</div>
{/* Mobile tab bar — only shown on mobile */}
{isMobile && (
<div style={{ background:'var(--surface)', borderBottom:'1px solid var(--border)', padding:'0 12px', display:'flex', gap:6, height:48, alignItems:'center', flexShrink:0 }}>
<span style={{ fontWeight:700, fontSize:14, marginRight:4, color:'var(--text-primary)' }}>Groups</span>
<button className={`btn btn-sm ${tab==='all'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('all')}>Groups</button>
<button className={`btn btn-sm ${tab==='dm'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('dm')}>Multi-DMs</button>
<button className={`btn btn-sm ${tab==='u2u'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('u2u')}>U2U</button>
</div>
</div>
)}
{/* Content */}
<div style={{ flex:1, display:'flex', overflow: isMobile ? 'auto' : 'hidden', paddingBottom: isMobile ? 70 : 0 }}>
@@ -545,8 +578,8 @@ export default function GroupManagerPage({ isMobile = false, onProfile, onHelp,
{tab==='u2u' && <U2URestrictionsTab allUserGroups={allUserGroups} isMobile={isMobile} />}
</div>
{/* Mobile footer — fixed at bottom, always visible */}
{isMobile && (
{/* Mobile footer — hidden when keyboard is open */}
{isMobile && !keyboardOpen && (
<div style={{ position:'fixed', bottom:0, left:0, right:0, zIndex:20, background:'var(--surface)', borderTop:'1px solid var(--border)' }}>
<UserFooter onProfile={onProfile} onHelp={onHelp} onAbout={onAbout} />
</div>