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

2025-10-21 15:49:00 +02:00 · 2025-08-21 19:27:18 +03:00 · 2025-08-21 19:27:18 +03:00 · 5597f4e2e0
commit 5597f4e2e0
parent 45fbcec805
17 changed files with 123 additions and 41 deletions
--- a/apps/client/src/entities/fnote.ts
+++ b/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.
     */
--- a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
+++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
@ -0,0 +1,3 @@
+export default function BasicPropertiesTab() {
+    return <p>Hi</p>;
+}
--- a/apps/client/src/widgets/ribbon/Ribbon.tsx
+++ b/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">
+                    {TAB_CONFIGURATION.map(({ title, icon }) => (
                        <RibbonTab
-                        title={t("basic_properties.basic_properties")}
-                        icon="bx bx-slider"
+                            icon={icon}
+                            title={typeof title === "string" ? title : title(context)}
                        />
+                    ))}
                </div>
                <div className="ribbon-button-container"></div>
            </div>
@ -35,3 +132,4 @@ function RibbonTab({ icon, title }: { icon: string; title: string }) {
        </>
    )
 }
+
--- a/apps/client/src/widgets/ribbon_widgets/book_properties.ts
+++ b/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"
+
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts
+++ b/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"
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/edited_notes.ts
+++ b/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"
+
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/file_properties.ts
+++ b/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"
+
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/image_properties.ts
+++ b/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"
+
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts
+++ b/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(),
-            title: t("inherited_attribute_list.title"),
-            icon: "bx bx-list-plus"
+            show: !this.note?.isLaunchBarConfig()
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts
+++ b/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"
+
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/note_map.ts
+++ b/apps/client/src/widgets/ribbon_widgets/note_map.ts
@ -57,9 +57,7 @@ export default class NoteMapRibbonWidget extends NoteContextAwareWidget {

    getTitle() {
        return {
-            show: this.isEnabled(),
-            title: t("note_map.title"),
-            icon: "bx bxs-network-chart"
+            show: this.isEnabled()
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/note_paths.ts
+++ b/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"
+
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/note_properties.ts
+++ b/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"
+
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts
+++ b/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"
+
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/script_executor.ts
+++ b/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,
-            title: this.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"),
-            icon: "bx bx-play"
+            activate: true
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/search_definition.ts
+++ b/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,
-            title: t("search_definition.search_parameters"),
-            icon: "bx bx-search"
+            activate: true
        };
    }

--- a/apps/client/src/widgets/ribbon_widgets/similar_notes.ts
+++ b/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"
+
        };
    }