From f7a4dc33d620ab281abdbe2a775564044f750734 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 00:13:46 +0530
Subject: [PATCH 01/17] feat(toolbar): consolidate document actions

---
 desktop-app/resources/index.html           | 103 ++++++-----
 desktop-app/resources/styles.css           | 195 +++++++--------------
 index.html                                 | 103 ++++++-----
 styles.css                                 | 195 +++++++--------------
 tests/e2e/status-toolbar-followup.spec.js  |  41 +++--
 tests/e2e/tab-split-sidebar-update.spec.js |  69 +++-----
 tests/e2e/ui-toolbar-redesign.spec.js      |  73 +++-----
 7 files changed, 313 insertions(+), 466 deletions(-)

diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index ef73df36..2f753352 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -53,11 +53,18 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     </a>
                 </div>
 
-                <!-- Right section: Toolbar -->
-                <div class="toolbar d-none d-md-flex header-right">
-                    <div class="dropdown header-new-dropdown">
-                        <button class="tool-button header-command-btn dropdown-toggle" type="button" id="importDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Create or import a document" aria-label="Open new document menu">
-                            <i class="lucide lucide-plus" aria-hidden="true"></i><span class="btn-text">New</span>
+                <!-- Right section: Document and application toolbar -->
+                <div class="toolbar d-none d-md-flex header-right" role="toolbar" aria-label="Document and application actions">
+                    <div class="view-toolbar markdown-view-toolbar header-view-toolbar" role="group" aria-label="View mode">
+                        <button class="tool-button view-toggle-btn" data-view-mode="editor" aria-pressed="false" title="Edit (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Edit Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-square-pen" aria-hidden="true"></i></button>
+                        <button class="tool-button view-toggle-btn is-active" data-view-mode="split" aria-pressed="true" title="Split" aria-label="Split editor and preview"><i class="lucide lucide-columns-2" aria-hidden="true"></i></button>
+                        <button class="tool-button view-toggle-btn" data-view-mode="preview" aria-pressed="false" title="Preview (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Preview Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-eye" aria-hidden="true"></i></button>
+                    </div>
+                    <span class="header-toolbar-divider" aria-hidden="true"></span>
+
+                    <div class="dropdown header-new-dropdown header-icon-dropdown">
+                        <button class="tool-button header-icon-command dropdown-toggle" type="button" id="importDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Create or import a document" aria-label="Open new document menu">
+                            <i class="lucide lucide-file-plus-2" aria-hidden="true"></i>
                         </button>
                         <ul class="dropdown-menu app-command-menu header-command-menu header-new-menu" aria-labelledby="importDropdown">
                             <li><a class="dropdown-item app-menu-item" href="#" id="header-new-document"><i class="lucide lucide-file-plus-2" aria-hidden="true"></i><span class="app-menu-label">New document</span></a></li>
@@ -65,27 +72,40 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                             <li><a class="dropdown-item app-menu-item" href="#" id="import-from-github"><i class="bi bi-github" aria-hidden="true"></i><span class="app-menu-label">From GitHub</span></a></li>
                         </ul>
                     </div>
-                    <div class="dropdown header-export-dropdown">
-                        <button class="tool-button header-command-btn dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Export document" aria-label="Open export menu">
-                            <i class="lucide lucide-download" aria-hidden="true"></i><span class="btn-text">Export</span>
+                    <input type="file" id="file-input" class="file-input" accept=".md,.markdown,text/markdown" multiple>
+
+                    <button id="copy-markdown-button" class="tool-button header-icon-command" type="button" title="Copy Markdown (Ctrl/Cmd+Shift+C)" aria-label="Copy Markdown" aria-keyshortcuts="Control+Shift+C Meta+Shift+C">
+                        <i class="lucide lucide-copy" aria-hidden="true"></i>
+                    </button>
+                    <button id="toggle-sync" class="tool-button header-icon-command sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
+                        <i class="lucide lucide-refresh-cw" aria-hidden="true"></i>
+                    </button>
+                    <button id="review-toggle" class="tool-button header-icon-command" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
+                        <i class="lucide lucide-message-square-text" aria-hidden="true"></i><span id="review-toolbar-count" class="review-toolbar-count" aria-hidden="true" hidden>0</span>
+                    </button>
+
+                    <span class="header-toolbar-divider" aria-hidden="true"></span>
+
+                    <button id="share-button" class="tool-button header-icon-command" type="button" title="Share Snapshot" aria-label="Share snapshot">
+                        <i class="lucide lucide-share-2" aria-hidden="true"></i>
+                    </button>
+                    <button id="live-share-button" class="tool-button header-icon-command" type="button" title="Live Share" aria-label="Live Share">
+                        <i class="lucide lucide-radio" data-lucide="radio" aria-hidden="true"></i>
+                    </button>
+                    <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
+                    <div class="dropdown header-export-dropdown header-icon-dropdown">
+                        <button class="tool-button header-icon-command dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Export document" aria-label="Open export menu">
+                            <i class="lucide lucide-download" aria-hidden="true"></i>
                         </button>
-                        <ul class="dropdown-menu app-command-menu header-command-menu header-export-menu" aria-labelledby="exportDropdown">
+                        <ul class="dropdown-menu dropdown-menu-end app-command-menu header-command-menu header-export-menu" aria-labelledby="exportDropdown">
                             <li><a class="dropdown-item app-menu-item" href="#" id="export-md"><i class="lucide lucide-file-text" aria-hidden="true"></i><span class="app-menu-label">Markdown (.md)</span></a></li>
                             <li><a class="dropdown-item app-menu-item" href="#" id="export-html"><i class="lucide lucide-file-code-2" aria-hidden="true"></i><span class="app-menu-label">HTML</span></a></li>
                             <li><a class="dropdown-item app-menu-item" href="#" id="export-pdf"><i class="lucide lucide-file-text" aria-hidden="true"></i><span class="app-menu-label">PDF</span></a></li>
                             <li><a class="dropdown-item app-menu-item" href="#" id="export-png"><i class="lucide lucide-file-image" aria-hidden="true"></i><span class="app-menu-label">Image (.png)</span></a></li>
                         </ul>
                     </div>
-                    <input type="file" id="file-input" class="file-input" accept=".md,.markdown,text/markdown" multiple>
-
-                    <button id="share-button" class="tool-button header-command-btn" title="Share Snapshot" aria-label="Share snapshot">
-                        <i class="lucide lucide-share-2" aria-hidden="true"></i><span class="btn-text">Share</span>
-                    </button>
 
-                    <button id="live-share-button" class="tool-button header-command-btn" title="Live Share">
-                        <i class="lucide lucide-radio" data-lucide="radio" aria-hidden="true"></i><span class="btn-text">Live Share</span>
-                    </button>
-                    <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
+                    <span class="header-toolbar-divider" aria-hidden="true"></span>
 
                     <a class="header-icon-command report-command" href="https://github.com/ThisIs-Developer/Markdown-Viewer/issues/new" target="_blank" rel="noopener noreferrer" title="Report an issue" aria-label="Report an issue">
                         <i class="lucide lucide-bug" aria-hidden="true"></i>
@@ -429,44 +449,21 @@ <h2 id="document-sidebar-title">Explorer</h2>
             <button type="button" class="markdown-tool-btn" data-md-action="link" title="Link (Ctrl/Cmd+K)" aria-label="Link" aria-keyshortcuts="Control+K Meta+K"><i class="lucide lucide-link-2"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="image" title="Image, GIF, or video" aria-label="Insert image, GIF, or video"><i class="lucide lucide-image" aria-hidden="true"></i></button>
           </div>
-          <div class="markdown-toolbar-group" role="group" aria-label="Advanced insertion">
+          <div class="markdown-toolbar-group markdown-toolbar-group--advanced" role="group" aria-label="Advanced insertion">
             <button type="button" class="markdown-tool-btn" data-md-action="diagram" title="Diagram and more" aria-label="Diagram and more"><i class="lucide lucide-workflow" aria-hidden="true"></i></button>
-            <div class="markdown-tool-dropdown">
-              <button type="button" class="markdown-tool-btn markdown-tool-select markdown-tool-select--insert" data-toolbar-menu-toggle="insert" aria-haspopup="menu" aria-expanded="false" title="More tools" aria-label="More tools"><i class="lucide lucide-ellipsis" aria-hidden="true"></i></button>
-              <div class="markdown-tool-menu markdown-tool-menu--wide" data-toolbar-menu="insert" role="menu" aria-label="More tools">
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="reference"><i class="lucide lucide-bookmark" aria-hidden="true"></i><span>Reference</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="code-block" title="Ctrl+Shift+K / Cmd+Option+C" aria-keyshortcuts="Control+Shift+K Meta+Alt+C"><i class="lucide lucide-square-code" aria-hidden="true"></i><span>Code block</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="terminal-block"><i class="lucide lucide-square-terminal" aria-hidden="true"></i><span>Terminal block</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="horizontal-rule"><i class="lucide lucide-minus" aria-hidden="true"></i><span>Horizontal rule</span></button>
-                <div class="markdown-tool-menu-separator" role="separator"></div>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="date-time"><i class="lucide lucide-clock-3" aria-hidden="true"></i><span>Date and time</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="emoji"><i class="lucide lucide-smile" aria-hidden="true"></i><span>Emoji shortcode</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="symbols"><i class="lucide lucide-braces" aria-hidden="true"></i><span>Symbols &amp; entities</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="alert"><i class="lucide lucide-badge-alert" aria-hidden="true"></i><span>Markdown alert</span></button>
-              </div>
-            </div>
+            <button type="button" class="markdown-tool-btn" data-md-action="reference" title="Reference" aria-label="Insert reference"><i class="lucide lucide-bookmark" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="code-block" title="Code block (Ctrl+Shift+K / Cmd+Option+C)" aria-label="Insert code block" aria-keyshortcuts="Control+Shift+K Meta+Alt+C"><i class="lucide lucide-square-code" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="terminal-block" title="Terminal block" aria-label="Insert terminal block"><i class="lucide lucide-square-terminal" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="horizontal-rule" title="Horizontal rule" aria-label="Insert horizontal rule"><i class="lucide lucide-minus" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="date-time" title="Date and time" aria-label="Insert date and time"><i class="lucide lucide-clock-3" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="emoji" title="Emoji shortcode" aria-label="Insert emoji shortcode"><i class="lucide lucide-smile" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="symbols" title="Symbols and entities" aria-label="Insert symbols and entities"><i class="lucide lucide-braces" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="alert" title="Markdown alert" aria-label="Insert Markdown alert"><i class="lucide lucide-badge-alert" aria-hidden="true"></i></button>
           </div>
           <div class="markdown-toolbar-group workspace-format-actions" role="group" aria-label="Workspace actions">
             <button type="button" class="markdown-tool-btn" data-md-action="find" title="Find and replace (Ctrl/Cmd+F)" aria-label="Find and replace" aria-keyshortcuts="Control+F Meta+F"><i class="lucide lucide-search" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="fullscreen" title="Fullscreen (F11 / Cmd+Option+F)" aria-label="Enter fullscreen" aria-keyshortcuts="F11 Meta+Alt+F"><i class="lucide lucide-maximize" aria-hidden="true"></i></button>
           </div>
-          <div class="markdown-toolbar-group markdown-toolbar-group--document markdown-toolbar-group--utilities" role="group" aria-label="Document utilities and view mode">
-            <button id="toggle-sync" class="tool-button document-command-btn sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
-              <i class="lucide lucide-refresh-cw" aria-hidden="true"></i><span class="btn-text">Sync Off</span>
-            </button>
-            <button id="copy-markdown-button" class="tool-button document-command-btn" type="button" title="Copy Markdown (Ctrl/Cmd+Shift+C)" aria-label="Copy Markdown" aria-keyshortcuts="Control+Shift+C Meta+Shift+C">
-              <i class="lucide lucide-copy" aria-hidden="true"></i><span class="btn-text">Copy Markdown</span>
-            </button>
-            <button id="review-toggle" class="tool-button document-command-btn" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
-              <i class="lucide lucide-message-square-text" aria-hidden="true"></i><span id="review-toolbar-count" class="review-toolbar-count" aria-hidden="true" hidden>0</span>
-            </button>
-            <span class="document-command-divider" aria-hidden="true"></span>
-            <div class="view-toolbar markdown-view-toolbar" role="group" aria-label="View mode">
-              <button class="tool-button view-toggle-btn" data-view-mode="editor" aria-pressed="false" title="Edit (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Edit Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-square-pen" aria-hidden="true"></i></button>
-              <button class="tool-button view-toggle-btn is-active" data-view-mode="split" aria-pressed="true" title="Split" aria-label="Split editor and preview"><i class="lucide lucide-columns-2" aria-hidden="true"></i></button>
-              <button class="tool-button view-toggle-btn" data-view-mode="preview" aria-pressed="false" title="Preview (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Preview Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-eye" aria-hidden="true"></i></button>
-            </div>
-          </div>
         </div>
 
         <!-- Reset Confirmation Modal -->
@@ -791,8 +788,8 @@ <h3 class="modal-section-title">Application shortcuts</h3>
                   <li>Use the view buttons in the toolbar to switch between Editor, Split, and Preview modes.</li>
                   <li>Sync scrolling is available in Split view to keep the editor and preview aligned.</li>
                   <li>Review opens a read-only preview where you can comment on or suggest changes to headings, paragraphs, code blocks, and diagrams.</li>
-                  <li>New, Share, Live Share, Report an Issue, About, and Settings are available in the header toolbar.</li>
-                  <li>Sync, Copy, Review, view modes, and Export stay with the document formatting toolbar.</li>
+                  <li>View modes, New, Copy, Sync, Review, Share, Live Share, and Export are grouped in the header toolbar.</li>
+                  <li>Report an Issue, About, and Settings follow the document actions in the header.</li>
                 </ul>
               </div>
               <div class="modal-section">
@@ -800,7 +797,7 @@ <h3 class="modal-section-title">Toolbar descriptions</h3>
                 <ul class="modal-list">
                   <li>Undo and Redo keep editing history close at hand.</li>
                   <li>Use the Heading and Case menus for H1&ndash;H6 headings and capitalization.</li>
-                  <li>Quick formatting covers emphasis, quotes, alignment, and lists; Insert holds less frequent tools while Diagram &amp; More stays directly available.</li>
+                  <li>Quick formatting covers emphasis, quotes, alignment, and lists; advanced insertion tools are directly available in the formatting toolbar.</li>
                   <li>Find &amp; Replace and Fullscreen are direct toolbar actions; About Markdown Viewer opens project, Markdown, privacy, license, and support information.</li>
                 </ul>
               </div>
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index fd95dc38..1abefbe9 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -2218,10 +2218,6 @@ body.document-sidebar-collapsed .document-sidebar {
   gap: 5px;
 }
 
-.header-right .header-command-btn .btn-text {
-  display: inline;
-}
-
 .header-command-btn {
   width: auto;
   padding-inline: 10px;
@@ -2235,6 +2231,19 @@ body.document-sidebar-collapsed .document-sidebar {
   display: inline-flex;
 }
 
+.header-icon-dropdown .dropdown-toggle::after {
+  display: none;
+}
+
+.header-toolbar-divider {
+  width: 1px;
+  height: 20px;
+  flex: 0 0 1px;
+  margin-inline: 2px;
+  background: var(--border-color);
+  opacity: 0.72;
+}
+
 .app-command-menu.header-new-menu,
 .app-command-menu.header-export-menu {
   width: max-content;
@@ -2283,6 +2292,59 @@ body.document-sidebar-collapsed .document-sidebar {
   line-height: 1;
 }
 
+.header-icon-command.is-active,
+.header-icon-command.is-active:hover,
+.header-icon-command.is-live-active,
+.header-icon-command.is-live-active:hover,
+.header-icon-command.sync-active,
+.header-icon-command.sync-active:hover {
+  border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  color: var(--accent-color);
+}
+
+.header-icon-command#review-toggle:has(.review-toolbar-count:not([hidden])) {
+  width: auto;
+  padding-inline: 6px;
+}
+
+.header-view-toolbar {
+  flex: 0 0 auto;
+}
+
+.header-view-toolbar .view-toggle-btn {
+  width: 27px;
+  min-width: 27px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-secondary);
+  box-shadow: none;
+}
+
+.header-view-toolbar .view-toggle-btn:hover,
+.header-view-toolbar .view-toggle-btn:focus-visible {
+  border: 0;
+  background: var(--toolbar-control-hover);
+  color: var(--text-color);
+}
+
+.header-view-toolbar .view-toggle-btn.is-active,
+.header-view-toolbar .view-toggle-btn.is-active:hover {
+  border: 0;
+  background: var(--segmented-surface);
+  color: var(--accent-color);
+  box-shadow: var(--segmented-shadow);
+}
+
+.header-view-toolbar .view-toggle-btn:disabled,
+.header-view-toolbar .view-toggle-btn[aria-disabled="true"] {
+  background: transparent;
+  box-shadow: none;
+}
+
 .settings-dropdown {
   display: inline-flex;
 }
@@ -2800,46 +2862,10 @@ body.document-sidebar-collapsed .document-sidebar {
   flex-shrink: 0;
 }
 
-.markdown-toolbar-group--utilities {
-  position: sticky;
-  z-index: 6;
-  inset-inline-end: 0;
-  margin-inline-start: auto;
-  border-right: 0;
-  background: var(--toolbar-surface);
-}
-
-.markdown-toolbar-group--document {
-  gap: 2px;
-  padding-inline-start: 6px;
-}
-
 .workspace-format-actions {
   padding-inline: 5px;
 }
 
-.markdown-toolbar-group--document .tool-button {
-  flex: 0 0 auto;
-  width: 30px;
-  height: 30px;
-  min-width: 30px;
-  padding: 0;
-  border-color: transparent;
-  border-radius: 7px;
-  background: transparent;
-}
-
-.markdown-toolbar-group--document .tool-button:hover,
-.markdown-toolbar-group--document .tool-button:focus-visible {
-  border-color: transparent;
-  background: var(--toolbar-control-hover);
-}
-
-.markdown-toolbar-group--document #review-toggle:has(.review-toolbar-count:not([hidden])) {
-  width: auto;
-  padding-inline: 5px;
-}
-
 .document-actions-menu {
   width: 280px;
   min-width: 280px;
@@ -2860,14 +2886,6 @@ body.document-sidebar-collapsed .document-sidebar {
   z-index: var(--layer-menu);
 }
 
-.document-command-divider {
-  width: 1px;
-  height: 18px;
-  margin-inline: 4px;
-  background: var(--border-color);
-  opacity: 0.75;
-}
-
 .markdown-view-toolbar {
   display: inline-flex;
   align-items: center;
@@ -2879,44 +2897,6 @@ body.document-sidebar-collapsed .document-sidebar {
   background: var(--segmented-bg);
 }
 
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn {
-  width: 27px;
-  height: 26px;
-  min-width: 27px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-secondary);
-  box-shadow: none;
-}
-
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn:hover,
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn:focus-visible {
-  border: 0;
-  background: var(--toolbar-control-hover);
-  color: var(--text-color);
-}
-
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn.is-active,
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn.is-active:hover {
-  border: 0;
-  background: var(--segmented-surface);
-  color: var(--accent-color);
-  box-shadow: var(--segmented-shadow);
-}
-
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn:disabled,
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn[aria-disabled="true"] {
-  background: transparent;
-  box-shadow: none;
-}
-
-.markdown-toolbar-group--utilities .tool-button {
-  flex: 0 0 auto;
-  height: 30px;
-  min-width: 30px;
-}
-
 .markdown-toolbar-group:first-child {
   padding-left: 0;
 }
@@ -3017,17 +2997,6 @@ body.document-sidebar-collapsed .document-sidebar {
   gap: 5px;
 }
 
-.markdown-tool-select--insert {
-  width: 30px;
-  min-width: 30px;
-  gap: 0;
-  padding: 0;
-}
-
-.markdown-tool-select--insert .lucide-ellipsis {
-  font-size: var(--ui-icon-size-lg);
-}
-
 .markdown-tool-select-label {
   overflow: hidden;
   max-width: 48px;
@@ -3680,12 +3649,6 @@ a:focus {
     min-width: 44px;
   }
 
-  .markdown-tool-select--insert {
-    width: 30px !important;
-    min-width: 30px;
-    padding-inline: 0 !important;
-  }
-
   .markdown-format-toolbar {
     height: 40px !important;
   }
@@ -3699,23 +3662,6 @@ a:focus {
     height: 40px !important;
   }
 
-  .markdown-toolbar-group--document .tool-button {
-    width: 30px;
-    height: 30px;
-    min-width: 30px;
-    padding: 0;
-  }
-
-  .markdown-view-toolbar {
-    height: 32px;
-  }
-
-  .markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn {
-    width: 27px;
-    height: 26px;
-    min-width: 27px;
-  }
-
   .document-action-item {
     min-height: 44px;
   }
@@ -4061,15 +4007,6 @@ a:focus {
     scroll-padding-inline: 6px;
   }
 
-  .markdown-toolbar-group--utilities {
-    position: static;
-    margin-inline-start: 0;
-  }
-
-  .markdown-tool-select--insert {
-    min-width: 30px;
-  }
-
   .markdown-tool-menu-item,
   .tab-menu-item,
   .header-command-menu .app-menu-item {
diff --git a/index.html b/index.html
index b57ca427..12513f01 100644
--- a/index.html
+++ b/index.html
@@ -146,11 +146,18 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     </a>
                 </div>
 
-                <!-- Right section: Toolbar -->
-                <div class="toolbar d-none d-md-flex header-right">
-                    <div class="dropdown header-new-dropdown">
-                        <button class="tool-button header-command-btn dropdown-toggle" type="button" id="importDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Create or import a document" aria-label="Open new document menu">
-                            <i class="lucide lucide-plus" aria-hidden="true"></i><span class="btn-text">New</span>
+                <!-- Right section: Document and application toolbar -->
+                <div class="toolbar d-none d-md-flex header-right" role="toolbar" aria-label="Document and application actions">
+                    <div class="view-toolbar markdown-view-toolbar header-view-toolbar" role="group" aria-label="View mode">
+                        <button class="tool-button view-toggle-btn" data-view-mode="editor" aria-pressed="false" title="Edit (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Edit Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-square-pen" aria-hidden="true"></i></button>
+                        <button class="tool-button view-toggle-btn is-active" data-view-mode="split" aria-pressed="true" title="Split" aria-label="Split editor and preview"><i class="lucide lucide-columns-2" aria-hidden="true"></i></button>
+                        <button class="tool-button view-toggle-btn" data-view-mode="preview" aria-pressed="false" title="Preview (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Preview Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-eye" aria-hidden="true"></i></button>
+                    </div>
+                    <span class="header-toolbar-divider" aria-hidden="true"></span>
+
+                    <div class="dropdown header-new-dropdown header-icon-dropdown">
+                        <button class="tool-button header-icon-command dropdown-toggle" type="button" id="importDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Create or import a document" aria-label="Open new document menu">
+                            <i class="lucide lucide-file-plus-2" aria-hidden="true"></i>
                         </button>
                         <ul class="dropdown-menu app-command-menu header-command-menu header-new-menu" aria-labelledby="importDropdown">
                             <li><a class="dropdown-item app-menu-item" href="#" id="header-new-document"><i class="lucide lucide-file-plus-2" aria-hidden="true"></i><span class="app-menu-label">New document</span></a></li>
@@ -158,27 +165,40 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                             <li><a class="dropdown-item app-menu-item" href="#" id="import-from-github"><i class="bi bi-github" aria-hidden="true"></i><span class="app-menu-label">From GitHub</span></a></li>
                         </ul>
                     </div>
-                    <div class="dropdown header-export-dropdown">
-                        <button class="tool-button header-command-btn dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Export document" aria-label="Open export menu">
-                            <i class="lucide lucide-download" aria-hidden="true"></i><span class="btn-text">Export</span>
+                    <input type="file" id="file-input" class="file-input" accept=".md,.markdown,text/markdown" multiple>
+
+                    <button id="copy-markdown-button" class="tool-button header-icon-command" type="button" title="Copy Markdown (Ctrl/Cmd+Shift+C)" aria-label="Copy Markdown" aria-keyshortcuts="Control+Shift+C Meta+Shift+C">
+                        <i class="lucide lucide-copy" aria-hidden="true"></i>
+                    </button>
+                    <button id="toggle-sync" class="tool-button header-icon-command sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
+                        <i class="lucide lucide-refresh-cw" aria-hidden="true"></i>
+                    </button>
+                    <button id="review-toggle" class="tool-button header-icon-command" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
+                        <i class="lucide lucide-message-square-text" aria-hidden="true"></i><span id="review-toolbar-count" class="review-toolbar-count" aria-hidden="true" hidden>0</span>
+                    </button>
+
+                    <span class="header-toolbar-divider" aria-hidden="true"></span>
+
+                    <button id="share-button" class="tool-button header-icon-command" type="button" title="Share Snapshot" aria-label="Share snapshot">
+                        <i class="lucide lucide-share-2" aria-hidden="true"></i>
+                    </button>
+                    <button id="live-share-button" class="tool-button header-icon-command" type="button" title="Live Share" aria-label="Live Share">
+                        <i class="lucide lucide-radio" data-lucide="radio" aria-hidden="true"></i>
+                    </button>
+                    <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
+                    <div class="dropdown header-export-dropdown header-icon-dropdown">
+                        <button class="tool-button header-icon-command dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Export document" aria-label="Open export menu">
+                            <i class="lucide lucide-download" aria-hidden="true"></i>
                         </button>
-                        <ul class="dropdown-menu app-command-menu header-command-menu header-export-menu" aria-labelledby="exportDropdown">
+                        <ul class="dropdown-menu dropdown-menu-end app-command-menu header-command-menu header-export-menu" aria-labelledby="exportDropdown">
                             <li><a class="dropdown-item app-menu-item" href="#" id="export-md"><i class="lucide lucide-file-text" aria-hidden="true"></i><span class="app-menu-label">Markdown (.md)</span></a></li>
                             <li><a class="dropdown-item app-menu-item" href="#" id="export-html"><i class="lucide lucide-file-code-2" aria-hidden="true"></i><span class="app-menu-label">HTML</span></a></li>
                             <li><a class="dropdown-item app-menu-item" href="#" id="export-pdf"><i class="lucide lucide-file-text" aria-hidden="true"></i><span class="app-menu-label">PDF</span></a></li>
                             <li><a class="dropdown-item app-menu-item" href="#" id="export-png"><i class="lucide lucide-file-image" aria-hidden="true"></i><span class="app-menu-label">Image (.png)</span></a></li>
                         </ul>
                     </div>
-                    <input type="file" id="file-input" class="file-input" accept=".md,.markdown,text/markdown" multiple>
-
-                    <button id="share-button" class="tool-button header-command-btn" title="Share Snapshot" aria-label="Share snapshot">
-                        <i class="lucide lucide-share-2" aria-hidden="true"></i><span class="btn-text">Share</span>
-                    </button>
 
-                    <button id="live-share-button" class="tool-button header-command-btn" title="Live Share">
-                        <i class="lucide lucide-radio" data-lucide="radio" aria-hidden="true"></i><span class="btn-text">Live Share</span>
-                    </button>
-                    <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
+                    <span class="header-toolbar-divider" aria-hidden="true"></span>
 
                     <a class="header-icon-command report-command" href="https://github.com/ThisIs-Developer/Markdown-Viewer/issues/new" target="_blank" rel="noopener noreferrer" title="Report an issue" aria-label="Report an issue">
                         <i class="lucide lucide-bug" aria-hidden="true"></i>
@@ -522,44 +542,21 @@ <h2 id="document-sidebar-title">Explorer</h2>
             <button type="button" class="markdown-tool-btn" data-md-action="link" title="Link (Ctrl/Cmd+K)" aria-label="Link" aria-keyshortcuts="Control+K Meta+K"><i class="lucide lucide-link-2"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="image" title="Image, GIF, or video" aria-label="Insert image, GIF, or video"><i class="lucide lucide-image" aria-hidden="true"></i></button>
           </div>
-          <div class="markdown-toolbar-group" role="group" aria-label="Advanced insertion">
+          <div class="markdown-toolbar-group markdown-toolbar-group--advanced" role="group" aria-label="Advanced insertion">
             <button type="button" class="markdown-tool-btn" data-md-action="diagram" title="Diagram and more" aria-label="Diagram and more"><i class="lucide lucide-workflow" aria-hidden="true"></i></button>
-            <div class="markdown-tool-dropdown">
-              <button type="button" class="markdown-tool-btn markdown-tool-select markdown-tool-select--insert" data-toolbar-menu-toggle="insert" aria-haspopup="menu" aria-expanded="false" title="More tools" aria-label="More tools"><i class="lucide lucide-ellipsis" aria-hidden="true"></i></button>
-              <div class="markdown-tool-menu markdown-tool-menu--wide" data-toolbar-menu="insert" role="menu" aria-label="More tools">
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="reference"><i class="lucide lucide-bookmark" aria-hidden="true"></i><span>Reference</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="code-block" title="Ctrl+Shift+K / Cmd+Option+C" aria-keyshortcuts="Control+Shift+K Meta+Alt+C"><i class="lucide lucide-square-code" aria-hidden="true"></i><span>Code block</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="terminal-block"><i class="lucide lucide-square-terminal" aria-hidden="true"></i><span>Terminal block</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="horizontal-rule"><i class="lucide lucide-minus" aria-hidden="true"></i><span>Horizontal rule</span></button>
-                <div class="markdown-tool-menu-separator" role="separator"></div>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="date-time"><i class="lucide lucide-clock-3" aria-hidden="true"></i><span>Date and time</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="emoji"><i class="lucide lucide-smile" aria-hidden="true"></i><span>Emoji shortcode</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="symbols"><i class="lucide lucide-braces" aria-hidden="true"></i><span>Symbols &amp; entities</span></button>
-                <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="alert"><i class="lucide lucide-badge-alert" aria-hidden="true"></i><span>Markdown alert</span></button>
-              </div>
-            </div>
+            <button type="button" class="markdown-tool-btn" data-md-action="reference" title="Reference" aria-label="Insert reference"><i class="lucide lucide-bookmark" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="code-block" title="Code block (Ctrl+Shift+K / Cmd+Option+C)" aria-label="Insert code block" aria-keyshortcuts="Control+Shift+K Meta+Alt+C"><i class="lucide lucide-square-code" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="terminal-block" title="Terminal block" aria-label="Insert terminal block"><i class="lucide lucide-square-terminal" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="horizontal-rule" title="Horizontal rule" aria-label="Insert horizontal rule"><i class="lucide lucide-minus" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="date-time" title="Date and time" aria-label="Insert date and time"><i class="lucide lucide-clock-3" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="emoji" title="Emoji shortcode" aria-label="Insert emoji shortcode"><i class="lucide lucide-smile" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="symbols" title="Symbols and entities" aria-label="Insert symbols and entities"><i class="lucide lucide-braces" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="alert" title="Markdown alert" aria-label="Insert Markdown alert"><i class="lucide lucide-badge-alert" aria-hidden="true"></i></button>
           </div>
           <div class="markdown-toolbar-group workspace-format-actions" role="group" aria-label="Workspace actions">
             <button type="button" class="markdown-tool-btn" data-md-action="find" title="Find and replace (Ctrl/Cmd+F)" aria-label="Find and replace" aria-keyshortcuts="Control+F Meta+F"><i class="lucide lucide-search" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="fullscreen" title="Fullscreen (F11 / Cmd+Option+F)" aria-label="Enter fullscreen" aria-keyshortcuts="F11 Meta+Alt+F"><i class="lucide lucide-maximize" aria-hidden="true"></i></button>
           </div>
-          <div class="markdown-toolbar-group markdown-toolbar-group--document markdown-toolbar-group--utilities" role="group" aria-label="Document utilities and view mode">
-            <button id="toggle-sync" class="tool-button document-command-btn sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
-              <i class="lucide lucide-refresh-cw" aria-hidden="true"></i><span class="btn-text">Sync Off</span>
-            </button>
-            <button id="copy-markdown-button" class="tool-button document-command-btn" type="button" title="Copy Markdown (Ctrl/Cmd+Shift+C)" aria-label="Copy Markdown" aria-keyshortcuts="Control+Shift+C Meta+Shift+C">
-              <i class="lucide lucide-copy" aria-hidden="true"></i><span class="btn-text">Copy Markdown</span>
-            </button>
-            <button id="review-toggle" class="tool-button document-command-btn" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
-              <i class="lucide lucide-message-square-text" aria-hidden="true"></i><span id="review-toolbar-count" class="review-toolbar-count" aria-hidden="true" hidden>0</span>
-            </button>
-            <span class="document-command-divider" aria-hidden="true"></span>
-            <div class="view-toolbar markdown-view-toolbar" role="group" aria-label="View mode">
-              <button class="tool-button view-toggle-btn" data-view-mode="editor" aria-pressed="false" title="Edit (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Edit Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-square-pen" aria-hidden="true"></i></button>
-              <button class="tool-button view-toggle-btn is-active" data-view-mode="split" aria-pressed="true" title="Split" aria-label="Split editor and preview"><i class="lucide lucide-columns-2" aria-hidden="true"></i></button>
-              <button class="tool-button view-toggle-btn" data-view-mode="preview" aria-pressed="false" title="Preview (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Preview Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-eye" aria-hidden="true"></i></button>
-            </div>
-          </div>
         </div>
 
         <!-- Reset Confirmation Modal -->
@@ -884,8 +881,8 @@ <h3 class="modal-section-title">Application shortcuts</h3>
                   <li>Use the view buttons in the toolbar to switch between Editor, Split, and Preview modes.</li>
                   <li>Sync scrolling is available in Split view to keep the editor and preview aligned.</li>
                   <li>Review opens a read-only preview where you can comment on or suggest changes to headings, paragraphs, code blocks, and diagrams.</li>
-                  <li>New, Share, Live Share, Report an Issue, About, and Settings are available in the header toolbar.</li>
-                  <li>Sync, Copy, Review, view modes, and Export stay with the document formatting toolbar.</li>
+                  <li>View modes, New, Copy, Sync, Review, Share, Live Share, and Export are grouped in the header toolbar.</li>
+                  <li>Report an Issue, About, and Settings follow the document actions in the header.</li>
                 </ul>
               </div>
               <div class="modal-section">
@@ -893,7 +890,7 @@ <h3 class="modal-section-title">Toolbar descriptions</h3>
                 <ul class="modal-list">
                   <li>Undo and Redo keep editing history close at hand.</li>
                   <li>Use the Heading and Case menus for H1&ndash;H6 headings and capitalization.</li>
-                  <li>Quick formatting covers emphasis, quotes, alignment, and lists; Insert holds less frequent tools while Diagram &amp; More stays directly available.</li>
+                  <li>Quick formatting covers emphasis, quotes, alignment, and lists; advanced insertion tools are directly available in the formatting toolbar.</li>
                   <li>Find &amp; Replace and Fullscreen are direct toolbar actions; About Markdown Viewer opens project, Markdown, privacy, license, and support information.</li>
                 </ul>
               </div>
diff --git a/styles.css b/styles.css
index fd95dc38..1abefbe9 100644
--- a/styles.css
+++ b/styles.css
@@ -2218,10 +2218,6 @@ body.document-sidebar-collapsed .document-sidebar {
   gap: 5px;
 }
 
-.header-right .header-command-btn .btn-text {
-  display: inline;
-}
-
 .header-command-btn {
   width: auto;
   padding-inline: 10px;
@@ -2235,6 +2231,19 @@ body.document-sidebar-collapsed .document-sidebar {
   display: inline-flex;
 }
 
+.header-icon-dropdown .dropdown-toggle::after {
+  display: none;
+}
+
+.header-toolbar-divider {
+  width: 1px;
+  height: 20px;
+  flex: 0 0 1px;
+  margin-inline: 2px;
+  background: var(--border-color);
+  opacity: 0.72;
+}
+
 .app-command-menu.header-new-menu,
 .app-command-menu.header-export-menu {
   width: max-content;
@@ -2283,6 +2292,59 @@ body.document-sidebar-collapsed .document-sidebar {
   line-height: 1;
 }
 
+.header-icon-command.is-active,
+.header-icon-command.is-active:hover,
+.header-icon-command.is-live-active,
+.header-icon-command.is-live-active:hover,
+.header-icon-command.sync-active,
+.header-icon-command.sync-active:hover {
+  border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
+  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
+  color: var(--accent-color);
+}
+
+.header-icon-command#review-toggle:has(.review-toolbar-count:not([hidden])) {
+  width: auto;
+  padding-inline: 6px;
+}
+
+.header-view-toolbar {
+  flex: 0 0 auto;
+}
+
+.header-view-toolbar .view-toggle-btn {
+  width: 27px;
+  min-width: 27px;
+  height: 26px;
+  padding: 0;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--text-secondary);
+  box-shadow: none;
+}
+
+.header-view-toolbar .view-toggle-btn:hover,
+.header-view-toolbar .view-toggle-btn:focus-visible {
+  border: 0;
+  background: var(--toolbar-control-hover);
+  color: var(--text-color);
+}
+
+.header-view-toolbar .view-toggle-btn.is-active,
+.header-view-toolbar .view-toggle-btn.is-active:hover {
+  border: 0;
+  background: var(--segmented-surface);
+  color: var(--accent-color);
+  box-shadow: var(--segmented-shadow);
+}
+
+.header-view-toolbar .view-toggle-btn:disabled,
+.header-view-toolbar .view-toggle-btn[aria-disabled="true"] {
+  background: transparent;
+  box-shadow: none;
+}
+
 .settings-dropdown {
   display: inline-flex;
 }
@@ -2800,46 +2862,10 @@ body.document-sidebar-collapsed .document-sidebar {
   flex-shrink: 0;
 }
 
-.markdown-toolbar-group--utilities {
-  position: sticky;
-  z-index: 6;
-  inset-inline-end: 0;
-  margin-inline-start: auto;
-  border-right: 0;
-  background: var(--toolbar-surface);
-}
-
-.markdown-toolbar-group--document {
-  gap: 2px;
-  padding-inline-start: 6px;
-}
-
 .workspace-format-actions {
   padding-inline: 5px;
 }
 
-.markdown-toolbar-group--document .tool-button {
-  flex: 0 0 auto;
-  width: 30px;
-  height: 30px;
-  min-width: 30px;
-  padding: 0;
-  border-color: transparent;
-  border-radius: 7px;
-  background: transparent;
-}
-
-.markdown-toolbar-group--document .tool-button:hover,
-.markdown-toolbar-group--document .tool-button:focus-visible {
-  border-color: transparent;
-  background: var(--toolbar-control-hover);
-}
-
-.markdown-toolbar-group--document #review-toggle:has(.review-toolbar-count:not([hidden])) {
-  width: auto;
-  padding-inline: 5px;
-}
-
 .document-actions-menu {
   width: 280px;
   min-width: 280px;
@@ -2860,14 +2886,6 @@ body.document-sidebar-collapsed .document-sidebar {
   z-index: var(--layer-menu);
 }
 
-.document-command-divider {
-  width: 1px;
-  height: 18px;
-  margin-inline: 4px;
-  background: var(--border-color);
-  opacity: 0.75;
-}
-
 .markdown-view-toolbar {
   display: inline-flex;
   align-items: center;
@@ -2879,44 +2897,6 @@ body.document-sidebar-collapsed .document-sidebar {
   background: var(--segmented-bg);
 }
 
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn {
-  width: 27px;
-  height: 26px;
-  min-width: 27px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-secondary);
-  box-shadow: none;
-}
-
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn:hover,
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn:focus-visible {
-  border: 0;
-  background: var(--toolbar-control-hover);
-  color: var(--text-color);
-}
-
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn.is-active,
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn.is-active:hover {
-  border: 0;
-  background: var(--segmented-surface);
-  color: var(--accent-color);
-  box-shadow: var(--segmented-shadow);
-}
-
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn:disabled,
-.markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn[aria-disabled="true"] {
-  background: transparent;
-  box-shadow: none;
-}
-
-.markdown-toolbar-group--utilities .tool-button {
-  flex: 0 0 auto;
-  height: 30px;
-  min-width: 30px;
-}
-
 .markdown-toolbar-group:first-child {
   padding-left: 0;
 }
@@ -3017,17 +2997,6 @@ body.document-sidebar-collapsed .document-sidebar {
   gap: 5px;
 }
 
-.markdown-tool-select--insert {
-  width: 30px;
-  min-width: 30px;
-  gap: 0;
-  padding: 0;
-}
-
-.markdown-tool-select--insert .lucide-ellipsis {
-  font-size: var(--ui-icon-size-lg);
-}
-
 .markdown-tool-select-label {
   overflow: hidden;
   max-width: 48px;
@@ -3680,12 +3649,6 @@ a:focus {
     min-width: 44px;
   }
 
-  .markdown-tool-select--insert {
-    width: 30px !important;
-    min-width: 30px;
-    padding-inline: 0 !important;
-  }
-
   .markdown-format-toolbar {
     height: 40px !important;
   }
@@ -3699,23 +3662,6 @@ a:focus {
     height: 40px !important;
   }
 
-  .markdown-toolbar-group--document .tool-button {
-    width: 30px;
-    height: 30px;
-    min-width: 30px;
-    padding: 0;
-  }
-
-  .markdown-view-toolbar {
-    height: 32px;
-  }
-
-  .markdown-toolbar-group--document .markdown-view-toolbar .view-toggle-btn {
-    width: 27px;
-    height: 26px;
-    min-width: 27px;
-  }
-
   .document-action-item {
     min-height: 44px;
   }
@@ -4061,15 +4007,6 @@ a:focus {
     scroll-padding-inline: 6px;
   }
 
-  .markdown-toolbar-group--utilities {
-    position: static;
-    margin-inline-start: 0;
-  }
-
-  .markdown-tool-select--insert {
-    min-width: 30px;
-  }
-
   .markdown-tool-menu-item,
   .tab-menu-item,
   .header-command-menu .app-menu-item {
diff --git a/tests/e2e/status-toolbar-followup.spec.js b/tests/e2e/status-toolbar-followup.spec.js
index d8c97873..f2b3c9f0 100644
--- a/tests/e2e/status-toolbar-followup.spec.js
+++ b/tests/e2e/status-toolbar-followup.spec.js
@@ -5,27 +5,44 @@ test.beforeEach(async ({ page }) => {
   await openApp(page);
 });
 
-test('header and formatting toolbar expose the requested actions in order', async ({ page }) => {
+test('header consolidates icon document actions in the requested order', async ({ page }) => {
   await page.setViewportSize({ width: 1440, height: 900 });
   const header = page.locator('.header-right');
   await expect(page.locator('.app-header h1')).toBeVisible();
   expect(await page.locator('.app-header h1').evaluate(title => title.getBoundingClientRect().width)).toBeGreaterThan(115);
   expect(await page.locator('#document-sidebar').evaluate(sidebar => sidebar.getBoundingClientRect().width)).toBeGreaterThanOrEqual(220);
-  for (const selector of ['#importDropdown', '#share-button', '#live-share-button', '#header-about-button', '#workspaceSettingsDropdown']) {
+  for (const selector of ['#importDropdown', '#copy-markdown-button', '#toggle-sync', '#review-toggle', '#share-button', '#live-share-button', '#exportDropdown', '#header-about-button', '#workspaceSettingsDropdown']) {
     await expect(header.locator(selector)).toBeVisible();
   }
   await expect(header.locator('[aria-label="Report an issue"]')).toBeVisible();
-  await expect(header.locator('#exportDropdown')).toBeVisible();
-  await expect(header.locator('#toggle-sync, #copy-markdown-button')).toHaveCount(0);
+  await expect(header.locator('.header-view-toolbar .view-toggle-btn')).toHaveCount(3);
+  await expect(header.locator('#importDropdown .btn-text, #share-button .btn-text, #live-share-button .btn-text, #exportDropdown .btn-text')).toHaveCount(0);
+
+  const headerOrder = await header.locator(':scope > button, :scope > a, :scope > .dropdown > button').evaluateAll(elements =>
+    elements.map(element => element.id || element.getAttribute('aria-label'))
+  );
+  expect(headerOrder).toEqual([
+    'importDropdown',
+    'copy-markdown-button',
+    'toggle-sync',
+    'review-toggle',
+    'share-button',
+    'live-share-button',
+    'exportDropdown',
+    'Report an issue',
+    'header-about-button',
+    'workspaceSettingsDropdown'
+  ]);
 
   const toolbar = page.locator('#markdown-format-toolbar');
   await expect(toolbar.locator('.workspace-format-actions [data-md-action="find"]')).toBeVisible();
   await expect(toolbar.locator('.workspace-format-actions [data-md-action="fullscreen"]')).toBeVisible();
   await expect(toolbar.locator('.workspace-format-actions [data-md-action="find"] i')).toHaveClass(/lucide-search/);
   await expect(toolbar.locator('.workspace-format-actions [data-md-action="fullscreen"] i')).toHaveClass(/lucide-maximize/);
-  await expect(toolbar.locator('#review-toggle')).toBeVisible();
-  await expect(toolbar.locator('#toggle-sync, #copy-markdown-button')).toHaveCount(2);
+  await expect(toolbar.locator('#review-toggle, #toggle-sync, #copy-markdown-button')).toHaveCount(0);
   await expect(toolbar.locator('#exportDropdown')).toHaveCount(0);
+  await expect(toolbar.locator('.markdown-tool-select--insert, [data-toolbar-menu="insert"]')).toHaveCount(0);
+  await expect(toolbar.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn')).toHaveCount(9);
 
   await toolbar.locator('.workspace-format-actions [data-md-action="find"]').click();
   await expect(page.locator('#find-replace-modal')).toBeVisible();
@@ -39,13 +56,13 @@ test('header and formatting toolbar expose the requested actions in order', asyn
   await fullscreen.click();
   await expect.poll(() => page.evaluate(() => Boolean(document.fullscreenElement))).toBe(false);
 
-  await toolbar.locator('#toggle-sync').click();
-  await expect(toolbar.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'false');
-  await toolbar.locator('#toggle-sync').click();
-  await expect(toolbar.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'true');
+  await header.locator('#toggle-sync').click();
+  await expect(header.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'false');
+  await header.locator('#toggle-sync').click();
+  await expect(header.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'true');
   await stubClipboard(page);
-  await toolbar.locator('#copy-markdown-button').click();
-  await expect(toolbar.locator('#copy-markdown-button')).toHaveAttribute('aria-label', 'Copied');
+  await header.locator('#copy-markdown-button').click();
+  await expect(header.locator('#copy-markdown-button')).toHaveAttribute('aria-label', 'Copied');
   await expect.poll(() => page.evaluate(() => window.__copiedText)).not.toBe('');
 
   await header.locator('#importDropdown').click();
diff --git a/tests/e2e/tab-split-sidebar-update.spec.js b/tests/e2e/tab-split-sidebar-update.spec.js
index 2879b8d4..734a8061 100644
--- a/tests/e2e/tab-split-sidebar-update.spec.js
+++ b/tests/e2e/tab-split-sidebar-update.spec.js
@@ -119,7 +119,7 @@ test('split view uses one combined tab and offers only edit or preview modes', a
   await expect(page.locator('.view-toolbar [data-view-mode="split"]')).toBeEnabled();
 });
 
-test('header keeps global actions concise and settings groups workspace preferences', async ({ page }) => {
+test('header groups document actions before application preferences', async ({ page }) => {
   const header = page.locator('.header-right');
   await expect(header.locator('#importDropdown')).toBeVisible();
   await expect(header.locator('#share-button')).toBeVisible();
@@ -128,41 +128,39 @@ test('header keeps global actions concise and settings groups workspace preferen
   await expect(header.locator('#header-about-button')).toBeVisible();
   await expect(header.locator('#workspaceSettingsDropdown')).toBeVisible();
   await expect(header.locator('#exportDropdown')).toBeVisible();
-  await expect(header.locator('#toggle-sync, #review-toggle, #copy-markdown-button')).toHaveCount(0);
+  await expect(header.locator('#toggle-sync, #review-toggle, #copy-markdown-button')).toHaveCount(3);
+  await expect(header.locator('.header-view-toolbar .view-toggle-btn')).toHaveCount(3);
   const headerActions = await header.locator(':scope > button, :scope > a, :scope > .dropdown > button').evaluateAll(elements =>
     elements.map(element => element.id || element.getAttribute('aria-label'))
   );
   expect(headerActions).toEqual([
     'importDropdown',
-    'exportDropdown',
+    'copy-markdown-button',
+    'toggle-sync',
+    'review-toggle',
     'share-button',
     'live-share-button',
+    'exportDropdown',
     'Report an issue',
     'header-about-button',
     'workspaceSettingsDropdown'
   ]);
 
   const formatToolbar = page.locator('#markdown-format-toolbar');
-  await expect(formatToolbar.locator('#toggle-sync')).toBeVisible();
-  await expect(formatToolbar.locator('#copy-markdown-button')).toBeVisible();
-  await expect(formatToolbar.locator('#review-toggle')).toBeVisible();
+  await expect(formatToolbar.locator('#toggle-sync, #copy-markdown-button, #review-toggle')).toHaveCount(0);
   await expect(formatToolbar.locator('#exportDropdown')).toHaveCount(0);
   await expect(formatToolbar.locator('#documentActionsDropdown')).toHaveCount(0);
   await expect(page.locator('.app-brand-logo')).toHaveCount(0);
 
-  const utilityOrder = await formatToolbar.locator('.markdown-toolbar-group--utilities').evaluate(group =>
-    Array.from(group.children).map(element => element.id || element.className)
-  );
-  expect(utilityOrder.slice(0, 4)).toEqual(['toggle-sync', 'copy-markdown-button', 'review-toggle', 'document-command-divider']);
-  await formatToolbar.locator('#toggle-sync').click();
-  await expect(formatToolbar.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'false');
-  await expect(formatToolbar.locator('#toggle-sync')).toHaveAttribute('aria-label', 'Enable synchronized scrolling');
-  await formatToolbar.locator('#toggle-sync').click();
-  await expect(formatToolbar.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'true');
+  await header.locator('#toggle-sync').click();
+  await expect(header.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'false');
+  await expect(header.locator('#toggle-sync')).toHaveAttribute('aria-label', 'Enable synchronized scrolling');
+  await header.locator('#toggle-sync').click();
+  await expect(header.locator('#toggle-sync')).toHaveAttribute('aria-pressed', 'true');
   await stubClipboard(page);
-  await formatToolbar.locator('#copy-markdown-button').click();
-  await expect(formatToolbar.locator('#copy-markdown-button')).toHaveAttribute('aria-label', 'Copied');
-  await expect(formatToolbar.locator('#copy-markdown-button i')).toHaveClass(/lucide-check/);
+  await header.locator('#copy-markdown-button').click();
+  await expect(header.locator('#copy-markdown-button')).toHaveAttribute('aria-label', 'Copied');
+  await expect(header.locator('#copy-markdown-button i')).toHaveClass(/lucide-check/);
   await expect.poll(() => page.evaluate(() => window.__copiedText)).not.toBe('');
 
   const initialTabCount = await page.locator('#tab-list .tab-item').count();
@@ -188,14 +186,8 @@ test('header keeps global actions concise and settings groups workspace preferen
   await expect(settings.locator('#theme-toggle')).toContainText('Appearance');
   await page.locator('#workspaceSettingsDropdown').click();
 
-  const insertToggle = formatToolbar.locator('.markdown-tool-select--insert');
-  await expect(insertToggle).toHaveAttribute('aria-label', 'More tools');
-  await expect(insertToggle).not.toContainText('Insert');
-  await expect(formatToolbar.locator('[data-md-action="diagram"]')).toHaveCount(1);
-  await expect(formatToolbar.locator('[data-toolbar-menu="insert"] [data-md-action="diagram"]')).toHaveCount(0);
-  await insertToggle.press('Enter');
-  await expect(formatToolbar.locator('[data-toolbar-menu="insert"]')).toHaveClass(/open/);
-  await page.keyboard.press('Escape');
+  await expect(formatToolbar.locator('.markdown-tool-select--insert, [data-toolbar-menu="insert"]')).toHaveCount(0);
+  await expect(formatToolbar.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn')).toHaveCount(9);
 
   await header.locator('#exportDropdown').click();
   const exportMenu = page.locator('[aria-labelledby="exportDropdown"]');
@@ -203,8 +195,8 @@ test('header keeps global actions concise and settings groups workspace preferen
   await expect(exportMenu).not.toHaveClass(/toolbar-portal-menu/);
   await expect(exportMenu).toBeInViewport();
 
-  await expect(formatToolbar.locator('.markdown-view-toolbar .view-toggle-btn')).toHaveCount(3);
-  expect(await formatToolbar.locator('.markdown-view-toolbar .view-toggle-btn').evaluateAll(buttons =>
+  await expect(header.locator('.header-view-toolbar .view-toggle-btn')).toHaveCount(3);
+  expect(await header.locator('.header-view-toolbar .view-toggle-btn').evaluateAll(buttons =>
     buttons.map(button => button.getAttribute('data-view-mode'))
   )).toEqual(['editor', 'split', 'preview']);
   const activeStyle = await page.locator('.view-toggle-btn.is-active').evaluate(button => ({
@@ -257,14 +249,15 @@ test('closing a tab keeps the document in Files and reopening restores the tab',
   await expect(reopenedRow).toHaveCount(0);
 });
 
-test('format toolbar consolidates heading, case, alignment, and insert actions', async ({ page }) => {
+test('format toolbar keeps compact selectors and exposes advanced insert actions', async ({ page }) => {
   await expect(page.locator('[data-md-action="clear-formatting"]')).toHaveCount(0);
   await expect(page.locator('[data-md-action="help"]')).toHaveCount(0);
   await expect(page.locator('[data-md-action="info"]')).toBeVisible();
   await expect(page.locator('[data-toolbar-menu-toggle="heading"]')).toBeVisible();
   await expect(page.locator('[data-toolbar-menu-toggle="case"]')).toBeVisible();
   await expect(page.locator('[data-toolbar-menu-toggle="alignment"]')).toBeVisible();
-  await expect(page.locator('[data-toolbar-menu-toggle="insert"]')).toBeVisible();
+  await expect(page.locator('[data-toolbar-menu-toggle="insert"], [data-toolbar-menu="insert"]')).toHaveCount(0);
+  await expect(page.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn')).toHaveCount(9);
 
   await setEditorContent(page, 'toolbar heading');
   await page.locator('[data-toolbar-menu-toggle="heading"]').click();
@@ -450,19 +443,9 @@ test('toolbar stays usable on phone and landscape widths', async ({ page }) => {
   await page.locator('[data-toolbar-menu-toggle="heading"]').click();
   await expect(page.locator('[data-toolbar-menu="heading"]')).toBeVisible();
   await page.keyboard.press('Escape');
-  await page.locator('#markdown-format-toolbar').evaluate(toolbar => { toolbar.scrollLeft = toolbar.scrollWidth; });
-  const utilityPlacement = await page.evaluate(() => {
-    const toolbar = document.querySelector('#markdown-format-toolbar').getBoundingClientRect();
-    const utilities = document.querySelector('.markdown-toolbar-group--utilities').getBoundingClientRect();
-    return {
-      toolbarLeft: Math.round(toolbar.left),
-      toolbarRight: Math.round(toolbar.right),
-      utilitiesRight: Math.round(utilities.right),
-      utilitiesLeft: Math.round(utilities.left)
-    };
-  });
-  expect(utilityPlacement.utilitiesRight).toBeLessThanOrEqual(utilityPlacement.toolbarRight);
-  expect(utilityPlacement.utilitiesLeft).toBeGreaterThanOrEqual(utilityPlacement.toolbarLeft);
+  const toolbar = page.locator('#markdown-format-toolbar');
+  await toolbar.evaluate(element => { element.scrollLeft = element.scrollWidth; });
+  await expect(toolbar.locator('.markdown-toolbar-group--advanced [data-md-action="alert"]')).toBeInViewport();
   expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true);
 
   await page.setViewportSize({ width: 844, height: 390 });
diff --git a/tests/e2e/ui-toolbar-redesign.spec.js b/tests/e2e/ui-toolbar-redesign.spec.js
index eb8f19c3..314148e9 100644
--- a/tests/e2e/ui-toolbar-redesign.spec.js
+++ b/tests/e2e/ui-toolbar-redesign.spec.js
@@ -71,8 +71,7 @@ test('shared application overlays use compact type, spacing, and surface styling
   await expect(page.locator('.about-support')).toContainText('Developed and maintained by ThisIs-Developer.');
   await page.locator('#about-modal-close').click();
 
-  await page.locator('.markdown-tool-select--insert').click();
-  await page.locator('[data-toolbar-menu="insert"] [data-md-action="alert"]').click();
+  await page.locator('.markdown-toolbar-group--advanced [data-md-action="alert"]').click();
   await expect(page.locator('#alert-modal')).toHaveClass(/is-visible/);
   await expect(page.locator('#alert-modal .alert-option').first()).toBeFocused();
   await page.keyboard.press('Escape');
@@ -110,36 +109,33 @@ test('every application dialog uses the shared alert modal shell', async ({ page
   expect(dialogShells.filter(dialog => !dialog.sharedShell || !dialog.header || !dialog.close || !dialog.footer || dialog.padding !== '0px')).toEqual([]);
 });
 
-test('toolbar groups preserve actions while simplifying Insert and promoting diagrams', async ({ page }) => {
+test('header orders document actions and formatting toolbar exposes advanced tools', async ({ page }) => {
   await page.setViewportSize({ width: 1440, height: 900 });
+  const header = page.locator('.header-right');
   const toolbar = page.locator('#markdown-format-toolbar');
-  const utilityOrder = await toolbar.locator('.markdown-toolbar-group--utilities').evaluate(group =>
-    Array.from(group.children).map(element => element.id || element.className)
+  const documentActionOrder = await header.locator(':scope > button, :scope > .dropdown > button').evaluateAll(elements =>
+    elements.map(element => element.id)
   );
-  expect(utilityOrder.slice(0, 4)).toEqual([
-    'toggle-sync',
+  expect(documentActionOrder.slice(0, 7)).toEqual([
+    'importDropdown',
     'copy-markdown-button',
+    'toggle-sync',
     'review-toggle',
-    'document-command-divider'
+    'share-button',
+    'live-share-button',
+    'exportDropdown'
   ]);
 
-  const insertToggle = toolbar.locator('.markdown-tool-select--insert');
-  await expect(insertToggle).toHaveText('');
-  await expect(insertToggle).toHaveAttribute('title', 'More tools');
-  await expect(insertToggle.locator('.lucide-ellipsis')).toHaveCount(1);
-  await expect(toolbar.locator('[data-md-action="diagram"]')).toHaveCount(1);
-  await expect(toolbar.locator('[data-toolbar-menu="insert"] [data-md-action="diagram"]')).toHaveCount(0);
-
-  await insertToggle.press('Enter');
-  const insertMenu = toolbar.locator('[data-toolbar-menu="insert"]');
-  await expect(insertMenu).toHaveClass(/open/);
-  await expect(insertMenu.locator('.markdown-tool-menu-item').first()).toBeFocused();
-  await page.keyboard.press('Escape');
-  await expect(insertMenu).not.toHaveClass(/open/);
-  await expect(insertToggle).toBeFocused();
+  const advancedActions = await toolbar.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn').evaluateAll(buttons =>
+    buttons.map(button => button.getAttribute('data-md-action'))
+  );
+  expect(advancedActions).toEqual([
+    'diagram', 'reference', 'code-block', 'terminal-block', 'horizontal-rule',
+    'date-time', 'emoji', 'symbols', 'alert'
+  ]);
+  await expect(toolbar.locator('.markdown-tool-select--insert, [data-toolbar-menu="insert"]')).toHaveCount(0);
 
-  await insertToggle.click();
-  await insertMenu.locator('[data-md-action="emoji"]').click();
+  await toolbar.locator('[data-md-action="emoji"]').click();
   await expect(page.locator('#emoji-modal')).toBeVisible();
   await page.locator('#emoji-modal-search').press('Escape');
   await expect(page.locator('#emoji-modal')).toBeHidden();
@@ -227,7 +223,7 @@ test('shared interface roles use the application type and icon scale', async ({
   expect(sizing.mobileIcons).toEqual(['14px']);
 });
 
-test('New, Export, and formatting menus share one visual system and keyboard dismissal', async ({ page }) => {
+test('New and Export menus share one visual system and keyboard dismissal', async ({ page }) => {
   await page.setViewportSize({ width: 1440, height: 900 });
 
   await page.locator('#importDropdown').click();
@@ -250,16 +246,7 @@ test('New, Export, and formatting menus share one visual system and keyboard dis
   expect(exportSurface).toEqual(newSurface);
   await page.keyboard.press('Escape');
 
-  const insertToggle = page.locator('.markdown-tool-select--insert');
-  await insertToggle.click();
-  const insertMenu = page.locator('[data-toolbar-menu="insert"]');
-  const insertSurface = await insertMenu.evaluate(menu => {
-    const style = getComputedStyle(menu);
-    return [style.backgroundColor, style.borderColor, style.borderRadius, style.boxShadow];
-  });
-  expect(insertSurface).toEqual(newSurface);
-  await page.locator('#markdown-editor').click();
-  await expect(insertMenu).not.toHaveClass(/open/);
+  await expect(page.locator('.markdown-tool-select--insert, [data-toolbar-menu="insert"]')).toHaveCount(0);
 });
 
 test('toolbar uses theme surfaces and remains usable at desktop and phone widths', async ({ page }) => {
@@ -269,8 +256,8 @@ test('toolbar uses theme surfaces and remains usable at desktop and phone widths
   const desktopSizing = await page.evaluate(() => {
     const toolbar = document.querySelector('#markdown-format-toolbar');
     const formatButton = toolbar.querySelector('.markdown-tool-btn');
-    const utilityButton = toolbar.querySelector('.markdown-toolbar-group--document .tool-button');
-    const viewButton = toolbar.querySelector('.markdown-view-toolbar .view-toggle-btn');
+    const utilityButton = document.querySelector('.header-right #copy-markdown-button');
+    const viewButton = document.querySelector('.header-view-toolbar .view-toggle-btn');
     return {
       toolbarHeight: toolbar.getBoundingClientRect().height,
       formatButton: [formatButton.getBoundingClientRect().width, formatButton.getBoundingClientRect().height],
@@ -294,14 +281,6 @@ test('toolbar uses theme surfaces and remains usable at desktop and phone widths
         const button = toolbar.querySelector('.markdown-tool-btn');
         return [button.getBoundingClientRect().width, button.getBoundingClientRect().height];
       })(),
-      utilityButton: (() => {
-        const button = toolbar.querySelector('.markdown-toolbar-group--document .tool-button');
-        return [button.getBoundingClientRect().width, button.getBoundingClientRect().height];
-      })(),
-      viewButton: (() => {
-        const button = toolbar.querySelector('.markdown-view-toolbar .view-toggle-btn');
-        return [button.getBoundingClientRect().width, button.getBoundingClientRect().height];
-      })(),
       minimumTarget: Math.min(...buttons.map(button => button.getBoundingClientRect().height))
     };
   });
@@ -309,8 +288,8 @@ test('toolbar uses theme surfaces and remains usable at desktop and phone widths
   expect(mobileSizing.toolbarScrollable).toBe(true);
   expect(mobileSizing.toolbarHeight).toBe(desktopSizing.toolbarHeight);
   expect(mobileSizing.formatButton).toEqual(desktopSizing.formatButton);
-  expect(mobileSizing.utilityButton).toEqual(desktopSizing.utilityButton);
-  expect(mobileSizing.viewButton).toEqual(desktopSizing.viewButton);
+  expect(desktopSizing.utilityButton).toEqual([30, 30]);
+  expect(desktopSizing.viewButton).toEqual([27, 26]);
   expect(mobileSizing.minimumTarget).toBeGreaterThanOrEqual(26);
 
   await page.evaluate(() => { document.documentElement.style.fontSize = '20px'; });

From 8904d47d7f860512dcaccfe9f89048f7b65e899f Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 01:00:10 +0530
Subject: [PATCH 02/17] feat(theme): add icon switch controls

---
 assets/lucide-icons.css              |  1 +
 desktop-app/resources/index.html     |  8 +++----
 desktop-app/resources/js/script.js   | 22 +++++++++++++-------
 desktop-app/resources/styles.css     | 31 ++++++++++++++++++++++++++++
 index.html                           |  8 +++----
 script.js                            | 22 +++++++++++++-------
 styles.css                           | 31 ++++++++++++++++++++++++++++
 tests/e2e/responsive-storage.spec.js | 20 +++++++++++++++++-
 8 files changed, 118 insertions(+), 25 deletions(-)

diff --git a/assets/lucide-icons.css b/assets/lucide-icons.css
index dda69892..73a0a336 100644
--- a/assets/lucide-icons.css
+++ b/assets/lucide-icons.css
@@ -133,6 +133,7 @@
 .lucide-star-filled { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc3RhciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiID4gPHBhdGggZD0iTTExLjUyNSAyLjI5NWEuNTMuNTMgMCAwIDEgLjk1IDBsMi4zMSA0LjY3OWEyLjEyMyAyLjEyMyAwIDAgMCAxLjU5NSAxLjE2bDUuMTY2Ljc1NmEuNTMuNTMgMCAwIDEgLjI5NC45MDRsLTMuNzM2IDMuNjM4YTIuMTIzIDIuMTIzIDAgMCAwLS42MTEgMS44NzhsLjg4MiA1LjE0YS41My41MyAwIDAgMS0uNzcxLjU2bC00LjYxOC0yLjQyOGEyLjEyMiAyLjEyMiAwIDAgMC0xLjk3MyAwTDYuMzk2IDIxLjAxYS41My41MyAwIDAgMS0uNzctLjU2bC44ODEtNS4xMzlhMi4xMjIgMi4xMjIgMCAwIDAtLjYxMS0xLjg3OUwyLjE2IDkuNzk1YS41My41MyAwIDAgMSAuMjk0LS45MDZsNS4xNjUtLjc1NWEyLjEyMiAyLjEyMiAwIDAgMCAxLjU5Ny0xLjE2eiIgLz4gPC9zdmc+"); }
 .lucide-strikethrough { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc3RyaWtldGhyb3VnaCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPiA8cGF0aCBkPSJNMTYgNEg5YTMgMyAwIDAgMC0yLjgzIDQiIC8+IDxwYXRoIGQ9Ik0xNCAxMmE0IDQgMCAwIDEgMCA4SDYiIC8+IDxsaW5lIHgxPSI0IiB4Mj0iMjAiIHkxPSIxMiIgeTI9IjEyIiAvPiA8L3N2Zz4="); }
 .lucide-sun { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc3VuIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiA+IDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjQiIC8+IDxwYXRoIGQ9Ik0xMiAydjIiIC8+IDxwYXRoIGQ9Ik0xMiAyMHYyIiAvPiA8cGF0aCBkPSJtNC45MyA0LjkzIDEuNDEgMS40MSIgLz4gPHBhdGggZD0ibTE3LjY2IDE3LjY2IDEuNDEgMS40MSIgLz4gPHBhdGggZD0iTTIgMTJoMiIgLz4gPHBhdGggZD0iTTIwIDEyaDIiIC8+IDxwYXRoIGQ9Im02LjM0IDE3LjY2LTEuNDEgMS40MSIgLz4gPHBhdGggZD0ibTE5LjA3IDQuOTMtMS40MSAxLjQxIiAvPiA8L3N2Zz4="); }
+.lucide-sun-medium { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc3VuLW1lZGl1bSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPiA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0IiAvPiA8cGF0aCBkPSJNMTIgM3YxIiAvPiA8cGF0aCBkPSJNMTIgMjB2MSIgLz4gPHBhdGggZD0iTTMgMTJoMSIgLz4gPHBhdGggZD0iTTIwIDEyaDEiIC8+IDxwYXRoIGQ9Im0xOC4zNjQgNS42MzYtLjcwNy43MDciIC8+IDxwYXRoIGQ9Im02LjM0MyAxNy42NTctLjcwNy43MDciIC8+IDxwYXRoIGQ9Im01LjYzNiA1LjYzNi43MDcuNzA3IiAvPiA8cGF0aCBkPSJtMTcuNjU3IDE3LjY1Ny43MDcuNzA3IiAvPiA8L3N2Zz4="); }
 .lucide-table-2 { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdGFibGUtMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPiA8cGF0aCBkPSJNOSAzSDVhMiAyIDAgMCAwLTIgMnY0bTYtNmgxMGEyIDIgMCAwIDEgMiAydjRNOSAzdjE4bTAgMGgxMGEyIDIgMCAwIDAgMi0yVjlNOSAyMUg1YTIgMiAwIDAgMS0yLTJWOW0wIDBoMTgiIC8+IDwvc3ZnPg=="); }
 .lucide-trash-2 { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdHJhc2gtMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPiA8cGF0aCBkPSJNMTAgMTF2NiIgLz4gPHBhdGggZD0iTTE0IDExdjYiIC8+IDxwYXRoIGQ9Ik0xOSA2djE0YTIgMiAwIDAgMS0yIDJIN2EyIDIgMCAwIDEtMi0yVjYiIC8+IDxwYXRoIGQ9Ik0zIDZoMTgiIC8+IDxwYXRoIGQ9Ik04IDZWNGEyIDIgMCAwIDEgMi0yaDRhMiAyIDAgMCAxIDIgMnYyIiAvPiA8L3N2Zz4="); }
 .lucide-triangle-alert { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdHJpYW5nbGUtYWxlcnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiID4gPHBhdGggZD0ibTIxLjczIDE4LTgtMTRhMiAyIDAgMCAwLTMuNDggMGwtOCAxNEEyIDIgMCAwIDAgNCAyMWgxNmEyIDIgMCAwIDAgMS43My0zIiAvPiA8cGF0aCBkPSJNMTIgOXY0IiAvPiA8cGF0aCBkPSJNMTIgMTdoLjAxIiAvPiA8L3N2Zz4="); }
diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index 2f753352..de933f41 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -122,8 +122,8 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                             <div class="settings-menu-header">
                                 <strong>Workspace settings</strong>
                             </div>
-                            <button id="theme-toggle" class="settings-menu-item app-menu-item" type="button" title="Toggle appearance">
-                                <i class="lucide lucide-moon" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span>
+                            <button id="theme-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle appearance">
+                                <i id="theme-toggle-icon" class="lucide lucide-sun-medium" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span><span class="settings-switch theme-settings-switch" aria-hidden="true"><span><i id="theme-switch-icon" class="lucide lucide-sun-medium theme-switch-icon"></i></span></span>
                             </button>
                             <div class="dropdown dropstart settings-language-dropdown">
                                 <button class="settings-menu-item app-menu-item dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="Switch language">
@@ -278,8 +278,8 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                     </button>
                                     <div id="mobile-menu-settings-panel" class="mobile-menu-section-panel" data-mobile-menu-section hidden>
                                         <button id="mobile-theme-toggle" class="mobile-menu-item mobile-settings-item mobile-settings-toggle" type="button" aria-pressed="false" title="Use dark mode">
-                                            <span class="mobile-menu-item-label"><i id="mobile-theme-icon" class="lucide lucide-sun" aria-hidden="true"></i><span>Theme</span></span>
-                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch" aria-hidden="true"><span></span></span></span>
+                                            <span class="mobile-menu-item-label"><i id="mobile-theme-icon" class="lucide lucide-sun-medium" aria-hidden="true"></i><span>Theme</span></span>
+                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch theme-settings-switch" aria-hidden="true"><span><i id="mobile-theme-switch-icon" class="lucide lucide-sun-medium theme-switch-icon"></i></span></span></span>
                                         </button>
                                         <div class="mobile-menu-language dropdown w-100">
                                             <button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 80594c39..c7caf716 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -343,6 +343,8 @@ document.addEventListener("DOMContentLoaded", async function () {
   const reviewPinsLayer = document.getElementById('review-pins-layer');
   const markdownFormatToolbar = document.getElementById("markdown-format-toolbar");
   const themeToggle = document.getElementById("theme-toggle");
+  const themeToggleIcon = document.getElementById("theme-toggle-icon");
+  const themeSwitchIcon = document.getElementById("theme-switch-icon");
   const directionToggle = document.getElementById("direction-toggle");
   const importFromFileButton = document.getElementById("import-from-file");
   const importFromGithubButton = document.getElementById("import-from-github");
@@ -801,6 +803,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   const mobileExportToggle  = document.querySelector('[aria-controls="mobile-menu-export-panel"]');
   const mobileThemeToggle   = document.getElementById("mobile-theme-toggle");
   const mobileThemeIcon = document.getElementById("mobile-theme-icon");
+  const mobileThemeSwitchIcon = document.getElementById("mobile-theme-switch-icon");
   const mobileThemeStatus = document.getElementById("mobile-theme-status");
   const mobilePrivateModeToggle = document.getElementById("mobile-private-mode-toggle");
   const mobileStorageSettingsButton = document.getElementById("mobile-storage-settings-button");
@@ -1579,22 +1582,25 @@ document.addEventListener("DOMContentLoaded", async function () {
   document.documentElement.setAttribute("data-theme", initialTheme);
 
   function updateThemeToggleUI(theme) {
-    const useLightAppearance = theme === "dark";
+    const darkModeEnabled = theme === "dark";
+    const themeIconName = darkModeEnabled ? 'moon' : 'sun-medium';
     if (themeToggle) {
-      const icon = themeToggle.querySelector('i');
       const description = document.getElementById('theme-toggle-description');
-      if (icon) icon.className = 'lucide lucide-' + (useLightAppearance ? 'sun' : 'moon');
-      if (description) description.textContent = useLightAppearance ? 'Switch to light appearance' : 'Switch to dark appearance';
-      themeToggle.setAttribute('aria-label', useLightAppearance ? 'Use light appearance' : 'Use dark appearance');
-      themeToggle.setAttribute('title', useLightAppearance ? 'Use light appearance' : 'Use dark appearance');
+      themeToggle.classList.toggle('is-active', darkModeEnabled);
+      themeToggle.setAttribute('aria-pressed', String(darkModeEnabled));
+      if (themeToggleIcon) themeToggleIcon.className = 'lucide lucide-' + themeIconName;
+      if (themeSwitchIcon) themeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' theme-switch-icon';
+      if (description) description.textContent = darkModeEnabled ? 'Switch to light appearance' : 'Switch to dark appearance';
+      themeToggle.setAttribute('aria-label', darkModeEnabled ? 'Use light appearance' : 'Use dark appearance');
+      themeToggle.setAttribute('title', darkModeEnabled ? 'Use light appearance' : 'Use dark appearance');
     }
     if (mobileThemeToggle) {
-      const darkModeEnabled = theme === 'dark';
       mobileThemeToggle.classList.toggle('is-active', darkModeEnabled);
       mobileThemeToggle.setAttribute('aria-pressed', String(darkModeEnabled));
       mobileThemeToggle.setAttribute('aria-label', darkModeEnabled ? 'Use light mode' : 'Use dark mode');
       mobileThemeToggle.setAttribute('title', darkModeEnabled ? 'Use light mode' : 'Use dark mode');
-      if (mobileThemeIcon) mobileThemeIcon.className = 'lucide lucide-' + (darkModeEnabled ? 'moon' : 'sun');
+      if (mobileThemeIcon) mobileThemeIcon.className = 'lucide lucide-' + themeIconName;
+      if (mobileThemeSwitchIcon) mobileThemeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' theme-switch-icon';
       if (mobileThemeStatus) mobileThemeStatus.textContent = darkModeEnabled ? 'Dark mode' : 'Light mode';
     }
   }
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 1abefbe9..72aae456 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -2513,6 +2513,27 @@ body.document-sidebar-collapsed .document-sidebar {
   transition: transform 0.16s ease, background-color 0.16s ease;
 }
 
+.theme-settings-switch > span {
+  top: 2px;
+  left: 2px;
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0;
+  color: var(--text-secondary);
+  background: transparent;
+  transition: color 0.16s ease, transform 0.16s ease;
+}
+
+.theme-switch-icon {
+  width: 12px;
+  height: 12px;
+  color: currentColor;
+  font-size: 12px;
+}
+
 .settings-menu-item.is-active .settings-switch {
   background: var(--accent-color);
 }
@@ -2522,6 +2543,11 @@ body.document-sidebar-collapsed .document-sidebar {
   transform: translateX(14px);
 }
 
+.settings-menu-item.is-active .theme-settings-switch > span {
+  color: #fff;
+  background: transparent;
+}
+
 .settings-language-dropdown {
   width: 100%;
 }
@@ -11117,6 +11143,11 @@ html[data-theme="dark"] .mermaid svg {
   transform: translateX(14px);
 }
 
+.mobile-settings-toggle.is-active .theme-settings-switch > span {
+  color: #fff;
+  background: transparent;
+}
+
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
 .mobile-settings-toggle.is-active .mobile-menu-item-label > i {
   color: var(--accent-color);
diff --git a/index.html b/index.html
index 12513f01..67554f70 100644
--- a/index.html
+++ b/index.html
@@ -215,8 +215,8 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                             <div class="settings-menu-header">
                                 <strong>Workspace settings</strong>
                             </div>
-                            <button id="theme-toggle" class="settings-menu-item app-menu-item" type="button" title="Toggle appearance">
-                                <i class="lucide lucide-moon" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span>
+                            <button id="theme-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle appearance">
+                                <i id="theme-toggle-icon" class="lucide lucide-sun-medium" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span><span class="settings-switch theme-settings-switch" aria-hidden="true"><span><i id="theme-switch-icon" class="lucide lucide-sun-medium theme-switch-icon"></i></span></span>
                             </button>
                             <div class="dropdown dropstart settings-language-dropdown">
                                 <button class="settings-menu-item app-menu-item dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="Switch language">
@@ -371,8 +371,8 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                     </button>
                                     <div id="mobile-menu-settings-panel" class="mobile-menu-section-panel" data-mobile-menu-section hidden>
                                         <button id="mobile-theme-toggle" class="mobile-menu-item mobile-settings-item mobile-settings-toggle" type="button" aria-pressed="false" title="Use dark mode">
-                                            <span class="mobile-menu-item-label"><i id="mobile-theme-icon" class="lucide lucide-sun" aria-hidden="true"></i><span>Theme</span></span>
-                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch" aria-hidden="true"><span></span></span></span>
+                                            <span class="mobile-menu-item-label"><i id="mobile-theme-icon" class="lucide lucide-sun-medium" aria-hidden="true"></i><span>Theme</span></span>
+                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch theme-settings-switch" aria-hidden="true"><span><i id="mobile-theme-switch-icon" class="lucide lucide-sun-medium theme-switch-icon"></i></span></span></span>
                                         </button>
                                         <div class="mobile-menu-language dropdown w-100">
                                             <button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
diff --git a/script.js b/script.js
index 80594c39..c7caf716 100644
--- a/script.js
+++ b/script.js
@@ -343,6 +343,8 @@ document.addEventListener("DOMContentLoaded", async function () {
   const reviewPinsLayer = document.getElementById('review-pins-layer');
   const markdownFormatToolbar = document.getElementById("markdown-format-toolbar");
   const themeToggle = document.getElementById("theme-toggle");
+  const themeToggleIcon = document.getElementById("theme-toggle-icon");
+  const themeSwitchIcon = document.getElementById("theme-switch-icon");
   const directionToggle = document.getElementById("direction-toggle");
   const importFromFileButton = document.getElementById("import-from-file");
   const importFromGithubButton = document.getElementById("import-from-github");
@@ -801,6 +803,7 @@ document.addEventListener("DOMContentLoaded", async function () {
   const mobileExportToggle  = document.querySelector('[aria-controls="mobile-menu-export-panel"]');
   const mobileThemeToggle   = document.getElementById("mobile-theme-toggle");
   const mobileThemeIcon = document.getElementById("mobile-theme-icon");
+  const mobileThemeSwitchIcon = document.getElementById("mobile-theme-switch-icon");
   const mobileThemeStatus = document.getElementById("mobile-theme-status");
   const mobilePrivateModeToggle = document.getElementById("mobile-private-mode-toggle");
   const mobileStorageSettingsButton = document.getElementById("mobile-storage-settings-button");
@@ -1579,22 +1582,25 @@ document.addEventListener("DOMContentLoaded", async function () {
   document.documentElement.setAttribute("data-theme", initialTheme);
 
   function updateThemeToggleUI(theme) {
-    const useLightAppearance = theme === "dark";
+    const darkModeEnabled = theme === "dark";
+    const themeIconName = darkModeEnabled ? 'moon' : 'sun-medium';
     if (themeToggle) {
-      const icon = themeToggle.querySelector('i');
       const description = document.getElementById('theme-toggle-description');
-      if (icon) icon.className = 'lucide lucide-' + (useLightAppearance ? 'sun' : 'moon');
-      if (description) description.textContent = useLightAppearance ? 'Switch to light appearance' : 'Switch to dark appearance';
-      themeToggle.setAttribute('aria-label', useLightAppearance ? 'Use light appearance' : 'Use dark appearance');
-      themeToggle.setAttribute('title', useLightAppearance ? 'Use light appearance' : 'Use dark appearance');
+      themeToggle.classList.toggle('is-active', darkModeEnabled);
+      themeToggle.setAttribute('aria-pressed', String(darkModeEnabled));
+      if (themeToggleIcon) themeToggleIcon.className = 'lucide lucide-' + themeIconName;
+      if (themeSwitchIcon) themeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' theme-switch-icon';
+      if (description) description.textContent = darkModeEnabled ? 'Switch to light appearance' : 'Switch to dark appearance';
+      themeToggle.setAttribute('aria-label', darkModeEnabled ? 'Use light appearance' : 'Use dark appearance');
+      themeToggle.setAttribute('title', darkModeEnabled ? 'Use light appearance' : 'Use dark appearance');
     }
     if (mobileThemeToggle) {
-      const darkModeEnabled = theme === 'dark';
       mobileThemeToggle.classList.toggle('is-active', darkModeEnabled);
       mobileThemeToggle.setAttribute('aria-pressed', String(darkModeEnabled));
       mobileThemeToggle.setAttribute('aria-label', darkModeEnabled ? 'Use light mode' : 'Use dark mode');
       mobileThemeToggle.setAttribute('title', darkModeEnabled ? 'Use light mode' : 'Use dark mode');
-      if (mobileThemeIcon) mobileThemeIcon.className = 'lucide lucide-' + (darkModeEnabled ? 'moon' : 'sun');
+      if (mobileThemeIcon) mobileThemeIcon.className = 'lucide lucide-' + themeIconName;
+      if (mobileThemeSwitchIcon) mobileThemeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' theme-switch-icon';
       if (mobileThemeStatus) mobileThemeStatus.textContent = darkModeEnabled ? 'Dark mode' : 'Light mode';
     }
   }
diff --git a/styles.css b/styles.css
index 1abefbe9..72aae456 100644
--- a/styles.css
+++ b/styles.css
@@ -2513,6 +2513,27 @@ body.document-sidebar-collapsed .document-sidebar {
   transition: transform 0.16s ease, background-color 0.16s ease;
 }
 
+.theme-settings-switch > span {
+  top: 2px;
+  left: 2px;
+  display: inline-flex;
+  width: 14px;
+  height: 14px;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0;
+  color: var(--text-secondary);
+  background: transparent;
+  transition: color 0.16s ease, transform 0.16s ease;
+}
+
+.theme-switch-icon {
+  width: 12px;
+  height: 12px;
+  color: currentColor;
+  font-size: 12px;
+}
+
 .settings-menu-item.is-active .settings-switch {
   background: var(--accent-color);
 }
@@ -2522,6 +2543,11 @@ body.document-sidebar-collapsed .document-sidebar {
   transform: translateX(14px);
 }
 
+.settings-menu-item.is-active .theme-settings-switch > span {
+  color: #fff;
+  background: transparent;
+}
+
 .settings-language-dropdown {
   width: 100%;
 }
@@ -11117,6 +11143,11 @@ html[data-theme="dark"] .mermaid svg {
   transform: translateX(14px);
 }
 
+.mobile-settings-toggle.is-active .theme-settings-switch > span {
+  color: #fff;
+  background: transparent;
+}
+
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
 .mobile-settings-toggle.is-active .mobile-menu-item-label > i {
   color: var(--accent-color);
diff --git a/tests/e2e/responsive-storage.spec.js b/tests/e2e/responsive-storage.spec.js
index c5638b2a..b394ce8c 100644
--- a/tests/e2e/responsive-storage.spec.js
+++ b/tests/e2e/responsive-storage.spec.js
@@ -12,11 +12,27 @@ test('theme switching stores and restores the selected theme', async ({ page })
   await openApp(page);
 
   const initialTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
+  const initialThemeIcon = initialTheme === 'dark' ? 'lucide-moon' : 'lucide-sun-medium';
+  const toggledThemeIcon = initialTheme === 'dark' ? 'lucide-sun-medium' : 'lucide-moon';
   await page.getByRole('button', { name: 'Open workspace settings' }).click();
-  await page.locator('#theme-toggle').click();
+  const themeToggle = page.locator('#theme-toggle');
+  const themeSwitch = themeToggle.locator('.settings-switch');
+  const privateModeSwitch = page.locator('#private-mode-toggle .settings-switch');
+
+  await expect(themeToggle).toHaveClass(/settings-menu-item--toggle/);
+  await expect(themeToggle).toHaveAttribute('aria-pressed', String(initialTheme === 'dark'));
+  await expect(themeSwitch).toBeVisible();
+  await expect(page.locator('#theme-switch-icon')).toHaveClass(new RegExp(`\\b${initialThemeIcon}\\b`));
+  await expect(page.locator('#theme-switch-icon')).not.toHaveCSS('mask-image', 'none');
+  await expect(themeSwitch).toHaveCSS('width', await privateModeSwitch.evaluate(element => getComputedStyle(element).width));
+  await expect(themeSwitch).toHaveCSS('height', await privateModeSwitch.evaluate(element => getComputedStyle(element).height));
+
+  await themeToggle.click();
   const toggledTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
 
   expect(toggledTheme).not.toBe(initialTheme);
+  await expect(themeToggle).toHaveAttribute('aria-pressed', String(toggledTheme === 'dark'));
+  await expect(page.locator('#theme-switch-icon')).toHaveClass(new RegExp(`\\b${toggledThemeIcon}\\b`));
   await expect.poll(() => page.evaluate(() => JSON.parse(localStorage.getItem('markdownViewerGlobalState') || '{}').theme)).toBe(toggledTheme);
 
   await page.reload();
@@ -364,6 +380,8 @@ test('mobile layout exposes menu controls at 375px width', async ({ page }) => {
   await expect(page.locator('#mobile-review-toggle')).toBeVisible();
   await expect(page.locator('#mobile-private-mode-toggle')).toBeVisible();
   await expect(page.locator('#mobile-theme-toggle .settings-switch')).toBeVisible();
+  await expect(page.locator('#mobile-theme-switch-icon')).toHaveClass(/lucide-(sun-medium|moon)/);
+  await expect(page.locator('#mobile-theme-switch-icon')).not.toHaveCSS('mask-image', 'none');
   await expect(page.locator('#mobile-private-mode-toggle .settings-switch')).toBeVisible();
   const settingsOrder = await page.locator('#mobile-menu-settings-panel > *').evaluateAll(elements =>
     elements.filter(element => element.matches('button, .mobile-menu-language')).map(element => element.id || element.className)

From d6f0359e2663efbb9a266337f96d891d9cf1a021 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 01:06:07 +0530
Subject: [PATCH 03/17] fix(theme): restore circular switch thumb

---
 desktop-app/resources/styles.css     | 20 ++++++--------------
 styles.css                           | 20 ++++++--------------
 tests/e2e/responsive-storage.spec.js |  2 ++
 3 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 72aae456..06c577fc 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -2514,24 +2514,18 @@ body.document-sidebar-collapsed .document-sidebar {
 }
 
 .theme-settings-switch > span {
-  top: 2px;
-  left: 2px;
   display: inline-flex;
-  width: 14px;
-  height: 14px;
   align-items: center;
   justify-content: center;
-  border-radius: 0;
-  color: var(--text-secondary);
-  background: transparent;
+  color: var(--bg-color);
   transition: color 0.16s ease, transform 0.16s ease;
 }
 
 .theme-switch-icon {
-  width: 12px;
-  height: 12px;
+  width: 8px;
+  height: 8px;
   color: currentColor;
-  font-size: 12px;
+  font-size: 8px;
 }
 
 .settings-menu-item.is-active .settings-switch {
@@ -2544,8 +2538,7 @@ body.document-sidebar-collapsed .document-sidebar {
 }
 
 .settings-menu-item.is-active .theme-settings-switch > span {
-  color: #fff;
-  background: transparent;
+  color: var(--bg-color);
 }
 
 .settings-language-dropdown {
@@ -11144,8 +11137,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .mobile-settings-toggle.is-active .theme-settings-switch > span {
-  color: #fff;
-  background: transparent;
+  color: var(--bg-color);
 }
 
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
diff --git a/styles.css b/styles.css
index 72aae456..06c577fc 100644
--- a/styles.css
+++ b/styles.css
@@ -2514,24 +2514,18 @@ body.document-sidebar-collapsed .document-sidebar {
 }
 
 .theme-settings-switch > span {
-  top: 2px;
-  left: 2px;
   display: inline-flex;
-  width: 14px;
-  height: 14px;
   align-items: center;
   justify-content: center;
-  border-radius: 0;
-  color: var(--text-secondary);
-  background: transparent;
+  color: var(--bg-color);
   transition: color 0.16s ease, transform 0.16s ease;
 }
 
 .theme-switch-icon {
-  width: 12px;
-  height: 12px;
+  width: 8px;
+  height: 8px;
   color: currentColor;
-  font-size: 12px;
+  font-size: 8px;
 }
 
 .settings-menu-item.is-active .settings-switch {
@@ -2544,8 +2538,7 @@ body.document-sidebar-collapsed .document-sidebar {
 }
 
 .settings-menu-item.is-active .theme-settings-switch > span {
-  color: #fff;
-  background: transparent;
+  color: var(--bg-color);
 }
 
 .settings-language-dropdown {
@@ -11144,8 +11137,7 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .mobile-settings-toggle.is-active .theme-settings-switch > span {
-  color: #fff;
-  background: transparent;
+  color: var(--bg-color);
 }
 
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
diff --git a/tests/e2e/responsive-storage.spec.js b/tests/e2e/responsive-storage.spec.js
index b394ce8c..7488bf13 100644
--- a/tests/e2e/responsive-storage.spec.js
+++ b/tests/e2e/responsive-storage.spec.js
@@ -26,6 +26,8 @@ test('theme switching stores and restores the selected theme', async ({ page })
   await expect(page.locator('#theme-switch-icon')).not.toHaveCSS('mask-image', 'none');
   await expect(themeSwitch).toHaveCSS('width', await privateModeSwitch.evaluate(element => getComputedStyle(element).width));
   await expect(themeSwitch).toHaveCSS('height', await privateModeSwitch.evaluate(element => getComputedStyle(element).height));
+  await expect(themeSwitch.locator(':scope > span')).toHaveCSS('border-radius', '50%');
+  await expect(themeSwitch.locator(':scope > span')).toHaveCSS('background-color', await privateModeSwitch.locator(':scope > span').evaluate(element => getComputedStyle(element).backgroundColor));
 
   await themeToggle.click();
   const toggledTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));

From e440d6093da2a2b9c6cd9ca50e27d3a503408dad Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 01:12:08 +0530
Subject: [PATCH 04/17] style(settings): enlarge mode switches

---
 desktop-app/resources/styles.css     | 18 +++++++++---------
 styles.css                           | 18 +++++++++---------
 tests/e2e/responsive-storage.spec.js |  2 ++
 3 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 06c577fc..5451c201 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -2495,8 +2495,8 @@ body.document-sidebar-collapsed .document-sidebar {
 
 .settings-switch {
   position: relative;
-  width: 32px;
-  height: 18px;
+  width: 40px;
+  height: 22px;
   border-radius: 999px;
   background: var(--button-active);
   transition: background-color 0.16s ease;
@@ -2506,8 +2506,8 @@ body.document-sidebar-collapsed .document-sidebar {
   position: absolute;
   top: 3px;
   left: 3px;
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
   border-radius: 50%;
   background: var(--text-secondary);
   transition: transform 0.16s ease, background-color 0.16s ease;
@@ -2522,10 +2522,10 @@ body.document-sidebar-collapsed .document-sidebar {
 }
 
 .theme-switch-icon {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
   color: currentColor;
-  font-size: 8px;
+  font-size: 10px;
 }
 
 .settings-menu-item.is-active .settings-switch {
@@ -2534,7 +2534,7 @@ body.document-sidebar-collapsed .document-sidebar {
 
 .settings-menu-item.is-active .settings-switch > span {
   background: #fff;
-  transform: translateX(14px);
+  transform: translateX(18px);
 }
 
 .settings-menu-item.is-active .theme-settings-switch > span {
@@ -11133,7 +11133,7 @@ html[data-theme="dark"] .mermaid svg {
 
 .mobile-settings-toggle.is-active .settings-switch > span {
   background: #fff;
-  transform: translateX(14px);
+  transform: translateX(18px);
 }
 
 .mobile-settings-toggle.is-active .theme-settings-switch > span {
diff --git a/styles.css b/styles.css
index 06c577fc..5451c201 100644
--- a/styles.css
+++ b/styles.css
@@ -2495,8 +2495,8 @@ body.document-sidebar-collapsed .document-sidebar {
 
 .settings-switch {
   position: relative;
-  width: 32px;
-  height: 18px;
+  width: 40px;
+  height: 22px;
   border-radius: 999px;
   background: var(--button-active);
   transition: background-color 0.16s ease;
@@ -2506,8 +2506,8 @@ body.document-sidebar-collapsed .document-sidebar {
   position: absolute;
   top: 3px;
   left: 3px;
-  width: 12px;
-  height: 12px;
+  width: 16px;
+  height: 16px;
   border-radius: 50%;
   background: var(--text-secondary);
   transition: transform 0.16s ease, background-color 0.16s ease;
@@ -2522,10 +2522,10 @@ body.document-sidebar-collapsed .document-sidebar {
 }
 
 .theme-switch-icon {
-  width: 8px;
-  height: 8px;
+  width: 10px;
+  height: 10px;
   color: currentColor;
-  font-size: 8px;
+  font-size: 10px;
 }
 
 .settings-menu-item.is-active .settings-switch {
@@ -2534,7 +2534,7 @@ body.document-sidebar-collapsed .document-sidebar {
 
 .settings-menu-item.is-active .settings-switch > span {
   background: #fff;
-  transform: translateX(14px);
+  transform: translateX(18px);
 }
 
 .settings-menu-item.is-active .theme-settings-switch > span {
@@ -11133,7 +11133,7 @@ html[data-theme="dark"] .mermaid svg {
 
 .mobile-settings-toggle.is-active .settings-switch > span {
   background: #fff;
-  transform: translateX(14px);
+  transform: translateX(18px);
 }
 
 .mobile-settings-toggle.is-active .theme-settings-switch > span {
diff --git a/tests/e2e/responsive-storage.spec.js b/tests/e2e/responsive-storage.spec.js
index 7488bf13..0956bde6 100644
--- a/tests/e2e/responsive-storage.spec.js
+++ b/tests/e2e/responsive-storage.spec.js
@@ -22,6 +22,8 @@ test('theme switching stores and restores the selected theme', async ({ page })
   await expect(themeToggle).toHaveClass(/settings-menu-item--toggle/);
   await expect(themeToggle).toHaveAttribute('aria-pressed', String(initialTheme === 'dark'));
   await expect(themeSwitch).toBeVisible();
+  await expect(themeSwitch).toHaveCSS('width', '40px');
+  await expect(themeSwitch).toHaveCSS('height', '22px');
   await expect(page.locator('#theme-switch-icon')).toHaveClass(new RegExp(`\\b${initialThemeIcon}\\b`));
   await expect(page.locator('#theme-switch-icon')).not.toHaveCSS('mask-image', 'none');
   await expect(themeSwitch).toHaveCSS('width', await privateModeSwitch.evaluate(element => getComputedStyle(element).width));

From ab42414aee04e554040de790569fa8d636f3aecb Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 01:19:08 +0530
Subject: [PATCH 05/17] style(theme): invert switch thumb palette

---
 desktop-app/resources/styles.css     | 9 ++++++---
 styles.css                           | 9 ++++++---
 tests/e2e/responsive-storage.spec.js | 5 ++++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 5451c201..73e4d10b 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -2517,7 +2517,8 @@ body.document-sidebar-collapsed .document-sidebar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--bg-color);
+  color: var(--text-color);
+  background: var(--bg-color);
   transition: color 0.16s ease, transform 0.16s ease;
 }
 
@@ -2538,7 +2539,8 @@ body.document-sidebar-collapsed .document-sidebar {
 }
 
 .settings-menu-item.is-active .theme-settings-switch > span {
-  color: var(--bg-color);
+  color: var(--text-color);
+  background: var(--bg-color);
 }
 
 .settings-language-dropdown {
@@ -11137,7 +11139,8 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .mobile-settings-toggle.is-active .theme-settings-switch > span {
-  color: var(--bg-color);
+  color: var(--text-color);
+  background: var(--bg-color);
 }
 
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
diff --git a/styles.css b/styles.css
index 5451c201..73e4d10b 100644
--- a/styles.css
+++ b/styles.css
@@ -2517,7 +2517,8 @@ body.document-sidebar-collapsed .document-sidebar {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  color: var(--bg-color);
+  color: var(--text-color);
+  background: var(--bg-color);
   transition: color 0.16s ease, transform 0.16s ease;
 }
 
@@ -2538,7 +2539,8 @@ body.document-sidebar-collapsed .document-sidebar {
 }
 
 .settings-menu-item.is-active .theme-settings-switch > span {
-  color: var(--bg-color);
+  color: var(--text-color);
+  background: var(--bg-color);
 }
 
 .settings-language-dropdown {
@@ -11137,7 +11139,8 @@ html[data-theme="dark"] .mermaid svg {
 }
 
 .mobile-settings-toggle.is-active .theme-settings-switch > span {
-  color: var(--bg-color);
+  color: var(--text-color);
+  background: var(--bg-color);
 }
 
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
diff --git a/tests/e2e/responsive-storage.spec.js b/tests/e2e/responsive-storage.spec.js
index 0956bde6..c7c7c8d4 100644
--- a/tests/e2e/responsive-storage.spec.js
+++ b/tests/e2e/responsive-storage.spec.js
@@ -29,7 +29,8 @@ test('theme switching stores and restores the selected theme', async ({ page })
   await expect(themeSwitch).toHaveCSS('width', await privateModeSwitch.evaluate(element => getComputedStyle(element).width));
   await expect(themeSwitch).toHaveCSS('height', await privateModeSwitch.evaluate(element => getComputedStyle(element).height));
   await expect(themeSwitch.locator(':scope > span')).toHaveCSS('border-radius', '50%');
-  await expect(themeSwitch.locator(':scope > span')).toHaveCSS('background-color', await privateModeSwitch.locator(':scope > span').evaluate(element => getComputedStyle(element).backgroundColor));
+  await expect(themeSwitch.locator(':scope > span')).toHaveCSS('background-color', await page.locator('body').evaluate(element => getComputedStyle(element).backgroundColor));
+  await expect(page.locator('#theme-switch-icon')).toHaveCSS('color', await page.locator('body').evaluate(element => getComputedStyle(element).color));
 
   await themeToggle.click();
   const toggledTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
@@ -37,6 +38,8 @@ test('theme switching stores and restores the selected theme', async ({ page })
   expect(toggledTheme).not.toBe(initialTheme);
   await expect(themeToggle).toHaveAttribute('aria-pressed', String(toggledTheme === 'dark'));
   await expect(page.locator('#theme-switch-icon')).toHaveClass(new RegExp(`\\b${toggledThemeIcon}\\b`));
+  await expect(themeSwitch.locator(':scope > span')).toHaveCSS('background-color', await page.locator('body').evaluate(element => getComputedStyle(element).backgroundColor));
+  await expect(page.locator('#theme-switch-icon')).toHaveCSS('color', await page.locator('body').evaluate(element => getComputedStyle(element).color));
   await expect.poll(() => page.evaluate(() => JSON.parse(localStorage.getItem('markdownViewerGlobalState') || '{}').theme)).toBe(toggledTheme);
 
   await page.reload();

From 55269f977f345aec37a8806b897aea851d03260e Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 01:25:00 +0530
Subject: [PATCH 06/17] style(settings): refine dark switch states

---
 desktop-app/resources/styles.css     | 16 +++++++++++++---
 styles.css                           | 16 +++++++++++++---
 tests/e2e/responsive-storage.spec.js | 20 ++++++++++++++++++++
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 73e4d10b..b21a304f 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -2523,10 +2523,15 @@ body.document-sidebar-collapsed .document-sidebar {
 }
 
 .theme-switch-icon {
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   color: currentColor;
-  font-size: 10px;
+  font-size: 12px;
+  filter:
+    drop-shadow(0.35px 0 0 currentColor)
+    drop-shadow(-0.35px 0 0 currentColor)
+    drop-shadow(0 0.35px 0 currentColor)
+    drop-shadow(0 -0.35px 0 currentColor);
 }
 
 .settings-menu-item.is-active .settings-switch {
@@ -11143,6 +11148,11 @@ html[data-theme="dark"] .mermaid svg {
   background: var(--bg-color);
 }
 
+html[data-theme="dark"] .settings-menu-item.is-active .settings-switch,
+html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch {
+  background: var(--button-active);
+}
+
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
 .mobile-settings-toggle.is-active .mobile-menu-item-label > i {
   color: var(--accent-color);
diff --git a/styles.css b/styles.css
index 73e4d10b..b21a304f 100644
--- a/styles.css
+++ b/styles.css
@@ -2523,10 +2523,15 @@ body.document-sidebar-collapsed .document-sidebar {
 }
 
 .theme-switch-icon {
-  width: 10px;
-  height: 10px;
+  width: 12px;
+  height: 12px;
   color: currentColor;
-  font-size: 10px;
+  font-size: 12px;
+  filter:
+    drop-shadow(0.35px 0 0 currentColor)
+    drop-shadow(-0.35px 0 0 currentColor)
+    drop-shadow(0 0.35px 0 currentColor)
+    drop-shadow(0 -0.35px 0 currentColor);
 }
 
 .settings-menu-item.is-active .settings-switch {
@@ -11143,6 +11148,11 @@ html[data-theme="dark"] .mermaid svg {
   background: var(--bg-color);
 }
 
+html[data-theme="dark"] .settings-menu-item.is-active .settings-switch,
+html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch {
+  background: var(--button-active);
+}
+
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
 .mobile-settings-toggle.is-active .mobile-menu-item-label > i {
   color: var(--accent-color);
diff --git a/tests/e2e/responsive-storage.spec.js b/tests/e2e/responsive-storage.spec.js
index c7c7c8d4..ce77b6c4 100644
--- a/tests/e2e/responsive-storage.spec.js
+++ b/tests/e2e/responsive-storage.spec.js
@@ -47,6 +47,26 @@ test('theme switching stores and restores the selected theme', async ({ page })
   await expect.poll(() => page.evaluate(() => document.documentElement.getAttribute('data-theme'))).toBe(toggledTheme);
 });
 
+test('dark mode keeps active settings switches dark and uses a heavier theme glyph', async ({ page }) => {
+  await page.emulateMedia({ colorScheme: 'dark' });
+  await openApp(page);
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
+
+  await page.getByRole('button', { name: 'Open workspace settings' }).click();
+  const themeSwitch = page.locator('#theme-toggle .settings-switch');
+  const privateModeToggle = page.locator('#private-mode-toggle');
+  const privateModeSwitch = privateModeToggle.locator('.settings-switch');
+  const darkTrackColor = await privateModeSwitch.evaluate(element => getComputedStyle(element).backgroundColor);
+
+  await expect(themeSwitch).toHaveCSS('background-color', darkTrackColor);
+  await privateModeToggle.click();
+  await expect(privateModeToggle).toHaveAttribute('aria-pressed', 'true');
+  await expect(privateModeSwitch).toHaveCSS('background-color', darkTrackColor);
+  await expect(page.locator('#theme-switch-icon')).toHaveCSS('width', '12px');
+  await expect(page.locator('#theme-switch-icon')).toHaveCSS('height', '12px');
+  await expect(page.locator('#theme-switch-icon')).not.toHaveCSS('filter', 'none');
+});
+
 test('document tabs persist across reload in normal mode', async ({ page }) => {
   await openApp(page);
   await setEditorContent(page, '# Persistence Check\n\nSaved locally.');

From c25482202e9b27a4b2976d860efe338b5366b9f9 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 01:36:56 +0530
Subject: [PATCH 07/17] style(settings): align mode switch icons

---
 assets/lucide-icons.css              |  1 -
 desktop-app/resources/index.html     | 10 +++++-----
 desktop-app/resources/js/script.js   |  6 +++---
 desktop-app/resources/styles.css     |  8 ++++----
 index.html                           | 10 +++++-----
 script.js                            |  6 +++---
 styles.css                           |  8 ++++----
 tests/e2e/responsive-storage.spec.js | 13 ++++++++++---
 8 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/assets/lucide-icons.css b/assets/lucide-icons.css
index 73a0a336..dda69892 100644
--- a/assets/lucide-icons.css
+++ b/assets/lucide-icons.css
@@ -133,7 +133,6 @@
 .lucide-star-filled { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc3RhciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0iYmxhY2siIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiID4gPHBhdGggZD0iTTExLjUyNSAyLjI5NWEuNTMuNTMgMCAwIDEgLjk1IDBsMi4zMSA0LjY3OWEyLjEyMyAyLjEyMyAwIDAgMCAxLjU5NSAxLjE2bDUuMTY2Ljc1NmEuNTMuNTMgMCAwIDEgLjI5NC45MDRsLTMuNzM2IDMuNjM4YTIuMTIzIDIuMTIzIDAgMCAwLS42MTEgMS44NzhsLjg4MiA1LjE0YS41My41MyAwIDAgMS0uNzcxLjU2bC00LjYxOC0yLjQyOGEyLjEyMiAyLjEyMiAwIDAgMC0xLjk3MyAwTDYuMzk2IDIxLjAxYS41My41MyAwIDAgMS0uNzctLjU2bC44ODEtNS4xMzlhMi4xMjIgMi4xMjIgMCAwIDAtLjYxMS0xLjg3OUwyLjE2IDkuNzk1YS41My41MyAwIDAgMSAuMjk0LS45MDZsNS4xNjUtLjc1NWEyLjEyMiAyLjEyMiAwIDAgMCAxLjU5Ny0xLjE2eiIgLz4gPC9zdmc+"); }
 .lucide-strikethrough { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc3RyaWtldGhyb3VnaCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPiA8cGF0aCBkPSJNMTYgNEg5YTMgMyAwIDAgMC0yLjgzIDQiIC8+IDxwYXRoIGQ9Ik0xNCAxMmE0IDQgMCAwIDEgMCA4SDYiIC8+IDxsaW5lIHgxPSI0IiB4Mj0iMjAiIHkxPSIxMiIgeTI9IjEyIiAvPiA8L3N2Zz4="); }
 .lucide-sun { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc3VuIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiA+IDxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjQiIC8+IDxwYXRoIGQ9Ik0xMiAydjIiIC8+IDxwYXRoIGQ9Ik0xMiAyMHYyIiAvPiA8cGF0aCBkPSJtNC45MyA0LjkzIDEuNDEgMS40MSIgLz4gPHBhdGggZD0ibTE3LjY2IDE3LjY2IDEuNDEgMS40MSIgLz4gPHBhdGggZD0iTTIgMTJoMiIgLz4gPHBhdGggZD0iTTIwIDEyaDIiIC8+IDxwYXRoIGQ9Im02LjM0IDE3LjY2LTEuNDEgMS40MSIgLz4gPHBhdGggZD0ibTE5LjA3IDQuOTMtMS40MSAxLjQxIiAvPiA8L3N2Zz4="); }
-.lucide-sun-medium { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtc3VuLW1lZGl1bSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPiA8Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI0IiAvPiA8cGF0aCBkPSJNMTIgM3YxIiAvPiA8cGF0aCBkPSJNMTIgMjB2MSIgLz4gPHBhdGggZD0iTTMgMTJoMSIgLz4gPHBhdGggZD0iTTIwIDEyaDEiIC8+IDxwYXRoIGQ9Im0xOC4zNjQgNS42MzYtLjcwNy43MDciIC8+IDxwYXRoIGQ9Im02LjM0MyAxNy42NTctLjcwNy43MDciIC8+IDxwYXRoIGQ9Im01LjYzNiA1LjYzNi43MDcuNzA3IiAvPiA8cGF0aCBkPSJtMTcuNjU3IDE3LjY1Ny43MDcuNzA3IiAvPiA8L3N2Zz4="); }
 .lucide-table-2 { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdGFibGUtMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPiA8cGF0aCBkPSJNOSAzSDVhMiAyIDAgMCAwLTIgMnY0bTYtNmgxMGEyIDIgMCAwIDEgMiAydjRNOSAzdjE4bTAgMGgxMGEyIDIgMCAwIDAgMi0yVjlNOSAyMUg1YTIgMiAwIDAgMS0yLTJWOW0wIDBoMTgiIC8+IDwvc3ZnPg=="); }
 .lucide-trash-2 { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdHJhc2gtMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJibGFjayIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgPiA8cGF0aCBkPSJNMTAgMTF2NiIgLz4gPHBhdGggZD0iTTE0IDExdjYiIC8+IDxwYXRoIGQ9Ik0xOSA2djE0YTIgMiAwIDAgMS0yIDJIN2EyIDIgMCAwIDEtMi0yVjYiIC8+IDxwYXRoIGQ9Ik0zIDZoMTgiIC8+IDxwYXRoIGQ9Ik04IDZWNGEyIDIgMCAwIDEgMi0yaDRhMiAyIDAgMCAxIDIgMnYyIiAvPiA8L3N2Zz4="); }
 .lucide-triangle-alert { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+IDxzdmcgY2xhc3M9Imx1Y2lkZSBsdWNpZGUtdHJpYW5nbGUtYWxlcnQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiID4gPHBhdGggZD0ibTIxLjczIDE4LTgtMTRhMiAyIDAgMCAwLTMuNDggMGwtOCAxNEEyIDIgMCAwIDAgNCAyMWgxNmEyIDIgMCAwIDAgMS43My0zIiAvPiA8cGF0aCBkPSJNMTIgOXY0IiAvPiA8cGF0aCBkPSJNMTIgMTdoLjAxIiAvPiA8L3N2Zz4="); }
diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index de933f41..0e057069 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -123,7 +123,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                                 <strong>Workspace settings</strong>
                             </div>
                             <button id="theme-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle appearance">
-                                <i id="theme-toggle-icon" class="lucide lucide-sun-medium" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span><span class="settings-switch theme-settings-switch" aria-hidden="true"><span><i id="theme-switch-icon" class="lucide lucide-sun-medium theme-switch-icon"></i></span></span>
+                                <i id="theme-toggle-icon" class="lucide lucide-sun" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span>
                             </button>
                             <div class="dropdown dropstart settings-language-dropdown">
                                 <button class="settings-menu-item app-menu-item dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="Switch language">
@@ -149,7 +149,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                             </div>
                             <div class="settings-menu-divider" role="separator"></div>
                             <button id="private-mode-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle private mode">
-                                <i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch" aria-hidden="true"><span></span></span>
+                                <i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="private-mode-switch-icon" class="lucide lucide-hat-glasses settings-switch-icon"></i></span></span>
                             </button>
                             <button id="storage-settings-button" class="settings-menu-item app-menu-item" type="button" title="Storage and backup">
                                 <i class="lucide lucide-box" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Storage and Backup</span><span class="app-menu-description">Back up or restore your workspace</span></span>
@@ -278,8 +278,8 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                     </button>
                                     <div id="mobile-menu-settings-panel" class="mobile-menu-section-panel" data-mobile-menu-section hidden>
                                         <button id="mobile-theme-toggle" class="mobile-menu-item mobile-settings-item mobile-settings-toggle" type="button" aria-pressed="false" title="Use dark mode">
-                                            <span class="mobile-menu-item-label"><i id="mobile-theme-icon" class="lucide lucide-sun-medium" aria-hidden="true"></i><span>Theme</span></span>
-                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch theme-settings-switch" aria-hidden="true"><span><i id="mobile-theme-switch-icon" class="lucide lucide-sun-medium theme-switch-icon"></i></span></span></span>
+                                            <span class="mobile-menu-item-label"><i id="mobile-theme-icon" class="lucide lucide-sun" aria-hidden="true"></i><span>Theme</span></span>
+                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="mobile-theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span></span>
                                         </button>
                                         <div class="mobile-menu-language dropdown w-100">
                                             <button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -304,7 +304,7 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                             </ul>
                                         </div>
                                         <button id="mobile-private-mode-toggle" class="mobile-menu-item mobile-settings-item mobile-settings-toggle" type="button" aria-pressed="false" title="Turn private mode on">
-                                            <span class="mobile-menu-item-label"><i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span>Private mode</span></span><span class="settings-switch" aria-hidden="true"><span></span></span>
+                                            <span class="mobile-menu-item-label"><i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span>Private mode</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="mobile-private-mode-switch-icon" class="lucide lucide-hat-glasses settings-switch-icon"></i></span></span>
                                         </button>
                                         <button id="mobile-storage-settings-button" class="mobile-menu-item mobile-settings-item" type="button" title="Storage and backup">
                                             <span class="mobile-menu-item-label"><i class="lucide lucide-box" aria-hidden="true"></i><span>Storage and Backup</span></span>
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index c7caf716..7faa4b60 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -1583,13 +1583,13 @@ document.addEventListener("DOMContentLoaded", async function () {
 
   function updateThemeToggleUI(theme) {
     const darkModeEnabled = theme === "dark";
-    const themeIconName = darkModeEnabled ? 'moon' : 'sun-medium';
+    const themeIconName = darkModeEnabled ? 'moon' : 'sun';
     if (themeToggle) {
       const description = document.getElementById('theme-toggle-description');
       themeToggle.classList.toggle('is-active', darkModeEnabled);
       themeToggle.setAttribute('aria-pressed', String(darkModeEnabled));
       if (themeToggleIcon) themeToggleIcon.className = 'lucide lucide-' + themeIconName;
-      if (themeSwitchIcon) themeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' theme-switch-icon';
+      if (themeSwitchIcon) themeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' settings-switch-icon';
       if (description) description.textContent = darkModeEnabled ? 'Switch to light appearance' : 'Switch to dark appearance';
       themeToggle.setAttribute('aria-label', darkModeEnabled ? 'Use light appearance' : 'Use dark appearance');
       themeToggle.setAttribute('title', darkModeEnabled ? 'Use light appearance' : 'Use dark appearance');
@@ -1600,7 +1600,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       mobileThemeToggle.setAttribute('aria-label', darkModeEnabled ? 'Use light mode' : 'Use dark mode');
       mobileThemeToggle.setAttribute('title', darkModeEnabled ? 'Use light mode' : 'Use dark mode');
       if (mobileThemeIcon) mobileThemeIcon.className = 'lucide lucide-' + themeIconName;
-      if (mobileThemeSwitchIcon) mobileThemeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' theme-switch-icon';
+      if (mobileThemeSwitchIcon) mobileThemeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' settings-switch-icon';
       if (mobileThemeStatus) mobileThemeStatus.textContent = darkModeEnabled ? 'Dark mode' : 'Light mode';
     }
   }
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index b21a304f..65c5dbaa 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -2513,7 +2513,7 @@ body.document-sidebar-collapsed .document-sidebar {
   transition: transform 0.16s ease, background-color 0.16s ease;
 }
 
-.theme-settings-switch > span {
+.icon-settings-switch > span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2522,7 +2522,7 @@ body.document-sidebar-collapsed .document-sidebar {
   transition: color 0.16s ease, transform 0.16s ease;
 }
 
-.theme-switch-icon {
+.settings-switch-icon {
   width: 12px;
   height: 12px;
   color: currentColor;
@@ -2543,7 +2543,7 @@ body.document-sidebar-collapsed .document-sidebar {
   transform: translateX(18px);
 }
 
-.settings-menu-item.is-active .theme-settings-switch > span {
+.settings-menu-item.is-active .icon-settings-switch > span {
   color: var(--text-color);
   background: var(--bg-color);
 }
@@ -11143,7 +11143,7 @@ html[data-theme="dark"] .mermaid svg {
   transform: translateX(18px);
 }
 
-.mobile-settings-toggle.is-active .theme-settings-switch > span {
+.mobile-settings-toggle.is-active .icon-settings-switch > span {
   color: var(--text-color);
   background: var(--bg-color);
 }
diff --git a/index.html b/index.html
index 67554f70..c940a4a6 100644
--- a/index.html
+++ b/index.html
@@ -216,7 +216,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                                 <strong>Workspace settings</strong>
                             </div>
                             <button id="theme-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle appearance">
-                                <i id="theme-toggle-icon" class="lucide lucide-sun-medium" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span><span class="settings-switch theme-settings-switch" aria-hidden="true"><span><i id="theme-switch-icon" class="lucide lucide-sun-medium theme-switch-icon"></i></span></span>
+                                <i id="theme-toggle-icon" class="lucide lucide-sun" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span>
                             </button>
                             <div class="dropdown dropstart settings-language-dropdown">
                                 <button class="settings-menu-item app-menu-item dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="Switch language">
@@ -242,7 +242,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                             </div>
                             <div class="settings-menu-divider" role="separator"></div>
                             <button id="private-mode-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle private mode">
-                                <i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch" aria-hidden="true"><span></span></span>
+                                <i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="private-mode-switch-icon" class="lucide lucide-hat-glasses settings-switch-icon"></i></span></span>
                             </button>
                             <button id="storage-settings-button" class="settings-menu-item app-menu-item" type="button" title="Storage and backup">
                                 <i class="lucide lucide-box" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Storage and Backup</span><span class="app-menu-description">Back up or restore your workspace</span></span>
@@ -371,8 +371,8 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                     </button>
                                     <div id="mobile-menu-settings-panel" class="mobile-menu-section-panel" data-mobile-menu-section hidden>
                                         <button id="mobile-theme-toggle" class="mobile-menu-item mobile-settings-item mobile-settings-toggle" type="button" aria-pressed="false" title="Use dark mode">
-                                            <span class="mobile-menu-item-label"><i id="mobile-theme-icon" class="lucide lucide-sun-medium" aria-hidden="true"></i><span>Theme</span></span>
-                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch theme-settings-switch" aria-hidden="true"><span><i id="mobile-theme-switch-icon" class="lucide lucide-sun-medium theme-switch-icon"></i></span></span></span>
+                                            <span class="mobile-menu-item-label"><i id="mobile-theme-icon" class="lucide lucide-sun" aria-hidden="true"></i><span>Theme</span></span>
+                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="mobile-theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span></span>
                                         </button>
                                         <div class="mobile-menu-language dropdown w-100">
                                             <button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -397,7 +397,7 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                             </ul>
                                         </div>
                                         <button id="mobile-private-mode-toggle" class="mobile-menu-item mobile-settings-item mobile-settings-toggle" type="button" aria-pressed="false" title="Turn private mode on">
-                                            <span class="mobile-menu-item-label"><i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span>Private mode</span></span><span class="settings-switch" aria-hidden="true"><span></span></span>
+                                            <span class="mobile-menu-item-label"><i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span>Private mode</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="mobile-private-mode-switch-icon" class="lucide lucide-hat-glasses settings-switch-icon"></i></span></span>
                                         </button>
                                         <button id="mobile-storage-settings-button" class="mobile-menu-item mobile-settings-item" type="button" title="Storage and backup">
                                             <span class="mobile-menu-item-label"><i class="lucide lucide-box" aria-hidden="true"></i><span>Storage and Backup</span></span>
diff --git a/script.js b/script.js
index c7caf716..7faa4b60 100644
--- a/script.js
+++ b/script.js
@@ -1583,13 +1583,13 @@ document.addEventListener("DOMContentLoaded", async function () {
 
   function updateThemeToggleUI(theme) {
     const darkModeEnabled = theme === "dark";
-    const themeIconName = darkModeEnabled ? 'moon' : 'sun-medium';
+    const themeIconName = darkModeEnabled ? 'moon' : 'sun';
     if (themeToggle) {
       const description = document.getElementById('theme-toggle-description');
       themeToggle.classList.toggle('is-active', darkModeEnabled);
       themeToggle.setAttribute('aria-pressed', String(darkModeEnabled));
       if (themeToggleIcon) themeToggleIcon.className = 'lucide lucide-' + themeIconName;
-      if (themeSwitchIcon) themeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' theme-switch-icon';
+      if (themeSwitchIcon) themeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' settings-switch-icon';
       if (description) description.textContent = darkModeEnabled ? 'Switch to light appearance' : 'Switch to dark appearance';
       themeToggle.setAttribute('aria-label', darkModeEnabled ? 'Use light appearance' : 'Use dark appearance');
       themeToggle.setAttribute('title', darkModeEnabled ? 'Use light appearance' : 'Use dark appearance');
@@ -1600,7 +1600,7 @@ document.addEventListener("DOMContentLoaded", async function () {
       mobileThemeToggle.setAttribute('aria-label', darkModeEnabled ? 'Use light mode' : 'Use dark mode');
       mobileThemeToggle.setAttribute('title', darkModeEnabled ? 'Use light mode' : 'Use dark mode');
       if (mobileThemeIcon) mobileThemeIcon.className = 'lucide lucide-' + themeIconName;
-      if (mobileThemeSwitchIcon) mobileThemeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' theme-switch-icon';
+      if (mobileThemeSwitchIcon) mobileThemeSwitchIcon.className = 'lucide lucide-' + themeIconName + ' settings-switch-icon';
       if (mobileThemeStatus) mobileThemeStatus.textContent = darkModeEnabled ? 'Dark mode' : 'Light mode';
     }
   }
diff --git a/styles.css b/styles.css
index b21a304f..65c5dbaa 100644
--- a/styles.css
+++ b/styles.css
@@ -2513,7 +2513,7 @@ body.document-sidebar-collapsed .document-sidebar {
   transition: transform 0.16s ease, background-color 0.16s ease;
 }
 
-.theme-settings-switch > span {
+.icon-settings-switch > span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2522,7 +2522,7 @@ body.document-sidebar-collapsed .document-sidebar {
   transition: color 0.16s ease, transform 0.16s ease;
 }
 
-.theme-switch-icon {
+.settings-switch-icon {
   width: 12px;
   height: 12px;
   color: currentColor;
@@ -2543,7 +2543,7 @@ body.document-sidebar-collapsed .document-sidebar {
   transform: translateX(18px);
 }
 
-.settings-menu-item.is-active .theme-settings-switch > span {
+.settings-menu-item.is-active .icon-settings-switch > span {
   color: var(--text-color);
   background: var(--bg-color);
 }
@@ -11143,7 +11143,7 @@ html[data-theme="dark"] .mermaid svg {
   transform: translateX(18px);
 }
 
-.mobile-settings-toggle.is-active .theme-settings-switch > span {
+.mobile-settings-toggle.is-active .icon-settings-switch > span {
   color: var(--text-color);
   background: var(--bg-color);
 }
diff --git a/tests/e2e/responsive-storage.spec.js b/tests/e2e/responsive-storage.spec.js
index ce77b6c4..9d8ba972 100644
--- a/tests/e2e/responsive-storage.spec.js
+++ b/tests/e2e/responsive-storage.spec.js
@@ -12,8 +12,8 @@ test('theme switching stores and restores the selected theme', async ({ page })
   await openApp(page);
 
   const initialTheme = await page.evaluate(() => document.documentElement.getAttribute('data-theme'));
-  const initialThemeIcon = initialTheme === 'dark' ? 'lucide-moon' : 'lucide-sun-medium';
-  const toggledThemeIcon = initialTheme === 'dark' ? 'lucide-sun-medium' : 'lucide-moon';
+  const initialThemeIcon = initialTheme === 'dark' ? 'lucide-moon' : 'lucide-sun';
+  const toggledThemeIcon = initialTheme === 'dark' ? 'lucide-sun' : 'lucide-moon';
   await page.getByRole('button', { name: 'Open workspace settings' }).click();
   const themeToggle = page.locator('#theme-toggle');
   const themeSwitch = themeToggle.locator('.settings-switch');
@@ -65,6 +65,11 @@ test('dark mode keeps active settings switches dark and uses a heavier theme gly
   await expect(page.locator('#theme-switch-icon')).toHaveCSS('width', '12px');
   await expect(page.locator('#theme-switch-icon')).toHaveCSS('height', '12px');
   await expect(page.locator('#theme-switch-icon')).not.toHaveCSS('filter', 'none');
+  await expect(page.locator('#private-mode-switch-icon')).toHaveClass(/lucide-hat-glasses/);
+  await expect(page.locator('#private-mode-switch-icon')).toHaveCSS('width', '12px');
+  await expect(page.locator('#private-mode-switch-icon')).toHaveCSS('height', '12px');
+  await expect(page.locator('#private-mode-switch-icon')).not.toHaveCSS('mask-image', 'none');
+  await expect(page.locator('#private-mode-switch-icon')).not.toHaveCSS('filter', 'none');
 });
 
 test('document tabs persist across reload in normal mode', async ({ page }) => {
@@ -407,9 +412,11 @@ test('mobile layout exposes menu controls at 375px width', async ({ page }) => {
   await expect(page.locator('#mobile-review-toggle')).toBeVisible();
   await expect(page.locator('#mobile-private-mode-toggle')).toBeVisible();
   await expect(page.locator('#mobile-theme-toggle .settings-switch')).toBeVisible();
-  await expect(page.locator('#mobile-theme-switch-icon')).toHaveClass(/lucide-(sun-medium|moon)/);
+  await expect(page.locator('#mobile-theme-switch-icon')).toHaveClass(/lucide-(sun|moon)/);
   await expect(page.locator('#mobile-theme-switch-icon')).not.toHaveCSS('mask-image', 'none');
   await expect(page.locator('#mobile-private-mode-toggle .settings-switch')).toBeVisible();
+  await expect(page.locator('#mobile-private-mode-switch-icon')).toHaveClass(/lucide-hat-glasses/);
+  await expect(page.locator('#mobile-private-mode-switch-icon')).not.toHaveCSS('mask-image', 'none');
   const settingsOrder = await page.locator('#mobile-menu-settings-panel > *').evaluateAll(elements =>
     elements.filter(element => element.matches('button, .mobile-menu-language')).map(element => element.id || element.className)
   );

From bbd627fd616f5dbcaeb16478e53688412bd0853c Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 01:44:55 +0530
Subject: [PATCH 08/17] style(settings): neutralize private mode toggle

---
 desktop-app/resources/index.html     |  8 ++++----
 desktop-app/resources/styles.css     | 11 ++++++++---
 index.html                           |  8 ++++----
 styles.css                           | 11 ++++++++---
 tests/e2e/responsive-storage.spec.js | 25 ++++++++++++++++++-------
 5 files changed, 42 insertions(+), 21 deletions(-)

diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index 0e057069..d638afa5 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -123,7 +123,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                                 <strong>Workspace settings</strong>
                             </div>
                             <button id="theme-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle appearance">
-                                <i id="theme-toggle-icon" class="lucide lucide-sun" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span>
+                                <i id="theme-toggle-icon" class="lucide lucide-sun" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span><span class="settings-switch themed-settings-switch" aria-hidden="true"><span><i id="theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span>
                             </button>
                             <div class="dropdown dropstart settings-language-dropdown">
                                 <button class="settings-menu-item app-menu-item dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="Switch language">
@@ -149,7 +149,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                             </div>
                             <div class="settings-menu-divider" role="separator"></div>
                             <button id="private-mode-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle private mode">
-                                <i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="private-mode-switch-icon" class="lucide lucide-hat-glasses settings-switch-icon"></i></span></span>
+                                <i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch themed-settings-switch" aria-hidden="true"><span></span></span>
                             </button>
                             <button id="storage-settings-button" class="settings-menu-item app-menu-item" type="button" title="Storage and backup">
                                 <i class="lucide lucide-box" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Storage and Backup</span><span class="app-menu-description">Back up or restore your workspace</span></span>
@@ -279,7 +279,7 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                     <div id="mobile-menu-settings-panel" class="mobile-menu-section-panel" data-mobile-menu-section hidden>
                                         <button id="mobile-theme-toggle" class="mobile-menu-item mobile-settings-item mobile-settings-toggle" type="button" aria-pressed="false" title="Use dark mode">
                                             <span class="mobile-menu-item-label"><i id="mobile-theme-icon" class="lucide lucide-sun" aria-hidden="true"></i><span>Theme</span></span>
-                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="mobile-theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span></span>
+                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch themed-settings-switch" aria-hidden="true"><span><i id="mobile-theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span></span>
                                         </button>
                                         <div class="mobile-menu-language dropdown w-100">
                                             <button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -304,7 +304,7 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                             </ul>
                                         </div>
                                         <button id="mobile-private-mode-toggle" class="mobile-menu-item mobile-settings-item mobile-settings-toggle" type="button" aria-pressed="false" title="Turn private mode on">
-                                            <span class="mobile-menu-item-label"><i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span>Private mode</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="mobile-private-mode-switch-icon" class="lucide lucide-hat-glasses settings-switch-icon"></i></span></span>
+                                            <span class="mobile-menu-item-label"><i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span>Private mode</span></span><span class="settings-switch themed-settings-switch" aria-hidden="true"><span></span></span>
                                         </button>
                                         <button id="mobile-storage-settings-button" class="mobile-menu-item mobile-settings-item" type="button" title="Storage and backup">
                                             <span class="mobile-menu-item-label"><i class="lucide lucide-box" aria-hidden="true"></i><span>Storage and Backup</span></span>
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 65c5dbaa..2125dee4 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -2513,7 +2513,7 @@ body.document-sidebar-collapsed .document-sidebar {
   transition: transform 0.16s ease, background-color 0.16s ease;
 }
 
-.icon-settings-switch > span {
+.themed-settings-switch > span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2543,7 +2543,7 @@ body.document-sidebar-collapsed .document-sidebar {
   transform: translateX(18px);
 }
 
-.settings-menu-item.is-active .icon-settings-switch > span {
+.settings-menu-item.is-active .themed-settings-switch > span {
   color: var(--text-color);
   background: var(--bg-color);
 }
@@ -11143,7 +11143,7 @@ html[data-theme="dark"] .mermaid svg {
   transform: translateX(18px);
 }
 
-.mobile-settings-toggle.is-active .icon-settings-switch > span {
+.mobile-settings-toggle.is-active .themed-settings-switch > span {
   color: var(--text-color);
   background: var(--bg-color);
 }
@@ -11153,6 +11153,11 @@ html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch {
   background: var(--button-active);
 }
 
+#private-mode-toggle.is-active .settings-switch,
+#mobile-private-mode-toggle.is-active .settings-switch {
+  background: var(--button-active);
+}
+
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
 .mobile-settings-toggle.is-active .mobile-menu-item-label > i {
   color: var(--accent-color);
diff --git a/index.html b/index.html
index c940a4a6..596b690e 100644
--- a/index.html
+++ b/index.html
@@ -216,7 +216,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                                 <strong>Workspace settings</strong>
                             </div>
                             <button id="theme-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle appearance">
-                                <i id="theme-toggle-icon" class="lucide lucide-sun" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span>
+                                <i id="theme-toggle-icon" class="lucide lucide-sun" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Appearance</span><span id="theme-toggle-description" class="app-menu-description">Switch to dark appearance</span></span><span class="settings-switch themed-settings-switch" aria-hidden="true"><span><i id="theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span>
                             </button>
                             <div class="dropdown dropstart settings-language-dropdown">
                                 <button class="settings-menu-item app-menu-item dropdown-toggle" type="button" id="languageDropdown" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" title="Switch language">
@@ -242,7 +242,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                             </div>
                             <div class="settings-menu-divider" role="separator"></div>
                             <button id="private-mode-toggle" class="settings-menu-item app-menu-item settings-menu-item--toggle" type="button" aria-pressed="false" title="Toggle private mode">
-                                <i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="private-mode-switch-icon" class="lucide lucide-hat-glasses settings-switch-icon"></i></span></span>
+                                <i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Private mode</span><span id="private-mode-description" class="app-menu-description">Data is stored locally</span></span><span class="settings-switch themed-settings-switch" aria-hidden="true"><span></span></span>
                             </button>
                             <button id="storage-settings-button" class="settings-menu-item app-menu-item" type="button" title="Storage and backup">
                                 <i class="lucide lucide-box" aria-hidden="true"></i><span class="app-menu-copy"><span class="app-menu-label">Storage and Backup</span><span class="app-menu-description">Back up or restore your workspace</span></span>
@@ -372,7 +372,7 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                     <div id="mobile-menu-settings-panel" class="mobile-menu-section-panel" data-mobile-menu-section hidden>
                                         <button id="mobile-theme-toggle" class="mobile-menu-item mobile-settings-item mobile-settings-toggle" type="button" aria-pressed="false" title="Use dark mode">
                                             <span class="mobile-menu-item-label"><i id="mobile-theme-icon" class="lucide lucide-sun" aria-hidden="true"></i><span>Theme</span></span>
-                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="mobile-theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span></span>
+                                            <span class="mobile-menu-trailing-control"><span id="mobile-theme-status" class="mobile-menu-item-status">Light mode</span><span class="settings-switch themed-settings-switch" aria-hidden="true"><span><i id="mobile-theme-switch-icon" class="lucide lucide-sun settings-switch-icon"></i></span></span></span>
                                         </button>
                                         <div class="mobile-menu-language dropdown w-100">
                                             <button class="mobile-menu-item w-100 text-start dropdown-toggle" type="button" id="mobileLanguageDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Switch Language">
@@ -397,7 +397,7 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                             </ul>
                                         </div>
                                         <button id="mobile-private-mode-toggle" class="mobile-menu-item mobile-settings-item mobile-settings-toggle" type="button" aria-pressed="false" title="Turn private mode on">
-                                            <span class="mobile-menu-item-label"><i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span>Private mode</span></span><span class="settings-switch icon-settings-switch" aria-hidden="true"><span><i id="mobile-private-mode-switch-icon" class="lucide lucide-hat-glasses settings-switch-icon"></i></span></span>
+                                            <span class="mobile-menu-item-label"><i class="lucide lucide-hat-glasses" aria-hidden="true"></i><span>Private mode</span></span><span class="settings-switch themed-settings-switch" aria-hidden="true"><span></span></span>
                                         </button>
                                         <button id="mobile-storage-settings-button" class="mobile-menu-item mobile-settings-item" type="button" title="Storage and backup">
                                             <span class="mobile-menu-item-label"><i class="lucide lucide-box" aria-hidden="true"></i><span>Storage and Backup</span></span>
diff --git a/styles.css b/styles.css
index 65c5dbaa..2125dee4 100644
--- a/styles.css
+++ b/styles.css
@@ -2513,7 +2513,7 @@ body.document-sidebar-collapsed .document-sidebar {
   transition: transform 0.16s ease, background-color 0.16s ease;
 }
 
-.icon-settings-switch > span {
+.themed-settings-switch > span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -2543,7 +2543,7 @@ body.document-sidebar-collapsed .document-sidebar {
   transform: translateX(18px);
 }
 
-.settings-menu-item.is-active .icon-settings-switch > span {
+.settings-menu-item.is-active .themed-settings-switch > span {
   color: var(--text-color);
   background: var(--bg-color);
 }
@@ -11143,7 +11143,7 @@ html[data-theme="dark"] .mermaid svg {
   transform: translateX(18px);
 }
 
-.mobile-settings-toggle.is-active .icon-settings-switch > span {
+.mobile-settings-toggle.is-active .themed-settings-switch > span {
   color: var(--text-color);
   background: var(--bg-color);
 }
@@ -11153,6 +11153,11 @@ html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch {
   background: var(--button-active);
 }
 
+#private-mode-toggle.is-active .settings-switch,
+#mobile-private-mode-toggle.is-active .settings-switch {
+  background: var(--button-active);
+}
+
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
 .mobile-settings-toggle.is-active .mobile-menu-item-label > i {
   color: var(--accent-color);
diff --git a/tests/e2e/responsive-storage.spec.js b/tests/e2e/responsive-storage.spec.js
index 9d8ba972..146a1b7c 100644
--- a/tests/e2e/responsive-storage.spec.js
+++ b/tests/e2e/responsive-storage.spec.js
@@ -65,11 +65,23 @@ test('dark mode keeps active settings switches dark and uses a heavier theme gly
   await expect(page.locator('#theme-switch-icon')).toHaveCSS('width', '12px');
   await expect(page.locator('#theme-switch-icon')).toHaveCSS('height', '12px');
   await expect(page.locator('#theme-switch-icon')).not.toHaveCSS('filter', 'none');
-  await expect(page.locator('#private-mode-switch-icon')).toHaveClass(/lucide-hat-glasses/);
-  await expect(page.locator('#private-mode-switch-icon')).toHaveCSS('width', '12px');
-  await expect(page.locator('#private-mode-switch-icon')).toHaveCSS('height', '12px');
-  await expect(page.locator('#private-mode-switch-icon')).not.toHaveCSS('mask-image', 'none');
-  await expect(page.locator('#private-mode-switch-icon')).not.toHaveCSS('filter', 'none');
+  await expect(privateModeSwitch.locator('.lucide')).toHaveCount(0);
+});
+
+test('light mode keeps active private mode neutral without an inner icon', async ({ page }) => {
+  await page.emulateMedia({ colorScheme: 'light' });
+  await openApp(page);
+  await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
+
+  await page.getByRole('button', { name: 'Open workspace settings' }).click();
+  const privateModeToggle = page.locator('#private-mode-toggle');
+  const privateModeSwitch = privateModeToggle.locator('.settings-switch');
+  const neutralTrackColor = await privateModeSwitch.evaluate(element => getComputedStyle(element).backgroundColor);
+
+  await privateModeToggle.click();
+  await expect(privateModeToggle).toHaveAttribute('aria-pressed', 'true');
+  await expect(privateModeSwitch).toHaveCSS('background-color', neutralTrackColor);
+  await expect(privateModeSwitch.locator('.lucide')).toHaveCount(0);
 });
 
 test('document tabs persist across reload in normal mode', async ({ page }) => {
@@ -415,8 +427,7 @@ test('mobile layout exposes menu controls at 375px width', async ({ page }) => {
   await expect(page.locator('#mobile-theme-switch-icon')).toHaveClass(/lucide-(sun|moon)/);
   await expect(page.locator('#mobile-theme-switch-icon')).not.toHaveCSS('mask-image', 'none');
   await expect(page.locator('#mobile-private-mode-toggle .settings-switch')).toBeVisible();
-  await expect(page.locator('#mobile-private-mode-switch-icon')).toHaveClass(/lucide-hat-glasses/);
-  await expect(page.locator('#mobile-private-mode-switch-icon')).not.toHaveCSS('mask-image', 'none');
+  await expect(page.locator('#mobile-private-mode-toggle .settings-switch .lucide')).toHaveCount(0);
   const settingsOrder = await page.locator('#mobile-menu-settings-panel > *').evaluateAll(elements =>
     elements.filter(element => element.matches('button, .mobile-menu-language')).map(element => element.id || element.className)
   );

From 1c03c2efceab298999651d0d5cd8019a266416a3 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 01:51:40 +0530
Subject: [PATCH 09/17] style(settings): restore private mode accent

---
 desktop-app/resources/styles.css     |  2 +-
 styles.css                           |  2 +-
 tests/e2e/responsive-storage.spec.js | 22 +++++++++++++++++-----
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 2125dee4..4315e3db 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -11155,7 +11155,7 @@ html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch {
 
 #private-mode-toggle.is-active .settings-switch,
 #mobile-private-mode-toggle.is-active .settings-switch {
-  background: var(--button-active);
+  background: var(--accent-color);
 }
 
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
diff --git a/styles.css b/styles.css
index 2125dee4..4315e3db 100644
--- a/styles.css
+++ b/styles.css
@@ -11155,7 +11155,7 @@ html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch {
 
 #private-mode-toggle.is-active .settings-switch,
 #mobile-private-mode-toggle.is-active .settings-switch {
-  background: var(--button-active);
+  background: var(--accent-color);
 }
 
 .mobile-menu-command.is-active .mobile-menu-item-label > i,
diff --git a/tests/e2e/responsive-storage.spec.js b/tests/e2e/responsive-storage.spec.js
index 146a1b7c..15c4341f 100644
--- a/tests/e2e/responsive-storage.spec.js
+++ b/tests/e2e/responsive-storage.spec.js
@@ -8,6 +8,17 @@ const {
   waitForAppReady
 } = require('../helpers/app');
 
+async function resolveCssColor(page, variableName) {
+  return page.evaluate(name => {
+    const probe = document.createElement('span');
+    probe.style.color = `var(${name})`;
+    document.body.appendChild(probe);
+    const color = getComputedStyle(probe).color;
+    probe.remove();
+    return color;
+  }, variableName);
+}
+
 test('theme switching stores and restores the selected theme', async ({ page }) => {
   await openApp(page);
 
@@ -47,7 +58,7 @@ test('theme switching stores and restores the selected theme', async ({ page })
   await expect.poll(() => page.evaluate(() => document.documentElement.getAttribute('data-theme'))).toBe(toggledTheme);
 });
 
-test('dark mode keeps active settings switches dark and uses a heavier theme glyph', async ({ page }) => {
+test('dark mode keeps the active theme switch dark and the private mode switch blue', async ({ page }) => {
   await page.emulateMedia({ colorScheme: 'dark' });
   await openApp(page);
   await expect(page.locator('html')).toHaveAttribute('data-theme', 'dark');
@@ -57,18 +68,19 @@ test('dark mode keeps active settings switches dark and uses a heavier theme gly
   const privateModeToggle = page.locator('#private-mode-toggle');
   const privateModeSwitch = privateModeToggle.locator('.settings-switch');
   const darkTrackColor = await privateModeSwitch.evaluate(element => getComputedStyle(element).backgroundColor);
+  const accentTrackColor = await resolveCssColor(page, '--accent-color');
 
   await expect(themeSwitch).toHaveCSS('background-color', darkTrackColor);
   await privateModeToggle.click();
   await expect(privateModeToggle).toHaveAttribute('aria-pressed', 'true');
-  await expect(privateModeSwitch).toHaveCSS('background-color', darkTrackColor);
+  await expect(privateModeSwitch).toHaveCSS('background-color', accentTrackColor);
   await expect(page.locator('#theme-switch-icon')).toHaveCSS('width', '12px');
   await expect(page.locator('#theme-switch-icon')).toHaveCSS('height', '12px');
   await expect(page.locator('#theme-switch-icon')).not.toHaveCSS('filter', 'none');
   await expect(privateModeSwitch.locator('.lucide')).toHaveCount(0);
 });
 
-test('light mode keeps active private mode neutral without an inner icon', async ({ page }) => {
+test('light mode uses the accent blue for active private mode without an inner icon', async ({ page }) => {
   await page.emulateMedia({ colorScheme: 'light' });
   await openApp(page);
   await expect(page.locator('html')).toHaveAttribute('data-theme', 'light');
@@ -76,11 +88,11 @@ test('light mode keeps active private mode neutral without an inner icon', async
   await page.getByRole('button', { name: 'Open workspace settings' }).click();
   const privateModeToggle = page.locator('#private-mode-toggle');
   const privateModeSwitch = privateModeToggle.locator('.settings-switch');
-  const neutralTrackColor = await privateModeSwitch.evaluate(element => getComputedStyle(element).backgroundColor);
+  const accentTrackColor = await resolveCssColor(page, '--accent-color');
 
   await privateModeToggle.click();
   await expect(privateModeToggle).toHaveAttribute('aria-pressed', 'true');
-  await expect(privateModeSwitch).toHaveCSS('background-color', neutralTrackColor);
+  await expect(privateModeSwitch).toHaveCSS('background-color', accentTrackColor);
   await expect(privateModeSwitch.locator('.lucide')).toHaveCount(0);
 });
 

From 4ea683fd82945d4eb1f6f6a93b25bf65fb0e19a3 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 02:22:15 +0530
Subject: [PATCH 10/17] style(header): reorder actions and remove brand icon

---
 desktop-app/resources/index.html           | 33 +++++++++++-----------
 desktop-app/resources/styles.css           | 10 -------
 index.html                                 | 33 +++++++++++-----------
 styles.css                                 | 10 -------
 tests/e2e/status-toolbar-followup.spec.js  |  6 ++--
 tests/e2e/tab-split-sidebar-update.spec.js |  6 ++--
 tests/e2e/ui-toolbar-redesign.spec.js      |  7 ++---
 7 files changed, 40 insertions(+), 65 deletions(-)

diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index d638afa5..438062b7 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -41,7 +41,6 @@
             <div class="container-fluid d-flex justify-content-between align-items-center header-container">
                 <!-- Left section: Application identity and GitHub -->
                 <div class="d-flex align-items-center header-left app-brand">
-                    <img class="app-brand-icon" src="assets/icon.jpg" width="32" height="32" alt="" aria-hidden="true" />
                     <div class="app-brand-copy">
                         <div class="app-brand-title-row">
                             <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markdown Editor with Live Preview</span></h1>
@@ -62,6 +61,9 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     </div>
                     <span class="header-toolbar-divider" aria-hidden="true"></span>
 
+                    <button id="toggle-sync" class="tool-button header-icon-command sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
+                        <i class="lucide lucide-refresh-cw" aria-hidden="true"></i>
+                    </button>
                     <div class="dropdown header-new-dropdown header-icon-dropdown">
                         <button class="tool-button header-icon-command dropdown-toggle" type="button" id="importDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Create or import a document" aria-label="Open new document menu">
                             <i class="lucide lucide-file-plus-2" aria-hidden="true"></i>
@@ -77,22 +79,6 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     <button id="copy-markdown-button" class="tool-button header-icon-command" type="button" title="Copy Markdown (Ctrl/Cmd+Shift+C)" aria-label="Copy Markdown" aria-keyshortcuts="Control+Shift+C Meta+Shift+C">
                         <i class="lucide lucide-copy" aria-hidden="true"></i>
                     </button>
-                    <button id="toggle-sync" class="tool-button header-icon-command sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
-                        <i class="lucide lucide-refresh-cw" aria-hidden="true"></i>
-                    </button>
-                    <button id="review-toggle" class="tool-button header-icon-command" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
-                        <i class="lucide lucide-message-square-text" aria-hidden="true"></i><span id="review-toolbar-count" class="review-toolbar-count" aria-hidden="true" hidden>0</span>
-                    </button>
-
-                    <span class="header-toolbar-divider" aria-hidden="true"></span>
-
-                    <button id="share-button" class="tool-button header-icon-command" type="button" title="Share Snapshot" aria-label="Share snapshot">
-                        <i class="lucide lucide-share-2" aria-hidden="true"></i>
-                    </button>
-                    <button id="live-share-button" class="tool-button header-icon-command" type="button" title="Live Share" aria-label="Live Share">
-                        <i class="lucide lucide-radio" data-lucide="radio" aria-hidden="true"></i>
-                    </button>
-                    <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
                     <div class="dropdown header-export-dropdown header-icon-dropdown">
                         <button class="tool-button header-icon-command dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Export document" aria-label="Open export menu">
                             <i class="lucide lucide-download" aria-hidden="true"></i>
@@ -107,6 +93,19 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
 
                     <span class="header-toolbar-divider" aria-hidden="true"></span>
 
+                    <button id="share-button" class="tool-button header-icon-command" type="button" title="Share Snapshot" aria-label="Share snapshot">
+                        <i class="lucide lucide-share-2" aria-hidden="true"></i>
+                    </button>
+                    <button id="live-share-button" class="tool-button header-icon-command" type="button" title="Live Share" aria-label="Live Share">
+                        <i class="lucide lucide-radio" data-lucide="radio" aria-hidden="true"></i>
+                    </button>
+                    <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
+                    <button id="review-toggle" class="tool-button header-icon-command" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
+                        <i class="lucide lucide-message-square-text" aria-hidden="true"></i><span id="review-toolbar-count" class="review-toolbar-count" aria-hidden="true" hidden>0</span>
+                    </button>
+
+                    <span class="header-toolbar-divider" aria-hidden="true"></span>
+
                     <a class="header-icon-command report-command" href="https://github.com/ThisIs-Developer/Markdown-Viewer/issues/new" target="_blank" rel="noopener noreferrer" title="Report an issue" aria-label="Report an issue">
                         <i class="lucide lucide-bug" aria-hidden="true"></i>
                     </a>
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 4315e3db..dad94d0b 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -3784,16 +3784,6 @@ a:focus {
   gap: 8px;
 }
 
-.app-brand-icon {
-  display: block;
-  flex: 0 0 32px;
-  width: 32px;
-  height: 32px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
-  border-radius: 8px;
-  object-fit: cover;
-}
-
 .app-brand-copy {
   display: flex;
   min-width: 0;
diff --git a/index.html b/index.html
index 596b690e..86f5bf1c 100644
--- a/index.html
+++ b/index.html
@@ -134,7 +134,6 @@
             <div class="container-fluid d-flex justify-content-between align-items-center header-container">
                 <!-- Left section: Application identity and GitHub -->
                 <div class="d-flex align-items-center header-left app-brand">
-                    <img class="app-brand-icon" src="assets/icon.jpg" width="32" height="32" alt="" aria-hidden="true" />
                     <div class="app-brand-copy">
                         <div class="app-brand-title-row">
                             <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markdown Editor with Live Preview</span></h1>
@@ -155,6 +154,9 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     </div>
                     <span class="header-toolbar-divider" aria-hidden="true"></span>
 
+                    <button id="toggle-sync" class="tool-button header-icon-command sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
+                        <i class="lucide lucide-refresh-cw" aria-hidden="true"></i>
+                    </button>
                     <div class="dropdown header-new-dropdown header-icon-dropdown">
                         <button class="tool-button header-icon-command dropdown-toggle" type="button" id="importDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Create or import a document" aria-label="Open new document menu">
                             <i class="lucide lucide-file-plus-2" aria-hidden="true"></i>
@@ -170,22 +172,6 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     <button id="copy-markdown-button" class="tool-button header-icon-command" type="button" title="Copy Markdown (Ctrl/Cmd+Shift+C)" aria-label="Copy Markdown" aria-keyshortcuts="Control+Shift+C Meta+Shift+C">
                         <i class="lucide lucide-copy" aria-hidden="true"></i>
                     </button>
-                    <button id="toggle-sync" class="tool-button header-icon-command sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
-                        <i class="lucide lucide-refresh-cw" aria-hidden="true"></i>
-                    </button>
-                    <button id="review-toggle" class="tool-button header-icon-command" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
-                        <i class="lucide lucide-message-square-text" aria-hidden="true"></i><span id="review-toolbar-count" class="review-toolbar-count" aria-hidden="true" hidden>0</span>
-                    </button>
-
-                    <span class="header-toolbar-divider" aria-hidden="true"></span>
-
-                    <button id="share-button" class="tool-button header-icon-command" type="button" title="Share Snapshot" aria-label="Share snapshot">
-                        <i class="lucide lucide-share-2" aria-hidden="true"></i>
-                    </button>
-                    <button id="live-share-button" class="tool-button header-icon-command" type="button" title="Live Share" aria-label="Live Share">
-                        <i class="lucide lucide-radio" data-lucide="radio" aria-hidden="true"></i>
-                    </button>
-                    <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
                     <div class="dropdown header-export-dropdown header-icon-dropdown">
                         <button class="tool-button header-icon-command dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Export document" aria-label="Open export menu">
                             <i class="lucide lucide-download" aria-hidden="true"></i>
@@ -200,6 +186,19 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
 
                     <span class="header-toolbar-divider" aria-hidden="true"></span>
 
+                    <button id="share-button" class="tool-button header-icon-command" type="button" title="Share Snapshot" aria-label="Share snapshot">
+                        <i class="lucide lucide-share-2" aria-hidden="true"></i>
+                    </button>
+                    <button id="live-share-button" class="tool-button header-icon-command" type="button" title="Live Share" aria-label="Live Share">
+                        <i class="lucide lucide-radio" data-lucide="radio" aria-hidden="true"></i>
+                    </button>
+                    <div id="live-share-toolbar-participants" class="live-share-toolbar-participants" aria-label="Live Share participants" hidden></div>
+                    <button id="review-toggle" class="tool-button header-icon-command" type="button" title="Open comments and suggestions" aria-label="Open comments and suggestions" aria-controls="review-panel" aria-expanded="false" aria-pressed="false">
+                        <i class="lucide lucide-message-square-text" aria-hidden="true"></i><span id="review-toolbar-count" class="review-toolbar-count" aria-hidden="true" hidden>0</span>
+                    </button>
+
+                    <span class="header-toolbar-divider" aria-hidden="true"></span>
+
                     <a class="header-icon-command report-command" href="https://github.com/ThisIs-Developer/Markdown-Viewer/issues/new" target="_blank" rel="noopener noreferrer" title="Report an issue" aria-label="Report an issue">
                         <i class="lucide lucide-bug" aria-hidden="true"></i>
                     </a>
diff --git a/styles.css b/styles.css
index 4315e3db..dad94d0b 100644
--- a/styles.css
+++ b/styles.css
@@ -3784,16 +3784,6 @@ a:focus {
   gap: 8px;
 }
 
-.app-brand-icon {
-  display: block;
-  flex: 0 0 32px;
-  width: 32px;
-  height: 32px;
-  border: 1px solid color-mix(in srgb, var(--border-color) 72%, transparent);
-  border-radius: 8px;
-  object-fit: cover;
-}
-
 .app-brand-copy {
   display: flex;
   min-width: 0;
diff --git a/tests/e2e/status-toolbar-followup.spec.js b/tests/e2e/status-toolbar-followup.spec.js
index f2b3c9f0..e1420f5a 100644
--- a/tests/e2e/status-toolbar-followup.spec.js
+++ b/tests/e2e/status-toolbar-followup.spec.js
@@ -22,13 +22,13 @@ test('header consolidates icon document actions in the requested order', async (
     elements.map(element => element.id || element.getAttribute('aria-label'))
   );
   expect(headerOrder).toEqual([
+    'toggle-sync',
     'importDropdown',
     'copy-markdown-button',
-    'toggle-sync',
-    'review-toggle',
+    'exportDropdown',
     'share-button',
     'live-share-button',
-    'exportDropdown',
+    'review-toggle',
     'Report an issue',
     'header-about-button',
     'workspaceSettingsDropdown'
diff --git a/tests/e2e/tab-split-sidebar-update.spec.js b/tests/e2e/tab-split-sidebar-update.spec.js
index 734a8061..1934a138 100644
--- a/tests/e2e/tab-split-sidebar-update.spec.js
+++ b/tests/e2e/tab-split-sidebar-update.spec.js
@@ -134,13 +134,13 @@ test('header groups document actions before application preferences', async ({ p
     elements.map(element => element.id || element.getAttribute('aria-label'))
   );
   expect(headerActions).toEqual([
+    'toggle-sync',
     'importDropdown',
     'copy-markdown-button',
-    'toggle-sync',
-    'review-toggle',
+    'exportDropdown',
     'share-button',
     'live-share-button',
-    'exportDropdown',
+    'review-toggle',
     'Report an issue',
     'header-about-button',
     'workspaceSettingsDropdown'
diff --git a/tests/e2e/ui-toolbar-redesign.spec.js b/tests/e2e/ui-toolbar-redesign.spec.js
index 314148e9..ccb9d26e 100644
--- a/tests/e2e/ui-toolbar-redesign.spec.js
+++ b/tests/e2e/ui-toolbar-redesign.spec.js
@@ -30,18 +30,15 @@ test('Explorer labels and sidebar toggle describe the next action', async ({ pag
 
 test('application header keeps its height while showing the compact product identity', async ({ page }) => {
   await page.setViewportSize({ width: 1440, height: 900 });
-  await expect(page.locator('.app-brand-icon')).toHaveAttribute('src', 'assets/icon.jpg');
+  await expect(page.locator('.app-brand-icon')).toHaveCount(0);
   await expect(page.locator('.app-brand-title-row h1')).toContainText('Markdown Viewer');
   await expect(page.locator('.app-brand-subtitle')).toHaveText('Write. Preview. Share.');
 
   const geometry = await page.evaluate(() => ({
-    headerHeight: document.querySelector('.app-header').getBoundingClientRect().height,
-    iconWidth: document.querySelector('.app-brand-icon').getBoundingClientRect().width,
-    iconHeight: document.querySelector('.app-brand-icon').getBoundingClientRect().height
+    headerHeight: document.querySelector('.app-header').getBoundingClientRect().height
   }));
   expect(geometry.headerHeight).toBeGreaterThanOrEqual(40);
   expect(geometry.headerHeight).toBeLessThanOrEqual(45);
-  expect([geometry.iconWidth, geometry.iconHeight]).toEqual([32, 32]);
   await expect(page.locator('.app-brand .github-link i')).toHaveCSS('font-size', '20px');
   await expect(page.locator('#tab-new-btn')).toHaveCSS('width', '25px');
   await expect(page.locator('#tab-new-btn')).toHaveCSS('height', '25px');

From da7550676ddee9eced0ef86f26127fe13ae73d2a Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 02:47:12 +0530
Subject: [PATCH 11/17] style(header): update document action icons

---
 assets/lucide-icons.css                   | 2 ++
 desktop-app/resources/index.html          | 4 ++--
 index.html                                | 4 ++--
 tests/e2e/status-toolbar-followup.spec.js | 3 +++
 4 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/assets/lucide-icons.css b/assets/lucide-icons.css
index dda69892..618e4baa 100644
--- a/assets/lucide-icons.css
+++ b/assets/lucide-icons.css
@@ -21,6 +21,8 @@
   pointer-events: none;
 }
 
+.lucide-clipboard { --lucide-icon: url("data:image/svg+xml;base64,PCEtLSBAbGljZW5zZSBsdWNpZGUtc3RhdGljIHYxLjI1LjAgLSBJU0MgLS0+PHN2ZyBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1jbGlwYm9hcmQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjI0IiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiID48cmVjdCB3aWR0aD0iOCIgaGVpZ2h0PSI0IiB4PSI4IiB5PSIyIiByeD0iMSIgcnk9IjEiIC8+PHBhdGggZD0iTTE2IDRoMmEyIDIgMCAwIDEgMiAydjE0YTIgMiAwIDAgMS0yIDJINmEyIDIgMCAwIDEtMi0yVjZhMiAyIDAgMCAxIDItMmgyIiAvPjwvc3ZnPg=="); }
+
 @media (forced-colors: active) {
   .lucide { background-color: ButtonText; }
 }
diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index 438062b7..774ee267 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -66,7 +66,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     </button>
                     <div class="dropdown header-new-dropdown header-icon-dropdown">
                         <button class="tool-button header-icon-command dropdown-toggle" type="button" id="importDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Create or import a document" aria-label="Open new document menu">
-                            <i class="lucide lucide-file-plus-2" aria-hidden="true"></i>
+                            <i class="lucide lucide-plus" aria-hidden="true"></i>
                         </button>
                         <ul class="dropdown-menu app-command-menu header-command-menu header-new-menu" aria-labelledby="importDropdown">
                             <li><a class="dropdown-item app-menu-item" href="#" id="header-new-document"><i class="lucide lucide-file-plus-2" aria-hidden="true"></i><span class="app-menu-label">New document</span></a></li>
@@ -77,7 +77,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     <input type="file" id="file-input" class="file-input" accept=".md,.markdown,text/markdown" multiple>
 
                     <button id="copy-markdown-button" class="tool-button header-icon-command" type="button" title="Copy Markdown (Ctrl/Cmd+Shift+C)" aria-label="Copy Markdown" aria-keyshortcuts="Control+Shift+C Meta+Shift+C">
-                        <i class="lucide lucide-copy" aria-hidden="true"></i>
+                        <i class="lucide lucide-clipboard" aria-hidden="true"></i>
                     </button>
                     <div class="dropdown header-export-dropdown header-icon-dropdown">
                         <button class="tool-button header-icon-command dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Export document" aria-label="Open export menu">
diff --git a/index.html b/index.html
index 86f5bf1c..514d9bde 100644
--- a/index.html
+++ b/index.html
@@ -159,7 +159,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     </button>
                     <div class="dropdown header-new-dropdown header-icon-dropdown">
                         <button class="tool-button header-icon-command dropdown-toggle" type="button" id="importDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Create or import a document" aria-label="Open new document menu">
-                            <i class="lucide lucide-file-plus-2" aria-hidden="true"></i>
+                            <i class="lucide lucide-plus" aria-hidden="true"></i>
                         </button>
                         <ul class="dropdown-menu app-command-menu header-command-menu header-new-menu" aria-labelledby="importDropdown">
                             <li><a class="dropdown-item app-menu-item" href="#" id="header-new-document"><i class="lucide lucide-file-plus-2" aria-hidden="true"></i><span class="app-menu-label">New document</span></a></li>
@@ -170,7 +170,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                     <input type="file" id="file-input" class="file-input" accept=".md,.markdown,text/markdown" multiple>
 
                     <button id="copy-markdown-button" class="tool-button header-icon-command" type="button" title="Copy Markdown (Ctrl/Cmd+Shift+C)" aria-label="Copy Markdown" aria-keyshortcuts="Control+Shift+C Meta+Shift+C">
-                        <i class="lucide lucide-copy" aria-hidden="true"></i>
+                        <i class="lucide lucide-clipboard" aria-hidden="true"></i>
                     </button>
                     <div class="dropdown header-export-dropdown header-icon-dropdown">
                         <button class="tool-button header-icon-command dropdown-toggle" type="button" id="exportDropdown" data-bs-toggle="dropdown" aria-expanded="false" title="Export document" aria-label="Open export menu">
diff --git a/tests/e2e/status-toolbar-followup.spec.js b/tests/e2e/status-toolbar-followup.spec.js
index e1420f5a..e2ec3452 100644
--- a/tests/e2e/status-toolbar-followup.spec.js
+++ b/tests/e2e/status-toolbar-followup.spec.js
@@ -17,6 +17,9 @@ test('header consolidates icon document actions in the requested order', async (
   await expect(header.locator('[aria-label="Report an issue"]')).toBeVisible();
   await expect(header.locator('.header-view-toolbar .view-toggle-btn')).toHaveCount(3);
   await expect(header.locator('#importDropdown .btn-text, #share-button .btn-text, #live-share-button .btn-text, #exportDropdown .btn-text')).toHaveCount(0);
+  await expect(header.locator('#importDropdown i')).toHaveClass('lucide lucide-plus');
+  await expect(header.locator('#copy-markdown-button i')).toHaveClass('lucide lucide-clipboard');
+  expect(await header.locator('#copy-markdown-button i').evaluate(icon => getComputedStyle(icon).maskImage)).not.toBe('none');
 
   const headerOrder = await header.locator(':scope > button, :scope > a, :scope > .dropdown > button').evaluateAll(elements =>
     elements.map(element => element.id || element.getAttribute('aria-label'))

From 28ba18e4f29e69efe39535660135c8b6f2ab6b6c Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 17:49:47 +0530
Subject: [PATCH 12/17] style(toolbar): apply recommended action order

---
 desktop-app/resources/index.html           | 30 ++++++++++++----------
 index.html                                 | 30 ++++++++++++----------
 tests/e2e/status-toolbar-followup.spec.js  |  4 ++-
 tests/e2e/tab-split-sidebar-update.spec.js | 10 +++++---
 tests/e2e/ui-toolbar-redesign.spec.js      | 29 ++++++++++++++-------
 5 files changed, 62 insertions(+), 41 deletions(-)

diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index 774ee267..d36ff12a 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -401,7 +401,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
             <button type="button" class="markdown-tool-btn" data-md-action="undo" title="Undo (Ctrl/Cmd+Z)" aria-label="Undo" aria-keyshortcuts="Control+Z Meta+Z"><i class="lucide lucide-undo-2"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="redo" title="Redo (Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y)" aria-label="Redo" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z Control+Y Meta+Y"><i class="lucide lucide-redo-2"></i></button>
           </div>
-          <div class="markdown-toolbar-group" role="group" aria-label="Common formatting">
+          <div class="markdown-toolbar-group" role="group" aria-label="Text formatting">
             <div class="markdown-tool-dropdown">
               <button type="button" class="markdown-tool-btn markdown-tool-select markdown-tool-select--heading" data-toolbar-menu-toggle="heading" aria-haspopup="menu" aria-expanded="false" title="Text style" aria-label="Choose text style">
                 <span class="markdown-tool-select-label">H</span><i class="lucide lucide-chevron-down" aria-hidden="true"></i>
@@ -418,8 +418,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
             <button type="button" class="markdown-tool-btn" data-md-action="bold" title="Bold (Ctrl/Cmd+B)" aria-label="Bold" aria-keyshortcuts="Control+B Meta+B"><i class="lucide lucide-bold"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="italic" title="Italic (Ctrl/Cmd+I)" aria-label="Italic" aria-keyshortcuts="Control+I Meta+I"><i class="lucide lucide-italic"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="strike" title="Strikethrough (Alt+Shift+5)" aria-label="Strikethrough" aria-keyshortcuts="Alt+Shift+5"><i class="lucide lucide-strikethrough"></i></button>
-          </div>
-          <div class="markdown-toolbar-group" role="group" aria-label="Text layout">
+            <button type="button" class="markdown-tool-btn" data-md-action="inline-code" title="Inline code (Ctrl/Cmd+Shift+`)" aria-label="Inline code" aria-keyshortcuts="Control+Shift+` Meta+Shift+`"><i class="lucide lucide-code-2" aria-hidden="true"></i></button>
             <div class="markdown-tool-dropdown">
               <button type="button" class="markdown-tool-btn markdown-tool-select markdown-tool-select--compact" data-toolbar-menu-toggle="case" aria-haspopup="menu" aria-expanded="false" title="Change text case" aria-label="Change text case"><span>Aa</span><i class="lucide lucide-chevron-down" aria-hidden="true"></i></button>
               <div class="markdown-tool-menu" data-toolbar-menu="case" role="menu" aria-label="Text case">
@@ -428,6 +427,11 @@ <h2 id="document-sidebar-title">Explorer</h2>
                 <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="lowercase"><span class="markdown-tool-menu-symbol">aa</span><span>lowercase</span></button>
               </div>
             </div>
+          </div>
+          <div class="markdown-toolbar-group" role="group" aria-label="Paragraph formatting">
+            <button type="button" class="markdown-tool-btn" data-md-action="quote" title="Blockquote (Ctrl+Shift+Q / Cmd+Option+Q)" aria-label="Blockquote" aria-keyshortcuts="Control+Shift+Q Meta+Alt+Q"><i class="lucide lucide-quote" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="unordered-list" title="Bulleted list (Ctrl+Shift+] / Cmd+Option+U)" aria-label="Bulleted list" aria-keyshortcuts="Control+Shift+] Meta+Alt+U"><i class="lucide lucide-list"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="ordered-list" title="Numbered list (Ctrl+Shift+[ / Cmd+Option+O)" aria-label="Numbered list" aria-keyshortcuts="Control+Shift+[ Meta+Alt+O"><i class="lucide lucide-list-ordered"></i></button>
             <div class="markdown-tool-dropdown">
               <button type="button" class="markdown-tool-btn markdown-tool-select markdown-tool-select--icon" data-toolbar-menu-toggle="alignment" aria-haspopup="menu" aria-expanded="false" title="Alignment and direction" aria-label="Alignment and direction"><i class="lucide lucide-align-left" aria-hidden="true"></i><i class="lucide lucide-chevron-down" aria-hidden="true"></i></button>
               <div class="markdown-tool-menu" data-toolbar-menu="alignment" role="menu" aria-label="Alignment and direction">
@@ -439,25 +443,23 @@ <h2 id="document-sidebar-title">Explorer</h2>
               </div>
             </div>
           </div>
-          <div class="markdown-toolbar-group" role="group" aria-label="Content structure">
-            <button type="button" class="markdown-tool-btn" data-md-action="quote" title="Blockquote (Ctrl+Shift+Q / Cmd+Option+Q)" aria-label="Blockquote" aria-keyshortcuts="Control+Shift+Q Meta+Alt+Q"><i class="lucide lucide-quote" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="unordered-list" title="Bulleted list (Ctrl+Shift+] / Cmd+Option+U)" aria-label="Bulleted list" aria-keyshortcuts="Control+Shift+] Meta+Alt+U"><i class="lucide lucide-list"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="ordered-list" title="Numbered list (Ctrl+Shift+[ / Cmd+Option+O)" aria-label="Numbered list" aria-keyshortcuts="Control+Shift+[ Meta+Alt+O"><i class="lucide lucide-list-ordered"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="inline-code" title="Inline code (Ctrl/Cmd+Shift+`)" aria-label="Inline code" aria-keyshortcuts="Control+Shift+` Meta+Shift+`"><i class="lucide lucide-code-2" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="table" title="Table" aria-label="Table"><i class="lucide lucide-table-2" aria-hidden="true"></i></button>
+          <div class="markdown-toolbar-group markdown-toolbar-group--content" role="group" aria-label="Content insertion">
             <button type="button" class="markdown-tool-btn" data-md-action="link" title="Link (Ctrl/Cmd+K)" aria-label="Link" aria-keyshortcuts="Control+K Meta+K"><i class="lucide lucide-link-2"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="image" title="Image, GIF, or video" aria-label="Insert image, GIF, or video"><i class="lucide lucide-image" aria-hidden="true"></i></button>
-          </div>
-          <div class="markdown-toolbar-group markdown-toolbar-group--advanced" role="group" aria-label="Advanced insertion">
-            <button type="button" class="markdown-tool-btn" data-md-action="diagram" title="Diagram and more" aria-label="Diagram and more"><i class="lucide lucide-workflow" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="table" title="Table" aria-label="Table"><i class="lucide lucide-table-2" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="reference" title="Reference" aria-label="Insert reference"><i class="lucide lucide-bookmark" aria-hidden="true"></i></button>
+          </div>
+          <div class="markdown-toolbar-group markdown-toolbar-group--technical" role="group" aria-label="Technical content">
             <button type="button" class="markdown-tool-btn" data-md-action="code-block" title="Code block (Ctrl+Shift+K / Cmd+Option+C)" aria-label="Insert code block" aria-keyshortcuts="Control+Shift+K Meta+Alt+C"><i class="lucide lucide-square-code" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="terminal-block" title="Terminal block" aria-label="Insert terminal block"><i class="lucide lucide-square-terminal" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="diagram" title="Diagram and more" aria-label="Diagram and more"><i class="lucide lucide-workflow" aria-hidden="true"></i></button>
+          </div>
+          <div class="markdown-toolbar-group markdown-toolbar-group--advanced" role="group" aria-label="Additional insertion">
             <button type="button" class="markdown-tool-btn" data-md-action="horizontal-rule" title="Horizontal rule" aria-label="Insert horizontal rule"><i class="lucide lucide-minus" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="alert" title="Markdown alert" aria-label="Insert Markdown alert"><i class="lucide lucide-badge-alert" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="date-time" title="Date and time" aria-label="Insert date and time"><i class="lucide lucide-clock-3" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="emoji" title="Emoji shortcode" aria-label="Insert emoji shortcode"><i class="lucide lucide-smile" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="symbols" title="Symbols and entities" aria-label="Insert symbols and entities"><i class="lucide lucide-braces" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="alert" title="Markdown alert" aria-label="Insert Markdown alert"><i class="lucide lucide-badge-alert" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="emoji" title="Emoji shortcode" aria-label="Insert emoji shortcode"><i class="lucide lucide-smile" aria-hidden="true"></i></button>
           </div>
           <div class="markdown-toolbar-group workspace-format-actions" role="group" aria-label="Workspace actions">
             <button type="button" class="markdown-tool-btn" data-md-action="find" title="Find and replace (Ctrl/Cmd+F)" aria-label="Find and replace" aria-keyshortcuts="Control+F Meta+F"><i class="lucide lucide-search" aria-hidden="true"></i></button>
diff --git a/index.html b/index.html
index 514d9bde..78ebdcf9 100644
--- a/index.html
+++ b/index.html
@@ -494,7 +494,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
             <button type="button" class="markdown-tool-btn" data-md-action="undo" title="Undo (Ctrl/Cmd+Z)" aria-label="Undo" aria-keyshortcuts="Control+Z Meta+Z"><i class="lucide lucide-undo-2"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="redo" title="Redo (Ctrl/Cmd+Shift+Z or Ctrl/Cmd+Y)" aria-label="Redo" aria-keyshortcuts="Control+Shift+Z Meta+Shift+Z Control+Y Meta+Y"><i class="lucide lucide-redo-2"></i></button>
           </div>
-          <div class="markdown-toolbar-group" role="group" aria-label="Common formatting">
+          <div class="markdown-toolbar-group" role="group" aria-label="Text formatting">
             <div class="markdown-tool-dropdown">
               <button type="button" class="markdown-tool-btn markdown-tool-select markdown-tool-select--heading" data-toolbar-menu-toggle="heading" aria-haspopup="menu" aria-expanded="false" title="Text style" aria-label="Choose text style">
                 <span class="markdown-tool-select-label">H</span><i class="lucide lucide-chevron-down" aria-hidden="true"></i>
@@ -511,8 +511,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
             <button type="button" class="markdown-tool-btn" data-md-action="bold" title="Bold (Ctrl/Cmd+B)" aria-label="Bold" aria-keyshortcuts="Control+B Meta+B"><i class="lucide lucide-bold"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="italic" title="Italic (Ctrl/Cmd+I)" aria-label="Italic" aria-keyshortcuts="Control+I Meta+I"><i class="lucide lucide-italic"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="strike" title="Strikethrough (Alt+Shift+5)" aria-label="Strikethrough" aria-keyshortcuts="Alt+Shift+5"><i class="lucide lucide-strikethrough"></i></button>
-          </div>
-          <div class="markdown-toolbar-group" role="group" aria-label="Text layout">
+            <button type="button" class="markdown-tool-btn" data-md-action="inline-code" title="Inline code (Ctrl/Cmd+Shift+`)" aria-label="Inline code" aria-keyshortcuts="Control+Shift+` Meta+Shift+`"><i class="lucide lucide-code-2" aria-hidden="true"></i></button>
             <div class="markdown-tool-dropdown">
               <button type="button" class="markdown-tool-btn markdown-tool-select markdown-tool-select--compact" data-toolbar-menu-toggle="case" aria-haspopup="menu" aria-expanded="false" title="Change text case" aria-label="Change text case"><span>Aa</span><i class="lucide lucide-chevron-down" aria-hidden="true"></i></button>
               <div class="markdown-tool-menu" data-toolbar-menu="case" role="menu" aria-label="Text case">
@@ -521,6 +520,11 @@ <h2 id="document-sidebar-title">Explorer</h2>
                 <button type="button" class="markdown-tool-menu-item" role="menuitem" data-md-action="lowercase"><span class="markdown-tool-menu-symbol">aa</span><span>lowercase</span></button>
               </div>
             </div>
+          </div>
+          <div class="markdown-toolbar-group" role="group" aria-label="Paragraph formatting">
+            <button type="button" class="markdown-tool-btn" data-md-action="quote" title="Blockquote (Ctrl+Shift+Q / Cmd+Option+Q)" aria-label="Blockquote" aria-keyshortcuts="Control+Shift+Q Meta+Alt+Q"><i class="lucide lucide-quote" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="unordered-list" title="Bulleted list (Ctrl+Shift+] / Cmd+Option+U)" aria-label="Bulleted list" aria-keyshortcuts="Control+Shift+] Meta+Alt+U"><i class="lucide lucide-list"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="ordered-list" title="Numbered list (Ctrl+Shift+[ / Cmd+Option+O)" aria-label="Numbered list" aria-keyshortcuts="Control+Shift+[ Meta+Alt+O"><i class="lucide lucide-list-ordered"></i></button>
             <div class="markdown-tool-dropdown">
               <button type="button" class="markdown-tool-btn markdown-tool-select markdown-tool-select--icon" data-toolbar-menu-toggle="alignment" aria-haspopup="menu" aria-expanded="false" title="Alignment and direction" aria-label="Alignment and direction"><i class="lucide lucide-align-left" aria-hidden="true"></i><i class="lucide lucide-chevron-down" aria-hidden="true"></i></button>
               <div class="markdown-tool-menu" data-toolbar-menu="alignment" role="menu" aria-label="Alignment and direction">
@@ -532,25 +536,23 @@ <h2 id="document-sidebar-title">Explorer</h2>
               </div>
             </div>
           </div>
-          <div class="markdown-toolbar-group" role="group" aria-label="Content structure">
-            <button type="button" class="markdown-tool-btn" data-md-action="quote" title="Blockquote (Ctrl+Shift+Q / Cmd+Option+Q)" aria-label="Blockquote" aria-keyshortcuts="Control+Shift+Q Meta+Alt+Q"><i class="lucide lucide-quote" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="unordered-list" title="Bulleted list (Ctrl+Shift+] / Cmd+Option+U)" aria-label="Bulleted list" aria-keyshortcuts="Control+Shift+] Meta+Alt+U"><i class="lucide lucide-list"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="ordered-list" title="Numbered list (Ctrl+Shift+[ / Cmd+Option+O)" aria-label="Numbered list" aria-keyshortcuts="Control+Shift+[ Meta+Alt+O"><i class="lucide lucide-list-ordered"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="inline-code" title="Inline code (Ctrl/Cmd+Shift+`)" aria-label="Inline code" aria-keyshortcuts="Control+Shift+` Meta+Shift+`"><i class="lucide lucide-code-2" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="table" title="Table" aria-label="Table"><i class="lucide lucide-table-2" aria-hidden="true"></i></button>
+          <div class="markdown-toolbar-group markdown-toolbar-group--content" role="group" aria-label="Content insertion">
             <button type="button" class="markdown-tool-btn" data-md-action="link" title="Link (Ctrl/Cmd+K)" aria-label="Link" aria-keyshortcuts="Control+K Meta+K"><i class="lucide lucide-link-2"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="image" title="Image, GIF, or video" aria-label="Insert image, GIF, or video"><i class="lucide lucide-image" aria-hidden="true"></i></button>
-          </div>
-          <div class="markdown-toolbar-group markdown-toolbar-group--advanced" role="group" aria-label="Advanced insertion">
-            <button type="button" class="markdown-tool-btn" data-md-action="diagram" title="Diagram and more" aria-label="Diagram and more"><i class="lucide lucide-workflow" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="table" title="Table" aria-label="Table"><i class="lucide lucide-table-2" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="reference" title="Reference" aria-label="Insert reference"><i class="lucide lucide-bookmark" aria-hidden="true"></i></button>
+          </div>
+          <div class="markdown-toolbar-group markdown-toolbar-group--technical" role="group" aria-label="Technical content">
             <button type="button" class="markdown-tool-btn" data-md-action="code-block" title="Code block (Ctrl+Shift+K / Cmd+Option+C)" aria-label="Insert code block" aria-keyshortcuts="Control+Shift+K Meta+Alt+C"><i class="lucide lucide-square-code" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="terminal-block" title="Terminal block" aria-label="Insert terminal block"><i class="lucide lucide-square-terminal" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="diagram" title="Diagram and more" aria-label="Diagram and more"><i class="lucide lucide-workflow" aria-hidden="true"></i></button>
+          </div>
+          <div class="markdown-toolbar-group markdown-toolbar-group--advanced" role="group" aria-label="Additional insertion">
             <button type="button" class="markdown-tool-btn" data-md-action="horizontal-rule" title="Horizontal rule" aria-label="Insert horizontal rule"><i class="lucide lucide-minus" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="alert" title="Markdown alert" aria-label="Insert Markdown alert"><i class="lucide lucide-badge-alert" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="date-time" title="Date and time" aria-label="Insert date and time"><i class="lucide lucide-clock-3" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="emoji" title="Emoji shortcode" aria-label="Insert emoji shortcode"><i class="lucide lucide-smile" aria-hidden="true"></i></button>
             <button type="button" class="markdown-tool-btn" data-md-action="symbols" title="Symbols and entities" aria-label="Insert symbols and entities"><i class="lucide lucide-braces" aria-hidden="true"></i></button>
-            <button type="button" class="markdown-tool-btn" data-md-action="alert" title="Markdown alert" aria-label="Insert Markdown alert"><i class="lucide lucide-badge-alert" aria-hidden="true"></i></button>
+            <button type="button" class="markdown-tool-btn" data-md-action="emoji" title="Emoji shortcode" aria-label="Insert emoji shortcode"><i class="lucide lucide-smile" aria-hidden="true"></i></button>
           </div>
           <div class="markdown-toolbar-group workspace-format-actions" role="group" aria-label="Workspace actions">
             <button type="button" class="markdown-tool-btn" data-md-action="find" title="Find and replace (Ctrl/Cmd+F)" aria-label="Find and replace" aria-keyshortcuts="Control+F Meta+F"><i class="lucide lucide-search" aria-hidden="true"></i></button>
diff --git a/tests/e2e/status-toolbar-followup.spec.js b/tests/e2e/status-toolbar-followup.spec.js
index e2ec3452..fa7c51ba 100644
--- a/tests/e2e/status-toolbar-followup.spec.js
+++ b/tests/e2e/status-toolbar-followup.spec.js
@@ -45,7 +45,9 @@ test('header consolidates icon document actions in the requested order', async (
   await expect(toolbar.locator('#review-toggle, #toggle-sync, #copy-markdown-button')).toHaveCount(0);
   await expect(toolbar.locator('#exportDropdown')).toHaveCount(0);
   await expect(toolbar.locator('.markdown-tool-select--insert, [data-toolbar-menu="insert"]')).toHaveCount(0);
-  await expect(toolbar.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn')).toHaveCount(9);
+  await expect(toolbar.locator('.markdown-toolbar-group--content > .markdown-tool-btn')).toHaveCount(4);
+  await expect(toolbar.locator('.markdown-toolbar-group--technical > .markdown-tool-btn')).toHaveCount(3);
+  await expect(toolbar.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn')).toHaveCount(5);
 
   await toolbar.locator('.workspace-format-actions [data-md-action="find"]').click();
   await expect(page.locator('#find-replace-modal')).toBeVisible();
diff --git a/tests/e2e/tab-split-sidebar-update.spec.js b/tests/e2e/tab-split-sidebar-update.spec.js
index 1934a138..691aca8d 100644
--- a/tests/e2e/tab-split-sidebar-update.spec.js
+++ b/tests/e2e/tab-split-sidebar-update.spec.js
@@ -187,7 +187,9 @@ test('header groups document actions before application preferences', async ({ p
   await page.locator('#workspaceSettingsDropdown').click();
 
   await expect(formatToolbar.locator('.markdown-tool-select--insert, [data-toolbar-menu="insert"]')).toHaveCount(0);
-  await expect(formatToolbar.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn')).toHaveCount(9);
+  await expect(formatToolbar.locator('.markdown-toolbar-group--content > .markdown-tool-btn')).toHaveCount(4);
+  await expect(formatToolbar.locator('.markdown-toolbar-group--technical > .markdown-tool-btn')).toHaveCount(3);
+  await expect(formatToolbar.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn')).toHaveCount(5);
 
   await header.locator('#exportDropdown').click();
   const exportMenu = page.locator('[aria-labelledby="exportDropdown"]');
@@ -249,7 +251,7 @@ test('closing a tab keeps the document in Files and reopening restores the tab',
   await expect(reopenedRow).toHaveCount(0);
 });
 
-test('format toolbar keeps compact selectors and exposes advanced insert actions', async ({ page }) => {
+test('format toolbar keeps compact selectors and exposes grouped insert actions', async ({ page }) => {
   await expect(page.locator('[data-md-action="clear-formatting"]')).toHaveCount(0);
   await expect(page.locator('[data-md-action="help"]')).toHaveCount(0);
   await expect(page.locator('[data-md-action="info"]')).toBeVisible();
@@ -257,7 +259,9 @@ test('format toolbar keeps compact selectors and exposes advanced insert actions
   await expect(page.locator('[data-toolbar-menu-toggle="case"]')).toBeVisible();
   await expect(page.locator('[data-toolbar-menu-toggle="alignment"]')).toBeVisible();
   await expect(page.locator('[data-toolbar-menu-toggle="insert"], [data-toolbar-menu="insert"]')).toHaveCount(0);
-  await expect(page.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn')).toHaveCount(9);
+  await expect(page.locator('.markdown-toolbar-group--content > .markdown-tool-btn')).toHaveCount(4);
+  await expect(page.locator('.markdown-toolbar-group--technical > .markdown-tool-btn')).toHaveCount(3);
+  await expect(page.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn')).toHaveCount(5);
 
   await setEditorContent(page, 'toolbar heading');
   await page.locator('[data-toolbar-menu-toggle="heading"]').click();
diff --git a/tests/e2e/ui-toolbar-redesign.spec.js b/tests/e2e/ui-toolbar-redesign.spec.js
index ccb9d26e..bae05880 100644
--- a/tests/e2e/ui-toolbar-redesign.spec.js
+++ b/tests/e2e/ui-toolbar-redesign.spec.js
@@ -106,7 +106,7 @@ test('every application dialog uses the shared alert modal shell', async ({ page
   expect(dialogShells.filter(dialog => !dialog.sharedShell || !dialog.header || !dialog.close || !dialog.footer || dialog.padding !== '0px')).toEqual([]);
 });
 
-test('header orders document actions and formatting toolbar exposes advanced tools', async ({ page }) => {
+test('header orders document actions and formatting toolbar follows the recommended grouping', async ({ page }) => {
   await page.setViewportSize({ width: 1440, height: 900 });
   const header = page.locator('.header-right');
   const toolbar = page.locator('#markdown-format-toolbar');
@@ -114,21 +114,32 @@ test('header orders document actions and formatting toolbar exposes advanced too
     elements.map(element => element.id)
   );
   expect(documentActionOrder.slice(0, 7)).toEqual([
+    'toggle-sync',
     'importDropdown',
     'copy-markdown-button',
-    'toggle-sync',
-    'review-toggle',
+    'exportDropdown',
     'share-button',
     'live-share-button',
-    'exportDropdown'
+    'review-toggle'
   ]);
 
-  const advancedActions = await toolbar.locator('.markdown-toolbar-group--advanced > .markdown-tool-btn').evaluateAll(buttons =>
-    buttons.map(button => button.getAttribute('data-md-action'))
+  const toolbarGroups = await toolbar.locator(':scope > .markdown-toolbar-group').evaluateAll(groups =>
+    groups.map(group => ({
+      label: group.getAttribute('aria-label'),
+      actions: Array.from(group.children).map(child => {
+        const control = child.matches('button') ? child : child.querySelector(':scope > button');
+        return control?.getAttribute('data-md-action') || control?.getAttribute('data-toolbar-menu-toggle');
+      }).filter(Boolean)
+    }))
   );
-  expect(advancedActions).toEqual([
-    'diagram', 'reference', 'code-block', 'terminal-block', 'horizontal-rule',
-    'date-time', 'emoji', 'symbols', 'alert'
+  expect(toolbarGroups).toEqual([
+    { label: 'History', actions: ['undo', 'redo'] },
+    { label: 'Text formatting', actions: ['heading', 'bold', 'italic', 'strike', 'inline-code', 'case'] },
+    { label: 'Paragraph formatting', actions: ['quote', 'unordered-list', 'ordered-list', 'alignment'] },
+    { label: 'Content insertion', actions: ['link', 'image', 'table', 'reference'] },
+    { label: 'Technical content', actions: ['code-block', 'terminal-block', 'diagram'] },
+    { label: 'Additional insertion', actions: ['horizontal-rule', 'alert', 'date-time', 'symbols', 'emoji'] },
+    { label: 'Workspace actions', actions: ['find', 'fullscreen'] }
   ]);
   await expect(toolbar.locator('.markdown-tool-select--insert, [data-toolbar-menu="insert"]')).toHaveCount(0);
 

From f3685db8cec1c38dd8a036094e82c1f2d843fff6 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Wed, 12 Aug 2026 23:30:47 +0530
Subject: [PATCH 13/17] fix(release-notes): remove document-only actions

---
 desktop-app/resources/index.html   | 10 ++---
 desktop-app/resources/js/script.js | 32 +++++++++++---
 desktop-app/resources/styles.css   | 24 +++++++++++
 index.html                         | 10 ++---
 script.js                          | 32 +++++++++++---
 styles.css                         | 24 +++++++++++
 tests/e2e/smoke.spec.js            | 68 +++++++++++++++++++++++++++++-
 7 files changed, 179 insertions(+), 21 deletions(-)

diff --git a/desktop-app/resources/index.html b/desktop-app/resources/index.html
index d36ff12a..7e6fe89e 100644
--- a/desktop-app/resources/index.html
+++ b/desktop-app/resources/index.html
@@ -59,7 +59,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                         <button class="tool-button view-toggle-btn is-active" data-view-mode="split" aria-pressed="true" title="Split" aria-label="Split editor and preview"><i class="lucide lucide-columns-2" aria-hidden="true"></i></button>
                         <button class="tool-button view-toggle-btn" data-view-mode="preview" aria-pressed="false" title="Preview (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Preview Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-eye" aria-hidden="true"></i></button>
                     </div>
-                    <span class="header-toolbar-divider" aria-hidden="true"></span>
+                    <span class="header-toolbar-divider header-view-divider" aria-hidden="true"></span>
 
                     <button id="toggle-sync" class="tool-button header-icon-command sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
                         <i class="lucide lucide-refresh-cw" aria-hidden="true"></i>
@@ -200,8 +200,8 @@ <h3 id="mobile-menu-view-heading" class="mobile-menu-group-label">View</h3>
                             </section>
 
                         <nav class="mobile-menu-items" aria-label="Application menu">
-                            <h3 class="mobile-menu-group-label">Document tools</h3>
-                            <div class="mobile-menu-command-group" role="group" aria-label="Document tools">
+                            <h3 id="mobile-document-tools-heading" class="mobile-menu-group-label">Document tools</h3>
+                            <div id="mobile-document-tools" class="mobile-menu-command-group" role="group" aria-label="Document tools">
                                 <button id="mobile-toggle-sync" class="mobile-menu-item mobile-menu-command mobile-settings-item is-active" type="button" title="Disable synchronized scrolling" aria-label="Disable synchronized scrolling" aria-pressed="true">
                                     <span class="mobile-menu-item-label"><i class="lucide lucide-refresh-cw" aria-hidden="true"></i><span>Sync scrolling</span></span>
                                     <span id="mobile-sync-status" class="mobile-menu-item-status">On</span>
@@ -234,7 +234,7 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                     </div>
                                 </section>
 
-                                <section class="mobile-menu-section">
+                                <section id="mobile-export-section" class="mobile-menu-section">
                                     <button class="mobile-menu-section-toggle" type="button" aria-expanded="false" aria-controls="mobile-menu-export-panel" data-mobile-menu-section-toggle>
                                         <span><i class="lucide lucide-download" aria-hidden="true"></i>Export</span><i class="lucide lucide-chevron-down mobile-menu-section-chevron" aria-hidden="true"></i>
                                     </button>
@@ -389,7 +389,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
                 <i class="lucide lucide-panel-left-close" aria-hidden="true"></i>
               </button>
               <span class="document-sidebar-tab-divider" aria-hidden="true"></span>
-              <div class="tab-list" id="tab-list" role="tablist" aria-label="Open document tabs"></div>
+              <div class="tab-list" id="tab-list" role="tablist" aria-label="Open tabs"></div>
               <button class="tab-new-btn" id="tab-new-btn" title="New file (Ctrl+T)" aria-label="Create new file">
                 <i class="lucide lucide-plus" aria-hidden="true"></i>
               </button>
diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 7faa4b60..963322a5 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -7347,6 +7347,10 @@ document.addEventListener("DOMContentLoaded", async function () {
   function setReviewMode(enabled, options) {
     options = options || {};
     const nextState = Boolean(enabled);
+    if (nextState && isReleaseNotesActive()) {
+      announceToScreenReader('Release notes do not support comments or suggestions.');
+      return;
+    }
     const wasActive = reviewModeActive;
     if (nextState && !wasActive) {
       reviewPreviousViewModes.set(activeTabId, currentViewMode || 'split');
@@ -7885,6 +7889,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
 
     updateMissingDocumentControlState([
+      copyMarkdownButton,
+      reviewToggle,
       exportDropdown,
       shareButton,
       liveShareButton,
@@ -7928,6 +7934,8 @@ document.addEventListener("DOMContentLoaded", async function () {
   function clearActiveDocument() {
     activeTabId = null;
     selectedDocumentId = null;
+    document.body.classList.remove('release-notes-active');
+    updateReleaseNotesActionAvailability(false);
     removeStorageItem(ACTIVE_TAB_KEY);
     closeReviewComposer();
     clearReviewDecorations();
@@ -8007,12 +8015,12 @@ document.addEventListener("DOMContentLoaded", async function () {
     const menuBtn = document.createElement('button');
     menuBtn.type = 'button';
     menuBtn.className = 'tab-menu-btn';
-    menuBtn.setAttribute('aria-label', 'File options for ' + (tab.title || 'Untitled'));
+    menuBtn.setAttribute('aria-label', (isReleaseNotesTab(tab) ? 'Release notes options for ' : 'File options for ') + (tab.title || 'Untitled'));
     menuBtn.setAttribute('aria-haspopup', 'menu');
     menuBtn.setAttribute('aria-expanded', 'false');
     menuBtn.setAttribute('aria-controls', menuId);
     menuBtn.setAttribute('draggable', 'false');
-    menuBtn.title = 'File options';
+    menuBtn.title = isReleaseNotesTab(tab) ? 'Release notes options' : 'File options';
     menuBtn.innerHTML = '<i class="lucide lucide-ellipsis" aria-hidden="true"></i>';
 
     const dropdown = document.createElement('div');
@@ -8202,7 +8210,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     }, {
       id: 'all', icon: 'lucide-square-x', label: 'Close all'
     }];
-    const actions = isReleaseNotesTab(tab) ? closeActions : [{
+    const actions = isReleaseNotesTab(tab) ? closeActions.slice(0, 1) : [{
       id: isCombinedSplitTab ? 'split-close' : 'split',
       icon: isCombinedSplitTab ? 'lucide-panel-right-close' : 'lucide-columns-2',
       label: isCombinedSplitTab ? 'Exit split view' : 'Open in split view',
@@ -8919,6 +8927,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     saveSecondarySplitState();
     closeReviewComposer();
     clearReviewDecorations();
+    if (isReleaseNotesTab(tab) && reviewModeActive) setReviewMode(false);
     
     // Clear typing timeout and reset tracking for the new tab
     if (typingTimeout) {
@@ -8929,11 +8938,14 @@ document.addEventListener("DOMContentLoaded", async function () {
     pendingState = null;
     
     activeTabId = tabId;
+    const releaseNotesActive = isReleaseNotesTab(tab);
+    document.body.classList.toggle('release-notes-active', releaseNotesActive);
     if (swapSplitPanes) secondarySplitTabId = previousActiveTabId;
     saveActiveTabId(activeTabId);
     updateNoOpenDocumentState();
-    selectedDocumentId = tabId;
-    setSingleDocumentTreeSelection('document', tabId);
+    selectedDocumentId = releaseNotesActive ? null : tabId;
+    if (releaseNotesActive) clearDocumentTreeSelection({ announce: false });
+    else setSingleDocumentTreeSelection('document', tabId);
     tab.lastOpenedAt = Date.now();
     if (!isTemporaryDocument(tab)) saveTabsToStorage(tabs, [tab.id]);
     markdownEditor.value = tab.content;
@@ -21682,6 +21694,7 @@ ${selector} .arrowheadPath {
   });
 
   copyMarkdownButton.addEventListener("click", async function () {
+    if (isReleaseNotesActive()) return;
     if (blockShareSnapshotSourceAccess()) return;
     try {
       await copyTextToClipboard(markdownEditor.value);
@@ -22338,6 +22351,8 @@ ${selector} .arrowheadPath {
 
   function updateReleaseNotesActionAvailability(releaseNotesActive) {
     const actions = [
+      copyMarkdownButton,
+      reviewToggle,
       exportDropdown,
       exportMd,
       exportHtml,
@@ -22350,6 +22365,8 @@ ${selector} .arrowheadPath {
       mobileExportHtml,
       mobileExportPdf,
       mobileExportPng,
+      mobileCopyMarkdownButton,
+      mobileReviewToggle,
       mobileShareButton,
       mobileLiveShareButton
     ];
@@ -22416,6 +22433,7 @@ ${selector} .arrowheadPath {
     const liveShareDocumentActive = isLiveShareDocumentActive();
     const liveShareGuestDocumentActive = liveShareDocumentActive && !isLiveShareHostDocumentActive();
     const viewOnly = isLiveViewOnlyParticipant() || snapshotViewOnly || releaseNotesActive;
+    document.body.classList.toggle('release-notes-active', releaseNotesActive);
     const sourceReadOnly = viewOnly || reviewModeActive;
     if (markdownEditor) {
       markdownEditor.readOnly = sourceReadOnly;
@@ -24467,6 +24485,10 @@ ${selector} .arrowheadPath {
 
     if (isCmdOrCtrl && e.shiftKey && !e.altKey && key === 'c') {
       e.preventDefault();
+      if (isReleaseNotesActive()) {
+        announceToScreenReader('Release notes do not expose Markdown source.');
+        return;
+      }
       const focusedEditor = document.activeElement === documentSplitEditor ? documentSplitEditor : markdownEditor;
       const selected = focusedEditor.value.slice(focusedEditor.selectionStart, focusedEditor.selectionEnd);
       copyTextToClipboard(selected || focusedEditor.value)
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index dad94d0b..1d8f56d8 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -11717,6 +11717,30 @@ html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch {
 /* ========================================
    VERSIONED RELEASE NOTES
    ======================================== */
+body.release-notes-active .header-view-toolbar,
+body.release-notes-active .header-view-divider,
+body.release-notes-active #toggle-sync,
+body.release-notes-active #copy-markdown-button,
+body.release-notes-active .header-export-dropdown,
+body.release-notes-active #share-button,
+body.release-notes-active #live-share-button,
+body.release-notes-active #live-share-toolbar-participants,
+body.release-notes-active #review-toggle,
+body.release-notes-active #markdown-format-toolbar,
+body.release-notes-active .app-status-bar,
+body.release-notes-active .mobile-menu-overview,
+body.release-notes-active #mobile-document-tools-heading,
+body.release-notes-active #mobile-document-tools,
+body.release-notes-active #mobile-export-section,
+body.release-notes-active #mobile-share-button,
+body.release-notes-active #mobile-live-share-button,
+body.release-notes-active #review-panel,
+body.release-notes-active #review-panel-backdrop,
+body.release-notes-active #review-composer,
+body.release-notes-active #review-pins-layer {
+  display: none !important;
+}
+
 .tab-item.release-notes-tab {
   width: max-content;
   min-width: max-content;
diff --git a/index.html b/index.html
index 78ebdcf9..e23fd853 100644
--- a/index.html
+++ b/index.html
@@ -152,7 +152,7 @@ <h1 class="h4 mb-0">Markdown Viewer<span class="visually-hidden"> - Online Markd
                         <button class="tool-button view-toggle-btn is-active" data-view-mode="split" aria-pressed="true" title="Split" aria-label="Split editor and preview"><i class="lucide lucide-columns-2" aria-hidden="true"></i></button>
                         <button class="tool-button view-toggle-btn" data-view-mode="preview" aria-pressed="false" title="Preview (Ctrl/Cmd+E toggles Edit/Preview)" aria-label="Preview Markdown" aria-keyshortcuts="Control+E Meta+E"><i class="lucide lucide-eye" aria-hidden="true"></i></button>
                     </div>
-                    <span class="header-toolbar-divider" aria-hidden="true"></span>
+                    <span class="header-toolbar-divider header-view-divider" aria-hidden="true"></span>
 
                     <button id="toggle-sync" class="tool-button header-icon-command sync-enabled sync-active" type="button" title="Disable synchronized scrolling (Ctrl/Cmd+Shift+S)" aria-label="Disable synchronized scrolling" aria-keyshortcuts="Control+Shift+S Meta+Shift+S" aria-pressed="true">
                         <i class="lucide lucide-refresh-cw" aria-hidden="true"></i>
@@ -293,8 +293,8 @@ <h3 id="mobile-menu-view-heading" class="mobile-menu-group-label">View</h3>
                             </section>
 
                         <nav class="mobile-menu-items" aria-label="Application menu">
-                            <h3 class="mobile-menu-group-label">Document tools</h3>
-                            <div class="mobile-menu-command-group" role="group" aria-label="Document tools">
+                            <h3 id="mobile-document-tools-heading" class="mobile-menu-group-label">Document tools</h3>
+                            <div id="mobile-document-tools" class="mobile-menu-command-group" role="group" aria-label="Document tools">
                                 <button id="mobile-toggle-sync" class="mobile-menu-item mobile-menu-command mobile-settings-item is-active" type="button" title="Disable synchronized scrolling" aria-label="Disable synchronized scrolling" aria-pressed="true">
                                     <span class="mobile-menu-item-label"><i class="lucide lucide-refresh-cw" aria-hidden="true"></i><span>Sync scrolling</span></span>
                                     <span id="mobile-sync-status" class="mobile-menu-item-status">On</span>
@@ -327,7 +327,7 @@ <h3 class="mobile-menu-group-label">Actions</h3>
                                     </div>
                                 </section>
 
-                                <section class="mobile-menu-section">
+                                <section id="mobile-export-section" class="mobile-menu-section">
                                     <button class="mobile-menu-section-toggle" type="button" aria-expanded="false" aria-controls="mobile-menu-export-panel" data-mobile-menu-section-toggle>
                                         <span><i class="lucide lucide-download" aria-hidden="true"></i>Export</span><i class="lucide lucide-chevron-down mobile-menu-section-chevron" aria-hidden="true"></i>
                                     </button>
@@ -482,7 +482,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
                 <i class="lucide lucide-panel-left-close" aria-hidden="true"></i>
               </button>
               <span class="document-sidebar-tab-divider" aria-hidden="true"></span>
-              <div class="tab-list" id="tab-list" role="tablist" aria-label="Open document tabs"></div>
+              <div class="tab-list" id="tab-list" role="tablist" aria-label="Open tabs"></div>
               <button class="tab-new-btn" id="tab-new-btn" title="New file (Ctrl+T)" aria-label="Create new file">
                 <i class="lucide lucide-plus" aria-hidden="true"></i>
               </button>
diff --git a/script.js b/script.js
index 7faa4b60..963322a5 100644
--- a/script.js
+++ b/script.js
@@ -7347,6 +7347,10 @@ document.addEventListener("DOMContentLoaded", async function () {
   function setReviewMode(enabled, options) {
     options = options || {};
     const nextState = Boolean(enabled);
+    if (nextState && isReleaseNotesActive()) {
+      announceToScreenReader('Release notes do not support comments or suggestions.');
+      return;
+    }
     const wasActive = reviewModeActive;
     if (nextState && !wasActive) {
       reviewPreviousViewModes.set(activeTabId, currentViewMode || 'split');
@@ -7885,6 +7889,8 @@ document.addEventListener("DOMContentLoaded", async function () {
     }
 
     updateMissingDocumentControlState([
+      copyMarkdownButton,
+      reviewToggle,
       exportDropdown,
       shareButton,
       liveShareButton,
@@ -7928,6 +7934,8 @@ document.addEventListener("DOMContentLoaded", async function () {
   function clearActiveDocument() {
     activeTabId = null;
     selectedDocumentId = null;
+    document.body.classList.remove('release-notes-active');
+    updateReleaseNotesActionAvailability(false);
     removeStorageItem(ACTIVE_TAB_KEY);
     closeReviewComposer();
     clearReviewDecorations();
@@ -8007,12 +8015,12 @@ document.addEventListener("DOMContentLoaded", async function () {
     const menuBtn = document.createElement('button');
     menuBtn.type = 'button';
     menuBtn.className = 'tab-menu-btn';
-    menuBtn.setAttribute('aria-label', 'File options for ' + (tab.title || 'Untitled'));
+    menuBtn.setAttribute('aria-label', (isReleaseNotesTab(tab) ? 'Release notes options for ' : 'File options for ') + (tab.title || 'Untitled'));
     menuBtn.setAttribute('aria-haspopup', 'menu');
     menuBtn.setAttribute('aria-expanded', 'false');
     menuBtn.setAttribute('aria-controls', menuId);
     menuBtn.setAttribute('draggable', 'false');
-    menuBtn.title = 'File options';
+    menuBtn.title = isReleaseNotesTab(tab) ? 'Release notes options' : 'File options';
     menuBtn.innerHTML = '<i class="lucide lucide-ellipsis" aria-hidden="true"></i>';
 
     const dropdown = document.createElement('div');
@@ -8202,7 +8210,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     }, {
       id: 'all', icon: 'lucide-square-x', label: 'Close all'
     }];
-    const actions = isReleaseNotesTab(tab) ? closeActions : [{
+    const actions = isReleaseNotesTab(tab) ? closeActions.slice(0, 1) : [{
       id: isCombinedSplitTab ? 'split-close' : 'split',
       icon: isCombinedSplitTab ? 'lucide-panel-right-close' : 'lucide-columns-2',
       label: isCombinedSplitTab ? 'Exit split view' : 'Open in split view',
@@ -8919,6 +8927,7 @@ document.addEventListener("DOMContentLoaded", async function () {
     saveSecondarySplitState();
     closeReviewComposer();
     clearReviewDecorations();
+    if (isReleaseNotesTab(tab) && reviewModeActive) setReviewMode(false);
     
     // Clear typing timeout and reset tracking for the new tab
     if (typingTimeout) {
@@ -8929,11 +8938,14 @@ document.addEventListener("DOMContentLoaded", async function () {
     pendingState = null;
     
     activeTabId = tabId;
+    const releaseNotesActive = isReleaseNotesTab(tab);
+    document.body.classList.toggle('release-notes-active', releaseNotesActive);
     if (swapSplitPanes) secondarySplitTabId = previousActiveTabId;
     saveActiveTabId(activeTabId);
     updateNoOpenDocumentState();
-    selectedDocumentId = tabId;
-    setSingleDocumentTreeSelection('document', tabId);
+    selectedDocumentId = releaseNotesActive ? null : tabId;
+    if (releaseNotesActive) clearDocumentTreeSelection({ announce: false });
+    else setSingleDocumentTreeSelection('document', tabId);
     tab.lastOpenedAt = Date.now();
     if (!isTemporaryDocument(tab)) saveTabsToStorage(tabs, [tab.id]);
     markdownEditor.value = tab.content;
@@ -21682,6 +21694,7 @@ ${selector} .arrowheadPath {
   });
 
   copyMarkdownButton.addEventListener("click", async function () {
+    if (isReleaseNotesActive()) return;
     if (blockShareSnapshotSourceAccess()) return;
     try {
       await copyTextToClipboard(markdownEditor.value);
@@ -22338,6 +22351,8 @@ ${selector} .arrowheadPath {
 
   function updateReleaseNotesActionAvailability(releaseNotesActive) {
     const actions = [
+      copyMarkdownButton,
+      reviewToggle,
       exportDropdown,
       exportMd,
       exportHtml,
@@ -22350,6 +22365,8 @@ ${selector} .arrowheadPath {
       mobileExportHtml,
       mobileExportPdf,
       mobileExportPng,
+      mobileCopyMarkdownButton,
+      mobileReviewToggle,
       mobileShareButton,
       mobileLiveShareButton
     ];
@@ -22416,6 +22433,7 @@ ${selector} .arrowheadPath {
     const liveShareDocumentActive = isLiveShareDocumentActive();
     const liveShareGuestDocumentActive = liveShareDocumentActive && !isLiveShareHostDocumentActive();
     const viewOnly = isLiveViewOnlyParticipant() || snapshotViewOnly || releaseNotesActive;
+    document.body.classList.toggle('release-notes-active', releaseNotesActive);
     const sourceReadOnly = viewOnly || reviewModeActive;
     if (markdownEditor) {
       markdownEditor.readOnly = sourceReadOnly;
@@ -24467,6 +24485,10 @@ ${selector} .arrowheadPath {
 
     if (isCmdOrCtrl && e.shiftKey && !e.altKey && key === 'c') {
       e.preventDefault();
+      if (isReleaseNotesActive()) {
+        announceToScreenReader('Release notes do not expose Markdown source.');
+        return;
+      }
       const focusedEditor = document.activeElement === documentSplitEditor ? documentSplitEditor : markdownEditor;
       const selected = focusedEditor.value.slice(focusedEditor.selectionStart, focusedEditor.selectionEnd);
       copyTextToClipboard(selected || focusedEditor.value)
diff --git a/styles.css b/styles.css
index dad94d0b..1d8f56d8 100644
--- a/styles.css
+++ b/styles.css
@@ -11717,6 +11717,30 @@ html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch {
 /* ========================================
    VERSIONED RELEASE NOTES
    ======================================== */
+body.release-notes-active .header-view-toolbar,
+body.release-notes-active .header-view-divider,
+body.release-notes-active #toggle-sync,
+body.release-notes-active #copy-markdown-button,
+body.release-notes-active .header-export-dropdown,
+body.release-notes-active #share-button,
+body.release-notes-active #live-share-button,
+body.release-notes-active #live-share-toolbar-participants,
+body.release-notes-active #review-toggle,
+body.release-notes-active #markdown-format-toolbar,
+body.release-notes-active .app-status-bar,
+body.release-notes-active .mobile-menu-overview,
+body.release-notes-active #mobile-document-tools-heading,
+body.release-notes-active #mobile-document-tools,
+body.release-notes-active #mobile-export-section,
+body.release-notes-active #mobile-share-button,
+body.release-notes-active #mobile-live-share-button,
+body.release-notes-active #review-panel,
+body.release-notes-active #review-panel-backdrop,
+body.release-notes-active #review-composer,
+body.release-notes-active #review-pins-layer {
+  display: none !important;
+}
+
 .tab-item.release-notes-tab {
   width: max-content;
   min-width: max-content;
diff --git a/tests/e2e/smoke.spec.js b/tests/e2e/smoke.spec.js
index aff00d74..0c7a32b7 100644
--- a/tests/e2e/smoke.spec.js
+++ b/tests/e2e/smoke.spec.js
@@ -1,6 +1,6 @@
 const { test, expect } = require('@playwright/test');
 const { execFileSync } = require('node:child_process');
-const { openApp } = require('../helpers/app');
+const { openApp, stubClipboard } = require('../helpers/app');
 
 test('static build smoke check passes', () => {
   const output = execFileSync('node', ['tests/helpers/static-build-check.mjs'], {
@@ -30,3 +30,69 @@ test('first run opens release notes in the background without stealing editor fo
   await expect(page.locator('#markdown-editor')).toBeEditable();
   expect(criticalErrors).toEqual([]);
 });
+
+test('release notes behave as an application surface instead of a document', async ({ page }) => {
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await openApp(page);
+  await stubClipboard(page);
+
+  await page.locator('#review-toggle').click();
+  await expect(page.locator('#review-panel')).toBeVisible();
+  await page.locator('#header-about-button').click();
+  await page.getByRole('button', { name: 'Show Release Notes' }).click();
+
+  const releaseTab = page.locator('#tab-list .release-notes-tab');
+  await expect(releaseTab).toHaveClass(/active/);
+  await expect(page.locator('body')).toHaveClass(/release-notes-active/);
+  await expect(page.locator('#document-tree [aria-current="page"]')).toHaveCount(0);
+  await expect(page.locator('#review-panel')).toBeHidden();
+  await expect(page.locator('.review-target-actions')).toHaveCount(0);
+
+  await expect(page.locator('.header-view-toolbar')).toBeHidden();
+  await expect(page.locator('#toggle-sync')).toBeHidden();
+  await expect(page.locator('#copy-markdown-button')).toBeHidden();
+  await expect(page.locator('#copy-markdown-button')).toBeDisabled();
+  await expect(page.locator('#exportDropdown')).toBeHidden();
+  await expect(page.locator('#share-button')).toBeHidden();
+  await expect(page.locator('#live-share-button')).toBeHidden();
+  await expect(page.locator('#review-toggle')).toBeHidden();
+  await expect(page.locator('#review-toggle')).toBeDisabled();
+  await expect(page.locator('#markdown-format-toolbar')).toBeHidden();
+  await expect(page.locator('.app-status-bar')).toBeHidden();
+
+  await expect(page.locator('#importDropdown')).toBeVisible();
+  await expect(page.locator('[aria-label="Report an issue"]')).toBeVisible();
+  await expect(page.locator('#header-about-button')).toBeVisible();
+  await expect(page.locator('#workspaceSettingsDropdown')).toBeVisible();
+
+  await page.keyboard.press('Control+Shift+C');
+  await expect.poll(() => page.evaluate(() => window.__copiedText)).toBe('');
+  await page.evaluate(() => document.getElementById('review-toggle').click());
+  await expect(page.locator('#review-panel')).toBeHidden();
+
+  await releaseTab.locator('.tab-menu-btn').click();
+  const releaseMenuItems = page.locator('.tab-menu-dropdown.open .tab-menu-item');
+  await expect(releaseMenuItems).toHaveCount(1);
+  await expect(releaseMenuItems).toHaveText('Close');
+
+  await page.setViewportSize({ width: 375, height: 812 });
+  await page.locator('#mobile-menu-toggle').click();
+  await expect(page.locator('.mobile-menu-overview')).toBeHidden();
+  await expect(page.locator('#mobile-document-tools')).toBeHidden();
+  await expect(page.locator('#mobile-export-section')).toBeHidden();
+  await expect(page.locator('#mobile-share-button')).toBeHidden();
+  await expect(page.locator('#mobile-live-share-button')).toBeHidden();
+  await expect(page.locator('[aria-controls="mobile-menu-new-panel"]')).toBeVisible();
+  await page.locator('#close-mobile-menu').click();
+
+  await page.locator('#tab-list .tab-item:not(.release-notes-tab)').first().click();
+  await page.setViewportSize({ width: 1440, height: 900 });
+  await expect(page.locator('body')).not.toHaveClass(/release-notes-active/);
+  await expect(page.locator('#copy-markdown-button')).toBeVisible();
+  await expect(page.locator('#copy-markdown-button')).toBeEnabled();
+  await expect(page.locator('#review-toggle')).toBeVisible();
+  await expect(page.locator('#review-toggle')).toBeEnabled();
+  await expect(page.locator('#markdown-format-toolbar')).toBeVisible();
+  await expect(page.locator('.app-status-bar')).toBeVisible();
+  await expect(page.locator('#document-tree [aria-current="page"]')).toHaveCount(1);
+});

From 40a23b436a1a48031ddd4ef139a00e12912e9c25 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Thu, 13 Aug 2026 00:09:20 +0530
Subject: [PATCH 14/17] fix(release-notes): disable document tools in place

---
 desktop-app/resources/js/script.js | 85 +++++++++++++++++++-----------
 desktop-app/resources/styles.css   | 22 ++------
 script.js                          | 85 +++++++++++++++++++-----------
 styles.css                         | 22 ++------
 tests/e2e/smoke.spec.js            | 53 ++++++++++++-------
 5 files changed, 151 insertions(+), 116 deletions(-)

diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 963322a5..14488a00 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -8015,12 +8015,12 @@ document.addEventListener("DOMContentLoaded", async function () {
     const menuBtn = document.createElement('button');
     menuBtn.type = 'button';
     menuBtn.className = 'tab-menu-btn';
-    menuBtn.setAttribute('aria-label', (isReleaseNotesTab(tab) ? 'Release notes options for ' : 'File options for ') + (tab.title || 'Untitled'));
+    menuBtn.setAttribute('aria-label', 'File options for ' + (tab.title || 'Untitled'));
     menuBtn.setAttribute('aria-haspopup', 'menu');
     menuBtn.setAttribute('aria-expanded', 'false');
     menuBtn.setAttribute('aria-controls', menuId);
     menuBtn.setAttribute('draggable', 'false');
-    menuBtn.title = isReleaseNotesTab(tab) ? 'Release notes options' : 'File options';
+    menuBtn.title = 'File options';
     menuBtn.innerHTML = '<i class="lucide lucide-ellipsis" aria-hidden="true"></i>';
 
     const dropdown = document.createElement('div');
@@ -8028,33 +8028,29 @@ document.addEventListener("DOMContentLoaded", async function () {
     dropdown.className = 'tab-menu-dropdown';
     dropdown.setAttribute('data-tab-menu-dropdown', 'true');
     dropdown.setAttribute('role', 'menu');
-    if (isReleaseNotesTab(tab)) {
-      dropdown.innerHTML = '<button type="button" class="tab-menu-item" role="menuitem" data-action="close"><i class="lucide lucide-x"></i> Close</button>';
-    } else {
-      const duplicateAction = isShareSnapshotTab(tab)
-        ? ''
-        : '<button type="button" class="tab-menu-item" role="menuitem" data-action="duplicate"><i class="lucide lucide-files"></i> Duplicate</button>';
-      const downloadAction = isShareSnapshotTab(tab)
-        ? ''
-        : '<button type="button" class="tab-menu-item" role="menuitem" data-action="download"><i class="lucide lucide-download"></i> Download Markdown</button>';
-      const favoriteAction = isShareSnapshotTab(tab)
-        ? ''
-        : '<button type="button" class="tab-menu-item" role="menuitem" data-action="favorite"><i class="lucide ' + (tab.favorite ? 'lucide-star-filled' : 'lucide-star') + '"></i> ' + (tab.favorite ? 'Remove from Favorites' : 'Add to Favorites') + '</button>';
-      const isCombinedSplitTab = tab.id === activeTabId && Boolean(secondarySplitTabId);
-      const splitAction = isCombinedSplitTab
-        ? '<button type="button" class="tab-menu-item" role="menuitem" data-action="split-close"><i class="lucide lucide-panel-right-close"></i> Exit split view</button>'
-        : tabs.length > 1
-        ? '<button type="button" class="tab-menu-item" role="menuitem" data-action="split"><i class="lucide lucide-columns-2"></i> Open in split view</button>'
-        : '';
-      dropdown.innerHTML =
-        '<button type="button" class="tab-menu-item" role="menuitem" data-action="rename"><i class="lucide lucide-square-pen"></i> Rename</button>' +
-        duplicateAction +
-        favoriteAction +
-        splitAction +
-        downloadAction +
-        '<div class="tab-menu-separator" role="separator"></div>' +
-        '<button type="button" class="tab-menu-item" role="menuitem" data-action="close"><i class="lucide lucide-x"></i> Close</button>';
-    }
+    const duplicateAction = isShareSnapshotTab(tab)
+      ? ''
+      : '<button type="button" class="tab-menu-item" role="menuitem" data-action="duplicate"><i class="lucide lucide-files"></i> Duplicate</button>';
+    const downloadAction = isShareSnapshotTab(tab)
+      ? ''
+      : '<button type="button" class="tab-menu-item" role="menuitem" data-action="download"><i class="lucide lucide-download"></i> Download Markdown</button>';
+    const favoriteAction = isShareSnapshotTab(tab)
+      ? ''
+      : '<button type="button" class="tab-menu-item" role="menuitem" data-action="favorite"><i class="lucide ' + (tab.favorite ? 'lucide-star-filled' : 'lucide-star') + '"></i> ' + (tab.favorite ? 'Remove from Favorites' : 'Add to Favorites') + '</button>';
+    const isCombinedSplitTab = tab.id === activeTabId && Boolean(secondarySplitTabId);
+    const splitAction = isCombinedSplitTab
+      ? '<button type="button" class="tab-menu-item" role="menuitem" data-action="split-close"><i class="lucide lucide-panel-right-close"></i> Exit split view</button>'
+      : tabs.length > 1
+      ? '<button type="button" class="tab-menu-item" role="menuitem" data-action="split"><i class="lucide lucide-columns-2"></i> Open in split view</button>'
+      : '';
+    dropdown.innerHTML =
+      '<button type="button" class="tab-menu-item" role="menuitem" data-action="rename"><i class="lucide lucide-square-pen"></i> Rename</button>' +
+      duplicateAction +
+      favoriteAction +
+      splitAction +
+      downloadAction +
+      '<div class="tab-menu-separator" role="separator"></div>' +
+      '<button type="button" class="tab-menu-item" role="menuitem" data-action="close"><i class="lucide lucide-x"></i> Close</button>';
 
     menuBtn.addEventListener('click', function(e) {
       e.preventDefault();
@@ -8347,7 +8343,9 @@ document.addEventListener("DOMContentLoaded", async function () {
         titleSpan.title = getDocumentTabHoverTitle(tab);
       }
 
-      const tabMenu = createTabActionMenu(tab, { menuIdPrefix: 'desktop-tab-menu' });
+      const tabMenu = isReleaseNotesTab(tab)
+        ? null
+        : createTabActionMenu(tab, { menuIdPrefix: 'desktop-tab-menu' });
 
       const closeButton = document.createElement('button');
       closeButton.type = 'button';
@@ -8365,7 +8363,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 
       item.appendChild(fileIcon);
       item.appendChild(titleSpan);
-      item.appendChild(tabMenu.button);
+      if (tabMenu) item.appendChild(tabMenu.button);
       item.appendChild(closeButton);
 
       item.addEventListener('contextmenu', function(event) {
@@ -22351,6 +22349,7 @@ ${selector} .arrowheadPath {
 
   function updateReleaseNotesActionAvailability(releaseNotesActive) {
     const actions = [
+      toggleSyncButton,
       copyMarkdownButton,
       reviewToggle,
       exportDropdown,
@@ -22365,12 +22364,21 @@ ${selector} .arrowheadPath {
       mobileExportHtml,
       mobileExportPdf,
       mobileExportPng,
+      mobileToggleSyncButton,
       mobileCopyMarkdownButton,
       mobileReviewToggle,
       mobileShareButton,
       mobileLiveShareButton
     ];
 
+    viewModeButtons.forEach(function(action) { actions.push(action); });
+    mobileViewModeButtons.forEach(function(action) { actions.push(action); });
+    if (markdownFormatToolbar) {
+      markdownFormatToolbar.querySelectorAll('button').forEach(function(action) { actions.push(action); });
+      markdownFormatToolbar.classList.toggle('is-release-notes-disabled', releaseNotesActive);
+      markdownFormatToolbar.setAttribute('aria-disabled', releaseNotesActive ? 'true' : 'false');
+    }
+
     actions.forEach(function(action) {
       if (!action) return;
       if (releaseNotesActive) {
@@ -22381,11 +22389,15 @@ ${selector} .arrowheadPath {
               ? action.getAttribute('tabindex')
               : '__missing__';
           }
+          action.dataset.releaseNotesOriginalTitle = action.hasAttribute('title')
+            ? action.getAttribute('title')
+            : '__missing__';
         }
         action.dataset.releaseNotesDisabled = 'true';
         if ('disabled' in action) action.disabled = true;
         action.classList.add('disabled');
         action.setAttribute('aria-disabled', 'true');
+        action.setAttribute('title', 'Unavailable in Release Notes');
         if (action.tagName === 'A') action.setAttribute('tabindex', '-1');
         return;
       }
@@ -22401,9 +22413,16 @@ ${selector} .arrowheadPath {
       const remainsDisabled = wasDisabled || hasAnotherDisabledState;
       delete action.dataset.releaseNotesDisabled;
       delete action.dataset.releaseNotesWasDisabled;
+      const originalTitle = action.dataset.releaseNotesOriginalTitle;
+      delete action.dataset.releaseNotesOriginalTitle;
       if ('disabled' in action) action.disabled = remainsDisabled;
       action.classList.toggle('disabled', remainsDisabled);
       action.setAttribute('aria-disabled', remainsDisabled ? 'true' : 'false');
+      if (originalTitle && originalTitle !== '__missing__') {
+        action.setAttribute('title', originalTitle);
+      } else {
+        action.removeAttribute('title');
+      }
       if (action.tagName === 'A') {
         const originalTabindex = action.dataset.releaseNotesOriginalTabindex;
         delete action.dataset.releaseNotesOriginalTabindex;
@@ -22434,6 +22453,7 @@ ${selector} .arrowheadPath {
     const liveShareGuestDocumentActive = liveShareDocumentActive && !isLiveShareHostDocumentActive();
     const viewOnly = isLiveViewOnlyParticipant() || snapshotViewOnly || releaseNotesActive;
     document.body.classList.toggle('release-notes-active', releaseNotesActive);
+    if (!releaseNotesActive) updateReleaseNotesActionAvailability(false);
     const sourceReadOnly = viewOnly || reviewModeActive;
     if (markdownEditor) {
       markdownEditor.readOnly = sourceReadOnly;
@@ -22571,8 +22591,9 @@ ${selector} .arrowheadPath {
         updateUndoRedoButtons();
       }
     }
+    updateSyncToggleVisibility(currentViewMode);
     updateDocumentToolbarAvailability(hasActiveOpenDocument());
-    updateReleaseNotesActionAvailability(releaseNotesActive);
+    if (releaseNotesActive) updateReleaseNotesActionAvailability(true);
   }
 
   function getLiveRoomSocketUrl(roomId, secret, auth) {
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 1d8f56d8..88c4739f 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -11717,23 +11717,6 @@ html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch {
 /* ========================================
    VERSIONED RELEASE NOTES
    ======================================== */
-body.release-notes-active .header-view-toolbar,
-body.release-notes-active .header-view-divider,
-body.release-notes-active #toggle-sync,
-body.release-notes-active #copy-markdown-button,
-body.release-notes-active .header-export-dropdown,
-body.release-notes-active #share-button,
-body.release-notes-active #live-share-button,
-body.release-notes-active #live-share-toolbar-participants,
-body.release-notes-active #review-toggle,
-body.release-notes-active #markdown-format-toolbar,
-body.release-notes-active .app-status-bar,
-body.release-notes-active .mobile-menu-overview,
-body.release-notes-active #mobile-document-tools-heading,
-body.release-notes-active #mobile-document-tools,
-body.release-notes-active #mobile-export-section,
-body.release-notes-active #mobile-share-button,
-body.release-notes-active #mobile-live-share-button,
 body.release-notes-active #review-panel,
 body.release-notes-active #review-panel-backdrop,
 body.release-notes-active #review-composer,
@@ -11741,6 +11724,11 @@ body.release-notes-active #review-pins-layer {
   display: none !important;
 }
 
+body.release-notes-active .app-status-bar,
+body.release-notes-active .mobile-stats-container {
+  opacity: 0.5;
+}
+
 .tab-item.release-notes-tab {
   width: max-content;
   min-width: max-content;
diff --git a/script.js b/script.js
index 963322a5..14488a00 100644
--- a/script.js
+++ b/script.js
@@ -8015,12 +8015,12 @@ document.addEventListener("DOMContentLoaded", async function () {
     const menuBtn = document.createElement('button');
     menuBtn.type = 'button';
     menuBtn.className = 'tab-menu-btn';
-    menuBtn.setAttribute('aria-label', (isReleaseNotesTab(tab) ? 'Release notes options for ' : 'File options for ') + (tab.title || 'Untitled'));
+    menuBtn.setAttribute('aria-label', 'File options for ' + (tab.title || 'Untitled'));
     menuBtn.setAttribute('aria-haspopup', 'menu');
     menuBtn.setAttribute('aria-expanded', 'false');
     menuBtn.setAttribute('aria-controls', menuId);
     menuBtn.setAttribute('draggable', 'false');
-    menuBtn.title = isReleaseNotesTab(tab) ? 'Release notes options' : 'File options';
+    menuBtn.title = 'File options';
     menuBtn.innerHTML = '<i class="lucide lucide-ellipsis" aria-hidden="true"></i>';
 
     const dropdown = document.createElement('div');
@@ -8028,33 +8028,29 @@ document.addEventListener("DOMContentLoaded", async function () {
     dropdown.className = 'tab-menu-dropdown';
     dropdown.setAttribute('data-tab-menu-dropdown', 'true');
     dropdown.setAttribute('role', 'menu');
-    if (isReleaseNotesTab(tab)) {
-      dropdown.innerHTML = '<button type="button" class="tab-menu-item" role="menuitem" data-action="close"><i class="lucide lucide-x"></i> Close</button>';
-    } else {
-      const duplicateAction = isShareSnapshotTab(tab)
-        ? ''
-        : '<button type="button" class="tab-menu-item" role="menuitem" data-action="duplicate"><i class="lucide lucide-files"></i> Duplicate</button>';
-      const downloadAction = isShareSnapshotTab(tab)
-        ? ''
-        : '<button type="button" class="tab-menu-item" role="menuitem" data-action="download"><i class="lucide lucide-download"></i> Download Markdown</button>';
-      const favoriteAction = isShareSnapshotTab(tab)
-        ? ''
-        : '<button type="button" class="tab-menu-item" role="menuitem" data-action="favorite"><i class="lucide ' + (tab.favorite ? 'lucide-star-filled' : 'lucide-star') + '"></i> ' + (tab.favorite ? 'Remove from Favorites' : 'Add to Favorites') + '</button>';
-      const isCombinedSplitTab = tab.id === activeTabId && Boolean(secondarySplitTabId);
-      const splitAction = isCombinedSplitTab
-        ? '<button type="button" class="tab-menu-item" role="menuitem" data-action="split-close"><i class="lucide lucide-panel-right-close"></i> Exit split view</button>'
-        : tabs.length > 1
-        ? '<button type="button" class="tab-menu-item" role="menuitem" data-action="split"><i class="lucide lucide-columns-2"></i> Open in split view</button>'
-        : '';
-      dropdown.innerHTML =
-        '<button type="button" class="tab-menu-item" role="menuitem" data-action="rename"><i class="lucide lucide-square-pen"></i> Rename</button>' +
-        duplicateAction +
-        favoriteAction +
-        splitAction +
-        downloadAction +
-        '<div class="tab-menu-separator" role="separator"></div>' +
-        '<button type="button" class="tab-menu-item" role="menuitem" data-action="close"><i class="lucide lucide-x"></i> Close</button>';
-    }
+    const duplicateAction = isShareSnapshotTab(tab)
+      ? ''
+      : '<button type="button" class="tab-menu-item" role="menuitem" data-action="duplicate"><i class="lucide lucide-files"></i> Duplicate</button>';
+    const downloadAction = isShareSnapshotTab(tab)
+      ? ''
+      : '<button type="button" class="tab-menu-item" role="menuitem" data-action="download"><i class="lucide lucide-download"></i> Download Markdown</button>';
+    const favoriteAction = isShareSnapshotTab(tab)
+      ? ''
+      : '<button type="button" class="tab-menu-item" role="menuitem" data-action="favorite"><i class="lucide ' + (tab.favorite ? 'lucide-star-filled' : 'lucide-star') + '"></i> ' + (tab.favorite ? 'Remove from Favorites' : 'Add to Favorites') + '</button>';
+    const isCombinedSplitTab = tab.id === activeTabId && Boolean(secondarySplitTabId);
+    const splitAction = isCombinedSplitTab
+      ? '<button type="button" class="tab-menu-item" role="menuitem" data-action="split-close"><i class="lucide lucide-panel-right-close"></i> Exit split view</button>'
+      : tabs.length > 1
+      ? '<button type="button" class="tab-menu-item" role="menuitem" data-action="split"><i class="lucide lucide-columns-2"></i> Open in split view</button>'
+      : '';
+    dropdown.innerHTML =
+      '<button type="button" class="tab-menu-item" role="menuitem" data-action="rename"><i class="lucide lucide-square-pen"></i> Rename</button>' +
+      duplicateAction +
+      favoriteAction +
+      splitAction +
+      downloadAction +
+      '<div class="tab-menu-separator" role="separator"></div>' +
+      '<button type="button" class="tab-menu-item" role="menuitem" data-action="close"><i class="lucide lucide-x"></i> Close</button>';
 
     menuBtn.addEventListener('click', function(e) {
       e.preventDefault();
@@ -8347,7 +8343,9 @@ document.addEventListener("DOMContentLoaded", async function () {
         titleSpan.title = getDocumentTabHoverTitle(tab);
       }
 
-      const tabMenu = createTabActionMenu(tab, { menuIdPrefix: 'desktop-tab-menu' });
+      const tabMenu = isReleaseNotesTab(tab)
+        ? null
+        : createTabActionMenu(tab, { menuIdPrefix: 'desktop-tab-menu' });
 
       const closeButton = document.createElement('button');
       closeButton.type = 'button';
@@ -8365,7 +8363,7 @@ document.addEventListener("DOMContentLoaded", async function () {
 
       item.appendChild(fileIcon);
       item.appendChild(titleSpan);
-      item.appendChild(tabMenu.button);
+      if (tabMenu) item.appendChild(tabMenu.button);
       item.appendChild(closeButton);
 
       item.addEventListener('contextmenu', function(event) {
@@ -22351,6 +22349,7 @@ ${selector} .arrowheadPath {
 
   function updateReleaseNotesActionAvailability(releaseNotesActive) {
     const actions = [
+      toggleSyncButton,
       copyMarkdownButton,
       reviewToggle,
       exportDropdown,
@@ -22365,12 +22364,21 @@ ${selector} .arrowheadPath {
       mobileExportHtml,
       mobileExportPdf,
       mobileExportPng,
+      mobileToggleSyncButton,
       mobileCopyMarkdownButton,
       mobileReviewToggle,
       mobileShareButton,
       mobileLiveShareButton
     ];
 
+    viewModeButtons.forEach(function(action) { actions.push(action); });
+    mobileViewModeButtons.forEach(function(action) { actions.push(action); });
+    if (markdownFormatToolbar) {
+      markdownFormatToolbar.querySelectorAll('button').forEach(function(action) { actions.push(action); });
+      markdownFormatToolbar.classList.toggle('is-release-notes-disabled', releaseNotesActive);
+      markdownFormatToolbar.setAttribute('aria-disabled', releaseNotesActive ? 'true' : 'false');
+    }
+
     actions.forEach(function(action) {
       if (!action) return;
       if (releaseNotesActive) {
@@ -22381,11 +22389,15 @@ ${selector} .arrowheadPath {
               ? action.getAttribute('tabindex')
               : '__missing__';
           }
+          action.dataset.releaseNotesOriginalTitle = action.hasAttribute('title')
+            ? action.getAttribute('title')
+            : '__missing__';
         }
         action.dataset.releaseNotesDisabled = 'true';
         if ('disabled' in action) action.disabled = true;
         action.classList.add('disabled');
         action.setAttribute('aria-disabled', 'true');
+        action.setAttribute('title', 'Unavailable in Release Notes');
         if (action.tagName === 'A') action.setAttribute('tabindex', '-1');
         return;
       }
@@ -22401,9 +22413,16 @@ ${selector} .arrowheadPath {
       const remainsDisabled = wasDisabled || hasAnotherDisabledState;
       delete action.dataset.releaseNotesDisabled;
       delete action.dataset.releaseNotesWasDisabled;
+      const originalTitle = action.dataset.releaseNotesOriginalTitle;
+      delete action.dataset.releaseNotesOriginalTitle;
       if ('disabled' in action) action.disabled = remainsDisabled;
       action.classList.toggle('disabled', remainsDisabled);
       action.setAttribute('aria-disabled', remainsDisabled ? 'true' : 'false');
+      if (originalTitle && originalTitle !== '__missing__') {
+        action.setAttribute('title', originalTitle);
+      } else {
+        action.removeAttribute('title');
+      }
       if (action.tagName === 'A') {
         const originalTabindex = action.dataset.releaseNotesOriginalTabindex;
         delete action.dataset.releaseNotesOriginalTabindex;
@@ -22434,6 +22453,7 @@ ${selector} .arrowheadPath {
     const liveShareGuestDocumentActive = liveShareDocumentActive && !isLiveShareHostDocumentActive();
     const viewOnly = isLiveViewOnlyParticipant() || snapshotViewOnly || releaseNotesActive;
     document.body.classList.toggle('release-notes-active', releaseNotesActive);
+    if (!releaseNotesActive) updateReleaseNotesActionAvailability(false);
     const sourceReadOnly = viewOnly || reviewModeActive;
     if (markdownEditor) {
       markdownEditor.readOnly = sourceReadOnly;
@@ -22571,8 +22591,9 @@ ${selector} .arrowheadPath {
         updateUndoRedoButtons();
       }
     }
+    updateSyncToggleVisibility(currentViewMode);
     updateDocumentToolbarAvailability(hasActiveOpenDocument());
-    updateReleaseNotesActionAvailability(releaseNotesActive);
+    if (releaseNotesActive) updateReleaseNotesActionAvailability(true);
   }
 
   function getLiveRoomSocketUrl(roomId, secret, auth) {
diff --git a/styles.css b/styles.css
index 1d8f56d8..88c4739f 100644
--- a/styles.css
+++ b/styles.css
@@ -11717,23 +11717,6 @@ html[data-theme="dark"] .mobile-settings-toggle.is-active .settings-switch {
 /* ========================================
    VERSIONED RELEASE NOTES
    ======================================== */
-body.release-notes-active .header-view-toolbar,
-body.release-notes-active .header-view-divider,
-body.release-notes-active #toggle-sync,
-body.release-notes-active #copy-markdown-button,
-body.release-notes-active .header-export-dropdown,
-body.release-notes-active #share-button,
-body.release-notes-active #live-share-button,
-body.release-notes-active #live-share-toolbar-participants,
-body.release-notes-active #review-toggle,
-body.release-notes-active #markdown-format-toolbar,
-body.release-notes-active .app-status-bar,
-body.release-notes-active .mobile-menu-overview,
-body.release-notes-active #mobile-document-tools-heading,
-body.release-notes-active #mobile-document-tools,
-body.release-notes-active #mobile-export-section,
-body.release-notes-active #mobile-share-button,
-body.release-notes-active #mobile-live-share-button,
 body.release-notes-active #review-panel,
 body.release-notes-active #review-panel-backdrop,
 body.release-notes-active #review-composer,
@@ -11741,6 +11724,11 @@ body.release-notes-active #review-pins-layer {
   display: none !important;
 }
 
+body.release-notes-active .app-status-bar,
+body.release-notes-active .mobile-stats-container {
+  opacity: 0.5;
+}
+
 .tab-item.release-notes-tab {
   width: max-content;
   min-width: max-content;
diff --git a/tests/e2e/smoke.spec.js b/tests/e2e/smoke.spec.js
index 0c7a32b7..108495a2 100644
--- a/tests/e2e/smoke.spec.js
+++ b/tests/e2e/smoke.spec.js
@@ -48,17 +48,24 @@ test('release notes behave as an application surface instead of a document', asy
   await expect(page.locator('#review-panel')).toBeHidden();
   await expect(page.locator('.review-target-actions')).toHaveCount(0);
 
-  await expect(page.locator('.header-view-toolbar')).toBeHidden();
-  await expect(page.locator('#toggle-sync')).toBeHidden();
-  await expect(page.locator('#copy-markdown-button')).toBeHidden();
+  await expect(page.locator('.header-view-toolbar')).toBeVisible();
+  await expect(page.locator('.header-view-toolbar button')).toHaveCount(3);
+  await expect(page.locator('.header-view-toolbar button:not(:disabled)')).toHaveCount(0);
+  await expect(page.locator('#toggle-sync')).toBeVisible();
+  await expect(page.locator('#toggle-sync')).toBeDisabled();
+  await expect(page.locator('#copy-markdown-button')).toBeVisible();
   await expect(page.locator('#copy-markdown-button')).toBeDisabled();
-  await expect(page.locator('#exportDropdown')).toBeHidden();
-  await expect(page.locator('#share-button')).toBeHidden();
-  await expect(page.locator('#live-share-button')).toBeHidden();
-  await expect(page.locator('#review-toggle')).toBeHidden();
+  await expect(page.locator('#exportDropdown')).toBeVisible();
+  await expect(page.locator('#exportDropdown')).toBeDisabled();
+  await expect(page.locator('#share-button')).toBeVisible();
+  await expect(page.locator('#share-button')).toBeDisabled();
+  await expect(page.locator('#live-share-button')).toBeVisible();
+  await expect(page.locator('#live-share-button')).toBeDisabled();
+  await expect(page.locator('#review-toggle')).toBeVisible();
   await expect(page.locator('#review-toggle')).toBeDisabled();
-  await expect(page.locator('#markdown-format-toolbar')).toBeHidden();
-  await expect(page.locator('.app-status-bar')).toBeHidden();
+  await expect(page.locator('#markdown-format-toolbar')).toBeVisible();
+  await expect(page.locator('#markdown-format-toolbar button:not(:disabled)')).toHaveCount(0);
+  await expect(page.locator('.app-status-bar')).toBeVisible();
 
   await expect(page.locator('#importDropdown')).toBeVisible();
   await expect(page.locator('[aria-label="Report an issue"]')).toBeVisible();
@@ -70,29 +77,39 @@ test('release notes behave as an application surface instead of a document', asy
   await page.evaluate(() => document.getElementById('review-toggle').click());
   await expect(page.locator('#review-panel')).toBeHidden();
 
-  await releaseTab.locator('.tab-menu-btn').click();
-  const releaseMenuItems = page.locator('.tab-menu-dropdown.open .tab-menu-item');
-  await expect(releaseMenuItems).toHaveCount(1);
-  await expect(releaseMenuItems).toHaveText('Close');
+  await expect(releaseTab.locator('.tab-menu-btn')).toHaveCount(0);
+  await expect(releaseTab.locator('.tab-close-btn')).toBeVisible();
 
   await page.setViewportSize({ width: 375, height: 812 });
   await page.locator('#mobile-menu-toggle').click();
-  await expect(page.locator('.mobile-menu-overview')).toBeHidden();
-  await expect(page.locator('#mobile-document-tools')).toBeHidden();
-  await expect(page.locator('#mobile-export-section')).toBeHidden();
-  await expect(page.locator('#mobile-share-button')).toBeHidden();
-  await expect(page.locator('#mobile-live-share-button')).toBeHidden();
+  await expect(page.locator('.mobile-menu-overview')).toBeVisible();
+  await expect(page.locator('.mobile-view-mode-btn:not(:disabled)')).toHaveCount(0);
+  await expect(page.locator('#mobile-document-tools')).toBeVisible();
+  await expect(page.locator('#mobile-document-tools button:not(:disabled)')).toHaveCount(0);
+  await expect(page.locator('#mobile-export-section')).toBeVisible();
+  await expect(page.locator('[aria-controls="mobile-menu-export-panel"]')).toBeDisabled();
+  await expect(page.locator('#mobile-share-button')).toBeVisible();
+  await expect(page.locator('#mobile-share-button')).toBeDisabled();
+  await expect(page.locator('#mobile-live-share-button')).toBeVisible();
+  await expect(page.locator('#mobile-live-share-button')).toBeDisabled();
   await expect(page.locator('[aria-controls="mobile-menu-new-panel"]')).toBeVisible();
   await page.locator('#close-mobile-menu').click();
 
   await page.locator('#tab-list .tab-item:not(.release-notes-tab)').first().click();
   await page.setViewportSize({ width: 1440, height: 900 });
   await expect(page.locator('body')).not.toHaveClass(/release-notes-active/);
+  await expect(page.locator('#tab-list .tab-item:not(.release-notes-tab)').first().locator('.tab-menu-btn')).toBeVisible();
+  await expect(page.locator('.header-view-toolbar button[data-view-mode="split"]')).toBeEnabled();
+  await expect(page.locator('#toggle-sync')).toBeEnabled();
   await expect(page.locator('#copy-markdown-button')).toBeVisible();
   await expect(page.locator('#copy-markdown-button')).toBeEnabled();
+  await expect(page.locator('#exportDropdown')).toBeEnabled();
+  await expect(page.locator('#share-button')).toBeEnabled();
+  await expect(page.locator('#live-share-button')).toBeEnabled();
   await expect(page.locator('#review-toggle')).toBeVisible();
   await expect(page.locator('#review-toggle')).toBeEnabled();
   await expect(page.locator('#markdown-format-toolbar')).toBeVisible();
+  await expect(page.locator('#markdown-format-toolbar [data-md-action="bold"]')).toBeEnabled();
   await expect(page.locator('.app-status-bar')).toBeVisible();
   await expect(page.locator('#document-tree [aria-current="page"]')).toHaveCount(1);
 });

From 412564b7a7097e291fbd0556706be1dd9d13f9b0 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Thu, 13 Aug 2026 00:17:02 +0530
Subject: [PATCH 15/17] fix(toolbar): dim snapshot dropdown controls

---
 desktop-app/resources/js/script.js | 5 +++--
 script.js                          | 5 +++--
 tests/e2e/share-live.spec.js       | 6 ++++++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 14488a00..0f0399cd 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -22572,9 +22572,10 @@ ${selector} .arrowheadPath {
 
     if (markdownFormatToolbar) {
       markdownFormatToolbar.classList.toggle('is-live-view-only', sourceReadOnly);
-      markdownFormatToolbar.querySelectorAll('[data-md-action]').forEach(function(button) {
+      markdownFormatToolbar.querySelectorAll('[data-md-action], [data-toolbar-menu-toggle]').forEach(function(button) {
         const action = button.getAttribute('data-md-action');
-        const shouldDisable = sourceReadOnly && isLiveMutatingAction(action);
+        const isMenuToggle = button.hasAttribute('data-toolbar-menu-toggle');
+        const shouldDisable = sourceReadOnly && (isMenuToggle || isLiveMutatingAction(action));
         if (shouldDisable) {
           button.dataset.liveViewOnlyDisabled = 'true';
           button.disabled = true;
diff --git a/script.js b/script.js
index 14488a00..0f0399cd 100644
--- a/script.js
+++ b/script.js
@@ -22572,9 +22572,10 @@ ${selector} .arrowheadPath {
 
     if (markdownFormatToolbar) {
       markdownFormatToolbar.classList.toggle('is-live-view-only', sourceReadOnly);
-      markdownFormatToolbar.querySelectorAll('[data-md-action]').forEach(function(button) {
+      markdownFormatToolbar.querySelectorAll('[data-md-action], [data-toolbar-menu-toggle]').forEach(function(button) {
         const action = button.getAttribute('data-md-action');
-        const shouldDisable = sourceReadOnly && isLiveMutatingAction(action);
+        const isMenuToggle = button.hasAttribute('data-toolbar-menu-toggle');
+        const shouldDisable = sourceReadOnly && (isMenuToggle || isLiveMutatingAction(action));
         if (shouldDisable) {
           button.dataset.liveViewOnlyDisabled = 'true';
           button.disabled = true;
diff --git a/tests/e2e/share-live.spec.js b/tests/e2e/share-live.spec.js
index 67ed6956..3475412d 100644
--- a/tests/e2e/share-live.spec.js
+++ b/tests/e2e/share-live.spec.js
@@ -30,6 +30,12 @@ test('Share Snapshot creates a view-only hash link that opens without permanent
   await expect(sharedPage.locator('#markdown-editor')).toHaveJSProperty('readOnly', true);
   await expect(sharedPage.locator('#markdown-preview')).toContainText('This text should survive a snapshot round trip.');
 
+  const formatMenuToggles = sharedPage.locator('#markdown-format-toolbar [data-toolbar-menu-toggle]');
+  await expect(formatMenuToggles).toHaveCount(3);
+  await expect(sharedPage.locator('#markdown-format-toolbar [data-toolbar-menu-toggle]:not(:disabled)')).toHaveCount(0);
+  await expect(sharedPage.locator('[data-toolbar-menu-toggle="heading"]')).toHaveCSS('opacity', '0.4');
+  await expect(sharedPage.locator('[data-toolbar-menu-toggle="case"]')).toHaveCSS('opacity', '0.4');
+
   const storedTabs = JSON.stringify(await storedDocuments(sharedPage));
   expect(storedTabs).not.toContain('This text should survive a snapshot round trip.');
 

From 4299ba1db33a92c702e444f983812114492a2ec3 Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Thu, 13 Aug 2026 00:27:51 +0530
Subject: [PATCH 16/17] fix(toolbar): clarify disabled and expanded states

---
 desktop-app/resources/styles.css      | 14 +++++++++++++-
 styles.css                            | 14 +++++++++++++-
 tests/e2e/share-live.spec.js          |  2 ++
 tests/e2e/smoke.spec.js               |  1 +
 tests/e2e/ui-toolbar-redesign.spec.js | 20 ++++++++++++++++++++
 5 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 88c4739f..75d8f9ff 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -2297,12 +2297,24 @@ body.document-sidebar-collapsed .document-sidebar {
 .header-icon-command.is-live-active,
 .header-icon-command.is-live-active:hover,
 .header-icon-command.sync-active,
-.header-icon-command.sync-active:hover {
+.header-icon-command.sync-active:hover,
+.header-icon-dropdown.show > .header-icon-command:not(:disabled):not([aria-disabled="true"]),
+.header-icon-dropdown > .header-icon-command.show:not(:disabled):not([aria-disabled="true"]),
+.settings-dropdown.show > .header-icon-command:not(:disabled):not([aria-disabled="true"]),
+.settings-dropdown > .header-icon-command.show:not(:disabled):not([aria-disabled="true"]) {
   border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
   background: color-mix(in srgb, var(--accent-color) 10%, transparent);
   color: var(--accent-color);
 }
 
+.header-icon-command.sync-active:disabled,
+.header-icon-command.sync-active[aria-disabled="true"] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--text-color);
+  box-shadow: none;
+}
+
 .header-icon-command#review-toggle:has(.review-toolbar-count:not([hidden])) {
   width: auto;
   padding-inline: 6px;
diff --git a/styles.css b/styles.css
index 88c4739f..75d8f9ff 100644
--- a/styles.css
+++ b/styles.css
@@ -2297,12 +2297,24 @@ body.document-sidebar-collapsed .document-sidebar {
 .header-icon-command.is-live-active,
 .header-icon-command.is-live-active:hover,
 .header-icon-command.sync-active,
-.header-icon-command.sync-active:hover {
+.header-icon-command.sync-active:hover,
+.header-icon-dropdown.show > .header-icon-command:not(:disabled):not([aria-disabled="true"]),
+.header-icon-dropdown > .header-icon-command.show:not(:disabled):not([aria-disabled="true"]),
+.settings-dropdown.show > .header-icon-command:not(:disabled):not([aria-disabled="true"]),
+.settings-dropdown > .header-icon-command.show:not(:disabled):not([aria-disabled="true"]) {
   border-color: color-mix(in srgb, var(--accent-color) 28%, var(--border-color));
   background: color-mix(in srgb, var(--accent-color) 10%, transparent);
   color: var(--accent-color);
 }
 
+.header-icon-command.sync-active:disabled,
+.header-icon-command.sync-active[aria-disabled="true"] {
+  border-color: transparent;
+  background: transparent;
+  color: var(--text-color);
+  box-shadow: none;
+}
+
 .header-icon-command#review-toggle:has(.review-toolbar-count:not([hidden])) {
   width: auto;
   padding-inline: 6px;
diff --git a/tests/e2e/share-live.spec.js b/tests/e2e/share-live.spec.js
index 3475412d..369023a6 100644
--- a/tests/e2e/share-live.spec.js
+++ b/tests/e2e/share-live.spec.js
@@ -29,6 +29,8 @@ test('Share Snapshot creates a view-only hash link that opens without permanent
   await expect(sharedPage.locator('.content-container')).toHaveClass(/view-preview-only/);
   await expect(sharedPage.locator('#markdown-editor')).toHaveJSProperty('readOnly', true);
   await expect(sharedPage.locator('#markdown-preview')).toContainText('This text should survive a snapshot round trip.');
+  await expect(sharedPage.locator('#toggle-sync')).toBeDisabled();
+  await expect(sharedPage.locator('#toggle-sync')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
 
   const formatMenuToggles = sharedPage.locator('#markdown-format-toolbar [data-toolbar-menu-toggle]');
   await expect(formatMenuToggles).toHaveCount(3);
diff --git a/tests/e2e/smoke.spec.js b/tests/e2e/smoke.spec.js
index 108495a2..64fe25bf 100644
--- a/tests/e2e/smoke.spec.js
+++ b/tests/e2e/smoke.spec.js
@@ -53,6 +53,7 @@ test('release notes behave as an application surface instead of a document', asy
   await expect(page.locator('.header-view-toolbar button:not(:disabled)')).toHaveCount(0);
   await expect(page.locator('#toggle-sync')).toBeVisible();
   await expect(page.locator('#toggle-sync')).toBeDisabled();
+  await expect(page.locator('#toggle-sync')).toHaveCSS('background-color', 'rgba(0, 0, 0, 0)');
   await expect(page.locator('#copy-markdown-button')).toBeVisible();
   await expect(page.locator('#copy-markdown-button')).toBeDisabled();
   await expect(page.locator('#exportDropdown')).toBeVisible();
diff --git a/tests/e2e/ui-toolbar-redesign.spec.js b/tests/e2e/ui-toolbar-redesign.spec.js
index bae05880..c16a9b96 100644
--- a/tests/e2e/ui-toolbar-redesign.spec.js
+++ b/tests/e2e/ui-toolbar-redesign.spec.js
@@ -234,9 +234,22 @@ test('shared interface roles use the application type and icon scale', async ({
 test('New and Export menus share one visual system and keyboard dismissal', async ({ page }) => {
   await page.setViewportSize({ width: 1440, height: 900 });
 
+  const activeSyncStyle = await page.locator('#toggle-sync').evaluate(button => {
+    const style = getComputedStyle(button);
+    return [style.backgroundColor, style.borderColor, style.color];
+  });
+  const expectActiveDropdownStyle = async locator => {
+    await expect.poll(() => locator.evaluate(button => {
+      const style = getComputedStyle(button);
+      return [style.backgroundColor, style.borderColor, style.color];
+    })).toEqual(activeSyncStyle);
+  };
+
   await page.locator('#importDropdown').click();
   const newMenu = page.locator('[aria-labelledby="importDropdown"]');
   await expect(newMenu).toBeVisible();
+  await expect(page.locator('#importDropdown')).toHaveAttribute('aria-expanded', 'true');
+  await expectActiveDropdownStyle(page.locator('#importDropdown'));
   const newSurface = await newMenu.evaluate(menu => {
     const style = getComputedStyle(menu);
     return [style.backgroundColor, style.borderColor, style.borderRadius, style.boxShadow];
@@ -247,6 +260,8 @@ test('New and Export menus share one visual system and keyboard dismissal', asyn
   await page.locator('#exportDropdown').click();
   const exportMenu = page.locator('[aria-labelledby="exportDropdown"]');
   await expect(exportMenu).toBeVisible();
+  await expect(page.locator('#exportDropdown')).toHaveAttribute('aria-expanded', 'true');
+  await expectActiveDropdownStyle(page.locator('#exportDropdown'));
   const exportSurface = await exportMenu.evaluate(menu => {
     const style = getComputedStyle(menu);
     return [style.backgroundColor, style.borderColor, style.borderRadius, style.boxShadow];
@@ -254,6 +269,11 @@ test('New and Export menus share one visual system and keyboard dismissal', asyn
   expect(exportSurface).toEqual(newSurface);
   await page.keyboard.press('Escape');
 
+  await page.locator('#workspaceSettingsDropdown').click();
+  await expect(page.locator('#workspaceSettingsDropdown')).toHaveAttribute('aria-expanded', 'true');
+  await expectActiveDropdownStyle(page.locator('#workspaceSettingsDropdown'));
+  await page.keyboard.press('Escape');
+
   await expect(page.locator('.markdown-tool-select--insert, [data-toolbar-menu="insert"]')).toHaveCount(0);
 });
 

From e720db7b87afba32317bac71547d3fdf6020678f Mon Sep 17 00:00:00 2001
From: Baivab Sarkar <baivabsarkar@gmail.com>
Date: Fri, 14 Aug 2026 17:23:22 +0530
Subject: [PATCH 17/17] fix(ui): smooth dropdown menu motion

---
 desktop-app/resources/js/script.js    | 50 ++++++++++++++++++++++++++
 desktop-app/resources/styles.css      | 52 +++++++++++++++++++++++++--
 script.js                             | 50 ++++++++++++++++++++++++++
 styles.css                            | 52 +++++++++++++++++++++++++--
 tests/e2e/ui-toolbar-redesign.spec.js | 16 +++++++++
 5 files changed, 214 insertions(+), 6 deletions(-)

diff --git a/desktop-app/resources/js/script.js b/desktop-app/resources/js/script.js
index 838f5489..1dfb7013 100644
--- a/desktop-app/resources/js/script.js
+++ b/desktop-app/resources/js/script.js
@@ -18780,6 +18780,55 @@ ${selector} .arrowheadPath {
     });
   }
 
+  function initDropdownMenuMotion() {
+    if (!window.bootstrap || !window.bootstrap.Dropdown) return;
+
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const closeDurationMs = 120;
+
+    document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(function(toggle) {
+      if (toggle.dataset.dropdownMotionReady === 'true') return;
+      const dropdown = toggle.closest('.dropdown');
+      const menu = dropdown && Array.from(dropdown.children).find(function(child) {
+        return child.classList && child.classList.contains('dropdown-menu');
+      });
+      if (!dropdown || !menu) return;
+
+      toggle.dataset.dropdownMotionReady = 'true';
+      const instance = window.bootstrap.Dropdown.getOrCreateInstance(toggle);
+      let closeTimer = null;
+      let allowImmediateHide = false;
+
+      toggle.addEventListener('show.bs.dropdown', function() {
+        if (closeTimer !== null) window.clearTimeout(closeTimer);
+        closeTimer = null;
+        allowImmediateHide = false;
+        menu.classList.remove('is-closing');
+      });
+
+      toggle.addEventListener('hide.bs.dropdown', function(event) {
+        if (allowImmediateHide || reducedMotion.matches) return;
+        event.preventDefault();
+        if (closeTimer !== null) return;
+
+        menu.classList.add('is-closing');
+        closeTimer = window.setTimeout(function() {
+          closeTimer = null;
+          allowImmediateHide = true;
+          instance.hide();
+          allowImmediateHide = false;
+        }, closeDurationMs);
+      });
+
+      toggle.addEventListener('hidden.bs.dropdown', function() {
+        if (closeTimer !== null) window.clearTimeout(closeTimer);
+        closeTimer = null;
+        allowImmediateHide = false;
+        menu.classList.remove('is-closing');
+      });
+    });
+  }
+
   // Story 1.3: Resize Divider Functions
   function initResizer() {
     if (!resizeDivider) return;
@@ -19403,6 +19452,7 @@ ${selector} .arrowheadPath {
 
   initMarkdownFormatToolbar();
   initToolbarDropdownPortals();
+  initDropdownMenuMotion();
   initFindReplaceModal();
   initAppModals();
   document.addEventListener('fullscreenchange', function() {
diff --git a/desktop-app/resources/styles.css b/desktop-app/resources/styles.css
index 75d8f9ff..6b76578b 100644
--- a/desktop-app/resources/styles.css
+++ b/desktop-app/resources/styles.css
@@ -7759,26 +7759,72 @@ html[lang="ko"] .markdown-body h3 {
   margin-bottom: 0.6em;
 }
 
-/* Consistent, position-safe menu motion. Popper owns menu transforms. */
+/* Consistent, position-safe menu motion. Popper owns transform; the individual
+   translate/scale properties compose with it without disturbing placement. */
 @keyframes app-menu-fade {
   from { opacity: 0; }
   to { opacity: 1; }
 }
 
 .dropdown-menu {
+  --app-menu-shift-x: 0px;
+  --app-menu-shift-y: -4px;
   opacity: 0;
   display: block;
   visibility: hidden;
-  transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
+  pointer-events: none;
+  translate: var(--app-menu-shift-x) var(--app-menu-shift-y);
+  scale: 0.985;
+  transform-origin: top center;
+  transition:
+    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
+    translate 0.18s cubic-bezier(0.16, 1, 0.3, 1),
+    scale 0.18s cubic-bezier(0.16, 1, 0.3, 1),
+    visibility 0s linear 0.18s;
+}
+
+.dropdown-menu[data-popper-placement^="top"] {
+  --app-menu-shift-y: 4px;
+  transform-origin: bottom center;
+}
+
+.dropdown-menu[data-popper-placement^="left"] {
+  --app-menu-shift-x: 4px;
+  --app-menu-shift-y: 0px;
+  transform-origin: center right;
+}
+
+.dropdown-menu[data-popper-placement^="right"] {
+  --app-menu-shift-x: -4px;
+  --app-menu-shift-y: 0px;
+  transform-origin: center left;
 }
 
 .dropdown-menu.show {
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
+  translate: 0 0;
+  scale: 1;
+  transition-delay: 0s;
+}
+
+.dropdown-menu.show.is-closing {
+  opacity: 0;
+  visibility: visible;
+  pointer-events: none;
+  translate: var(--app-menu-shift-x) var(--app-menu-shift-y);
+  scale: 0.985;
+  transition-duration: 0.12s;
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .dropdown-menu {
+  .dropdown-menu,
+  .dropdown-menu.show,
+  .dropdown-menu.show.is-closing {
+    translate: 0 0;
+    scale: 1;
     transition: none;
   }
 
diff --git a/script.js b/script.js
index 838f5489..1dfb7013 100644
--- a/script.js
+++ b/script.js
@@ -18780,6 +18780,55 @@ ${selector} .arrowheadPath {
     });
   }
 
+  function initDropdownMenuMotion() {
+    if (!window.bootstrap || !window.bootstrap.Dropdown) return;
+
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const closeDurationMs = 120;
+
+    document.querySelectorAll('[data-bs-toggle="dropdown"]').forEach(function(toggle) {
+      if (toggle.dataset.dropdownMotionReady === 'true') return;
+      const dropdown = toggle.closest('.dropdown');
+      const menu = dropdown && Array.from(dropdown.children).find(function(child) {
+        return child.classList && child.classList.contains('dropdown-menu');
+      });
+      if (!dropdown || !menu) return;
+
+      toggle.dataset.dropdownMotionReady = 'true';
+      const instance = window.bootstrap.Dropdown.getOrCreateInstance(toggle);
+      let closeTimer = null;
+      let allowImmediateHide = false;
+
+      toggle.addEventListener('show.bs.dropdown', function() {
+        if (closeTimer !== null) window.clearTimeout(closeTimer);
+        closeTimer = null;
+        allowImmediateHide = false;
+        menu.classList.remove('is-closing');
+      });
+
+      toggle.addEventListener('hide.bs.dropdown', function(event) {
+        if (allowImmediateHide || reducedMotion.matches) return;
+        event.preventDefault();
+        if (closeTimer !== null) return;
+
+        menu.classList.add('is-closing');
+        closeTimer = window.setTimeout(function() {
+          closeTimer = null;
+          allowImmediateHide = true;
+          instance.hide();
+          allowImmediateHide = false;
+        }, closeDurationMs);
+      });
+
+      toggle.addEventListener('hidden.bs.dropdown', function() {
+        if (closeTimer !== null) window.clearTimeout(closeTimer);
+        closeTimer = null;
+        allowImmediateHide = false;
+        menu.classList.remove('is-closing');
+      });
+    });
+  }
+
   // Story 1.3: Resize Divider Functions
   function initResizer() {
     if (!resizeDivider) return;
@@ -19403,6 +19452,7 @@ ${selector} .arrowheadPath {
 
   initMarkdownFormatToolbar();
   initToolbarDropdownPortals();
+  initDropdownMenuMotion();
   initFindReplaceModal();
   initAppModals();
   document.addEventListener('fullscreenchange', function() {
diff --git a/styles.css b/styles.css
index 75d8f9ff..6b76578b 100644
--- a/styles.css
+++ b/styles.css
@@ -7759,26 +7759,72 @@ html[lang="ko"] .markdown-body h3 {
   margin-bottom: 0.6em;
 }
 
-/* Consistent, position-safe menu motion. Popper owns menu transforms. */
+/* Consistent, position-safe menu motion. Popper owns transform; the individual
+   translate/scale properties compose with it without disturbing placement. */
 @keyframes app-menu-fade {
   from { opacity: 0; }
   to { opacity: 1; }
 }
 
 .dropdown-menu {
+  --app-menu-shift-x: 0px;
+  --app-menu-shift-y: -4px;
   opacity: 0;
   display: block;
   visibility: hidden;
-  transition: opacity 0.15s ease-out, visibility 0.15s ease-out;
+  pointer-events: none;
+  translate: var(--app-menu-shift-x) var(--app-menu-shift-y);
+  scale: 0.985;
+  transform-origin: top center;
+  transition:
+    opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
+    translate 0.18s cubic-bezier(0.16, 1, 0.3, 1),
+    scale 0.18s cubic-bezier(0.16, 1, 0.3, 1),
+    visibility 0s linear 0.18s;
+}
+
+.dropdown-menu[data-popper-placement^="top"] {
+  --app-menu-shift-y: 4px;
+  transform-origin: bottom center;
+}
+
+.dropdown-menu[data-popper-placement^="left"] {
+  --app-menu-shift-x: 4px;
+  --app-menu-shift-y: 0px;
+  transform-origin: center right;
+}
+
+.dropdown-menu[data-popper-placement^="right"] {
+  --app-menu-shift-x: -4px;
+  --app-menu-shift-y: 0px;
+  transform-origin: center left;
 }
 
 .dropdown-menu.show {
   opacity: 1;
   visibility: visible;
+  pointer-events: auto;
+  translate: 0 0;
+  scale: 1;
+  transition-delay: 0s;
+}
+
+.dropdown-menu.show.is-closing {
+  opacity: 0;
+  visibility: visible;
+  pointer-events: none;
+  translate: var(--app-menu-shift-x) var(--app-menu-shift-y);
+  scale: 0.985;
+  transition-duration: 0.12s;
+  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .dropdown-menu {
+  .dropdown-menu,
+  .dropdown-menu.show,
+  .dropdown-menu.show.is-closing {
+    translate: 0 0;
+    scale: 1;
     transition: none;
   }
 
diff --git a/tests/e2e/ui-toolbar-redesign.spec.js b/tests/e2e/ui-toolbar-redesign.spec.js
index c16a9b96..0425199f 100644
--- a/tests/e2e/ui-toolbar-redesign.spec.js
+++ b/tests/e2e/ui-toolbar-redesign.spec.js
@@ -255,6 +255,8 @@ test('New and Export menus share one visual system and keyboard dismissal', asyn
     return [style.backgroundColor, style.borderColor, style.borderRadius, style.boxShadow];
   });
   await page.keyboard.press('Escape');
+  await expect(newMenu).toHaveClass(/is-closing/);
+  await expect(newMenu).toHaveCSS('pointer-events', 'none');
   await expect(newMenu).toBeHidden();
 
   await page.locator('#exportDropdown').click();
@@ -277,6 +279,20 @@ test('New and Export menus share one visual system and keyboard dismissal', asyn
   await expect(page.locator('.markdown-tool-select--insert, [data-toolbar-menu="insert"]')).toHaveCount(0);
 });
 
+test('dropdown motion respects reduced-motion preferences', async ({ page }) => {
+  await page.emulateMedia({ reducedMotion: 'reduce' });
+  const toggle = page.locator('#importDropdown');
+  const menu = page.locator('[aria-labelledby="importDropdown"]');
+
+  await toggle.click();
+  await expect(menu).toBeVisible();
+  await expect(menu).toHaveCSS('transition-duration', '0s');
+
+  await page.keyboard.press('Escape');
+  await expect(menu).toBeHidden();
+  await expect(menu).not.toHaveClass(/is-closing/);
+});
+
 test('toolbar uses theme surfaces and remains usable at desktop and phone widths', async ({ page }) => {
   await page.setViewportSize({ width: 1440, height: 900 });
   const toolbar = page.locator('#markdown-format-toolbar');