feat(settings): group commands by category in system tab

This commit is contained in:
syntaxbullet
2026-01-08 22:55:40 +01:00
parent 8fe300c8a2
commit bea6c33024
5 changed files with 56 additions and 28 deletions

View File

@@ -12,7 +12,7 @@ interface ChannelOption { id: string; name: string; type: number; }
interface SettingsMeta {
roles: RoleOption[];
channels: ChannelOption[];
commands: string[];
commands: { name: string; category: string }[];
}
import { type GameConfigType } from "@shared/lib/config";
@@ -400,29 +400,43 @@ export function Settings() {
{activeTab === "system" && (
<div className="space-y-6">
<SectionTitle icon={Terminal} title="Commands" description="Enable or disable specific bot commands" />
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{meta.commands.map(cmd => (
<div key={cmd} className="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5">
<div className="flex flex-col">
<span className="text-sm font-medium">/{cmd}</span>
<span className="text-[10px] text-white/40">
{config?.commands?.[cmd] === false ? "Disabled" : "Enabled"}
</span>
{meta.commands.length === 0 ? (
<div className="text-center py-8 text-white/30">
No commands found in metadata.
</div>
) : (
Object.entries(
meta.commands.reduce((acc, cmd) => {
const cat = cmd.category || 'Uncategorized';
if (!acc[cat]) acc[cat] = [];
acc[cat].push(cmd);
return acc;
}, {} as Record<string, typeof meta.commands>)
).sort(([a], [b]) => a.localeCompare(b)).map(([category, commands]) => (
<div key={category} className="mb-6 last:mb-0">
<h4 className="text-sm font-semibold text-white/40 uppercase tracking-wider mb-3 px-1">{category}</h4>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{commands.map(cmd => (
<div key={cmd.name} className="flex items-center justify-between p-3 rounded-lg bg-white/5 border border-white/5 hover:border-white/10 transition-colors">
<div className="flex flex-col">
<span className="text-sm font-medium text-white">/{cmd.name}</span>
<span className={`text-[10px] ${config?.commands?.[cmd.name] === false ? "text-red-400" : "text-green-400"}`}>
{config?.commands?.[cmd.name] === false ? "Disabled" : "Enabled"}
</span>
</div>
<input
type="checkbox"
checked={config?.commands?.[cmd.name] !== false}
onChange={(e) => updateConfig(`commands.${cmd.name}`, e.target.checked)}
className="h-4 w-4 rounded border-white/10 bg-white/5 accent-primary cursor-pointer"
/>
</div>
))}
</div>
<input
type="checkbox"
checked={config?.commands?.[cmd] !== false}
onChange={(e) => updateConfig(`commands.${cmd}`, e.target.checked)}
className="h-4 w-4 rounded border-white/10 bg-white/5 accent-primary"
/>
</div>
))}
{meta.commands.length === 0 && (
<div className="col-span-full text-center py-8 text-white/30">
No commands found in metadata.
</div>
)}
</div>
))
)}
</div>
)}
</CardContent>