From d8f55f26db61f1c616d24498073a6c76e96fee85 Mon Sep 17 00:00:00 2001
From: Kacper <kacperlachowiczwp.pl@wp.pl>
Date: Thu, 11 Dec 2025 00:50:38 +0100
Subject: [PATCH] refactor(settings): extract keyboard map dialog to component
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create components/keyboard-map-dialog.tsx
- Move keyboard shortcut map dialog JSX to new component
- Update settings-view.tsx to use KeyboardMapDialog component
- Remove unused Keyboard icon import
- Remove unused KeyboardMap and ShortcutReferencePanel imports
- Remove unused useSetupStore import and destructuring
- Reduce settings-view.tsx by ~30 lines
- Improve component modularity and reusability

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
---
 app/src/components/views/settings-view.tsx    | 42 ++---------------
 .../components/keyboard-map-dialog.tsx        | 46 +++++++++++++++++++
 2 files changed, 50 insertions(+), 38 deletions(-)
 create mode 100644 app/src/components/views/settings-view/components/keyboard-map-dialog.tsx

diff --git a/app/src/components/views/settings-view.tsx b/app/src/components/views/settings-view.tsx
index 1bf13beb..3f3373e3 100644
--- a/app/src/components/views/settings-view.tsx
+++ b/app/src/components/views/settings-view.tsx
@@ -2,11 +2,9 @@
 
 import { useState } from "react";
 import { useAppStore } from "@/store/app-store";
-import { useSetupStore } from "@/store/setup-store";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
-import { Settings, Keyboard, Trash2, Folder } from "lucide-react";
-import { getElectronAPI } from "@/lib/electron";
+import { Settings, Trash2, Folder } from "lucide-react";
 import {
   Dialog,
   DialogContent,
@@ -15,13 +13,10 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
-import { KeyboardMap, ShortcutReferencePanel } from "@/components/ui/keyboard-map";
-// Import custom hooks
 import { useCliStatus } from "./settings-view/hooks/use-cli-status";
 import { useScrollTracking } from "./settings-view/hooks/use-scroll-tracking";
-// Import config
 import { NAV_ITEMS } from "./settings-view/config/navigation";
-// Import extracted sections
+import { KeyboardMapDialog } from "./settings-view/components/keyboard-map-dialog";
 import { ApiKeysSection } from "./settings-view/api-keys/api-keys-section";
 import { ClaudeCliStatus } from "./settings-view/cli-status/claude-cli-status";
 import { CodexCliStatus } from "./settings-view/cli-status/codex-cli-status";
@@ -49,9 +44,6 @@ export function SettingsView() {
     moveProjectToTrash,
   } = useAppStore();
 
-  const { claudeAuthStatus, codexAuthStatus, setClaudeAuthStatus, setCodexAuthStatus } =
-    useSetupStore();
-
   // Compute the effective theme for the current project
   const effectiveTheme = currentProject?.theme || theme;
 
@@ -211,36 +203,10 @@ export function SettingsView() {
       </div>
 
       {/* Keyboard Map Dialog */}
-      <Dialog
+      <KeyboardMapDialog
         open={showKeyboardMapDialog}
         onOpenChange={setShowKeyboardMapDialog}
-      >
-        <DialogContent className="bg-popover border-border max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
-          <DialogHeader>
-            <DialogTitle className="flex items-center gap-2">
-              <Keyboard className="w-5 h-5 text-brand-500" />
-              Keyboard Shortcut Map
-            </DialogTitle>
-            <DialogDescription className="text-muted-foreground">
-              Visual overview of all keyboard shortcuts. Keys in color are bound
-              to shortcuts. Click on any shortcut below to edit it.
-            </DialogDescription>
-          </DialogHeader>
-
-          <div className="flex-1 overflow-y-auto space-y-6 py-4 pl-3 pr-6 pb-6">
-            {/* Visual Keyboard Map */}
-            <KeyboardMap />
-
-            {/* Shortcut Reference - Editable */}
-            <div className="border-t border-border pt-4">
-              <h3 className="text-sm font-semibold text-foreground mb-4">
-                All Shortcuts Reference (Click to Edit)
-              </h3>
-              <ShortcutReferencePanel editable />
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
+      />
 
       {/* Delete Project Confirmation Dialog */}
       <Dialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
diff --git a/app/src/components/views/settings-view/components/keyboard-map-dialog.tsx b/app/src/components/views/settings-view/components/keyboard-map-dialog.tsx
new file mode 100644
index 00000000..b69a37cb
--- /dev/null
+++ b/app/src/components/views/settings-view/components/keyboard-map-dialog.tsx
@@ -0,0 +1,46 @@
+import { Keyboard } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { KeyboardMap, ShortcutReferencePanel } from "@/components/ui/keyboard-map";
+
+interface KeyboardMapDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+export function KeyboardMapDialog({ open, onOpenChange }: KeyboardMapDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-popover border-border max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Keyboard className="w-5 h-5 text-brand-500" />
+            Keyboard Shortcut Map
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Visual overview of all keyboard shortcuts. Keys in color are bound to
+            shortcuts. Click on any shortcut below to edit it.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-y-auto space-y-6 py-4 pl-3 pr-6 pb-6">
+          {/* Visual Keyboard Map */}
+          <KeyboardMap />
+
+          {/* Shortcut Reference - Editable */}
+          <div className="border-t border-border pt-4">
+            <h3 className="text-sm font-semibold text-foreground mb-4">
+              All Shortcuts Reference (Click to Edit)
+            </h3>
+            <ShortcutReferencePanel editable />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}