From 5597f4e2e0894fe4cc0e8e69a8412a666d705b58 Mon Sep 17 00:00:00 2001 From: Elian Doran Date: Thu, 21 Aug 2025 19:27:18 +0300 Subject: [PATCH] chore(react/ribbon): add all ribbon tab titles & icon --- apps/client/src/entities/fnote.ts | 4 + .../src/widgets/ribbon/BasicPropertiesTab.tsx | 3 + apps/client/src/widgets/ribbon/Ribbon.tsx | 108 +++++++++++++++++- .../widgets/ribbon_widgets/book_properties.ts | 3 +- .../ribbon_widgets/classic_editor_toolbar.ts | 2 - .../widgets/ribbon_widgets/edited_notes.ts | 3 +- .../widgets/ribbon_widgets/file_properties.ts | 3 +- .../ribbon_widgets/image_properties.ts | 3 +- .../inherited_attribute_list.ts | 4 +- .../ribbon_widgets/note_info_widget.ts | 3 +- .../src/widgets/ribbon_widgets/note_map.ts | 4 +- .../src/widgets/ribbon_widgets/note_paths.ts | 3 +- .../widgets/ribbon_widgets/note_properties.ts | 3 +- .../ribbon_widgets/owned_attribute_list.ts | 3 +- .../widgets/ribbon_widgets/script_executor.ts | 8 +- .../ribbon_widgets/search_definition.ts | 4 +- .../widgets/ribbon_widgets/similar_notes.ts | 3 +- 17 files changed, 123 insertions(+), 41 deletions(-) create mode 100644 apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx diff --git a/apps/client/src/entities/fnote.ts b/apps/client/src/entities/fnote.ts index 6099cba35..be80a1142 100644 --- 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. */ diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx new file mode 100644 index 000000000..e00787358 --- /dev/null +++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx @@ -0,0 +1,3 @@ +export default function BasicPropertiesTab() { + return

Hi

; +} \ No newline at end of file diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx index 48dcdcf1a..539c67f14 100644 --- 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 (
- + {TAB_CONFIGURATION.map(({ title, icon }) => ( + + ))}
@@ -34,4 +131,5 @@ function RibbonTab({ icon, title }: { icon: string; title: string }) {
) -} \ No newline at end of file +} + diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties.ts b/apps/client/src/widgets/ribbon_widgets/book_properties.ts index 47c1a83f1..04fb61c02 100644 --- 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" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts b/apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts index a4974ff24..f93b78ff8 100644 --- 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" }; } diff --git a/apps/client/src/widgets/ribbon_widgets/edited_notes.ts b/apps/client/src/widgets/ribbon_widgets/edited_notes.ts index 2967b5f6f..768d48566 100644 --- 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" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/file_properties.ts b/apps/client/src/widgets/ribbon_widgets/file_properties.ts index b6fc1082d..4d4b419c3 100644 --- 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" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/image_properties.ts b/apps/client/src/widgets/ribbon_widgets/image_properties.ts index 7412561e7..dfa67d7db 100644 --- 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" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts index 2e2ac4615..5524e0531 100644 --- 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() }; } diff --git a/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts b/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts index efe95007d..3a390eb1d 100644 --- 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" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/note_map.ts b/apps/client/src/widgets/ribbon_widgets/note_map.ts index b47de7b95..574e44dc2 100644 --- 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() }; } diff --git a/apps/client/src/widgets/ribbon_widgets/note_paths.ts b/apps/client/src/widgets/ribbon_widgets/note_paths.ts index 8681bfd21..9377a2198 100644 --- 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" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/note_properties.ts b/apps/client/src/widgets/ribbon_widgets/note_properties.ts index eb104411d..7f875e4e4 100644 --- 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" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts index dab466569..113e03e0d 100644 --- 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" + }; } diff --git a/apps/client/src/widgets/ribbon_widgets/script_executor.ts b/apps/client/src/widgets/ribbon_widgets/script_executor.ts index 3b0b96278..aaec721d7 100644 --- 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 }; } diff --git a/apps/client/src/widgets/ribbon_widgets/search_definition.ts b/apps/client/src/widgets/ribbon_widgets/search_definition.ts index 99ac91c50..de459a762 100644 --- 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 }; } diff --git a/apps/client/src/widgets/ribbon_widgets/similar_notes.ts b/apps/client/src/widgets/ribbon_widgets/similar_notes.ts index e8e867b64..f86fc714a 100644 --- 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" + }; }