ros/automaker
1
0
Fork 0
mirror of https://github.com/AutoMaker-Org/automaker.git synced 2026-02-03 21:03:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor(settings): extract settings header to component

Browse Source 
- 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>
This commit is contained in:
Kacper
2025-12-11 00:55:33 +01:00
parent 215ae87950
commit ac3ea90950
2 changed files with 29 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/src/components/views/settings-view.tsx
View File

@@ -3,10 +3,10 @@
import { useState } from "react"; import { useState } from "react";
import { useAppStore } from "@/store/app-store"; import { useAppStore } from "@/store/app-store";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { Settings } from "lucide-react";
import { useCliStatus } from "./settings-view/hooks/use-cli-status"; import { useCliStatus } from "./settings-view/hooks/use-cli-status";
import { useScrollTracking } from "./settings-view/hooks/use-scroll-tracking"; import { useScrollTracking } from "./settings-view/hooks/use-scroll-tracking";
import { NAV_ITEMS } from "./settings-view/config/navigation"; 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 { KeyboardMapDialog } from "./settings-view/components/keyboard-map-dialog";
import { DeleteProjectDialog } from "./settings-view/components/delete-project-dialog"; import { DeleteProjectDialog } from "./settings-view/components/delete-project-dialog";
import { SettingsNavigation } from "./settings-view/components/settings-navigation"; import { SettingsNavigation } from "./settings-view/components/settings-navigation";
@@ -72,21 +72,7 @@ export function SettingsView() {
data-testid="settings-view" data-testid="settings-view"
> >
{/* Header Section */} {/* Header Section */}
<div className="shrink-0 border-b border-border bg-glass backdrop-blur-md"> <SettingsHeader />
<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>
{/* Content Area with Sidebar */} {/* Content Area with Sidebar */}
<div className="flex-1 flex overflow-hidden"> <div className="flex-1 flex overflow-hidden">

27
app/src/components/views/settings-view/components/settings-header.tsx Normal file
View File

@@ -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>
);
}