Workspaces in Workspaces all around

2026-02-19 01:49:15 +00:00
parent 72bca6cd42
commit dd8ab84df5
84 changed files with 3047 additions and 749 deletions
@@ -0,0 +1,108 @@
+import type { ComponentType, ReactNode } from 'react';
+import { useState } from 'react';
+import type { LucideIcon } from 'lucide-react';
+import { useGlobal } from 'hooks/useGlobal';
+import { Input } from '@/components/ui/input';
+
+export type SettingsSection = {
+  key: string;
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  content: ReactNode;
+};
+
+type SettingsSidebarProps = {
+  globalKey: string;
+  icon: LucideIcon;
+  label: string;
+  sections: SettingsSection[];
+};
+
+export const SettingsSidebar = ({ globalKey, icon: Icon, label, sections }: SettingsSidebarProps) => {
+  const [selectedKey, setSelectedKey] = useGlobal<string | null>(globalKey, sections[0]?.key ?? null);
+  const [search, setSearch] = useState('');
+
+  const query = search.toLowerCase();
+  const filtered = sections.filter(
+    (s) => s.title.toLowerCase().includes(query) || s.description.toLowerCase().includes(query),
+  );
+
+  return (
+    <div className="flex flex-col h-full overflow-y-auto">
+      <div className="p-3 pb-2">
+        <div className="flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium bg-duck-teal/15 text-duck-teal">
+          <Icon className="h-4 w-4" />
+          {label}
+        </div>
+      </div>
+      <div className="px-3 pb-2">
+        <Input placeholder="Search..." value={search} onChange={(ev) => setSearch(ev.target.value)} className="h-8 text-xs" />
+      </div>
+      <div className="flex flex-col gap-0.5 px-3 overflow-y-auto flex-1">
+        {filtered.map((s) => {
+          const isActive = selectedKey === s.key;
+          return (
+            <button
+              key={s.key}
+              onClick={() => setSelectedKey(s.key)}
+              className={`flex items-start gap-2.5 py-2 px-3 rounded-lg text-left cursor-pointer transition-colors ${
+                isActive ? 'bg-duck-teal/10 text-duck-dark dark:text-foreground' : 'text-duck-dark/70 dark:text-foreground/70 hover:bg-duck-dark/5 dark:hover:bg-foreground/5 hover:text-duck-dark dark:hover:text-foreground'
+              }`}
+            >
+              <s.icon className={`h-3.5 w-3.5 shrink-0 mt-0.5 ${isActive ? 'text-duck-teal' : 'text-duck-dark/40 dark:text-foreground/40'}`} />
+              <div className="min-w-0 flex-1">
+                <div className="text-sm font-medium truncate">{s.title}</div>
+                <div className="text-xs text-duck-dark/40 dark:text-foreground/40 truncate">{s.description}</div>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+type SettingsContentProps = {
+  globalKey: string;
+  sections: SettingsSection[];
+};
+
+export const SettingsContent = ({ globalKey, sections }: SettingsContentProps) => {
+  const [selectedKey] = useGlobal<string | null>(globalKey, sections[0]?.key ?? null);
+  const section = sections.find((s) => s.key === selectedKey);
+
+  if (!section) {
+    return (
+      <div className="h-full flex items-center justify-center">
+        <p className="text-sm text-duck-dark/30 dark:text-foreground/30">Select a section</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      <div className="flex items-center gap-2.5 mb-1">
+        <section.icon className="h-4.5 w-4.5 text-duck-teal shrink-0" />
+        <h2 className="text-lg font-bold text-duck-dark dark:text-foreground">{section.title}</h2>
+      </div>
+      <p className="text-sm text-duck-dark/50 dark:text-foreground/50 mb-6">{section.description}</p>
+      <div className="max-w-xl">{section.content}</div>
+    </div>
+  );
+};
+
+type CreateSettingsPanelParams = {
+  globalKey: string;
+  sidebarIcon: LucideIcon;
+  sidebarLabel: string;
+  sections: SettingsSection[];
+};
+
+export const createSettingsPanelComponents = ({ globalKey, sidebarIcon, sidebarLabel, sections }: CreateSettingsPanelParams) => {
+  const Sidebar: ComponentType = () => (
+    <SettingsSidebar globalKey={globalKey} icon={sidebarIcon} label={sidebarLabel} sections={sections} />
+  );
+  const Content: ComponentType = () => <SettingsContent globalKey={globalKey} sections={sections} />;
+  return { Sidebar, Content };
+};