chore(react/ribbon): toggleable tabs

apps/client/src/widgets/containers/ribbon_container.ts

@@ -63,41 +63,6 @@ export default class RibbonContainer extends NoteContextAwareWidget {
         }
     }
 
-    toggleRibbonTab($ribbonTitle: JQuery<HTMLElement>, refreshActiveTab = true) {
-        const activate = !$ribbonTitle.hasClass("active");
-
-        this.$tabContainer.find(".ribbon-tab-title").removeClass("active");
-        this.$bodyContainer.find(".ribbon-body").removeClass("active");
-
-        if (activate) {
-            const ribbonComponendId = $ribbonTitle.attr("data-ribbon-component-id");
-
-            const wasAlreadyActive = this.lastActiveComponentId === ribbonComponendId;
-
-            this.lastActiveComponentId = ribbonComponendId;
-
-            this.$tabContainer.find(`.ribbon-tab-title[data-ribbon-component-id="${ribbonComponendId}"]`).addClass("active");
-            this.$bodyContainer.find(`.ribbon-body[data-ribbon-component-id="${ribbonComponendId}"]`).addClass("active");
-
-            const activeChild = this.getActiveRibbonWidget();
-
-            if (activeChild && (refreshActiveTab || !wasAlreadyActive) && this.noteContext && this.notePath) {
-                const handleEventPromise = activeChild.handleEvent("noteSwitched", { noteContext: this.noteContext, notePath: this.notePath });
-
-                if (refreshActiveTab) {
-                    if (handleEventPromise) {
-                        handleEventPromise.then(() => (activeChild as any).focus?.()); // TODO: Base class
-                    } else {
-                        // TODO: Base class
-                        (activeChild as any).focus?.();
-                    }
-                }
-            }
-        } else {
-            this.lastActiveComponentId = null;
-        }
-    }
-
     async noteSwitched() {
         this.lastActiveComponentId = null;
 

apps/client/src/widgets/react/hooks.tsx

@@ -256,15 +256,12 @@ export function useNoteContext() {
         setNotePath(noteContext.notePath);        
     });
     useTriliumEventBeta("setNoteContext", ({ noteContext }) => {
-        console.log("Set note context", noteContext, noteContext.noteId);
         setNoteContext(noteContext);
     });
     useTriliumEventBeta("noteSwitchedAndActivated", ({ noteContext }) => {
-        console.log("Note switched and activated")
         setNoteContext(noteContext);
     });
     useTriliumEventBeta("noteSwitched", ({ noteContext, notePath }) => {
-        console.warn("Note switched", notePath);
         setNotePath(notePath);
     });
     useTriliumEventBeta("frocaReloaded", () => {

apps/client/src/widgets/ribbon/Ribbon.tsx

@@ -108,7 +108,14 @@ export default function Ribbon() {
                             icon={icon}
                             title={typeof title === "string" ? title : title(context)}
                             active={i === activeTab}
-                            onClick={() => setActiveTab(i)}
+                            onClick={() => {
+                                if (activeTab !== i) {
+                                    setActiveTab(i);
+                                } else {
+                                    // Collapse
+                                    setActiveTab(undefined);
+                                }
+                            }}
                         />
                     ))}
                 </div>
@@ -123,11 +130,13 @@ export default function Ribbon() {
 function RibbonTab({ icon, title, active, onClick }: { icon: string; title: string; active: boolean, onClick: () => void }) {
     return (
         <>
-            <div className={`ribbon-tab-title ${active ? "active" : ""}`}>
+            <div
+                className={`ribbon-tab-title ${active ? "active" : ""}`}
+                onClick={onClick}
+            >
                 <span
                     className={`ribbon-tab-title-icon ${icon}`}
                     title={title}                    
-                    onClick={onClick}
                 />
                 &nbsp;
                 { active && <span class="ribbon-tab-title-label">{title}</span> }

apps/client/src/widgets/ribbon/style.css

@@ -23,6 +23,7 @@
     flex-basis: 24px;
     max-width: max-content;
     flex-grow: 10;
+    user-select: none;
 }
 
 .ribbon-tab-title .bx {