UI Components

Directory: ui/src/components/

26 React components for the group UI overlay.

Core Shell

Component	File	Description
GroupShell	GroupShell.jsx	Legacy group UI shell (sidebar + content)
TabNav	TabNav.jsx	Navigation tabs for group shell
NoGroup	NoGroup.jsx	Create/Join group form (shown when not in group)

Dashboard

Component	File	Description
Dashboard	Dashboard.jsx	Group overview stats
ReputationBar	ReputationBar.jsx	XP bar with level display
CooldownPanel	CooldownPanel.jsx	Active cooldown timers

Members

Component	File	Description
MemberList	MemberList.jsx	Member list with roles and status
RoleManager	RoleManager.jsx	Role assignment interface
InvitePanel	InvitePanel.jsx	Group invite popup
JoinRequestPanel	JoinRequestPanel.jsx	Join request popup

Tasks

Component	File	Description
TaskBoard	TaskBoard.jsx	Task list and management
InstructionPanel	InstructionPanel.jsx	Multi-task floating instruction panel

Features

Component	File	Description
AlliancePanel	AlliancePanel.jsx	Alliance/war management
TurfManager	TurfManager.jsx	Territory management
BountyBoard	BountyBoard.jsx	Bounty board UI
GroupMailbox	GroupMailbox.jsx	Internal mail UI
GroupGarage	GroupGarage.jsx	Vehicle storage UI
GroupChat	GroupChat.jsx	Group chat interface
ActivityHistory	ActivityHistory.jsx	Task completion history
SpawnManager	SpawnManager.jsx	Spawn point management

Shared

Component	File	Description
Settings	Settings.jsx	Settings panel (stub, re-exports from lib)
ColorPicker	ColorPicker.jsx	Custom color picker (saturation + hue)
CircularProgress	CircularProgress.jsx	SVG circular progress (3 styles)
NotificationToast	NotificationToast.jsx	In-UI toast notification
ConfirmDialog	ConfirmDialog.jsx	Confirmation dialog
GroupPanel	GroupPanel.jsx	Group info panel

Component Pattern

import { useGroup } from '../context/GroupContext';
import { useTablet } from '../context/TabletContext';

export default function MyComponent() {
    const { groupData, members, dispatch } = useGroup();
    const { themeColors } = useTablet();

    return (
        <div style={{
            background: themeColors.windowBg,
            color: themeColors.text,
            borderRadius: themeColors.border,
        }}>
            {/* Component content */}
        </div>
    );
}