feat(renderer): AppHeader gets Settings + About icon buttons

src/renderer/components/layout/AppHeader.tsx

@@ -1,4 +1,4 @@
-import { PanelLeft, PanelRight, Keyboard } from 'lucide-react';
+import { PanelLeft, PanelRight, Keyboard, Settings, Info } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { ThemeToggle } from '@/components/theme-toggle';
 import { useAppStore } from '@/stores/app-store';
@@ -47,6 +47,22 @@ export function AppHeader() {
         >
           <Keyboard className="h-4 w-4" />
         </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="Settings"
+          onClick={() => dispatch('settings.open')}
+        >
+          <Settings className="h-4 w-4" />
+        </Button>
+        <Button
+          variant="ghost"
+          size="icon"
+          aria-label="About"
+          onClick={() => dispatch('help.about')}
+        >
+          <Info className="h-4 w-4" />
+        </Button>
         <ThemeToggle />
       </div>
     </header>

tests/component/layout/AppHeader.test.tsx

@@ -19,6 +19,12 @@ describe('AppHeader', () => {
       useAppStore.getState().togglePreview();
     });
     useCommandStore.getState().register('shortcuts.show', () => {});
+    useCommandStore.getState().register('settings.open', () => {
+      useAppStore.getState().openModal('settings');
+    });
+    useCommandStore.getState().register('help.about', () => {
+      useAppStore.getState().openModal('about');
+    });
   });
 
   it('renders the app title', () => {
@@ -64,4 +70,24 @@ describe('AppHeader', () => {
     // The test passes if no error is thrown and the click is processed.
     expect(btn).toBeInTheDocument();
   });
+
+  it('settings button opens settings modal', async () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <AppHeader />
+      </ThemeProvider>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /settings/i }));
+    expect(useAppStore.getState().modal).toEqual({ kind: 'settings' });
+  });
+
+  it('about button opens about modal', async () => {
+    render(
+      <ThemeProvider defaultTheme="dark" attribute="class">
+        <AppHeader />
+      </ThemeProvider>
+    );
+    await userEvent.click(screen.getByRole('button', { name: /^about$/i }));
+    expect(useAppStore.getState().modal).toEqual({ kind: 'about' });
+  });
 });