feat: add settings dialog with theme selection

src/App.tsx

@@ -1,19 +1,37 @@
-import { useEffect } from "react";
+import { useState, useEffect, useCallback } from "react";
 import { useAppStore } from "@/stores/app-store";
 import { AppShell } from "@/components/layout/AppShell";
 import { BoardList } from "@/components/boards/BoardList";
 import { BoardView } from "@/components/board/BoardView";
 import { CommandPalette } from "@/components/command-palette/CommandPalette";
+import { SettingsDialog } from "@/components/settings/SettingsDialog";
 
 export default function App() {
   const initialized = useAppStore((s) => s.initialized);
   const init = useAppStore((s) => s.init);
   const view = useAppStore((s) => s.view);
 
+  const [settingsOpen, setSettingsOpen] = useState(false);
+
   useEffect(() => {
     init();
   }, [init]);
 
+  // Listen for custom event to open settings from TopBar or command palette
+  useEffect(() => {
+    function handleOpenSettings() {
+      setSettingsOpen(true);
+    }
+    document.addEventListener("open-settings-dialog", handleOpenSettings);
+    return () => {
+      document.removeEventListener("open-settings-dialog", handleOpenSettings);
+    };
+  }, []);
+
+  const handleOpenSettings = useCallback(() => {
+    setSettingsOpen(true);
+  }, []);
+
   if (!initialized) {
     return (
       <div className="flex h-screen items-center justify-center bg-pylon-bg">
@@ -29,7 +47,8 @@ export default function App() {
       <AppShell>
         {view.type === "board-list" ? <BoardList /> : <BoardView />}
       </AppShell>
-      <CommandPalette onOpenSettings={() => {}} />
+      <CommandPalette onOpenSettings={handleOpenSettings} />
+      <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
     </>
   );
 }