feat: hide the top bar for reading with a configurable toggle

README.md

@@ -27,7 +27,7 @@ The extension ID is `BinaryOutlook.binary-markdown`. Installation leaves your de
 ## Features
 
 - **Visual, Source, and Split views:** semantic paragraphs and lists, preserved source for unchanged blocks, links, images, blockquotes, an Outline/Document rail, and an editable Markdown pane beside a read-only live preview.
-- **Formatting and tables:** Full or Simple toolbars, a permanent three-dot search across formatting and insertion commands, a `>>`/`<<` toolbar toggle with optional contextual tools, and the retained Insert workspace and Action Palette, HTML-backed underline, compact table controls with clickable row/column gutters and distinct text selection, horizontal scrolling for wide tables, and aligned or compact source formatting for edited tables.
+- **Formatting and tables:** Full or Simple toolbars, an 01md toggle to hide the entire bar for reading with optional chevrons and hover-only recovery, a three-dot search across formatting and insertion commands, a `>>`/`<<` toolbar toggle with optional contextual tools, and the retained Insert workspace and Action Palette, HTML-backed underline, compact table controls with clickable row/column gutters and distinct text selection, horizontal scrolling for wide tables, and aligned or compact source formatting for edited tables.
 - **Code and equations:** syntax highlighting, searchable language selection, labeled or icon-only code controls for copying and soft wrapping, a visible wrap notice, editable KaTeX source, and Mermaid diagrams. See [code block features](docs/editor-guide.md#-code-block-features).
 - **A configurable writing space:** themes, seven interface languages, full or capped column width, column alignment, and optional width guides.
 - **Find and Replace:** source-context results, selected replacements, and case, whole-word, or regular-expression matching with a shared undo history.

docs/editor-guide.md

@@ -6,9 +6,19 @@ Adapted from the inherited editor documentation. See [Acknowledgments](../ACKNOW
 
 The **Full** toolbar shows standard text formatting by default in VS Code and the desktop app. Choose **Simple** with `binary-markdown.toolbarMode` in VS Code Settings or **Toolbar** in desktop Preferences for compact history, view, and utility controls. Explicit `simple` and `full` preferences are retained. This default also applies to existing configurations without a stored toolbar preference; it is not limited to new installations.
 
-The three-dot **More toolbar actions** button is always available. Resizing keeps complete buttons in the toolbar and puts remaining actions under that menu, with a search field at the top. Typing searches the complete formatting, insertion, and view command catalog, including actions already visible in the toolbar. With an empty search, the menu shows the overflow actions, or the full catalog when all toolbar actions fit. Arrow Down enters the choices; use the arrow keys and `Home`/`End` on a choice, or press Enter in the search field to run the first enabled result. Escape closes the menu and returns focus to the three-dot button while retaining the editor selection. Changing toolbar mode keeps the document, selection, active equation input, and undo history.
+While the top bar is visible, the three-dot **More toolbar actions** button is always available. Resizing keeps complete buttons in the toolbar and puts remaining actions under that menu, with a search field at the top. Typing searches the complete formatting, insertion, and view command catalog, including actions already visible in the toolbar. With an empty search, the menu shows the overflow actions, or the full catalog when all toolbar actions fit. Arrow Down enters the choices; use the arrow keys and `Home`/`End` on a choice, or press Enter in the search field to run the first enabled result. Escape closes the menu and returns focus to the three-dot button while retaining the editor selection. Changing toolbar mode keeps the document, selection, active equation input, and undo history.
 
-The searchable Action Palette remains available through `Cmd+/`/`Ctrl+/` and the contextual strip's **All actions** ellipsis. Category filters and an action count help you browse descriptions, all six heading levels, insertion commands, Undo/Redo, and navigation/view actions. The toolbar toggle shows `<<` while the formatting row is expanded. Click it to collapse the row and enable **Contextual tools** for the current editor session; the button changes to `>>`. Selected prose then shows a small formatting strip where nearby space permits. The permanent three-dot command search remains available when there is no unobstructed space for the strip. Click `>>` to expand the row again and disable contextual tools; the saved Full/Simple preference stays intact.
+The searchable Action Palette remains available through `Cmd+/`/`Ctrl+/` and the contextual strip's **All actions** ellipsis. Category filters and an action count help you browse descriptions, all six heading levels, insertion commands, Undo/Redo, and navigation/view actions. The **Contextual tools** toggle shows `<<` while the formatting row is expanded. Click it to collapse the row and enable **Contextual tools** for the current editor session; the button changes to `>>`. Selected prose then shows a small formatting strip where nearby space permits. The three-dot command search in the visible top bar remains available when there is no unobstructed space for the strip. Click `>>` to expand the row again and disable contextual tools; the saved Full/Simple preference stays intact.
+
+### Hide the top bar for reading
+
+Click the **01md logo** at the far left, before Undo, to hide the entire top bar and any table controls docked to it. The bar releases its height; only the logo remains in the upper-left corner of the editor pane, with no button background or shadow, including on hover. Its accessible name changes to **Show top bar**. Click it again to restore the bar. This choice lasts for the current editor session, independently of Full/Simple mode and Contextual tools. A newly opened editor starts with the bar visible.
+
+In **Editor & Appearance**, choose `binary-markdown.toolbarToggleIcon` in VS Code Settings or **Top bar toggle icon** in desktop Preferences. The default is **01md logo**; choose **Double chevrons** for upward arrows to hide the bar and downward arrows to show it.
+
+Enable `binary-markdown.toolbarToggleOnHover` or **Show hidden top bar toggle on hover** for an unobstructed reading view. With the bar hidden, move the pointer near the editor pane’s upper-left corner to reveal the button. Keyboard focus also reveals it; Enter or Space toggles the bar. Touch devices keep the button visible. Hover-only visibility is off by default, and reduced-motion preferences disable the fade.
+
+Both settings are saved and update open editors immediately. Toggling the bar preserves document content, selection, active equation input, editing mode, and undo history. Existing keyboard shortcuts, including the Action Palette, remain available while the bar is hidden. Width indicators are a separate preference; turn off `binary-markdown.editorWidthIndicators` to remove their guide row as well.
 
 ## Editor views and document rail
 
@@ -422,6 +432,8 @@ Desktop **Preferences** uses the same Editor & Appearance, Writing Tools, Images
 | `binary-markdown.theme` | Editor theme (`github`, `sepia`, `night`, `dark`, `minimal`, `perplexity`, `things`) | `things` |
 | `binary-markdown.fontSize` | Base font size (px) | `16` |
 | `binary-markdown.toolbarMode` | Toolbar display mode (`full`, `simple`). Simple shows history, contextual tools, command search, and utility controls; search for formatting and insertion commands | `full` |
+| `binary-markdown.toolbarToggleIcon` | Top bar toggle icon: `logo` or `chevrons` | `logo` |
+| `binary-markdown.toolbarToggleOnHover` | Reveal the hidden bar’s toggle on hover or keyboard focus; always visible on touch devices | `false` |
 | `binary-markdown.editorWidthMode` | Visual editor column width: `default`, `full`, or `custom` | `default` |
 | `binary-markdown.editorMaxWidth` | Outer column cap in CSS pixels for Custom mode; integer 320–4000 | `860` |
 | `binary-markdown.editorAlignment` | Position the capped column at the `left`, `center`, or `right` of the pane | `center` |

electron/package.json

@@ -33,6 +33,10 @@
       "out/**/*"
     ],
     "extraResources": [
+      {
+        "from": "../media/icon.png",
+        "to": "media/icon.png"
+      },
       {
         "from": "../out/webview",
         "to": "out/webview",

electron/src/html-generator.ts

@@ -19,6 +19,8 @@ interface ElectronEditorConfig {
     codeLanguageOrder?: string;
     codeBlockActionLabels?: boolean;
     toolbarMode: string;
+    toolbarToggleIcon?: string;
+    toolbarToggleOnHover?: boolean;
     tableToolbarPosition?: string;
     tableSourceFormat?: string;
     documentBaseUri: string;
@@ -98,7 +100,7 @@ export function generateEditorHtml(
     const vendorFileUri = (file: string) => fileUri(path.join(vendorDir, file));
 
     return `<!DOCTYPE html>
-<html lang="en" data-theme="${config.theme}" data-code-block-action-labels="${config.codeBlockActionLabels !== false}" data-editor-width-mode="${normalizeWidthMode(config.editorWidthMode)}" data-editor-max-width="${normalizeMaxWidth(config.editorMaxWidth)}" data-editor-alignment="${normalizeAlignment(config.editorAlignment)}" data-editor-width-indicators="${config.editorWidthIndicators !== false}" data-math-source-wrap="${config.mathSourceWrap === true}" data-math-source-position="${config.mathSourcePosition === 'below' ? 'below' : 'above'}" data-code-language-order="${config.codeLanguageOrder === 'a-z' || config.codeLanguageOrder === 'z-a' ? config.codeLanguageOrder : 'default'}" data-toolbar-mode="${config.toolbarMode}" data-table-toolbar-position="${normalize(config.tableToolbarPosition)}" data-table-source-format="${normalizeTableFormat(config.tableSourceFormat)}">
+<html lang="en" data-theme="${config.theme}" data-code-block-action-labels="${config.codeBlockActionLabels !== false}" data-editor-width-mode="${normalizeWidthMode(config.editorWidthMode)}" data-editor-max-width="${normalizeMaxWidth(config.editorMaxWidth)}" data-editor-alignment="${normalizeAlignment(config.editorAlignment)}" data-editor-width-indicators="${config.editorWidthIndicators !== false}" data-math-source-wrap="${config.mathSourceWrap === true}" data-math-source-position="${config.mathSourcePosition === 'below' ? 'below' : 'above'}" data-code-language-order="${config.codeLanguageOrder === 'a-z' || config.codeLanguageOrder === 'z-a' ? config.codeLanguageOrder : 'default'}" data-toolbar-mode="${config.toolbarMode}" data-toolbar-toggle-icon="${config.toolbarToggleIcon === 'chevrons' ? 'chevrons' : 'logo'}" data-toolbar-toggle-on-hover="${config.toolbarToggleOnHover === true}" data-table-toolbar-position="${normalize(config.tableToolbarPosition)}" data-table-source-format="${normalizeTableFormat(config.tableSourceFormat)}">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -109,7 +111,7 @@ export function generateEditorHtml(
     </style>
 </head>
 <body>
-    ${generateEditorBodyHtml(config.webviewMessages, process.platform)}
+    ${generateEditorBodyHtml(config.webviewMessages, process.platform, { toolbarLogoUri: 'data:image/png;base64,' + fs.readFileSync(getResourcePath('media/icon.png')).toString('base64') })}
 
     <script src="${vendorFileUri('markdown-blocks.js')}"></script>
     <script src="${vendorFileUri('turndown.js')}"></script>

electron/src/main.ts

@@ -113,6 +113,8 @@ function createWindow(filePath?: string): BrowserWindow {
             codeLanguageOrder: settings.codeLanguageOrder,
             codeBlockActionLabels: settings.codeBlockActionLabels,
             toolbarMode: settings.toolbarMode,
+            toolbarToggleIcon: settings.toolbarToggleIcon,
+            toolbarToggleOnHover: settings.toolbarToggleOnHover,
             tableToolbarPosition: settings.tableToolbarPosition,
             tableSourceFormat: settings.tableSourceFormat,
             documentBaseUri: `file://${docDir}/`,
@@ -416,6 +418,21 @@ ipcMain.on('settings-save', async (event, key: string, value: unknown) => {
         }
         return;
     }
+    if (key === 'toolbarToggleIcon' || key === 'toolbarToggleOnHover') {
+        if (key === 'toolbarToggleIcon' ? value !== 'logo' && value !== 'chevrons' : typeof value !== 'boolean') return;
+        try {
+            if (key === 'toolbarToggleIcon') settingsManager.set(key, value as 'logo' | 'chevrons');
+            else settingsManager.set(key, value as boolean);
+        } catch {
+            settingsManager.refreshSetting(key, getI18nMessages().toolbarToggleSaveFailed);
+            return;
+        }
+        settingsManager.refreshSetting(key);
+        for (const [win] of windows) {
+            if (!win.isDestroyed()) win.webContents.send('host-message', { type: key, value });
+        }
+        return;
+    }
     if (key === 'toolbarMode') {
         if (value !== 'full' && value !== 'simple') return;
         try {

electron/src/settings-manager.ts

@@ -21,6 +21,8 @@ export interface ElectronSettings {
     codeLanguageOrder: 'default' | 'a-z' | 'z-a';
     codeBlockActionLabels: boolean;
     toolbarMode: string;
+    toolbarToggleIcon: 'logo' | 'chevrons';
+    toolbarToggleOnHover: boolean;
     tableToolbarPosition: string;
     tableSourceFormat: 'aligned' | 'compact';
     language: string;
@@ -43,6 +45,8 @@ const DEFAULTS: ElectronSettings = {
     codeLanguageOrder: 'default',
     codeBlockActionLabels: true,
     toolbarMode: 'full',
+    toolbarToggleIcon: 'logo',
+    toolbarToggleOnHover: false,
     tableToolbarPosition: 'auto',
     tableSourceFormat: 'aligned',
     language: 'default',
@@ -229,6 +233,18 @@ export class SettingsManager {
                         <option value="full" ${settings.toolbarMode === 'full' ? 'selected' : ''}>Full</option>
                     </select>
                 </div>
+                <div class="field">
+                    <label for="toolbarToggleIcon">${messages.toolbarToggleIconLabel}</label>
+                    <select id="toolbarToggleIcon" onchange="save('toolbarToggleIcon', this.value)">
+                        <option value="logo" ${settings.toolbarToggleIcon === 'logo' ? 'selected' : ''}>${messages.toolbarToggleLogo}</option>
+                        <option value="chevrons" ${settings.toolbarToggleIcon === 'chevrons' ? 'selected' : ''}>${messages.toolbarToggleChevrons}</option>
+                    </select>
+                </div>
+                <div class="field">
+                    <label for="toolbarToggleOnHover">${messages.toolbarToggleOnHoverLabel}</label>
+                    <input type="checkbox" id="toolbarToggleOnHover" ${settings.toolbarToggleOnHover ? 'checked' : ''} aria-describedby="toolbarToggleOnHoverHelp" onchange="save('toolbarToggleOnHover', this.checked)">
+                </div>
+                <p class="field-desc" id="toolbarToggleOnHoverHelp">${messages.toolbarToggleOnHoverHelp}</p>
                 <div class="field">
                     <label for="editorWidthMode">${messages.editorWidthLabel || 'Editor width'}</label>
                     <select id="editorWidthMode" onchange="save('editorWidthMode', this.value)">

package.json

@@ -188,6 +188,26 @@
             "description": "%config.toolbarMode.description%",
             "order": 40
           },
+          "binary-markdown.toolbarToggleIcon": {
+            "type": "string",
+            "enum": [
+              "logo",
+              "chevrons"
+            ],
+            "default": "logo",
+            "description": "%config.toolbarToggleIcon.description%",
+            "enumDescriptions": [
+              "%config.toolbarToggleIcon.logo%",
+              "%config.toolbarToggleIcon.chevrons%"
+            ],
+            "order": 42
+          },
+          "binary-markdown.toolbarToggleOnHover": {
+            "type": "boolean",
+            "default": false,
+            "description": "%config.toolbarToggleOnHover.description%",
+            "order": 44
+          },
           "binary-markdown.editorWidthMode": {
             "type": "string",
             "enum": [

package.nls.es.json

@@ -83,5 +83,9 @@
   "config.section.writing": "Herramientas de escritura",
   "config.section.images": "Imágenes",
   "config.section.export": "Exportación",
-  "config.section.advanced": "Avanzado"
+  "config.section.advanced": "Avanzado",
+  "config.toolbarToggleIcon.description": "Icono para ocultar o mostrar la barra superior.",
+  "config.toolbarToggleIcon.logo": "Usar el logotipo 01md.",
+  "config.toolbarToggleIcon.chevrons": "Usar flechas dobles hacia arriba para ocultar la barra y hacia abajo para mostrarla.",
+  "config.toolbarToggleOnHover.description": "Cuando la barra superior esté oculta, el botón aparecerá al pasar el puntero cerca de la esquina superior izquierda o al recibir el foco del teclado. En dispositivos táctiles siempre se muestra."
 }

package.nls.fr.json

@@ -83,5 +83,9 @@
   "config.section.writing": "Outils de rédaction",
   "config.section.images": "Images",
   "config.section.export": "Exportation",
-  "config.section.advanced": "Avancé"
+  "config.section.advanced": "Avancé",
+  "config.toolbarToggleIcon.description": "Icône utilisée pour masquer ou afficher la barre supérieure.",
+  "config.toolbarToggleIcon.logo": "Utiliser le logo 01md.",
+  "config.toolbarToggleIcon.chevrons": "Utiliser des doubles chevrons vers le haut pour masquer la barre et vers le bas pour l’afficher.",
+  "config.toolbarToggleOnHover.description": "Lorsque la barre supérieure est masquée, son bouton apparaît au survol près du coin supérieur gauche ou lorsqu’il reçoit le focus clavier. Il reste visible sur les appareils tactiles."
 }

package.nls.ja.json

@@ -83,5 +83,9 @@
   "config.section.writing": "編集ツール",
   "config.section.images": "画像",
   "config.section.export": "エクスポート",
-  "config.section.advanced": "詳細設定"
+  "config.section.advanced": "詳細設定",
+  "config.toolbarToggleIcon.description": "トップバーの表示・非表示を切り替えるアイコン。",
+  "config.toolbarToggleIcon.logo": "01md ロゴを使用します。",
+  "config.toolbarToggleIcon.chevrons": "非表示には上向き、表示には下向きの二重山形矢印を使用します。",
+  "config.toolbarToggleOnHover.description": "トップバーを隠したとき、左上付近にポインターを合わせるかキーボードでフォーカスするとボタンを表示します。タッチ端末では常に表示します。"
 }

package.nls.json

@@ -83,5 +83,9 @@
   "config.section.writing": "Writing Tools",
   "config.section.images": "Images",
   "config.section.export": "Export",
-  "config.section.advanced": "Advanced"
+  "config.section.advanced": "Advanced",
+  "config.toolbarToggleIcon.description": "Icon used to hide or show the top bar.",
+  "config.toolbarToggleIcon.logo": "Use the 01md logo.",
+  "config.toolbarToggleIcon.chevrons": "Use double upward chevrons to hide the bar and downward chevrons to show it.",
+  "config.toolbarToggleOnHover.description": "When the top bar is hidden, reveal its button near the upper-left corner on hover or keyboard focus. Touch devices always show the button."
 }

package.nls.ko.json

@@ -83,5 +83,9 @@
   "config.section.writing": "작성 도구",
   "config.section.images": "이미지",
   "config.section.export": "내보내기",
-  "config.section.advanced": "고급"
+  "config.section.advanced": "고급",
+  "config.toolbarToggleIcon.description": "상단 바를 숨기거나 표시하는 데 사용할 아이콘입니다.",
+  "config.toolbarToggleIcon.logo": "01md 로고를 사용합니다.",
+  "config.toolbarToggleIcon.chevrons": "숨기려면 위쪽 이중 화살표를, 표시하려면 아래쪽 이중 화살표를 사용합니다.",
+  "config.toolbarToggleOnHover.description": "상단 바를 숨겼을 때 왼쪽 위 모서리 근처에 마우스를 올리거나 키보드로 초점을 맞추면 버튼이 표시됩니다. 터치 기기에서는 항상 표시됩니다."
 }