feat(ui): add Explorer workflows and redesign toolbar

[ThisIs-Developer]

Summary

• rename the document sidebar to Explorer and the default visible location to Workspace
• make the Explorer toggle action-aware: it shows a close-sidebar glyph while open and an open-sidebar glyph while closed, without a persistent active treatment
• keep the global header focused on exactly New, Share, Live Share, Report an Issue, About Markdown Viewer, and Settings
• move Sync and Copy Markdown into the document toolbar before Review and the Editor / Preview / Split controls
• move Export into the Markdown toolbar so export behavior remains available without crowding global navigation
• reorganize formatting controls into common formatting, text layout, content structure, advanced insertion, workspace actions, and document utilities
• make Insert icon-only, promote Diagram & More to a direct toolbar action, and retain all existing insertion handlers
• unify header, toolbar, language, tab, and document menus with shared surface, radius, shadow, focus, selected, motion, dark-theme, and z-index tokens
• use a white semantic toolbar surface in light mode and the existing dark surface in dark mode
• retain fixed workspaces, Secret Workspace encryption, file/folder drag-and-drop, background import progress, tab close/delete separation, synchronized document split, Review, share, export, and renderer workflows

Icon system

The application now uses Bootstrap Icons as its single interface icon family. It was already bundled by the project, is MIT-licensed, covers every required action, and avoids a new runtime dependency. Toolbar glyphs share a 15px token; phone and tablet controls use 44px targets.

Action	Previous	Updated
Share	bi-people	bi-share
About	bi-question-circle	bi-info-circle
Sync	bi-link	bi-arrow-repeat
Copy	bi-clipboard*	bi-copy
Editor view	bi-file-text	bi-pencil-square
Explorer toggle	static bi-files	bi-layout-sidebar / bi-layout-sidebar-inset
Insert	plus icon and text label	bi-plus-square with chevron
Diagram	nested menu item	direct bi-diagram-3 action
Image	bi-card-image	bi-image
Live Share mobile	bi-broadcast	bi-broadcast-pin

Language choices now use language names instead of emoji flags, keeping interface imagery within the same icon system.

Interaction and accessibility

• preserve all existing IDs and action handlers while moving controls between regions
• retain Bootstrap keyboard behavior for application menus and the existing Arrow / Home / End / Escape behavior for formatting menus
• keep click-outside dismissal, viewport-aware menu placement, portaled Export rendering, visible focus rings, disabled semantics, labels, titles, and pressed/expanded states
• remove hover layout shift from language choices
• respect reduced-motion preferences for menu transitions and loading/save feedback
• use horizontal toolbar scrolling on narrow screens without page-level overflow

Documentation

The Configuration, Features, and Usage Guide pages now use the visible Workspace name and describe the current document hierarchy consistently.

Validation

• node --check script.js
• npm run build
• git diff --check
• all 77 browser scenarios passed across the broad run and focused reruns
• verified New, Export, and formatting-menu visual parity plus Escape and click-outside dismissal
• verified Explorer open/close icon state and absence of a persistent active class
• verified Sync, Copy, Review, view modes, Diagram & More, Insert, Share, Live Share, Settings, About, Report an Issue, and export handlers
• responsive QA at 320, 375, 768, 812 landscape, 844 landscape, 1080, and 1440px
• light and dark theme QA, reduced-motion QA, 44px mobile targets, and no page-level horizontal overflow
• captured desktop light, desktop dark, and mobile light visual previews

Why

The previous interface mixed global application actions with document-specific editing controls, used inconsistent action metaphors, and gave dropdowns different visual and interaction treatments. This update creates a clearer global-versus-document hierarchy, improves discoverability without overcrowding, and keeps the established color identity and functionality intact.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
markdown-viwer	Ready	Preview, Comment	Jul 18, 2026 8:46am

[cloudflare-workers-and-pages]

Deploying markdownviewer with    Cloudflare Pages

Latest commit:	48191c4
Status:	✅  Deploy successful!
Preview URL:	https://363c9103.markdownviewer.pages.dev
Branch Preview URL:	https://codex-document-management-si.markdownviewer.pages.dev

View logs

[gitguardian]

️✅ There are no secrets present in this pull request anymore.

If these secrets were true positive and are still valid, we highly recommend you to revoke them.
While these secrets were previously flagged, we no longer have a reference to the
specific commits where they were detected. Once a secret has been leaked into a git
repository, you should consider it compromised, even if it was deleted immediately.
Find here more information about risks.

---

^{_{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}}