Skip to content

icon buttons from lucide #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
HashDBrown merged 1 commit into from
Jun 22, 2026
Merged

icon buttons from lucide #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@
"@tauri-apps/plugin-fs": "^2.5.1",
"@tauri-apps/plugin-opener": "^2",
"@uiw/react-codemirror": "^4.25.10",
"lucide-react": "^1.21.0",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-markdown": "^10.1.0",
Expand Down
15 changes: 15 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,9 @@ body,
}

.toolbar-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font: inherit;
font-size: 0.7rem;
letter-spacing: 0.04em;
Expand All @@ -270,13 +273,25 @@ body,
border-radius: 4px;
padding: 2px 8px;
cursor: pointer;
transition: background 0.12s ease, color 0.12s ease;
}

/* Icon-only buttons: square them off so they don't inherit text padding */
.toolbar-btn--icon {
justify-content: center;
gap: 0;
padding: 4px;
}

.toolbar-btn:hover:not(:disabled) {
background: var(--toolbar-btn-hover-bg);
color: var(--toolbar-btn-hover-fg);
}

.toolbar-btn:active:not(:disabled) {
transform: translateY(0.5px);
}

.toolbar-btn:disabled {
opacity: 0.4;
cursor: default;
Expand Down
44 changes: 24 additions & 20 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { invoke } from "@tauri-apps/api/core";
import { getCurrentWindow } from "@tauri-apps/api/window";
import { listen } from "@tauri-apps/api/event";
import { gutters } from "@codemirror/view";
import { PanelLeftClose, PanelLeftOpen, PanelRightClose, PanelRightOpen, Search, Folder, Info, Settings, ClipboardCopy, Check } from "lucide-react";
import { MilkdownEditor } from "./MilkdownEditor";
import { FileTree, type FileNode } from "./FileTree";
import { CommandPalette, FindOverlay } from "./SearchOverlays";
Expand Down Expand Up @@ -591,23 +592,30 @@ function App() {
)}
</div>
<div className="toolbar-actions">
<button
className={`toolbar-btn ${viewMode === "preview" ? "active" : ""}`}
<button
className={`toolbar-btn toolbar-btn--icon ${viewMode === "preview" ? "active" : ""}`}
onClick={() => setViewMode(viewMode === "preview" ? "both" : "preview")}
title={viewMode === "preview" ? "Show Editor" : "Hide Editor"}
aria-label={viewMode === "preview" ? "Show editor" : "Hide editor"}
>
{viewMode === "preview" ? "Show Editor" : "Hide Editor"}
{viewMode === "preview" ? <PanelLeftOpen size={18} strokeWidth={1.5} /> : <PanelLeftClose size={18} strokeWidth={1.5} />}
</button>
<button
className={`toolbar-btn ${viewMode === "editor" ? "active" : ""}`}
<button
className={`toolbar-btn toolbar-btn--icon ${viewMode === "editor" ? "active" : ""}`}
onClick={() => setViewMode(viewMode === "editor" ? "both" : "editor")}
title={viewMode === "editor" ? "Show Preview" : "Hide Preview"}
aria-label={viewMode === "editor" ? "Show preview" : "Hide preview"}
>
{viewMode === "editor" ? "Show Preview" : "Hide Preview"}
{viewMode === "editor" ? <PanelRightOpen size={18} strokeWidth={1.5} /> : <PanelRightClose size={18} strokeWidth={1.5} />}
</button>
<div className="toolbar-divider" style={{ width: '1px', height: '20px', background: 'var(--toolbar-border)', margin: '0 4px' }} />
<button className="toolbar-btn" onClick={handleCopy} title="Copy Markdown">
{copied ? "✓" : "Copy"}
<button
className="toolbar-btn toolbar-btn--icon"
onClick={handleCopy}
title="Copy Markdown"
aria-label={copied ? "Copied" : "Copy Markdown"}
>
{copied ? <Check size={18} strokeWidth={1.5}/> : <ClipboardCopy size={18} />}
</button>
<button className="toolbar-btn" onClick={() => void exportToPdf()} title="Export as PDF">
Export PDF
Expand Down Expand Up @@ -711,20 +719,18 @@ function App() {
className={`activity-btn ${sidebarOpen ? "active" : ""}`}
onClick={() => setSidebarOpen((prev) => !prev)}
title="Toggle File Tree Sidebar"
aria-label="Toggle file tree sidebar"
>
<svg className="activity-icon" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M19 5.5H12L10 3.5H5c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-11c0-1.1-.9-2-2-2zm0 13H5v-11h14v11z"/>
</svg>
<Folder className="activity-icon" size={20} />
</button>

<button
className="activity-btn"
onClick={() => setShowCommandPalette(true)}
title="Search Files and Content"
aria-label="Search files and content"
>
<svg className="activity-icon" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
</svg>
<Search className="activity-icon" size={20} />
</button>
</div>

Expand All @@ -733,10 +739,9 @@ function App() {
className={`activity-btn ${showHelp ? "active" : ""}`}
onClick={() => setShowHelp(true)}
title="Help & Shortcuts"
aria-label="Help and shortcuts"
>
<svg className="activity-icon" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
</svg>
<Info className="activity-icon" size={20} />
</button>

<button
Expand All @@ -745,10 +750,9 @@ function App() {
setTheme((t) => (t === "dark" || (t === "system" && systemDark) ? "light" : "dark"));
}}
title="Toggle Theme (Settings)"
aria-label="Toggle theme"
>
<svg className="activity-icon" viewBox="0 0 24 24" width="20" height="20">
<path fill="currentColor" d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84a.48.48 0 0 0-.48.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87a.49.49 0 0 0 .12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
</svg>
<Settings className="activity-icon" size={20} />
</button>
</div>
</nav>
Expand Down
Loading