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

- Create components/settings-header.tsx
- Move header section JSX to new component
- Update settings-view.tsx to use SettingsHeader component
- Remove unused Settings icon import
- Make header configurable with title and description props
- Reduce settings-view.tsx by ~16 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    | 18 ++-----------
 .../components/settings-header.tsx            | 27 +++++++++++++++++++
 2 files changed, 29 insertions(+), 16 deletions(-)
 create mode 100644 app/src/components/views/settings-view/components/settings-header.tsx

diff --git a/app/src/components/views/settings-view.tsx b/app/src/components/views/settings-view.tsx
index db469e2d..2576c88a 100644
--- a/app/src/components/views/settings-view.tsx
+++ b/app/src/components/views/settings-view.tsx
@@ -3,10 +3,10 @@
 import { useState } from "react";
 import { useAppStore } from "@/store/app-store";
 import { Button } from "@/components/ui/button";
-import { Settings } from "lucide-react";
 import { useCliStatus } from "./settings-view/hooks/use-cli-status";
 import { useScrollTracking } from "./settings-view/hooks/use-scroll-tracking";
 import { NAV_ITEMS } from "./settings-view/config/navigation";
+import { SettingsHeader } from "./settings-view/components/settings-header";
 import { KeyboardMapDialog } from "./settings-view/components/keyboard-map-dialog";
 import { DeleteProjectDialog } from "./settings-view/components/delete-project-dialog";
 import { SettingsNavigation } from "./settings-view/components/settings-navigation";
@@ -72,21 +72,7 @@ export function SettingsView() {
       data-testid="settings-view"
     >
       {/* Header Section */}
-      <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
-        <div className="px-8 py-6">
-          <div className="flex items-center gap-3">
-            <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
-              <Settings className="w-5 h-5 text-primary-foreground" />
-            </div>
-            <div>
-              <h1 className="text-2xl font-bold text-foreground">Settings</h1>
-              <p className="text-sm text-muted-foreground">
-                Configure your API keys and preferences
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
+      <SettingsHeader />
 
       {/* Content Area with Sidebar */}
       <div className="flex-1 flex overflow-hidden">
diff --git a/app/src/components/views/settings-view/components/settings-header.tsx b/app/src/components/views/settings-view/components/settings-header.tsx
new file mode 100644
index 00000000..163c9148
--- /dev/null
+++ b/app/src/components/views/settings-view/components/settings-header.tsx
@@ -0,0 +1,27 @@
+import { Settings } from "lucide-react";
+
+interface SettingsHeaderProps {
+  title?: string;
+  description?: string;
+}
+
+export function SettingsHeader({
+  title = "Settings",
+  description = "Configure your API keys and preferences",
+}: SettingsHeaderProps) {
+  return (
+    <div className="shrink-0 border-b border-border bg-glass backdrop-blur-md">
+      <div className="px-8 py-6">
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-xl bg-linear-to-br from-brand-500 to-brand-600 shadow-lg shadow-brand-500/20 flex items-center justify-center">
+            <Settings className="w-5 h-5 text-primary-foreground" />
+          </div>
+          <div>
+            <h1 className="text-2xl font-bold text-foreground">{title}</h1>
+            <p className="text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}