From 0c8bfc39ef65a0e6a1fc64706f6dd9d9b79c2baf Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sun, 24 Aug 2025 12:23:25 +0300
Subject: [PATCH] refactor(react/ribbon): bring back tab activation

---
 apps/client/src/widgets/ribbon/Ribbon.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
index 7d0bc777b..e439529f3 100644
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "preact/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
 import { useNoteContext } from "../react/hooks";
 import "./style.css";
@@ -162,6 +162,14 @@ export default function Ribbon() {
     const [ activeTabIndex, setActiveTabIndex ] = useState<number | undefined>();
     const filteredTabs = useMemo(() => TAB_CONFIGURATION.filter(tab => typeof tab.show === "boolean" ? tab.show : tab.show?.(titleContext)), [ titleContext, note ]);
 
+    // Automatically activate the first ribbon tab that needs to be activated whenever a note changes.
+    useEffect(() => {
+        const tabToActivate = filteredTabs.find(tab => typeof tab.activate === "boolean" ? tab.activate : tab.activate?.(titleContext));
+        if (tabToActivate) {
+            setActiveTabIndex(tabToActivate.index);
+        }
+    }, [ note?.noteId ]);
+
     return (
         <div className="ribbon-container" style={{ contain: "none" }}>
             <div className="ribbon-top-row">