+
+
+
+ );
+ }
+
+ if (!data || !schema) {
+ return (
+
+
+ {error}
+
+ ) : null}
+ {message ? (
+
+ {message}
+
+ ) : null}
+
+ {schema.map((section) => (
+
+
+ {section.title}
+ {section.description ? (
+ {section.description}
+ ) : null}
+
+
+ {section.fields.map((field) => (
+
+
+ ))}
+
+ );
+}
diff --git a/dashboard/src/components/app-sidebar.tsx b/dashboard/src/components/app-sidebar.tsx
new file mode 100644
index 0000000..74ea8c3
--- /dev/null
+++ b/dashboard/src/components/app-sidebar.tsx
@@ -0,0 +1,268 @@
+import type { IconSvgElement } from "@hugeicons/react";
+import {
+ AiBrain01Icon,
+ ArrowDown01Icon,
+ BotIcon,
+ CommandIcon,
+ ComputerTerminal01Icon,
+ DashboardSquare02Icon,
+ File02Icon,
+ Message01Icon,
+ PlusSignIcon,
+ PackageIcon,
+ Settings02Icon,
+ Ticket01Icon,
+ UserMultiple02Icon,
+} from "@hugeicons/core-free-icons";
+import { NavLink, useSearchParams } from "react-router-dom";
+import { useAuth } from "@/context/AuthContext";
+import { useBranding } from "@/context/BrandingContext";
+import { useBotStats } from "@/context/BotStatsContext";
+import { useAddonConfigs } from "@/hooks/use-addon-configs";
+import {
+ addonConfigFileParam,
+ addonConfigLabel,
+} from "@/lib/addon-config";
+import { canViewConfig, hasPermission } from "@/lib/permissions";
+import { Icon } from "@/components/icon";
+import { Button } from "@/components/ui/button";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+ Sidebar,
+ SidebarContent,
+ SidebarGroup,
+ SidebarGroupContent,
+ SidebarGroupLabel,
+ SidebarHeader,
+ SidebarMenu,
+ SidebarMenuButton,
+ SidebarMenuItem,
+ SidebarRail,
+} from "@/components/ui/sidebar";
+import { cn } from "@/lib/utils";
+
+const mainNav: {
+ title: string;
+ url: string;
+ icon: IconSvgElement;
+ end?: boolean;
+ permission?: string;
+}[] = [
+ { title: "Dashboard", url: "/", icon: DashboardSquare02Icon, end: true, permission: "overview" },
+ { title: "Logs", url: "/logs", icon: ComputerTerminal01Icon, permission: "logs" },
+ { title: "Settings", url: "/settings", icon: Settings02Icon, permission: "settings.view" },
+ { title: "Addons", url: "/addons", icon: PackageIcon, permission: "settings.view" },
+ { title: "Users", url: "/users", icon: UserMultiple02Icon, permission: "users.view" },
+];
+
+const sections: {
+ label: string;
+ items: { title: string; url: string; icon: IconSvgElement }[];
+}[] = [
+ {
+ label: "Tickets & support",
+ items: [
+ {
+ title: "Ticket system",
+ url: "/configs?file=ticket-panel",
+ icon: Ticket01Icon,
+ },
+ {
+ title: "Bot config",
+ url: "/configs?file=supportbot",
+ icon: BotIcon,
+ },
+ { title: "Transcripts", url: "/transcripts", icon: File02Icon },
+ ],
+ },
+ {
+ label: "Community",
+ items: [
+ {
+ title: "Messages",
+ url: "/configs?file=messages",
+ icon: Message01Icon,
+ },
+ {
+ title: "AI assistant",
+ url: "/configs?file=supportbot-ai",
+ icon: AiBrain01Icon,
+ },
+ ],
+ },
+ {
+ label: "Server control",
+ items: [
+ { title: "commands.yml", url: "/configs?file=commands", icon: CommandIcon },
+ {
+ title: "Staff roles",
+ url: "/configs?file=supportbot",
+ icon: UserMultiple02Icon,
+ },
+ ],
+ },
+];
+
+function configFileFromUrl(url: string) {
+ return new URL(url, "http://x").searchParams.get("file");
+}
+
+export function AppSidebar() {
+ const { branding } = useBranding();
+ const { permissions } = useAuth();
+ const { stats } = useBotStats();
+ const { files: addonConfigFiles } = useAddonConfigs();
+ const [searchParams] = useSearchParams();
+ const activeFile = searchParams.get("file");
+
+ const addonSection =
+ canViewConfig(permissions, "supportbot") && addonConfigFiles.length > 0
+ ? {
+ label: "Addons",
+ items: addonConfigFiles.map((filename) => ({
+ title: addonConfigLabel(filename),
+ url: `/configs?file=${addonConfigFileParam(filename)}`,
+ icon: PackageIcon,
+ })),
+ }
+ : null;
+
+ const visibleMainNav = mainNav.filter(
+ (item) => !item.permission || hasPermission(permissions, item.permission),
+ );
+
+ const visibleSections = sections
+ .map((section) => ({
+ ...section,
+ items: section.items.filter((item) => {
+ const file = configFileFromUrl(item.url);
+ if (file && item.url.includes("/configs")) {
+ return canViewConfig(permissions, file);
+ }
+ if (item.url === "/transcripts") {
+ return hasPermission(permissions, "transcripts");
+ }
+ if (item.url === "/commands") {
+ return canViewConfig(permissions, "commands");
+ }
+ return true;
+ }),
+ }))
+ .filter((section) => section.items.length > 0);
+
+ const allSections = addonSection
+ ? [...visibleSections, addonSection]
+ : visibleSections;
+
+ const serverLabel = stats
+ ? `${stats.servers} server${stats.servers === 1 ? "" : "s"}`
+ : "Your server";
+
+ return (
+
+ {dirty ? (
+ Unsaved changes
+ ) : null}
+
+ {!readOnly ? (
+
+ ) : (
+ View only
+ )}
+
+
+ {error ? (
+
+ patch(field.path, v)}
+ />
+
+ ))}
+
+ {branding.hasFavicon && branding.faviconUrl ? (
+ 
+ ) : null}
+
+ {branding.title}
+
+
+
+ + No commands found in this config. +
+ ); + } + + return ( +
+ {entries.map((entry) => (
+
+
+ {entry.key}
+
+
+
+
+ ))}
+
+ );
+}
diff --git a/dashboard/src/components/config/config-field.tsx b/dashboard/src/components/config/config-field.tsx
new file mode 100644
index 0000000..e7e98d3
--- /dev/null
+++ b/dashboard/src/components/config/config-field.tsx
@@ -0,0 +1,248 @@
+import type { ConfigField } from "@/lib/config-schemas";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from "@/components/ui/select";
+import { ColorPicker } from "@/components/ui/color-picker";
+import { normalizeHex } from "@/lib/normalize-hex";
+import { StringListEditor } from "./string-list-editor";
+import { GoogleFontPicker } from "./google-font-picker";
+import {
+ DiscordResourcePicker,
+ type DiscordResourceKind,
+} from "./discord-resource-picker";
+import { EmojiPicker } from "./emoji-picker";
+
+const SECRET_PLACEHOLDER = "BOT_TOKEN";
+const AI_KEY_PLACEHOLDER = "MODEL_API_KEY";
+
+interface ConfigFieldInputProps {
+ field: ConfigField;
+ value: unknown;
+ onChange: (value: unknown) => void;
+ readOnly?: boolean;
+}
+
+export function ConfigFieldInput({
+ field,
+ value,
+ onChange,
+ readOnly,
+}: ConfigFieldInputProps) {
+ const id = field.path.replace(/\./g, "-");
+
+ if (field.type === "googleFont") {
+ return (
+
+
+
+
+
+ updateEntry(entry.key, { Enabled: checked })
+ }
+ />
+
+
+
+
+ updateEntry(entry.key, { Command: e.target.value })
+ }
+ className="border-border bg-secondary/30 font-mono"
+ />
+
+
+
+
+ updateEntry(entry.key, { Description: e.target.value })
+ }
+ className="border-border bg-secondary/30"
+ />
+
+
+
+ );
+ }
+
+ if (field.type === "stringList") {
+ return (
+
+
+ {field.description ? (
+
+ {field.description}
+ ) : null} +
+
+ {field.description ? (
+
+ );
+ }
+
+ if (field.type === "select" && field.options) {
+ return (
+ {field.description}
+ ) : null} +
+
+
+
+ );
+ }
+
+ if (field.type === "color") {
+ const hex = normalizeHex(String(value ?? "#000000"));
+ return (
+
+
+ {field.description ? (
+
+ );
+ }
+
+ if (field.type === "emoji") {
+ return (
+ {field.description}
+ ) : null} +
+
+
+
+ {field.description ? (
+
+ );
+ }
+
+ const sharedClass = "border-border bg-secondary/30";
+
+ if (field.type === "textarea") {
+ return (
+ {field.description}
+ ) : null} + { + const v = e.target.value; + if (v) onChange(v); + else onChange(field.placeholder ?? SECRET_PLACEHOLDER); + }} + className="border-border bg-secondary/30" + /> +
+
+