From e8158aadec7330dfecef08e5429d094f5a4deb98 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 31 Jan 2026 19:19:39 +0200
Subject: [PATCH] feat(mobile/tab_switcher): display number of tabs in launch
 bar

---
 .../src/widgets/launch_bar/launch_bar_widgets.tsx  |  5 +++--
 .../src/widgets/mobile_widgets/TabSwitcher.css     | 14 ++++++++++++++
 .../src/widgets/mobile_widgets/TabSwitcher.tsx     |  9 ++++++---
 apps/client/src/widgets/react/ActionButton.tsx     | 11 ++++++-----
 4 files changed, 29 insertions(+), 10 deletions(-)

diff --git a/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx b/apps/client/src/widgets/launch_bar/launch_bar_widgets.tsx
index 0cb7c9906f..bb4a053c89 100644
--- 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}
diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
index 25cbb22380..e37b364a96 100644
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
@@ -1,3 +1,17 @@
+#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 {
         height: 100%;
diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
index 31d08dd25e..33ae931513 100644
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
@@ -18,25 +18,28 @@ import Modal from "../react/Modal";
 
 export default function TabSwitcher() {
     const [ shown, setShown ] = useState(true);
+    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 shown={shown} setShown={setShown} />, document.body)}
+            {createPortal(<TabBarModal mainNoteContexts={mainNoteContexts} shown={shown} setShown={setShown} />, document.body)}
         </>
     );
 }
 
-function TabBarModal({ shown, setShown }: {
+function TabBarModal({ mainNoteContexts, shown, setShown }: {
+    mainNoteContexts: NoteContext[];
     shown: boolean;
     setShown: (newValue: boolean) => void;
 }) {
     const [ fullyShown, setFullyShown ] = useState(false);
-    const mainNoteContexts = useMainNoteContexts();
     const selectTab = useCallback((noteContextToActivate: NoteContext) => {
         appContext.tabManager.activateNoteContext(noteContextToActivate.ntxId);
         setShown(false);
diff --git a/apps/client/src/widgets/react/ActionButton.tsx b/apps/client/src/widgets/react/ActionButton.tsx
index ba5430f381..feb5972ef4 100644
--- 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;