feat: give plugins their own settings and one settings screen

src/ui/settings/SettingsScreen.tsx

@@ -0,0 +1,280 @@
+/**
+ * Everything that configures the app rather than operating a server.
+ *
+ * Profile and admin were two separate rail panels, each a fixed accordion of
+ * hardcoded sections. That is the wrong shape for the number of sections they
+ * hold, and it left no place at all for a plugin to contribute one. This is a
+ * single screen with a banded left nav, and a plugin's page is an entry in it
+ * that appears and disappears with the plugin.
+ *
+ * Both rail buttons still open this, each on its own section, so the Navigation
+ * visibility toggles and the habit of reaching for either one keep working.
+ */
+
+import { lazy, Suspense, useEffect, useMemo, useState } from "react";
+import type { ComponentProps } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  ChevronDown,
+  Puzzle,
+  Settings as SettingsIcon,
+  User,
+} from "lucide-react";
+import { Separator } from "@/components/separator";
+import { PluginIcon } from "@/lib/plugin-icon";
+import { getPlugins, type PluginSummary } from "@/api/plugins-api";
+import { PluginSettingsPage } from "./PluginSettingsPage";
+import { registerLegacySettingsComponents } from "./legacy-settings-components";
+
+const UserProfilePanel = lazy(() =>
+  import("@/sidebar/UserProfilePanel").then((m) => ({
+    default: m.UserProfilePanel,
+  })),
+);
+const AdminSettingsPanel = lazy(() =>
+  import("@/sidebar/AdminSettingsPanel").then((m) => ({
+    default: m.AdminSettingsPanel,
+  })),
+);
+
+// Taken from the panels themselves: this screen only forwards them, so
+// restating their shapes here would be one more thing to keep in step.
+type ProfileProps = ComponentProps<typeof UserProfilePanel>;
+type AdminProps = ComponentProps<typeof AdminSettingsPanel>;
+
+/** Built-in sections, plus "plugin:<id>" for a plugin's own settings page. */
+export type SettingsSectionId = "profile" | "admin" | `plugin:${string}`;
+
+export interface SettingsScreenProps {
+  /** Which page to land on. Both rail entries come in here. */
+  initialSection?: SettingsSectionId;
+  isAdmin?: boolean;
+  /** Forwarded to the profile panel. */
+  username?: ProfileProps["username"];
+  onLogout?: ProfileProps["onLogout"];
+  userPrefs?: ProfileProps["userPrefs"];
+  onPrefsChange?: ProfileProps["onPrefsChange"];
+  remoteSyncInitialServerUrl?: ProfileProps["remoteSyncInitialServerUrl"];
+  remoteSyncReconnectRequested?: ProfileProps["remoteSyncReconnectRequested"];
+  onRemoteSyncReconnectHandled?: ProfileProps["onRemoteSyncReconnectHandled"];
+  /** Forwarded to the admin panel. */
+  onEditingChange?: AdminProps["onEditingChange"];
+  onOpenHostTab?: AdminProps["onOpenHostTab"];
+}
+
+interface NavItem {
+  id: SettingsSectionId;
+  label: string;
+  icon: React.ElementType;
+  iconName?: string;
+}
+
+export function SettingsScreen({
+  initialSection = "profile",
+  isAdmin = false,
+  username,
+  onLogout,
+  userPrefs,
+  onPrefsChange,
+  remoteSyncInitialServerUrl,
+  remoteSyncReconnectRequested,
+  onRemoteSyncReconnectHandled,
+  onEditingChange,
+  onOpenHostTab,
+}: SettingsScreenProps) {
+  const { t } = useTranslation();
+  const [section, setSection] = useState<SettingsSectionId>(initialSection);
+  const [navOpen, setNavOpen] = useState(false);
+  const [plugins, setPlugins] = useState<PluginSummary[]>([]);
+
+  // Registered here rather than at module scope so a custom field's component
+  // exists before any page that renders one. A7 moves this into the loader.
+  useEffect(() => {
+    registerLegacySettingsComponents();
+  }, []);
+
+  useEffect(() => {
+    let cancelled = false;
+    void getPlugins()
+      .then((loaded) => {
+        if (!cancelled) setPlugins(loaded);
+      })
+      .catch(() => {
+        // The plugin band is additive: the core sections still work without it.
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  // The rail can switch which entry opened the screen while it is mounted.
+  useEffect(() => setSection(initialSection), [initialSection]);
+
+  /**
+   * A plugin gets a page when it is enabled and declares settings this user
+   * could actually change. A non-admin seeing a page of admin-only fields
+   * would be a page they can read and never act on.
+   */
+  const pluginPages = useMemo(
+    () =>
+      plugins.filter((plugin) => {
+        if (!plugin.enabled) return false;
+        const settings = plugin.contributes?.settings;
+        if (!settings) return false;
+        if ((settings.user?.length ?? 0) > 0) return true;
+        return isAdmin && (settings.admin?.length ?? 0) > 0;
+      }),
+    [plugins, isAdmin],
+  );
+
+  const bands = useMemo(() => {
+    const result: { heading: string; items: NavItem[] }[] = [
+      {
+        heading: t("settings.bandYou"),
+        items: [{ id: "profile", label: t("settings.account"), icon: User }],
+      },
+    ];
+
+    if (pluginPages.length > 0) {
+      result.push({
+        heading: t("settings.bandPlugins"),
+        items: pluginPages.map((plugin) => ({
+          id: `plugin:${plugin.id}` as SettingsSectionId,
+          label: plugin.name,
+          icon: Puzzle,
+          iconName: plugin.icon,
+        })),
+      });
+    }
+
+    if (isAdmin) {
+      result.push({
+        heading: t("settings.bandInstance"),
+        items: [{ id: "admin", label: t("nav.admin"), icon: SettingsIcon }],
+      });
+    }
+
+    return result;
+  }, [t, pluginPages, isAdmin]);
+
+  const sections = bands.flatMap((band) => band.items);
+  const active = sections.find((item) => item.id === section) ?? sections[0];
+
+  // A plugin page can vanish under you: the plugin is disabled from the admin
+  // section in the same screen. Fall back rather than render an empty pane.
+  useEffect(() => {
+    if (
+      section.startsWith("plugin:") &&
+      !sections.some((s) => s.id === section)
+    ) {
+      setSection("profile");
+    }
+  }, [section, sections]);
+
+  return (
+    <div className="flex h-full min-h-0 flex-col overflow-hidden bg-background">
+      <header className="flex h-12.5 shrink-0 flex-row items-center border-b border-border">
+        <div className="flex min-w-0 flex-1 items-center gap-2 px-3">
+          <SettingsIcon className="size-4 shrink-0 text-accent-brand" />
+          <span className="truncate text-base font-bold tracking-tight">
+            {t("settings.title")}
+          </span>
+          <Separator orientation="vertical" className="h-4" />
+          <span className="hidden truncate text-[10px] font-semibold uppercase tracking-widest text-muted-foreground md:inline">
+            {active?.label}
+          </span>
+          {/* The nav column does not fit beside the content on a phone, so
+              there it collapses behind the section name. */}
+          <button
+            onClick={() => setNavOpen((open) => !open)}
+            aria-expanded={navOpen}
+            className="flex min-w-0 items-center gap-1 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground md:hidden"
+          >
+            <span className="truncate">{active?.label}</span>
+            <ChevronDown
+              className={`size-3 shrink-0 transition-transform ${navOpen ? "rotate-180" : ""}`}
+            />
+          </button>
+        </div>
+      </header>
+
+      <div className="flex min-h-0 flex-1">
+        <nav
+          className={`${navOpen ? "flex" : "hidden"} w-full shrink-0 flex-col gap-3 overflow-y-auto border-r border-border py-2.5 md:flex md:w-60`}
+        >
+          {bands.map((band) => (
+            <div key={band.heading} className="flex flex-col">
+              <span className="px-2.5 pb-1.5 text-[10px] font-semibold uppercase tracking-widest text-muted-foreground">
+                {band.heading}
+              </span>
+              {band.items.map((item) => {
+                const Icon = item.icon;
+                const on = item.id === section;
+                return (
+                  <button
+                    key={item.id}
+                    onClick={() => {
+                      setSection(item.id);
+                      setNavOpen(false);
+                    }}
+                    className={`flex w-full items-center gap-2 border-l-2 py-2.5 pl-2 pr-2 text-left transition-colors md:py-1.5 ${
+                      on
+                        ? "border-accent-brand bg-accent-brand/10 text-accent-brand"
+                        : "border-transparent text-muted-foreground hover:bg-muted hover:text-foreground"
+                    }`}
+                  >
+                    {item.iconName ? (
+                      <PluginIcon
+                        name={item.iconName}
+                        className="size-3.5 shrink-0"
+                      />
+                    ) : (
+                      <Icon className="size-3.5 shrink-0" />
+                    )}
+                    <span className="truncate text-xs font-medium">
+                      {item.label}
+                    </span>
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+        </nav>
+
+        <div
+          className={`${navOpen ? "hidden" : ""} min-h-0 flex-1 overflow-y-auto md:block`}
+        >
+          <Suspense fallback={null}>
+            {section === "profile" && (
+              <UserProfilePanel
+                username={username}
+                onLogout={onLogout}
+                userPrefs={userPrefs}
+                onPrefsChange={onPrefsChange}
+                remoteSyncInitialServerUrl={remoteSyncInitialServerUrl}
+                remoteSyncReconnectRequested={remoteSyncReconnectRequested}
+                onRemoteSyncReconnectHandled={onRemoteSyncReconnectHandled}
+              />
+            )}
+
+            {section === "admin" && isAdmin && (
+              <AdminSettingsPanel
+                onEditingChange={onEditingChange}
+                onOpenHostTab={onOpenHostTab}
+              />
+            )}
+
+            {section.startsWith("plugin:") &&
+              (() => {
+                const plugin = pluginPages.find(
+                  (candidate) => `plugin:${candidate.id}` === section,
+                );
+                if (!plugin) return null;
+                return <PluginSettingsPage plugin={plugin} isAdmin={isAdmin} />;
+              })()}
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  );
+}