From 6423c216b8e149232a4ed2ccfbcd3f92a6b20e82 Mon Sep 17 00:00:00 2001 From: Dhruv Sharma <237243628+Dhruv-Sharma29@users.noreply.github.com> Date: Fri, 6 Nov 2026 14:15:55 +0530 Subject: [PATCH] feat(toolbar): use icon-only buttons where the icon is clear The toolbar wrapped button labels onto a second line at ordinary window widths. Open, Project, Save, Browser, Focus, Preview, AI, Cite and Publication now show only their icon. Export formats (HTML, PDF, DOCX) and the font-size controls keep their text. - Each icon-only button has a tooltip and an aria-label. The tooltip shows the button's shortcut, read from the shared shortcut table, so it is correct on each platform (Save used to say Ctrl+S on macOS). - Toggle buttons expose aria-pressed and share one active style. The Publication button no longer has its own styling. - Project uses its own icon so it no longer looks like Show in Finder. - The toolbar wraps onto a second row in narrow windows instead of overflowing. - Add a toolbar reference to the user guide, and point the docs at the new button names. Closes #457 --- docs/ProjectAIWorkflows.md | 2 +- docs/ProjectWorkflows.md | 2 +- docs/UserGuide.md | 32 +++++-- frontend/src/components/Toolbar.tsx | 135 +++++++++++++--------------- 4 files changed, 91 insertions(+), 80 deletions(-) diff --git a/docs/ProjectAIWorkflows.md b/docs/ProjectAIWorkflows.md index b1897716..663da50d 100644 --- a/docs/ProjectAIWorkflows.md +++ b/docs/ProjectAIWorkflows.md @@ -1,6 +1,6 @@ # AI Panel and Notes Context -The AI panel groups the application's document chat, AI editing, translation, provider settings, and local notes retrieval. Open it with **AI** in the toolbar. Its tabs are **Chat**, **Work**, **Translate**, and **Settings**. +The AI panel groups the application's document chat, AI editing, translation, provider settings, and local notes retrieval. Open it with **AI Assistant** (πŸ€–) in the toolbar. Its tabs are **Chat**, **Work**, **Translate**, and **Settings**. ## Chat with document context diff --git a/docs/ProjectWorkflows.md b/docs/ProjectWorkflows.md index bdc5b58e..192f76c9 100644 --- a/docs/ProjectWorkflows.md +++ b/docs/ProjectWorkflows.md @@ -4,7 +4,7 @@ This guide documents the project-wide workflows implemented in Markdown Reader. ## Open a project folder -Choose **Project** in the toolbar or **File β†’ Open Folder**. The application recursively discovers supported files below the selected folder and opens those files in editor tabs. The Explorer also displays the folder hierarchy; its subdirectories load when expanded, and selecting a file in the tree opens that file in a tab. +Choose **Open project folder** (πŸ—‚οΈ) in the toolbar or **File β†’ Open Folder**. The application recursively discovers supported files below the selected folder and opens those files in editor tabs. The Explorer also displays the folder hierarchy; its subdirectories load when expanded, and selecting a file in the tree opens that file in a tab. Because opening a project can open many files, use a folder containing the documents you intend to work with. Project translation and Project Work use the selected folder as their root. Project Work can use the current contents of open editor tabs as input, so keep the intended project selected and save important changes before starting. diff --git a/docs/UserGuide.md b/docs/UserGuide.md index 8b28d7bc..8bec1dd6 100644 --- a/docs/UserGuide.md +++ b/docs/UserGuide.md @@ -4,6 +4,7 @@ This guide describes user-facing workflows present in the current application. T ## Contents +- [Toolbar](#toolbar) - [Open and edit documents](#open-and-edit-documents) - [Focus Mode](#focus-mode) - [Manage files and projects](#manage-files-and-projects) @@ -17,23 +18,44 @@ This guide describes user-facing workflows present in the current application. T - [Export and publication](#export-and-publication) - [Troubleshooting](#troubleshooting) +## Toolbar + +Most toolbar buttons show only an icon. Hover over a button to see its name and, when it has one, its keyboard shortcut; screen readers announce the same name. Export formats and font-size controls keep their text, because the text is the information. + +| Icon | Name | What it does | +| --- | --- | --- | +| πŸ“‚ | Open file | Opens a supported document in a new tab. | +| πŸ—‚οΈ | Open project folder | Opens a local folder in the Explorer. | +| πŸ’Ύ | Save | Saves the active tab. | +| HTML / PDF / DOCX | Export | Exports the active document in that format. | +| 🌐 | Open rendered preview in browser | Opens the rendered document in your web browser. | +| A- / A+ and the number field | Font size | Changes the editor font size (8 to 72). | +| 🧠 | Focus Mode | Switches between the main editor and Focus Mode. | +| πŸ‘ | Preview | Shows or hides the preview panel. | +| πŸ€– | AI Assistant | Shows or hides the AI panel. | +| πŸ“š | Citations | Shows or hides the BibTeX citation panel. | +| πŸ“ | Publication | Shows or hides the publication panel. | +| πŸŒ™ / β˜€οΈ | Dark or light mode | Switches the color theme. | + +Toggle buttons are highlighted while their mode or panel is on. When the window is narrow, the toolbar wraps onto a second row instead of hiding buttons. + ## Open and edit documents -Markdown Reader provides a tabbed Markdown editor and rendered preview. Use **File β†’ Open File** or the toolbar's **Open** button to select a supported document. Markdown, Markdown extensions, and plain-text files open directly. Supported non-Markdown formats are converted to Markdown when their converter is available. +Markdown Reader provides a tabbed Markdown editor and rendered preview. Use **File β†’ Open File** or the toolbar's **Open file** (πŸ“‚) button to select a supported document. Markdown, Markdown extensions, and plain-text files open directly. Supported non-Markdown formats are converted to Markdown when their converter is available. The main editor uses Monaco in Markdown mode. It supports line numbers, word wrapping, code folding, and configurable font size. The toolbar's font-size field accepts whole-number values from 8 to 72. Tabs can represent files on disk or untitled documents. Unsaved changes are indicated in the status bar. ## Focus Mode -Choose **Focus** in the toolbar to switch from the split Monaco-and-preview workspace to a distraction-reduced rich Markdown editor. Focus Mode uses Milkdown/Crepe with CommonMark, GitHub Flavored Markdown, math, history, and an editor slash-command menu. The Explorer and right-hand side panel are hidden while Focus Mode is active; the app toolbar and document tabs remain available. +Choose **Focus Mode** (🧠) in the toolbar to switch from the split Monaco-and-preview workspace to a distraction-reduced rich Markdown editor. Focus Mode uses Milkdown/Crepe with CommonMark, GitHub Flavored Markdown, math, history, and an editor slash-command menu. The Explorer and right-hand side panel are hidden while Focus Mode is active; the app toolbar and document tabs remain available. The Focus Mode editor handles Markdown paste separately from rich HTML clipboard content. When pasted plain text contains recognizable Markdown syntax, it can parse that text as Markdown rather than inserting visible source markers. Richly formatted HTML clipboard content remains on the normal rich-paste path. -Use the toolbar's **Focus** control again to return to the main editor workspace. The main editor's Monaco-specific search, replace, formatting, and table shortcuts are documented in the [keyboard shortcut reference](./KeyboardShortcuts.md); not every Monaco action is available from the Focus Mode editor. +Use the toolbar's **Focus Mode** control again to return to the main editor workspace. The main editor's Monaco-specific search, replace, formatting, and table shortcuts are documented in the [keyboard shortcut reference](./KeyboardShortcuts.md); not every Monaco action is available from the Focus Mode editor. ## Manage files and projects -Use the File menu or toolbar to create, open, save, and close document tabs. The **Project** toolbar button opens a local folder. The Explorer displays its directory tree; folders load their entries when expanded, and selecting a file opens it in a tab. +Use the File menu or toolbar to create, open, save, and close document tabs. The **Open project folder** (πŸ—‚οΈ) toolbar button opens a local folder. The Explorer displays its directory tree; folders load their entries when expanded, and selecting a file opens it in a tab. Opening a project also recursively opens supported files under that folder into editor tabs. For a large project, this can create many tabs. The project translation and Project Work tools use the selected project folder as their scope. Close the project from the Explorer when you no longer need that folder context. @@ -51,7 +73,7 @@ Keyboard shortcuts use **Command** as the primary modifier on macOS and **Ctrl** ## AI-assisted writing and translation -Open the **AI** toolbar panel. It contains **Chat**, **Work**, **Translate**, and **Settings** tabs. +Open the **AI Assistant** (πŸ€–) toolbar panel. It contains **Chat**, **Work**, **Translate**, and **Settings** tabs. In Chat, ask questions about the active document or selected text. When the AI returns a proposed document action, inspect it and use the displayed Apply control to apply it. Some built-in slash commands can also be entered in the chat input. diff --git a/frontend/src/components/Toolbar.tsx b/frontend/src/components/Toolbar.tsx index 29c1e57a..21fd80c1 100644 --- a/frontend/src/components/Toolbar.tsx +++ b/frontend/src/components/Toolbar.tsx @@ -13,6 +13,7 @@ import type { } from "react"; import { PANELS, type PanelId } from "@/types/panels"; +import { DEFAULT_SHORTCUTS, formatShortcut } from "@/lib/keyboardShortcuts"; const MIN_FONT_SIZE = 8; const MAX_FONT_SIZE = 72; @@ -88,49 +89,33 @@ export default function Toolbar({ }; return ( -
+
{/* File ops */} - - - + + + {lastExportedPath && ( - )} -
+ - {/* Export */} + {/* Export: the format names are the information, so they stay as text. */} Export: {(["html", "pdf", "docx"] as const).map((fmt) => ( - ))} + - - -
+ {/* Font size */} Font: - + - +
@@ -180,55 +165,59 @@ export default function Toolbar({ )} {/* Toggles */} - - - - - - + + onTogglePanel(PANELS.PREVIEW)} pressed={activePanel === PANELS.PREVIEW} /> + onTogglePanel(PANELS.AI)} pressed={activePanel === PANELS.AI} /> + onTogglePanel(PANELS.CITATION)} pressed={activePanel === PANELS.CITATION} /> + onTogglePanel(PANELS.PUBLICATION)} pressed={activePanel === PANELS.PUBLICATION} /> +
); } +const EXPORT_ACTION_SUFFIX = { html: "Html", pdf: "Pdf", docx: "Docx" } as const; + +/** "Save (Cmd+S)": the label plus the shortcut bound to `shortcutId`, if any. */ +function withShortcut(label: string, shortcutId?: string) { + const binding = DEFAULT_SHORTCUTS.find((shortcut) => shortcut.id === shortcutId)?.bindings[0]; + return binding ? `${label} (${formatShortcut(binding)})` : label; +} + +type IconButtonProps = { + icon: string; + /** Tooltip and accessible name; the icon alone is shown. */ + label: string; + shortcutId?: string; + onClick: () => void; + disabled?: boolean; + /** Set for toggles, so their on/off state is exposed and highlighted. */ + pressed?: boolean; +}; + +function IconButton({ icon, label, shortcutId, onClick, disabled = false, pressed }: IconButtonProps) { + return ( + + ); +} + +function Divider() { + return
; +} + +const activeCls = "bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300"; + const btnCls = "px-2 py-0.5 rounded text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-[#2d2d2d] transition-colors";