setDmName(e.target.value)} placeholder="e.g. Coaches + Players" style={{ marginTop:6 }} autoComplete="new-password" />
@@ -268,7 +269,7 @@ function DirectMessagesTab({ allUserGroups, onRefresh, refreshKey }) {
// ── U2U Restrictions tab ──────────────────────────────────────────────────────
-function U2URestrictionsTab({ allUserGroups }) {
+function U2URestrictionsTab({ allUserGroups, isMobile = false }) {
const toast = useToast();
const [selectedGroup, setSelectedGroup] = useState(null);
const [blockedIds, setBlockedIds] = useState(new Set());
@@ -276,6 +277,22 @@ function U2URestrictionsTab({ allUserGroups }) {
const [loading, setLoading] = useState(false);
const [saving, setSaving] = useState(false);
const [search, setSearch] = useState('');
+ // Map of groupId → number of restrictions (for showing dots in sidebar)
+ const [restrictionCounts, setRestrictionCounts] = useState({});
+
+ // Load restriction counts for all groups on mount and after saves
+ const loadAllCounts = useCallback(async () => {
+ const counts = {};
+ for (const g of allUserGroups) {
+ try {
+ const { blockedGroupIds } = await api.getGroupRestrictions(g.id);
+ counts[g.id] = blockedGroupIds.length;
+ } catch { counts[g.id] = 0; }
+ }
+ setRestrictionCounts(counts);
+ }, [allUserGroups]);
+
+ useEffect(() => { if (allUserGroups.length > 0) loadAllCounts(); }, [allUserGroups]);
const loadRestrictions = async (group) => {
setLoading(true);
@@ -314,6 +331,7 @@ function U2URestrictionsTab({ allUserGroups }) {
await api.setGroupRestrictions(selectedGroup.id, [...blockedIds]);
setSavedBlockedIds(new Set(blockedIds));
toast('Restrictions saved', 'success');
+ loadAllCounts();
} catch (e) { toast(e.message, 'error'); }
finally { setSaving(false); }
};
@@ -328,14 +346,14 @@ function U2URestrictionsTab({ allUserGroups }) {
: otherGroups;
return (
-
+
{/* Group selector sidebar */}
-
+
Select Group
{allUserGroups.map(g => {
- const hasRestrictions = g.id === selectedGroup?.id ? blockedIds.size > 0 : false;
+ const hasRestrictions = g.id === selectedGroup?.id ? blockedIds.size > 0 : (restrictionCounts[g.id] || 0) > 0;
return (
{hasRestrictions && (
-
+
)}
@@ -363,7 +381,7 @@ function U2URestrictionsTab({ allUserGroups }) {
{/* Restriction editor */}
-
+
{!selectedGroup ? (
@@ -376,7 +394,7 @@ function U2URestrictionsTab({ allUserGroups }) {
) : (
-
+
{/* Header */}
{selectedGroup.name}
@@ -477,7 +495,7 @@ function U2URestrictionsTab({ allUserGroups }) {
}
// ── Main page ─────────────────────────────────────────────────────────────────
-export default function GroupManagerPage() {
+export default function GroupManagerPage({ isMobile = false, onProfile, onHelp, onAbout }) {
const [tab, setTab] = useState('all');
const [allUsers, setAllUsers] = useState([]);
const [allUserGroups, setAllUserGroups] = useState([]);
@@ -499,18 +517,22 @@ export default function GroupManagerPage() {
Group Manager
-
-
-
+
+
+
{/* Content */}
-
- {tab==='all' &&
}
- {tab==='dm' &&
}
- {tab==='u2u' &&
}
+
+ {tab==='all' &&
}
+ {tab==='dm' &&
}
+ {tab==='u2u' &&
}
+
+ {/* User footer */}
+
+
);
diff --git a/frontend/src/pages/UserManagerPage.jsx b/frontend/src/pages/UserManagerPage.jsx
index 5a1c04b..e8f2c80 100644
--- a/frontend/src/pages/UserManagerPage.jsx
+++ b/frontend/src/pages/UserManagerPage.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
import { useToast } from '../contexts/ToastContext.jsx';
import { api } from '../utils/api.js';
import Avatar from '../components/Avatar.jsx';
+import UserFooter from '../components/UserFooter.jsx';
function isValidEmail(e) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e); }
@@ -161,7 +162,7 @@ function UserRow({ u, onUpdated }) {
}
// ── Create user form ──────────────────────────────────────────────────────────
-function CreateUserForm({ userPass, onCreated }) {
+function CreateUserForm({ userPass, onCreated, isMobile = false }) {
const toast = useToast();
const [form, setForm] = useState({ name:'', email:'', password:'', role:'member' });
const [saving, setSaving] = useState(false);
@@ -182,8 +183,8 @@ function CreateUserForm({ userPass, onCreated }) {
};
return (
-
-
+
+
set('name')(e.target.value)} />
@@ -292,8 +293,7 @@ function BulkImportForm({ userPass, onCreated }) {
}
// ── Main page ─────────────────────────────────────────────────────────────────
-export default function UserManagerPage() {
- const isMobile = window.innerWidth < 768;
+export default function UserManagerPage({ isMobile = false, onProfile, onHelp, onAbout }) {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [loadError, setLoadError] = useState('');
@@ -321,31 +321,32 @@ export default function UserManagerPage() {
u.email?.toLowerCase().includes(search.toLowerCase())
);
+ const pad = isMobile ? 16 : 24;
return (
{/* Page header */}
-
-
+
+
User Manager
- {!loading &&
{users.length} user{users.length!==1?'s':''}}
+ {!loading &&
{users.length} user{users.length!==1?'s':''}}
-
+
- {!isMobile && }
+ {!isMobile && }
{/* Content */}
-
+
{tab === 'users' && (
<>
setSearch(e.target.value)}
autoComplete="new-password" autoCorrect="off" spellCheck={false}
- style={{ marginBottom:16, maxWidth:400 }} />
+ style={{ marginBottom:16, width:'100%', maxWidth: isMobile ? '100%' : 400 }} />
{loading ? (
@@ -364,9 +365,14 @@ export default function UserManagerPage() {
)}
- {tab === 'create' &&
{ load(); setTab('users'); }} />}
+ {tab === 'create' && { load(); setTab('users'); }} isMobile={isMobile} />}
{tab === 'bulk' && }
+
+ {/* User footer */}
+
+
+
);
}