78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
import { useEffect, useMemo, useState } from 'react';
|
|
import { useSearchParams } from 'react-router-dom';
|
|
import { useAppContext } from '../context/AppContext';
|
|
import { SettingsTab } from '../tabs/SettingsTab';
|
|
import { AdminTab } from '../tabs/AdminTab';
|
|
import { ConfigTab } from '../tabs/ConfigTab';
|
|
import { PageHeader } from '../components/ui/page-header';
|
|
import { Button } from '../components/ui/Primitives';
|
|
|
|
type SettingsSection = 'Account' | 'Bot Config' | 'Admin Panel';
|
|
|
|
export function SettingsView() {
|
|
const { botState, isAdmin, socket } = useAppContext();
|
|
const [searchParams, setSearchParams] = useSearchParams();
|
|
const sections: SettingsSection[] = [
|
|
'Account',
|
|
...(isAdmin ? ['Bot Config' as SettingsSection] : []),
|
|
...(isAdmin ? ['Admin Panel' as SettingsSection] : []),
|
|
];
|
|
const requestedSection = searchParams.get('section');
|
|
const initialSection = useMemo<SettingsSection>(() => {
|
|
if (requestedSection === 'Bot Config' && isAdmin) return 'Bot Config';
|
|
if (requestedSection === 'Admin Panel' && isAdmin) return 'Admin Panel';
|
|
return 'Account';
|
|
}, [requestedSection, isAdmin]);
|
|
const [section, setSection] = useState<SettingsSection>(initialSection);
|
|
|
|
useEffect(() => {
|
|
setSection(initialSection);
|
|
}, [initialSection]);
|
|
|
|
const handleSectionChange = (nextSection: SettingsSection) => {
|
|
setSection(nextSection);
|
|
setSearchParams(nextSection === 'Account' ? {} : { section: nextSection });
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<PageHeader
|
|
title="Settings"
|
|
description="Manage your account, credentials, and runtime configuration from one place."
|
|
/>
|
|
|
|
<div className="tab-strip" style={{ marginBottom: 24 }}>
|
|
{sections.map(s => (
|
|
<Button
|
|
key={s}
|
|
type="button"
|
|
onClick={() => handleSectionChange(s)}
|
|
variant="ghost"
|
|
size="sm"
|
|
className="tab-button"
|
|
data-active={section === s}
|
|
>
|
|
{s}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
<div
|
|
className="settings-legacy-surface"
|
|
style={{
|
|
background: 'var(--card)',
|
|
border: '1px solid var(--border)',
|
|
borderRadius: 24,
|
|
padding: 24,
|
|
boxShadow: 'var(--card-shadow)',
|
|
color: 'var(--foreground)',
|
|
}}
|
|
>
|
|
{section === 'Account' && <SettingsTab botState={botState} />}
|
|
{section === 'Bot Config' && isAdmin && <ConfigTab />}
|
|
{section === 'Admin Panel' && isAdmin && <AdminTab botState={botState} socket={socket} />}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|