The Inline Status Bar's View Switcher button renders its display incorrectly

Bug graveyard
1

The view switcher ( lucide-book-icon.svg > icon ), in the upper-right corner of the editor within a note’s inline status bar, is incorrectly displayed. The lucide-book-icon.svg should display when in Reading Mode, and the lucide-pencil-line-icon.svg should display when in Editing Mode.

I know this has been cited previously, but the resolution logic is incorrect and still exists as a UI/UIX bug in the interface.

UI/UX Logic

  • The view switcher is a button that toggles a view state.
  • The view switcher button lives in the inline title bar. This bar contains two left-justified buttons for note navigation with arrows for “previous note” with lucide-arrow-left-icon.svg and “next note” with lucide-arrow-right-icon.svg, then the center-justified current note’s title, then the view switcher button with lucide-pencil-line-icon.svg right-justified along with the note’s menu button to it’s right.
    • The arrow UI elements trigger an action to navigate to another file, and do not represent state—they are navigation elements.
    • The inline title UI element represents the current note’s file name state along with it’s path, which when clicked, triggers the UI to reveal it’s location in the File Explorer.
    • The view switcher toggles between two note views, meaning it navigates the user’s view to the next view state
    • and the menu button UI interaction reveals more commands, which trigger their respective events.
  • The entire bar consists of a blend of navigation, state change, and command execution.

Why the view switcher button should be reversed

  • Navigation UI is inherently understood by the user by convention — arrows mean navigation
  • Menu UI (displayed here as an ellipsis) is also inherently understood by convention—this is a commonly used UI icon for revealing “more options”.
  • The inline title is used for state — it’s shows the currently displayed note’s file name.
  • Lastly, the view switcher UI icon also represents a state—the state of the viewing mode, either Reading view or Editing view, as presented in Views and editing mode - Obsidian Help.

Conclusion
Our view switcher UI element toggles state, and is not navigation, and is currently displaying its reciprocal icon. Because the code is rendering the icon incorrectly, this is a bug.

The documentation article reinforces the button’s intention:

[!Website Text]
To switch to Source mode:

Click the interactive status icon ( lucide-book-icon.svg > icon or lucide-edit-3.svg > icon ) in the status bar and select Source mode.

Note

By default, editing view is set to Live Preview. Change this to Source mode under Settings → Editor → Default editing mode.

To switch to Source mode, now additionally you can:

Click the view switcher ( lucide-edit-3.svg > icon ) in the upper right corner of your note.
Or press `Ctrl+E` (`Cmd+E` on macOS).
Or use the command Toggle Reading view.

Former references to this bug:

Thanks!

(AI was not used to write this post. All em-dashes are my own.)

2

Here’s a CSS workaround, good on desktop and mobile:

/* viewing mode icons

	swaps the icons from "action buttons" to "status indicators/toggles",
	and adds an icon for Source mode */

.view-action[aria-label^="Current view"] > svg {
	display: none;
}

.view-action[aria-label^="Current view"]::before {
	content: "";
	display: inline-block;
	height: var(--icon-size);
	width: var(--icon-size);
	background-color: var(--icon-color);
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

/* Source mode */
.workspace-leaf-content[data-mode='source']:not(:has(> .view-content > .markdown-source-view.is-live-preview)) .view-action[aria-label~="editing"]::before {
	mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWNvZGUteG1sLWljb24gbHVjaWRlLWNvZGUteG1sIj48cGF0aCBkPSJtMTggMTYgNC00LTQtNCIvPjxwYXRoIGQ9Im02IDgtNCA0IDQgNCIvPjxwYXRoIGQ9Im0xNC41IDQtNSAxNiIvPjwvc3ZnPg==");
}

/* Live Preview */
.workspace-leaf-content[data-mode='source']:has(> .view-content > .markdown-source-view.is-live-preview) .view-action[aria-label~="editing"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.376 3.622a1 1 0 0 1 3.002 3.002L7.368 18.635a2 2 0 0 1-.855.506l-2.872.838a.5.5 0 0 1-.62-.62l.838-2.872a2 2 0 0 1 .506-.854z'/%3E%3C/svg%3E");
}

/* Reading */
.workspace-leaf-content[data-mode='preview'] .view-action[aria-label^="Current view: reading"]::before {
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
}

And here’s an em-dash, because they’ve been fantastic since long before AI:

—
3

What you see is currently intentional. Not a bug.

Please, search/open a Feature Request for this. Thanks

4

Submitted as a Feature Request. Thanks!

5

Thanks for the fix