Refactor layout and home page for improved localization and session handling
- Updated RootLayout to include locale support and integrated ThemeProvider and LocaleProvider for better internationalization. - Replaced static home page content with a redirect based on user session status, enhancing user experience by directing to the appropriate dashboard or login page. - Switched font from Geist to Inter for improved typography consistency.
This commit is contained in:
smueller
184
apps/webui/src/components/settings/access-rules-form.tsx
Normal file
184
apps/webui/src/components/settings/access-rules-form.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
'use client';
|
||||
|
||||
import { DASHBOARD_MODULES, type DashboardAccessRule, type DashboardModuleId } from '@nexumi/shared';
|
||||
import { Plus, Trash2 } from 'lucide-react';
|
||||
import { useId } from 'react';
|
||||
import { useTranslations } from '@/components/locale-provider';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import type { SettingsSaveResult } from './settings-form';
|
||||
import { SettingsForm } from './settings-form';
|
||||
|
||||
interface LocalRule {
|
||||
clientKey: string;
|
||||
roleId: string;
|
||||
modulesMode: 'all' | 'specific';
|
||||
selectedModules: DashboardModuleId[];
|
||||
}
|
||||
|
||||
function toLocalRules(rules: DashboardAccessRule[]): LocalRule[] {
|
||||
return rules.map((rule, index) => ({
|
||||
clientKey: rule.id ?? `existing-${index}`,
|
||||
roleId: rule.roleId,
|
||||
modulesMode: rule.modules === 'all' ? 'all' : 'specific',
|
||||
selectedModules: rule.modules === 'all' ? [] : rule.modules
|
||||
}));
|
||||
}
|
||||
|
||||
function toRemoteRules(rules: LocalRule[]): DashboardAccessRule[] {
|
||||
return rules.map((rule) => ({
|
||||
roleId: rule.roleId,
|
||||
modules: rule.modulesMode === 'all' ? 'all' : rule.selectedModules
|
||||
}));
|
||||
}
|
||||
|
||||
async function saveAccessRules(guildId: string, rules: LocalRule[]): Promise<SettingsSaveResult> {
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/access-rules`, {
|
||||
method: 'PUT',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ rules: toRemoteRules(rules) })
|
||||
});
|
||||
if (!response.ok) {
|
||||
const body = (await response.json().catch(() => null)) as { error?: string } | null;
|
||||
return { ok: false, error: body?.error ?? `Request failed with status ${response.status}` };
|
||||
}
|
||||
return { ok: true };
|
||||
} catch {
|
||||
return { ok: false, error: 'Network error' };
|
||||
}
|
||||
}
|
||||
|
||||
function AccessRuleRow({
|
||||
rule,
|
||||
onChange,
|
||||
onRemove
|
||||
}: {
|
||||
rule: LocalRule;
|
||||
onChange: (rule: LocalRule) => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const t = useTranslations();
|
||||
const roleInputId = useId();
|
||||
|
||||
function toggleModule(moduleId: DashboardModuleId, checked: boolean) {
|
||||
const next = checked
|
||||
? [...rule.selectedModules, moduleId]
|
||||
: rule.selectedModules.filter((id) => id !== moduleId);
|
||||
onChange({ ...rule, selectedModules: next });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4 rounded-md border border-border p-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex-1 space-y-2">
|
||||
<Label htmlFor={roleInputId}>{t('access.roleIdLabel')}</Label>
|
||||
<Input
|
||||
id={roleInputId}
|
||||
value={rule.roleId}
|
||||
onChange={(event) => onChange({ ...rule, roleId: event.target.value.trim() })}
|
||||
placeholder={t('access.roleIdPlaceholder')}
|
||||
className="max-w-xs"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">{t('access.roleIdHint')}</p>
|
||||
</div>
|
||||
<Button type="button" variant="ghost" size="icon" onClick={onRemove} aria-label={t('access.removeRule')}>
|
||||
<Trash2 className="size-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>{t('access.modulesLabel')}</Label>
|
||||
<Select
|
||||
value={rule.modulesMode}
|
||||
onValueChange={(mode) => onChange({ ...rule, modulesMode: mode as 'all' | 'specific' })}
|
||||
>
|
||||
<SelectTrigger className="w-56">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">{t('access.allModulesOption')}</SelectItem>
|
||||
<SelectItem value="specific">{t('access.specificModulesOption')}</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
{rule.modulesMode === 'specific' && (
|
||||
<div className="grid grid-cols-2 gap-2 pt-2 sm:grid-cols-3">
|
||||
{DASHBOARD_MODULES.map((module) => (
|
||||
<label key={module.id} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="size-4 rounded border-input accent-primary"
|
||||
checked={rule.selectedModules.includes(module.id)}
|
||||
onChange={(event) => toggleModule(module.id, event.target.checked)}
|
||||
/>
|
||||
{t(`modules.${module.id}.label`)}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface AccessRulesFormProps {
|
||||
guildId: string;
|
||||
initialRules: DashboardAccessRule[];
|
||||
}
|
||||
|
||||
export function AccessRulesForm({ guildId, initialRules }: AccessRulesFormProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<SettingsForm<LocalRule[]>
|
||||
initialValue={toLocalRules(initialRules)}
|
||||
onSave={(value) => saveAccessRules(guildId, value)}
|
||||
>
|
||||
{({ value, setValue }) => (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t('access.title')}</CardTitle>
|
||||
<CardDescription>{t('access.description')}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{value.length === 0 && <p className="text-sm text-muted-foreground">{t('access.noRules')}</p>}
|
||||
|
||||
{value.map((rule) => (
|
||||
<AccessRuleRow
|
||||
key={rule.clientKey}
|
||||
rule={rule}
|
||||
onChange={(updated) =>
|
||||
setValue((prev) => prev.map((entry) => (entry.clientKey === rule.clientKey ? updated : entry)))
|
||||
}
|
||||
onRemove={() => setValue((prev) => prev.filter((entry) => entry.clientKey !== rule.clientKey))}
|
||||
/>
|
||||
))}
|
||||
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() =>
|
||||
setValue((prev) => [
|
||||
...prev,
|
||||
{
|
||||
clientKey: `new-${Date.now()}-${prev.length}`,
|
||||
roleId: '',
|
||||
modulesMode: 'all',
|
||||
selectedModules: []
|
||||
}
|
||||
])
|
||||
}
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
{t('access.addRule')}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</SettingsForm>
|
||||
);
|
||||
}
|
||||
102
apps/webui/src/components/settings/module-toggles-form.tsx
Normal file
102
apps/webui/src/components/settings/module-toggles-form.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
'use client';
|
||||
|
||||
import { DASHBOARD_MODULES, type DashboardModuleGroup, type DashboardModuleId, type ModuleStatus } from '@nexumi/shared';
|
||||
import { ArrowUpRight } from 'lucide-react';
|
||||
import Link from 'next/link';
|
||||
import { useTranslations } from '@/components/locale-provider';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Switch } from '@/components/ui/switch';
|
||||
import type { SettingsSaveResult } from './settings-form';
|
||||
import { SettingsForm } from './settings-form';
|
||||
|
||||
type ModuleToggleValue = Record<DashboardModuleId, boolean>;
|
||||
|
||||
const MODULE_GROUP_ORDER: DashboardModuleGroup[] = [
|
||||
'moderation',
|
||||
'engagement',
|
||||
'community',
|
||||
'utility',
|
||||
'integrations'
|
||||
];
|
||||
|
||||
function toValue(statuses: ModuleStatus[]): ModuleToggleValue {
|
||||
return statuses.reduce<ModuleToggleValue>((acc, status) => {
|
||||
acc[status.id] = status.enabled;
|
||||
return acc;
|
||||
}, {} as ModuleToggleValue);
|
||||
}
|
||||
|
||||
async function saveModules(guildId: string, value: ModuleToggleValue): Promise<SettingsSaveResult> {
|
||||
try {
|
||||
const response = await fetch(`/api/guilds/${guildId}/modules`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ modules: value })
|
||||
});
|
||||
if (!response.ok) {
|
||||
const body = (await response.json().catch(() => null)) as { error?: string } | null;
|
||||
return { ok: false, error: body?.error ?? `Request failed with status ${response.status}` };
|
||||
}
|
||||
return { ok: true };
|
||||
} catch {
|
||||
return { ok: false, error: 'Network error' };
|
||||
}
|
||||
}
|
||||
|
||||
interface ModuleTogglesFormProps {
|
||||
guildId: string;
|
||||
initialStatuses: ModuleStatus[];
|
||||
}
|
||||
|
||||
export function ModuleTogglesForm({ guildId, initialStatuses }: ModuleTogglesFormProps) {
|
||||
const t = useTranslations();
|
||||
|
||||
return (
|
||||
<SettingsForm<ModuleToggleValue>
|
||||
initialValue={toValue(initialStatuses)}
|
||||
onSave={(value) => saveModules(guildId, value)}
|
||||
>
|
||||
{({ value, setValue }) => (
|
||||
<div className="space-y-6">
|
||||
{MODULE_GROUP_ORDER.map((group) => {
|
||||
const modules = DASHBOARD_MODULES.filter((module) => module.group === group);
|
||||
return (
|
||||
<Card key={group}>
|
||||
<CardHeader>
|
||||
<CardTitle>{t(`moduleGroups.${group}`)}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="divide-y divide-border">
|
||||
{modules.map((module) => (
|
||||
<div key={module.id} className="flex items-center justify-between gap-4 py-3 first:pt-0 last:pb-0">
|
||||
<div className="min-w-0 space-y-0.5">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="font-medium">{t(`modules.${module.id}.label`)}</p>
|
||||
<Link
|
||||
href={`/dashboard/${guildId}/${module.href}`}
|
||||
className="inline-flex items-center gap-0.5 text-xs text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
{t('modulesPage.configure')}
|
||||
<ArrowUpRight className="size-3" />
|
||||
</Link>
|
||||
</div>
|
||||
<p className="truncate text-sm text-muted-foreground">
|
||||
{t(`modules.${module.id}.description`)}
|
||||
</p>
|
||||
</div>
|
||||
<Switch
|
||||
checked={value[module.id] ?? false}
|
||||
onCheckedChange={(checked) =>
|
||||
setValue((prev) => ({ ...prev, [module.id]: checked }))
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</SettingsForm>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user