chore(react/ribbon): add all ribbon tab titles & icon

apps/client/src/entities/fnote.ts

@@ -1020,6 +1020,10 @@ class FNote {
         return this.noteId.startsWith("_options");
     }
 
+    isTriliumSqlite() {
+        return this.mime === "text/x-sqlite;schema=trilium";
+    }
+
     /**
      * Provides note's date metadata.
      */

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

@@ -0,0 +1,3 @@
+export default function BasicPropertiesTab() {
+    return <p>Hi</p>;
+}

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

@@ -1,15 +1,112 @@
+import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
+import { useNoteContext } from "../react/hooks";
 import "./style.css";
 
+type TitleFn = string | ((context: TabContext) => string);
+
+interface TabContext {
+    note: FNote | null | undefined;
+}
+
+interface TabConfiguration {
+    title: TitleFn;
+    icon: string;
+}
+
+const TAB_CONFIGURATION: TabConfiguration[] = [
+    {
+        title: t("classic_editor_toolbar.title"),
+        icon: "bx bx-text"
+        // ClassicEditorToolbar
+    },
+    {        
+        title: ({ note }) => note?.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"),
+        icon: "bx bx-play"
+        // ScriptExecutorWidget
+    },
+    {
+        // SearchDefinitionWidget
+        title: t("search_definition.search_parameters"),
+        icon: "bx bx-search"
+    },
+    {
+        // Edited NotesWidget
+        title: t("edited_notes.title"),
+        icon: "bx bx-calendar-edit"
+    },
+    {
+        // BookPropertiesWidget
+        title: t("book_properties.book_properties"),
+        icon: "bx bx-book"
+    },
+    {
+        // NotePropertiesWidget
+        title: t("note_properties.info"),
+        icon: "bx bx-info-square"
+    },
+    {
+        // FilePropertiesWidget
+        title: t("file_properties.title"),
+        icon: "bx bx-file"
+    },
+    {
+        // ImagePropertiesWidget
+        title: t("image_properties.title"),
+        icon: "bx bx-image"
+    },
+    {
+        // BasicProperties
+        title: t("basic_properties.basic_properties"),
+        icon: "bx bx-slider"
+    },
+    {
+        // OwnedAttributeListWidget
+        title: t("owned_attribute_list.owned_attributes"),
+        icon: "bx bx-list-check"
+    },
+    {
+        // InheritedAttributesWidget
+        title: t("inherited_attribute_list.title"),
+        icon: "bx bx-list-plus"
+    },
+    {
+        // NotePathsWidget
+        title: t("note_paths.title"),
+        icon: "bx bx-collection"
+    },
+    {
+        // NoteMapRibbonWidget
+        title: t("note_map.title"),
+        icon: "bx bxs-network-chart"
+    },
+    {
+        // SimilarNotesWidget
+        title: t("similar_notes.title"),
+        icon: "bx bx-bar-chart"
+    },
+    {
+        // NoteInfoWidget
+        title: t("note_info_widget.title"),
+        icon: "bx bx-info-circle"
+    },
+    
+];
+
 export default function Ribbon() {
+    const { note } = useNoteContext();
+    const context: TabContext = { note };
+
     return (
         <div class="ribbon-container" style={{ contain: "none" }}>
             <div className="ribbon-top-row">
                 <div className="ribbon-tab-container">
-                    <RibbonTab
+                    {TAB_CONFIGURATION.map(({ title, icon }) => (
-                        title={t("basic_properties.basic_properties")}
+                        <RibbonTab
-                        icon="bx bx-slider"
+                            icon={icon}
-                    />
+                            title={typeof title === "string" ? title : title(context)}
+                        />
+                    ))}
                 </div>
                 <div className="ribbon-button-container"></div>
             </div>
@@ -34,4 +131,5 @@ function RibbonTab({ icon, title }: { icon: string; title: string }) {
             <div class="ribbon-tab-spacer" />
         </>
     )
-}
+}
+

apps/client/src/widgets/ribbon_widgets/book_properties.ts

@@ -93,8 +93,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
     getTitle() {
         return {
             show: this.isEnabled(),
-            title: t("book_properties.book_properties"),
+
-            icon: "bx bx-book"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts

@@ -64,8 +64,6 @@ export default class ClassicEditorToolbar extends NoteContextAwareWidget {
         return {
             show: await this.#shouldDisplay(),
             activate: true,
-            title: t("classic_editor_toolbar.title"),
-            icon: "bx bx-text"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/edited_notes.ts

@@ -49,8 +49,7 @@ export default class EditedNotesWidget extends NoteContextAwareWidget {
             show: this.isEnabled(),
             // promoted attributes have priority over edited notes
             activate: (this.note?.getPromotedDefinitionAttributes().length === 0 || !options.is("promotedAttributesOpenInRibbon")) && options.is("editedNotesOpenInRibbon"),
-            title: t("edited_notes.title"),
+
-            icon: "bx bx-calendar-edit"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/file_properties.ts

@@ -93,8 +93,7 @@ export default class FilePropertiesWidget extends NoteContextAwareWidget {
         return {
             show: this.isEnabled(),
             activate: true,
-            title: t("file_properties.title"),
+
-            icon: "bx bx-file"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/image_properties.ts

@@ -77,8 +77,7 @@ export default class ImagePropertiesWidget extends NoteContextAwareWidget {
         return {
             show: this.isEnabled(),
             activate: true,
-            title: t("image_properties.title"),
+
-            icon: "bx bx-image"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts

@@ -48,9 +48,7 @@ export default class InheritedAttributesWidget extends NoteContextAwareWidget {
 
     getTitle() {
         return {
-            show: !this.note?.isLaunchBarConfig(),
+            show: !this.note?.isLaunchBarConfig()
-            title: t("inherited_attribute_list.title"),
-            icon: "bx bx-list-plus"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/note_info_widget.ts

@@ -105,8 +105,7 @@ export default class NoteInfoWidget extends NoteContextAwareWidget {
     getTitle() {
         return {
             show: this.isEnabled(),
-            title: t("note_info_widget.title"),
+
-            icon: "bx bx-info-circle"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/note_map.ts

@@ -57,9 +57,7 @@ export default class NoteMapRibbonWidget extends NoteContextAwareWidget {
 
     getTitle() {
         return {
-            show: this.isEnabled(),
+            show: this.isEnabled()
-            title: t("note_map.title"),
-            icon: "bx bxs-network-chart"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/note_paths.ts

@@ -55,8 +55,7 @@ export default class NotePathsWidget extends NoteContextAwareWidget {
     getTitle() {
         return {
             show: true,
-            title: t("note_paths.title"),
+
-            icon: "bx bx-collection"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/note_properties.ts

@@ -31,8 +31,7 @@ export default class NotePropertiesWidget extends NoteContextAwareWidget {
         return {
             show: this.isEnabled(),
             activate: true,
-            title: t("note_properties.info"),
+
-            icon: "bx bx-info-square"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts

@@ -52,8 +52,7 @@ export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
     getTitle() {
         return {
             show: !this.note?.isLaunchBarConfig(),
-            title: t("owned_attribute_list.owned_attributes"),
+
-            icon: "bx bx-list-check"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/script_executor.ts

@@ -37,16 +37,10 @@ export default class ScriptExecutorWidget extends NoteContextAwareWidget {
         );
     }
 
-    isTriliumSqlite() {
-        return this.note?.mime === "text/x-sqlite;schema=trilium";
-    }
-
     getTitle() {
         return {
             show: this.isEnabled(),
-            activate: true,
+            activate: true
-            title: this.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"),
-            icon: "bx bx-play"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/search_definition.ts

@@ -187,9 +187,7 @@ export default class SearchDefinitionWidget extends NoteContextAwareWidget {
     getTitle() {
         return {
             show: this.isEnabled(),
-            activate: true,
+            activate: true
-            title: t("search_definition.search_parameters"),
-            icon: "bx bx-search"
         };
     }
 

apps/client/src/widgets/ribbon_widgets/similar_notes.ts

@@ -61,8 +61,7 @@ export default class SimilarNotesWidget extends NoteContextAwareWidget {
     getTitle() {
         return {
             show: this.isEnabled(),
-            title: t("similar_notes.title"),
+
-            icon: "bx bx-bar-chart"
         };
     }