diff --git a/src/renderer/components/layout/AppHeader.tsx b/src/renderer/components/layout/AppHeader.tsx
index 24f4a09..7e6a4bf 100644
--- a/src/renderer/components/layout/AppHeader.tsx
+++ b/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() {
>
+
+
diff --git a/tests/component/layout/AppHeader.test.tsx b/tests/component/layout/AppHeader.test.tsx
index 98ec1ec..27494cf 100644
--- a/tests/component/layout/AppHeader.test.tsx
+++ b/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(
+
+
+
+ );
+ await userEvent.click(screen.getByRole('button', { name: /settings/i }));
+ expect(useAppStore.getState().modal).toEqual({ kind: 'settings' });
+ });
+
+ it('about button opens about modal', async () => {
+ render(
+
+
+
+ );
+ await userEvent.click(screen.getByRole('button', { name: /^about$/i }));
+ expect(useAppStore.getState().modal).toEqual({ kind: 'about' });
+ });
});
\ No newline at end of file