amitwh/markdown-converter
1
0
Fork 0
mirror of https://github.com/amitwh/markdown-converter.git synced 2026-08-03 02:11:07 +05:30
Code Issues Packages Projects Releases Wiki Activity

feat(renderer): Toolbar wired to command store

Browse Source 
- 5 functional buttons: Open file, Open folder, Save, Toggle sidebar, Toggle preview
- each dispatches via useCommandStore
- aria-pressed on toggle buttons reflects app store state
- formatting buttons (bold, italic, etc.) stay disabled (Phase 9)
- toolbar now has role='toolbar' and aria-label
- TDD: 9 component tests
This commit is contained in:
Amit Haridas
2026-06-05 15:58:21 +05:30
parent 1717b2e8c0
commit 487ce2ad45
2 changed files with 161 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/layout/Toolbar.tsx
+71 -9
View File
@@ -1,15 +1,77 @@
import { Bold, Italic, List, ListOrdered, Code, Link as LinkIcon } from 'lucide-react';
import { Bold, Italic, List, ListOrdered, Code, Link as LinkIcon, PanelLeft, PanelRight, Save, FolderOpen, FileText } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { useCommandStore } from '@/stores/command-store';
import { useAppStore } from '@/stores/app-store';
export function Toolbar() {
const dispatch = useCommandStore((s) => s.dispatch);
const { sidebarVisible, previewVisible } = useAppStore();
return (
<div className="flex h-10 items-center gap-1 border-b border-border bg-card/10 px-3">
<Button variant="ghost" size="icon" aria-label="Bold"><Bold className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" aria-label="Italic"><Italic className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" aria-label="Unordered list"><List className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" aria-label="Ordered list"><ListOrdered className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" aria-label="Code"><Code className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" aria-label="Link"><LinkIcon className="h-4 w-4" /></Button>
<div
role="toolbar"
aria-label="Main toolbar"
className="flex h-10 items-center gap-1 border-b border-border bg-card/10 px-3"
>
<Button
variant="ghost"
size="icon"
aria-label="Open file"
data-testid="toolbar-open-file"
onClick={() => dispatch('file.open')}
>
<FileText className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Open folder"
data-testid="toolbar-open-folder"
onClick={() => dispatch('file.openFolder')}
>
<FolderOpen className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Save"
data-testid="toolbar-save"
onClick={() => dispatch('file.save')}
>
<Save className="h-4 w-4" />
</Button>
<div className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
<Button
variant="ghost"
size="icon"
aria-label="Toggle sidebar"
aria-pressed={sidebarVisible}
data-testid="toolbar-toggle-sidebar"
onClick={() => dispatch('view.toggleSidebar')}
>
<PanelLeft className="h-4 w-4" />
</Button>
<Button
variant="ghost"
size="icon"
aria-label="Toggle preview"
aria-pressed={previewVisible}
data-testid="toolbar-toggle-preview"
onClick={() => dispatch('view.togglePreview')}
>
<PanelRight className="h-4 w-4" />
</Button>
<div className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
<Button variant="ghost" size="icon" aria-label="Bold" disabled><Bold className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" aria-label="Italic" disabled><Italic className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" aria-label="Unordered list" disabled><List className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" aria-label="Ordered list" disabled><ListOrdered className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" aria-label="Code" disabled><Code className="h-4 w-4" /></Button>
<Button variant="ghost" size="icon" aria-label="Link" disabled><LinkIcon className="h-4 w-4" /></Button>
</div>
);
}
}