chore(mobile/tab_switcher): improve layout on tablet view

fix(mobile): modals on tablet view
chore(mobile/tab_switcher): stop auto-showing
2026-01-31 19:49:15 +01:00 · 2026-01-31 20:41:53 +02:00 · 2026-01-31 20:41:07 +02:00 · 2026-01-31 20:22:28 +02:00 · 2026-01-31 20:21:11 +02:00 · 2026-01-31 20:06:16 +02:00
16 changed files with 439 additions and 43 deletions
--- a/apps/client/index.html
+++ b/apps/client/index.html
@@ -13,6 +13,7 @@
    <body id="trilium-app">
        <noscript>Trilium requires JavaScript to be enabled.</noscript>

+        <div id="context-menu-cover"></div>
        <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>

        <!-- Required to match the PWA's top bar color with the theme -->
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -179,7 +179,6 @@ export default class MobileLayout {
                new FlexContainer("column")
                    .contentSized()
                    .id("mobile-bottom-bar")
-                    .child(new TabRowWidget().css("height", "40px"))
                    .child(new FlexContainer("row")
                        .class("horizontal")
                        .css("height", "53px")
--- a/apps/client/src/services/css_class_manager.ts
+++ b/apps/client/src/services/css_class_manager.ts
@@ -49,7 +49,7 @@ function createClassForColor(colorString: string | null) {
    return clsx("use-note-color", className, colorsWithHue.has(className) && "with-hue");
 }

-function parseColor(color: string) {
+export function parseColor(color: string) {
    try {
        return Color(color.toLowerCase());
    } catch (ex) {
@@ -77,7 +77,7 @@ function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: numb
 }

 /** Returns the hue of the specified color, or undefined if the color is grayscale. */
-function getHue(color: ColorInstance) {
+export function getHue(color: ColorInstance) {
    const hslColor = color.hsl();
    if (hslColor.saturationl() > 0) {
        return hslColor.hue();
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -224,10 +224,6 @@ body.mobile .modal .modal-dialog {
    width: 100%;
 }

-body.mobile .modal .modal-content {
-    border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0;
-}
-
 .component {
    contain: size;
 }
@@ -1255,7 +1251,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
    inset-inline-start: 0;
    inset-inline-end: 0;
    bottom: 0;
-    z-index: 1000;
+    z-index: 2500;
    background: rgba(0, 0, 0, 0.1);
 }

@@ -1614,6 +1610,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {

    body.mobile .modal-content {
        overflow-y: auto;
+        border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0;
    }

    body.mobile .modal-footer {
@@ -1650,6 +1647,17 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
    }
 }

+@media (min-width: 992px) {
+    .modal-dialog {
+        margin: var(--bs-modal-margin);
+        max-width: 80%;
+    }
+
+    .modal-content {
+        height: 100%;
+    }
+}
+
 /* Mobile, tablet mode */
@media (min-width: 992px) {
    body.mobile #root-widget {
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2271,5 +2271,10 @@
  },
  "platform_indicator": {
    "available_on": "Available on {{platform}}"
+  },
+  "mobile_tab_switcher": {
+    "title_one": "{{count}} tab",
+    "title_other": "{{count}} tabs",
+    "more_options": "More options"
  }
 }
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -155,7 +155,7 @@ function NoteAttributes({ note }: { note: FNote }) {
    return <span className="note-list-attributes" ref={ref} />;
 }

-function NoteContent({ note, trim, noChildrenList, highlightedTokens, includeArchivedNotes }: {
+export function NoteContent({ note, trim, noChildrenList, highlightedTokens, includeArchivedNotes }: {
    note: FNote;
    trim?: boolean;
    noChildrenList?: boolean;
--- a/apps/client/src/widgets/launch_bar/LauncherContainer.tsx
+++ b/apps/client/src/widgets/launch_bar/LauncherContainer.tsx
@@ -3,6 +3,7 @@ import { useCallback, useLayoutEffect, useState } from "preact/hooks";
 import FNote from "../../entities/fnote";
 import froca from "../../services/froca";
 import { isDesktop, isMobile } from "../../services/utils";
+import TabSwitcher from "../mobile_widgets/TabSwitcher";
 import { useTriliumEvent } from "../react/hooks";
 import { onWheelHorizontalScroll } from "../widget_utils";
 import BookmarkButtons from "./BookmarkButtons";
@@ -97,6 +98,8 @@ function initBuiltinWidget(note: FNote, isHorizontalLayout: boolean) {
            return <QuickSearchLauncherWidget />;
        case "aiChatLauncher":
            return <AiChatButton launcherNote={note} />;
+        case "mobileTabSwitcher":
+            return <TabSwitcher />;
        default:
            throw new Error(`Unrecognized builtin widget ${builtinWidget} for launcher ${note.noteId} "${note.title}"`);
    }
--- a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
+++ b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
@@ -1,3 +1,4 @@
+import clsx from "clsx";
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";

@@ -18,12 +19,12 @@ export interface LauncherNoteProps {
    launcherNote: FNote;
 }

-export function LaunchBarActionButton(props: Omit<ActionButtonProps, "className" | "noIconActionClass" | "titlePosition">) {
+export function LaunchBarActionButton({ className, ...props }: Omit<ActionButtonProps, "noIconActionClass" | "titlePosition">) {
    const { isHorizontalLayout } = useContext(LaunchBarContext);

    return (
        <ActionButton
-            className="button-widget launcher-button"
+            className={clsx("button-widget launcher-button", className)}
            noIconActionClass
            titlePosition={isHorizontalLayout ? "bottom" : "right"}
            {...props}
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
@@ -0,0 +1,133 @@
+#launcher-container .mobile-tab-switcher {
+    position: relative;
+
+    &::after {
+        content: attr(data-tab-count);
+        font-family: var(--main-font-family);
+        font-size: 10px;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+}
+
+.modal.tab-bar-modal {
+    .modal-dialog {
+        min-height: 85vh;
+    }
+
+    .tabs {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 1em;
+
+        @media (min-width: 850px) {
+            grid-template-columns: 1fr 1fr 1fr;
+        }
+
+        .tab-card {
+            background: var(--card-background-color);
+            border-radius: 1em;
+            min-width: 0;
+            overflow: hidden;
+            height: 200px;
+            display: flex;
+            flex-direction: column;
+
+            &.with-hue {
+                background-color: hsl(var(--bg-hue), 8.8%, 11.2%);
+                border-color: hsl(var(--bg-hue), 9.4%, 25.1%);
+            }
+
+            &.active {
+                outline: 4px solid var(--more-accented-background-color);
+                background: var(--card-background-hover-color);
+
+                .title {
+                    font-weight: bold;
+                }
+            }
+
+            header {
+                padding: 0.4em 0.5em;
+                border-bottom: 1px solid rgba(150, 150, 150, 0.1);
+                display: flex;
+                overflow: hidden;
+                align-items: center;
+                color: var(--custom-color, inherit);
+                flex-shrink: 0;
+
+                &:not(:first-of-type) {
+                    border-top: 1px solid rgba(150, 150, 150, 0.1);
+                }
+
+                >.tn-icon {
+                    margin-inline-end: 0.4em;
+                }
+
+                .title {
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    text-wrap: nowrap;
+                    font-size: 0.9em;
+                    flex-grow: 1;
+                }
+
+                .icon-action {
+                    flex-shrink: 0;
+                }
+            }
+
+            .tab-preview {
+                flex-grow: 1;
+                height: 100%;
+                overflow: hidden;
+                font-size: 0.5em;
+                user-select: none;
+                pointer-events: none;
+
+                &.type-text {
+                    padding: 10px;
+                }
+
+                &.type-book,
+                &.type-contentWidget,
+                &.type-search,
+                &.type-empty {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    font-size: 1.25em;
+                    color: var(--muted-text-color);
+                }
+
+                .preview-placeholder {
+                    font-size: 500%;
+                }
+
+                p { margin-bottom: 0.2em;}
+                h2 { font-size: 1.20em; }
+                h3 { font-size: 1.15em; }
+                h4 { font-size: 1.10em; }
+                h5 { font-size: 1.05em}
+                h6 { font-size: 1em; }
+            }
+
+            &.with-split {
+                .preview-placeholder {
+                    font-size: 250%;
+                }
+            }
+        }
+    }
+
+    .modal-footer {
+        .tn-link {
+            color: var(--main-text-color);
+            width: 40%;
+            text-align: center;
+            text-decoration: none;
+        }
+    }
+}
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
@@ -0,0 +1,240 @@
+import "./TabSwitcher.css";
+
+import clsx from "clsx";
+import { createPortal, Fragment } from "preact/compat";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+
+import appContext, { CommandNames } from "../../components/app_context";
+import NoteContext from "../../components/note_context";
+import FNote from "../../entities/fnote";
+import contextMenu from "../../menus/context_menu";
+import { getHue, parseColor } from "../../services/css_class_manager";
+import froca from "../../services/froca";
+import { t } from "../../services/i18n";
+import { NoteContent } from "../collections/legacy/ListOrGridView";
+import { LaunchBarActionButton } from "../launch_bar/launch_bar_widgets";
+import { ICON_MAPPINGS } from "../note_bars/CollectionProperties";
+import ActionButton from "../react/ActionButton";
+import { useActiveNoteContext, useNoteIcon, useTriliumEvents } from "../react/hooks";
+import Icon from "../react/Icon";
+import LinkButton from "../react/LinkButton";
+import Modal from "../react/Modal";
+
+export default function TabSwitcher() {
+    const [ shown, setShown ] = useState(false);
+    const mainNoteContexts = useMainNoteContexts();
+
+    return (
+        <>
+            <LaunchBarActionButton
+                className="mobile-tab-switcher"
+                icon="bx bx-rectangle"
+                text="Tabs"
+                onClick={() => setShown(true)}
+                data-tab-count={mainNoteContexts.length > 99 ? "∞" : mainNoteContexts.length}
+            />
+            {createPortal(<TabBarModal mainNoteContexts={mainNoteContexts} shown={shown} setShown={setShown} />, document.body)}
+        </>
+    );
+}
+
+function TabBarModal({ mainNoteContexts, shown, setShown }: {
+    mainNoteContexts: NoteContext[];
+    shown: boolean;
+    setShown: (newValue: boolean) => void;
+}) {
+    const [ fullyShown, setFullyShown ] = useState(false);
+    const selectTab = useCallback((noteContextToActivate: NoteContext) => {
+        appContext.tabManager.activateNoteContext(noteContextToActivate.ntxId);
+        setShown(false);
+    }, [ setShown ]);
+
+    return (
+        <Modal
+            className="tab-bar-modal"
+            size="xl"
+            title={t("mobile_tab_switcher.title", { count: mainNoteContexts.length})}
+            show={shown}
+            onShown={() => setFullyShown(true)}
+            customTitleBarButtons={[
+                {
+                    iconClassName: "bx bx-dots-vertical-rounded",
+                    title: t("mobile_tab_switcher.more_options"),
+                    onClick(e) {
+                        contextMenu.show<CommandNames>({
+                            x: e.pageX,
+                            y: e.pageY,
+                            items: [
+                                { title: t("tab_row.new_tab"), command: "openNewTab", uiIcon: "bx bx-plus" },
+                                { title: t("tab_row.reopen_last_tab"), command: "reopenLastTab", uiIcon: "bx bx-undo", enabled: appContext.tabManager.recentlyClosedTabs.length !== 0 },
+                                { kind: "separator" },
+                                { title: t("tab_row.close_all_tabs"), command: "closeAllTabs", uiIcon: "bx bx-trash destructive-action-icon" },
+                            ],
+                            selectMenuItemHandler: ({ command }) => {
+                                if (command) {
+                                    appContext.triggerCommand(command);
+                                }
+                            }
+                        });
+                    },
+                }
+            ]}
+            footer={<>
+                <LinkButton
+                    text={t("tab_row.new_tab")}
+                    onClick={() => {
+                        appContext.triggerCommand("openNewTab");
+                        setShown(false);
+                    }}
+                />
+            </>}
+            scrollable
+            onHidden={() => {
+                setShown(false);
+                setFullyShown(false);
+            }}
+        >
+            <TabBarModelContent mainNoteContexts={mainNoteContexts} selectTab={selectTab} shown={fullyShown} />
+        </Modal>
+    );
+}
+
+function TabBarModelContent({ mainNoteContexts, selectTab, shown }: {
+    mainNoteContexts: NoteContext[];
+    shown: boolean;
+    selectTab: (noteContextToActivate: NoteContext) => void;
+}) {
+    const activeNoteContext = useActiveNoteContext();
+    const tabRefs = useRef<Record<string, HTMLDivElement | null>>({});
+
+    // Scroll to active tab.
+    useEffect(() => {
+        if (!shown || !activeNoteContext?.ntxId) return;
+        const correspondingEl = tabRefs.current[activeNoteContext.ntxId];
+        requestAnimationFrame(() => {
+            correspondingEl?.scrollIntoView();
+        });
+    }, [ activeNoteContext, shown ]);
+
+    return (
+        <div className="tabs">
+            {mainNoteContexts.map((noteContext) => (
+                <Tab
+                    key={noteContext.ntxId}
+                    noteContext={noteContext}
+                    activeNtxId={activeNoteContext.ntxId}
+                    selectTab={selectTab}
+                    containerRef={el => (tabRefs.current[noteContext.ntxId ?? ""] = el)}
+                />
+            ))}
+        </div>
+    );
+}
+
+function Tab({ noteContext, containerRef, selectTab, activeNtxId }: {
+    containerRef: (el: HTMLDivElement | null) => void;
+    noteContext: NoteContext;
+    selectTab: (noteContextToActivate: NoteContext) => void;
+    activeNtxId: string | null | undefined;
+}) {
+    const { note } = noteContext;
+    const iconClass = useNoteIcon(note);
+    const colorClass = note?.getColorClass() || '';
+    const workspaceTabBackgroundColorHue = getWorkspaceTabBackgroundColorHue(noteContext);
+    const subContexts = noteContext.getSubContexts();
+
+    return (
+        <div
+            ref={containerRef}
+            class={clsx("tab-card", {
+                active: noteContext.ntxId === activeNtxId,
+                "with-hue": workspaceTabBackgroundColorHue !== undefined,
+                "with-split": subContexts.length > 1
+            })}
+            onClick={() => selectTab(noteContext)}
+            style={{
+                "--bg-hue": workspaceTabBackgroundColorHue
+            }}
+        >
+            {subContexts.map(subContext => (
+                <Fragment key={subContext.ntxId}>
+                    <header className={colorClass}>
+                        {subContext.note && <Icon icon={iconClass} />}
+                        <span className="title">{subContext.note?.title ?? t("tab_row.new_tab")}</span>
+                        {subContext.isMainContext() && <ActionButton
+                            icon="bx bx-x"
+                            text={t("tab_row.close_tab")}
+                            onClick={(e) => {
+                                // We are closing a tab, so we need to prevent propagation for click (activate tab).
+                                e.stopPropagation();
+                                appContext.tabManager.removeNoteContext(subContext.ntxId);
+                            }}
+                        />}
+                    </header>
+                    <div className={clsx("tab-preview", `type-${subContext.note?.type ?? "empty"}`)}>
+                        <TabPreviewContent note={subContext.note} />
+                    </div>
+                </Fragment>
+            ))}
+        </div>
+    );
+}
+
+function TabPreviewContent({ note }: {
+    note: FNote | null
+}) {
+    if (!note) {
+        return <PreviewPlaceholder icon="bx bx-plus" />;
+    }
+
+    if (note.type === "book") {
+        return <PreviewPlaceholder icon={ICON_MAPPINGS[note.getLabelValue("viewType") ?? ""] ?? "bx bx-book"} />;
+    }
+
+    return (
+        <NoteContent
+            note={note}
+            highlightedTokens={undefined}
+            trim
+            includeArchivedNotes={false}
+        />
+    );
+}
+
+function PreviewPlaceholder({ icon}: {
+    icon: string;
+}) {
+    return (
+        <div className="preview-placeholder">
+            <Icon icon={icon} />
+        </div>
+    );
+}
+
+function getWorkspaceTabBackgroundColorHue(noteContext: NoteContext) {
+    if (!noteContext.hoistedNoteId) return;
+    const hoistedNote = froca.getNoteFromCache(noteContext.hoistedNoteId);
+    if (!hoistedNote) return;
+
+    const workspaceTabBackgroundColor = hoistedNote.getWorkspaceTabBackgroundColor();
+    if (!workspaceTabBackgroundColor) return;
+
+    try {
+        const parsedColor = parseColor(workspaceTabBackgroundColor);
+        if (!parsedColor) return;
+        return getHue(parsedColor);
+    } catch (e) {
+        // Colors are non-critical, simply ignore.
+        console.warn(e);
+    }
+}
+
+function useMainNoteContexts() {
+    const [ noteContexts, setNoteContexts ] = useState(appContext.tabManager.getMainNoteContexts());
+
+    useTriliumEvents([ "newNoteContextCreated", "noteContextRemoved" ] , () => {
+        setNoteContexts(appContext.tabManager.getMainNoteContexts());
+    });
+
+    return noteContexts;
+}
--- a/apps/client/src/widgets/note_bars/CollectionProperties.tsx
+++ b/apps/client/src/widgets/note_bars/CollectionProperties.tsx
@@ -6,10 +6,7 @@ import { useContext, useRef } from "preact/hooks";
 import { Fragment } from "preact/jsx-runtime";

 import FNote from "../../entities/fnote";
-import { getHelpUrlForNote } from "../../services/in_app_help";
-import { openInAppHelpFromUrl } from "../../services/utils";
 import { ViewTypeOptions } from "../collections/interface";
-import ActionButton from "../react/ActionButton";
 import Dropdown from "../react/Dropdown";
 import { FormDropdownDivider, FormDropdownSubmenu, FormListItem, FormListToggleableItem } from "../react/FormList";
 import FormTextBox from "../react/FormTextBox";
@@ -19,7 +16,7 @@ import { ParentComponent } from "../react/react_utils";
 import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxItem, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
 import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";

-const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
+export const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
    grid: "bx bxs-grid",
    list: "bx bx-list-ul",
    calendar: "bx bx-calendar",
--- a/apps/client/src/widgets/react/ActionButton.tsx
+++ b/apps/client/src/widgets/react/ActionButton.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useRef, useState } from "preact/hooks";
-import { CommandNames } from "../../components/app_context";
-import { useStaticTooltip } from "./hooks";
-import keyboard_actions from "../../services/keyboard_actions";
 import { HTMLAttributes } from "preact";
+import { useEffect, useRef, useState } from "preact/hooks";

-export interface ActionButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "onClick" | "onAuxClick" | "onContextMenu"> {
+import { CommandNames } from "../../components/app_context";
+import keyboard_actions from "../../services/keyboard_actions";
+import { useStaticTooltip } from "./hooks";
+
+export interface ActionButtonProps extends Pick<HTMLAttributes<HTMLButtonElement>, "onClick" | "onAuxClick" | "onContextMenu" | "style"> {
    text: string;
    titlePosition?: "top" | "right" | "bottom" | "left";
    icon: string;
--- a/apps/client/src/widgets/react/Modal.tsx
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -1,17 +1,18 @@
+import { Modal as BootstrapModal } from "bootstrap";
 import clsx from "clsx";
-import { useEffect, useRef, useMemo } from "preact/hooks";
-import { t } from "../../services/i18n";
 import { ComponentChildren } from "preact";
 import type { CSSProperties, RefObject } from "preact/compat";
-import { openDialog } from "../../services/dialog";
-import { Modal as BootstrapModal } from "bootstrap";
 import { memo } from "preact/compat";
+import { useEffect, useMemo,useRef } from "preact/hooks";
+
+import { openDialog } from "../../services/dialog";
+import { t } from "../../services/i18n";
 import { useSyncedRef } from "./hooks";

 interface CustomTitleBarButton {
    title: string;
    iconClassName: string;
-    onClick: () => void;
+    onClick: (e: MouseEvent) => void;
 }

 export interface ModalProps {
@@ -80,7 +81,7 @@ export interface ModalProps {
    noFocus?: boolean;
 }

-export default function Modal({ children, className, size, title, customTitleBarButtons: titleBarButtons, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom, noFocus }: ModalProps) {
+export default function Modal({ children, className, size, title, customTitleBarButtons: titleBarButtons, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable, keepInDom, noFocus }: ModalProps) {
    const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
    const modalInstanceRef = useRef<BootstrapModal>();
    const elementToFocus = useRef<Element | null>();
@@ -116,7 +117,7 @@ export default function Modal({ children, className, size, title, customTitleBar
                focus: !noFocus
            }).then(($widget) => {
                modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]);
-            })
+            });
        } else {
            modalInstanceRef.current?.hide();
        }
@@ -159,13 +160,12 @@ export default function Modal({ children, className, size, title, customTitleBar

                        {titleBarButtons?.filter((b) => b !== null).map((titleBarButton) => (
                            <button type="button"
-                                    className={clsx("custom-title-bar-button bx", titleBarButton.iconClassName)}
-                                    title={titleBarButton.title}
-                                    onClick={titleBarButton.onClick}>
-                            </button>
+                                className={clsx("custom-title-bar-button bx", titleBarButton.iconClassName)}
+                                title={titleBarButton.title}
+                                onClick={titleBarButton.onClick} />
                        ))}

-                        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label={t("modal.close")}></button>
+                        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label={t("modal.close")} />

                    </div>

--- a/apps/server/src/assets/translations/en/server.json
+++ b/apps/server/src/assets/translations/en/server.json
@@ -356,7 +356,8 @@
    "visible-launchers-title": "Visible Launchers",
    "user-guide": "User Guide",
    "localization": "Language & Region",
-    "inbox-title": "Inbox"
+    "inbox-title": "Inbox",
+    "tab-switcher-title": "Tab Switcher"
  },
  "notes": {
    "new-note": "New note",
--- a/apps/server/src/services/hidden_subtree_launcherbar.ts
+++ b/apps/server/src/services/hidden_subtree_launcherbar.ts
@@ -48,7 +48,7 @@ export default function buildLaunchBarConfig() {
            id: "_lbBackInHistory",
            ...sharedLaunchers.backInHistory
        },
-        {   
+        {
            id: "_lbForwardInHistory",
            ...sharedLaunchers.forwardInHistory
        },
@@ -59,12 +59,12 @@ export default function buildLaunchBarConfig() {
            command: "commandPalette",
            icon: "bx bx-chevron-right-square"
        },
-        { 
+        {
            id: "_lbBackendLog",
            title: t("hidden-subtree.backend-log-title"),
            type: "launcher",
            targetNoteId: "_backendLog",
-            icon: "bx bx-detail" 
+            icon: "bx bx-detail"
        },
        {
            id: "_zenMode",
@@ -128,7 +128,7 @@ export default function buildLaunchBarConfig() {
            baseSize: "50",
            growthFactor: "0"
        },
-        {   
+        {
            id: "_lbBookmarks",
            title: t("hidden-subtree.bookmarks-title"),
            type: "launcher",
@@ -139,7 +139,7 @@ export default function buildLaunchBarConfig() {
            id: "_lbToday",
            ...sharedLaunchers.openToday
        },
-        {   
+        {
            id: "_lbSpacer2",
            title: t("hidden-subtree.spacer-title"),
            type: "launcher",
@@ -179,7 +179,11 @@ export default function buildLaunchBarConfig() {

    const mobileAvailableLaunchers: HiddenSubtreeItem[] = [
        { id: "_lbMobileNewNote", ...sharedLaunchers.newNote },
-        { id: "_lbMobileToday", ...sharedLaunchers.openToday }
+        { id: "_lbMobileToday", ...sharedLaunchers.openToday },
+        {
+            id: "_lbMobileRecentChanges",
+            ...sharedLaunchers.recentChanges
+        }
    ];

    const mobileVisibleLaunchers: HiddenSubtreeItem[] = [
@@ -203,8 +207,10 @@ export default function buildLaunchBarConfig() {
            ...sharedLaunchers.calendar
        },
        {
-            id: "_lbMobileRecentChanges",
-            ...sharedLaunchers.recentChanges
+            id: "_lbMobileTabSwitcher",
+            title: t("hidden-subtree.tab-switcher-title"),
+            type: "launcher",
+            builtinWidget: "mobileTabSwitcher"
        }
    ];

@@ -214,4 +220,4 @@ export default function buildLaunchBarConfig() {
        mobileAvailableLaunchers,
        mobileVisibleLaunchers
    };
-}
+}
--- a/packages/commons/src/lib/hidden_subtree.ts
+++ b/packages/commons/src/lib/hidden_subtree.ts
@@ -45,7 +45,8 @@ export interface HiddenSubtreeItem {
        | "quickSearch"
        | "aiChatLauncher"
        | "commandPalette"
-        | "toggleZenMode";
+        | "toggleZenMode"
+        | "mobileTabSwitcher";
    command?: keyof typeof Command;
    /**
     * If set to true, then branches will be enforced to be in the correct place.
Author	SHA1	Message	Date
Elian Doran	0d99cf9fb9	chore(mobile/tab_switcher): improve layout on tablet view	2026-01-31 20:41:53 +02:00
Elian Doran	a5306b2067	fix(mobile): modals on tablet view	2026-01-31 20:41:07 +02:00
Elian Doran	e9b826e498	chore(mobile/tab_switcher): stop auto-showing	2026-01-31 20:22:28 +02:00
Elian Doran	e7f356b87c	feat(mobile/tab_switcher): display note splits	2026-01-31 20:21:11 +02:00
Elian Doran	d2abde714f	chore(mobile/tab_switcher): enforce same height	2026-01-31 20:06:16 +02:00
Elian Doran	20eaa79079	fix(mobile): cover not working properly in modals	2026-01-31 20:04:00 +02:00
Elian Doran	3cb74bb844	fix(mobile): context menu won't dismiss due to missing cover	2026-01-31 20:00:56 +02:00
Elian Doran	a72d4f425a	feat(mobile/tab_switcher): add context menu item for closing all tabs	2026-01-31 19:54:42 +02:00
Elian Doran	8f3545624e	feat(mobile/tab_switcher): improve display of empty tabs	2026-01-31 19:46:15 +02:00
Elian Doran	8f6cfe8a04	feat(mobile/tab_switcher): improve display of collections	2026-01-31 19:43:53 +02:00
Elian Doran	bec7943e05	feat(mobile/tab_switcher): hide icon for new tab	2026-01-31 19:36:31 +02:00
Elian Doran	a486f5951e	feat(mobile/tab_switcher): new tab button	2026-01-31 19:29:06 +02:00
Elian Doran	e8158aadec	feat(mobile/tab_switcher): display number of tabs in launch bar	2026-01-31 19:19:39 +02:00
Elian Doran	b6f107b85b	feat(mobile/tab_switcher): display number of tabs in modal title	2026-01-31 19:08:29 +02:00
Elian Doran	5abd27f252	chore(mobile/tab_switcher): improve modal fit when in browser	2026-01-31 19:04:47 +02:00
Elian Doran	39648b6df8	chore(mobile/tab_switcher): remove old tab bar	2026-01-31 19:03:15 +02:00
Elian Doran	0a7b2e3304	feat(mobile/tab_switcher): integrate into launch bar	2026-01-31 18:50:17 +02:00
Elian Doran	48db6e1756	feat(mobile/tab_switcher): button to close tab	2026-01-31 18:40:01 +02:00
Elian Doran	2a38af5db6	feat(mobile/tab_switcher): scroll to active tab	2026-01-31 18:25:01 +02:00
Elian Doran	740b1093d7	feat(mobile/tab_switcher): respect workspace background color	2026-01-31 18:09:04 +02:00
Elian Doran	6b70412f6e	feat(mobile/tab_switcher): respect note color class	2026-01-31 17:50:52 +02:00
Elian Doran	43f147ec60	feat(mobile/tab_switcher): improve display of content widget & search	2026-01-31 17:31:30 +02:00
Elian Doran	bf0fc57493	feat(mobile/tab_switcher): display note icon	2026-01-31 17:29:24 +02:00
Elian Doran	325b8b886c	fix(mobile/tab_switcher): clipped borders	2026-01-31 17:25:33 +02:00
Elian Doran	a02bbdc550	feat(mobile/tab_switcher): indicate active tab	2026-01-31 17:25:05 +02:00
Elian Doran	4285fd7708	feat(mobile/tab_switcher): click to activate	2026-01-31 17:14:54 +02:00
Elian Doran	96fa6eac44	fix(mobile/tab_switcher): no title if empty tab	2026-01-31 17:07:32 +02:00
Elian Doran	05fa1ef2fb	feat(mobile/tab_switcher): clip note title	2026-01-31 17:04:19 +02:00
Elian Doran	13aebc060e	feat(mobile/tab_switcher): display margins only for text	2026-01-31 17:01:22 +02:00
Elian Doran	1aae4098d6	feat(mobile/tab_switcher):	2026-01-31 16:54:39 +02:00
Elian Doran	3367bb2e5b	feat(mobile/tab_switcher): basic rendering of tab content	2026-01-31 16:25:05 +02:00
Elian Doran	49fc5e1559	feat(mobile/tab_switcher): basic listing of tabs	2026-01-31 16:12:27 +02:00
Elian Doran	3a9b448a83	chore(mobile/tab_switcher): create empty modal	2026-01-31 15:59:38 +02:00
Elian Doran	a45fb975c0	chore(mobile/tab_switcher): add button in launch bar	2026-01-31 15:53:19 +02:00