From 4285fd7708a3fdb34346484dcb72385092d895fa Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 31 Jan 2026 17:13:36 +0200
Subject: [PATCH] feat(mobile/tab_switcher): click to activate

---
 .../widgets/mobile_widgets/TabSwitcher.css    |  2 ++
 .../widgets/mobile_widgets/TabSwitcher.tsx    | 23 ++++++++++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
index c281c04d9d..19360d8c15 100644
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.css
@@ -32,6 +32,8 @@
                 height: 180px;
                 overflow: hidden;
                 font-size: 0.5em;
+                user-select: none;
+                pointer-events: none;
 
                 &.type-text {
                     padding: 10px;
diff --git a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
index edbe10bbec..cb7c79af1d 100644
--- a/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
+++ b/apps/client/src/widgets/mobile_widgets/TabSwitcher.tsx
@@ -2,7 +2,7 @@ import "./TabSwitcher.css";
 
 import clsx from "clsx";
 import { createPortal } from "preact/compat";
-import { useEffect, useState } from "preact/hooks";
+import { useCallback, useState } from "preact/hooks";
 
 import appContext from "../../components/app_context";
 import NoteContext from "../../components/note_context";
@@ -31,6 +31,11 @@ function TabBarModal({ shown, setShown }: {
     shown: boolean;
     setShown: (newValue: boolean) => void;
 }) {
+    const selectTab = useCallback((noteContextToActivate: NoteContext) => {
+        appContext.tabManager.activateNoteContext(noteContextToActivate.ntxId);
+        setShown(false);
+    }, [ setShown ]);
+
     return (
         <Modal
             className="tab-bar-modal"
@@ -39,30 +44,36 @@ function TabBarModal({ shown, setShown }: {
             show={shown}
             onHidden={() => setShown(false)}
         >
-            <TabBarModelContent />
+            <TabBarModelContent selectTab={selectTab} />
         </Modal>
     );
 }
 
-function TabBarModelContent() {
+function TabBarModelContent({ selectTab }: {
+    selectTab: (noteContextToActivate: NoteContext) => void;
+}) {
     const mainNoteContexts = useMainNoteContexts();
 
     return (
         <div className="tabs">
             {mainNoteContexts.map((noteContext) => (
-                <Tab key={noteContext.ntxId} noteContext={noteContext} />
+                <Tab key={noteContext.ntxId} noteContext={noteContext} selectTab={selectTab} />
             ))}
         </div>
     );
 }
 
-function Tab({ noteContext }: {
+function Tab({ noteContext, selectTab }: {
     noteContext: NoteContext;
+    selectTab: (noteContextToActivate: NoteContext) => void;
 }) {
     const { note } = noteContext;
 
     return (
-        <div class="tab-card">
+        <div
+            class="tab-card"
+            onClick={() => selectTab(noteContext)}
+        >
             <header>
                 <span className="title">{noteContext.note?.title ?? t("tab_row.new_tab")}</span>
             </header>