From a02bbdc550ca0d269639cb5bdeda0ec0f3b9e0e7 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 31 Jan 2026 17:25:05 +0200
Subject: [PATCH] feat(mobile/tab_switcher): indicate active tab

---
 .../src/widgets/mobile_widgets/TabSwitcher.css  |  9 +++++++++
 .../src/widgets/mobile_widgets/TabSwitcher.tsx  | 17 +++++++++++++----
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
index 19360d8c15..f188656259 100644
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
@@ -14,6 +14,15 @@
             border-radius: 1em;
             min-width: 0;
 
+            &.active {
+                outline: 4px solid var(--more-accented-background-color);
+                background: var(--card-background-hover-color);
+
+                .title {
+                    font-weight: bold;
+                }
+            }
+
             header {
                 padding: 0.5em 1em;
                 border-bottom: 1px solid var(--main-border-color);
diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
index cb7c79af1d..572cfbbe50 100644
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
@@ -9,7 +9,7 @@ import NoteContext from "../../components/note_context";
 import { t } from "../../services/i18n";
 import { NoteContent } from "../collections/legacy/ListOrGridView";
 import { LaunchBarActionButton } from "../launch_bar/launch_bar_widgets";
-import { useTriliumEvent } from "../react/hooks";
+import { useActiveNoteContext, useTriliumEvent } from "../react/hooks";
 import Modal from "../react/Modal";
 
 export default function TabSwitcher() {
@@ -53,25 +53,34 @@ function TabBarModelContent({ selectTab }: {
     selectTab: (noteContextToActivate: NoteContext) => void;
 }) {
     const mainNoteContexts = useMainNoteContexts();
+    const activeNoteContext = useActiveNoteContext();
 
     return (
         <div className="tabs">
             {mainNoteContexts.map((noteContext) => (
-                <Tab key={noteContext.ntxId} noteContext={noteContext} selectTab={selectTab} />
+                <Tab
+                    key={noteContext.ntxId}
+                    noteContext={noteContext}
+                    activeNtxId={activeNoteContext.ntxId}
+                    selectTab={selectTab}
+                />
             ))}
         </div>
     );
 }
 
-function Tab({ noteContext, selectTab }: {
+function Tab({ noteContext, selectTab, activeNtxId }: {
     noteContext: NoteContext;
     selectTab: (noteContextToActivate: NoteContext) => void;
+    activeNtxId: string | null | undefined;
 }) {
     const { note } = noteContext;
 
     return (
         <div
-            class="tab-card"
+            class={clsx("tab-card", {
+                active: noteContext.ntxId === activeNtxId
+            })}
             onClick={() => selectTab(noteContext)}
         >
             <header>