diff --git a/.editorconfig b/.editorconfig
index c965ea8c0..cd301498e 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,6 +1,6 @@
 root = true
 
-[*.{js,ts}]
+[*.{js,ts,.tsx}]
 charset = utf-8
 end_of_line = lf
 indent_size = 4
diff --git a/.vscode/snippets.code-snippets b/.vscode/snippets.code-snippets
index 77b251a4a..c7255af76 100644
--- a/.vscode/snippets.code-snippets
+++ b/.vscode/snippets.code-snippets
@@ -20,5 +20,10 @@
         "scope": "typescript",
         "prefix": "jqf",
         "body": ["private $${1:name}!: JQuery<HTMLElement>;"]
+    },
+    "region": {
+        "scope": "css",
+        "prefix": "region",
+        "body": ["/* #region ${1:name} */\n$0\n/* #endregion */"]
     }
 }
diff --git a/apps/client/src/components/app_context.ts b/apps/client/src/components/app_context.ts
index 4c750a544..ca4f9745f 100644
--- a/apps/client/src/components/app_context.ts
+++ b/apps/client/src/components/app_context.ts
@@ -31,16 +31,13 @@ import { StartupChecks } from "./startup_checks.js";
 import type { CreateNoteOpts } from "../services/note_create.js";
 import { ColumnComponent } from "tabulator-tables";
 import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
+import type RootContainer from "../widgets/containers/root_container.js";
 
 interface Layout {
-    getRootWidget: (appContext: AppContext) => RootWidget;
+    getRootWidget: (appContext: AppContext) => RootContainer;
 }
 
-interface RootWidget extends Component {
-    render: () => JQuery<HTMLElement>;
-}
-
-interface BeforeUploadListener extends Component {
+export interface BeforeUploadListener extends Component {
     beforeUnloadEvent(): boolean;
 }
 
@@ -85,7 +82,6 @@ export type CommandMappings = {
     focusTree: CommandData;
     focusOnTitle: CommandData;
     focusOnDetail: CommandData;
-    focusOnSearchDefinition: Required<CommandData>;
     searchNotes: CommandData & {
         searchString?: string;
         ancestorNoteId?: string | null;
@@ -323,6 +319,7 @@ export type CommandMappings = {
     printActiveNote: CommandData;
     exportAsPdf: CommandData;
     openNoteExternally: CommandData;
+    openNoteCustom: CommandData;
     renderActiveNote: CommandData;
     unhoist: CommandData;
     reloadFrontendApp: CommandData;
@@ -526,7 +523,7 @@ export type FilteredCommandNames<T extends CommandData> = keyof Pick<CommandMapp
 export class AppContext extends Component {
     isMainWindow: boolean;
     components: Component[];
-    beforeUnloadListeners: WeakRef<BeforeUploadListener>[];
+    beforeUnloadListeners: (WeakRef<BeforeUploadListener> | (() => boolean))[];
     tabManager!: TabManager;
     layout?: Layout;
     noteTreeWidget?: NoteTreeWidget;
@@ -619,7 +616,7 @@ export class AppContext extends Component {
             component.triggerCommand(commandName, { $el: $(this) });
         });
 
-        this.child(rootWidget);
+        this.child(rootWidget as Component);
 
         this.triggerEvent("initialRenderComplete", {});
     }
@@ -649,13 +646,17 @@ export class AppContext extends Component {
         return $(el).closest(".component").prop("component");
     }
 
-    addBeforeUnloadListener(obj: BeforeUploadListener) {
+    addBeforeUnloadListener(obj: BeforeUploadListener | (() => boolean)) {
         if (typeof WeakRef !== "function") {
             // older browsers don't support WeakRef
             return;
         }
 
-        this.beforeUnloadListeners.push(new WeakRef<BeforeUploadListener>(obj));
+        if (typeof obj === "object") {
+            this.beforeUnloadListeners.push(new WeakRef<BeforeUploadListener>(obj));
+        } else {
+            this.beforeUnloadListeners.push(obj);
+        }
     }
 }
 
@@ -665,25 +666,29 @@ const appContext = new AppContext(window.glob.isMainWindow);
 $(window).on("beforeunload", () => {
     let allSaved = true;
 
-    appContext.beforeUnloadListeners = appContext.beforeUnloadListeners.filter((wr) => !!wr.deref());
+    appContext.beforeUnloadListeners = appContext.beforeUnloadListeners.filter((wr) => typeof wr === "function" || !!wr.deref());
 
-    for (const weakRef of appContext.beforeUnloadListeners) {
-        const component = weakRef.deref();
+    for (const listener of appContext.beforeUnloadListeners) {
+        if (typeof listener === "object") {
+            const component = listener.deref();
 
-        if (!component) {
-            continue;
-        }
+            if (!component) {
+                continue;
+            }
 
-        if (!component.beforeUnloadEvent()) {
-            console.log(`Component ${component.componentId} is not finished saving its state.`);
-
-            toast.showMessage(t("app_context.please_wait_for_save"), 10000);
-
-            allSaved = false;
+            if (!component.beforeUnloadEvent()) {
+                console.log(`Component ${component.componentId} is not finished saving its state.`);
+                allSaved = false;
+            }
+        } else {
+            if (!listener()) {
+                allSaved = false;
+            }
         }
     }
 
     if (!allSaved) {
+        toast.showMessage(t("app_context.please_wait_for_save"), 10000);
         return "some string";
     }
 });
diff --git a/apps/client/src/components/component.ts b/apps/client/src/components/component.ts
index 8686a7bb9..9a59b96be 100644
--- a/apps/client/src/components/component.ts
+++ b/apps/client/src/components/component.ts
@@ -1,6 +1,8 @@
 import utils from "../services/utils.js";
 import type { CommandMappings, CommandNames, EventData, EventNames } from "./app_context.js";
 
+type EventHandler = ((data: any) => void);
+
 /**
  * Abstract class for all components in the Trilium's frontend.
  *
@@ -19,6 +21,7 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
     initialized: Promise<void> | null;
     parent?: TypedComponent<any>;
     _position!: number;
+    private listeners: Record<string, EventHandler[]> | null = {};
 
     constructor() {
         this.componentId = `${this.sanitizedClassName}-${utils.randomString(8)}`;
@@ -76,6 +79,14 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
     handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null {
         const promises: Promise<unknown>[] = [];
 
+        // Handle React children.
+        if (this.listeners?.[name]) {
+            for (const listener of this.listeners[name]) {
+                listener(data);
+            }
+        }
+
+        // Handle legacy children.
         for (const child of this.children) {
             const ret = child.handleEvent(name, data) as Promise<void>;
 
@@ -120,6 +131,35 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
 
         return promise;
     }
+
+    registerHandler<T extends EventNames>(name: T, handler: EventHandler) {
+        if (!this.listeners) {
+            this.listeners = {};
+        }
+
+        if (!this.listeners[name]) {
+            this.listeners[name] = [];
+        }
+
+        if (this.listeners[name].includes(handler)) {
+            return;
+        }
+
+        this.listeners[name].push(handler);
+    }
+
+    removeHandler<T extends EventNames>(name: T, handler: EventHandler) {
+        if (!this.listeners?.[name]?.includes(handler)) {
+            return;
+        }
+
+        this.listeners[name] = this.listeners[name]
+            .filter(listener => listener !== handler);
+
+        if (!this.listeners[name].length) {
+            delete this.listeners[name];
+        }
+    }
 }
 
 export default class Component extends TypedComponent<Component> {}
diff --git a/apps/client/src/components/root_command_executor.ts b/apps/client/src/components/root_command_executor.ts
index 8e7df9494..632eb0a88 100644
--- a/apps/client/src/components/root_command_executor.ts
+++ b/apps/client/src/components/root_command_executor.ts
@@ -43,8 +43,6 @@ export default class RootCommandExecutor extends Component {
         const noteContext = await appContext.tabManager.openTabWithNoteWithHoisting(searchNote.noteId, {
             activate: true
         });
-
-        appContext.triggerCommand("focusOnSearchDefinition", { ntxId: noteContext.ntxId });
     }
 
     async searchInSubtreeCommand({ notePath }: CommandListenerData<"searchInSubtree">) {
diff --git a/apps/client/src/desktop.ts b/apps/client/src/desktop.ts
index 2791f0577..57ff4084e 100644
--- a/apps/client/src/desktop.ts
+++ b/apps/client/src/desktop.ts
@@ -8,7 +8,6 @@ import electronContextMenu from "./menus/electron_context_menu.js";
 import glob from "./services/glob.js";
 import { t } from "./services/i18n.js";
 import options from "./services/options.js";
-import server from "./services/server.js";
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
 import "./stylesheets/bootstrap.scss";
diff --git a/apps/client/src/entities/fnote.ts b/apps/client/src/entities/fnote.ts
index 6099cba35..39015cb24 100644
--- a/apps/client/src/entities/fnote.ts
+++ b/apps/client/src/entities/fnote.ts
@@ -1020,6 +1020,14 @@ class FNote {
         return this.noteId.startsWith("_options");
     }
 
+    isTriliumSqlite() {
+        return this.mime === "text/x-sqlite;schema=trilium";
+    }
+
+    isTriliumScript() {
+        return this.mime.startsWith("application/javascript");
+    }
+
     /**
      * Provides note's date metadata.
      */
diff --git a/apps/client/src/layouts/desktop_layout.ts b/apps/client/src/layouts/desktop_layout.tsx
similarity index 77%
rename from apps/client/src/layouts/desktop_layout.ts
rename to apps/client/src/layouts/desktop_layout.tsx
index 33c1135c8..fece6efd0 100644
--- a/apps/client/src/layouts/desktop_layout.ts
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -4,21 +4,13 @@ import TabRowWidget from "../widgets/tab_row.js";
 import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
 import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteTitleWidget from "../widgets/note_title.js";
-import OwnedAttributeListWidget from "../widgets/ribbon_widgets/owned_attribute_list.js";
-import NoteActionsWidget from "../widgets/buttons/note_actions.js";
+import NoteTitleWidget from "../widgets/note_title.jsx";
 import NoteDetailWidget from "../widgets/note_detail.js";
-import RibbonContainer from "../widgets/containers/ribbon_container.js";
-import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
-import InheritedAttributesWidget from "../widgets/ribbon_widgets/inherited_attribute_list.js";
+import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import NoteListWidget from "../widgets/note_list.js";
-import SearchDefinitionWidget from "../widgets/ribbon_widgets/search_definition.js";
 import SqlResultWidget from "../widgets/sql_result.js";
 import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js";
-import FilePropertiesWidget from "../widgets/ribbon_widgets/file_properties.js";
-import ImagePropertiesWidget from "../widgets/ribbon_widgets/image_properties.js";
-import NotePropertiesWidget from "../widgets/ribbon_widgets/note_properties.js";
-import NoteIconWidget from "../widgets/note_icon.js";
+import NoteIconWidget from "../widgets/note_icon.jsx";
 import SearchResultWidget from "../widgets/search_result.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
@@ -29,15 +21,8 @@ import SplitNoteContainer from "../widgets/containers/split_note_container.js";
 import LeftPaneToggleWidget from "../widgets/buttons/left_pane_toggle.js";
 import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
 import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
-import BasicPropertiesWidget from "../widgets/ribbon_widgets/basic_properties.js";
-import NoteInfoWidget from "../widgets/ribbon_widgets/note_info_widget.js";
-import BookPropertiesWidget from "../widgets/ribbon_widgets/book_properties.js";
-import NoteMapRibbonWidget from "../widgets/ribbon_widgets/note_map.js";
-import NotePathsWidget from "../widgets/ribbon_widgets/note_paths.js";
-import SimilarNotesWidget from "../widgets/ribbon_widgets/similar_notes.js";
 import RightPaneContainer from "../widgets/containers/right_pane_container.js";
 import EditButton from "../widgets/floating_buttons/edit_button.js";
-import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js";
 import ShowTocWidgetButton from "../widgets/buttons/show_toc_widget_button.js";
 import ShowHighlightsListWidgetButton from "../widgets/buttons/show_highlights_list_widget_button.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
@@ -51,16 +36,13 @@ import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js";
 import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js";
 import SvgExportButton from "../widgets/floating_buttons/svg_export_button.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
-import RevisionsButton from "../widgets/buttons/revisions_button.js";
 import CodeButtonsWidget from "../widgets/floating_buttons/code_buttons.js";
 import ApiLogWidget from "../widgets/api_log.js";
 import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
-import ScriptExecutorWidget from "../widgets/ribbon_widgets/script_executor.js";
 import MovePaneButton from "../widgets/buttons/move_pane_button.js";
 import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
 import CopyImageReferenceButton from "../widgets/floating_buttons/copy_image_reference_button.js";
 import ScrollPaddingWidget from "../widgets/scroll_padding.js";
-import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";
 import options from "../services/options.js";
 import utils from "../services/utils.js";
 import GeoMapButtons from "../widgets/floating_buttons/geo_map_button.js";
@@ -73,6 +55,7 @@ import ToggleReadOnlyButton from "../widgets/floating_buttons/toggle_read_only_b
 import PngExportButton from "../widgets/floating_buttons/png_export_button.js";
 import RefreshButton from "../widgets/floating_buttons/refresh_button.js";
 import { applyModals } from "./layout_commons.js";
+import Ribbon from "../widgets/ribbon/Ribbon.jsx";
 
 export default class DesktopLayout {
 
@@ -151,37 +134,15 @@ export default class DesktopLayout {
                                                                 .css("min-height", "50px")
                                                                 .css("align-items", "center")
                                                                 .cssBlock(".title-row > * { margin: 5px; }")
-                                                                .child(new NoteIconWidget())
-                                                                .child(new NoteTitleWidget())
+                                                                .child(<NoteIconWidget />)
+                                                                .child(<NoteTitleWidget />)
                                                                 .child(new SpacerWidget(0, 1))
                                                                 .child(new MovePaneButton(true))
                                                                 .child(new MovePaneButton(false))
                                                                 .child(new ClosePaneButton())
                                                                 .child(new CreatePaneButton())
                                                         )
-                                                        .child(
-                                                            new RibbonContainer()
-                                                                // the order of the widgets matter. Some of these want to "activate" themselves
-                                                                // when visible. When this happens to multiple of them, the first one "wins".
-                                                                // promoted attributes should always win.
-                                                                .ribbon(new ClassicEditorToolbar())
-                                                                .ribbon(new ScriptExecutorWidget())
-                                                                .ribbon(new SearchDefinitionWidget())
-                                                                .ribbon(new EditedNotesWidget())
-                                                                .ribbon(new BookPropertiesWidget())
-                                                                .ribbon(new NotePropertiesWidget())
-                                                                .ribbon(new FilePropertiesWidget())
-                                                                .ribbon(new ImagePropertiesWidget())
-                                                                .ribbon(new BasicPropertiesWidget())
-                                                                .ribbon(new OwnedAttributeListWidget())
-                                                                .ribbon(new InheritedAttributesWidget())
-                                                                .ribbon(new NotePathsWidget())
-                                                                .ribbon(new NoteMapRibbonWidget())
-                                                                .ribbon(new SimilarNotesWidget())
-                                                                .ribbon(new NoteInfoWidget())
-                                                                .button(new RevisionsButton())
-                                                                .button(new NoteActionsWidget())
-                                                        )
+                                                        .child(<Ribbon />)
                                                         .child(new SharedInfoWidget())
                                                         .child(new WatchedFileUpdateStatusWidget())
                                                         .child(
@@ -235,8 +196,8 @@ export default class DesktopLayout {
             .child(new CloseZenButton())
 
             // Desktop-specific dialogs.
-            .child(new PasswordNoteSetDialog())
-            .child(new UploadAttachmentsDialog());
+            .child(<PasswordNoteSetDialog />)
+            .child(<UploadAttachmentsDialog />);
 
         applyModals(rootContainer);
         return rootContainer;
diff --git a/apps/client/src/layouts/layout_commons.ts b/apps/client/src/layouts/layout_commons.tsx
similarity index 61%
rename from apps/client/src/layouts/layout_commons.ts
rename to apps/client/src/layouts/layout_commons.tsx
index 5ee261317..02171db60 100644
--- a/apps/client/src/layouts/layout_commons.ts
+++ b/apps/client/src/layouts/layout_commons.tsx
@@ -24,48 +24,48 @@ import InfoDialog from "../widgets/dialogs/info.js";
 import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js";
 import PopupEditorDialog from "../widgets/dialogs/popup_editor.js";
 import FlexContainer from "../widgets/containers/flex_container.js";
-import NoteIconWidget from "../widgets/note_icon.js";
-import NoteTitleWidget from "../widgets/note_title.js";
-import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";
-import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
+import NoteIconWidget from "../widgets/note_icon";
+import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
 import NoteListWidget from "../widgets/note_list.js";
-import { CallToActionDialog } from "../widgets/dialogs/call_to_action.jsx";
+import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
+import NoteTitleWidget from "../widgets/note_title.jsx";
+import { PopupEditorFormattingToolbar } from "../widgets/ribbon/FormattingToolbar.js";
 
 export function applyModals(rootContainer: RootContainer) {
     rootContainer
-        .child(new BulkActionsDialog())
-        .child(new AboutDialog())
-        .child(new HelpDialog())
-        .child(new RecentChangesDialog())
-        .child(new BranchPrefixDialog())
-        .child(new SortChildNotesDialog())
-        .child(new IncludeNoteDialog())
-        .child(new NoteTypeChooserDialog())
-        .child(new JumpToNoteDialog())
-        .child(new AddLinkDialog())
-        .child(new CloneToDialog())
-        .child(new MoveToDialog())
-        .child(new ImportDialog())
-        .child(new ExportDialog())
-        .child(new MarkdownImportDialog())
-        .child(new ProtectedSessionPasswordDialog())
-        .child(new RevisionsDialog())
-        .child(new DeleteNotesDialog())
-        .child(new InfoDialog())
-        .child(new ConfirmDialog())
-        .child(new PromptDialog())
-        .child(new IncorrectCpuArchDialog())
+        .child(<BulkActionsDialog />)
+        .child(<AboutDialog />)
+        .child(<HelpDialog />)
+        .child(<RecentChangesDialog />)
+        .child(<BranchPrefixDialog />)
+        .child(<SortChildNotesDialog />)
+        .child(<IncludeNoteDialog />)
+        .child(<NoteTypeChooserDialog />)
+        .child(<JumpToNoteDialog />)
+        .child(<AddLinkDialog />)
+        .child(<CloneToDialog />)
+        .child(<MoveToDialog />)
+        .child(<ImportDialog />)
+        .child(<ExportDialog />)
+        .child(<MarkdownImportDialog />)
+        .child(<ProtectedSessionPasswordDialog />)
+        .child(<RevisionsDialog />)
+        .child(<DeleteNotesDialog />)
+        .child(<InfoDialog />)
+        .child(<ConfirmDialog />)
+        .child(<PromptDialog />)
+        .child(<IncorrectCpuArchDialog />)
         .child(new PopupEditorDialog()
                 .child(new FlexContainer("row")
                     .class("title-row")
                     .css("align-items", "center")
                     .cssBlock(".title-row > * { margin: 5px; }")
-                    .child(new NoteIconWidget())
-                    .child(new NoteTitleWidget()))
-                .child(new ClassicEditorToolbar())
+                    .child(<NoteIconWidget />)
+                    .child(<NoteTitleWidget />))
+                .child(<PopupEditorFormattingToolbar />)
                 .child(new PromotedAttributesWidget())
                 .child(new NoteDetailWidget())
                 .child(new NoteListWidget(true)))
-        .child(new CallToActionDialog());
+        .child(<CallToActionDialog />);
 }
diff --git a/apps/client/src/layouts/mobile_layout.ts b/apps/client/src/layouts/mobile_layout.tsx
similarity index 90%
rename from apps/client/src/layouts/mobile_layout.ts
rename to apps/client/src/layouts/mobile_layout.tsx
index 10b6d2ebe..4d0fb4143 100644
--- a/apps/client/src/layouts/mobile_layout.ts
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -7,7 +7,6 @@ import ToggleSidebarButtonWidget from "../widgets/mobile_widgets/toggle_sidebar_
 import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
-import FilePropertiesWidget from "../widgets/ribbon_widgets/file_properties.js";
 import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js";
 import EditButton from "../widgets/floating_buttons/edit_button.js";
 import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js";
@@ -19,14 +18,18 @@ import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
 import SharedInfoWidget from "../widgets/shared_info.js";
-import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
+import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
 import type AppContext from "../components/app_context.js";
 import TabRowWidget from "../widgets/tab_row.js";
 import RefreshButton from "../widgets/floating_buttons/refresh_button.js";
-import MobileEditorToolbar from "../widgets/ribbon_widgets/mobile_editor_toolbar.js";
+import MobileEditorToolbar from "../widgets/type_widgets/ckeditor/mobile_editor_toolbar.js";
 import { applyModals } from "./layout_commons.js";
 import CloseZenButton from "../widgets/close_zen_button.js";
+import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
+import { useNoteContext } from "../widgets/react/hooks.jsx";
+import { useContext } from "preact/hooks";
+import { ParentComponent } from "../widgets/react/react_utils.jsx";
 
 const MOBILE_CSS = `
 <style>
@@ -144,7 +147,7 @@ export default class MobileLayout {
                                     .css("font-size", "larger")
                                     .css("align-items", "center")
                                     .child(new ToggleSidebarButtonWidget().contentSized())
-                                    .child(new NoteTitleWidget().contentSized().css("position", "relative").css("padding-left", "0.5em"))
+                                    .child(<NoteTitleWidget />)
                                     .child(new MobileDetailMenuWidget(true).contentSized())
                             )
                             .child(new SharedInfoWidget())
@@ -164,7 +167,7 @@ export default class MobileLayout {
                                     .contentSized()
                                     .child(new NoteDetailWidget())
                                     .child(new NoteListWidget(false))
-                                    .child(new FilePropertiesWidget().css("font-size", "smaller"))
+                                    .child(<FilePropertiesWrapper />)
                             )
                             .child(new MobileEditorToolbar())
                     )
@@ -181,3 +184,13 @@ export default class MobileLayout {
         return rootContainer;
     }
 }
+
+function FilePropertiesWrapper() {
+    const { note } = useNoteContext();
+
+    return (
+        <div>
+            {note?.type === "file" && <FilePropertiesTab note={note} />}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/client/src/services/attributes.ts b/apps/client/src/services/attributes.ts
index 370fd1ce1..0b605f5bd 100644
--- a/apps/client/src/services/attributes.ts
+++ b/apps/client/src/services/attributes.ts
@@ -2,6 +2,7 @@ import server from "./server.js";
 import froca from "./froca.js";
 import type FNote from "../entities/fnote.js";
 import type { AttributeRow } from "./load_results.js";
+import { AttributeType } from "@triliumnext/commons";
 
 async function addLabel(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/attribute`, {
@@ -25,6 +26,14 @@ async function removeAttributeById(noteId: string, attributeId: string) {
     await server.remove(`notes/${noteId}/attributes/${attributeId}`);
 }
 
+export async function removeOwnedAttributesByNameOrType(note: FNote, type: AttributeType, name: string) {
+    for (const attr of note.getOwnedAttributes()) {
+        if (attr.type === type && attr.name === name) {
+            await server.remove(`notes/${note.noteId}/attributes/${attr.attributeId}`);
+        }
+    }
+}
+
 /**
  * Removes a label identified by its name from the given note, if it exists. Note that the label must be owned, i.e.
  * it will not remove inherited attributes.
@@ -52,7 +61,7 @@ function removeOwnedLabelByName(note: FNote, labelName: string) {
  * @param value the value of the attribute to set.
  */
 export async function setAttribute(note: FNote, type: "label" | "relation", name: string, value: string | null | undefined) {
-    if (value) {
+    if (value !== null && value !== undefined) {
         // Create or update the attribute.
         await server.put(`notes/${note.noteId}/set-attribute`, { type, name, value });
     } else {
diff --git a/apps/client/src/services/bulk_action.ts b/apps/client/src/services/bulk_action.ts
index d894ee17e..742df632f 100644
--- a/apps/client/src/services/bulk_action.ts
+++ b/apps/client/src/services/bulk_action.ts
@@ -18,7 +18,7 @@ import type FNote from "../entities/fnote.js";
 import toast from "./toast.js";
 import { BulkAction } from "@triliumnext/commons";
 
-const ACTION_GROUPS = [
+export const ACTION_GROUPS = [
     {
         title: t("bulk_actions.labels"),
         actions: [AddLabelBulkAction, UpdateLabelValueBulkAction, RenameLabelBulkAction, DeleteLabelBulkAction]
diff --git a/apps/client/src/services/open.ts b/apps/client/src/services/open.ts
index 7dab08a1a..0bcda805e 100644
--- a/apps/client/src/services/open.ts
+++ b/apps/client/src/services/open.ts
@@ -35,7 +35,7 @@ function download(url: string) {
     }
 }
 
-function downloadFileNote(noteId: string) {
+export function downloadFileNote(noteId: string) {
     const url = `${getFileUrl("notes", noteId)}?${Date.now()}`; // don't use cache
 
     download(url);
@@ -163,7 +163,7 @@ async function openExternally(type: string, entityId: string, mime: string) {
     }
 }
 
-const openNoteExternally = async (noteId: string, mime: string) => await openExternally("notes", noteId, mime);
+export const openNoteExternally = async (noteId: string, mime: string) => await openExternally("notes", noteId, mime);
 const openAttachmentExternally = async (attachmentId: string, mime: string) => await openExternally("attachments", attachmentId, mime);
 
 function getHost() {
diff --git a/apps/client/src/services/utils.ts b/apps/client/src/services/utils.ts
index aeb9abe47..68af11651 100644
--- a/apps/client/src/services/utils.ts
+++ b/apps/client/src/services/utils.ts
@@ -148,7 +148,7 @@ export function isElectron() {
     return !!(window && window.process && window.process.type);
 }
 
-function isMac() {
+export function isMac() {
     return navigator.platform.indexOf("Mac") > -1;
 }
 
@@ -185,7 +185,11 @@ export function escapeQuotes(value: string) {
     return value.replaceAll('"', "&quot;");
 }
 
-function formatSize(size: number) {
+export function formatSize(size: number | null | undefined) {
+    if (size === null || size === undefined) {
+        return "";
+    }
+
     size = Math.max(Math.round(size / 1024), 1);
 
     if (size < 1024) {
@@ -292,7 +296,7 @@ function isHtmlEmpty(html: string) {
     );
 }
 
-async function clearBrowserCache() {
+export async function clearBrowserCache() {
     if (isElectron()) {
         const win = dynamicRequire("@electron/remote").getCurrentWindow();
         await win.webContents.session.clearCache();
@@ -740,7 +744,7 @@ function isUpdateAvailable(latestVersion: string | null | undefined, currentVers
     return compareVersions(latestVersion, currentVersion) > 0;
 }
 
-function isLaunchBarConfig(noteId: string) {
+export function isLaunchBarConfig(noteId: string) {
     return ["_lbRoot", "_lbAvailableLaunchers", "_lbVisibleLaunchers", "_lbMobileRoot", "_lbMobileAvailableLaunchers", "_lbMobileVisibleLaunchers"].includes(noteId);
 }
 
@@ -788,6 +792,38 @@ export function arrayEqual<T>(a: T[], b: T[]) {
     return true;
 }
 
+type Indexed<T extends object> = T & { index: number };
+
+/**
+ * Given an object array, alters every object in the array to have an index field assigned to it.
+ *
+ * @param items the objects to be numbered.
+ * @returns the same object for convenience, with the type changed to indicate the new index field.
+ */
+export function numberObjectsInPlace<T extends object>(items: T[]): Indexed<T>[] {
+    let index = 0;
+    for (const item of items) {
+        (item as Indexed<T>).index = index++;
+    }
+    return items as Indexed<T>[];
+}
+
+export function mapToKeyValueArray<K extends string | number | symbol, V>(map: Record<K, V>) {
+    const values: { key: K, value: V }[] = [];
+    for (const [ key, value ] of Object.entries(map)) {
+        values.push({ key: key as K, value: value as V });
+    }
+    return values;
+}
+
+export function getErrorMessage(e: unknown) {
+    if (e && typeof e === "object" && "message" in e && typeof e.message === "string") {
+        return e.message;
+    } else {
+        return "Unknown error";
+    }
+}
+
 export default {
     reloadFrontendApp,
     restartDesktopApp,
diff --git a/apps/client/src/translations/cn/translation.json b/apps/client/src/translations/cn/translation.json
index 5915b0d30..e9be1e285 100644
--- a/apps/client/src/translations/cn/translation.json
+++ b/apps/client/src/translations/cn/translation.json
@@ -848,7 +848,7 @@
     "debug": "调试",
     "debug_description": "调试将打印额外的调试信息到控制台，以帮助调试复杂查询",
     "action": "操作",
-    "search_button": "搜索 <kbd>回车</kbd>",
+    "search_button": "搜索",
     "search_execute": "搜索并执行操作",
     "save_to_note": "保存到笔记",
     "search_parameters": "搜索参数",
diff --git a/apps/client/src/translations/de/translation.json b/apps/client/src/translations/de/translation.json
index fcb873b96..dbbc3d3d6 100644
--- a/apps/client/src/translations/de/translation.json
+++ b/apps/client/src/translations/de/translation.json
@@ -845,7 +845,7 @@
     "debug": "debuggen",
     "debug_description": "Debug gibt zusätzliche Debuginformationen in die Konsole aus, um das Debuggen komplexer Abfragen zu erleichtern",
     "action": "Aktion",
-    "search_button": "Suchen <kbd>Eingabetaste</kbd>",
+    "search_button": "Suchen",
     "search_execute": "Aktionen suchen und ausführen",
     "save_to_note": "Als Notiz speichern",
     "search_parameters": "Suchparameter",
diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 6a7a966c9..2162bce24 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -732,7 +732,8 @@
     "note_type": "Note type",
     "editable": "Editable",
     "basic_properties": "Basic Properties",
-    "language": "Language"
+    "language": "Language",
+    "configure_code_notes": "Configure code notes..."
   },
   "book_properties": {
     "view_type": "View type",
@@ -848,7 +849,7 @@
     "debug": "debug",
     "debug_description": "Debug will print extra debugging information into the console to aid in debugging complex queries",
     "action": "action",
-    "search_button": "Search <kbd>enter</kbd>",
+    "search_button": "Search",
     "search_execute": "Search & Execute actions",
     "save_to_note": "Save to note",
     "search_parameters": "Search Parameters",
diff --git a/apps/client/src/translations/es/translation.json b/apps/client/src/translations/es/translation.json
index 560456c32..4a0a7d684 100644
--- a/apps/client/src/translations/es/translation.json
+++ b/apps/client/src/translations/es/translation.json
@@ -848,7 +848,7 @@
     "debug": "depurar",
     "debug_description": "La depuración imprimirá información de depuración adicional en la consola para ayudar a depurar consultas complejas",
     "action": "acción",
-    "search_button": "Buscar <kbd>Enter</kbd>",
+    "search_button": "Buscar",
     "search_execute": "Buscar y ejecutar acciones",
     "save_to_note": "Guardar en nota",
     "search_parameters": "Parámetros de búsqueda",
diff --git a/apps/client/src/translations/fr/translation.json b/apps/client/src/translations/fr/translation.json
index 288ff2a5d..e085e10e8 100644
--- a/apps/client/src/translations/fr/translation.json
+++ b/apps/client/src/translations/fr/translation.json
@@ -848,7 +848,7 @@
     "debug": "debug",
     "debug_description": "Debug imprimera des informations supplémentaires dans la console pour faciliter le débogage des requêtes complexes",
     "action": "action",
-    "search_button": "Recherche <kbd>Entrée</kbd>",
+    "search_button": "Recherche",
     "search_execute": "Rechercher et exécuter des actions",
     "save_to_note": "Enregistrer dans la note",
     "search_parameters": "Paramètres de recherche",
diff --git a/apps/client/src/translations/ja/translation.json b/apps/client/src/translations/ja/translation.json
index 6bdd89926..d35501a37 100644
--- a/apps/client/src/translations/ja/translation.json
+++ b/apps/client/src/translations/ja/translation.json
@@ -185,7 +185,7 @@
     "debug": "デバッグ",
     "debug_description": "デバッグは複雑なクエリのデバッグを支援するために、追加のデバッグ情報をコンソールに出力します",
     "action": "アクション",
-    "search_button": "検索 <kbd>Enter</kbd>",
+    "search_button": "検索",
     "search_execute": "検索とアクションの実行",
     "save_to_note": "ノートに保存",
     "search_parameters": "検索パラメータ",
diff --git a/apps/client/src/translations/pt_br/translation.json b/apps/client/src/translations/pt_br/translation.json
index ec2b7b2ac..2e27fb68d 100644
--- a/apps/client/src/translations/pt_br/translation.json
+++ b/apps/client/src/translations/pt_br/translation.json
@@ -1025,7 +1025,7 @@
     "limit_description": "Limitar número de resultados",
     "debug": "depurar",
     "action": "ação",
-    "search_button": "Pesquisar <kbd>enter</kbd>",
+    "search_button": "Pesquisar",
     "search_execute": "Pesquisar & Executar ações",
     "save_to_note": "Salvar para nota",
     "search_parameters": "Parâmetros de Pesquisa",
diff --git a/apps/client/src/translations/ro/translation.json b/apps/client/src/translations/ro/translation.json
index 2cba870ef..02c7834dc 100644
--- a/apps/client/src/translations/ro/translation.json
+++ b/apps/client/src/translations/ro/translation.json
@@ -1106,7 +1106,7 @@
     "limit_description": "Limitează numărul de rezultate",
     "order_by": "ordonează după",
     "save_to_note": "Salvează în notiță",
-    "search_button": "Căutare <kbd>Enter</kbd>",
+    "search_button": "Căutare",
     "search_execute": "Caută și execută acțiunile",
     "search_note_saved": "Notița de căutare a fost salvată în {{- notePathTitle}}",
     "search_parameters": "Parametrii de căutare",
diff --git a/apps/client/src/translations/ru/translation.json b/apps/client/src/translations/ru/translation.json
index 118a40560..480c12b2b 100644
--- a/apps/client/src/translations/ru/translation.json
+++ b/apps/client/src/translations/ru/translation.json
@@ -1060,7 +1060,7 @@
     "fast_search": "быстрый поиск",
     "include_archived": "включать архивированные",
     "order_by": "сортировать по",
-    "search_button": "Поиск <kbd>enter</kbd>",
+    "search_button": "Поиск",
     "search_parameters": "Параметры поиска",
     "ancestor": "предок",
     "action": "действие",
diff --git a/apps/client/src/translations/tw/translation.json b/apps/client/src/translations/tw/translation.json
index edae3bc99..4b11d9e6a 100644
--- a/apps/client/src/translations/tw/translation.json
+++ b/apps/client/src/translations/tw/translation.json
@@ -845,7 +845,7 @@
     "debug": "除錯",
     "debug_description": "除錯將顯示額外的除錯資訊至控制台，以幫助除錯複雜查詢",
     "action": "操作",
-    "search_button": "搜尋 <kbd>Enter</kbd>",
+    "search_button": "搜尋",
     "search_execute": "搜尋並執行操作",
     "save_to_note": "儲存至筆記",
     "search_parameters": "搜尋參數",
diff --git a/apps/client/src/translations/uk/translation.json b/apps/client/src/translations/uk/translation.json
index c2398bcc9..907828d91 100644
--- a/apps/client/src/translations/uk/translation.json
+++ b/apps/client/src/translations/uk/translation.json
@@ -960,7 +960,7 @@
     "debug": "debug",
     "debug_description": "Debug виведе додаткову інформацію для налагодження в консоль, щоб допомогти у налагодженні складних запитів",
     "action": "дія",
-    "search_button": "Пошук <kbd>enter</kbd>",
+    "search_button": "Пошук",
     "search_execute": "Пошук & Виконання дій",
     "save_to_note": "Зберегти до нотатки",
     "search_parameters": "Параметри пошуку",
diff --git a/apps/client/src/utils/formatters.ts b/apps/client/src/utils/formatters.ts
index 755cc8153..d3209be7b 100644
--- a/apps/client/src/utils/formatters.ts
+++ b/apps/client/src/utils/formatters.ts
@@ -3,7 +3,11 @@ type DateTimeStyle = "full" | "long" | "medium" | "short" | "none" | undefined;
 /**
  * Formats the given date and time to a string based on the current locale.
  */
-export function formatDateTime(date: string | Date | number, dateStyle: DateTimeStyle = "medium", timeStyle: DateTimeStyle = "medium") {
+export function formatDateTime(date: string | Date | number | null | undefined, dateStyle: DateTimeStyle = "medium", timeStyle: DateTimeStyle = "medium") {
+    if (!date) {
+        return "";
+    }
+
     const locale = navigator.language;
 
     let parsedDate;
diff --git a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts b/apps/client/src/widgets/attribute_widgets/attribute_editor.ts
deleted file mode 100644
index 3e97723a5..000000000
--- a/apps/client/src/widgets/attribute_widgets/attribute_editor.ts
+++ /dev/null
@@ -1,504 +0,0 @@
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import noteAutocompleteService, { type Suggestion } from "../../services/note_autocomplete.js";
-import server from "../../services/server.js";
-import contextMenuService from "../../menus/context_menu.js";
-import attributeParser, { type Attribute } from "../../services/attribute_parser.js";
-import { AttributeEditor, type EditorConfig, type ModelElement, type MentionFeed, type ModelNode, type ModelPosition } from "@triliumnext/ckeditor5";
-import froca from "../../services/froca.js";
-import attributeRenderer from "../../services/attribute_renderer.js";
-import noteCreateService from "../../services/note_create.js";
-import attributeService from "../../services/attributes.js";
-import linkService from "../../services/link.js";
-import type AttributeDetailWidget from "./attribute_detail.js";
-import type { CommandData, EventData, EventListener, FilteredCommandNames } from "../../components/app_context.js";
-import type { default as FAttribute, AttributeType } from "../../entities/fattribute.js";
-import type FNote from "../../entities/fnote.js";
-import { escapeQuotes } from "../../services/utils.js";
-
-const HELP_TEXT = `
-<p>${t("attribute_editor.help_text_body1")}</p>
-
-<p>${t("attribute_editor.help_text_body2")}</p>
-
-<p>${t("attribute_editor.help_text_body3")}</p>`;
-
-const TPL = /*html*/`
-<div style="position: relative; padding-top: 10px; padding-bottom: 10px">
-    <style>
-    .attribute-list-editor {
-        border: 0 !important;
-        outline: 0 !important;
-        box-shadow: none !important;
-        padding: 0 0 0 5px !important;
-        margin: 0 !important;
-        max-height: 100px;
-        overflow: auto;
-        transition: opacity .1s linear;
-    }
-
-    .attribute-list-editor.ck-content .mention {
-        color: var(--muted-text-color) !important;
-        background: transparent !important;
-    }
-
-    .save-attributes-button {
-        color: var(--muted-text-color);
-        position: absolute;
-        bottom: 14px;
-        right: 25px;
-        cursor: pointer;
-        border: 1px solid transparent;
-        font-size: 130%;
-    }
-
-    .add-new-attribute-button {
-        color: var(--muted-text-color);
-        position: absolute;
-        bottom: 13px;
-        right: 0;
-        cursor: pointer;
-        border: 1px solid transparent;
-        font-size: 130%;
-    }
-
-    .add-new-attribute-button:hover, .save-attributes-button:hover {
-        border: 1px solid var(--button-border-color);
-        border-radius: var(--button-border-radius);
-        background: var(--button-background-color);
-        color: var(--button-text-color);
-    }
-
-    .attribute-errors {
-        color: red;
-        padding: 5px 50px 0px 5px; /* large right padding to avoid buttons */
-    }
-    </style>
-
-    <div class="attribute-list-editor" tabindex="200"></div>
-
-    <div class="bx bx-save save-attributes-button tn-tool-button" title="${escapeQuotes(t("attribute_editor.save_attributes"))}"></div>
-    <div class="bx bx-plus add-new-attribute-button tn-tool-button" title="${escapeQuotes(t("attribute_editor.add_a_new_attribute"))}"></div>
-
-    <div class="attribute-errors" style="display: none;"></div>
-</div>
-`;
-
-const mentionSetup: MentionFeed[] = [
-    {
-        marker: "@",
-        feed: (queryText) => noteAutocompleteService.autocompleteSourceForCKEditor(queryText),
-        itemRenderer: (_item) => {
-            const item = _item as Suggestion;
-            const itemElement = document.createElement("button");
-
-            itemElement.innerHTML = `${item.highlightedNotePathTitle} `;
-
-            return itemElement;
-        },
-        minimumCharacters: 0
-    },
-    {
-        marker: "#",
-        feed: async (queryText) => {
-            const names = await server.get<string[]>(`attribute-names/?type=label&query=${encodeURIComponent(queryText)}`);
-
-            return names.map((name) => {
-                return {
-                    id: `#${name}`,
-                    name: name
-                };
-            });
-        },
-        minimumCharacters: 0
-    },
-    {
-        marker: "~",
-        feed: async (queryText) => {
-            const names = await server.get<string[]>(`attribute-names/?type=relation&query=${encodeURIComponent(queryText)}`);
-
-            return names.map((name) => {
-                return {
-                    id: `~${name}`,
-                    name: name
-                };
-            });
-        },
-        minimumCharacters: 0
-    }
-];
-
-const editorConfig: EditorConfig = {
-    toolbar: {
-        items: []
-    },
-    placeholder: t("attribute_editor.placeholder"),
-    mention: {
-        feeds: mentionSetup
-    },
-    licenseKey: "GPL"
-};
-
-type AttributeCommandNames = FilteredCommandNames<CommandData>;
-
-export default class AttributeEditorWidget extends NoteContextAwareWidget implements EventListener<"entitiesReloaded">, EventListener<"addNewLabel">, EventListener<"addNewRelation"> {
-    private attributeDetailWidget: AttributeDetailWidget;
-    private $editor!: JQuery<HTMLElement>;
-    private $addNewAttributeButton!: JQuery<HTMLElement>;
-    private $saveAttributesButton!: JQuery<HTMLElement>;
-    private $errors!: JQuery<HTMLElement>;
-
-    private textEditor!: AttributeEditor;
-    private lastUpdatedNoteId!: string | undefined;
-    private lastSavedContent!: string;
-
-    constructor(attributeDetailWidget: AttributeDetailWidget) {
-        super();
-
-        this.attributeDetailWidget = attributeDetailWidget;
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$editor = this.$widget.find(".attribute-list-editor");
-
-        this.initialized = this.initEditor();
-
-        this.$editor.on("keydown", async (e) => {
-            if (e.which === 13) {
-                // allow autocomplete to fill the result textarea
-                setTimeout(() => this.save(), 100);
-            }
-
-            this.attributeDetailWidget.hide();
-        });
-
-        this.$editor.on("blur", () => setTimeout(() => this.save(), 100)); // Timeout to fix https://github.com/zadam/trilium/issues/4160
-
-        this.$addNewAttributeButton = this.$widget.find(".add-new-attribute-button");
-        this.$addNewAttributeButton.on("click", (e) => this.addNewAttribute(e));
-
-        this.$saveAttributesButton = this.$widget.find(".save-attributes-button");
-        this.$saveAttributesButton.on("click", () => this.save());
-
-        this.$errors = this.$widget.find(".attribute-errors");
-    }
-
-    addNewAttribute(e: JQuery.ClickEvent) {
-        contextMenuService.show<AttributeCommandNames>({
-            x: e.pageX,
-            y: e.pageY,
-            orientation: "left",
-            items: [
-                { title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" },
-                { title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" },
-                { title: "----" },
-                { title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" },
-                { title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" }
-            ],
-            selectMenuItemHandler: ({ command }) => this.handleAddNewAttributeCommand(command)
-        });
-        // Prevent automatic hiding of the context menu due to the button being clicked.
-        e.stopPropagation();
-    }
-
-    // triggered from keyboard shortcut
-    async addNewLabelEvent({ ntxId }: EventData<"addNewLabel">) {
-        if (this.isNoteContext(ntxId)) {
-            await this.refresh();
-
-            this.handleAddNewAttributeCommand("addNewLabel");
-        }
-    }
-
-    // triggered from keyboard shortcut
-    async addNewRelationEvent({ ntxId }: EventData<"addNewRelation">) {
-        if (this.isNoteContext(ntxId)) {
-            await this.refresh();
-
-            this.handleAddNewAttributeCommand("addNewRelation");
-        }
-    }
-
-    async handleAddNewAttributeCommand(command: AttributeCommandNames | undefined) {
-        // TODO: Not sure what the relation between FAttribute[] and Attribute[] is.
-        const attrs = this.parseAttributes() as FAttribute[];
-
-        if (!attrs) {
-            return;
-        }
-
-        let type: AttributeType;
-        let name;
-        let value;
-
-        if (command === "addNewLabel") {
-            type = "label";
-            name = "myLabel";
-            value = "";
-        } else if (command === "addNewRelation") {
-            type = "relation";
-            name = "myRelation";
-            value = "";
-        } else if (command === "addNewLabelDefinition") {
-            type = "label";
-            name = "label:myLabel";
-            value = "promoted,single,text";
-        } else if (command === "addNewRelationDefinition") {
-            type = "label";
-            name = "relation:myRelation";
-            value = "promoted,single";
-        } else {
-            return;
-        }
-
-        // TODO: Incomplete type
-        //@ts-ignore
-        attrs.push({
-            type,
-            name,
-            value,
-            isInheritable: false
-        });
-
-        await this.renderOwnedAttributes(attrs, false);
-
-        this.$editor.scrollTop(this.$editor[0].scrollHeight);
-
-        const rect = this.$editor[0].getBoundingClientRect();
-
-        setTimeout(() => {
-            // showing a little bit later because there's a conflict with outside click closing the attr detail
-            this.attributeDetailWidget.showAttributeDetail({
-                allAttributes: attrs,
-                attribute: attrs[attrs.length - 1],
-                isOwned: true,
-                x: (rect.left + rect.right) / 2,
-                y: rect.bottom,
-                focus: "name"
-            });
-        }, 100);
-    }
-
-    async save() {
-        if (this.lastUpdatedNoteId !== this.noteId) {
-            // https://github.com/zadam/trilium/issues/3090
-            console.warn("Ignoring blur event because a different note is loaded.");
-            return;
-        }
-
-        const attributes = this.parseAttributes();
-
-        if (attributes) {
-            await server.put(`notes/${this.noteId}/attributes`, attributes, this.componentId);
-
-            this.$saveAttributesButton.fadeOut();
-
-            // blink the attribute text to give a visual hint that save has been executed
-            this.$editor.css("opacity", 0);
-
-            // revert back
-            setTimeout(() => this.$editor.css("opacity", 1), 100);
-        }
-    }
-
-    parseAttributes() {
-        try {
-            return attributeParser.lexAndParse(this.getPreprocessedData());
-        } catch (e: any) {
-            this.$errors.text(e.message).slideDown();
-        }
-    }
-
-    getPreprocessedData() {
-        const str = this.textEditor
-            .getData()
-            .replace(/<a[^>]+href="(#[A-Za-z0-9_/]*)"[^>]*>[^<]*<\/a>/g, "$1")
-            .replace(/&nbsp;/g, " "); // otherwise .text() below outputs non-breaking space in unicode
-
-        return $("<div>").html(str).text();
-    }
-
-    async initEditor() {
-        this.$widget.show();
-
-        this.$editor.on("click", (e) => this.handleEditorClick(e));
-
-        this.textEditor = await AttributeEditor.create(this.$editor[0], editorConfig);
-        this.textEditor.model.document.on("change:data", () => this.dataChanged());
-        this.textEditor.editing.view.document.on(
-            "enter",
-            (event, data) => {
-                // disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422
-                data.preventDefault();
-                event.stop();
-            },
-            { priority: "high" }
-        );
-
-        // disable spellcheck for attribute editor
-        const documentRoot = this.textEditor.editing.view.document.getRoot();
-        if (documentRoot) {
-            this.textEditor.editing.view.change((writer) => writer.setAttribute("spellcheck", "false", documentRoot));
-        }
-    }
-
-    dataChanged() {
-        this.lastUpdatedNoteId = this.noteId;
-
-        if (this.lastSavedContent === this.textEditor.getData()) {
-            this.$saveAttributesButton.fadeOut();
-        } else {
-            this.$saveAttributesButton.fadeIn();
-        }
-
-        if (this.$errors.is(":visible")) {
-            // using .hide() instead of .slideUp() since this will also hide the error after confirming
-            // mention for relation name which suits up. When using.slideUp() error will appear and the slideUp which is weird
-            this.$errors.hide();
-        }
-    }
-
-    async handleEditorClick(e: JQuery.ClickEvent) {
-        const pos = this.textEditor.model.document.selection.getFirstPosition();
-
-        if (pos && pos.textNode && pos.textNode.data) {
-            const clickIndex = this.getClickIndex(pos);
-
-            let parsedAttrs;
-
-            try {
-                parsedAttrs = attributeParser.lexAndParse(this.getPreprocessedData(), true);
-            } catch (e) {
-                // the input is incorrect because the user messed up with it and now needs to fix it manually
-                return null;
-            }
-
-            let matchedAttr: Attribute | null = null;
-
-            for (const attr of parsedAttrs) {
-                if (attr.startIndex && clickIndex > attr.startIndex && attr.endIndex && clickIndex <= attr.endIndex) {
-                    matchedAttr = attr;
-                    break;
-                }
-            }
-
-            setTimeout(() => {
-                if (matchedAttr) {
-                    this.$editor.tooltip("hide");
-
-                    this.attributeDetailWidget.showAttributeDetail({
-                        allAttributes: parsedAttrs,
-                        attribute: matchedAttr,
-                        isOwned: true,
-                        x: e.pageX,
-                        y: e.pageY
-                    });
-                } else {
-                    this.showHelpTooltip();
-                }
-            }, 100);
-        } else {
-            this.showHelpTooltip();
-        }
-    }
-
-    showHelpTooltip() {
-        this.attributeDetailWidget.hide();
-
-        this.$editor.tooltip({
-            trigger: "focus",
-            html: true,
-            title: HELP_TEXT,
-            placement: "bottom",
-            offset: "0,30"
-        });
-
-        this.$editor.tooltip("show");
-    }
-
-    getClickIndex(pos: ModelPosition) {
-        let clickIndex = pos.offset - (pos.textNode?.startOffset ?? 0);
-
-        let curNode: ModelNode | Text | ModelElement | null = pos.textNode;
-
-        while (curNode?.previousSibling) {
-            curNode = curNode.previousSibling;
-
-            if ((curNode as ModelElement).name === "reference") {
-                clickIndex += (curNode.getAttribute("href") as string).length + 1;
-            } else if ("data" in curNode) {
-                clickIndex += (curNode.data as string).length;
-            }
-        }
-
-        return clickIndex;
-    }
-
-    async loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string) {
-        const { noteId } = linkService.parseNavigationStateFromUrl(href);
-        const note = noteId ? await froca.getNote(noteId, true) : null;
-        const title = note ? note.title : "[missing]";
-
-        $el.text(title);
-    }
-
-    async refreshWithNote(note: FNote) {
-        await this.renderOwnedAttributes(note.getOwnedAttributes(), true);
-    }
-
-    async renderOwnedAttributes(ownedAttributes: FAttribute[], saved: boolean) {
-        // attrs are not resorted if position changes after the initial load
-        ownedAttributes.sort((a, b) => a.position - b.position);
-
-        let htmlAttrs = (await attributeRenderer.renderAttributes(ownedAttributes, true)).html();
-
-        if (htmlAttrs.length > 0) {
-            htmlAttrs += "&nbsp;";
-        }
-
-        this.textEditor.setData(htmlAttrs);
-
-        if (saved) {
-            this.lastSavedContent = this.textEditor.getData();
-
-            this.$saveAttributesButton.fadeOut(0);
-        }
-    }
-
-    async createNoteForReferenceLink(title: string) {
-        let result;
-        if (this.notePath) {
-            result = await noteCreateService.createNoteWithTypePrompt(this.notePath, {
-                activate: false,
-                title: title
-            });
-        }
-
-        return result?.note?.getBestNotePathString();
-    }
-
-    async updateAttributeList(attributes: FAttribute[]) {
-        await this.renderOwnedAttributes(attributes, false);
-    }
-
-    focus() {
-        this.$editor.trigger("focus");
-
-        this.textEditor.model.change((writer) => {
-            const documentRoot = this.textEditor.editing.model.document.getRoot();
-            if (!documentRoot) {
-                return;
-            }
-
-            const positionAt = writer.createPositionAt(documentRoot, "end");
-            writer.setSelection(positionAt);
-        });
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows(this.componentId).find((attr) => attributeService.isAffecting(attr, this.note))) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/basic_widget.ts b/apps/client/src/widgets/basic_widget.ts
index be7b0bbd7..f49f2382c 100644
--- a/apps/client/src/widgets/basic_widget.ts
+++ b/apps/client/src/widgets/basic_widget.ts
@@ -1,7 +1,11 @@
+import { isValidElement, VNode } from "preact";
 import Component, { TypedComponent } from "../components/component.js";
 import froca from "../services/froca.js";
 import { t } from "../services/i18n.js";
 import toastService from "../services/toast.js";
+import { renderReactWidget } from "./react/react_utils.jsx";
+import { EventNames, EventData } from "../components/app_context.js";
+import { Handler } from "leaflet";
 
 export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedComponent<T> {
     protected attrs: Record<string, string>;
@@ -22,11 +26,14 @@ export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedCompon
         this.childPositionCounter = 10;
     }
 
-    child(...components: T[]) {
-        if (!components) {
+    child(..._components: (T | VNode)[]) {
+        if (!_components) {
             return this;
         }
 
+        // Convert any React components to legacy wrapped components.
+        const components = wrapReactWidgets(_components);
+
         super.child(...components);
 
         for (const component of components) {
@@ -258,3 +265,30 @@ export class TypedBasicWidget<T extends TypedComponent<any>> extends TypedCompon
  * For information on using widgets, see the tutorial {@tutorial widget_basics}.
  */
 export default class BasicWidget extends TypedBasicWidget<Component> {}
+
+export function wrapReactWidgets<T extends TypedComponent<any>>(components: (T | VNode)[]) {
+    const wrappedResult: T[] = [];
+    for (const component of components) {
+        if (isValidElement(component)) {
+            wrappedResult.push(new ReactWrappedWidget(component) as unknown as T);
+        } else {
+            wrappedResult.push(component);
+        }
+    }
+    return wrappedResult;
+}
+
+export class ReactWrappedWidget extends BasicWidget {
+
+    private el: VNode;
+
+    constructor(el: VNode) {
+        super();
+        this.el = el;
+    }
+
+    doRender() {
+        this.$widget = renderReactWidget(this, this.el);
+    }
+
+}
diff --git a/apps/client/src/widgets/bookmark_switch.ts b/apps/client/src/widgets/bookmark_switch.ts
deleted file mode 100644
index 93d4789aa..000000000
--- a/apps/client/src/widgets/bookmark_switch.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import SwitchWidget from "./switch.js";
-import server from "../services/server.js";
-import toastService from "../services/toast.js";
-import { t } from "../services/i18n.js";
-import type FNote from "../entities/fnote.js";
-import type { EventData } from "../components/app_context.js";
-
-// TODO: Deduplicate
-type Response = {
-    success: true;
-} | {
-    success: false;
-    message: string;
-}
-
-export default class BookmarkSwitchWidget extends SwitchWidget {
-    isEnabled() {
-        return (
-            super.isEnabled() &&
-            // it's not possible to bookmark root because that would clone it under bookmarks and thus create a cycle
-            !["root", "_hidden"].includes(this.noteId ?? "")
-        );
-    }
-
-    doRender() {
-        super.doRender();
-
-        this.switchOnName = t("bookmark_switch.bookmark");
-        this.switchOnTooltip = t("bookmark_switch.bookmark_this_note");
-
-        this.switchOffName = t("bookmark_switch.bookmark");
-        this.switchOffTooltip = t("bookmark_switch.remove_bookmark");
-    }
-
-    async toggle(state: boolean | null | undefined) {
-        const resp = await server.put<Response>(`notes/${this.noteId}/toggle-in-parent/_lbBookmarks/${!!state}`);
-
-        if (!resp.success && "message" in resp) {
-            toastService.showError(resp.message);
-        }
-    }
-
-    async refreshWithNote(note: FNote) {
-        const isBookmarked = !!note.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks");
-
-        this.isToggled = isBookmarked;
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getBranchRows().find((b) => b.noteId === this.noteId)) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/bulk_actions/BulkAction.tsx b/apps/client/src/widgets/bulk_actions/BulkAction.tsx
index 3389d59f5..8b562d0f0 100644
--- a/apps/client/src/widgets/bulk_actions/BulkAction.tsx
+++ b/apps/client/src/widgets/bulk_actions/BulkAction.tsx
@@ -1,6 +1,7 @@
 import { ComponentChildren } from "preact";
 import { memo } from "preact/compat";
 import AbstractBulkAction from "./abstract_bulk_action";
+import HelpRemoveButtons from "../react/HelpRemoveButtons";
 
 interface BulkActionProps {
     label: string | ComponentChildren;   
@@ -24,19 +25,11 @@ const BulkAction = memo(({ label, children, helpText, bulkAction }: BulkActionPr
                     {children}
                 </div>
             </td>
-            <td className="button-column">
-                {helpText && <div className="dropdown help-dropdown">
-                    <span className="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-                    <div className="dropdown-menu dropdown-menu-right p-4">
-                        {helpText}
-                    </div>
-                </div>}
-
-                <span
-                    className="bx bx-x icon-action action-conf-del"
-                    onClick={() => bulkAction?.deleteAction()}
-                />
-            </td>
+            <HelpRemoveButtons
+                help={helpText}
+                removeText="Delete"
+                onRemove={() => bulkAction?.deleteAction()}
+            />
         </tr>
     );
 });
diff --git a/apps/client/src/widgets/bulk_actions/note/move_note.tsx b/apps/client/src/widgets/bulk_actions/note/move_note.tsx
index ac5829305..4290726ce 100644
--- a/apps/client/src/widgets/bulk_actions/note/move_note.tsx
+++ b/apps/client/src/widgets/bulk_actions/note/move_note.tsx
@@ -1,11 +1,11 @@
 import { t } from "../../../services/i18n.js";
-import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
+import AbstractBulkAction from "../abstract_bulk_action.js";
 import BulkAction, { BulkActionText } from "../BulkAction.jsx";
 import NoteAutocomplete from "../../react/NoteAutocomplete.jsx";
 import { useEffect, useState } from "preact/hooks";
 import { useSpacedUpdate } from "../../react/hooks.jsx";
 
-function MoveNoteBulkActionComponent({ bulkAction, actionDef }: { bulkAction: AbstractBulkAction, actionDef: ActionDefinition }) {
+function MoveNoteBulkActionComponent({ bulkAction }: { bulkAction: AbstractBulkAction }) {
     const [ targetParentNoteId, setTargetParentNoteId ] = useState<string>();
     const spacedUpdate = useSpacedUpdate(() => {
         return bulkAction.saveAction({ targetParentNoteId: targetParentNoteId })
@@ -45,6 +45,6 @@ export default class MoveNoteBulkAction extends AbstractBulkAction {
     }
 
     doRender() {
-        return <MoveNoteBulkActionComponent bulkAction={this} actionDef={this.actionDef} />
+        return <MoveNoteBulkActionComponent bulkAction={this} />
     }
 }
diff --git a/apps/client/src/widgets/bulk_actions/note/rename_note.tsx b/apps/client/src/widgets/bulk_actions/note/rename_note.tsx
index 5fe9b8912..682494cd2 100644
--- a/apps/client/src/widgets/bulk_actions/note/rename_note.tsx
+++ b/apps/client/src/widgets/bulk_actions/note/rename_note.tsx
@@ -1,4 +1,3 @@
-import SpacedUpdate from "../../../services/spaced_update.js";
 import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
 import { t } from "../../../services/i18n.js";
 import BulkAction from "../BulkAction.jsx";
diff --git a/apps/client/src/widgets/bulk_actions/relation/add_relation.tsx b/apps/client/src/widgets/bulk_actions/relation/add_relation.tsx
index 5e10933a8..59d222ee8 100644
--- a/apps/client/src/widgets/bulk_actions/relation/add_relation.tsx
+++ b/apps/client/src/widgets/bulk_actions/relation/add_relation.tsx
@@ -1,6 +1,4 @@
-import SpacedUpdate from "../../../services/spaced_update.js";
 import AbstractBulkAction, { ActionDefinition } from "../abstract_bulk_action.js";
-import noteAutocompleteService from "../../../services/note_autocomplete.js";
 import { t } from "../../../services/i18n.js";
 import BulkAction, { BulkActionText } from "../BulkAction.jsx";
 import NoteAutocomplete from "../../react/NoteAutocomplete.jsx";
diff --git a/apps/client/src/widgets/buttons/note_actions.ts b/apps/client/src/widgets/buttons/note_actions.ts
deleted file mode 100644
index 069253bfe..000000000
--- a/apps/client/src/widgets/buttons/note_actions.ts
+++ /dev/null
@@ -1,252 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import utils from "../../services/utils.js";
-import branchService from "../../services/branches.js";
-import dialogService from "../../services/dialog.js";
-import server from "../../services/server.js";
-import toastService from "../../services/toast.js";
-import ws from "../../services/ws.js";
-import appContext, { type EventData } from "../../components/app_context.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type { FAttachmentRow } from "../../entities/fattachment.js";
-
-// TODO: Deduplicate with server
-interface ConvertToAttachmentResponse {
-    attachment: FAttachmentRow;
-}
-
-const TPL = /*html*/`
-<div class="dropdown note-actions">
-    <style>
-        .note-actions {
-            width: 35px;
-            height: 35px;
-        }
-
-        .note-actions .dropdown-menu {
-            min-width: 15em;
-        }
-
-        .note-actions .dropdown-item .bx {
-            position: relative;
-            top: 3px;
-            font-size: 120%;
-            margin-right: 5px;
-        }
-
-        .note-actions .dropdown-item[disabled], .note-actions .dropdown-item[disabled]:hover {
-            color: var(--muted-text-color) !important;
-            background-color: transparent !important;
-            pointer-events: none; /* makes it unclickable */
-        }
-
-    </style>
-
-    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
-      class="icon-action bx bx-dots-vertical-rounded"></button>
-
-    <div class="dropdown-menu dropdown-menu-right">
-        <li data-trigger-command="convertNoteIntoAttachment" class="dropdown-item">
-            <span class="bx bx-paperclip"></span> ${t("note_actions.convert_into_attachment")}
-        </li>
-
-        <li data-trigger-command="renderActiveNote" class="dropdown-item render-note-button">
-            <span class="bx bx-extension"></span> ${t("note_actions.re_render_note")}<kbd data-command="renderActiveNote"></kbd>
-        </li>
-
-        <li data-trigger-command="findInText" class="dropdown-item find-in-text-button">
-            <span class='bx bx-search'></span> ${t("note_actions.search_in_note")}<kbd data-command="findInText"></kbd>
-        </li>
-
-        <li data-trigger-command="printActiveNote" class="dropdown-item print-active-note-button">
-            <span class="bx bx-printer"></span> ${t("note_actions.print_note")}<kbd data-command="printActiveNote"></kbd>
-        </li>
-
-        <li data-trigger-command="exportAsPdf" class="dropdown-item export-as-pdf-button">
-            <span class="bx bxs-file-pdf"></span> ${t("note_actions.print_pdf")}<kbd data-command="exportAsPdf"></kbd>
-        </li>
-
-        <div class="dropdown-divider"></div>
-
-
-        <li class="dropdown-item import-files-button"><span class="bx bx-import"></span> ${t("note_actions.import_files")}</li>
-
-        <li class="dropdown-item export-note-button"><span class="bx bx-export"></span> ${t("note_actions.export_note")}</li>
-
-
-        <div class="dropdown-divider"></div>
-
-
-
-        <li data-trigger-command="openNoteExternally" class="dropdown-item open-note-externally-button" title="${t("note_actions.open_note_externally_title")}">
-            <span class="bx bx-file-find"></span> ${t("note_actions.open_note_externally")}<kbd data-command="openNoteExternally"></kbd>
-        </li>
-
-        <li data-trigger-command="openNoteCustom" class="dropdown-item open-note-custom-button">
-            <span class="bx bx-customize"></span> ${t("note_actions.open_note_custom")}<kbd data-command="openNoteCustom"></kbd>
-        </li>
-
-        <li data-trigger-command="showNoteSource" class="dropdown-item show-source-button">
-            <span class="bx bx-code"></span> ${t("note_actions.note_source")}<kbd data-command="showNoteSource"></kbd>
-        </li>
-
-
-        <div class="dropdown-divider"></div>
-
-
-        <li data-trigger-command="forceSaveRevision" class="dropdown-item save-revision-button">
-            <span class="bx bx-save"></span> ${t("note_actions.save_revision")}<kbd data-command="forceSaveRevision"></kbd>
-        </li>
-
-        <li class="dropdown-item delete-note-button"><span class="bx bx-trash destructive-action-icon"></span> ${t("note_actions.delete_note")}</li>
-
-
-        <div class="dropdown-divider"></div>
-
-
-        <li data-trigger-command="showAttachments" class="dropdown-item show-attachments-button">
-            <span class="bx bx-paperclip"></span> ${t("note_actions.note_attachments")}<kbd data-command="showAttachments"></kbd>
-        </li>
-    </div>
-</div>`;
-
-export default class NoteActionsWidget extends NoteContextAwareWidget {
-
-    private $convertNoteIntoAttachmentButton!: JQuery<HTMLElement>;
-    private $findInTextButton!: JQuery<HTMLElement>;
-    private $printActiveNoteButton!: JQuery<HTMLElement>;
-    private $exportAsPdfButton!: JQuery<HTMLElement>;
-    private $showSourceButton!: JQuery<HTMLElement>;
-    private $showAttachmentsButton!: JQuery<HTMLElement>;
-    private $renderNoteButton!: JQuery<HTMLElement>;
-    private $saveRevisionButton!: JQuery<HTMLElement>;
-    private $exportNoteButton!: JQuery<HTMLElement>;
-    private $importNoteButton!: JQuery<HTMLElement>;
-    private $openNoteExternallyButton!: JQuery<HTMLElement>;
-    private $openNoteCustomButton!: JQuery<HTMLElement>;
-    private $deleteNoteButton!: JQuery<HTMLElement>;
-
-    isEnabled() {
-        return this.note?.type !== "launcher";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$widget.on("show.bs.dropdown", () => {
-            if (this.note) {
-                this.refreshVisibility(this.note);
-            }
-        });
-
-        this.$convertNoteIntoAttachmentButton = this.$widget.find("[data-trigger-command='convertNoteIntoAttachment']");
-        this.$findInTextButton = this.$widget.find(".find-in-text-button");
-        this.$printActiveNoteButton = this.$widget.find(".print-active-note-button");
-        this.$exportAsPdfButton = this.$widget.find(".export-as-pdf-button");
-        this.$showSourceButton = this.$widget.find(".show-source-button");
-        this.$showAttachmentsButton = this.$widget.find(".show-attachments-button");
-        this.$renderNoteButton = this.$widget.find(".render-note-button");
-        this.$saveRevisionButton = this.$widget.find(".save-revision-button");
-
-        this.$exportNoteButton = this.$widget.find(".export-note-button");
-        this.$exportNoteButton.on("click", () => {
-            if (this.$exportNoteButton.hasClass("disabled") || !this.noteContext?.notePath) {
-                return;
-            }
-
-            this.triggerCommand("showExportDialog", {
-                notePath: this.noteContext.notePath,
-                defaultType: "single"
-            });
-        });
-
-        this.$importNoteButton = this.$widget.find(".import-files-button");
-        this.$importNoteButton.on("click", () => {
-            if (this.noteId) {
-                this.triggerCommand("showImportDialog", { noteId: this.noteId });
-            }
-        });
-
-        this.$widget.on("click", ".dropdown-item", () => this.$widget.find("[data-bs-toggle='dropdown']").dropdown("toggle"));
-
-        this.$openNoteExternallyButton = this.$widget.find(".open-note-externally-button");
-        this.$openNoteCustomButton = this.$widget.find(".open-note-custom-button");
-
-        this.$deleteNoteButton = this.$widget.find(".delete-note-button");
-        this.$deleteNoteButton.on("click", () => {
-            if (!this.note || this.note.noteId === "root") {
-                return;
-            }
-
-            branchService.deleteNotes([this.note.getParentBranches()[0].branchId], true);
-        });
-    }
-
-    async refreshVisibility(note: FNote) {
-        const isInOptions = note.noteId.startsWith("_options");
-
-        this.$convertNoteIntoAttachmentButton.toggle(note.isEligibleForConversionToAttachment());
-
-        this.toggleDisabled(this.$findInTextButton, ["text", "code", "book", "mindMap", "doc"].includes(note.type));
-
-        this.toggleDisabled(this.$showAttachmentsButton, !isInOptions);
-        this.toggleDisabled(this.$showSourceButton, ["text", "code", "relationMap", "mermaid", "canvas", "mindMap"].includes(note.type));
-
-        const canPrint = ["text", "code"].includes(note.type);
-        this.toggleDisabled(this.$printActiveNoteButton, canPrint);
-        this.toggleDisabled(this.$exportAsPdfButton, canPrint);
-        this.$exportAsPdfButton.toggleClass("hidden-ext", !utils.isElectron());
-
-        this.$renderNoteButton.toggle(note.type === "render");
-
-        this.toggleDisabled(this.$openNoteExternallyButton, utils.isElectron() && !["search", "book"].includes(note.type));
-        this.toggleDisabled(
-            this.$openNoteCustomButton,
-            utils.isElectron() &&
-                !utils.isMac() && // no implementation for Mac yet
-                !["search", "book"].includes(note.type)
-        );
-
-        // I don't want to handle all special notes like this, but intuitively user might want to export content of backend log
-        this.toggleDisabled(this.$exportNoteButton, !["_backendLog"].includes(note.noteId) && !isInOptions);
-
-        this.toggleDisabled(this.$importNoteButton, !["search"].includes(note.type) && !isInOptions);
-        this.toggleDisabled(this.$deleteNoteButton, !isInOptions);
-        this.toggleDisabled(this.$saveRevisionButton, !isInOptions);
-    }
-
-    async convertNoteIntoAttachmentCommand() {
-        if (!this.note || !(await dialogService.confirm(t("note_actions.convert_into_attachment_prompt", { title: this.note.title })))) {
-            return;
-        }
-
-        const { attachment: newAttachment } = await server.post<ConvertToAttachmentResponse>(`notes/${this.noteId}/convert-to-attachment`);
-
-        if (!newAttachment) {
-            toastService.showMessage(t("note_actions.convert_into_attachment_failed", { title: this.note.title }));
-            return;
-        }
-
-        toastService.showMessage(t("note_actions.convert_into_attachment_successful", { title: newAttachment.title }));
-        await ws.waitForMaxKnownEntityChangeId();
-        await appContext.tabManager.getActiveContext()?.setNote(newAttachment.ownerId, {
-            viewScope: {
-                viewMode: "attachments",
-                attachmentId: newAttachment.attachmentId
-            }
-        });
-    }
-
-    toggleDisabled($el: JQuery<HTMLElement>, enable: boolean) {
-        if (enable) {
-            $el.removeAttr("disabled");
-        } else {
-            $el.attr("disabled", "disabled");
-        }
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isNoteReloaded(this.noteId)) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/buttons/revisions_button.ts b/apps/client/src/widgets/buttons/revisions_button.ts
deleted file mode 100644
index 089c6a4c6..000000000
--- a/apps/client/src/widgets/buttons/revisions_button.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { t } from "../../services/i18n.js";
-import CommandButtonWidget from "./command_button.js";
-
-export default class RevisionsButton extends CommandButtonWidget {
-    constructor() {
-        super();
-
-        this.icon("bx-history").title(t("revisions_button.note_revisions")).command("showRevisions").titlePlacement("bottom").class("icon-action");
-    }
-
-    isEnabled() {
-        return super.isEnabled() && !["launcher", "doc"].includes(this.note?.type ?? "");
-    }
-}
diff --git a/apps/client/src/widgets/containers/ribbon_container.ts b/apps/client/src/widgets/containers/ribbon_container.ts
deleted file mode 100644
index 9aee7bb67..000000000
--- a/apps/client/src/widgets/containers/ribbon_container.ts
+++ /dev/null
@@ -1,388 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import keyboardActionsService from "../../services/keyboard_actions.js";
-import attributeService from "../../services/attributes.js";
-import type CommandButtonWidget from "../buttons/command_button.js";
-import type FNote from "../../entities/fnote.js";
-import type { NoteType } from "../../entities/fnote.js";
-import type { EventData, EventNames } from "../../components/app_context.js";
-import type NoteActionsWidget from "../buttons/note_actions.js";
-
-const TPL = /*html*/`
-<div class="ribbon-container">
-    <style>
-    .ribbon-container {
-        margin-bottom: 5px;
-    }
-
-    .ribbon-top-row {
-        display: flex;
-    }
-
-    .ribbon-tab-container {
-        display: flex;
-        flex-direction: row;
-        justify-content: center;
-        margin-left: 10px;
-        flex-grow: 1;
-        flex-flow: row wrap;
-    }
-
-    .ribbon-tab-title {
-        color: var(--muted-text-color);
-        border-bottom: 1px solid var(--main-border-color);
-        min-width: 24px;
-        flex-basis: 24px;
-        max-width: max-content;
-        flex-grow: 10;
-    }
-
-    .ribbon-tab-title .bx {
-        font-size: 150%;
-        position: relative;
-        top: 3px;
-    }
-
-    .ribbon-tab-title.active {
-        color: var(--main-text-color);
-        border-bottom: 3px solid var(--main-text-color);
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
-    .ribbon-tab-title:hover {
-        cursor: pointer;
-    }
-
-    .ribbon-tab-title:hover {
-        color: var(--main-text-color);
-    }
-
-    .ribbon-tab-title:first-of-type {
-        padding-left: 10px;
-    }
-
-    .ribbon-tab-spacer {
-        flex-basis: 0;
-        min-width: 0;
-        max-width: 35px;
-        flex-grow: 1;
-        border-bottom: 1px solid var(--main-border-color);
-    }
-
-    .ribbon-tab-spacer:last-of-type {
-        flex-grow: 1;
-        flex-basis: 0;
-        min-width: 0;
-        max-width: 10000px;
-    }
-
-    .ribbon-button-container {
-        display: flex;
-        border-bottom: 1px solid var(--main-border-color);
-        margin-right: 5px;
-    }
-
-    .ribbon-button-container > * {
-        position: relative;
-        top: -3px;
-        margin-left: 10px;
-    }
-
-    .ribbon-body {
-        display: none;
-        border-bottom: 1px solid var(--main-border-color);
-        margin-left: 10px;
-        margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */
-    }
-
-    .ribbon-body.active {
-        display: block;
-    }
-
-    .ribbon-tab-title-label {
-        display: none;
-    }
-
-    .ribbon-tab-title.active .ribbon-tab-title-label {
-        display: inline;
-    }
-    </style>
-
-    <div class="ribbon-top-row">
-        <div class="ribbon-tab-container"></div>
-        <div class="ribbon-button-container"></div>
-    </div>
-
-    <div class="ribbon-body-container"></div>
-</div>`;
-
-type ButtonWidget = (CommandButtonWidget | NoteActionsWidget);
-
-export default class RibbonContainer extends NoteContextAwareWidget {
-
-    private lastActiveComponentId?: string | null;
-    private lastNoteType?: NoteType;
-
-    private ribbonWidgets: NoteContextAwareWidget[];
-    private buttonWidgets: ButtonWidget[];
-    private $tabContainer!: JQuery<HTMLElement>;
-    private $buttonContainer!: JQuery<HTMLElement>;
-    private $bodyContainer!: JQuery<HTMLElement>;
-
-    constructor() {
-        super();
-
-        this.contentSized();
-        this.ribbonWidgets = [];
-        this.buttonWidgets = [];
-    }
-
-    isEnabled() {
-        return super.isEnabled() && this.noteContext?.viewScope?.viewMode === "default";
-    }
-
-    ribbon(widget: NoteContextAwareWidget) {
-        // TODO: Base class
-        super.child(widget);
-
-        this.ribbonWidgets.push(widget);
-
-        return this;
-    }
-
-    button(widget: ButtonWidget) {
-        super.child(widget);
-
-        this.buttonWidgets.push(widget);
-
-        return this;
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.$tabContainer = this.$widget.find(".ribbon-tab-container");
-        this.$buttonContainer = this.$widget.find(".ribbon-button-container");
-        this.$bodyContainer = this.$widget.find(".ribbon-body-container");
-
-        for (const ribbonWidget of this.ribbonWidgets) {
-            this.$bodyContainer.append($('<div class="ribbon-body">').attr("data-ribbon-component-id", ribbonWidget.componentId).append(ribbonWidget.render()));
-        }
-
-        for (const buttonWidget of this.buttonWidgets) {
-            this.$buttonContainer.append(buttonWidget.render());
-        }
-
-        this.$tabContainer.on("click", ".ribbon-tab-title", (e) => {
-            const $ribbonTitle = $(e.target).closest(".ribbon-tab-title");
-
-            this.toggleRibbonTab($ribbonTitle);
-        });
-    }
-
-    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;
-
-        await super.noteSwitched();
-    }
-
-    async refreshWithNote(note: FNote, noExplicitActivation = false) {
-        this.lastNoteType = note.type;
-
-        let $ribbonTabToActivate, $lastActiveRibbon;
-
-        this.$tabContainer.empty();
-
-        for (const ribbonWidget of this.ribbonWidgets) {
-            // TODO: Base class for ribbon widget
-            const ret = await (ribbonWidget as any).getTitle(note);
-
-            if (!ret.show) {
-                continue;
-            }
-
-            const $ribbonTitle = $('<div class="ribbon-tab-title">')
-                .attr("data-ribbon-component-id", ribbonWidget.componentId)
-                .attr("data-ribbon-component-name", (ribbonWidget as any).name as string) // TODO: base class for ribbon widgets
-                .append(
-                    $('<span class="ribbon-tab-title-icon">')
-                        .addClass(ret.icon)
-                        .attr("title", ret.title)
-                        .attr("data-toggle-command", (ribbonWidget as any).toggleCommand)
-                ) // TODO: base class
-                .append(" ")
-                .append($('<span class="ribbon-tab-title-label">').text(ret.title));
-
-            this.$tabContainer.append($ribbonTitle);
-            this.$tabContainer.append('<div class="ribbon-tab-spacer">');
-
-            if (ret.activate && !this.lastActiveComponentId && !$ribbonTabToActivate && !noExplicitActivation) {
-                $ribbonTabToActivate = $ribbonTitle;
-            }
-
-            if (this.lastActiveComponentId === ribbonWidget.componentId) {
-                $lastActiveRibbon = $ribbonTitle;
-            }
-        }
-
-        keyboardActionsService.getActions().then((actions) => {
-            this.$tabContainer.find(".ribbon-tab-title-icon").tooltip({
-                title: () => {
-                    const toggleCommandName = $(this).attr("data-toggle-command");
-                    const action = actions.find((act) => act.actionName === toggleCommandName);
-                    const title = $(this).attr("data-title");
-
-                    if (action?.effectiveShortcuts && action.effectiveShortcuts.length > 0) {
-                        return `${title} (${action.effectiveShortcuts.join(", ")})`;
-                    } else {
-                        return title ?? "";
-                    }
-                }
-            });
-        });
-
-        if (!$ribbonTabToActivate) {
-            $ribbonTabToActivate = $lastActiveRibbon;
-        }
-
-        if ($ribbonTabToActivate) {
-            this.toggleRibbonTab($ribbonTabToActivate, false);
-        } else {
-            this.$bodyContainer.find(".ribbon-body").removeClass("active");
-        }
-    }
-
-    isRibbonTabActive(name: string) {
-        const $ribbonComponent = this.$widget.find(`.ribbon-tab-title[data-ribbon-component-name='${name}']`);
-
-        return $ribbonComponent.hasClass("active");
-    }
-
-    ensureOwnedAttributesAreOpen(ntxId: string | null | undefined) {
-        if (ntxId && this.isNoteContext(ntxId) && !this.isRibbonTabActive("ownedAttributes")) {
-            this.toggleRibbonTabWithName("ownedAttributes", ntxId);
-        }
-    }
-
-    addNewLabelEvent({ ntxId }: EventData<"addNewLabel">) {
-        this.ensureOwnedAttributesAreOpen(ntxId);
-    }
-
-    addNewRelationEvent({ ntxId }: EventData<"addNewRelation">) {
-        this.ensureOwnedAttributesAreOpen(ntxId);
-    }
-
-    toggleRibbonTabWithName(name: string, ntxId?: string) {
-        if (!this.isNoteContext(ntxId)) {
-            return false;
-        }
-
-        const $ribbonComponent = this.$widget.find(`.ribbon-tab-title[data-ribbon-component-name='${name}']`);
-
-        if ($ribbonComponent) {
-            this.toggleRibbonTab($ribbonComponent);
-        }
-    }
-
-    handleEvent<T extends EventNames>(name: T, data: EventData<T>) {
-        const PREFIX = "toggleRibbonTab";
-
-        if (name.startsWith(PREFIX)) {
-            let componentName = name.substr(PREFIX.length);
-            componentName = componentName[0].toLowerCase() + componentName.substr(1);
-
-            this.toggleRibbonTabWithName(componentName, (data as any).ntxId);
-        } else {
-            return super.handleEvent(name, data);
-        }
-    }
-
-    async handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>) {
-        if (["activeContextChanged", "setNoteContext"].includes(name)) {
-            // won't trigger .refresh();
-            await super.handleEventInChildren("setNoteContext", data as EventData<"activeContextChanged" | "setNoteContext">);
-        } else if (this.isEnabled() || name === "initialRenderComplete") {
-            const activeRibbonWidget = this.getActiveRibbonWidget();
-
-            // forward events only to active ribbon tab, inactive ones don't need to be updated
-            if (activeRibbonWidget) {
-                await activeRibbonWidget.handleEvent(name, data);
-            }
-
-            for (const buttonWidget of this.buttonWidgets) {
-                await buttonWidget.handleEvent(name, data);
-            }
-        }
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (!this.note) {
-            return;
-        }
-
-        if (this.noteId && loadResults.isNoteReloaded(this.noteId) && this.lastNoteType !== this.note.type) {
-            // note type influences the list of available ribbon tabs the most
-            // check for the type is so that we don't update on each title rename
-            this.lastNoteType = this.note.type;
-
-            this.refresh();
-        } else if (loadResults.getAttributeRows(this.componentId).find((attr) => attributeService.isAffecting(attr, this.note))) {
-            this.refreshWithNote(this.note, true);
-        }
-    }
-
-    async noteTypeMimeChangedEvent() {
-        // We are ignoring the event which triggers a refresh since it is usually already done by a different
-        // event and causing a race condition in which the items appear twice.
-    }
-
-    /**
-     * Executed as soon as the user presses the "Edit" floating button in a read-only text note.
-     *
-     * <p>
-     * We need to refresh the ribbon for cases such as the classic editor which relies on the read-only state.
-     */
-    readOnlyTemporarilyDisabledEvent() {
-        this.refresh();
-    }
-
-    getActiveRibbonWidget() {
-        return this.ribbonWidgets.find((ch) => ch.componentId === this.lastActiveComponentId);
-    }
-}
diff --git a/apps/client/src/widgets/dialogs/about.tsx b/apps/client/src/widgets/dialogs/about.tsx
index ceaad50ba..7fa9c2390 100644
--- a/apps/client/src/widgets/dialogs/about.tsx
+++ b/apps/client/src/widgets/dialogs/about.tsx
@@ -1,4 +1,3 @@
-import ReactBasicWidget from "../react/ReactBasicWidget.js";
 import Modal from "../react/Modal.js";
 import { t } from "../../services/i18n.js";
 import { formatDateTime } from "../../utils/formatters.js";
@@ -8,11 +7,11 @@ import openService from "../../services/open.js";
 import { useState } from "preact/hooks";
 import type { CSSProperties } from "preact/compat";
 import type { AppInfo } from "@triliumnext/commons";
-import useTriliumEvent from "../react/hooks.jsx";
+import { useTriliumEvent } from "../react/hooks.jsx";
 
-function AboutDialogComponent() {
-    let [appInfo, setAppInfo] = useState<AppInfo | null>(null);
-    let [shown, setShown] = useState(false);
+export default function AboutDialog() {
+    const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
+    const [shown, setShown] = useState(false);
     const forceWordBreak: CSSProperties = { wordBreak: "break-all" };
 
     useTriliumEvent("openAboutDialog", () => setShown(true));
@@ -82,11 +81,3 @@ function DirectoryLink({ directory, style }: { directory: string, style?: CSSPro
         return <span style={style}>{directory}</span>;
     }
 }
-
-export default class AboutDialog extends ReactBasicWidget {
-
-    get component() {
-        return <AboutDialogComponent />;
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/add_link.tsx b/apps/client/src/widgets/dialogs/add_link.tsx
index 1b6828f9b..97440491d 100644
--- a/apps/client/src/widgets/dialogs/add_link.tsx
+++ b/apps/client/src/widgets/dialogs/add_link.tsx
@@ -1,6 +1,5 @@
 import { t } from "../../services/i18n";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Button from "../react/Button";
 import FormRadioGroup from "../react/FormRadioGroup";
 import NoteAutocomplete from "../react/NoteAutocomplete";
@@ -11,11 +10,11 @@ import { default as TextTypeWidget } from "../type_widgets/editable_text.js";
 import { logError } from "../../services/ws";
 import FormGroup from "../react/FormGroup.js";
 import { refToJQuerySelector } from "../react/react_utils";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
 type LinkType = "reference-link" | "external-link" | "hyper-link";
 
-function AddLinkDialogComponent() {
+export default function AddLinkDialog() {
     const [ textTypeWidget, setTextTypeWidget ] = useState<TextTypeWidget>();
     const initialText = useRef<string>();
     const [ linkTitle, setLinkTitle ] = useState("");
@@ -160,11 +159,3 @@ function AddLinkDialogComponent() {
         </Modal>
     );
 }
-
-export default class AddLinkDialog extends ReactBasicWidget {
-    
-    get component() {
-        return <AddLinkDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/branch_prefix.tsx b/apps/client/src/widgets/dialogs/branch_prefix.tsx
index f73feb125..f04280748 100644
--- a/apps/client/src/widgets/dialogs/branch_prefix.tsx
+++ b/apps/client/src/widgets/dialogs/branch_prefix.tsx
@@ -4,15 +4,14 @@ import { t } from "../../services/i18n.js";
 import server from "../../services/server.js";
 import toast from "../../services/toast.js";
 import Modal from "../react/Modal.jsx";
-import ReactBasicWidget from "../react/ReactBasicWidget.js";
 import froca from "../../services/froca.js";
 import tree from "../../services/tree.js";
 import Button from "../react/Button.jsx";
 import FormGroup from "../react/FormGroup.js";
-import useTriliumEvent from "../react/hooks.jsx";
+import { useTriliumEvent } from "../react/hooks.jsx";
 import FBranch from "../../entities/fbranch.js";
 
-function BranchPrefixDialogComponent() {
+export default function BranchPrefixDialog() {
     const [ shown, setShown ] = useState(false);
     const [ branch, setBranch ] = useState<FBranch>();
     const [ prefix, setPrefix ] = useState(branch?.prefix ?? "");
@@ -75,14 +74,6 @@ function BranchPrefixDialogComponent() {
     );
 }
 
-export default class BranchPrefixDialog extends ReactBasicWidget {
-
-    get component() {
-        return <BranchPrefixDialogComponent />;
-    }
-
-}
-
 async function savePrefix(branchId: string, prefix: string) {
     await server.put(`branches/${branchId}/set-prefix`, { prefix: prefix });
     toast.showMessage(t("branch_prefix.branch_prefix_saved"));
diff --git a/apps/client/src/widgets/dialogs/bulk_actions.tsx b/apps/client/src/widgets/dialogs/bulk_actions.tsx
index 8d184433f..05033255c 100644
--- a/apps/client/src/widgets/dialogs/bulk_actions.tsx
+++ b/apps/client/src/widgets/dialogs/bulk_actions.tsx
@@ -1,7 +1,6 @@
 import { useEffect, useState, useCallback } from "preact/hooks";
 import { t } from "../../services/i18n";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import "./bulk_actions.css";
 import { BulkActionAffectedNotes } from "@triliumnext/commons";
 import server from "../../services/server";
@@ -12,9 +11,9 @@ import toast from "../../services/toast";
 import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
 import FNote from "../../entities/fnote";
 import froca from "../../services/froca";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function BulkActionComponent() {
+export default function BulkActionsDialog() {
     const [ selectedOrActiveNoteIds, setSelectedOrActiveNoteIds ] = useState<string[]>();
     const [ bulkActionNote, setBulkActionNote ] = useState<FNote | null>();
     const [ includeDescendants, setIncludeDescendants ] = useState(false);
@@ -51,7 +50,7 @@ function BulkActionComponent() {
             row.type === "label" && row.name === "action" && row.noteId === "_bulkAction")) {
                 refreshExistingActions();
         }
-    }, shown);
+    });
 
     return (
         <Modal
@@ -117,11 +116,3 @@ function ExistingActionsList({ existingActions }: { existingActions?: RenameNote
         </table>
     );
 }
-
-export default class BulkActionsDialog extends ReactBasicWidget {
-
-    get component() {
-        return <BulkActionComponent />
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/call_to_action.tsx b/apps/client/src/widgets/dialogs/call_to_action.tsx
index d493611e3..1ae4a14eb 100644
--- a/apps/client/src/widgets/dialogs/call_to_action.tsx
+++ b/apps/client/src/widgets/dialogs/call_to_action.tsx
@@ -1,15 +1,11 @@
-import { useState } from "preact/hooks";
+import { useMemo, useState } from "preact/hooks";
 import Button from "../react/Button";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
-import { CallToAction, dismissCallToAction, getCallToActions } from "./call_to_action_definitions";
+import { dismissCallToAction, getCallToActions } from "./call_to_action_definitions";
 import { t } from "../../services/i18n";
 
-function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActions: CallToAction[] }) {
-    if (!activeCallToActions.length) {
-        return <></>;
-    }
-    
+export default function CallToActionDialog() {
+    const activeCallToActions = useMemo(() => getCallToActions(), []);        
     const [ activeIndex, setActiveIndex ] = useState(0);
     const [ shown, setShown ] = useState(true);
     const activeItem = activeCallToActions[activeIndex];
@@ -22,7 +18,7 @@ function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActi
         }
     }
 
-    return (
+    return (activeCallToActions.length &&
         <Modal
             className="call-to-action"
             size="md"
@@ -48,11 +44,3 @@ function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActi
         </Modal>
     )
 }
-
-export class CallToActionDialog extends ReactBasicWidget {
-
-    get component() {
-        return <CallToActionDialogComponent activeCallToActions={getCallToActions()} /> 
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/clone_to.tsx b/apps/client/src/widgets/dialogs/clone_to.tsx
index 173169858..568dec63e 100644
--- a/apps/client/src/widgets/dialogs/clone_to.tsx
+++ b/apps/client/src/widgets/dialogs/clone_to.tsx
@@ -2,7 +2,6 @@ import { useRef, useState } from "preact/hooks";
 import appContext from "../../components/app_context";
 import { t } from "../../services/i18n";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import NoteAutocomplete from "../react/NoteAutocomplete";
 import froca from "../../services/froca";
 import FormGroup from "../react/FormGroup";
@@ -14,9 +13,9 @@ import tree from "../../services/tree";
 import branches from "../../services/branches";
 import toast from "../../services/toast";
 import NoteList from "../react/NoteList";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function CloneToDialogComponent() {
+export default function CloneToDialog() {
     const [ clonedNoteIds, setClonedNoteIds ] = useState<string[]>();
     const [ prefix, setPrefix ] = useState("");
     const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
@@ -83,14 +82,6 @@ function CloneToDialogComponent() {
     )
 }
 
-export default class CloneToDialog extends ReactBasicWidget {
-
-    get component() {
-        return <CloneToDialogComponent />;
-    }
-
-}
-
 async function cloneNotesTo(notePath: string, clonedNoteIds: string[], prefix?: string) {
     const { noteId, parentNoteId } = tree.getNoteIdAndParentIdFromUrl(notePath);
     if (!noteId || !parentNoteId) {
diff --git a/apps/client/src/widgets/dialogs/confirm.tsx b/apps/client/src/widgets/dialogs/confirm.tsx
index a4ab173fd..456f11ad2 100644
--- a/apps/client/src/widgets/dialogs/confirm.tsx
+++ b/apps/client/src/widgets/dialogs/confirm.tsx
@@ -1,10 +1,9 @@
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import Button from "../react/Button";
 import { t } from "../../services/i18n";
 import { useState } from "preact/hooks";
 import FormCheckbox from "../react/FormCheckbox";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
 interface ConfirmDialogProps {
     title?: string;
@@ -13,7 +12,7 @@ interface ConfirmDialogProps {
     isConfirmDeleteNoteBox?: boolean;   
 }
 
-function ConfirmDialogComponent() {
+export default function ConfirmDialog() {
     const [ opts, setOpts ] = useState<ConfirmDialogProps>();
     const [ isDeleteNoteChecked, setIsDeleteNoteChecked ] = useState(false);
     const [ shown, setShown ] = useState(false);
@@ -92,11 +91,3 @@ export interface ConfirmWithTitleOptions {
     title: string;
     callback: ConfirmDialogCallback;
 }
-
-export default class ConfirmDialog extends ReactBasicWidget {
-
-    get component() {
-        return <ConfirmDialogComponent />;
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/delete_notes.tsx b/apps/client/src/widgets/dialogs/delete_notes.tsx
index 54afbb752..b16fafd0a 100644
--- a/apps/client/src/widgets/dialogs/delete_notes.tsx
+++ b/apps/client/src/widgets/dialogs/delete_notes.tsx
@@ -2,7 +2,6 @@ import { useRef, useState, useEffect } from "preact/hooks";
 import { t } from "../../services/i18n.js";
 import FormCheckbox from "../react/FormCheckbox.js";
 import Modal from "../react/Modal.js";
-import ReactBasicWidget from "../react/ReactBasicWidget.js";
 import type { DeleteNotesPreview } from "@triliumnext/commons";
 import server from "../../services/server.js";
 import froca from "../../services/froca.js";
@@ -10,7 +9,7 @@ import FNote from "../../entities/fnote.js";
 import link from "../../services/link.js";
 import Button from "../react/Button.jsx";
 import Alert from "../react/Alert.jsx";
-import useTriliumEvent from "../react/hooks.jsx";
+import { useTriliumEvent } from "../react/hooks.jsx";
 
 export interface ResolveOptions {
     proceed: boolean;
@@ -30,7 +29,7 @@ interface BrokenRelationData {
     source: string;
 }
 
-function DeleteNotesDialogComponent() {
+export default function DeleteNotesDialog() {
     const [ opts, setOpts ] = useState<ShowDeleteNotesDialogOpts>({});
     const [ deleteAllClones, setDeleteAllClones ] = useState(false);
     const [ eraseNotes, setEraseNotes ] = useState(!!opts.forceDeleteAllClones);
@@ -140,7 +139,7 @@ function BrokenRelations({ brokenRelations }: { brokenRelations: DeleteNotesPrev
         const noteIds = brokenRelations
             .map(relation => relation.noteId)
             .filter(noteId => noteId) as string[];
-        froca.getNotes(noteIds).then(async (notes) => {
+        froca.getNotes(noteIds).then(async () => {
             const notesWithBrokenRelations: BrokenRelationData[] = [];
             for (const attr of brokenRelations) {
                 notesWithBrokenRelations.push({
@@ -171,11 +170,3 @@ function BrokenRelations({ brokenRelations }: { brokenRelations: DeleteNotesPrev
         return <></>;
     }
 }
-
-export default class DeleteNotesDialog extends ReactBasicWidget {
-
-    get component() {
-        return <DeleteNotesDialogComponent />;
-    }    
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/export.tsx b/apps/client/src/widgets/dialogs/export.tsx
index 3543e3b35..594104b66 100644
--- a/apps/client/src/widgets/dialogs/export.tsx
+++ b/apps/client/src/widgets/dialogs/export.tsx
@@ -4,14 +4,13 @@ import tree from "../../services/tree";
 import Button from "../react/Button";
 import FormRadioGroup from "../react/FormRadioGroup";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import "./export.css";
 import ws from "../../services/ws";
 import toastService, { ToastOptions } from "../../services/toast";
 import utils from "../../services/utils";
 import open from "../../services/open";
 import froca from "../../services/froca";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
 interface ExportDialogProps {
     branchId?: string | null;
@@ -19,7 +18,7 @@ interface ExportDialogProps {
     defaultType?: "subtree" | "single";
 }
 
-function ExportDialogComponent() {
+export default function ExportDialog() {
     const [ opts, setOpts ] = useState<ExportDialogProps>();
     const [ exportType, setExportType ] = useState<string>(opts?.defaultType ?? "subtree");
     const [ subtreeFormat, setSubtreeFormat ] = useState("html");
@@ -125,14 +124,6 @@ function ExportDialogComponent() {
     );
 }
 
-export default class ExportDialog extends ReactBasicWidget {
-
-    get component() {
-        return <ExportDialogComponent />
-    }    
-
-}
-
 function exportBranch(branchId: string, type: string, format: string, version: string) {
     const taskId = utils.randomString(10);
     const url = open.getUrlForDownload(`api/branches/${branchId}/export/${type}/${format}/${version}/${taskId}`);
diff --git a/apps/client/src/widgets/dialogs/help.tsx b/apps/client/src/widgets/dialogs/help.tsx
index e4b72750d..d5c2f695d 100644
--- a/apps/client/src/widgets/dialogs/help.tsx
+++ b/apps/client/src/widgets/dialogs/help.tsx
@@ -1,4 +1,3 @@
-import ReactBasicWidget from "../react/ReactBasicWidget.js";
 import Modal from "../react/Modal.jsx";
 import { t } from "../../services/i18n.js";
 import { ComponentChildren } from "preact";
@@ -6,9 +5,9 @@ import { CommandNames } from "../../components/app_context.js";
 import RawHtml from "../react/RawHtml.jsx";
 import { useEffect, useState } from "preact/hooks";
 import keyboard_actions from "../../services/keyboard_actions.js";
-import useTriliumEvent from "../react/hooks.jsx";
+import { useTriliumEvent } from "../react/hooks.jsx";
 
-function HelpDialogComponent() {
+export default function HelpDialog() {
     const [ shown, setShown ] = useState(false);
     useTriliumEvent("showCheatsheet", () => setShown(true));
 
@@ -161,11 +160,3 @@ function Card({ title, children }: { title: string, children: ComponentChildren
         </div>
     )
 }
-
-export default class HelpDialog extends ReactBasicWidget {
-    
-    get component() {
-        return <HelpDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/import.tsx b/apps/client/src/widgets/dialogs/import.tsx
index df648b7fb..58f28dd54 100644
--- a/apps/client/src/widgets/dialogs/import.tsx
+++ b/apps/client/src/widgets/dialogs/import.tsx
@@ -7,11 +7,10 @@ import FormFileUpload from "../react/FormFileUpload";
 import FormGroup, { FormMultiGroup } from "../react/FormGroup";
 import Modal from "../react/Modal";
 import RawHtml from "../react/RawHtml";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import importService, { UploadFilesOptions } from "../../services/import";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function ImportDialogComponent() {
+export default function ImportDialog() {
     const [ parentNoteId, setParentNoteId ] = useState<string>();
     const [ noteTitle, setNoteTitle ] = useState<string>();
     const [ files, setFiles ] = useState<FileList | null>(null);
@@ -89,14 +88,6 @@ function ImportDialogComponent() {
     );
 }
 
-export default class ImportDialog extends ReactBasicWidget {
-
-    get component() {
-        return <ImportDialogComponent />
-    }    
-
-}
-
 function boolToString(value: boolean) {
     return value ? "true" : "false";
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/include_note.tsx b/apps/client/src/widgets/dialogs/include_note.tsx
index 234fc7646..757d23829 100644
--- a/apps/client/src/widgets/dialogs/include_note.tsx
+++ b/apps/client/src/widgets/dialogs/include_note.tsx
@@ -4,15 +4,14 @@ import FormGroup from "../react/FormGroup";
 import FormRadioGroup from "../react/FormRadioGroup";
 import Modal from "../react/Modal";
 import NoteAutocomplete from "../react/NoteAutocomplete";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Button from "../react/Button";
 import { Suggestion, triggerRecentNotes } from "../../services/note_autocomplete";
 import tree from "../../services/tree";
 import froca from "../../services/froca";
 import EditableTextTypeWidget from "../type_widgets/editable_text";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function IncludeNoteDialogComponent() {
+export default function IncludeNoteDialog() {
     const [textTypeWidget, setTextTypeWidget] = useState<EditableTextTypeWidget>();
     const [suggestion, setSuggestion] = useState<Suggestion | null>(null);
     const [boxSize, setBoxSize] = useState("medium");
@@ -70,14 +69,6 @@ function IncludeNoteDialogComponent() {
     )
 }
 
-export default class IncludeNoteDialog extends ReactBasicWidget {
-
-    get component() {
-        return <IncludeNoteDialogComponent />;
-    }    
-
-}
-
 async function includeNote(notePath: string, textTypeWidget: EditableTextTypeWidget) {
     const noteId = tree.getNoteIdFromUrl(notePath);
     if (!noteId) {
diff --git a/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx b/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx
index e0165b7d0..438cff1f3 100644
--- a/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx
+++ b/apps/client/src/widgets/dialogs/incorrect_cpu_arch.tsx
@@ -3,11 +3,10 @@ import { t } from "../../services/i18n.js";
 import utils from "../../services/utils.js";
 import Button from "../react/Button.js";
 import Modal from "../react/Modal.js";
-import ReactBasicWidget from "../react/ReactBasicWidget.js";
 import { useState } from "preact/hooks";
-import useTriliumEvent from "../react/hooks.jsx";
+import { useTriliumEvent } from "../react/hooks.jsx";
 
-function IncorrectCpuArchDialogComponent() {
+export default function IncorrectCpuArchDialogComponent() {
     const [ shown, setShown ] = useState(false);
     const downloadButtonRef = useRef<HTMLButtonElement>(null);
     useTriliumEvent("showCpuArchWarning", () => setShown(true));
@@ -44,11 +43,3 @@ function IncorrectCpuArchDialogComponent() {
         </Modal>
     )
 }
-
-export default class IncorrectCpuArchDialog extends ReactBasicWidget {
- 
-    get component() {
-        return <IncorrectCpuArchDialogComponent />
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/info.tsx b/apps/client/src/widgets/dialogs/info.tsx
index 9eaf81b50..334f43ce6 100644
--- a/apps/client/src/widgets/dialogs/info.tsx
+++ b/apps/client/src/widgets/dialogs/info.tsx
@@ -1,13 +1,12 @@
 import { EventData } from "../../components/app_context";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import { useRef, useState } from "preact/hooks";
 import { RawHtmlBlock } from "../react/RawHtml";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function ShowInfoDialogComponent() {
+export default function InfoDialog() {
     const [ opts, setOpts ] = useState<EventData<"showInfoDialog">>();
     const [ shown, setShown ] = useState(false);
     const okButtonRef = useRef<HTMLButtonElement>(null);
@@ -37,11 +36,3 @@ function ShowInfoDialogComponent() {
         <RawHtmlBlock className="info-dialog-content" html={opts?.message ?? ""} />
     </Modal>);
 }
-
-export default class InfoDialog extends ReactBasicWidget {
-
-    get component() {
-        return <ShowInfoDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/jump_to_note.tsx b/apps/client/src/widgets/dialogs/jump_to_note.tsx
index c3185585f..89c438803 100644
--- a/apps/client/src/widgets/dialogs/jump_to_note.tsx
+++ b/apps/client/src/widgets/dialogs/jump_to_note.tsx
@@ -1,4 +1,3 @@
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import Button from "../react/Button";
 import NoteAutocomplete from "../react/NoteAutocomplete";
@@ -8,14 +7,14 @@ import note_autocomplete, { Suggestion } from "../../services/note_autocomplete"
 import appContext from "../../components/app_context";
 import commandRegistry from "../../services/command_registry";
 import { refToJQuerySelector } from "../react/react_utils";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 import shortcutService from "../../services/shortcuts";
 
 const KEEP_LAST_SEARCH_FOR_X_SECONDS = 120;
 
 type Mode = "last-search" | "recent-notes" | "commands";
 
-function JumpToNoteDialogComponent() {
+export default function JumpToNoteDialogComponent() {
     const [ mode, setMode ] = useState<Mode>();
     const [ lastOpenedTs, setLastOpenedTs ] = useState<number>(0);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -27,12 +26,12 @@ function JumpToNoteDialogComponent() {
     
     async function openDialog(commandMode: boolean) {        
         let newMode: Mode;
-        let initialText: string = "";
+        let initialText = "";
 
         if (commandMode) {
             newMode = "commands";
             initialText = ">";            
-        } else if (Date.now() - lastOpenedTs <= KEEP_LAST_SEARCH_FOR_X_SECONDS * 1000 && actualText) {
+        } else if (Date.now() - lastOpenedTs <= KEEP_LAST_SEARCH_FOR_X_SECONDS * 1000 && actualText.current) {
             // if you open the Jump To dialog soon after using it previously, it can often mean that you
             // actually want to search for the same thing (e.g., you opened the wrong note at first try)
             // so we'll keep the content.
@@ -142,11 +141,3 @@ function JumpToNoteDialogComponent() {
         </Modal>
     );
 }
-
-export default class JumpToNoteDialog extends ReactBasicWidget {
-
-    get component() {
-        return <JumpToNoteDialogComponent />;
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/markdown_import.tsx b/apps/client/src/widgets/dialogs/markdown_import.tsx
index 4f91278d9..d14d6fb11 100644
--- a/apps/client/src/widgets/dialogs/markdown_import.tsx
+++ b/apps/client/src/widgets/dialogs/markdown_import.tsx
@@ -5,18 +5,17 @@ import server from "../../services/server";
 import toast from "../../services/toast";
 import utils from "../../services/utils";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Button from "../react/Button";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
 interface RenderMarkdownResponse {
     htmlContent: string;
 }
 
-function MarkdownImportDialogComponent() {
+export default function MarkdownImportDialog() {
     const markdownImportTextArea = useRef<HTMLTextAreaElement>(null);
-    let [ text, setText ] = useState("");
-    let [ shown, setShown ] = useState(false);
+    const [ text, setText ] = useState("");
+    const [ shown, setShown ] = useState(false);
 
     const triggerImport = useCallback(() => {
         if (appContext.tabManager.getActiveContextNoteType() !== "text") {
@@ -64,14 +63,6 @@ function MarkdownImportDialogComponent() {
     )
 }
 
-export default class MarkdownImportDialog extends ReactBasicWidget {
-
-    get component() {
-        return <MarkdownImportDialogComponent />;
-    }
-
-}
-
 async function convertMarkdownToHtml(markdownContent: string) {
     const { htmlContent } = await server.post<RenderMarkdownResponse>("other/render-markdown", { markdownContent });
 
diff --git a/apps/client/src/widgets/dialogs/move_to.tsx b/apps/client/src/widgets/dialogs/move_to.tsx
index c80ffc0d0..985934cdf 100644
--- a/apps/client/src/widgets/dialogs/move_to.tsx
+++ b/apps/client/src/widgets/dialogs/move_to.tsx
@@ -1,4 +1,3 @@
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import { t } from "../../services/i18n";
 import NoteList from "../react/NoteList";
@@ -11,9 +10,9 @@ import tree from "../../services/tree";
 import froca from "../../services/froca";
 import branches from "../../services/branches";
 import toast from "../../services/toast";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function MoveToDialogComponent() {
+export default function MoveToDialog() {
     const [ movedBranchIds, setMovedBranchIds ] = useState<string[]>();
     const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
     const [ shown, setShown ] = useState(false);
@@ -67,14 +66,6 @@ function MoveToDialogComponent() {
     )
 }
 
-export default class MoveToDialog extends ReactBasicWidget {
-
-    get component() {
-        return <MoveToDialogComponent />;
-    }
-
-}
-
 async function moveNotesTo(movedBranchIds: string[] | undefined, parentBranchId: string) {
     if (movedBranchIds) {
         await branches.moveToParentNote(movedBranchIds, parentBranchId);
diff --git a/apps/client/src/widgets/dialogs/note_type_chooser.tsx b/apps/client/src/widgets/dialogs/note_type_chooser.tsx
index 993ffc6ef..bc6e8abc9 100644
--- a/apps/client/src/widgets/dialogs/note_type_chooser.tsx
+++ b/apps/client/src/widgets/dialogs/note_type_chooser.tsx
@@ -1,4 +1,3 @@
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import { t } from "../../services/i18n";
 import FormGroup from "../react/FormGroup";
@@ -10,7 +9,7 @@ import { MenuCommandItem, MenuItem } from "../../menus/context_menu";
 import { TreeCommandNames } from "../../menus/tree_context_menu";
 import { Suggestion } from "../../services/note_autocomplete";
 import Badge from "../react/Badge";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
 export interface ChooseNoteTypeResponse {
     success: boolean;
@@ -26,7 +25,7 @@ const SEPARATOR_TITLE_REPLACEMENTS = [
     t("note_type_chooser.templates")
 ];
 
-function NoteTypeChooserDialogComponent() {
+export default function NoteTypeChooserDialogComponent() {
     const [ callback, setCallback ] = useState<ChooseNoteTypeCallback>();
     const [ shown, setShown ] = useState(false);
     const [ parentNote, setParentNote ] = useState<Suggestion | null>(); 
@@ -37,25 +36,23 @@ function NoteTypeChooserDialogComponent() {
         setShown(true);
     });
 
-    if (!noteTypes.length) {
-        useEffect(() => {
-            note_types.getNoteTypeItems().then(noteTypes => {
-                let index = -1;
+    useEffect(() => {
+        note_types.getNoteTypeItems().then(noteTypes => {
+            let index = -1;
 
-                setNoteTypes((noteTypes ?? []).map((item, _index) => {
-                    if (item.title === "----") {
-                        index++;
-                        return {
-                            title: SEPARATOR_TITLE_REPLACEMENTS[index],
-                            enabled: false
-                        }
+            setNoteTypes((noteTypes ?? []).map((item) => {
+                if (item.title === "----") {
+                    index++;
+                    return {
+                        title: SEPARATOR_TITLE_REPLACEMENTS[index],
+                        enabled: false
                     }
+                }
 
-                    return item;
-                }));
-            });
+                return item;
+            }));
         });
-    }
+    }, []);
 
     function onNoteTypeSelected(value: string) {
         const [ noteType, templateNoteId ] = value.split(",");
@@ -120,11 +117,3 @@ function NoteTypeChooserDialogComponent() {
         </Modal>
     );
 }
-
-export default class NoteTypeChooserDialog extends ReactBasicWidget {
-
-    get component() {
-        return <NoteTypeChooserDialogComponent />
-    }    
-
-}
diff --git a/apps/client/src/widgets/dialogs/password_not_set.tsx b/apps/client/src/widgets/dialogs/password_not_set.tsx
index 79aaa4fc8..5d0b92e5c 100644
--- a/apps/client/src/widgets/dialogs/password_not_set.tsx
+++ b/apps/client/src/widgets/dialogs/password_not_set.tsx
@@ -1,12 +1,11 @@
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import Modal from "../react/Modal";
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import appContext from "../../components/app_context";
 import { useState } from "preact/hooks";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function PasswordNotSetDialogComponent() {
+export default function PasswordNotSetDialog() {
     const [ shown, setShown ] = useState(false);
     useTriliumEvent("showPasswordNotSet", () => setShown(true));
 
@@ -27,10 +26,3 @@ function PasswordNotSetDialogComponent() {
     );
 }
 
-export default class PasswordNotSetDialog extends ReactBasicWidget {
-
-    get component() {
-        return <PasswordNotSetDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/prompt.tsx b/apps/client/src/widgets/dialogs/prompt.tsx
index 8af41ef44..c1ddf94aa 100644
--- a/apps/client/src/widgets/dialogs/prompt.tsx
+++ b/apps/client/src/widgets/dialogs/prompt.tsx
@@ -2,12 +2,10 @@ import { useRef, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import Modal from "../react/Modal";
-import { Modal as BootstrapModal } from "bootstrap";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import FormTextBox from "../react/FormTextBox";
 import FormGroup from "../react/FormGroup";
 import { refToJQuerySelector } from "../react/react_utils";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
 // JQuery here is maintained for compatibility with existing code.
 interface ShownCallbackData {
@@ -28,7 +26,7 @@ export interface PromptDialogOptions {
     readOnly?: boolean;
 }
 
-function PromptDialogComponent() {    
+export default function PromptDialog() {    
     const modalRef = useRef<HTMLDivElement>(null);
     const formRef = useRef<HTMLFormElement>(null);
     const labelRef = useRef<HTMLLabelElement>(null);
@@ -84,11 +82,3 @@ function PromptDialogComponent() {
         </Modal>
     );
 }
-
-export default class PromptDialog extends ReactBasicWidget {
-
-    get component() {
-        return <PromptDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/dialogs/protected_session_password.tsx b/apps/client/src/widgets/dialogs/protected_session_password.tsx
index 137b0b0d4..1584a1ae1 100644
--- a/apps/client/src/widgets/dialogs/protected_session_password.tsx
+++ b/apps/client/src/widgets/dialogs/protected_session_password.tsx
@@ -3,11 +3,10 @@ import { t } from "../../services/i18n";
 import Button from "../react/Button";
 import FormTextBox from "../react/FormTextBox";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import protected_session from "../../services/protected_session";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function ProtectedSessionPasswordDialogComponent() {
+export default function ProtectedSessionPasswordDialog() {
     const [ shown, setShown ] = useState(false);
     const [ password, setPassword ] = useState("");
     const inputRef = useRef<HTMLInputElement>(null);
@@ -38,11 +37,3 @@ function ProtectedSessionPasswordDialogComponent() {
         </Modal>
     )
 }
-
-export default class ProtectedSessionPasswordDialog extends ReactBasicWidget {
-
-    get component() {
-        return <ProtectedSessionPasswordDialogComponent />;
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/recent_changes.tsx b/apps/client/src/widgets/dialogs/recent_changes.tsx
index 264d2f15d..295650e54 100644
--- a/apps/client/src/widgets/dialogs/recent_changes.tsx
+++ b/apps/client/src/widgets/dialogs/recent_changes.tsx
@@ -6,7 +6,6 @@ import server from "../../services/server";
 import toast from "../../services/toast";
 import Button from "../react/Button";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import hoisted_note from "../../services/hoisted_note";
 import type { RecentChangeRow } from "@triliumnext/commons";
 import froca from "../../services/froca";
@@ -14,39 +13,32 @@ import { formatDateTime } from "../../utils/formatters";
 import link from "../../services/link";
 import RawHtml from "../react/RawHtml";
 import ws from "../../services/ws";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function RecentChangesDialogComponent() {
+export default function RecentChangesDialog() {
     const [ ancestorNoteId, setAncestorNoteId ] = useState<string>();
-    const [ groupedByDate, setGroupedByDate ] = useState<Map<String, RecentChangeRow[]>>();
-    const [ needsRefresh, setNeedsRefresh ] = useState(false);
+    const [ groupedByDate, setGroupedByDate ] = useState<Map<string, RecentChangeRow[]>>();
+    const [ refreshCounter, setRefreshCounter ] = useState(0);
     const [ shown, setShown ] = useState(false);
 
-    useTriliumEvent("showRecentChanges", ({ ancestorNoteId }) => {
-        setNeedsRefresh(true);
+    useTriliumEvent("showRecentChanges", ({ ancestorNoteId }) => {        
         setAncestorNoteId(ancestorNoteId ?? hoisted_note.getHoistedNoteId());
         setShown(true);
     });
 
-    if (!groupedByDate || needsRefresh) {
-        useEffect(() => {
-            if (needsRefresh) {
-                setNeedsRefresh(false);   
-            }
+    useEffect(() => {
+        server.get<RecentChangeRow[]>(`recent-changes/${ancestorNoteId}`)
+            .then(async (recentChanges) => {
+                // preload all notes into cache
+                await froca.getNotes(
+                    recentChanges.map((r) => r.noteId),
+                    true
+                );
 
-            server.get<RecentChangeRow[]>(`recent-changes/${ancestorNoteId}`)
-                .then(async (recentChanges) => {
-                    // preload all notes into cache
-                    await froca.getNotes(
-                        recentChanges.map((r) => r.noteId),
-                        true
-                    );
-
-                    const groupedByDate = groupByDate(recentChanges);
-                    setGroupedByDate(groupedByDate);
-                });
-        })
-    }
+                const groupedByDate = groupByDate(recentChanges);
+                setGroupedByDate(groupedByDate);
+            });
+    }, [ shown, refreshCounter ])
 
     return (
         <Modal
@@ -61,7 +53,7 @@ function RecentChangesDialogComponent() {
                     style={{ padding: "0 10px" }}
                     onClick={() => {
                         server.post("notes/erase-deleted-notes-now").then(() => {
-                            setNeedsRefresh(true);
+                            setRefreshCounter(refreshCounter + 1);
                             toast.showMessage(t("recent_changes.deleted_notes_message"));
                         });
                     }}
@@ -79,7 +71,7 @@ function RecentChangesDialogComponent() {
     )
 }
 
-function RecentChangesTimeline({ groupedByDate, setShown }: { groupedByDate: Map<String, RecentChangeRow[]>, setShown: Dispatch<StateUpdater<boolean>> }) {
+function RecentChangesTimeline({ groupedByDate, setShown }: { groupedByDate: Map<string, RecentChangeRow[]>, setShown: Dispatch<StateUpdater<boolean>> }) {
     return (
         <>
             { Array.from(groupedByDate.entries()).map(([dateDay, dayChanges]) => {
@@ -114,10 +106,6 @@ function RecentChangesTimeline({ groupedByDate, setShown }: { groupedByDate: Map
 }
 
 function NoteLink({ notePath, title }: { notePath: string, title: string }) {
-    if (!notePath || !title) {
-        return null;
-    }
-
     const [ noteLink, setNoteLink ] = useState<JQuery<HTMLElement> | null>(null);
     useEffect(() => {
         link.createLink(notePath, {
@@ -156,25 +144,19 @@ function DeletedNoteLink({ change, setShown }: { change: RecentChangeRow, setSho
     );
 }
 
-export default class RecentChangesDialog extends ReactBasicWidget {
-
-    get component() {
-        return <RecentChangesDialogComponent />
-    }
-
-}
-
 function groupByDate(rows: RecentChangeRow[]) {
-    const groupedByDate = new Map<String, RecentChangeRow[]>();
+    const groupedByDate = new Map<string, RecentChangeRow[]>();
 
     for (const row of rows) {
         const dateDay = row.date.substr(0, 10);
 
-        if (!groupedByDate.has(dateDay)) {
-            groupedByDate.set(dateDay, []);
+        let dateDayArray = groupedByDate.get(dateDay);
+        if (!dateDayArray) {
+            dateDayArray = [];
+            groupedByDate.set(dateDay, dateDayArray);
         }
 
-        groupedByDate.get(dateDay)!.push(row);
+        dateDayArray.push(row);
     }
 
     return groupedByDate;
diff --git a/apps/client/src/widgets/dialogs/revisions.tsx b/apps/client/src/widgets/dialogs/revisions.tsx
index 4d6377bba..0fa4f956e 100644
--- a/apps/client/src/widgets/dialogs/revisions.tsx
+++ b/apps/client/src/widgets/dialogs/revisions.tsx
@@ -8,7 +8,6 @@ import server from "../../services/server";
 import toast from "../../services/toast";
 import Button from "../react/Button";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import FormList, { FormListItem } from "../react/FormList";
 import utils from "../../services/utils";
 import { Dispatch, StateUpdater, useEffect, useRef, useState } from "preact/hooks";
@@ -18,9 +17,9 @@ import type { CSSProperties } from "preact/compat";
 import open from "../../services/open";
 import ActionButton from "../react/ActionButton";
 import options from "../../services/options";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function RevisionsDialogComponent() {
+export default function RevisionsDialog() {
     const [ note, setNote ] = useState<FNote>();
     const [ revisions, setRevisions ] = useState<RevisionItem[]>();
     const [ currentRevision, setCurrentRevision ] = useState<RevisionItem>();
@@ -72,6 +71,8 @@ function RevisionsDialogComponent() {
             onHidden={() => {
                 setShown(false);
                 setNote(undefined);
+                setCurrentRevision(undefined);
+                setRevisions(undefined);
             }}
             show={shown}
             >
@@ -202,17 +203,9 @@ function RevisionContent({ revisionItem, fullRevision }: { revisionItem?: Revisi
         return <></>;
     }
 
-
     switch (revisionItem.type) {
-        case "text": {
-            const contentRef = useRef<HTMLDivElement>(null);
-            useEffect(() => {
-                if (contentRef.current?.querySelector("span.math-tex")) {
-                    renderMathInElement(contentRef.current, { trust: true });
-                }
-            });
-            return <div ref={contentRef} className="ck-content" dangerouslySetInnerHTML={{ __html: content as string }}></div>
-        }
+        case "text":
+            return <RevisionContentText content={content} />
         case "code":
             return <pre style={CODE_STYLE}>{content}</pre>;
         case "image":            
@@ -264,6 +257,16 @@ function RevisionContent({ revisionItem, fullRevision }: { revisionItem?: Revisi
     }
 }
 
+function RevisionContentText({ content }: { content: string | Buffer<ArrayBufferLike> | undefined }) {
+    const contentRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+        if (contentRef.current?.querySelector("span.math-tex")) {
+            renderMathInElement(contentRef.current, { trust: true });
+        }
+    }, [content]);
+    return <div ref={contentRef} className="ck-content" dangerouslySetInnerHTML={{ __html: content as string }}></div>
+}
+
 function RevisionFooter({ note }: { note?: FNote }) {
     if (!note) {
         return <></>;
@@ -291,14 +294,6 @@ function RevisionFooter({ note }: { note?: FNote }) {
     </>;
 }
 
-export default class RevisionsDialog extends ReactBasicWidget  {
-
-    get component() {
-        return <RevisionsDialogComponent />
-    }
-
-}
-
 async function getNote(noteId?: string | null) {
     if (noteId) {
         return await froca.getNote(noteId);
diff --git a/apps/client/src/widgets/dialogs/sort_child_notes.tsx b/apps/client/src/widgets/dialogs/sort_child_notes.tsx
index d73b84cae..10b69806c 100644
--- a/apps/client/src/widgets/dialogs/sort_child_notes.tsx
+++ b/apps/client/src/widgets/dialogs/sort_child_notes.tsx
@@ -5,12 +5,11 @@ import FormCheckbox from "../react/FormCheckbox";
 import FormRadioGroup from "../react/FormRadioGroup";
 import FormTextBox from "../react/FormTextBox";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import server from "../../services/server";
 import FormGroup from "../react/FormGroup";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function SortChildNotesDialogComponent() {
+export default function SortChildNotesDialog() {
     const [ parentNoteId, setParentNoteId ] = useState<string>();
     const [ sortBy, setSortBy ] = useState("title");
     const [ sortDirection, setSortDirection ] = useState("asc");
@@ -89,11 +88,3 @@ function SortChildNotesDialogComponent() {
         </Modal>
     )
 }
-
-export default class SortChildNotesDialog extends ReactBasicWidget {
-
-    get component() {
-        return <SortChildNotesDialogComponent />;
-    }
-
-}
\ No newline at end of file
diff --git a/apps/client/src/widgets/dialogs/upload_attachments.tsx b/apps/client/src/widgets/dialogs/upload_attachments.tsx
index 8f53dd0fe..2a780e616 100644
--- a/apps/client/src/widgets/dialogs/upload_attachments.tsx
+++ b/apps/client/src/widgets/dialogs/upload_attachments.tsx
@@ -5,13 +5,12 @@ import FormCheckbox from "../react/FormCheckbox";
 import FormFileUpload from "../react/FormFileUpload";
 import FormGroup from "../react/FormGroup";
 import Modal from "../react/Modal";
-import ReactBasicWidget from "../react/ReactBasicWidget";
 import options from "../../services/options";
 import importService from "../../services/import.js";
 import tree from "../../services/tree";
-import useTriliumEvent from "../react/hooks";
+import { useTriliumEvent } from "../react/hooks";
 
-function UploadAttachmentsDialogComponent() {
+export default function UploadAttachmentsDialog() {
     const [ parentNoteId, setParentNoteId ] = useState<string>();
     const [ files, setFiles ] = useState<FileList | null>(null);
     const [ shrinkImages, setShrinkImages ] = useState(options.is("compressImages"));
@@ -24,12 +23,12 @@ function UploadAttachmentsDialogComponent() {
         setShown(true);
     });
 
-    if (parentNoteId) {
-        useEffect(() => {
-            tree.getNoteTitle(parentNoteId).then((noteTitle) =>
-                setDescription(t("upload_attachments.files_will_be_uploaded", { noteTitle })));
-        }, [parentNoteId]);
-    }
+    useEffect(() => {
+        if (!parentNoteId) return;
+
+        tree.getNoteTitle(parentNoteId).then((noteTitle) =>
+            setDescription(t("upload_attachments.files_will_be_uploaded", { noteTitle })));
+    }, [parentNoteId]);
 
     return (
         <Modal
@@ -64,11 +63,3 @@ function UploadAttachmentsDialogComponent() {
         </Modal>
     );
 }
-
-export default class UploadAttachmentsDialog extends ReactBasicWidget {
-
-    get component() {
-        return <UploadAttachmentsDialogComponent />;
-    }
-
-}
diff --git a/apps/client/src/widgets/editability_select.ts b/apps/client/src/widgets/editability_select.ts
deleted file mode 100644
index e7127ca8a..000000000
--- a/apps/client/src/widgets/editability_select.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import attributeService from "../services/attributes.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import { t } from "../services/i18n.js";
-import type FNote from "../entities/fnote.js";
-import type { EventData } from "../components/app_context.js";
-import { Dropdown } from "bootstrap";
-
-type Editability = "auto" | "readOnly" | "autoReadOnlyDisabled";
-
-const TPL = /*html*/`
-<div class="dropdown editability-select-widget">
-    <style>
-    .editability-dropdown {
-        width: 300px;
-    }
-
-    .editability-dropdown .dropdown-item {
-        display: flex !importamt;
-    }
-
-    .editability-dropdown .dropdown-item > div {
-        margin-left: 10px;
-    }
-
-    .editability-dropdown .description {
-        font-size: small;
-        color: var(--muted-text-color);
-        white-space: normal;
-    }
-    </style>
-    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm select-button dropdown-toggle editability-button">
-        <span class="editability-active-desc">${t("editability_select.auto")}</span>
-        <span class="caret"></span>
-    </button>
-    <div class="editability-dropdown dropdown-menu dropdown-menu-right tn-dropdown-list">
-        <a class="dropdown-item" href="#" data-editability="auto">
-            <span class="check">&check;</span>
-            <div>
-                ${t("editability_select.auto")}
-                <div class="description">${t("editability_select.note_is_editable")}</div>
-            </div>
-        </a>
-        <a class="dropdown-item" href="#" data-editability="readOnly">
-            <span class="check">&check;</span>
-            <div>
-                ${t("editability_select.read_only")}
-                <div class="description">${t("editability_select.note_is_read_only")}</div>
-            </div>
-        </a>
-        <a class="dropdown-item" href="#" data-editability="autoReadOnlyDisabled">
-            <span class="check">&check;</span>
-            <div>
-                ${t("editability_select.always_editable")}
-                <div class="description">${t("editability_select.note_is_always_editable")}</div>
-            </div>
-        </a>
-    </div>
-</div>
-`;
-
-export default class EditabilitySelectWidget extends NoteContextAwareWidget {
-
-    private dropdown!: Dropdown;
-    private $editabilityActiveDesc!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]);
-
-        this.$editabilityActiveDesc = this.$widget.find(".editability-active-desc");
-
-        this.$widget.on("click", ".dropdown-item", async (e) => {
-            this.dropdown.toggle();
-
-            const editability = $(e.target).closest("[data-editability]").attr("data-editability");
-
-            if (!this.note || !this.noteId) {
-                return;
-            }
-
-            for (const ownedAttr of this.note.getOwnedLabels()) {
-                if (["readOnly", "autoReadOnlyDisabled"].includes(ownedAttr.name)) {
-                    await attributeService.removeAttributeById(this.noteId, ownedAttr.attributeId);
-                }
-            }
-
-            if (editability && editability !== "auto") {
-                await attributeService.addLabel(this.noteId, editability);
-            }
-        });
-    }
-
-    async refreshWithNote(note: FNote) {
-        let editability: Editability = "auto";
-
-        if (this.note?.isLabelTruthy("readOnly")) {
-            editability = "readOnly";
-        } else if (this.note?.isLabelTruthy("autoReadOnlyDisabled")) {
-            editability = "autoReadOnlyDisabled";
-        }
-
-        const labels = {
-            auto: t("editability_select.auto"),
-            readOnly: t("editability_select.read_only"),
-            autoReadOnlyDisabled: t("editability_select.always_editable")
-        };
-
-        this.$widget.find(".dropdown-item").removeClass("selected");
-        this.$widget.find(`.dropdown-item[data-editability='${editability}']`).addClass("selected");
-
-        this.$editabilityActiveDesc.text(labels[editability]);
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows().find((attr) => attr.noteId === this.noteId)) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/icon_list.ts b/apps/client/src/widgets/icon_list.ts
index 7de49017b..6282d8b60 100644
--- a/apps/client/src/widgets/icon_list.ts
+++ b/apps/client/src/widgets/icon_list.ts
@@ -1,6 +1,6 @@
 // taken from the HTML source of https://boxicons.com/
 
-interface Category {
+export interface Category {
     name: string;
     id: number;
 }
diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
new file mode 100644
index 000000000..67eeadecf
--- /dev/null
+++ b/apps/client/src/widgets/note_icon.css
@@ -0,0 +1,59 @@
+.note-icon-widget {
+    padding-top: 3px;
+    padding-left: 7px;
+    margin-right: 0;
+    width: 50px;
+    height: 50px;
+}
+
+.note-icon-widget button.note-icon {
+    font-size: 180%;
+    background-color: transparent;
+    border: 1px solid transparent;
+    cursor: pointer;
+    padding: 6px;
+    color: var(--main-text-color);
+}
+
+.note-icon-widget button.note-icon:hover {
+    border: 1px solid var(--main-border-color);
+}
+
+.note-icon-widget .dropdown-menu {
+    border-radius: 10px;
+    border-width: 2px;
+    box-shadow: 10px 10px 93px -25px black;
+    padding: 10px 15px 10px 15px !important;
+}
+
+.note-icon-widget .filter-row {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-right: 20px;
+    display: flex;
+    align-items: baseline;
+}
+
+.note-icon-widget .filter-row span {
+    display: block;
+    padding-left: 15px;
+    padding-right: 15px;
+    font-weight: bold;
+}
+
+.note-icon-widget .icon-list {
+    height: 500px;
+    overflow: auto;
+}
+
+.note-icon-widget .icon-list span {
+    display: inline-block;
+    padding: 10px;
+    cursor: pointer;
+    border: 1px solid transparent;
+    font-size: 180%;
+}
+
+.note-icon-widget .icon-list span:hover {
+    border: 1px solid var(--main-border-color);
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/note_icon.ts b/apps/client/src/widgets/note_icon.ts
deleted file mode 100644
index b5623db87..000000000
--- a/apps/client/src/widgets/note_icon.ts
+++ /dev/null
@@ -1,229 +0,0 @@
-import { t } from "../services/i18n.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import attributeService from "../services/attributes.js";
-import server from "../services/server.js";
-import type FNote from "../entities/fnote.js";
-import type { EventData } from "../components/app_context.js";
-import type { Icon } from "./icon_list.js";
-import { Dropdown } from "bootstrap";
-
-const TPL = /*html*/`
-<div class="note-icon-widget dropdown">
-    <style>
-    .note-icon-widget {
-        padding-top: 3px;
-        padding-left: 7px;
-        margin-right: 0;
-        width: 50px;
-        height: 50px;
-    }
-
-    .note-icon-widget button.note-icon {
-        font-size: 180%;
-        background-color: transparent;
-        border: 1px solid transparent;
-        cursor: pointer;
-        padding: 6px;
-        color: var(--main-text-color);
-    }
-
-    .note-icon-widget button.note-icon:hover {
-        border: 1px solid var(--main-border-color);
-    }
-
-    .note-icon-widget .dropdown-menu {
-        border-radius: 10px;
-        border-width: 2px;
-        box-shadow: 10px 10px 93px -25px black;
-        padding: 10px 15px 10px 15px !important;
-    }
-
-    .note-icon-widget .filter-row {
-        padding-top: 10px;
-        padding-bottom: 10px;
-        padding-right: 20px;
-        display: flex;
-        align-items: baseline;
-    }
-
-    .note-icon-widget .filter-row span {
-        display: block;
-        padding-left: 15px;
-        padding-right: 15px;
-        font-weight: bold;
-    }
-
-    .note-icon-widget .icon-list {
-        height: 500px;
-        overflow: auto;
-    }
-
-    .note-icon-widget .icon-list span {
-        display: inline-block;
-        padding: 10px;
-        cursor: pointer;
-        border: 1px solid transparent;
-        font-size: 180%;
-    }
-
-    .note-icon-widget .icon-list span:hover {
-        border: 1px solid var(--main-border-color);
-    }
-    </style>
-
-    <button class="btn dropdown-toggle note-icon" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="${t("note_icon.change_note_icon")}"></button>
-    <div class="dropdown-menu" aria-labelledby="note-path-list-button" style="width: 610px;">
-        <div class="filter-row">
-            <span>${t("note_icon.category")}</span> <select name="icon-category" class="form-select"></select>
-
-            <span>${t("note_icon.search")}</span> <input type="text" name="icon-search" class="form-control" />
-        </div>
-
-        <div class="icon-list"></div>
-    </div>
-</div>`;
-
-interface IconToCountCache {
-    iconClassToCountMap: Record<string, number>;
-}
-
-export default class NoteIconWidget extends NoteContextAwareWidget {
-
-    private dropdown!: bootstrap.Dropdown;
-    private $icon!: JQuery<HTMLElement>;
-    private $iconList!: JQuery<HTMLElement>;
-    private $iconCategory!: JQuery<HTMLElement>;
-    private $iconSearch!: JQuery<HTMLElement>;
-    private iconToCountCache!: Promise<IconToCountCache | null> | null;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]);
-
-        this.$icon = this.$widget.find("button.note-icon");
-        this.$iconList = this.$widget.find(".icon-list");
-        this.$iconList.on("click", "span", async (e) => {
-            const clazz = $(e.target).attr("class");
-
-            if (this.noteId && this.note) {
-                await attributeService.setLabel(this.noteId, this.note.hasOwnedLabel("workspace") ? "workspaceIconClass" : "iconClass", clazz);
-            }
-        });
-
-        this.$iconCategory = this.$widget.find("select[name='icon-category']");
-        this.$iconCategory.on("change", () => this.renderDropdown());
-        this.$iconCategory.on("click", (e) => e.stopPropagation());
-
-        this.$iconSearch = this.$widget.find("input[name='icon-search']");
-        this.$iconSearch.on("input", () => this.renderDropdown());
-
-        this.$widget.on("show.bs.dropdown", async () => {
-            const { categories } = (await import("./icon_list.js")).default;
-
-            this.$iconCategory.empty();
-
-            for (const category of categories) {
-                this.$iconCategory.append($("<option>").text(category.name).attr("value", category.id));
-            }
-
-            this.$iconSearch.val("");
-
-            this.renderDropdown();
-        });
-    }
-
-    async refreshWithNote(note: FNote) {
-        this.$icon.removeClass().addClass(`${note.getIcon()} note-icon`);
-        this.$icon.prop("disabled", !!(this.noteContext?.viewScope?.viewMode !== "default"));
-        this.dropdown.hide();
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (this.noteId && loadResults.isNoteReloaded(this.noteId)) {
-            this.refresh();
-            return;
-        }
-
-        for (const attr of loadResults.getAttributeRows()) {
-            if (attr.type === "label" && ["iconClass", "workspaceIconClass"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.note)) {
-                this.refresh();
-                break;
-            }
-        }
-    }
-
-    async renderDropdown() {
-        const iconToCount = await this.getIconToCountMap();
-        const { icons } = (await import("./icon_list.js")).default;
-
-        this.$iconList.empty();
-
-        if (this.getIconLabels().length > 0) {
-            this.$iconList.append(
-                $(`<div style="text-align: center">`).append(
-                    $(`<button class="btn btn-sm">${t("note_icon.reset-default")}</button>`).on("click", () =>
-                        this.getIconLabels().forEach((label) => {
-                            if (this.noteId) {
-                                attributeService.removeAttributeById(this.noteId, label.attributeId);
-                            }
-                        })
-                    )
-                )
-            );
-        }
-
-        const categoryId = parseInt(String(this.$iconCategory.find("option:selected")?.val()));
-        const search = String(this.$iconSearch.val())?.trim()?.toLowerCase();
-
-        const filteredIcons = icons.filter((icon) => {
-            if (categoryId && icon.category_id !== categoryId) {
-                return false;
-            }
-
-            if (search) {
-                if (!icon.name.includes(search) && !icon.term?.find((t) => t.includes(search))) {
-                    return false;
-                }
-            }
-
-            return true;
-        });
-
-        if (iconToCount) {
-            filteredIcons.sort((a, b) => {
-                const countA = iconToCount[a.className ?? ""] || 0;
-                const countB = iconToCount[b.className ?? ""] || 0;
-
-                return countB - countA;
-            });
-        }
-
-        for (const icon of filteredIcons) {
-            this.$iconList.append(this.renderIcon(icon));
-        }
-
-        this.$iconSearch.focus();
-    }
-
-    async getIconToCountMap() {
-        if (!this.iconToCountCache) {
-            this.iconToCountCache = server.get<IconToCountCache>("other/icon-usage");
-            setTimeout(() => (this.iconToCountCache = null), 20000); // invalidate cache after 20 seconds
-        }
-
-        return (await this.iconToCountCache)?.iconClassToCountMap;
-    }
-
-    renderIcon(icon: Icon) {
-        return $("<span>")
-            .addClass("bx " + icon.className)
-            .attr("title", icon.name);
-    }
-
-    getIconLabels() {
-        if (!this.note) {
-            return [];
-        }
-        return this.note.getOwnedLabels().filter((label) => ["workspaceIconClass", "iconClass"].includes(label.name));
-    }
-}
diff --git a/apps/client/src/widgets/note_icon.tsx b/apps/client/src/widgets/note_icon.tsx
new file mode 100644
index 000000000..d991bc0e9
--- /dev/null
+++ b/apps/client/src/widgets/note_icon.tsx
@@ -0,0 +1,184 @@
+import Dropdown from "./react/Dropdown";
+import "./note_icon.css";
+import { t } from "i18next";
+import { useNoteContext, useNoteLabel } from "./react/hooks";
+import { useEffect, useRef, useState } from "preact/hooks";
+import server from "../services/server";
+import type { Category, Icon } from "./icon_list";
+import FormTextBox from "./react/FormTextBox";
+import FormSelect from "./react/FormSelect";
+import FNote from "../entities/fnote";
+import attributes from "../services/attributes";
+import Button from "./react/Button";
+
+interface IconToCountCache {
+    iconClassToCountMap: Record<string, number>;
+}
+
+interface IconData {
+    iconToCount: Record<string, number>;
+    categories: Category[];
+    icons: Icon[];
+}
+
+let fullIconData: {
+    categories: Category[];
+    icons: Icon[];
+};
+let iconToCountCache!: Promise<IconToCountCache> | null;
+
+export default function NoteIcon() {
+    const { note, viewScope } = useNoteContext();
+    const [ icon, setIcon ] = useState<string | null | undefined>();
+    const [ iconClass ] = useNoteLabel(note, "iconClass");
+    const [ workspaceIconClass ] = useNoteLabel(note, "workspaceIconClass");
+
+    useEffect(() => {
+        setIcon(note?.getIcon());
+    }, [ note, iconClass, workspaceIconClass ]);
+
+    return (
+        <Dropdown
+            className="note-icon-widget"
+            title={t("note_icon.change_note_icon")}
+            dropdownContainerStyle={{ width: "610px" }}
+            buttonClassName={`note-icon ${icon ?? "bx bx-empty"}`}
+            hideToggleArrow
+            disabled={viewScope?.viewMode !== "default"}
+        >
+            { note && <NoteIconList note={note} /> }
+        </Dropdown>
+    )
+}
+
+function NoteIconList({ note }: { note: FNote }) {
+    const searchBoxRef = useRef<HTMLInputElement>(null);
+    const [ search, setSearch ] = useState<string>();
+    const [ categoryId, setCategoryId ] = useState<string>("0");
+    const [ iconData, setIconData ] = useState<IconData>();
+
+    useEffect(() => {
+        async function loadIcons() {
+            if (!fullIconData) {
+                fullIconData = (await import("./icon_list.js")).default;
+            }
+
+            // Filter by text and/or category.
+            let icons: Icon[] = fullIconData.icons;
+            const processedSearch = search?.trim()?.toLowerCase();
+            if (processedSearch || categoryId) {
+                icons = icons.filter((icon) => {
+                    if (categoryId !== "0" && String(icon.category_id) !== categoryId) {
+                        return false;
+                    }
+
+                    if (processedSearch) {
+                        if (!icon.name.includes(processedSearch) &&
+                            !icon.term?.find((t) => t.includes(processedSearch))) {
+                            return false;
+                        }
+                    }
+
+                    return true;
+                });
+            }
+
+            // Sort by count.
+            const iconToCount = await getIconToCountMap();
+            if (iconToCount) {
+                icons.sort((a, b) => {
+                    const countA = iconToCount[a.className ?? ""] || 0;
+                    const countB = iconToCount[b.className ?? ""] || 0;
+
+                    return countB - countA;
+                });
+            }
+
+            setIconData({
+                iconToCount,
+                icons,
+                categories: fullIconData.categories
+            })
+        }
+
+        loadIcons();
+    }, [ search, categoryId ]);
+
+    return (
+        <>
+            <div class="filter-row">
+                <span>{t("note_icon.category")}</span>
+                <FormSelect
+                    name="icon-category"
+                    values={fullIconData?.categories ?? []}
+                    currentValue={categoryId} onChange={setCategoryId}
+                    keyProperty="id" titleProperty="name"
+                />
+
+                <span>{t("note_icon.search")}</span>
+                <FormTextBox
+                    inputRef={searchBoxRef}
+                    type="text"
+                    name="icon-search"
+                    currentValue={search} onChange={setSearch}
+                    autoFocus
+                />
+            </div>
+
+            <div
+                class="icon-list"
+                onClick={(e) => {
+                    const clickedTarget = e.target as HTMLElement;
+                    
+                    if (!clickedTarget.classList.contains("bx")) {
+                        return;
+                    }
+
+                    const iconClass = Array.from(clickedTarget.classList.values()).join(" ");
+                    if (note) {
+                        const attributeToSet = note.hasOwnedLabel("workspace") ? "workspaceIconClass" : "iconClass";
+                        attributes.setLabel(note.noteId, attributeToSet, iconClass);
+                    }
+                }}
+            >
+                {getIconLabels(note).length > 0 && (
+                    <div style={{ textAlign: "center" }}>
+                        <Button
+                            text={t("note_icon.reset-default")}
+                            onClick={() => {
+                                if (!note) {
+                                    return;
+                                }
+                                for (const label of getIconLabels(note)) {
+                                    attributes.removeAttributeById(note.noteId, label.attributeId);
+                                }
+                            }}                    
+                        />
+                    </div> 
+                )}
+
+                {(iconData?.icons ?? []).map(({className, name}) => (
+                    <span class={`bx ${className}`} title={name} />
+                ))}
+            </div>
+        </>
+    );
+}
+
+async function getIconToCountMap() {
+    if (!iconToCountCache) {
+        iconToCountCache = server.get<IconToCountCache>("other/icon-usage");
+        setTimeout(() => (iconToCountCache = null), 20000); // invalidate cache after 20 seconds
+    }
+
+    return (await iconToCountCache).iconClassToCountMap;
+}
+
+function getIconLabels(note: FNote) {
+    if (!note) {
+        return [];
+    }
+    return note.getOwnedLabels()
+        .filter((label) => ["workspaceIconClass", "iconClass"]
+        .includes(label.name));
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/note_language.ts b/apps/client/src/widgets/note_language.ts
deleted file mode 100644
index 398951e20..000000000
--- a/apps/client/src/widgets/note_language.ts
+++ /dev/null
@@ -1,166 +0,0 @@
-import { Dropdown } from "bootstrap";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import { getAvailableLocales, getLocaleById, t } from "../services/i18n.js";
-import type { EventData } from "../components/app_context.js";
-import type FNote from "../entities/fnote.js";
-import attributes from "../services/attributes.js";
-import type { Locale } from "@triliumnext/commons";
-import options from "../services/options.js";
-import appContext from "../components/app_context.js";
-
-const TPL = /*html*/`\
-<div class="dropdown note-language-widget">
-    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle select-button note-language-button">
-        <span class="note-language-desc"></span>
-        <span class="caret"></span>
-    </button>
-    <div class="note-language-dropdown dropdown-menu dropdown-menu-left tn-dropdown-list"></div>
-    <button class="language-help-button icon-action bx bx-help-circle" type="button" data-in-app-help="B0lcI9xz1r8K" title="${t("open-help-page")}"></button>
-
-    <style>
-        .note-language-widget {
-            display: flex;
-            align-items: center;
-        }
-
-        .language-help-button {
-            margin-left: 4px;
-        }
-
-        .note-language-dropdown [dir=rtl] {
-            text-align: right;
-        }
-
-        .dropdown-item.rtl > .check {
-            order: 1;
-        }
-    </style>
-</div>
-`;
-
-const DEFAULT_LOCALE: Locale = {
-    id: "",
-    name: t("note_language.not_set")
-};
-
-export default class NoteLanguageWidget extends NoteContextAwareWidget {
-
-    private dropdown!: Dropdown;
-    private $noteLanguageDropdown!: JQuery<HTMLElement>;
-    private $noteLanguageDesc!: JQuery<HTMLElement>;
-    private locales: (Locale | "---")[];
-    private currentLanguageId?: string;
-
-    constructor() {
-        super();
-        this.locales = NoteLanguageWidget.#buildLocales();
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]);
-        this.$widget.on("show.bs.dropdown", () => this.renderDropdown());
-
-        this.$noteLanguageDropdown = this.$widget.find(".note-language-dropdown")
-        this.$noteLanguageDesc = this.$widget.find(".note-language-desc");
-    }
-
-    renderDropdown() {
-        this.$noteLanguageDropdown.empty();
-
-        if (!this.note) {
-            return;
-        }
-
-        for (const locale of this.locales) {
-            if (typeof locale === "object") {
-                const $title = $("<span>").text(locale.name);
-
-                const $link = $('<a class="dropdown-item">')
-                    .attr("data-language", locale.id)
-                    .append('<span class="check">&check;</span> ')
-                    .append($title)
-                    .on("click", () => {
-                    const languageId = $link.attr("data-language") ?? "";
-                    this.save(languageId);
-                });
-
-                if (locale.rtl) {
-                    $link.attr("dir", "rtl");
-                }
-
-                if (locale.id === this.currentLanguageId) {
-                    $link.addClass("selected");
-                }
-
-                this.$noteLanguageDropdown.append($link);
-            } else {
-                this.$noteLanguageDropdown.append('<div class="dropdown-divider"></div>');
-            }
-        }
-
-        const $configureLink = $('<a class="dropdown-item">')
-            .append(`<span>${t("note_language.configure-languages")}</span>`)
-            .on("click", () => appContext.tabManager.openContextWithNote("_optionsLocalization", { activate: true }));
-        this.$noteLanguageDropdown.append($configureLink);
-    }
-
-    async save(languageId: string) {
-        if (!this.note) {
-            return;
-        }
-
-        attributes.setAttribute(this.note, "label", "language", languageId);
-    }
-
-    async refreshWithNote(note: FNote) {
-        const currentLanguageId = note.getLabelValue("language") ?? "";
-        const language = getLocaleById(currentLanguageId) ?? DEFAULT_LOCALE;
-        this.currentLanguageId = currentLanguageId;
-        this.$noteLanguageDesc.text(language.name);
-        this.dropdown.hide();
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isOptionReloaded("languages")) {
-            this.locales = NoteLanguageWidget.#buildLocales();
-        }
-
-        if (loadResults.getAttributeRows().find((a) => a.noteId === this.noteId && a.name === "language")) {
-            this.refresh();
-        }
-    }
-
-    static #buildLocales() {
-        const enabledLanguages = JSON.parse(options.get("languages") ?? "[]") as string[];
-        const filteredLanguages = getAvailableLocales().filter((l) => typeof l !== "object" || enabledLanguages.includes(l.id));
-        const leftToRightLanguages = filteredLanguages.filter((l) => !l.rtl);
-        const rightToLeftLanguages = filteredLanguages.filter((l) => l.rtl);
-
-        let locales: ("---" | Locale)[] = [
-            DEFAULT_LOCALE
-        ];
-
-        if (leftToRightLanguages.length > 0) {
-            locales = [
-                ...locales,
-                "---",
-                ...leftToRightLanguages
-            ];
-        }
-
-        if (rightToLeftLanguages.length > 0) {
-            locales = [
-                ...locales,
-                "---",
-                ...rightToLeftLanguages
-            ];
-        }
-
-        // This will separate the list of languages from the "Configure languages" button.
-        // If there is at least one language.
-        locales.push("---");
-        return locales;
-    }
-
-}
diff --git a/apps/client/src/widgets/note_title.css b/apps/client/src/widgets/note_title.css
new file mode 100644
index 000000000..aa3c31269
--- /dev/null
+++ b/apps/client/src/widgets/note_title.css
@@ -0,0 +1,25 @@
+.note-title-widget {
+    flex-grow: 1000;
+    height: 100%;
+}
+
+.note-title-widget input.note-title {
+    font-size: 110%;
+    border: 0;
+    margin: 2px 0px;
+    min-width: 5em;
+    width: 100%;
+    padding: 1px 12px;
+}
+
+.note-title-widget input.note-title.protected {
+    text-shadow: 4px 4px 4px var(--muted-text-color);
+}
+
+body.mobile .note-title-widget input.note-title {
+    padding: 0;
+}
+
+body.desktop .note-title-widget input.note-title {
+    font-size: 180%;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/note_title.ts b/apps/client/src/widgets/note_title.ts
deleted file mode 100644
index ebe7ad809..000000000
--- a/apps/client/src/widgets/note_title.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-import { t } from "../services/i18n.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import protectedSessionHolder from "../services/protected_session_holder.js";
-import server from "../services/server.js";
-import SpacedUpdate from "../services/spaced_update.js";
-import appContext, { type EventData } from "../components/app_context.js";
-import branchService from "../services/branches.js";
-import shortcutService from "../services/shortcuts.js";
-import utils from "../services/utils.js";
-import type FNote from "../entities/fnote.js";
-
-const TPL = /*html*/`
-<div class="note-title-widget">
-    <style>
-    .note-title-widget {
-        flex-grow: 1000;
-        height: 100%;
-    }
-
-    .note-title-widget input.note-title {
-        font-size: 110%;
-        border: 0;
-        margin: 2px 0px;
-        min-width: 5em;
-        width: 100%;
-    }
-
-    body.mobile .note-title-widget input.note-title {
-        padding: 0;
-    }
-
-    body.desktop .note-title-widget input.note-title {
-        font-size: 180%;
-    }
-
-    .note-title-widget input.note-title.protected {
-        text-shadow: 4px 4px 4px var(--muted-text-color);
-    }
-    </style>
-
-    <input autocomplete="off" value="" placeholder="${t("note_title.placeholder")}" class="note-title" tabindex="100">
-</div>`;
-
-export default class NoteTitleWidget extends NoteContextAwareWidget {
-
-    private $noteTitle!: JQuery<HTMLElement>;
-    private deleteNoteOnEscape: boolean;
-    private spacedUpdate: SpacedUpdate;
-
-    constructor() {
-        super();
-
-        this.spacedUpdate = new SpacedUpdate(async () => {
-            const title = this.$noteTitle.val();
-
-            if (this.note) {
-                protectedSessionHolder.touchProtectedSessionIfNecessary(this.note);
-            }
-
-            await server.put(`notes/${this.noteId}/title`, { title }, this.componentId);
-        });
-
-        this.deleteNoteOnEscape = false;
-
-        appContext.addBeforeUnloadListener(this);
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$noteTitle = this.$widget.find(".note-title");
-
-        this.$noteTitle.on("input", () => this.spacedUpdate.scheduleUpdate());
-
-        this.$noteTitle.on("blur", () => {
-            this.spacedUpdate.updateNowIfNecessary();
-
-            this.deleteNoteOnEscape = false;
-        });
-
-        shortcutService.bindElShortcut(this.$noteTitle, "esc", () => {
-            if (this.deleteNoteOnEscape && this.noteContext?.isActive() && this.noteContext?.note) {
-                branchService.deleteNotes(Object.values(this.noteContext.note.parentToBranch));
-            }
-        });
-
-        shortcutService.bindElShortcut(this.$noteTitle, "return", () => {
-            this.triggerCommand("focusOnDetail", { ntxId: this.noteContext?.ntxId });
-        });
-    }
-
-    async refreshWithNote(note: FNote) {
-        const isReadOnly =
-            (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable())
-            || utils.isLaunchBarConfig(note.noteId)
-            || this.noteContext?.viewScope?.viewMode !== "default";
-
-        this.$noteTitle.val(isReadOnly ? (await this.noteContext?.getNavigationTitle()) || "" : note.title);
-        this.$noteTitle.prop("readonly", isReadOnly);
-
-        this.setProtectedStatus(note);
-    }
-
-    setProtectedStatus(note: FNote) {
-        this.$noteTitle.toggleClass("protected", !!note.isProtected);
-    }
-
-    async beforeNoteSwitchEvent({ noteContext }: EventData<"beforeNoteSwitch">) {
-        if (this.isNoteContext(noteContext.ntxId)) {
-            await this.spacedUpdate.updateNowIfNecessary();
-        }
-    }
-
-    async beforeNoteContextRemoveEvent({ ntxIds }: EventData<"beforeNoteContextRemove">) {
-        if (this.isNoteContext(ntxIds)) {
-            await this.spacedUpdate.updateNowIfNecessary();
-        }
-    }
-
-    focusOnTitleEvent() {
-        if (this.noteContext && this.noteContext.isActive()) {
-            this.$noteTitle.trigger("focus");
-        }
-    }
-
-    focusAndSelectTitleEvent({ isNewNote } = { isNewNote: false }) {
-        if (this.noteContext && this.noteContext.isActive()) {
-            this.$noteTitle.trigger("focus").trigger("select");
-
-            this.deleteNoteOnEscape = isNewNote;
-        }
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isNoteReloaded(this.noteId) && this.note) {
-            // not updating the title specifically since the synced title might be older than what the user is currently typing
-            this.setProtectedStatus(this.note);
-        }
-
-        if (loadResults.isNoteReloaded(this.noteId, this.componentId)) {
-            this.refresh();
-        }
-    }
-
-    beforeUnloadEvent() {
-        return this.spacedUpdate.isAllSavedAndTriggerUpdate();
-    }
-}
diff --git a/apps/client/src/widgets/note_title.tsx b/apps/client/src/widgets/note_title.tsx
new file mode 100644
index 000000000..e2f30bcfc
--- /dev/null
+++ b/apps/client/src/widgets/note_title.tsx
@@ -0,0 +1,99 @@
+import { useEffect, useRef, useState } from "preact/hooks";
+import { t } from "../services/i18n";
+import FormTextBox from "./react/FormTextBox";
+import { useNoteContext, useNoteProperty, useSpacedUpdate, useTriliumEvent, useTriliumEvents } from "./react/hooks";
+import protected_session_holder from "../services/protected_session_holder";
+import server from "../services/server";
+import "./note_title.css";
+import { isLaunchBarConfig } from "../services/utils";
+import appContext from "../components/app_context";
+import branches from "../services/branches";
+
+export default function NoteTitleWidget() {
+    const { note, noteId, componentId, viewScope, noteContext, parentComponent } = useNoteContext();    
+    const title = useNoteProperty(note, "title", componentId);    
+    const isProtected = useNoteProperty(note, "isProtected");
+    const newTitle = useRef("");
+    
+    const [ isReadOnly, setReadOnly ] = useState<boolean>(false);
+    const [ navigationTitle, setNavigationTitle ] = useState<string | null>(null);    
+    
+    // Manage read-only
+    useEffect(() => {
+        const isReadOnly = note === null
+            || note === undefined
+            || (note.isProtected && !protected_session_holder.isProtectedSessionAvailable())
+            || isLaunchBarConfig(note.noteId)
+            || viewScope?.viewMode !== "default";
+        setReadOnly(isReadOnly);
+    }, [ note, note?.noteId, note?.isProtected, viewScope?.viewMode ]);
+
+    // Manage the title for read-only notes
+    useEffect(() => {
+        if (isReadOnly) {
+            noteContext?.getNavigationTitle().then(setNavigationTitle);
+        }
+    }, [isReadOnly]);
+
+    // Save changes to title.
+    const spacedUpdate = useSpacedUpdate(async () => {
+        if (!note) {
+            return;
+        }
+        protected_session_holder.touchProtectedSessionIfNecessary(note);
+        await server.put<void>(`notes/${noteId}/title`, { title: newTitle.current }, componentId);
+    });    
+
+    // Prevent user from navigating away if the spaced update is not done.
+    useEffect(() => {
+        appContext.addBeforeUnloadListener(() => spacedUpdate.isAllSavedAndTriggerUpdate());        
+    }, []);
+    useTriliumEvents([ "beforeNoteSwitch", "beforeNoteContextRemove" ], () => spacedUpdate.updateNowIfNecessary());
+
+    // Manage focus.
+    const textBoxRef = useRef<HTMLInputElement>(null);
+    const isNewNote = useRef<boolean>();
+    useTriliumEvents([ "focusOnTitle", "focusAndSelectTitle" ], (e, eventName) => {
+        if (noteContext?.isActive() && textBoxRef.current) {
+            textBoxRef.current.focus();
+            if (eventName === "focusAndSelectTitle") {
+                textBoxRef.current.select();
+            }
+            isNewNote.current = ("isNewNote" in e ? e.isNewNote : false);
+        }
+    });
+
+    return (
+        <div className="note-title-widget">
+            {note && <FormTextBox
+                inputRef={textBoxRef}
+                autocomplete="off"
+                currentValue={(!isReadOnly ? title : navigationTitle) ?? ""}
+                placeholder={t("note_title.placeholder")}
+                className={`note-title ${isProtected ? "protected" : ""}`}
+                tabIndex={100}
+                readOnly={isReadOnly}
+                onChange={(newValue) => {
+                    newTitle.current = newValue;
+                    spacedUpdate.scheduleUpdate();
+                }}
+                onKeyDown={(e) => {
+                    // Focus on the note content when pressing enter.
+                    if (e.key === "Enter") {
+                        e.preventDefault();
+                        parentComponent.triggerCommand("focusOnDetail", { ntxId: noteContext?.ntxId });
+                        return;
+                    }
+
+                    if (e.key === "Escape" && isNewNote.current && noteContext?.isActive() && note) {
+                        branches.deleteNotes(Object.values(note.parentToBranch));
+                    }
+                }}
+                onBlur={() => {
+                    spacedUpdate.updateNowIfNecessary();
+                    isNewNote.current = false;
+                }}
+            />}
+        </div>
+    );
+}
diff --git a/apps/client/src/widgets/note_type.ts b/apps/client/src/widgets/note_type.ts
deleted file mode 100644
index d1a40b408..000000000
--- a/apps/client/src/widgets/note_type.ts
+++ /dev/null
@@ -1,175 +0,0 @@
-import { Dropdown } from "bootstrap";
-import { NOTE_TYPES } from "../services/note_types.js";
-import { t } from "../services/i18n.js";
-import dialogService from "../services/dialog.js";
-import mimeTypesService from "../services/mime_types.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import server from "../services/server.js";
-import type { EventData } from "../components/app_context.js";
-import type { NoteType } from "../entities/fnote.js";
-import type FNote from "../entities/fnote.js";
-
-const NOT_SELECTABLE_NOTE_TYPES = NOTE_TYPES.filter((nt) => nt.reserved || nt.static).map((nt) => nt.type);
-
-const TPL = /*html*/`
-<div class="dropdown note-type-widget">
-    <style>
-        .note-type-dropdown {
-            max-height: 500px;
-            overflow-y: auto;
-            overflow-x: hidden;
-        }
-    </style>
-    <button type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-sm dropdown-toggle select-button note-type-button">
-        <span class="note-type-desc"></span>
-        <span class="caret"></span>
-    </button>
-    <div class="note-type-dropdown dropdown-menu dropdown-menu-left tn-dropdown-list"></div>
-</div>
-`;
-
-export default class NoteTypeWidget extends NoteContextAwareWidget {
-
-    private dropdown!: Dropdown;
-    private $noteTypeDropdown!: JQuery<HTMLElement>;
-    private $noteTypeButton!: JQuery<HTMLElement>;
-    private $noteTypeDesc!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-
-        this.dropdown = Dropdown.getOrCreateInstance(this.$widget.find("[data-bs-toggle='dropdown']")[0]);
-
-        this.$widget.on("show.bs.dropdown", () => this.renderDropdown());
-
-        this.$noteTypeDropdown = this.$widget.find(".note-type-dropdown");
-        this.$noteTypeButton = this.$widget.find(".note-type-button");
-        this.$noteTypeDesc = this.$widget.find(".note-type-desc");
-
-        this.$widget.on("click", ".dropdown-item", () => this.dropdown.toggle());
-    }
-
-    async refreshWithNote(note: FNote) {
-        this.$noteTypeButton.prop("disabled", () => NOT_SELECTABLE_NOTE_TYPES.includes(note.type));
-
-        this.$noteTypeDesc.text(await this.findTypeTitle(note.type, note.mime));
-
-        this.dropdown.hide();
-    }
-
-    /** the actual body is rendered lazily on note-type button click */
-    async renderDropdown() {
-        this.$noteTypeDropdown.empty();
-
-        if (!this.note) {
-            return;
-        }
-
-        for (const noteType of NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static)) {
-            let $typeLink: JQuery<HTMLElement>;
-
-            const $title = $("<span>").text(noteType.title);
-
-            if (noteType.isNew) {
-                $title.append($(`<span class="badge new-note-type-badge">`).text(t("note_types.new-feature")));
-            }
-
-            if (noteType.isBeta) {
-                $title.append($(`<span class="badge">`).text(t("note_types.beta-feature")));
-            }
-
-            if (noteType.type !== "code") {
-                $typeLink = $('<a class="dropdown-item">')
-                    .attr("data-note-type", noteType.type)
-                    .append('<span class="check">&check;</span> ')
-                    .append($title)
-                    .on("click", (e) => {
-                        const type = $typeLink.attr("data-note-type");
-                        const noteType = NOTE_TYPES.find((nt) => nt.type === type);
-
-                        if (noteType) {
-                            this.save(noteType.type, noteType.mime);
-                        }
-                    });
-            } else {
-                this.$noteTypeDropdown.append('<div class="dropdown-divider"></div>');
-                $typeLink = $('<a class="dropdown-item disabled">').attr("data-note-type", noteType.type).append('<span class="check">&check;</span> ').append($("<strong>").text(noteType.title));
-            }
-
-            if (this.note.type === noteType.type) {
-                $typeLink.addClass("selected");
-            }
-
-            this.$noteTypeDropdown.append($typeLink);
-        }
-
-        for (const mimeType of mimeTypesService.getMimeTypes()) {
-            if (!mimeType.enabled) {
-                continue;
-            }
-
-            const $mimeLink = $('<a class="dropdown-item">')
-                .attr("data-mime-type", mimeType.mime)
-                .append('<span class="check">&check;</span> ')
-                .append($("<span>").text(mimeType.title))
-                .on("click", (e) => {
-                    const $link = $(e.target).closest(".dropdown-item");
-
-                    this.save("code", $link.attr("data-mime-type") ?? "");
-                });
-
-            if (this.note.type === "code" && this.note.mime === mimeType.mime) {
-                $mimeLink.addClass("selected");
-
-                this.$noteTypeDesc.text(mimeType.title);
-            }
-
-            this.$noteTypeDropdown.append($mimeLink);
-        }
-    }
-
-    async findTypeTitle(type: NoteType, mime: string) {
-        if (type === "code") {
-            const mimeTypes = mimeTypesService.getMimeTypes();
-            const found = mimeTypes.find((mt) => mt.mime === mime);
-
-            return found ? found.title : mime;
-        } else {
-            const noteType = NOTE_TYPES.find((nt) => nt.type === type);
-
-            return noteType ? noteType.title : type;
-        }
-    }
-
-    async save(type: NoteType, mime?: string) {
-        if (type === this.note?.type && mime === this.note?.mime) {
-            return;
-        }
-
-        if (type !== this.note?.type && !(await this.confirmChangeIfContent())) {
-            return;
-        }
-
-        await server.put(`notes/${this.noteId}/type`, { type, mime });
-    }
-
-    async confirmChangeIfContent() {
-        if (!this.note) {
-            return;
-        }
-
-        const blob = await this.note.getBlob();
-
-        if (!blob?.content || !blob.content.trim().length) {
-            return true;
-        }
-
-        return await dialogService.confirm(t("note_types.confirm-change"));
-    }
-
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isNoteReloaded(this.noteId)) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/promoted_attributes.ts b/apps/client/src/widgets/promoted_attributes.ts
similarity index 95%
rename from apps/client/src/widgets/ribbon_widgets/promoted_attributes.ts
rename to apps/client/src/widgets/promoted_attributes.ts
index f661356ed..1b67ecec1 100644
--- a/apps/client/src/widgets/ribbon_widgets/promoted_attributes.ts
+++ b/apps/client/src/widgets/promoted_attributes.ts
@@ -1,16 +1,16 @@
-import { t } from "../../services/i18n.js";
-import server from "../../services/server.js";
-import ws from "../../services/ws.js";
-import treeService from "../../services/tree.js";
-import noteAutocompleteService from "../../services/note_autocomplete.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import attributeService from "../../services/attributes.js";
-import options from "../../services/options.js";
-import utils from "../../services/utils.js";
-import type FNote from "../../entities/fnote.js";
-import type { Attribute } from "../../services/attribute_parser.js";
-import type FAttribute from "../../entities/fattribute.js";
-import type { EventData } from "../../components/app_context.js";
+import { t } from "../services/i18n.js";
+import server from "../services/server.js";
+import ws from "../services/ws.js";
+import treeService from "../services/tree.js";
+import noteAutocompleteService from "../services/note_autocomplete.js";
+import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import attributeService from "../services/attributes.js";
+import options from "../services/options.js";
+import utils from "../services/utils.js";
+import type FNote from "../entities/fnote.js";
+import type { Attribute } from "../services/attribute_parser.js";
+import type FAttribute from "../entities/fattribute.js";
+import type { EventData } from "../components/app_context.js";
 
 const TPL = /*html*/`
 <div class="promoted-attributes-widget">
diff --git a/apps/client/src/widgets/protected_note_switch.ts b/apps/client/src/widgets/protected_note_switch.ts
deleted file mode 100644
index a65f4db31..000000000
--- a/apps/client/src/widgets/protected_note_switch.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import type { EventData } from "../components/app_context.js";
-import type FNote from "../entities/fnote.js";
-import { t } from "../services/i18n.js";
-import protectedSessionService from "../services/protected_session.js";
-import SwitchWidget from "./switch.js";
-
-export default class ProtectedNoteSwitchWidget extends SwitchWidget {
-    doRender() {
-        super.doRender();
-
-        this.switchOnName = t("protect_note.toggle-on");
-        this.switchOnTooltip = t("protect_note.toggle-on-hint");
-
-        this.switchOffName = t("protect_note.toggle-off");
-        this.switchOffTooltip = t("protect_note.toggle-off-hint");
-    }
-
-    switchOn() {
-        if (this.noteId) {
-            protectedSessionService.protectNote(this.noteId, true, false);
-        }
-    }
-
-    switchOff() {
-        if (this.noteId) {
-            protectedSessionService.protectNote(this.noteId, false, false);
-        }
-    }
-
-    async refreshWithNote(note: FNote) {
-        this.isToggled = note.isProtected;
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.isNoteReloaded(this.noteId)) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/react/ActionButton.tsx b/apps/client/src/widgets/react/ActionButton.tsx
index 5adacc5c1..9fa0e69b4 100644
--- a/apps/client/src/widgets/react/ActionButton.tsx
+++ b/apps/client/src/widgets/react/ActionButton.tsx
@@ -1,13 +1,19 @@
+import { CommandNames } from "../../components/app_context";
+
 interface ActionButtonProps {
     text: string;
+    titlePosition?: "bottom"; // TODO: Use it
     icon: string;
-    onClick?: () => void;
+    className?: string;
+    onClick?: (e: MouseEvent) => void;
+    triggerCommand?: CommandNames;
 }
 
-export default function ActionButton({ text, icon, onClick }: ActionButtonProps) {
+export default function ActionButton({ text, icon, className, onClick, triggerCommand }: ActionButtonProps) {
     return <button
-        class={`icon-action ${icon}`}
+        class={`icon-action ${icon} ${className ?? ""}`}
         title={text}
-        onClick={onClick}
+        onClick={onClick}        
+        data-trigger-command={triggerCommand}
     />;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/Button.tsx b/apps/client/src/widgets/react/Button.tsx
index 61d7fbd83..585e8b1dd 100644
--- a/apps/client/src/widgets/react/Button.tsx
+++ b/apps/client/src/widgets/react/Button.tsx
@@ -1,9 +1,10 @@
 import type { RefObject } from "preact";
 import type { CSSProperties } from "preact/compat";
-import { useRef, useMemo } from "preact/hooks";
+import { useMemo } from "preact/hooks";
 import { memo } from "preact/compat";
+import { CommandNames } from "../../components/app_context";
 
-interface ButtonProps {
+export interface ButtonProps {
     name?: string;
     /** Reference to the button element. Mostly useful for requesting focus. */
     buttonRef?: RefObject<HTMLButtonElement>;
@@ -17,9 +18,11 @@ interface ButtonProps {
     disabled?: boolean;
     size?: "normal" | "small" | "micro";
     style?: CSSProperties;
+    triggerCommand?: CommandNames;
+    title?: string;
 }
 
-const Button = memo(({ name, buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style }: ButtonProps) => {
+const Button = memo(({ name, buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style, triggerCommand, ...restProps }: ButtonProps) => {
     // Memoize classes array to prevent recreation
     const classes = useMemo(() => {
         const classList: string[] = ["btn"];
@@ -39,8 +42,6 @@ const Button = memo(({ name, buttonRef: _buttonRef, className, text, onClick, ke
         return classList.join(" ");
     }, [primary, className, size]);
 
-    const buttonRef = _buttonRef ?? useRef<HTMLButtonElement>(null);
-    
     // Memoize keyboard shortcut rendering
     const shortcutElements = useMemo(() => {
         if (!keyboardShortcut) return null;
@@ -57,11 +58,13 @@ const Button = memo(({ name, buttonRef: _buttonRef, className, text, onClick, ke
         <button
             name={name}
             className={classes}
-            type={onClick ? "button" : "submit"}
+            type={onClick || triggerCommand ? "button" : "submit"}
             onClick={onClick}
             ref={buttonRef}
             disabled={disabled}
             style={style}
+            data-trigger-command={triggerCommand}
+            {...restProps}
         >
             {icon && <span className={`bx ${icon}`}></span>}
             {text} {shortcutElements}
diff --git a/apps/client/src/widgets/react/CKEditor.tsx b/apps/client/src/widgets/react/CKEditor.tsx
new file mode 100644
index 000000000..8b8839a38
--- /dev/null
+++ b/apps/client/src/widgets/react/CKEditor.tsx
@@ -0,0 +1,106 @@
+import type { CKTextEditor, AttributeEditor, EditorConfig, ModelPosition } from "@triliumnext/ckeditor5";
+import { useEffect, useImperativeHandle, useRef } from "preact/compat";
+import { MutableRef } from "preact/hooks";
+
+export interface CKEditorApi {
+    focus(): void;
+    /**
+     * Imperatively sets the text in the editor.
+     * 
+     * Prefer setting `currentValue` prop where possible.
+     * 
+     * @param text text to set in the editor
+     */
+    setText(text: string): void;
+}
+
+interface CKEditorOpts {
+    apiRef: MutableRef<CKEditorApi | undefined>;
+    currentValue?: string;
+    className: string;
+    tabIndex?: number;
+    config: EditorConfig;
+    editor: typeof AttributeEditor;
+    disableNewlines?: boolean;
+    disableSpellcheck?: boolean;
+    onChange?: (newValue?: string) => void;
+    onClick?: (e: MouseEvent, pos?: ModelPosition | null) => void;
+    onKeyDown?: (e: KeyboardEvent) => void;
+    onBlur?: () => void;
+}
+
+export default function CKEditor({ apiRef, currentValue, editor, config, disableNewlines, disableSpellcheck, onChange, onClick, ...restProps }: CKEditorOpts) {
+    const editorContainerRef = useRef<HTMLDivElement>(null);    
+    const textEditorRef = useRef<CKTextEditor>(null);
+    useImperativeHandle(apiRef, () => {
+        return {
+            focus() {
+                editorContainerRef.current?.focus();
+                textEditorRef.current?.model.change((writer) => {
+                    const documentRoot = textEditorRef.current?.editing.model.document.getRoot();
+                    if (documentRoot) {
+                        writer.setSelection(writer.createPositionAt(documentRoot, "end"));
+                    }
+                });
+            },
+            setText(text: string) {
+                textEditorRef.current?.setData(text);
+            }
+        };
+    }, [ editorContainerRef ]);
+
+    useEffect(() => {
+        if (!editorContainerRef.current) return;
+
+        editor.create(editorContainerRef.current, config).then((textEditor) => {
+            textEditorRef.current = textEditor;
+
+            if (disableNewlines) {
+                textEditor.editing.view.document.on(
+                    "enter",
+                    (event, data) => {
+                        // disable entering new line - see https://github.com/ckeditor/ckeditor5/issues/9422
+                        data.preventDefault();
+                        event.stop();
+                    },
+                    { priority: "high" }
+                );
+            }
+
+            if (disableSpellcheck) {
+                const documentRoot = textEditor.editing.view.document.getRoot();
+                if (documentRoot) {
+                    textEditor.editing.view.change((writer) => writer.setAttribute("spellcheck", "false", documentRoot));
+                }
+            }
+
+            if (onChange) {
+                textEditor.model.document.on("change:data", () => {
+                    onChange(textEditor.getData())
+                });
+            }
+
+            if (currentValue) {
+                textEditor.setData(currentValue);
+            }
+        });
+    }, []);
+
+    useEffect(() => {
+        if (!textEditorRef.current) return;
+        textEditorRef.current.setData(currentValue ?? "");
+    }, [ currentValue ]);
+
+    return (
+        <div
+            ref={editorContainerRef}
+            onClick={(e) => {
+                if (onClick) {
+                    const pos = textEditorRef.current?.model.document.selection.getFirstPosition();
+                    onClick(e, pos);
+                }
+            }}
+            {...restProps}
+        />
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/Dropdown.tsx b/apps/client/src/widgets/react/Dropdown.tsx
index 58a3bd654..fbcd6a78e 100644
--- a/apps/client/src/widgets/react/Dropdown.tsx
+++ b/apps/client/src/widgets/react/Dropdown.tsx
@@ -1,17 +1,31 @@
 import { Dropdown as BootstrapDropdown } from "bootstrap";
 import { ComponentChildren } from "preact";
-import { useEffect, useRef } from "preact/hooks";
+import { CSSProperties } from "preact/compat";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+import { useUniqueName } from "./hooks";
 
-interface DropdownProps {
+export interface DropdownProps {
     className?: string;
+    buttonClassName?: string;
     isStatic?: boolean;
     children: ComponentChildren;
+    title?: string;
+    dropdownContainerStyle?: CSSProperties;
+    dropdownContainerClassName?: string;
+    hideToggleArrow?: boolean;
+    /** If set to true, then the dropdown button will be considered an icon action (without normal border and sized for icons only). */
+    iconAction?: boolean;
+    noSelectButtonStyle?: boolean;
+    disabled?: boolean;
+    text?: ComponentChildren;
 }
 
-export default function Dropdown({ className, isStatic, children }: DropdownProps) {
+export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle }: DropdownProps) {
     const dropdownRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
+    const [ shown, setShown ] = useState(false);
+
     useEffect(() => {
         if (!triggerRef.current) return;
         
@@ -19,33 +33,54 @@ export default function Dropdown({ className, isStatic, children }: DropdownProp
         return () => dropdown.dispose();
     }, []); // Add dependency array
 
+    const onShown = useCallback(() => {
+        setShown(true);
+    }, [])
+
+    const onHidden = useCallback(() => {
+        setShown(false);
+    }, []);
+
     useEffect(() => {
         if (!dropdownRef.current) return;
         
-        const handleHide = () => {
-            // Remove console.log from production code
-        };
-        
         const $dropdown = $(dropdownRef.current);
-        $dropdown.on("hide.bs.dropdown", handleHide);
+        $dropdown.on("show.bs.dropdown", onShown);
+        $dropdown.on("hide.bs.dropdown", onHidden);
         
         // Add proper cleanup
         return () => {
-            $dropdown.off("hide.bs.dropdown", handleHide);
+            $dropdown.off("show.bs.dropdown", onShown);
+            $dropdown.off("hide.bs.dropdown", onHidden);
         };
     }, []); // Add dependency array
 
+    const ariaId = useUniqueName("button");
+
     return (
-        <div ref={dropdownRef} class="dropdown" style={{ display: "flex" }}>
+        <div ref={dropdownRef} class={`dropdown ${className ?? ""}`} style={{ display: "flex" }}>
             <button
+                className={`${iconAction ? "icon-action" : "btn"} ${!noSelectButtonStyle ? "select-button" : ""} ${buttonClassName ?? ""} ${!hideToggleArrow ? "dropdown-toggle" : ""}`}
                 ref={triggerRef}
                 type="button"
-                style={{ display: "none" }}
                 data-bs-toggle="dropdown"
-                data-bs-display={ isStatic ? "static" : undefined } />
+                data-bs-display={ isStatic ? "static" : undefined }
+                aria-haspopup="true"
+                aria-expanded="false"
+                title={title}
+                id={ariaId}
+                disabled={disabled}
+            >
+                {text}
+                <span className="caret"></span>
+            </button>
 
-            <div class={`dropdown-menu ${className ?? ""} ${isStatic ? "static" : undefined}`}>
-                {children}
+            <div
+                class={`dropdown-menu ${isStatic ? "static" : ""} ${dropdownContainerClassName ?? ""} tn-dropdown-list`}
+                style={dropdownContainerStyle}
+                aria-labelledby={ariaId}
+            >
+                {shown && children}
             </div>
         </div>
     )
diff --git a/apps/client/src/widgets/react/FormCheckbox.tsx b/apps/client/src/widgets/react/FormCheckbox.tsx
index 9eafcec9e..55e0797b3 100644
--- a/apps/client/src/widgets/react/FormCheckbox.tsx
+++ b/apps/client/src/widgets/react/FormCheckbox.tsx
@@ -6,7 +6,6 @@ import { CSSProperties, memo } from "preact/compat";
 import { useUniqueName } from "./hooks";
 
 interface FormCheckboxProps {
-    id?: string;
     name?: string;
     label: string | ComponentChildren;
     /**
@@ -19,9 +18,9 @@ interface FormCheckboxProps {
     containerStyle?: CSSProperties;
 }
 
-const FormCheckbox = memo(({ name, id: _id, disabled, label, currentValue, onChange, hint, containerStyle }: FormCheckboxProps) => {
-    const id = _id ?? useUniqueName(name);
+const FormCheckbox = memo(({ name, disabled, label, currentValue, onChange, hint, containerStyle }: FormCheckboxProps) => {    
     const labelRef = useRef<HTMLLabelElement>(null);
+    const id = useUniqueName(name);
 
     // Fix: Move useEffect outside conditional
     useEffect(() => {
diff --git a/apps/client/src/widgets/react/FormDropdownList.tsx b/apps/client/src/widgets/react/FormDropdownList.tsx
new file mode 100644
index 000000000..08d607a8c
--- /dev/null
+++ b/apps/client/src/widgets/react/FormDropdownList.tsx
@@ -0,0 +1,30 @@
+import Dropdown, { DropdownProps } from "./Dropdown";
+import { FormListItem } from "./FormList";
+
+interface FormDropdownList<T> extends Omit<DropdownProps, "children"> {
+    values: T[];
+    keyProperty: keyof T;
+    titleProperty: keyof T;
+    descriptionProperty?: keyof T;
+    currentValue: string;
+    onChange(newValue: string): void;
+}
+
+export default function FormDropdownList<T>({ values, keyProperty, titleProperty, descriptionProperty, currentValue, onChange, ...restProps }: FormDropdownList<T>) {
+    const currentValueData = values.find(value => value[keyProperty] === currentValue);
+
+    return (
+        <Dropdown text={currentValueData?.[titleProperty] ?? ""} {...restProps}>
+            {values.map(item => (
+                <FormListItem
+                    onClick={() => onChange(item[keyProperty] as string)}
+                    checked={currentValue === item[keyProperty]}
+                    description={descriptionProperty && item[descriptionProperty] as string}
+                    selected={currentValue === item[keyProperty]}
+                >
+                    {item[titleProperty] as string}
+                </FormListItem>
+            ))}
+        </Dropdown>
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/FormFileUpload.tsx b/apps/client/src/widgets/react/FormFileUpload.tsx
index c2f53a5a9..c43008b09 100644
--- a/apps/client/src/widgets/react/FormFileUpload.tsx
+++ b/apps/client/src/widgets/react/FormFileUpload.tsx
@@ -1,13 +1,48 @@
+import { Ref } from "preact";
+import Button, { ButtonProps } from "./Button";
+import { useRef } from "preact/hooks";
+
 interface FormFileUploadProps {
+    name?: string;
     onChange: (files: FileList | null) => void;
     multiple?: boolean;
+    hidden?: boolean;
+    inputRef?: Ref<HTMLInputElement>;
 }
 
-export default function FormFileUpload({ onChange, multiple }: FormFileUploadProps) {
+export default function FormFileUpload({ inputRef, name, onChange, multiple, hidden }: FormFileUploadProps) {
     return (
-        <label class="tn-file-input tn-input-field">
-            <input type="file" class="form-control-file" multiple={multiple}
+        <label class="tn-file-input tn-input-field" style={hidden ? { display: "none" } : undefined}>
+            <input
+                ref={inputRef}
+                name={name}
+                type="file"
+                class="form-control-file"
+                multiple={multiple}                
                 onChange={e => onChange((e.target as HTMLInputElement).files)} />
         </label>
     )
+}
+
+/**
+ * Combination of a button with a hidden file upload field.
+ * 
+ * @param param the change listener for the file upload and the properties for the button.
+ */
+export function FormFileUploadButton({ onChange, ...buttonProps }: Omit<ButtonProps, "onClick"> & Pick<FormFileUploadProps, "onChange">) {
+    const inputRef = useRef<HTMLInputElement>(null);
+
+    return (
+        <>
+            <Button
+                {...buttonProps}
+                onClick={() => inputRef.current?.click()}
+            />
+            <FormFileUpload
+                inputRef={inputRef} 
+                hidden
+                onChange={onChange}
+            />
+        </>
+    )
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/FormGroup.tsx b/apps/client/src/widgets/react/FormGroup.tsx
index 45394563b..701b53c23 100644
--- a/apps/client/src/widgets/react/FormGroup.tsx
+++ b/apps/client/src/widgets/react/FormGroup.tsx
@@ -8,6 +8,7 @@ interface FormGroupProps {
     label?: string;
     title?: string;
     className?: string;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     children: VNode<any>;
     description?: string | ComponentChildren;
     disabled?: boolean;
@@ -25,7 +26,7 @@ export default function FormGroup({ name, label, title, className, children, des
 
             {childWithId}
 
-            {description && <small className="form-text">{description}</small>}
+            {description && <div><small className="form-text">{description}</small></div>}
         </div>
     );
 }
diff --git a/apps/client/src/widgets/react/FormList.css b/apps/client/src/widgets/react/FormList.css
new file mode 100644
index 000000000..ae5c3340f
--- /dev/null
+++ b/apps/client/src/widgets/react/FormList.css
@@ -0,0 +1,9 @@
+.dropdown-item .description {
+    font-size: small;
+    color: var(--muted-text-color);
+    white-space: normal;
+}
+
+.dropdown-item span.bx {
+    flex-shrink: 0;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/FormList.tsx b/apps/client/src/widgets/react/FormList.tsx
index f3bf12ce4..c12c8a317 100644
--- a/apps/client/src/widgets/react/FormList.tsx
+++ b/apps/client/src/widgets/react/FormList.tsx
@@ -2,6 +2,8 @@ import { Dropdown as BootstrapDropdown } from "bootstrap";
 import { ComponentChildren } from "preact";
 import Icon from "./Icon";
 import { useEffect, useMemo, useRef, type CSSProperties } from "preact/compat";
+import "./FormList.css";
+import { CommandNames } from "../../components/app_context";
 
 interface FormListOpts {
     children: ComponentChildren;
@@ -33,6 +35,7 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
         const style: CSSProperties = {};
         if (fullHeight) {
             style.height = "100%";
+            style.overflow = "auto";
         }
         return style;
     }, [ fullHeight ]);
@@ -51,7 +54,8 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
                     ...builtinStyles,
                     position: "relative",
                 }} onClick={(e) => {
-                    const value = (e.target as HTMLElement)?.dataset?.value;
+                    const dropdownItem = (e.target as HTMLElement).closest(".dropdown-item") as HTMLElement | null;
+                    const value = dropdownItem?.dataset?.value;
                     if (value && onSelect) {
                         onSelect(value);
                     }
@@ -63,23 +67,50 @@ export default function FormList({ children, onSelect, style, fullHeight }: Form
     );
 }
 
+export interface FormListBadge {
+    className?: string;
+    text: string;
+}
+
 interface FormListItemOpts {
     children: ComponentChildren;
     icon?: string;
     value?: string;
     title?: string;
     active?: boolean;
+    badges?: FormListBadge[];
+    disabled?: boolean;
+    checked?: boolean | null;
+    selected?: boolean;
+    onClick?: (e: MouseEvent) => void;
+    triggerCommand?: CommandNames;
+    description?: string;
+    className?: string;
+    rtl?: boolean;
 }
 
-export function FormListItem({ children, icon, value, title, active }: FormListItemOpts) {
+export function FormListItem({ children, icon, value, title, active, badges, disabled, checked, onClick, description, selected, rtl, triggerCommand }: FormListItemOpts) {
+    if (checked) {
+        icon = "bx bx-check";
+    }
+
     return (
         <a
-            class={`dropdown-item ${active ? "active" : ""}`}
+            class={`dropdown-item ${active ? "active" : ""} ${disabled ? "disabled" : ""} ${selected ? "selected" : ""}`}
             data-value={value} title={title}
             tabIndex={0}
+            onClick={onClick}
+            data-trigger-command={triggerCommand}
+            dir={rtl ? "rtl" : undefined}
         >
             <Icon icon={icon} />&nbsp;
-            {children}
+            <div>
+                {children}
+                {badges && badges.map(({ className, text }) => (
+                    <span className={`badge ${className ?? ""}`}>{text}</span>
+                ))}
+                {description && <div className="description">{description}</div>}
+            </div>
         </a>
     );
 }
@@ -95,3 +126,7 @@ export function FormListHeader({ text }: FormListHeaderOpts) {
         </li>
     )
 }
+
+export function FormDropdownDivider() {
+    return <div className="dropdown-divider" />;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/FormSelect.tsx b/apps/client/src/widgets/react/FormSelect.tsx
index e4c9aa761..6c2340543 100644
--- a/apps/client/src/widgets/react/FormSelect.tsx
+++ b/apps/client/src/widgets/react/FormSelect.tsx
@@ -20,16 +20,18 @@ interface ValueConfig<T, Q> {
 
 interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
     id?: string;
+    name?: string;
     onChange: OnChangeListener;
     style?: CSSProperties;
+    className?: string;
 }
 
 /**
  * Combobox component that takes in any object array as data. Each item of the array is rendered as an item, and the key and values are obtained by looking into the object by a specified key.
  */
-export default function FormSelect<T>({ id, onChange, style, ...restProps }: FormSelectProps<T, T>) {
+export default function FormSelect<T>({ name, id, onChange, style, className, ...restProps }: FormSelectProps<T, T>) {
     return (
-        <FormSelectBody id={id} onChange={onChange} style={style}>
+        <FormSelectBody name={name} id={id} onChange={onChange} style={style} className={className}>
             <FormSelectGroup {...restProps} />
         </FormSelectBody>
     );
@@ -38,27 +40,35 @@ export default function FormSelect<T>({ id, onChange, style, ...restProps }: For
 /**
  * Similar to {@link FormSelect}, but the top-level elements are actually groups.
  */
-export function FormSelectWithGroups<T>({ id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps<T, FormSelectGroup<T>>) {
+export function FormSelectWithGroups<T>({ name, id, values, keyProperty, titleProperty, currentValue, onChange, ...restProps }: FormSelectProps<T, FormSelectGroup<T> | T>) {
     return (
-        <FormSelectBody id={id} onChange={onChange}>
-            {values.map(({ title, items }) => {
-                return (
-                    <optgroup label={title}>
-                        <FormSelectGroup values={items} keyProperty={keyProperty} titleProperty={titleProperty} currentValue={currentValue} />
-                    </optgroup>
-                );
+        <FormSelectBody name={name} id={id} onChange={onChange} {...restProps}>
+            {values.map((item) => {
+                if (!item) return <></>;
+                if (typeof item === "object" && "items" in item) {
+                    return (
+                        <optgroup label={item.title}>
+                            <FormSelectGroup values={item.items} keyProperty={keyProperty} titleProperty={titleProperty} currentValue={currentValue} />
+                        </optgroup>
+                    );
+                } else {
+                    return (
+                        <FormSelectGroup values={[ item ]} keyProperty={keyProperty} titleProperty={titleProperty} currentValue={currentValue} />
+                    )
+                }
             })}
         </FormSelectBody>
     )
 }
 
-function FormSelectBody({ id, children, onChange, style }: { id?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) {
+function FormSelectBody({ id, name, children, onChange, style, className }: { id?: string, name?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties, className?: string }) {
     return (
         <select
             id={id}
-            class="form-select"
+            name={name}
             onChange={e => onChange((e.target as HTMLInputElement).value)}
             style={style}
+            className={`form-select ${className ?? ""}`}
         >
             {children}
         </select>
@@ -69,10 +79,10 @@ function FormSelectGroup<T>({ values, keyProperty, titleProperty, currentValue }
     return values.map(item => {
         return (
             <option
-                value={item[keyProperty] as any}
+                value={item[keyProperty] as string | number}
                 selected={item[keyProperty] === currentValue}
             >
-                {item[titleProperty ?? keyProperty] ?? item[keyProperty] as any}
+                {item[titleProperty ?? keyProperty] ?? item[keyProperty] as string | number}
             </option>
         );
     });
diff --git a/apps/client/src/widgets/react/FormTextArea.tsx b/apps/client/src/widgets/react/FormTextArea.tsx
index 85945cbe1..c3d58c45d 100644
--- a/apps/client/src/widgets/react/FormTextArea.tsx
+++ b/apps/client/src/widgets/react/FormTextArea.tsx
@@ -1,18 +1,26 @@
-interface FormTextAreaProps {
+import { RefObject, TextareaHTMLAttributes } from "preact/compat";
+
+interface FormTextAreaProps extends Omit<TextareaHTMLAttributes, "onBlur" | "onChange"> {
     id?: string;
     currentValue: string;
+    onChange?(newValue: string): void;
     onBlur?(newValue: string): void;
-    rows: number;
+    inputRef?: RefObject<HTMLTextAreaElement>
 }
-export default function FormTextArea({ id, onBlur, rows, currentValue }: FormTextAreaProps) {
+export default function FormTextArea({ inputRef, id, onBlur, onChange, currentValue, className, ...restProps }: FormTextAreaProps) {
     return (
         <textarea
+            ref={inputRef}
             id={id}
-            rows={rows}
+            className={`form-control ${className ?? ""}`}
+            onChange={(e) => {
+                onChange?.(e.currentTarget.value);
+            }}
             onBlur={(e) => {
                 onBlur?.(e.currentTarget.value);
             }}
             style={{ width: "100%" }}
+            {...restProps}
         >{currentValue}</textarea>
     )
 }
diff --git a/apps/client/src/widgets/react/FormTextBox.tsx b/apps/client/src/widgets/react/FormTextBox.tsx
index 6fde90f62..db67bf6c9 100644
--- a/apps/client/src/widgets/react/FormTextBox.tsx
+++ b/apps/client/src/widgets/react/FormTextBox.tsx
@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, RefObject } from "preact/compat";
+import { useEffect, type InputHTMLAttributes, type RefObject } from "preact/compat";
 
 interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "onBlur" | "value"> {
     id?: string;
@@ -8,7 +8,7 @@ interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
     inputRef?: RefObject<HTMLInputElement>;
 }
 
-export default function FormTextBox({ inputRef, className, type, currentValue, onChange, onBlur,...rest}: FormTextBoxProps) {
+export default function FormTextBox({ inputRef, className, type, currentValue, onChange, onBlur, autoFocus, ...rest}: FormTextBoxProps) {
     if (type === "number" && currentValue) {
         const { min, max } = rest;
         const currentValueNum = parseInt(currentValue, 10);
@@ -19,6 +19,12 @@ export default function FormTextBox({ inputRef, className, type, currentValue, o
         }
     }
 
+    useEffect(() => {
+        if (autoFocus) {
+            inputRef?.current?.focus();
+        }
+    }, []);
+
     return (
         <input
             ref={inputRef}
diff --git a/apps/client/src/widgets/react/FormToggle.css b/apps/client/src/widgets/react/FormToggle.css
new file mode 100644
index 000000000..f727bc5ff
--- /dev/null
+++ b/apps/client/src/widgets/react/FormToggle.css
@@ -0,0 +1,98 @@
+.switch-widget {
+    --switch-track-width: 50px;
+    --switch-track-height: 24px;
+    --switch-off-track-background: var(--more-accented-background-color);
+    --switch-on-track-background: var(--main-text-color);
+
+    --switch-thumb-width: 16px;
+    --switch-thumb-height: 16px;
+    --switch-off-thumb-background: var(--main-background-color);
+    --switch-on-thumb-background: var(--main-background-color);
+
+    display: flex;
+    align-items: center;
+}
+
+/* The track of the toggle switch */
+
+.switch-widget .switch-button {
+    display: block;
+    position: relative;
+    margin-left: 8px;
+    width: var(--switch-track-width);
+    height: var(--switch-track-height);
+    border-radius: 24px;
+    background-color: var(--switch-off-track-background);
+    transition: background 200ms ease-in;
+}
+
+.switch-widget .switch-button.on {
+    background: var(--switch-on-track-background);
+    transition: background 100ms ease-out;
+}
+
+/* The thumb of the toggle switch */
+
+.switch-widget .switch-button:after {
+    --y: calc((var(--switch-track-height) - var(--switch-thumb-height)) / 2);
+    --x: var(--y);
+
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: var(--switch-thumb-width);
+    height: var(--switch-thumb-height);
+    background-color: var(--switch-off-thumb-background);
+    border-radius: 50%;
+    transform: translate(var(--x), var(--y));
+    transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
+                background 200ms ease-out;
+}
+
+.switch-widget .switch-button.on:after {
+    --x: calc(var(--switch-track-width) - var(--switch-thumb-width) - var(--y));
+
+    background: var(--switch-on-thumb-background);
+    transition: transform 200ms cubic-bezier(0.64, 0, 0.78, 0),
+                background 100ms ease-in;
+}
+
+
+.switch-widget .switch-button input[type="checkbox"] {
+    /* A hidden check box for accesibility purposes */
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+}
+
+/* Disabled state */
+.switch-widget .switch-button:not(.disabled) input[type="checkbox"],
+.switch-widget .switch-button:not(.disabled) {
+    cursor: pointer;
+}
+
+.switch-widget .switch-button:has(input[type="checkbox"]:focus-visible) {
+    outline: 2px solid var(--button-border-color);
+    outline-offset: 2px;
+}
+
+.switch-widget .switch-button.disabled {
+    opacity: 70%;
+}
+
+.switch-widget .switch-help-button {
+    border: 0;
+    margin-left: 4px;
+    background: none;
+    cursor: pointer;
+    font-size: 1.1em;
+    color: var(--muted-text-color);
+}
+
+.switch-widget .switch-help-button:hover {
+    color: var(--main-text-color);
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/FormToggle.tsx b/apps/client/src/widgets/react/FormToggle.tsx
new file mode 100644
index 000000000..62069b3fe
--- /dev/null
+++ b/apps/client/src/widgets/react/FormToggle.tsx
@@ -0,0 +1,41 @@
+import "./FormToggle.css";
+import HelpButton from "./HelpButton";
+
+interface FormToggleProps {
+    currentValue: boolean | null;
+    onChange(newValue: boolean): void;
+    switchOnName: string;
+    switchOnTooltip: string;
+    switchOffName: string;
+    switchOffTooltip: string;
+    helpPage?: string;
+    disabled?: boolean;
+}
+
+export default function FormToggle({ currentValue, helpPage, switchOnName, switchOnTooltip, switchOffName, switchOffTooltip, onChange, disabled }: FormToggleProps) {
+    return (
+        <div className="switch-widget">
+            <span className="switch-name">{ currentValue ? switchOffName : switchOnName }</span>
+
+            <label>
+                <div
+                    className={`switch-button ${currentValue ? "on" : ""} ${disabled ? "disabled" : ""}`}
+                    title={currentValue ? switchOffTooltip : switchOnTooltip }
+                >
+                    <input
+                        className="switch-toggle"
+                        type="checkbox"
+                        checked={currentValue === true}
+                        onInput={(e) => {
+                            onChange(!currentValue);
+                            e.preventDefault();
+                        }}
+                        disabled={disabled}
+                    />
+                </div>
+            </label>
+
+            { helpPage && <HelpButton className="switch-help-button" helpPage={helpPage} />}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/HelpButton.tsx b/apps/client/src/widgets/react/HelpButton.tsx
new file mode 100644
index 000000000..065252264
--- /dev/null
+++ b/apps/client/src/widgets/react/HelpButton.tsx
@@ -0,0 +1,21 @@
+import { CSSProperties } from "preact/compat";
+import { t } from "../../services/i18n";
+import { openInAppHelpFromUrl } from "../../services/utils";
+
+interface HelpButtonProps {
+    className?: string;
+    helpPage: string;
+    style?: CSSProperties;
+}
+
+export default function HelpButton({ className, helpPage, style }: HelpButtonProps) {
+    return (
+        <button
+            class={`${className ?? ""} icon-action bx bx-help-circle`}
+            type="button"
+            onClick={() => openInAppHelpFromUrl(helpPage)}
+            title={t("open-help-page")}
+            style={style}
+        />
+    );
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/HelpRemoveButtons.tsx b/apps/client/src/widgets/react/HelpRemoveButtons.tsx
new file mode 100644
index 000000000..7eda18b97
--- /dev/null
+++ b/apps/client/src/widgets/react/HelpRemoveButtons.tsx
@@ -0,0 +1,30 @@
+import type { ComponentChildren } from "preact";
+import ActionButton from "./ActionButton";
+import Dropdown from "./Dropdown";
+
+interface HelpRemoveButtonsProps {
+    help?: ComponentChildren;
+    removeText?: string;
+    onRemove?: () => void;
+}
+
+export default function HelpRemoveButtons({ help, removeText, onRemove }: HelpRemoveButtonsProps) {
+    return (
+        <td className="button-column">
+            {help && <>
+                <Dropdown
+                    className="help-dropdown"
+                    buttonClassName="bx bx-help-circle icon-action"                    
+                    hideToggleArrow
+                >{help}</Dropdown>
+                {" "}
+            </>}            
+            <ActionButton
+                icon="bx bx-x"
+                className="search-option-del"
+                text={removeText ?? ""}
+                onClick={onRemove}
+            />
+        </td>
+    );
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/KeyboardShortcut.tsx b/apps/client/src/widgets/react/KeyboardShortcut.tsx
index 049f54dd5..ca8f6a852 100644
--- a/apps/client/src/widgets/react/KeyboardShortcut.tsx
+++ b/apps/client/src/widgets/react/KeyboardShortcut.tsx
@@ -1,6 +1,7 @@
 import { ActionKeyboardShortcut, KeyboardActionNames } from "@triliumnext/commons";
 import { useEffect, useState } from "preact/hooks";
 import keyboard_actions from "../../services/keyboard_actions";
+import { joinElements } from "./react_utils";
 
 interface KeyboardShortcutProps {
     actionName: KeyboardActionNames;
@@ -19,15 +20,15 @@ export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps)
 
     return (
         <>
-            {action.effectiveShortcuts?.map((shortcut, i) => {
+            {action.effectiveShortcuts?.map((shortcut) => {
                 const keys = shortcut.split("+");
-                return keys
+                return joinElements(keys
                     .map((key, i) => (
                         <>
                             <kbd>{key}</kbd> {i + 1 < keys.length && "+ "}
                         </>
-                    ))
-            }).reduce<any>((acc, item) => (acc.length ? [...acc, ", ", item] : [item]), [])}
+                    )))
+            })}
         </>
     );
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/LoadingSpinner.tsx b/apps/client/src/widgets/react/LoadingSpinner.tsx
new file mode 100644
index 000000000..b3eb99e2e
--- /dev/null
+++ b/apps/client/src/widgets/react/LoadingSpinner.tsx
@@ -0,0 +1,3 @@
+export default function LoadingSpinner() {
+    return <span className="bx bx-loader bx-spin" />
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/Modal.tsx b/apps/client/src/widgets/react/Modal.tsx
index 362d3ab38..f13257a5d 100644
--- a/apps/client/src/widgets/react/Modal.tsx
+++ b/apps/client/src/widgets/react/Modal.tsx
@@ -1,11 +1,11 @@
-import { useContext, useEffect, useRef, useMemo, useCallback } from "preact/hooks";
+import { useEffect, useRef, useMemo } from "preact/hooks";
 import { t } from "../../services/i18n";
 import { ComponentChildren } from "preact";
 import type { CSSProperties, RefObject } from "preact/compat";
 import { openDialog } from "../../services/dialog";
-import { ParentComponent } from "./ReactBasicWidget";
 import { Modal as BootstrapModal } from "bootstrap";
 import { memo } from "preact/compat";
+import { useSyncedRef } from "./hooks";
 
 interface ModalProps {
     className: string;
@@ -64,50 +64,43 @@ interface ModalProps {
     stackable?: boolean;
 }
 
-export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: _modalRef, formRef: _formRef, bodyStyle, show, stackable }: ModalProps) {
-    const modalRef = _modalRef ?? useRef<HTMLDivElement>(null);
+export default function Modal({ children, className, size, title, header, footer, footerStyle, footerAlignment, onShown, onSubmit, helpPageId, minWidth, maxWidth, zIndex, scrollable, onHidden: onHidden, modalRef: externalModalRef, formRef, bodyStyle, show, stackable }: ModalProps) {
+    const modalRef = useSyncedRef<HTMLDivElement>(externalModalRef);
     const modalInstanceRef = useRef<BootstrapModal>();
-    const formRef = _formRef ?? useRef<HTMLFormElement>(null);
-    const parentWidget = useContext(ParentComponent);
     const elementToFocus = useRef<Element | null>();
 
-    if (onShown || onHidden) {
-        useEffect(() => {
-            const modalElement = modalRef.current;
-            if (!modalElement) {
-                return;
-            }
-            if (onShown) {
-                modalElement.addEventListener("shown.bs.modal", onShown);
-            }
-            modalElement.addEventListener("hidden.bs.modal", () => {
-                onHidden();
-                if (elementToFocus.current && "focus" in elementToFocus.current) {
-                    (elementToFocus.current as HTMLElement).focus();
-                }
-            });
-            return () => {
-                if (onShown) {
-                    modalElement.removeEventListener("shown.bs.modal", onShown);
-                }
-                modalElement.removeEventListener("hidden.bs.modal", onHidden);
-            };
-        }, [ ]);
-    }    
-
     useEffect(() => {
-        if (!parentWidget) {
+        const modalElement = modalRef.current;
+        if (!modalElement) {
             return;
         }
-        if (show) {
+        if (onShown) {
+            modalElement.addEventListener("shown.bs.modal", onShown);
+        }
+        modalElement.addEventListener("hidden.bs.modal", () => {
+            onHidden();
+            if (elementToFocus.current && "focus" in elementToFocus.current) {
+                (elementToFocus.current as HTMLElement).focus();
+            }
+        });
+        return () => {
+            if (onShown) {
+                modalElement.removeEventListener("shown.bs.modal", onShown);
+            }
+            modalElement.removeEventListener("hidden.bs.modal", onHidden);
+        };
+    }, [ onShown, onHidden ]);
+
+    useEffect(() => {
+        if (show && modalRef.current) {
             elementToFocus.current = document.activeElement;
-            openDialog(parentWidget.$widget, !stackable).then(($widget) => {
+            openDialog($(modalRef.current), !stackable).then(($widget) => {
                 modalInstanceRef.current = BootstrapModal.getOrCreateInstance($widget[0]);
             })
         } else {
             modalInstanceRef.current?.hide();
         }
-    }, [ show ]);
+    }, [ show, modalRef.current ]);
 
     // Memoize styles to prevent recreation on every render
     const dialogStyle = useMemo<CSSProperties>(() => {
@@ -147,10 +140,10 @@ export default function Modal({ children, className, size, title, header, footer
                     </div>
 
                     {onSubmit ? (
-                        <form ref={formRef} onSubmit={useCallback((e) => {
+                        <form ref={formRef} onSubmit={(e) => {
                             e.preventDefault();
                             onSubmit();
-                        }, [onSubmit])}>
+                        }}>
                             <ModalInner footer={footer} bodyStyle={bodyStyle} footerStyle={footerStyle} footerAlignment={footerAlignment}>{children}</ModalInner>
                         </form>
                     ) : (
diff --git a/apps/client/src/widgets/react/NoteAutocomplete.tsx b/apps/client/src/widgets/react/NoteAutocomplete.tsx
index dd97f90d4..223dbb5d4 100644
--- a/apps/client/src/widgets/react/NoteAutocomplete.tsx
+++ b/apps/client/src/widgets/react/NoteAutocomplete.tsx
@@ -1,9 +1,9 @@
-import { useRef } from "preact/hooks";
 import { t } from "../../services/i18n";
 import { useEffect } from "preact/hooks";
 import note_autocomplete, { Options, type Suggestion } from "../../services/note_autocomplete";
 import type { RefObject } from "preact";
 import type { CSSProperties } from "preact/compat";
+import { useSyncedRef } from "./hooks";
 
 interface NoteAutocompleteProps {    
     id?: string;
@@ -19,8 +19,8 @@ interface NoteAutocompleteProps {
     noteId?: string;
 }
 
-export default function NoteAutocomplete({ id, inputRef: _ref, text, placeholder, onChange, onTextChange, container, containerStyle, opts, noteId, noteIdChanged }: NoteAutocompleteProps) {
-    const ref = _ref ?? useRef<HTMLInputElement>(null);
+export default function NoteAutocomplete({ id, inputRef: externalInputRef, text, placeholder, onChange, onTextChange, container, containerStyle, opts, noteId, noteIdChanged }: NoteAutocompleteProps) {
+    const ref = useSyncedRef<HTMLInputElement>(externalInputRef);
     
     useEffect(() => {
         if (!ref.current) return;
diff --git a/apps/client/src/widgets/react/NoteLink.tsx b/apps/client/src/widgets/react/NoteLink.tsx
new file mode 100644
index 000000000..c722d916d
--- /dev/null
+++ b/apps/client/src/widgets/react/NoteLink.tsx
@@ -0,0 +1,37 @@
+import { useEffect, useState } from "preact/hooks";
+import link from "../../services/link";
+import RawHtml from "./RawHtml";
+
+interface NoteLinkOpts {
+    notePath: string | string[];
+    showNotePath?: boolean;
+    style?: Record<string, string | number>;
+    noPreview?: boolean;
+    noTnLink?: boolean;
+}
+
+export default function NoteLink({ notePath, showNotePath, style, noPreview, noTnLink }: NoteLinkOpts) {
+    const stringifiedNotePath = Array.isArray(notePath) ? notePath.join("/") : notePath;
+    const [ jqueryEl, setJqueryEl ] = useState<JQuery<HTMLElement>>();
+
+    useEffect(() => {
+        link.createLink(stringifiedNotePath, { showNotePath })
+            .then(setJqueryEl);
+    }, [ stringifiedNotePath, showNotePath ]);
+
+    if (style) {
+        jqueryEl?.css(style);
+    }
+
+    const $linkEl = jqueryEl?.find("a");
+    if (noPreview) {
+        $linkEl?.addClass("no-tooltip-preview");
+    }
+
+    if (!noTnLink) {
+        $linkEl?.addClass("tn-link");
+    }
+
+    return <RawHtml html={jqueryEl} />
+    
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/RawHtml.tsx b/apps/client/src/widgets/react/RawHtml.tsx
index 1e5aef648..a8b3b2820 100644
--- a/apps/client/src/widgets/react/RawHtml.tsx
+++ b/apps/client/src/widgets/react/RawHtml.tsx
@@ -4,8 +4,9 @@ type HTMLElementLike = string | HTMLElement | JQuery<HTMLElement>;
 
 interface RawHtmlProps {
     className?: string;
-    html: HTMLElementLike;
+    html?: HTMLElementLike;
     style?: CSSProperties;
+    onClick?: (e: MouseEvent) => void;
 }
 
 export default function RawHtml(props: RawHtmlProps) {
@@ -16,11 +17,12 @@ export function RawHtmlBlock(props: RawHtmlProps) {
     return <div {...getProps(props)} />
 }
 
-function getProps({ className, html, style }: RawHtmlProps) {
+function getProps({ className, html, style, onClick }: RawHtmlProps) {
     return {
         className: className,
-        dangerouslySetInnerHTML: getHtml(html),
-        style
+        dangerouslySetInnerHTML: getHtml(html ?? ""),
+        style,
+        onClick
     }
 }
 
diff --git a/apps/client/src/widgets/react/hooks.tsx b/apps/client/src/widgets/react/hooks.tsx
index d254b930c..d1719b147 100644
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -1,96 +1,61 @@
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useCallback, useContext, useDebugValue, useEffect, useLayoutEffect, useMemo, useRef, useState } from "preact/hooks";
 import { EventData, EventNames } from "../../components/app_context";
-import { ParentComponent } from "./ReactBasicWidget";
+import { ParentComponent } from "./react_utils";
 import SpacedUpdate from "../../services/spaced_update";
 import { OptionNames } from "@triliumnext/commons";
 import options, { type OptionValue } from "../../services/options";
 import utils, { reloadFrontendApp } from "../../services/utils";
-import Component from "../../components/component";
-import server from "../../services/server";
+import NoteContext from "../../components/note_context";
+import BasicWidget, { ReactWrappedWidget } from "../basic_widget";
+import FNote from "../../entities/fnote";
+import attributes from "../../services/attributes";
+import FBlob from "../../entities/fblob";
+import NoteContextAwareWidget from "../note_context_aware_widget";
+import { RefObject, VNode } from "preact";
+import { Tooltip } from "bootstrap";
+import { CSSProperties } from "preact/compat";
 
-type TriliumEventHandler<T extends EventNames> = (data: EventData<T>) => void;
-const registeredHandlers: Map<Component, Map<EventNames, TriliumEventHandler<any>[]>> = new Map();
-
-/**
- * Allows a React component to react to Trilium events (e.g. `entitiesReloaded`). When the desired event is triggered, the handler is invoked with the event parameters.
- * 
- * Under the hood, it works by altering the parent (Trilium) component of the React element to introduce the corresponding event.
- * 
- * @param eventName the name of the Trilium event to listen for.
- * @param handler the handler to be invoked when the event is triggered.
- * @param enabled determines whether the event should be listened to or not. Useful to conditionally limit the listener based on a state (e.g. a modal being displayed).
- */
-export default function useTriliumEvent<T extends EventNames>(eventName: T, handler: TriliumEventHandler<T>, enabled = true) {
-    const parentWidget = useContext(ParentComponent);
-    if (!parentWidget) {
-        return;
-    }
-    
-    const handlerName = `${eventName}Event`;
-    const customHandler  = useMemo(() => {
-        return async (data: EventData<T>) => {
-            // Inform the attached event listeners.
-            const eventHandlers = registeredHandlers.get(parentWidget)?.get(eventName) ?? [];
-            for (const eventHandler of eventHandlers) {
-                eventHandler(data);
-            }
-        }
-    }, [ eventName, parentWidget ]);    
-
-    useEffect(() => {
-        // Attach to the list of handlers.
-        let handlersByWidget = registeredHandlers.get(parentWidget);
-        if (!handlersByWidget) {
-            handlersByWidget = new Map();
-            registeredHandlers.set(parentWidget, handlersByWidget);
-        }
-
-        let handlersByWidgetAndEventName = handlersByWidget.get(eventName);
-        if (!handlersByWidgetAndEventName) {
-            handlersByWidgetAndEventName = [];
-            handlersByWidget.set(eventName, handlersByWidgetAndEventName);
-        }
-
-        if (!handlersByWidgetAndEventName.includes(handler)) {
-            handlersByWidgetAndEventName.push(handler);
-        }
-
-        // Apply the custom event handler.
-        if (parentWidget[handlerName] && parentWidget[handlerName] !== customHandler) {
-            console.warn(`Widget ${parentWidget.componentId} already had an event listener and it was replaced by the React one.`);
-        }
-        
-        parentWidget[handlerName] = customHandler;
-    
-        return () => {
-            const eventHandlers = registeredHandlers.get(parentWidget)?.get(eventName);
-            if (!eventHandlers || !eventHandlers.includes(handler)) {
-                return;
-            }
-    
-            // Remove the event handler from the array.            
-            const newEventHandlers = eventHandlers.filter(e => e !== handler);            
-            if (newEventHandlers.length) {
-                registeredHandlers.get(parentWidget)?.set(eventName, newEventHandlers);        
-            } else {
-                registeredHandlers.get(parentWidget)?.delete(eventName);
-            }
-
-            if (!registeredHandlers.get(parentWidget)?.size) {
-                registeredHandlers.delete(parentWidget);
-            }
-        };
-    }, [ eventName, parentWidget, handler ]);
+export function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void) {
+    const parentComponent = useContext(ParentComponent);
+    useLayoutEffect(() => {
+        parentComponent?.registerHandler(eventName, handler);
+        return (() => parentComponent?.removeHandler(eventName, handler));
+    }, [ eventName, handler ]);
+    useDebugValue(eventName);
 }
 
-export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000) {
+export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler: (data: EventData<T>, eventName: T) => void) {
+    const parentComponent = useContext(ParentComponent);
+    
+    useLayoutEffect(() => {
+        const handlers: ({ eventName: T, callback: (data: EventData<T>) => void })[] = [];
+        for (const eventName of eventNames) {
+            handlers.push({ eventName, callback: (data) => {
+                handler(data, eventName);
+            }})
+        }
+    
+        for (const { eventName, callback } of handlers) {
+            parentComponent?.registerHandler(eventName, callback);
+        }
+    
+        return (() => {
+            for (const { eventName, callback } of handlers) {
+                parentComponent?.removeHandler(eventName, callback);
+            }
+        });
+    }, [ eventNames, handler ]);
+    useDebugValue(() => eventNames.join(", "));
+}
+
+export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000) {
     const callbackRef = useRef(callback);
     const spacedUpdateRef = useRef<SpacedUpdate>();
 
     // Update callback ref when it changes
     useEffect(() => {
         callbackRef.current = callback;
-    });
+    }, [callback]);
 
     // Create SpacedUpdate instance only once
     if (!spacedUpdateRef.current) {
@@ -137,7 +102,9 @@ export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [st
             const newValue = options.get(name);
             setValue(newValue);
         }
-     }, [ name ]));
+     }, [ name, setValue ]));
+
+    useDebugValue(name);
 
     return [
         value,
@@ -154,6 +121,7 @@ export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [st
  */
 export function useTriliumOptionBool(name: OptionNames, needsRefresh?: boolean): [boolean, (newValue: boolean) => Promise<void>] {
     const [ value, setValue ] = useTriliumOption(name, needsRefresh);
+    useDebugValue(name);
     return [
         (value === "true"),
         (newValue) => setValue(newValue ? "true" : "false")
@@ -169,6 +137,7 @@ export function useTriliumOptionBool(name: OptionNames, needsRefresh?: boolean):
  */
 export function useTriliumOptionInt(name: OptionNames): [number, (newValue: number) => Promise<void>] {
     const [ value, setValue ] = useTriliumOption(name);
+    useDebugValue(name);
     return [
         (parseInt(value, 10)),
         (newValue) => setValue(newValue)
@@ -183,6 +152,7 @@ export function useTriliumOptionInt(name: OptionNames): [number, (newValue: numb
  */
 export function useTriliumOptionJson<T>(name: OptionNames): [ T, (newValue: T) => Promise<void> ] {
     const [ value, setValue ] = useTriliumOption(name);
+    useDebugValue(name);
     return [
         (JSON.parse(value) as T),
         (newValue => setValue(JSON.stringify(newValue)))
@@ -201,6 +171,8 @@ export function useTriliumOptions<T extends OptionNames>(...names: T[]) {
         values[name] = options.get(name);
     }
 
+    useDebugValue(() => names.join(", "));
+
     return [
         values as Record<T, string>,
         options.saveMany
@@ -218,4 +190,340 @@ export function useTriliumOptions<T extends OptionNames>(...names: T[]) {
  */
 export function useUniqueName(prefix?: string) {
     return useMemo(() => (prefix ? prefix + "-" : "") + utils.randomString(10), [ prefix ]);
+}
+
+export function useNoteContext() {
+    const [ noteContext, setNoteContext ] = useState<NoteContext>();
+    const [ notePath, setNotePath ] = useState<string | null | undefined>();
+    const [ note, setNote ] = useState<FNote | null | undefined>(); 
+
+    useEffect(() => {
+        setNote(noteContext?.note);
+    }, [ notePath ]);
+
+    useTriliumEvents([ "setNoteContext", "activeContextChanged", "noteSwitchedAndActivated", "noteSwitched" ], ({ noteContext }) => {
+        setNoteContext(noteContext);
+        setNotePath(noteContext.notePath);        
+    });
+    useTriliumEvent("frocaReloaded", () => {
+        setNote(noteContext?.note);
+    });
+
+    const parentComponent = useContext(ParentComponent) as ReactWrappedWidget;
+    useDebugValue(() => `notePath=${notePath}, ntxId=${noteContext?.ntxId}`);
+
+    return {
+        note: note,
+        noteId: noteContext?.note?.noteId,
+        notePath: noteContext?.notePath,
+        hoistedNoteId: noteContext?.hoistedNoteId,
+        ntxId: noteContext?.ntxId,
+        viewScope: noteContext?.viewScope,
+        componentId: parentComponent.componentId,
+        noteContext,
+        parentComponent
+    };
+
+}
+
+/**
+ * Allows a React component to listen to obtain a property of a {@link FNote} while also automatically watching for changes, either via the user changing to a different note or the property being changed externally.
+ * 
+ * @param note the {@link FNote} whose property to obtain.
+ * @param property a property of a {@link FNote} to obtain the value from (e.g. `title`, `isProtected`).
+ * @param componentId optionally, constricts the refresh of the value if an update occurs externally via the component ID of a legacy widget. This can be used to avoid external data replacing fresher, user-inputted data.
+ * @returns the value of the requested property.
+ */
+export function useNoteProperty<T extends keyof FNote>(note: FNote | null | undefined, property: T, componentId?: string) {
+    const [, setValue ] = useState<FNote[T] | undefined>(note?.[property]);
+    const refreshValue = () => setValue(note?.[property]);
+
+    // Watch for note changes.
+    useEffect(() => refreshValue(), [ note, note?.[property] ]);
+
+    // Watch for external changes.
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.isNoteReloaded(note?.noteId, componentId)) {
+            refreshValue();
+        }
+    });
+
+    useDebugValue(property);
+    return note?.[property];
+}
+
+export function useNoteRelation(note: FNote | undefined | null, relationName: string): [string | null | undefined, (newValue: string) => void] {
+    const [ relationValue, setRelationValue ] = useState<string | null | undefined>(note?.getRelationValue(relationName));
+
+    useEffect(() => setRelationValue(note?.getRelationValue(relationName) ?? null), [ note ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        for (const attr of loadResults.getAttributeRows()) {
+            if (attr.type === "relation" && attr.name === relationName && attributes.isAffecting(attr, note)) {
+                setRelationValue(attr.value ?? null);
+            }
+        }
+    });
+
+    const setter = useCallback((value: string | undefined) => {
+        if (note) {
+            attributes.setAttribute(note, "relation", relationName, value)
+        }
+    }, [note]);
+
+    useDebugValue(relationName);
+
+    return [
+        relationValue,
+        setter
+    ] as const;
+}
+
+/**
+ * Allows a React component to read or write a note's label while also reacting to changes in value.
+ * 
+ * @param note the note whose label to read/write.
+ * @param labelName the name of the label to read/write.
+ * @returns an array where the first element is the getter and the second element is the setter. The setter has a special behaviour for convenience: if the value is undefined, the label is created without a value (e.g. a tag), if the value is null then the label is removed.
+ */
+export function useNoteLabel(note: FNote | undefined | null, labelName: string): [string | null | undefined, (newValue: string | null | undefined) => void] {
+    const [ labelValue, setLabelValue ] = useState<string | null | undefined>(note?.getLabelValue(labelName));
+
+    useEffect(() => setLabelValue(note?.getLabelValue(labelName) ?? null), [ note ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        for (const attr of loadResults.getAttributeRows()) {
+            if (attr.type === "label" && attr.name === labelName && attributes.isAffecting(attr, note)) {
+                setLabelValue(attr.value ?? null);
+            }
+        }
+    });
+
+    const setter = useCallback((value: string | null | undefined) => {
+        if (note) {
+            if (value || value === undefined) {
+                attributes.setLabel(note.noteId, labelName, value)
+            } else if (value === null) {
+                attributes.removeOwnedLabelByName(note, labelName);
+            }
+        }
+    }, [note]);
+
+    useDebugValue(labelName);
+
+    return [
+        labelValue,
+        setter
+    ] as const;
+}
+
+export function useNoteLabelBoolean(note: FNote | undefined | null, labelName: string): [ boolean, (newValue: boolean) => void] {
+    const [ labelValue, setLabelValue ] = useState<boolean>(!!note?.hasLabel(labelName));
+
+    useEffect(() => setLabelValue(!!note?.hasLabel(labelName)), [ note ]);
+
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        for (const attr of loadResults.getAttributeRows()) {
+            if (attr.type === "label" && attr.name === labelName && attributes.isAffecting(attr, note)) {
+                setLabelValue(!attr.isDeleted);
+            }
+        }
+    });
+
+    const setter = useCallback((value: boolean) => {
+        if (note) {
+            if (value) {
+                attributes.setLabel(note.noteId, labelName, "");
+            } else {
+                attributes.removeOwnedLabelByName(note, labelName);
+            }
+        }
+    }, [note]);
+
+    useDebugValue(labelName);
+
+    return [ labelValue, setter ] as const;
+}
+
+export function useNoteBlob(note: FNote | null | undefined): [ FBlob | null | undefined ] {
+    const [ blob, setBlob ] = useState<FBlob | null>();
+    
+    function refresh() {
+        note?.getBlob().then(setBlob);        
+    }
+
+    useEffect(refresh, [ note?.noteId ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (note && loadResults.hasRevisionForNote(note.noteId)) {
+            refresh();
+        }
+    });
+
+    useDebugValue(note?.noteId);
+
+    return [ blob ] as const;
+}
+
+export function useLegacyWidget<T extends BasicWidget>(widgetFactory: () => T, { noteContext, containerClassName, containerStyle }: {
+    noteContext?: NoteContext;
+    containerClassName?: string;
+    containerStyle?: CSSProperties;
+} = {}): [VNode, T] {
+    const ref = useRef<HTMLDivElement>(null);
+    const parentComponent = useContext(ParentComponent);
+
+    // Render the widget once.
+    const [ widget, renderedWidget ] = useMemo(() => {
+        const widget = widgetFactory();
+
+        if (parentComponent) {
+            parentComponent.child(widget);
+        }
+
+        if (noteContext && widget instanceof NoteContextAwareWidget) {
+            widget.setNoteContextEvent({ noteContext });
+        }
+        
+        const renderedWidget = widget.render();
+        return [ widget, renderedWidget ];
+    }, []);
+
+    // Attach the widget to the parent.
+    useEffect(() => {
+        if (ref.current) {
+            ref.current.innerHTML = "";
+            renderedWidget.appendTo(ref.current);
+        }
+    }, [ renderedWidget ]);
+
+    // Inject the note context.
+    useEffect(() => {
+        if (noteContext && widget instanceof NoteContextAwareWidget) {
+            widget.activeContextChangedEvent({ noteContext });
+        }
+    }, [ noteContext ]);
+
+    useDebugValue(widget);
+
+    return [ <div className={containerClassName} style={containerStyle} ref={ref} />, widget ]
+}
+
+/**
+ * Attaches a {@link ResizeObserver} to the given ref and reads the bounding client rect whenever it changes.
+ * 
+ * @param ref a ref to a {@link HTMLElement} to determine the size and observe the changes in size.
+ * @returns the size of the element, reacting to changes.
+ */
+export function useElementSize(ref: RefObject<HTMLElement>) {
+    const [ size, setSize ] = useState<DOMRect | undefined>(ref.current?.getBoundingClientRect());
+
+    useEffect(() => {
+        if (!ref.current) {
+            return;
+        }
+
+        function onResize() {
+            setSize(ref.current?.getBoundingClientRect());
+        }
+
+        const element = ref.current;
+        const resizeObserver = new ResizeObserver(onResize);
+        resizeObserver.observe(element);
+        return () => {
+            resizeObserver.unobserve(element);
+            resizeObserver.disconnect();
+        }
+    }, [ ref ]);
+
+    return size;
+}
+
+/**
+ * Obtains the inner width and height of the window, as well as reacts to changes in size.
+ * 
+ * @returns the width and height of the window.
+ */
+export function useWindowSize() {
+    const [ size, setSize ] = useState<{ windowWidth: number, windowHeight: number }>({
+        windowWidth: window.innerWidth,
+        windowHeight: window.innerHeight
+    });
+    
+    useEffect(() => {
+        function onResize() {
+            setSize({
+                windowWidth: window.innerWidth,
+                windowHeight: window.innerHeight
+            });
+        }
+
+        window.addEventListener("resize", onResize);
+        return () => window.removeEventListener("resize", onResize);
+    }, []);
+
+    return size;
+}
+
+export function useTooltip(elRef: RefObject<HTMLElement>, config: Partial<Tooltip.Options>) {
+    useEffect(() => {
+        if (!elRef?.current) return;
+
+        const $el = $(elRef.current);
+        $el.tooltip("dispose");
+        $el.tooltip(config);
+    }, [ elRef, config ]);
+
+    const showTooltip = useCallback(() => {
+        if (!elRef?.current) return;
+
+        const $el = $(elRef.current);
+        $el.tooltip("show");
+    }, [ elRef, config ]);
+
+    const hideTooltip = useCallback(() => {
+        if (!elRef?.current) return;
+
+        const $el = $(elRef.current);
+        $el.tooltip("hide");
+    }, [ elRef ]);
+
+    useDebugValue(config.title);
+
+    return { showTooltip, hideTooltip };
+}
+
+/**
+ * Similar to {@link useTooltip}, but doesn't expose methods to imperatively hide or show the tooltip.
+ * 
+ * @param elRef the element to bind the tooltip to.
+ * @param config optionally, the tooltip configuration.
+ */
+export function useStaticTooltip(elRef: RefObject<HTMLElement>, config?: Partial<Tooltip.Options>) {
+    useEffect(() => {
+        if (!elRef?.current) return;
+
+        const $el = $(elRef.current);
+        $el.tooltip(config);
+        return () => {
+            $el.tooltip("dispose");
+        }
+    }, [ elRef, config ]);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
+export function useLegacyImperativeHandlers(handlers: Record<string, Function>) {
+    const parentComponent = useContext(ParentComponent);
+    useEffect(() => {
+        Object.assign(parentComponent as never, handlers);
+    }, [ handlers ]);
+}
+
+export function useSyncedRef<T>(externalRef?: RefObject<T>, initialValue: T | null = null): RefObject<T> {
+    const ref = useRef<T>(initialValue);
+
+    useEffect(() => {
+        if (externalRef) {
+            externalRef.current = ref.current;
+        }
+    }, [ ref, externalRef ]);
+
+    return ref;
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/react/react_utils.ts b/apps/client/src/widgets/react/react_utils.ts
deleted file mode 100644
index 14357e124..000000000
--- a/apps/client/src/widgets/react/react_utils.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import type { RefObject } from "preact";
-
-/**
- * Takes in a React ref and returns a corresponding JQuery selector.
- *
- * @param ref the React ref from which to obtain the jQuery selector.
- * @returns the corresponding jQuery selector.
- */
-export function refToJQuerySelector<T extends HTMLElement>(ref: RefObject<T> | null): JQuery<T> {
-    if (ref?.current) {
-        return $(ref.current);
-    } else {
-        return $();
-    }
-}
diff --git a/apps/client/src/widgets/react/ReactBasicWidget.tsx b/apps/client/src/widgets/react/react_utils.tsx
similarity index 51%
rename from apps/client/src/widgets/react/ReactBasicWidget.tsx
rename to apps/client/src/widgets/react/react_utils.tsx
index b813be3bd..40bb1b9cb 100644
--- a/apps/client/src/widgets/react/ReactBasicWidget.tsx
+++ b/apps/client/src/widgets/react/react_utils.tsx
@@ -1,22 +1,25 @@
-import { createContext, JSX, render } from "preact";
-import BasicWidget from "../basic_widget.js";
-import Component from "../../components/component.js";
+import { ComponentChild, createContext, render, type JSX, type RefObject } from "preact";
+import Component from "../../components/component";
 
 export const ParentComponent = createContext<Component | null>(null);
 
-export default abstract class ReactBasicWidget extends BasicWidget {
-
-    abstract get component(): JSX.Element;
-
-    doRender() {        
-        this.$widget = renderReactWidget(this, this.component);
+/**
+ * Takes in a React ref and returns a corresponding JQuery selector.
+ *
+ * @param ref the React ref from which to obtain the jQuery selector.
+ * @returns the corresponding jQuery selector.
+ */
+export function refToJQuerySelector<T extends HTMLElement>(ref: RefObject<T> | null): JQuery<T> {
+    if (ref?.current) {
+        return $(ref.current);
+    } else {
+        return $();
     }
-
 }
 
 /**
  * Renders a React component and returns the corresponding DOM element wrapped in JQuery.
- * 
+ *
  * @param parentComponent the parent Trilium component for the component to be able to handle events.
  * @param el the JSX element to render.
  * @returns the rendered wrapped DOM element.
@@ -36,4 +39,16 @@ export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.E
 
 export function disposeReactWidget(container: Element) {
     render(null, container);
-}
\ No newline at end of file
+}
+
+export function joinElements(components: ComponentChild[], separator = ", ") {
+    const joinedComponents: ComponentChild[] = [];
+    for (let i=0; i<components.length; i++) {
+        joinedComponents.push(components[i]);
+        if (i + 1 < components.length) {
+            joinedComponents.push(separator);
+        }
+    }
+
+    return joinedComponents;
+}
diff --git a/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
new file mode 100644
index 000000000..d5e3332c1
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/BasicPropertiesTab.tsx
@@ -0,0 +1,381 @@
+import { useCallback, useEffect, useMemo, useState } from "preact/hooks";
+import Dropdown from "../react/Dropdown";
+import { NOTE_TYPES } from "../../services/note_types";
+import { FormDropdownDivider, FormListBadge, FormListItem } from "../react/FormList";
+import { getAvailableLocales, t } from "../../services/i18n";
+import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumOption } from "../react/hooks";
+import mime_types from "../../services/mime_types";
+import { Locale, NoteType, ToggleInParentResponse } from "@triliumnext/commons";
+import server from "../../services/server";
+import dialog from "../../services/dialog";
+import FormToggle from "../react/FormToggle";
+import FNote from "../../entities/fnote";
+import protected_session from "../../services/protected_session";
+import FormDropdownList from "../react/FormDropdownList";
+import toast from "../../services/toast";
+import branches from "../../services/branches";
+import sync from "../../services/sync";
+import HelpButton from "../react/HelpButton";
+import { TabContext } from "./ribbon-interface";
+import Modal from "../react/Modal";
+import { CodeMimeTypesList } from "../type_widgets/options/code_notes";
+import { ContentLanguagesList } from "../type_widgets/options/i18n";
+
+export default function BasicPropertiesTab({ note }: TabContext) {
+    return (
+        <div className="basic-properties-widget">        
+            <NoteTypeWidget note={note} />
+            <ProtectedNoteSwitch note={note} />
+            <EditabilitySelect note={note} />
+            <BookmarkSwitch note={note} />
+            <SharedSwitch note={note} />
+            <TemplateSwitch note={note} />
+            <NoteLanguageSwitch note={note} />
+        </div>
+    );
+}
+
+function NoteTypeWidget({ note }: { note?: FNote | null }) {
+    const noteTypes = useMemo(() => NOTE_TYPES.filter((nt) => !nt.reserved && !nt.static), []);
+    const [ codeNotesMimeTypes ] = useTriliumOption("codeNotesMimeTypes");
+    const mimeTypes = useMemo(() => {
+        mime_types.loadMimeTypes();
+        return mime_types.getMimeTypes().filter(mimeType => mimeType.enabled)
+    }, [ codeNotesMimeTypes ]);
+    const notSelectableNoteTypes = useMemo(() => NOTE_TYPES.filter((nt) => nt.reserved || nt.static).map((nt) => nt.type), []);
+    
+    const currentNoteType = useNoteProperty(note, "type") ?? undefined;
+    const currentNoteMime = useNoteProperty(note, "mime");
+    const [ modalShown, setModalShown ] = useState(false);
+
+    const changeNoteType = useCallback(async (type: NoteType, mime?: string) => {
+        if (!note || (type === currentNoteType && mime === currentNoteMime)) {
+            return;
+        }
+
+        // Confirm change if the note already has a content.
+        if (type !== currentNoteType) {
+            const blob = await note.getBlob();
+
+            if (blob?.content && blob.content.trim().length &&
+                !await (dialog.confirm(t("note_types.confirm-change")))) {
+                return;
+            }
+        }
+
+        await server.put(`notes/${note.noteId}/type`, { type, mime });
+    }, [ note, currentNoteType, currentNoteMime ]);
+
+    return (
+        <div className="note-type-container">
+            <span>{t("basic_properties.note_type")}:</span> &nbsp;
+            <Dropdown
+                dropdownContainerClassName="note-type-dropdown"
+                text={<span className="note-type-desc">{findTypeTitle(currentNoteType, currentNoteMime)}</span>}
+                disabled={notSelectableNoteTypes.includes(currentNoteType ?? "text")}
+            >
+                {noteTypes.map(({ isNew, isBeta, type, mime, title }) => {
+                    const badges: FormListBadge[] = [];
+                    if (isNew) {
+                        badges.push({
+                            className: "new-note-type-badge",
+                            text: t("note_types.new-feature")
+                        });
+                    }
+                    if (isBeta) {
+                        badges.push({
+                            text: t("note_types.beta-feature")
+                        });
+                    }
+
+                    const checked = (type === currentNoteType);
+                    if (type !== "code") {
+                        return (
+                            <FormListItem
+                                checked={checked}
+                                badges={badges}
+                                onClick={() => changeNoteType(type, mime)}
+                            >{title}</FormListItem>    
+                        );
+                    } else {
+                        return (
+                            <>
+                                <FormDropdownDivider />
+                                <FormListItem
+                                    checked={checked}
+                                    disabled                                    
+                                >
+                                    <strong>{title}</strong>
+                                </FormListItem>
+                            </>
+                        )
+                    }
+                })}
+
+                {mimeTypes.map(({ title, mime }) => (
+                    <FormListItem onClick={() => changeNoteType("code", mime)}>
+                        {title}
+                    </FormListItem>
+                ))}
+
+                <FormDropdownDivider />
+                <FormListItem icon="bx bx-cog" onClick={() => setModalShown(true)}>{t("basic_properties.configure_code_notes")}</FormListItem>
+            </Dropdown>
+
+            <Modal
+                className="code-mime-types-modal"
+                title={t("code_mime_types.title")}
+                show={modalShown} onHidden={() => setModalShown(false)}
+                size="xl" scrollable
+            >
+                <CodeMimeTypesList />
+            </Modal>
+        </div>
+    )   
+}
+
+function ProtectedNoteSwitch({ note }: { note?: FNote | null }) {
+    const isProtected = useNoteProperty(note, "isProtected");
+
+    return (
+        <div className="protected-note-switch-container">
+            <FormToggle
+                switchOnName={t("protect_note.toggle-on")} switchOnTooltip={t("protect_note.toggle-on-hint")}
+                switchOffName={t("protect_note.toggle-off")} switchOffTooltip={t("protect_note.toggle-off-hint")}
+                currentValue={!!isProtected}
+                onChange={(shouldProtect) => note && protected_session.protectNote(note.noteId, shouldProtect, false)}
+            />
+        </div>
+    )
+}
+
+function EditabilitySelect({ note }: { note?: FNote | null }) {
+    const [ readOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
+    const [ autoReadOnlyDisabled, setAutoReadOnlyDisabled ] = useNoteLabelBoolean(note, "autoReadOnlyDisabled");    
+
+    const options = useMemo(() => ([
+        {
+            value: "auto",
+            label: t("editability_select.auto"),
+            description: t("editability_select.note_is_editable"),
+        },
+        {
+            value: "readOnly",
+            label: t("editability_select.read_only"),
+            description: t("editability_select.note_is_read_only")
+        },
+        {
+            value: "autoReadOnlyDisabled",
+            label: t("editability_select.always_editable"),
+            description: t("editability_select.note_is_always_editable")
+        }
+    ]), []);
+
+    return (
+        <div class="editability-select-container">
+            <span>{t("basic_properties.editable")}:</span> &nbsp;
+
+            <FormDropdownList
+                dropdownContainerClassName="editability-dropdown"
+                values={options}
+                currentValue={ readOnly ? "readOnly" : autoReadOnlyDisabled ? "autoReadOnlyDisabled" : "auto" }
+                keyProperty="value" titleProperty="label" descriptionProperty="description"
+                onChange={(editability: string) => {
+                    setReadOnly(editability === "readOnly");
+                    setAutoReadOnlyDisabled(editability === "autoReadOnlyDisabled");
+                }}
+            />
+        </div>
+    )
+}
+
+function BookmarkSwitch({ note }: { note?: FNote | null }) {
+    const [ isBookmarked, setIsBookmarked ] = useState<boolean>(false);
+    const refreshState = useCallback(() => {
+        const isBookmarked = note && !!note.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks");
+        setIsBookmarked(!!isBookmarked);
+    }, [ note ]);
+
+    useEffect(() => refreshState(), [ note ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (note && loadResults.getBranchRows().find((b) => b.noteId === note.noteId)) {
+            refreshState();
+        }
+    });
+
+    return (
+        <div className="bookmark-switch-container">
+            <FormToggle
+                switchOnName={t("bookmark_switch.bookmark")} switchOnTooltip={t("bookmark_switch.bookmark_this_note")}
+                switchOffName={t("bookmark_switch.bookmark")} switchOffTooltip={t("bookmark_switch.remove_bookmark")}
+                currentValue={isBookmarked}                
+                onChange={async (shouldBookmark) => {
+                    if (!note) return;
+                    const resp = await server.put<ToggleInParentResponse>(`notes/${note.noteId}/toggle-in-parent/_lbBookmarks/${shouldBookmark}`);
+
+                    if (!resp.success && "message" in resp) {
+                        toast.showError(resp.message);
+                    }
+                }}
+                disabled={["root", "_hidden"].includes(note?.noteId ?? "")}
+            />
+        </div>
+    )
+}
+
+function TemplateSwitch({ note }: { note?: FNote | null }) {
+    const [ isTemplate, setIsTemplate ] = useNoteLabelBoolean(note, "template");
+
+    return (
+        <div className="template-switch-container">
+            <FormToggle
+                switchOnName={t("template_switch.template")} switchOnTooltip={t("template_switch.toggle-on-hint")}
+                switchOffName={t("template_switch.template")} switchOffTooltip={t("template_switch.toggle-off-hint")}
+                helpPage="KC1HB96bqqHX"
+                disabled={note?.noteId.startsWith("_options")}
+                currentValue={isTemplate} onChange={setIsTemplate}
+            />
+        </div>
+    )
+}
+
+function SharedSwitch({ note }: { note?: FNote | null }) {
+    const [ isShared, setIsShared ] = useState(false);
+    const refreshState = useCallback(() => {
+        setIsShared(!!note?.hasAncestor("_share"));
+    }, [ note ]);
+
+    useEffect(() => refreshState(), [ note ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (note && loadResults.getBranchRows().find((b) => b.noteId === note.noteId)) {
+            refreshState();
+        }
+    });
+
+    const switchShareState = useCallback(async (shouldShare: boolean) => {
+        if (!note) return;
+
+        if (shouldShare) {
+            await branches.cloneNoteToParentNote(note.noteId, "_share");
+        } else {
+            if (note?.getParentBranches().length === 1 && !(await dialog.confirm(t("shared_switch.shared-branch")))) {
+                return;
+            }            
+
+            const shareBranch = note?.getParentBranches().find((b) => b.parentNoteId === "_share");
+            if (!shareBranch?.branchId) return;
+            await server.remove(`branches/${shareBranch.branchId}?taskId=no-progress-reporting`);            
+        }
+
+        sync.syncNow(true);
+    }, [ note ]);
+
+    return (
+        <div className="shared-switch-container">
+            <FormToggle
+                currentValue={isShared}
+                onChange={switchShareState}
+                switchOnName={t("shared_switch.shared")} switchOnTooltip={t("shared_switch.toggle-on-title")}
+                switchOffName={t("shared_switch.shared")} switchOffTooltip={t("shared_switch.toggle-off-title")}
+                helpPage="R9pX4DGra2Vt"
+                disabled={["root", "_share", "_hidden"].includes(note?.noteId ?? "") || note?.noteId.startsWith("_options")}
+            />
+        </div>
+    )
+}
+
+function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
+    const [ languages ] = useTriliumOption("languages");
+    const DEFAULT_LOCALE = {
+        id: "",
+        name: t("note_language.not_set")
+    };
+
+    const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language");
+    const [ modalShown, setModalShown ] = useState(false);
+
+    const locales = useMemo(() => {
+        const enabledLanguages = JSON.parse(languages ?? "[]") as string[];
+        const filteredLanguages = getAvailableLocales().filter((l) => typeof l !== "object" || enabledLanguages.includes(l.id));
+        const leftToRightLanguages = filteredLanguages.filter((l) => !l.rtl);
+        const rightToLeftLanguages = filteredLanguages.filter((l) => l.rtl);
+
+        let locales: ("---" | Locale)[] = [
+            DEFAULT_LOCALE
+        ];
+
+        if (leftToRightLanguages.length > 0) {
+            locales = [
+                ...locales,
+                "---",
+                ...leftToRightLanguages
+            ];
+        }
+
+        if (rightToLeftLanguages.length > 0) {
+            locales = [
+                ...locales,
+                "---",
+                ...rightToLeftLanguages
+            ];
+        }
+
+        // This will separate the list of languages from the "Configure languages" button.
+        // If there is at least one language.
+        locales.push("---");
+        return locales;
+    }, [ languages ]);
+
+    const currentLocale = useMemo(() => {
+        return locales.find(locale => typeof locale === "object" && locale.id === currentNoteLanguage) as Locale | undefined;
+    }, [ currentNoteLanguage ]);
+
+    return (        
+        <div className="note-language-container">
+            <span>{t("basic_properties.language")}:</span>
+            &nbsp;
+            <Dropdown text={currentLocale?.name ?? DEFAULT_LOCALE.name}>
+                {locales.map(locale => {
+                    if (typeof locale === "object") {
+                        const checked = locale.id === (currentNoteLanguage ?? "");
+                        return <FormListItem
+                            rtl={locale.rtl}
+                            checked={checked}
+                            onClick={() => setCurrentNoteLanguage(locale.id)}
+                        >{locale.name}</FormListItem>
+                    } else {
+                        return <FormDropdownDivider />
+                    }
+                })}
+
+                <FormListItem
+                    onClick={() => setModalShown(true)}
+                >{t("note_language.configure-languages")}</FormListItem>           
+            </Dropdown>
+
+            <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginLeft: "4px" }} />
+
+            <Modal
+                className="content-languages-modal"
+                title={t("content_language.title")}
+                show={modalShown} onHidden={() => setModalShown(false)}
+                size="lg" scrollable
+            >
+                <ContentLanguagesList />
+            </Modal>
+        </div>
+    )
+}
+
+function findTypeTitle(type?: NoteType, mime?: string | null) {
+    if (type === "code") {
+        const mimeTypes = mime_types.getMimeTypes();
+        const found = mimeTypes.find((mt) => mt.mime === mime);
+
+        return found ? found.title : mime;
+    } else {
+        const noteType = NOTE_TYPES.find((nt) => nt.type === type);
+
+        return noteType ? noteType.title : type;
+    }
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
new file mode 100644
index 000000000..760194bf3
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
@@ -0,0 +1,149 @@
+import { useContext, useMemo } from "preact/hooks";
+import { t } from "../../services/i18n";
+import { ViewTypeOptions } from "../../services/note_list_renderer";
+import FormSelect, { FormSelectWithGroups } from "../react/FormSelect";
+import { TabContext } from "./ribbon-interface";
+import { mapToKeyValueArray } from "../../services/utils";
+import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
+import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxProperty, NumberProperty } from "./collection-properties-config";
+import Button from "../react/Button";
+import { ParentComponent } from "../react/react_utils";
+import FNote from "../../entities/fnote";
+import FormCheckbox from "../react/FormCheckbox";
+import FormTextBox from "../react/FormTextBox";
+import { ComponentChildren } from "preact";
+
+const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
+  grid: t("book_properties.grid"),
+  list: t("book_properties.list"),
+  calendar: t("book_properties.calendar"),
+  table: t("book_properties.table"),
+  geoMap: t("book_properties.geo-map"),
+  board: t("book_properties.board")
+};
+
+export default function CollectionPropertiesTab({ note }: TabContext) {
+  const [ viewType, setViewType ] = useNoteLabel(note, "viewType");
+  const viewTypeWithDefault = viewType ?? "grid";
+  const properties = bookPropertiesConfig[viewTypeWithDefault].properties;
+
+  return (
+    <div className="book-properties-widget">
+      {note && (
+        <>
+          <CollectionTypeSwitcher viewType={viewTypeWithDefault} setViewType={setViewType} />
+          <BookProperties note={note} properties={properties} />
+        </>
+      )}
+    </div>
+  );
+}
+
+function CollectionTypeSwitcher({ viewType, setViewType }: { viewType: string, setViewType: (newValue: string) => void }) {
+  const collectionTypes = useMemo(() => mapToKeyValueArray(VIEW_TYPE_MAPPINGS), []);
+
+  return (
+    <div style={{ display: "flex", alignItems: "baseline" }}>
+        <span style={{ whiteSpace: "nowrap" }}>{t("book_properties.view_type")}:&nbsp; &nbsp;</span>
+        <FormSelect
+          currentValue={viewType ?? "grid"} onChange={setViewType}
+          values={collectionTypes}
+          keyProperty="key" titleProperty="value"
+        />
+    </div>
+  )
+}
+
+function BookProperties({ note, properties }: { note: FNote, properties: BookProperty[] }) {
+  return (
+    <div className="book-properties-container">
+      {properties.map(property => (
+        <div className={`type-${property}`}>
+          {mapPropertyView({ note, property })}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function mapPropertyView({ note, property }: { note: FNote, property: BookProperty }) {
+  switch (property.type) {
+    case "button":
+      return <ButtonPropertyView note={note} property={property} />
+    case "checkbox":
+      return <CheckboxPropertyView note={note} property={property} />
+    case "number":
+      return <NumberPropertyView note={note} property={property} />
+    case "combobox":
+      return <ComboBoxPropertyView note={note} property={property} />
+  }
+}
+
+function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonProperty }) {
+  const parentComponent = useContext(ParentComponent);
+
+  return <Button
+    text={property.label}
+    title={property.title}
+    icon={property.icon}
+    onClick={() => {
+      if (!parentComponent) return;
+      property.onClick({
+        note,
+        triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
+    });
+    }}
+  />
+}
+
+function CheckboxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
+  const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
+
+  return (
+    <FormCheckbox
+      label={property.label}
+      currentValue={value} onChange={setValue}
+    />
+  )
+}
+
+function NumberPropertyView({ note, property }: { note: FNote, property: NumberProperty }) {
+    const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
+
+    return (
+        <LabelledEntry label={property.label}>
+            <FormTextBox
+                type="number"
+                currentValue={value ?? ""} onChange={setValue}
+                style={{ width: (property.width ?? 100) + "px" }}
+                min={property.min ?? 0}
+            />
+        </LabelledEntry>
+    )
+}
+
+function ComboBoxPropertyView({ note, property }: { note: FNote, property: ComboBoxProperty }) {
+    const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
+
+    return (
+        <LabelledEntry label={property.label}>
+            <FormSelectWithGroups
+                values={property.options}
+                keyProperty="value" titleProperty="label"
+                currentValue={value ?? ""} onChange={setValue}
+            />
+        </LabelledEntry>
+    )
+}
+
+function LabelledEntry({ label, children }: { label: string, children: ComponentChildren }) {
+    return (
+        <>
+            <label>
+                {label}
+                &nbsp;&nbsp;
+                {children}
+            </label>
+        </>
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/EditedNotesTab.tsx b/apps/client/src/widgets/ribbon/EditedNotesTab.tsx
new file mode 100644
index 000000000..5bab1c816
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/EditedNotesTab.tsx
@@ -0,0 +1,51 @@
+import { useEffect, useState } from "preact/hooks";
+import { TabContext } from "./ribbon-interface";
+import { EditedNotesResponse } from "@triliumnext/commons";
+import server from "../../services/server";
+import { t } from "../../services/i18n";
+import froca from "../../services/froca";
+import NoteLink from "../react/NoteLink";
+import { joinElements } from "../react/react_utils";
+
+export default function EditedNotesTab({ note }: TabContext) {
+    const [ editedNotes, setEditedNotes ] = useState<EditedNotesResponse>();
+
+    useEffect(() => {
+        if (!note) return;
+        server.get<EditedNotesResponse>(`edited-notes/${note.getLabelValue("dateNote")}`).then(async editedNotes => {
+            editedNotes = editedNotes.filter((n) => n.noteId !== note.noteId);        
+            const noteIds = editedNotes.flatMap((n) => n.noteId);            
+            await froca.getNotes(noteIds, true); // preload all at once
+            setEditedNotes(editedNotes);
+        });
+    }, [ note?.noteId ]);
+
+    return (
+        <div className="edited-notes-widget" style={{
+            padding: "12px",
+            maxHeight: "200px",
+            width: "100%",
+            overflow: "auto"
+        }}>
+            {editedNotes?.length ? (
+                <div className="edited-notes-list use-tn-links">
+                    {joinElements(editedNotes.map(editedNote => {
+                        return (
+                            <span className="edited-note-line">
+                                {editedNote.isDeleted ? (
+                                    <i>{`${editedNote.title} ${t("edited_notes.deleted")}`}</i>
+                                ) : (
+                                    <>
+                                        {editedNote.notePath ? <NoteLink notePath={editedNote.notePath} showNotePath /> : <span>{editedNote.title}</span> }
+                                    </>
+                                )}
+                            </span>
+                        )
+                    }))}
+                </div>
+            ) : (
+                <div className="no-edited-notes-found">{t("edited_notes.no_edited_notes_found")}</div>
+            )}
+        </div>
+    )    
+}
diff --git a/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
new file mode 100644
index 000000000..c65b9ab3e
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/FilePropertiesTab.tsx
@@ -0,0 +1,77 @@
+import { t } from "../../services/i18n";
+import { formatSize } from "../../services/utils";
+import { FormFileUploadButton } from "../react/FormFileUpload";
+import { useNoteBlob, useNoteLabel } from "../react/hooks";
+import Button from "../react/Button";
+import protected_session_holder from "../../services/protected_session_holder";
+import { downloadFileNote, openNoteExternally } from "../../services/open";
+import toast from "../../services/toast";
+import server from "../../services/server";
+import FNote from "../../entities/fnote";
+
+export default function FilePropertiesTab({ note }: { note?: FNote | null }) {
+    const [ originalFileName ] = useNoteLabel(note, "originalFileName");
+    const canAccessProtectedNote = !note?.isProtected || protected_session_holder.isProtectedSessionAvailable();
+    const [ blob ] = useNoteBlob(note);    
+
+    return (
+        <div className="file-properties-widget">
+            {note && (
+                <table class="file-table">
+                    <tr>
+                        <th class="text-nowrap">{t("file_properties.note_id")}:</th>
+                        <td class="file-note-id">{note.noteId}</td>
+                        <th class="text-nowrap">{t("file_properties.original_file_name")}:</th>
+                        <td class="file-filename">{originalFileName ?? "?"}</td>
+                    </tr>
+                    <tr>
+                        <th class="text-nowrap">{t("file_properties.file_type")}:</th>
+                        <td class="file-filetype">{note.mime}</td>
+                        <th class="text-nowrap">{t("file_properties.file_size")}:</th>
+                        <td class="file-filesize">{formatSize(blob?.contentLength ?? 0)}</td>
+                    </tr>
+
+                    <tr>
+                        <td colSpan={4}>
+                            <div class="file-buttons">
+                                <Button
+                                    icon="bx bx-download"
+                                    text={t("file_properties.download")}
+                                    primary
+                                    disabled={!canAccessProtectedNote}
+                                    onClick={() => downloadFileNote(note.noteId)}
+                                />
+
+                                <Button
+                                    icon="bx bx-link-external"
+                                    text={t("file_properties.open")}
+                                    disabled={note.isProtected}
+                                    onClick={() => openNoteExternally(note.noteId, note.mime)}
+                                />
+
+                                <FormFileUploadButton
+                                    icon="bx bx-folder-open"
+                                    text={t("file_properties.upload_new_revision")}
+                                    disabled={!canAccessProtectedNote}                                    
+                                    onChange={(fileToUpload) => {
+                                        if (!fileToUpload) {
+                                            return;
+                                        }
+
+                                        server.upload(`notes/${note.noteId}/file`, fileToUpload[0]).then((result) => {
+                                            if (result.uploaded) {
+                                                toast.showMessage(t("file_properties.upload_success"));
+                                            } else {
+                                                toast.showError(t("file_properties.upload_failed"));
+                                            }
+                                        });
+                                    }}
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                </table>
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/FormattingToolbar.tsx b/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
new file mode 100644
index 000000000..3282ce5af
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/FormattingToolbar.tsx
@@ -0,0 +1,24 @@
+import { useNoteContext, useTriliumOption } from "../react/hooks";
+
+/**
+ * Handles the editing toolbar when the CKEditor is in decoupled mode.
+ *
+ * This toolbar is only enabled if the user has selected the classic CKEditor.
+ *
+ * The ribbon item is active by default for text notes, as long as they are not in read-only mode.
+ * 
+ * ! The toolbar is not only used in the ribbon, but also in the quick edit feature.
+ */
+export default function FormattingToolbar({ hidden }: { hidden?: boolean }) {
+    const [ textNoteEditorType ] = useTriliumOption("textNoteEditorType");
+
+    return (textNoteEditorType === "ckeditor-classic" &&
+        <div className={`classic-toolbar-widget ${hidden ? "hidden-ext" : ""}`} />
+    )
+};
+
+export function PopupEditorFormattingToolbar() {
+    // TODO: Integrate this directly once we migrate away from class components.
+    const { note } = useNoteContext();
+    return <FormattingToolbar hidden={note?.type !== "text"} />;
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/ImagePropertiesTab.tsx b/apps/client/src/widgets/ribbon/ImagePropertiesTab.tsx
new file mode 100644
index 000000000..824040b8a
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/ImagePropertiesTab.tsx
@@ -0,0 +1,82 @@
+import { t } from "../../services/i18n";
+import { useNoteBlob, useNoteLabel } from "../react/hooks";
+import { TabContext } from "./ribbon-interface";
+import { clearBrowserCache, formatSize } from "../../services/utils";
+import Button from "../react/Button";
+import { downloadFileNote, openNoteExternally } from "../../services/open";
+import { ParentComponent } from "../react/react_utils";
+import { useContext } from "preact/hooks";
+import { FormFileUploadButton } from "../react/FormFileUpload";
+import server from "../../services/server";
+import toast from "../../services/toast";
+
+export default function ImagePropertiesTab({ note, ntxId }: TabContext) {
+    const [ originalFileName ] = useNoteLabel(note, "originalFileName");
+    const [ blob ] = useNoteBlob(note);    
+
+    const parentComponent = useContext(ParentComponent);
+
+    return (
+        <div className="image-properties">
+            {note && (
+                <>
+                    <div style={{ display: "flex", justifyContent: "space-evenly", margin: "10px" }}>
+                        <span>
+                            <strong>{t("image_properties.original_file_name")}:</strong>{" "}
+                            <span>{originalFileName ?? "?"}</span>
+                        </span>
+                
+                        <span>
+                            <strong>{t("image_properties.file_type")}:</strong>{" "}
+                            <span>{note.mime}</span>
+                        </span>
+                
+                        <span>
+                            <strong>{t("image_properties.file_size")}:</strong>{" "}
+                            <span>{formatSize(blob?.contentLength)}</span>
+                        </span>
+                    </div>
+
+                    <div style={{ display: "flex", justifyContent: "space-evenly", margin: "10px" }}>
+                        <Button
+                            text={t("image_properties.download")}
+                            icon="bx bx-download"
+                            primary
+                            onClick={() => downloadFileNote(note.noteId)}
+                        />
+
+                        <Button
+                            text={t("image_properties.open")}
+                            icon="bx bx-link-external"
+                            onClick={() => openNoteExternally(note.noteId, note.mime)}  
+                        />
+
+                        <Button
+                            text={t("image_properties.copy_reference_to_clipboard")}
+                            icon="bx bx-copy"
+                            onClick={() => parentComponent?.triggerEvent("copyImageReferenceToClipboard", { ntxId })}
+                        />
+
+                        <FormFileUploadButton
+                            text={t("image_properties.upload_new_revision")}
+                            icon="bx bx-folder-open"
+                            onChange={async (files) => {
+                                if (!files) return;
+                                const fileToUpload = files[0]; // copy to allow reset below
+
+                                const result = await server.upload(`images/${note.noteId}`, fileToUpload);
+
+                                if (result.uploaded) {
+                                    toast.showMessage(t("image_properties.upload_success"));
+                                    await clearBrowserCache();
+                                } else {
+                                    toast.showError(t("image_properties.upload_failed", { message: result.message }));
+                                }
+                            }}
+                        />
+                    </div>
+                </>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx b/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx
new file mode 100644
index 000000000..d9eb32b7f
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx
@@ -0,0 +1,86 @@
+import { useEffect, useState } from "preact/hooks";
+import { TabContext } from "./ribbon-interface";
+import FAttribute from "../../entities/fattribute";
+import { useLegacyWidget, useTriliumEvent } from "../react/hooks";
+import attributes from "../../services/attributes";
+import { t } from "../../services/i18n";
+import attribute_renderer from "../../services/attribute_renderer";
+import RawHtml from "../react/RawHtml";
+import { joinElements } from "../react/react_utils";
+import AttributeDetailWidget from "../attribute_widgets/attribute_detail";
+
+export default function InheritedAttributesTab({ note, componentId }: TabContext) {
+    const [ inheritedAttributes, setInheritedAttributes ] = useState<FAttribute[]>();
+    const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget());
+
+    function refresh() {
+        if (!note) return;
+        const attrs = note.getAttributes().filter((attr) => attr.noteId !== note.noteId);
+        attrs.sort((a, b) => {
+            if (a.noteId === b.noteId) {
+                return a.position - b.position;
+            } else {
+                // inherited attributes should stay grouped: https://github.com/zadam/trilium/issues/3761
+                return a.noteId < b.noteId ? -1 : 1;
+            }
+        });
+
+        setInheritedAttributes(attrs);
+    }
+
+    useEffect(refresh, [ note ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.getAttributeRows(componentId).find((attr) => attributes.isAffecting(attr, note))) {
+            refresh();
+        }
+    });
+    
+    return (
+        <div className="inherited-attributes-widget">
+            <div className="inherited-attributes-container">
+                {inheritedAttributes?.length ? (
+                    joinElements(inheritedAttributes.map(attribute => (
+                        <InheritedAttribute
+                            attribute={attribute}
+                            onClick={(e) => {
+                                setTimeout(
+                                    () =>
+                                        attributeDetailWidget.showAttributeDetail({
+                                            attribute: {
+                                                noteId: attribute.noteId,
+                                                type: attribute.type,
+                                                name: attribute.name,
+                                                value: attribute.value,
+                                                isInheritable: attribute.isInheritable
+                                            },
+                                            isOwned: false,
+                                            x: e.pageX,
+                                            y: e.pageY
+                                        }),
+                                    100
+                                );
+                            }}
+                        />
+                    )), " ")
+                ) : (
+                    <>{t("inherited_attribute_list.no_inherited_attributes")}</>
+                )}
+            </div>
+
+            {attributeDetailWidgetEl}
+        </div>
+    )
+}
+function InheritedAttribute({ attribute, onClick }: { attribute: FAttribute, onClick: (e: MouseEvent) => void }) {
+    const [ html, setHtml ] = useState<JQuery<HTMLElement> | string>("");
+    useEffect(() => {
+        attribute_renderer.renderAttribute(attribute, false).then(setHtml);
+    }, []);
+
+    return (
+        <RawHtml
+            html={html}
+            onClick={onClick}
+        />
+    );
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/NoteActions.tsx b/apps/client/src/widgets/ribbon/NoteActions.tsx
new file mode 100644
index 000000000..f780eab8b
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/NoteActions.tsx
@@ -0,0 +1,136 @@
+import { ConvertToAttachmentResponse } from "@triliumnext/commons";
+import appContext, { CommandNames } from "../../components/app_context";
+import FNote from "../../entities/fnote"
+import dialog from "../../services/dialog";
+import { t } from "../../services/i18n"
+import server from "../../services/server";
+import toast from "../../services/toast";
+import ws from "../../services/ws";
+import ActionButton from "../react/ActionButton"
+import Dropdown from "../react/Dropdown";
+import { FormDropdownDivider, FormListItem } from "../react/FormList";
+import { isElectron as getIsElectron, isMac as getIsMac } from "../../services/utils";
+import { ParentComponent } from "../react/react_utils";
+import { useContext } from "preact/hooks";
+import NoteContext from "../../components/note_context";
+import branches from "../../services/branches";
+
+interface NoteActionsProps {
+  note?: FNote;
+  noteContext?: NoteContext;
+}
+
+export default function NoteActions({ note, noteContext }: NoteActionsProps) {
+  return (
+    <>
+      {note && <RevisionsButton note={note} />}
+      {note && note.type !== "launcher" && <NoteContextMenu note={note as FNote} noteContext={noteContext}/>}
+    </>
+  );
+}
+
+function RevisionsButton({ note }: { note: FNote }) {
+  const isEnabled = !["launcher", "doc"].includes(note?.type ?? "");
+
+  return (isEnabled &&
+    <ActionButton
+      icon="bx bx-history"
+      text={t("revisions_button.note_revisions")}
+      triggerCommand="showRevisions"
+      titlePosition="bottom"
+    />
+  );
+}
+
+function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: NoteContext }) {
+  const parentComponent = useContext(ParentComponent);
+  const canBeConvertedToAttachment = note?.isEligibleForConversionToAttachment();
+  const isSearchable = ["text", "code", "book", "mindMap", "doc"].includes(note.type);
+  const isInOptions = note.noteId.startsWith("_options");
+  const isPrintable = ["text", "code"].includes(note.type);
+  const isElectron = getIsElectron();
+  const isMac = getIsMac();
+  const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap"].includes(note.type);
+  const isSearchOrBook = ["search", "book"].includes(note.type);  
+
+  return (
+    <Dropdown
+      buttonClassName="bx bx-dots-vertical-rounded"
+      className="note-actions"
+      hideToggleArrow
+      noSelectButtonStyle
+      iconAction
+    >
+      {canBeConvertedToAttachment && <ConvertToAttachment note={note} /> }
+      {note.type === "render" && <CommandItem command="renderActiveNote" icon="bx bx-extension" text={t("note_actions.re_render_note")} />}
+      <CommandItem command="findInText" icon="bx bx-search" disabled={!isSearchable} text={t("note_actions.search_in_note")} />
+      <CommandItem command="printActiveNote" icon="bx bx-printer" disabled={!isPrintable} text={t("note_actions.print_note")} />
+      {isElectron && <CommandItem command="exportAsPdf" icon="bx bxs-file-pdf" disabled={!isPrintable} text={t("note_actions.print_pdf")} />}
+      <FormDropdownDivider />
+
+      <CommandItem icon="bx bx-import" text={t("note_actions.import_files")}
+        disabled={isInOptions || note.type === "search"}
+        command={() => parentComponent?.triggerCommand("showImportDialog", { noteId: note.noteId })} />
+      <CommandItem icon="bx bx-export" text={t("note_actions.export_note")}
+        disabled={isInOptions || note.noteId === "_backendLog"}
+        command={() => noteContext?.notePath && parentComponent?.triggerCommand("showExportDialog", {
+          notePath: noteContext.notePath, 
+          defaultType: "single"
+        })} />
+      <FormDropdownDivider />
+
+      <CommandItem command="openNoteExternally" icon="bx bx-file-find" disabled={isSearchOrBook || !isElectron} text={t("note_actions.open_note_externally")} title={t("note_actions.open_note_externally_title")} />
+      <CommandItem command="openNoteCustom" icon="bx bx-customize" disabled={isSearchOrBook || isMac || !isElectron} text={t("note_actions.open_note_custom")} />
+      <CommandItem command="showNoteSource" icon="bx bx-code" disabled={!hasSource} text={t("note_actions.note_source")} />
+      <FormDropdownDivider />
+
+      <CommandItem command="forceSaveRevision" icon="bx bx-save" disabled={isInOptions} text={t("note_actions.save_revision")} />
+      <CommandItem icon="bx bx-trash destructive-action-icon" text={t("note_actions.delete_note")} destructive
+        disabled={isInOptions}
+        command={() => branches.deleteNotes([note.getParentBranches()[0].branchId])}
+      />
+      <FormDropdownDivider />
+
+      <CommandItem command="showAttachments" icon="bx bx-paperclip" disabled={isInOptions} text={t("note_actions.note_attachments")} />
+    </Dropdown>
+  );
+}
+
+function CommandItem({ icon, text, title, command, disabled }: { icon: string, text: string, title?: string, command: CommandNames | (() => void), disabled?: boolean, destructive?: boolean }) {
+  return <FormListItem
+    icon={icon}
+    title={title}
+    triggerCommand={typeof command === "string" ? command : undefined}
+    onClick={typeof command === "function" ? command : undefined}
+    disabled={disabled}
+  >{text}</FormListItem>
+}
+
+function ConvertToAttachment({ note }: { note: FNote }) {
+  return (
+    <FormListItem
+        icon="bx bx-paperclip"
+        onClick={async () => {
+          if (!note || !(await dialog.confirm(t("note_actions.convert_into_attachment_prompt", { title: note.title })))) {
+            return;
+          }
+
+          const { attachment: newAttachment } = await server.post<ConvertToAttachmentResponse>(`notes/${note.noteId}/convert-to-attachment`);
+
+          if (!newAttachment) {
+            toast.showMessage(t("note_actions.convert_into_attachment_failed", { title: note.title }));
+            return;
+          }
+
+          toast.showMessage(t("note_actions.convert_into_attachment_successful", { title: newAttachment.title }));
+          await ws.waitForMaxKnownEntityChangeId();
+          await appContext.tabManager.getActiveContext()?.setNote(newAttachment.ownerId, {
+              viewScope: {
+                  viewMode: "attachments",
+                  attachmentId: newAttachment.attachmentId
+              }
+          });
+        }}
+      >{t("note_actions.convert_into_attachment")}</FormListItem>
+  )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/NoteInfoTab.tsx b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
new file mode 100644
index 000000000..f2add08a4
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/NoteInfoTab.tsx
@@ -0,0 +1,93 @@
+import { useEffect, useState } from "preact/hooks";
+import { t } from "../../services/i18n";
+import { TabContext } from "./ribbon-interface";
+import { MetadataResponse, NoteSizeResponse, SubtreeSizeResponse } from "@triliumnext/commons";
+import server from "../../services/server";
+import Button from "../react/Button";
+import { formatDateTime } from "../../utils/formatters";
+import { formatSize } from "../../services/utils";
+import LoadingSpinner from "../react/LoadingSpinner";
+import { useTriliumEvent } from "../react/hooks";
+
+export default function NoteInfoTab({ note }: TabContext) {
+    const [ metadata, setMetadata ] = useState<MetadataResponse>();
+    const [ isLoading, setIsLoading ] = useState(false);
+    const [ noteSizeResponse, setNoteSizeResponse ] = useState<NoteSizeResponse>();
+    const [ subtreeSizeResponse, setSubtreeSizeResponse ] = useState<SubtreeSizeResponse>();
+
+    function refresh() {
+        if (note) {
+            server.get<MetadataResponse>(`notes/${note?.noteId}/metadata`).then(setMetadata);
+        }
+
+        setNoteSizeResponse(undefined);
+        setSubtreeSizeResponse(undefined);
+        setIsLoading(false);
+    }
+
+    useEffect(refresh, [ note?.noteId ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        const noteId = note?.noteId;
+        if (noteId && (loadResults.isNoteReloaded(noteId) || loadResults.isNoteContentReloaded(noteId))) {
+            refresh();
+        }
+    });
+
+    return (
+        <div className="note-info-widget">
+            {note && (
+                <table className="note-info-widget-table">
+                    <tbody>
+                        <tr>
+                            <th>{t("note_info_widget.note_id")}:</th>
+                            <td>{note.noteId}</td>
+                            <th>{t("note_info_widget.created")}:</th>
+                            <td>{formatDateTime(metadata?.dateCreated)}</td>
+                            <th>{t("note_info_widget.modified")}:</th>
+                            <td>{formatDateTime(metadata?.dateModified)}</td>
+                        </tr>
+
+                        <tr>
+                            <th>{t("note_info_widget.type")}:</th>
+                            <td>
+                                <span class="note-info-type">{note.type}</span>{' '}
+                                { note.mime && <span class="note-info-mime">({note.mime})</span> }
+                            </td>
+
+                            <th title={t("note_info_widget.note_size_info")}>{t("note_info_widget.note_size")}:</th>
+                            <td colSpan={3}>
+                                {!isLoading && !noteSizeResponse && !subtreeSizeResponse && (
+                                    <Button
+                                        className="calculate-button"
+                                        style={{ padding: "0px 10px 0px 10px" }}
+                                        icon="bx bx-calculator"
+                                        text={t("note_info_widget.calculate")}
+                                        onClick={() => {
+                                            setIsLoading(true);
+                                            setTimeout(async () => {                      
+                                                await Promise.allSettled([
+                                                    server.get<NoteSizeResponse>(`stats/note-size/${note.noteId}`).then(setNoteSizeResponse),
+                                                    server.get<SubtreeSizeResponse>(`stats/subtree-size/${note.noteId}`).then(setSubtreeSizeResponse)
+                                                ]);  
+                                                setIsLoading(false);
+                                            }, 0);
+                                        }}
+                                    />
+                                )}
+
+                                <span className="note-sizes-wrapper">
+                                    <span class="note-size">{formatSize(noteSizeResponse?.noteSize)}</span>
+                                    {" "}
+                                    {subtreeSizeResponse && subtreeSizeResponse.subTreeNoteCount > 1 &&
+                                        <span class="subtree-size">{t("note_info_widget.subtree_size", { size: formatSize(subtreeSizeResponse.subTreeSize), count: subtreeSizeResponse.subTreeNoteCount })}</span>
+                                    }
+                                    {isLoading && <LoadingSpinner />}
+                                </span>
+                            </td>
+                        </tr>
+                    </tbody>
+                </table>
+            )}            
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/NoteMapTab.tsx b/apps/client/src/widgets/ribbon/NoteMapTab.tsx
new file mode 100644
index 000000000..de7470141
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/NoteMapTab.tsx
@@ -0,0 +1,53 @@
+import { TabContext } from "./ribbon-interface";
+import NoteMapWidget from "../note_map";
+import { useElementSize, useLegacyWidget, useWindowSize } from "../react/hooks";
+import ActionButton from "../react/ActionButton";
+import { t } from "../../services/i18n";
+import { useEffect, useRef, useState } from "preact/hooks";
+
+const SMALL_SIZE_HEIGHT = "300px";
+
+export default function NoteMapTab({ noteContext }: TabContext) {
+    const [ isExpanded, setExpanded ] = useState(false);
+    const [ height, setHeight ] = useState(SMALL_SIZE_HEIGHT);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const { windowHeight } = useWindowSize();
+    const containerSize = useElementSize(containerRef);
+
+    const [ noteMapContainer, noteMapWidget ] = useLegacyWidget(() => new NoteMapWidget("ribbon"), {
+        noteContext,
+        containerClassName: "note-map-container"
+    });
+    
+    useEffect(() => {
+        if (isExpanded && containerRef.current && containerSize) {
+            const height = windowHeight - containerSize.top;
+            setHeight(height + "px");
+        } else {
+            setHeight(SMALL_SIZE_HEIGHT);
+        }
+    }, [ isExpanded, containerRef, windowHeight, containerSize?.top ]);
+    useEffect(() => noteMapWidget.setDimensions(), [ containerSize?.width, height ]);    
+
+    return (
+        <div className="note-map-ribbon-widget" style={{ height }} ref={containerRef}>
+            {noteMapContainer}
+
+            {!isExpanded ? (
+                <ActionButton
+                    icon="bx bx-arrow-to-bottom"
+                    text={t("note_map.open_full")}
+                    className="open-full-button"
+                    onClick={() => setExpanded(true)}
+                />
+            ) : (
+                <ActionButton
+                    icon="bx bx-arrow-to-top"
+                    text={t("note_map.collapse")}
+                    className="collapse-button"
+                    onClick={() => setExpanded(false)}
+                />
+            )}
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/NotePathsTab.tsx b/apps/client/src/widgets/ribbon/NotePathsTab.tsx
new file mode 100644
index 000000000..00249b0b4
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/NotePathsTab.tsx
@@ -0,0 +1,105 @@
+import { TabContext } from "./ribbon-interface";
+import { t } from "../../services/i18n";
+import Button from "../react/Button";
+import { useTriliumEvent } from "../react/hooks";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { NotePathRecord } from "../../entities/fnote";
+import NoteLink from "../react/NoteLink";
+import { joinElements } from "../react/react_utils";
+
+export default function NotePathsTab({ note, hoistedNoteId, notePath }: TabContext) {
+    const [ sortedNotePaths, setSortedNotePaths ] = useState<NotePathRecord[]>();
+
+    function refresh() {
+        if (!note) return;
+        setSortedNotePaths(note
+            .getSortedNotePathRecords(hoistedNoteId)
+            .filter((notePath) => !notePath.isHidden));
+    }
+
+    useEffect(refresh, [ note?.noteId ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        const noteId = note?.noteId;
+        if (!noteId) return;
+        if (loadResults.getBranchRows().find((branch) => branch.noteId === noteId)
+            || loadResults.isNoteReloaded(noteId)) {
+            refresh();
+        }
+    });
+
+    return (
+        <div class="note-paths-widget">
+            <>
+                <div className="note-path-intro">
+                    {sortedNotePaths?.length ? t("note_paths.intro_placed") : t("note_paths.intro_not_placed")}
+                </div>
+    
+                <ul className="note-path-list">
+                    {sortedNotePaths?.length ? sortedNotePaths.map(sortedNotePath => (
+                        <NotePath
+                            currentNotePath={notePath}
+                            notePathRecord={sortedNotePath}
+                        />
+                    )) : undefined}
+                </ul>
+    
+                <Button
+                    triggerCommand="cloneNoteIdsTo"
+                    text={t("note_paths.clone_button")}
+                />
+            </>
+        </div>
+    )
+}
+
+function NotePath({ currentNotePath, notePathRecord }: { currentNotePath?: string | null, notePathRecord?: NotePathRecord }) {
+    const notePath = notePathRecord?.notePath ?? [];
+    const notePathString = useMemo(() => notePath.join("/"), [ notePath ]);
+    
+    const [ classes, icons ] = useMemo(() => {
+        const classes: string[] = [];
+        const icons: { icon: string, title: string }[] = [];
+
+        if (notePathString === currentNotePath) {
+            classes.push("path-current");
+        }
+
+        if (!notePathRecord || notePathRecord.isInHoistedSubTree) {
+            classes.push("path-in-hoisted-subtree");
+        } else {
+            icons.push({ icon: "bx bx-trending-up", title: t("note_paths.outside_hoisted") })
+        }
+
+        if (notePathRecord?.isArchived) {
+            classes.push("path-archived");
+            icons.push({ icon: "bx bx-archive", title: t("note_paths.archived") })
+        }
+
+        if (notePathRecord?.isSearch) {
+            classes.push("path-search");
+            icons.push({ icon: "bx bx-search", title: t("note_paths.search") })
+        }
+
+        return [ classes.join(" "), icons ];
+    }, [ notePathString, currentNotePath, notePathRecord ]);
+
+    // Determine the full note path (for the links) of every component of the current note path.
+    const pathSegments: string[] = [];
+    const fullNotePaths: string[] = [];
+    for (const noteId of notePath) {
+        pathSegments.push(noteId);
+        fullNotePaths.push(pathSegments.join("/"));
+    }
+
+    return (
+        <li class={classes}>
+            {joinElements(fullNotePaths.map(notePath => (
+                <NoteLink notePath={notePath} noPreview />
+            )), " / ")}
+
+            {icons.map(({ icon, title }) => (
+                <span class={icon} title={title} />
+            ))}
+        </li>
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/NotePropertiesTab.tsx b/apps/client/src/widgets/ribbon/NotePropertiesTab.tsx
new file mode 100644
index 000000000..8cc0c2b85
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/NotePropertiesTab.tsx
@@ -0,0 +1,20 @@
+import { t } from "../../services/i18n";
+import { useNoteLabel } from "../react/hooks";
+import { TabContext } from "./ribbon-interface";
+
+/**
+ * TODO: figure out better name or conceptualize better.
+ */
+export default function NotePropertiesTab({ note }: TabContext) {
+    const [ pageUrl ] = useNoteLabel(note, "pageUrl");
+
+    return (
+        <div className="note-properties-widget" style={{ padding: "12px", color: "var(--muted-text-color)" }}>
+            { pageUrl && (
+                <div style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                    {t("note_properties.this_note_was_originally_taken_from")} <a href={pageUrl} class="page-url external">{pageUrl}</a>
+                </div>
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx
new file mode 100644
index 000000000..1bdb6c1c0
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/OwnedAttributesTab.tsx
@@ -0,0 +1,29 @@
+import { useMemo, useRef } from "preact/hooks";
+import { useLegacyImperativeHandlers, useTriliumEvents } from "../react/hooks";
+import AttributeEditor, { AttributeEditorImperativeHandlers } from "./components/AttributeEditor";
+import { TabContext } from "./ribbon-interface";
+
+export default function OwnedAttributesTab({ note, hidden, activate, ntxId, ...restProps }: TabContext) {
+    const api = useRef<AttributeEditorImperativeHandlers>(null);
+
+    useTriliumEvents([ "addNewLabel", "addNewRelation" ], ({ ntxId: eventNtxId }) => {
+        if (ntxId === eventNtxId) {
+            activate();
+        }
+    });
+
+    // Interaction with the attribute editor.
+    useLegacyImperativeHandlers(useMemo(() => ({
+        saveAttributesCommand: () => api.current?.save(),
+        reloadAttributesCommand: () => api.current?.refresh(),
+        updateAttributeListCommand: ({ attributes }) => api.current?.renderOwnedAttributes(attributes)
+    }), [ api ]));
+
+    return (
+        <div className="attribute-list">
+            { note && (
+                <AttributeEditor api={api} ntxId={ntxId} note={note} {...restProps} hidden={hidden} />
+            )}
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/Ribbon.tsx b/apps/client/src/widgets/ribbon/Ribbon.tsx
new file mode 100644
index 000000000..53813b1f4
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/Ribbon.tsx
@@ -0,0 +1,284 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { t } from "../../services/i18n";
+import { useNoteContext, useNoteProperty, useStaticTooltip, useTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks";
+import "./style.css";
+import { VNode } from "preact";
+import BasicPropertiesTab from "./BasicPropertiesTab";
+import FormattingToolbar from "./FormattingToolbar";
+import { numberObjectsInPlace } from "../../services/utils";
+import { TabContext } from "./ribbon-interface";
+import options from "../../services/options";
+import { EventNames } from "../../components/app_context";
+import FNote from "../../entities/fnote";
+import ScriptTab from "./ScriptTab";
+import EditedNotesTab from "./EditedNotesTab";
+import NotePropertiesTab from "./NotePropertiesTab";
+import NoteInfoTab from "./NoteInfoTab";
+import SimilarNotesTab from "./SimilarNotesTab";
+import FilePropertiesTab from "./FilePropertiesTab";
+import ImagePropertiesTab from "./ImagePropertiesTab";
+import NotePathsTab from "./NotePathsTab";
+import NoteMapTab from "./NoteMapTab";
+import OwnedAttributesTab from "./OwnedAttributesTab";
+import InheritedAttributesTab from "./InheritedAttributesTab";
+import CollectionPropertiesTab from "./CollectionPropertiesTab";
+import SearchDefinitionTab from "./SearchDefinitionTab";
+import NoteActions from "./NoteActions";
+import keyboard_actions from "../../services/keyboard_actions";
+import { KeyboardActionNames } from "@triliumnext/commons";
+
+interface TitleContext {
+    note: FNote | null | undefined;
+}
+
+interface TabConfiguration {
+    title: string | ((context: TitleContext) => string);
+    icon: string;
+    content: (context: TabContext) => VNode | false;
+    show: boolean | ((context: TitleContext) => boolean | null | undefined);
+    toggleCommand?: KeyboardActionNames;
+    activate?: boolean | ((context: TitleContext) => boolean);
+    /**
+     * By default the tab content will not be rendered unless the tab is active (i.e. selected by the user). Setting to `true` will ensure that the tab is rendered even when inactive, for cases where the tab needs to be accessible at all times (e.g. for the detached editor toolbar) or if event handling is needed.
+     */
+    stayInDom?: boolean;
+}
+
+const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>([
+    {
+        title: t("classic_editor_toolbar.title"),
+        icon: "bx bx-text",
+        show: ({ note }) => note?.type === "text" && options.get("textNoteEditorType") === "ckeditor-classic",
+        toggleCommand: "toggleRibbonTabClassicEditor",
+        content: FormattingToolbar,
+        stayInDom: true
+    },
+    {        
+        title: ({ note }) => note?.isTriliumSqlite() ? t("script_executor.query") : t("script_executor.script"),
+        icon: "bx bx-play",
+        content: ScriptTab,
+        activate: true,
+        show: ({ note }) => note &&
+            (note.isTriliumScript() || note.isTriliumSqlite()) &&
+            (note.hasLabel("executeDescription") || note.hasLabel("executeButton"))
+    },
+    {
+        title: t("search_definition.search_parameters"),
+        icon: "bx bx-search",
+        content: SearchDefinitionTab,
+        activate: true,
+        show: ({ note }) => note?.type === "search"
+    },
+    {
+        title: t("edited_notes.title"),
+        icon: "bx bx-calendar-edit",
+        content: EditedNotesTab,
+        show: ({ note }) => note?.hasOwnedLabel("dateNote"),
+        activate: ({ note }) => (note?.getPromotedDefinitionAttributes().length === 0 || !options.is("promotedAttributesOpenInRibbon")) && options.is("editedNotesOpenInRibbon")
+    },
+    {
+        title: t("book_properties.book_properties"),
+        icon: "bx bx-book",
+        content: CollectionPropertiesTab,
+        show: ({ note }) => note?.type === "book",
+        toggleCommand: "toggleRibbonTabBookProperties"
+    },
+    {
+        title: t("note_properties.info"),
+        icon: "bx bx-info-square",
+        content: NotePropertiesTab,
+        show: ({ note }) => !!note?.getLabelValue("pageUrl"),
+        activate: true
+    },
+    {
+        title: t("file_properties.title"),
+        icon: "bx bx-file",
+        content: FilePropertiesTab,
+        show: ({ note }) => note?.type === "file",
+        toggleCommand: "toggleRibbonTabFileProperties",
+        activate: true
+    },
+    {
+        title: t("image_properties.title"),
+        icon: "bx bx-image",
+        content: ImagePropertiesTab,
+        show: ({ note }) => note?.type === "image",
+        toggleCommand: "toggleRibbonTabImageProperties",
+        activate: true,
+    },
+    {
+        // BasicProperties
+        title: t("basic_properties.basic_properties"),
+        icon: "bx bx-slider",
+        content: BasicPropertiesTab,
+        show: ({note}) => !note?.isLaunchBarConfig(),
+        toggleCommand: "toggleRibbonTabBasicProperties"
+    },
+    {
+        title: t("owned_attribute_list.owned_attributes"),
+        icon: "bx bx-list-check",
+        content: OwnedAttributesTab,
+        show: ({note}) => !note?.isLaunchBarConfig(),
+        toggleCommand: "toggleRibbonTabOwnedAttributes",
+        stayInDom: true
+    },
+    {
+        title: t("inherited_attribute_list.title"),
+        icon: "bx bx-list-plus",
+        content: InheritedAttributesTab,
+        show: ({note}) => !note?.isLaunchBarConfig(),
+        toggleCommand: "toggleRibbonTabInheritedAttributes"
+    },
+    {
+        title: t("note_paths.title"),
+        icon: "bx bx-collection",
+        content: NotePathsTab,
+        show: true,
+        toggleCommand: "toggleRibbonTabNotePaths"
+    },
+    {
+        title: t("note_map.title"),
+        icon: "bx bxs-network-chart",
+        content: NoteMapTab,
+        show: true,
+        toggleCommand: "toggleRibbonTabNoteMap"
+    },
+    {
+        title: t("similar_notes.title"),
+        icon: "bx bx-bar-chart",
+        show: ({ note }) => note?.type !== "search" && !note?.isLabelTruthy("similarNotesWidgetDisabled"),
+        content: SimilarNotesTab,
+        toggleCommand: "toggleRibbonTabSimilarNotes"
+    },
+    {
+        title: t("note_info_widget.title"),
+        icon: "bx bx-info-circle",
+        show: ({ note }) => !!note,
+        content: NoteInfoTab,
+        toggleCommand: "toggleRibbonTabNoteInfo"
+    }
+]);
+
+export default function Ribbon() {
+    const { note, ntxId, hoistedNoteId, notePath, noteContext, componentId } = useNoteContext();
+    const noteType = useNoteProperty(note, "type");
+    const titleContext: TitleContext = { note };
+    const [ activeTabIndex, setActiveTabIndex ] = useState<number | undefined>();
+    const filteredTabs = useMemo(
+        () => TAB_CONFIGURATION.filter(tab => typeof tab.show === "boolean" ? tab.show : tab.show?.(titleContext)),
+        [ titleContext, note, noteType ]);
+
+    // 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 ]);
+
+    // Register keyboard shortcuts.
+    const eventsToListenTo = useMemo(() => TAB_CONFIGURATION.filter(config => config.toggleCommand).map(config => config.toggleCommand) as EventNames[], []);
+    useTriliumEvents(eventsToListenTo, useCallback((e, toggleCommand) => {
+        const correspondingTab = filteredTabs.find(tab => tab.toggleCommand === toggleCommand);
+        if (correspondingTab) {
+            if (activeTabIndex !== correspondingTab.index) {
+                setActiveTabIndex(correspondingTab.index);
+            } else {
+                setActiveTabIndex(undefined);
+            }
+        }
+    }, [ filteredTabs, activeTabIndex ]));
+
+    return (
+        <div className="ribbon-container" style={{ contain: "none" }}>
+            {noteContext?.viewScope?.viewMode === "default" && (
+                <>
+                    <div className="ribbon-top-row">
+                        <div className="ribbon-tab-container">
+                            {filteredTabs.map(({ title, icon, index, toggleCommand }) => (
+                                <RibbonTab
+                                    icon={icon}
+                                    title={typeof title === "string" ? title : title(titleContext)}
+                                    active={index === activeTabIndex}
+                                    toggleCommand={toggleCommand}
+                                    onClick={() => {
+                                        if (activeTabIndex !== index) {
+                                            setActiveTabIndex(index);
+                                        } else {
+                                            // Collapse
+                                            setActiveTabIndex(undefined);
+                                        }
+                                    }}
+                                />
+                            ))}
+                        </div>
+                        <div className="ribbon-button-container">
+                            { note && <NoteActions note={note} noteContext={noteContext} /> }
+                        </div>
+                    </div>
+                
+                    <div className="ribbon-body-container">                        
+                        {filteredTabs.map(tab => {
+                            const isActive = tab.index === activeTabIndex;
+                            if (!isActive && !tab.stayInDom) {
+                                return;
+                            }
+
+                            const TabContent = tab.content;
+
+                            return (
+                                <div className={`ribbon-body ${!isActive ? "hidden-ext" : ""}`}>
+                                    <TabContent
+                                        note={note}
+                                        hidden={!isActive}
+                                        ntxId={ntxId}
+                                        hoistedNoteId={hoistedNoteId}
+                                        notePath={notePath}
+                                        noteContext={noteContext}
+                                        componentId={componentId}
+                                        activate={useCallback(() => {
+                                            setActiveTabIndex(tab.index)
+                                        }, [setActiveTabIndex])}
+                                    />
+                                </div>
+                            );
+                        })}
+                    </div>
+                </>
+            )}
+        </div>
+    )
+}
+
+function RibbonTab({ icon, title, active, onClick, toggleCommand }: { icon: string; title: string; active: boolean, onClick: () => void, toggleCommand?: KeyboardActionNames }) {
+    const iconRef = useRef<HTMLDivElement>(null);
+    const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
+    useStaticTooltip(iconRef, {
+        title: keyboardShortcut?.length ? `${title} (${keyboardShortcut?.join(",")})` : title
+    });
+
+    useEffect(() => {
+        if (toggleCommand) {
+            keyboard_actions.getAction(toggleCommand).then(action => setKeyboardShortcut(action?.effectiveShortcuts));
+        }
+    }, [toggleCommand]);
+
+    return (
+        <>
+            <div
+                className={`ribbon-tab-title ${active ? "active" : ""}`}
+                onClick={onClick}
+            >
+                <span
+                    ref={iconRef}
+                    className={`ribbon-tab-title-icon ${icon}`}
+                />
+                &nbsp;
+                { active && <span class="ribbon-tab-title-label">{title}</span> }
+            </div>
+
+            <div class="ribbon-tab-spacer" />
+        </>
+    )
+}
+
diff --git a/apps/client/src/widgets/ribbon/ScriptTab.tsx b/apps/client/src/widgets/ribbon/ScriptTab.tsx
new file mode 100644
index 000000000..81ac3a3ef
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/ScriptTab.tsx
@@ -0,0 +1,28 @@
+import { t } from "../../services/i18n";
+import Button from "../react/Button";
+import { useNoteLabel } from "../react/hooks";
+import { TabContext } from "./ribbon-interface";
+
+export default function ScriptTab({ note }: TabContext) {
+    const [ executeDescription ] = useNoteLabel(note, "executeDescription");
+    const executeTitle = useNoteLabel(note, "executeTitle")[0] ||
+        (note?.isTriliumSqlite() ? t("script_executor.execute_query") : t("script_executor.execute_script"));
+
+    return (
+        <div class="script-runner-widget">
+            {executeDescription && (
+                <div class="execute-description">
+                    {executeDescription}
+                </div>
+            )}
+
+            <div style={{ display: "flex", justifyContent: "space-around"}}>
+                <Button
+                    triggerCommand="runActiveNote"
+                    className="execute-button"
+                    text={executeTitle}
+                />
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
new file mode 100644
index 000000000..6f98c63e1
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionOptions.tsx
@@ -0,0 +1,360 @@
+import FormTextArea from "../react/FormTextArea";
+import NoteAutocomplete from "../react/NoteAutocomplete";
+import FormSelect from "../react/FormSelect";
+import Icon from "../react/Icon";
+import FormTextBox from "../react/FormTextBox";
+import { ComponentChildren, VNode } from "preact";
+import FNote from "../../entities/fnote";
+import { removeOwnedAttributesByNameOrType } from "../../services/attributes";
+import { AttributeType } from "@triliumnext/commons";
+import { useNoteLabel, useNoteRelation, useSpacedUpdate, useTooltip } from "../react/hooks";
+import { t } from "../../services/i18n";
+import { useEffect, useMemo, useRef } from "preact/hooks";
+import appContext from "../../components/app_context";
+import server from "../../services/server";
+import HelpRemoveButtons from "../react/HelpRemoveButtons";
+
+export interface SearchOption {
+  attributeName: string;
+  attributeType: "label" | "relation";
+  icon: string;
+  label: string;
+  tooltip?: string;
+  component: (props: SearchOptionProps) => VNode;
+  defaultValue?: string;
+  additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
+}
+
+interface SearchOptionProps {
+  note: FNote;
+  refreshResults: () => void;
+  attributeName: string;
+  attributeType: "label" | "relation";
+  additionalAttributesToDelete?: { type: "label" | "relation", name: string }[];
+  defaultValue?: string;
+  error?: { message: string };
+}
+
+export const SEARCH_OPTIONS: SearchOption[] = [
+  {
+    attributeName: "searchString",
+    attributeType: "label",
+    icon: "bx bx-text",
+    label: t("search_definition.search_string"),
+    component: SearchStringOption
+  },
+  {
+    attributeName: "searchScript",
+    attributeType: "relation",
+    defaultValue: "root",
+    icon: "bx bx-code",
+    label: t("search_definition.search_script"),
+    component: SearchScriptOption
+  },
+  {
+    attributeName: "ancestor",
+    attributeType: "relation",
+    defaultValue: "root",
+    icon: "bx bx-filter-alt",
+    label: t("search_definition.ancestor"),
+    component: AncestorOption,    
+    additionalAttributesToDelete: [ { type: "label", name: "ancestorDepth" } ]
+  },
+  {
+    attributeName: "fastSearch",
+    attributeType: "label",
+    icon: "bx bx-run",
+    label: t("search_definition.fast_search"),
+    tooltip: t("search_definition.fast_search_description"),
+    component: FastSearchOption
+  },
+  {
+    attributeName: "includeArchivedNotes",
+    attributeType: "label",
+    icon: "bx bx-archive",
+    label: t("search_definition.include_archived"),
+    tooltip: t("search_definition.include_archived_notes_description"),
+    component: IncludeArchivedNotesOption
+  },
+  {
+    attributeName: "orderBy",
+    attributeType: "label",
+    defaultValue: "relevancy",
+    icon: "bx bx-arrow-from-top",
+    label: t("search_definition.order_by"),
+    component: OrderByOption,
+    additionalAttributesToDelete: [ { type: "label", name: "orderDirection" } ]
+  },
+  {
+    attributeName: "limit",
+    attributeType: "label",
+    defaultValue: "10",
+    icon: "bx bx-stop",
+    label: t("search_definition.limit"),
+    tooltip: t("search_definition.limit_description"),
+    component: LimitOption
+  },
+  {
+    attributeName: "debug",
+    attributeType: "label",
+    icon: "bx bx-bug",
+    label: t("search_definition.debug"),
+    tooltip: t("search_definition.debug_description"),
+    component: DebugOption
+  }
+];
+
+function SearchOption({ note, title, titleIcon, children, help, attributeName, attributeType, additionalAttributesToDelete }: {
+  note: FNote;
+  title: string,
+  titleIcon?: string,
+  children?: ComponentChildren,
+  help?: ComponentChildren,
+  attributeName: string,
+  attributeType: AttributeType,
+  additionalAttributesToDelete?: { type: "label" | "relation", name: string }[]
+}) {
+  return (
+    <tr>
+      <td className="title-column">
+        {titleIcon && <><Icon icon={titleIcon} />{" "}</>}
+        {title}
+      </td>
+      <td>{children}</td>
+      <HelpRemoveButtons
+        help={help}
+        removeText={t("abstract_search_option.remove_this_search_option")}
+        onRemove={() => {
+          removeOwnedAttributesByNameOrType(note, attributeType, attributeName);
+          if (additionalAttributesToDelete) {
+            for (const { type, name } of additionalAttributesToDelete) {
+              removeOwnedAttributesByNameOrType(note, type, name);
+            }
+          }
+        }}
+      />
+    </tr>
+  )
+}
+
+function SearchStringOption({ note, refreshResults, error, ...restProps }: SearchOptionProps) {
+  const [ searchString, setSearchString ] = useNoteLabel(note, "searchString");
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const currentValue = useRef(searchString ?? "");
+  const spacedUpdate = useSpacedUpdate(async () => {
+    const searchString = currentValue.current;
+    appContext.lastSearchString = searchString;
+    setSearchString(searchString);
+
+    if (note.title.startsWith(t("search_string.search_prefix"))) {
+      await server.put(`notes/${note.noteId}/title`, {
+        title: `${t("search_string.search_prefix")} ${searchString.length < 30 ? searchString : `${searchString.substr(0, 30)}…`}`
+      });
+    }
+  }, 1000);
+
+  // React to errors
+  const { showTooltip, hideTooltip } = useTooltip(inputRef, {
+    trigger: "manual",
+    title: `${t("search_string.error", { error: error?.message })}`,
+    html: true,
+    placement: "bottom"
+  });
+
+  // Auto-focus.
+  useEffect(() => inputRef.current?.focus(), []);
+
+  useEffect(() => {
+    if (error) {
+      showTooltip();
+      setTimeout(() => hideTooltip(), 4000);
+    } else {
+      hideTooltip();
+    }
+  }, [ error ]);
+
+  return <SearchOption    
+    title={t("search_string.title_column")}
+    help={<>
+      <strong>{t("search_string.search_syntax")}</strong> - {t("search_string.also_see")} <a href="#" data-help-page="search.html">{t("search_string.complete_help")}</a>
+      <ul style="marigin-bottom: 0;">
+          <li>{t("search_string.full_text_search")}</li>
+          <li><code>#abc</code> - {t("search_string.label_abc")}</li>
+          <li><code>#year = 2019</code> - {t("search_string.label_year")}</li>
+          <li><code>#rock #pop</code> - {t("search_string.label_rock_pop")}</li>
+          <li><code>#rock or #pop</code> - {t("search_string.label_rock_or_pop")}</li>
+          <li><code>#year &lt;= 2000</code> - {t("search_string.label_year_comparison")}</li>
+          <li><code>note.dateCreated &gt;= MONTH-1</code> - {t("search_string.label_date_created")}</li>
+      </ul>
+    </>}
+    note={note} {...restProps}
+  >
+    <FormTextArea
+      inputRef={inputRef}
+      className="search-string"
+      placeholder={t("search_string.placeholder")}
+      currentValue={searchString ?? ""}
+      onChange={text => {
+        currentValue.current = text;
+        spacedUpdate.scheduleUpdate();
+      }}
+      onKeyDown={async (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+
+          // this also in effect disallows new lines in query string.
+          // on one hand, this makes sense since search string is a label
+          // on the other hand, it could be nice for structuring long search string. It's probably a niche case though.
+          await spacedUpdate.updateNowIfNecessary();
+          refreshResults();
+        }
+      }}
+    />
+  </SearchOption>
+}
+
+function SearchScriptOption({ note, ...restProps }: SearchOptionProps) {
+  const [ searchScript, setSearchScript ] = useNoteRelation(note, "searchScript");
+
+  return <SearchOption
+    title={t("search_script.title")}
+    help={<>
+      <p>{t("search_script.description1")}</p>
+      <p>{t("search_script.description2")}</p>
+      <p>{t("search_script.example_title")}</p>
+      <pre>{t("search_script.example_code")}</pre>
+      {t("search_script.note")}
+    </>}
+    note={note} {...restProps}
+  >
+    <NoteAutocomplete
+      noteId={searchScript !== "root" ? searchScript ?? undefined : undefined}
+      noteIdChanged={noteId => setSearchScript(noteId ?? "root")}
+      placeholder={t("search_script.placeholder")}
+    />
+  </SearchOption>
+}
+
+function AncestorOption({ note, ...restProps}: SearchOptionProps) {
+  const [ ancestor, setAncestor ] = useNoteRelation(note, "ancestor");
+  const [ depth, setDepth ] = useNoteLabel(note, "ancestorDepth");
+
+  const options = useMemo(() => {
+    const options: { value: string | undefined; label: string }[] = [
+      { value: "", label: t("ancestor.depth_doesnt_matter") },
+      { value: "eq1", label: `${t("ancestor.depth_eq", { count: 1 })} (${t("ancestor.direct_children")})` }
+    ];    
+
+    for (let i=2; i<=9; i++) options.push({ value: "eq" + i, label: t("ancestor.depth_eq", { count: i }) });
+    for (let i=0; i<=9; i++) options.push({ value: "gt" + i, label: t("ancestor.depth_gt", { count: i }) });
+    for (let i=2; i<=9; i++) options.push({ value: "lt" + i, label: t("ancestor.depth_lt", { count: i }) });
+
+    return options;
+  }, []);
+
+  return <SearchOption
+    title={t("ancestor.label")}    
+    note={note} {...restProps}
+  >
+    <div style={{display: "flex", alignItems: "center"}}>
+      <NoteAutocomplete
+        noteId={ancestor !== "root" ? ancestor ?? undefined : undefined}
+        noteIdChanged={noteId => setAncestor(noteId ?? "root")}
+        placeholder={t("ancestor.placeholder")}
+      />
+
+      <div style="margin-left: 10px; margin-right: 10px">{t("ancestor.depth_label")}:</div>
+      <FormSelect
+        values={options}
+        keyProperty="value" titleProperty="label"
+        currentValue={depth ?? ""} onChange={(value) => setDepth(value ? value : null)}
+        style={{ flexShrink: 3 }}
+      />
+    </div>
+  </SearchOption>;
+}
+
+function FastSearchOption({ ...restProps }: SearchOptionProps) {
+  return <SearchOption
+    titleIcon="bx bx-run" title={t("fast_search.fast_search")}
+    help={t("fast_search.description")}
+    {...restProps}
+  />
+}
+
+function DebugOption({ ...restProps }: SearchOptionProps) {
+  return <SearchOption
+    titleIcon="bx bx-bug" title={t("debug.debug")}
+    help={<>
+      <p>{t("debug.debug_info")}</p>
+      {t("debug.access_info")}
+    </>}
+    {...restProps}
+  />
+}
+
+function IncludeArchivedNotesOption({ ...restProps }: SearchOptionProps) {
+  return <SearchOption
+    titleIcon="bx bx-archive" title={t("include_archived_notes.include_archived_notes")}
+    {...restProps}
+  />
+}
+
+function OrderByOption({ note, ...restProps }: SearchOptionProps) {
+  const [ orderBy, setOrderBy ] = useNoteLabel(note, "orderBy");
+  const [ orderDirection, setOrderDirection ] = useNoteLabel(note, "orderDirection");
+
+  return <SearchOption
+    titleIcon="bx bx-arrow-from-top"
+    title={t("order_by.order_by")}
+    note={note} {...restProps}
+  >
+    <FormSelect
+      className="w-auto d-inline"
+      currentValue={orderBy ?? "relevancy"} onChange={setOrderBy}
+      keyProperty="value" titleProperty="title"
+      values={[
+        { value: "relevancy", title: t("order_by.relevancy") },
+        { value: "title", title: t("order_by.title") },
+        { value: "dateCreated", title: t("order_by.date_created") },
+        { value: "dateModified", title: t("order_by.date_modified") },
+        { value: "contentSize", title: t("order_by.content_size") },
+        { value: "contentAndAttachmentsSize", title: t("order_by.content_and_attachments_size") },
+        { value: "contentAndAttachmentsAndRevisionsSize", title: t("order_by.content_and_attachments_and_revisions_size") },
+        { value: "revisionCount", title: t("order_by.revision_count") },
+        { value: "childrenCount", title: t("order_by.children_count") },
+        { value: "parentCount", title: t("order_by.parent_count") },
+        { value: "ownedLabelCount", title: t("order_by.owned_label_count") },
+        { value: "ownedRelationCount", title: t("order_by.owned_relation_count") },
+        { value: "targetRelationCount", title: t("order_by.target_relation_count") },
+        { value: "random", title: t("order_by.random") }
+      ]}
+    />
+    {" "}
+    <FormSelect
+      className="w-auto d-inline"
+      currentValue={orderDirection ?? "asc"} onChange={setOrderDirection}
+      keyProperty="value" titleProperty="title"
+      values={[
+        { value: "asc", title: t("order_by.asc") },
+        { value: "desc", title: t("order_by.desc") }
+      ]}
+    />
+  </SearchOption>
+}
+
+function LimitOption({ note, defaultValue, ...restProps }: SearchOptionProps) {
+  const [ limit, setLimit ] = useNoteLabel(note, "limit");
+
+  return <SearchOption
+    titleIcon="bx bx-stop"
+    title={t("limit.limit")}
+    help={t("limit.take_first_x_results")}
+    note={note} {...restProps}
+  >
+    <FormTextBox
+      type="number" min="1" step="1"
+      currentValue={limit ?? defaultValue} onChange={setLimit}
+    />
+  </SearchOption>
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
new file mode 100644
index 000000000..4681151fd
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/SearchDefinitionTab.tsx
@@ -0,0 +1,204 @@
+import { t } from "../../services/i18n";
+import Button from "../react/Button";
+import { TabContext } from "./ribbon-interface";
+import { SaveSearchNoteResponse } from "@triliumnext/commons";
+import attributes from "../../services/attributes";
+import FNote from "../../entities/fnote";
+import toast from "../../services/toast";
+import froca from "../../services/froca";
+import { useContext, useEffect, useState } from "preact/hooks";
+import { ParentComponent } from "../react/react_utils";
+import { useTriliumEvent } from "../react/hooks";
+import appContext from "../../components/app_context";
+import server from "../../services/server";
+import ws from "../../services/ws";
+import tree from "../../services/tree";
+import { SEARCH_OPTIONS, SearchOption } from "./SearchDefinitionOptions";
+import Dropdown from "../react/Dropdown";
+import Icon from "../react/Icon";
+import bulk_action, { ACTION_GROUPS } from "../../services/bulk_action";
+import { FormListHeader, FormListItem } from "../react/FormList";
+import RenameNoteBulkAction from "../bulk_actions/note/rename_note";
+import { getErrorMessage } from "../../services/utils";
+
+export default function SearchDefinitionTab({ note, ntxId }: TabContext) {
+  const parentComponent = useContext(ParentComponent);
+  const [ searchOptions, setSearchOptions ] = useState<{ availableOptions: SearchOption[], activeOptions: SearchOption[] }>();
+  const [ error, setError ] = useState<{ message: string }>();
+
+  function refreshOptions() {
+    if (!note) return;
+
+    const availableOptions: SearchOption[] = [];
+    const activeOptions: SearchOption[] = [];
+
+    for (const searchOption of SEARCH_OPTIONS) {
+      const attr = note.getAttribute(searchOption.attributeType, searchOption.attributeName);      
+      if (attr) {
+        activeOptions.push(searchOption);
+      } else {
+        availableOptions.push(searchOption);
+      }
+    }
+
+    setSearchOptions({ availableOptions, activeOptions });
+  }
+
+  async function refreshResults() {
+    const noteId = note?.noteId;
+    if (!noteId) {
+        return;
+    }
+
+    try {
+        const result = await froca.loadSearchNote(noteId);
+        if (result?.error) {
+          setError({ message: result?.error})
+        } else {
+          setError(undefined);
+        }
+    } catch (e: unknown) {
+      toast.showError(getErrorMessage(e));
+    }
+
+    parentComponent?.triggerEvent("searchRefreshed", { ntxId });
+  }
+
+  // Refresh the list of available and active options.
+  useEffect(refreshOptions, [ note ]);
+  useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+    if (loadResults.getAttributeRows().find((attrRow) => attributes.isAffecting(attrRow, note))) {
+      refreshOptions();
+    }
+  });
+
+  return (
+    <div className="search-definition-widget">
+      <div className="search-settings">
+        {note && 
+          <table className="search-setting-table">
+            <tr>
+              <td className="title-column">{t("search_definition.add_search_option")}</td>
+              <td colSpan={2} className="add-search-option">
+                {searchOptions?.availableOptions.map(({ icon, label, tooltip, attributeName, attributeType, defaultValue }) => (
+                  <Button
+                    size="small"
+                    icon={icon}
+                    text={label}
+                    title={tooltip}
+                    onClick={() => attributes.setAttribute(note, attributeType, attributeName, defaultValue ?? "")}
+                  />
+                ))}
+
+                <AddBulkActionButton note={note} />
+              </td>
+            </tr>
+            <tbody className="search-options">
+              {searchOptions?.activeOptions.map(({ attributeType, attributeName, component, additionalAttributesToDelete, defaultValue }) => {
+                const Component = component;
+                return <Component
+                  attributeName={attributeName}
+                  attributeType={attributeType}
+                  note={note}
+                  refreshResults={refreshResults}
+                  error={error}
+                  additionalAttributesToDelete={additionalAttributesToDelete}
+                  defaultValue={defaultValue}
+                />;
+              })}
+            </tbody>
+            <BulkActionsList note={note} />
+            <tbody>
+              <tr>
+                <td colSpan={3}>
+                  <div style={{ display: "flex", justifyContent: "space-evenly" }}>
+                    <Button
+                      icon="bx bx-search"
+                      text={t("search_definition.search_button")}
+                      keyboardShortcut="Enter"
+                      onClick={refreshResults}
+                    />
+
+                    <Button
+                      icon="bx bxs-zap"
+                      text={t("search_definition.search_execute")}
+                      onClick={async () => {
+                        await server.post(`search-and-execute-note/${note.noteId}`);
+                        refreshResults();
+                        toast.showMessage(t("search_definition.actions_executed"), 3000);                        
+                      }}
+                    />
+
+                    {note.isHiddenCompletely() && <Button
+                      icon="bx bx-save"
+                      text={t("search_definition.save_to_note")}
+                      onClick={async () => {
+                        const { notePath } = await server.post<SaveSearchNoteResponse>("special-notes/save-search-note", { searchNoteId: note.noteId });
+                        if (!notePath) {
+                          return;
+                        }
+
+                        await ws.waitForMaxKnownEntityChangeId();
+                        await appContext.tabManager.getActiveContext()?.setNote(notePath);
+
+                        // Note the {{- notePathTitle}} in json file is not typo, it's unescaping
+                        // See https://www.i18next.com/translation-function/interpolation#unescape
+                        toast.showMessage(t("search_definition.search_note_saved", { notePathTitle: await tree.getNotePathTitle(notePath) }));
+                      }}
+                    />}
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        }
+      </div>
+    </div>
+  )
+}
+
+function BulkActionsList({ note }: { note: FNote }) {
+  const [ bulkActions, setBulkActions ] = useState<RenameNoteBulkAction[]>();
+
+  function refreshBulkActions() {
+    if (note) {
+      setBulkActions(bulk_action.parseActions(note));
+    }
+  }
+
+  // React to changes.
+  useEffect(refreshBulkActions, [ note ]);
+  useTriliumEvent("entitiesReloaded", ({loadResults}) => {
+    if (loadResults.getAttributeRows().find(attr => attr.type === "label" && attr.name === "action" && attributes.isAffecting(attr, note))) {
+      refreshBulkActions();
+    }
+  });
+
+  return (
+    <tbody className="action-options">
+      {bulkActions?.map(bulkAction => (
+        bulkAction.doRender()
+      ))}
+    </tbody>
+  )
+}
+
+function AddBulkActionButton({ note }: { note: FNote }) {
+  return (
+    <Dropdown
+      buttonClassName="action-add-toggle btn-sm"
+      text={<><Icon icon="bx bxs-zap" />{" "}{t("search_definition.action")}</>}
+      noSelectButtonStyle
+    >
+        {ACTION_GROUPS.map(({ actions, title }) => (
+          <>
+            <FormListHeader text={title} />
+
+            {actions.map(({ actionName, actionTitle }) => (
+              <FormListItem onClick={() => bulk_action.addAction(note.noteId, actionName)}>{actionTitle}</FormListItem>
+            ))}          
+          </>
+        ))}
+    </Dropdown>
+  )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon/SimilarNotesTab.tsx b/apps/client/src/widgets/ribbon/SimilarNotesTab.tsx
new file mode 100644
index 000000000..57299c92c
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/SimilarNotesTab.tsx
@@ -0,0 +1,46 @@
+import { useEffect, useState } from "preact/hooks";
+import { TabContext } from "./ribbon-interface";
+import { SimilarNoteResponse } from "@triliumnext/commons";
+import server from "../../services/server";
+import { t } from "../../services/i18n";
+import froca from "../../services/froca";
+import NoteLink from "../react/NoteLink";
+
+export default function SimilarNotesTab({ note }: TabContext) {
+    const [ similarNotes, setSimilarNotes ] = useState<SimilarNoteResponse>();
+
+    useEffect(() => {
+        if (note) {
+            server.get<SimilarNoteResponse>(`similar-notes/${note.noteId}`).then(async similarNotes => {
+                if (similarNotes) {
+                    const noteIds = similarNotes.flatMap((note) => note.notePath);
+                    await froca.getNotes(noteIds, true); // preload all at once
+                }
+                setSimilarNotes(similarNotes);
+            });    
+        }
+
+    }, [ note?.noteId ]);
+
+    return (
+        <div className="similar-notes-widget">
+            <div className="similar-notes-wrapper">
+                {similarNotes?.length ? (
+                    <div>
+                        {similarNotes.map(({notePath, score}) => (
+                            <NoteLink
+                                notePath={notePath}
+                                noTnLink
+                                style={{
+                                    "font-size": 24 * (1 - 1 / (1 + score))
+                                }}
+                            />
+                        ))}
+                    </div>
+                ) : (
+                    <>{t("similar_notes.no_similar_notes_found")}</>
+                )}
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts b/apps/client/src/widgets/ribbon/collection-properties-config.ts
similarity index 92%
rename from apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
rename to apps/client/src/widgets/ribbon/collection-properties-config.ts
index 09acb6e99..fe54c25f5 100644
--- a/apps/client/src/widgets/ribbon_widgets/book_properties_config.ts
+++ b/apps/client/src/widgets/ribbon/collection-properties-config.ts
@@ -9,13 +9,13 @@ interface BookConfig {
     properties: BookProperty[];
 }
 
-interface CheckBoxProperty {
+export interface CheckBoxProperty {
     type: "checkbox",
     label: string;
     bindToLabel: string
 }
 
-interface ButtonProperty {
+export interface ButtonProperty {
     type: "button",
     label: string;
     title?: string;
@@ -23,7 +23,7 @@ interface ButtonProperty {
     onClick: (context: BookContext) => void;
 }
 
-interface NumberProperty {
+export interface NumberProperty {
     type: "number",
     label: string;
     bindToLabel: string;
@@ -37,11 +37,11 @@ interface ComboBoxItem {
 }
 
 interface ComboBoxGroup {
-    name: string;
+    title: string;
     items: ComboBoxItem[];
 }
 
-interface ComboBoxProperty {
+export interface ComboBoxProperty {
     type: "combobox",
     label: string;
     bindToLabel: string;
@@ -120,19 +120,19 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
                 defaultValue: DEFAULT_MAP_LAYER_NAME,
                 options: [
                     {
-                        name: t("book_properties_config.raster"),
+                        title: t("book_properties_config.raster"),
                         items: Object.entries(MAP_LAYERS)
                             .filter(([_, layer]) => layer.type === "raster")
                             .map(buildMapLayer)
                     },
                     {
-                        name: t("book_properties_config.vector_light"),
+                        title: t("book_properties_config.vector_light"),
                         items: Object.entries(MAP_LAYERS)
                             .filter(([_, layer]) => layer.type === "vector" && !layer.isDarkTheme)
                             .map(buildMapLayer)
                     },
                     {
-                        name: t("book_properties_config.vector_dark"),
+                        title: t("book_properties_config.vector_dark"),
                         items: Object.entries(MAP_LAYERS)
                             .filter(([_, layer]) => layer.type === "vector" && layer.isDarkTheme)
                             .map(buildMapLayer)
diff --git a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
new file mode 100644
index 000000000..d6c609dba
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
@@ -0,0 +1,429 @@
+import { MutableRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "preact/hooks";
+import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, ModelNode, ModelPosition } from "@triliumnext/ckeditor5";
+import { t } from "../../../services/i18n";
+import server from "../../../services/server";
+import note_autocomplete, { Suggestion } from "../../../services/note_autocomplete";
+import CKEditor, { CKEditorApi } from "../../react/CKEditor";
+import { useLegacyImperativeHandlers, useLegacyWidget, useTooltip, useTriliumEvent } from "../../react/hooks";
+import FAttribute from "../../../entities/fattribute";
+import attribute_renderer from "../../../services/attribute_renderer";
+import FNote from "../../../entities/fnote";
+import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
+import attribute_parser, { Attribute } from "../../../services/attribute_parser";
+import ActionButton from "../../react/ActionButton";
+import { escapeQuotes, getErrorMessage } from "../../../services/utils";
+import link from "../../../services/link";
+import froca from "../../../services/froca";
+import contextMenu from "../../../menus/context_menu";
+import type { CommandData, FilteredCommandNames } from "../../../components/app_context";
+import { AttributeType } from "@triliumnext/commons";
+import attributes from "../../../services/attributes";
+import note_create from "../../../services/note_create";
+
+type AttributeCommandNames = FilteredCommandNames<CommandData>;
+
+const HELP_TEXT = `
+<p>${t("attribute_editor.help_text_body1")}</p>
+
+<p>${t("attribute_editor.help_text_body2")}</p>
+
+<p>${t("attribute_editor.help_text_body3")}</p>`;
+
+const mentionSetup: MentionFeed[] = [
+    {
+        marker: "@",
+        feed: (queryText) => note_autocomplete.autocompleteSourceForCKEditor(queryText),
+        itemRenderer: (_item) => {
+            const item = _item as Suggestion;
+            const itemElement = document.createElement("button");
+
+            itemElement.innerHTML = `${item.highlightedNotePathTitle} `;
+
+            return itemElement;
+        },
+        minimumCharacters: 0
+    },
+    {
+        marker: "#",
+        feed: async (queryText) => {
+            const names = await server.get<string[]>(`attribute-names/?type=label&query=${encodeURIComponent(queryText)}`);
+
+            return names.map((name) => {
+                return {
+                    id: `#${name}`,
+                    name: name
+                };
+            });
+        },
+        minimumCharacters: 0
+    },
+    {
+        marker: "~",
+        feed: async (queryText) => {
+            const names = await server.get<string[]>(`attribute-names/?type=relation&query=${encodeURIComponent(queryText)}`);
+
+            return names.map((name) => {
+                return {
+                    id: `~${name}`,
+                    name: name
+                };
+            });
+        },
+        minimumCharacters: 0
+    }
+];
+
+
+interface AttributeEditorProps {
+    api: MutableRef<AttributeEditorImperativeHandlers | null>;
+    note: FNote;
+    componentId: string;
+    notePath?: string | null;
+    ntxId?: string | null;
+    hidden?: boolean;
+}
+
+export interface AttributeEditorImperativeHandlers {
+    save: () => Promise<void>;
+    refresh: () => void;
+    renderOwnedAttributes: (ownedAttributes: FAttribute[]) => Promise<void>;
+}
+
+export default function AttributeEditor({ api, note, componentId, notePath, ntxId, hidden }: AttributeEditorProps) {
+    const [ currentValue, setCurrentValue ] = useState("");
+    const [ state, setState ] = useState<"normal" | "showHelpTooltip" | "showAttributeDetail">();
+    const [ error, setError ] = useState<unknown>();
+    const [ needsSaving, setNeedsSaving ] = useState(false);
+
+    const lastSavedContent = useRef<string>();
+    const currentValueRef = useRef(currentValue);
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const editorRef = useRef<CKEditorApi>();
+
+    const { showTooltip, hideTooltip } = useTooltip(wrapperRef, {
+        trigger: "focus",
+        html: true,
+        title: HELP_TEXT,
+        placement: "bottom",
+        offset: "0,30"
+    });
+
+    const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget());
+
+    useEffect(() => {
+        if (state === "showHelpTooltip") {
+            showTooltip();
+        } else {
+            hideTooltip();
+        }
+    }, [ state ]);
+
+    async function renderOwnedAttributes(ownedAttributes: FAttribute[], saved: boolean) {
+        // attrs are not resorted if position changes after the initial load
+        ownedAttributes.sort((a, b) => a.position - b.position);
+
+        let htmlAttrs = ("<p>" + (await attribute_renderer.renderAttributes(ownedAttributes, true)).html() + "</p>");
+
+        if (saved) {
+            lastSavedContent.current = htmlAttrs;
+            setNeedsSaving(false);
+        }
+
+        if (htmlAttrs.length > 0) {
+            htmlAttrs += "&nbsp;";
+        }        
+
+        editorRef.current?.setText(htmlAttrs);
+        setCurrentValue(htmlAttrs);
+    }
+
+    function parseAttributes() {
+        try {
+            return attribute_parser.lexAndParse(getPreprocessedData(currentValueRef.current));
+        } catch (e: unknown) {
+            setError(e);
+        }
+    }
+
+    async function save() {
+        const attributes = parseAttributes();
+        if (!attributes || !needsSaving) {
+            // An error occurred and will be reported to the user, or nothing to save.
+            return;
+        }
+
+        await server.put(`notes/${note.noteId}/attributes`, attributes, componentId);
+        setNeedsSaving(false);
+
+        // blink the attribute text to give a visual hint that save has been executed
+        if (wrapperRef.current) {
+            wrapperRef.current.style.opacity = "0";
+            setTimeout(() => {
+                if (wrapperRef.current) {
+                    wrapperRef.current.style.opacity = "1"
+                }
+            }, 100);
+        }
+    }
+
+    async function handleAddNewAttributeCommand(command: AttributeCommandNames | undefined) {
+        // TODO: Not sure what the relation between FAttribute[] and Attribute[] is.
+        const attrs = parseAttributes() as FAttribute[];
+
+        if (!attrs) {
+            return;
+        }
+
+        let type: AttributeType;
+        let name;
+        let value;
+
+        if (command === "addNewLabel") {
+            type = "label";
+            name = "myLabel";
+            value = "";
+        } else if (command === "addNewRelation") {
+            type = "relation";
+            name = "myRelation";
+            value = "";
+        } else if (command === "addNewLabelDefinition") {
+            type = "label";
+            name = "label:myLabel";
+            value = "promoted,single,text";
+        } else if (command === "addNewRelationDefinition") {
+            type = "label";
+            name = "relation:myRelation";
+            value = "promoted,single";
+        } else {
+            return;
+        }
+
+        //@ts-expect-error TODO: Incomplete type
+        attrs.push({
+            type,
+            name,
+            value,
+            isInheritable: false
+        });
+
+        await renderOwnedAttributes(attrs, false);
+
+        // this.$editor.scrollTop(this.$editor[0].scrollHeight);
+        const rect = wrapperRef.current?.getBoundingClientRect();
+
+        setTimeout(() => {
+            // showing a little bit later because there's a conflict with outside click closing the attr detail
+            attributeDetailWidget.showAttributeDetail({
+                allAttributes: attrs,
+                attribute: attrs[attrs.length - 1],
+                isOwned: true,
+                x: rect ? (rect.left + rect.right) / 2 : 0,
+                y: rect?.bottom ?? 0,
+                focus: "name"
+            });
+        }, 100);
+    }
+
+    // Refresh with note
+    function refresh() {
+        renderOwnedAttributes(note.getOwnedAttributes(), true);
+    }
+
+    useEffect(() => refresh(), [ note ]);
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.getAttributeRows(componentId).find((attr) => attributes.isAffecting(attr, note))) {
+            console.log("Trigger due to entities reloaded");
+            refresh();
+        }
+    });
+
+    // Focus on show.
+    useEffect(() => {
+        setTimeout(() => editorRef.current?.focus(), 0);
+    }, []);
+
+    // Interaction with CKEditor.
+    useLegacyImperativeHandlers(useMemo(() => ({
+        loadReferenceLinkTitle: async ($el: JQuery<HTMLElement>, href: string) => {
+            const { noteId } = link.parseNavigationStateFromUrl(href);
+            const note = noteId ? await froca.getNote(noteId, true) : null;
+            const title = note ? note.title : "[missing]";
+
+            $el.text(title);
+        },
+        createNoteForReferenceLink: async (title: string) => {
+            let result;
+            if (notePath) {
+                result = await note_create.createNoteWithTypePrompt(notePath, {
+                    activate: false,
+                    title: title
+                });
+            }
+
+            return result?.note?.getBestNotePathString();
+        }   
+    }), [ notePath ]));    
+
+    // Keyboard shortcuts
+    useTriliumEvent("addNewLabel", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        handleAddNewAttributeCommand("addNewLabel");
+    });
+    useTriliumEvent("addNewRelation", ({ ntxId: eventNtxId }) => {
+        if (eventNtxId !== ntxId) return;
+        handleAddNewAttributeCommand("addNewRelation");
+    });
+
+    // Imperative API
+    useImperativeHandle(api, () => ({
+        save,
+        refresh,
+        renderOwnedAttributes: (attributes) => renderOwnedAttributes(attributes as FAttribute[], false)
+    }), [ save, refresh, renderOwnedAttributes ]);
+    
+    return (
+        <>
+            {!hidden && <div
+                ref={wrapperRef}
+                style="position: relative; padding-top: 10px; padding-bottom: 10px"
+                onKeyDown={(e) => {
+                    if (e.key === "Enter") {
+                        // allow autocomplete to fill the result textarea
+                        setTimeout(() => save(), 100);
+                    }
+                }}
+            >
+                <CKEditor
+                    apiRef={editorRef}
+                    className="attribute-list-editor"
+                    tabIndex={200}
+                    editor={CKEditorAttributeEditor}
+                    currentValue={currentValue}
+                    config={{
+                        toolbar: { items: [] },
+                        placeholder: t("attribute_editor.placeholder"),
+                        mention: { feeds: mentionSetup },
+                        licenseKey: "GPL"
+                    }}
+                    onChange={(currentValue) => {
+                        currentValueRef.current = currentValue ?? "";
+                        
+                        const oldValue = getPreprocessedData(lastSavedContent.current ?? "").trimEnd();
+                        const newValue = getPreprocessedData(currentValue ?? "").trimEnd();                
+                        setNeedsSaving(oldValue !== newValue);
+                        setError(undefined);
+                    }}
+                    onClick={(e, pos) => {
+                        if (pos && pos.textNode && pos.textNode.data) {
+                            const clickIndex = getClickIndex(pos);
+
+                            let parsedAttrs: Attribute[];
+
+                            try {
+                                parsedAttrs = attribute_parser.lexAndParse(getPreprocessedData(currentValueRef.current), true);
+                            } catch (e: unknown) {
+                                // the input is incorrect because the user messed up with it and now needs to fix it manually
+                                console.log(e);
+                                return null;
+                            }
+
+                            let matchedAttr: Attribute | null = null;
+
+                            for (const attr of parsedAttrs) {
+                                if (attr.startIndex && clickIndex > attr.startIndex && attr.endIndex && clickIndex <= attr.endIndex) {
+                                    matchedAttr = attr;
+                                    break;
+                                }
+                            }
+
+                            setTimeout(() => {
+                                if (matchedAttr) {
+                                    attributeDetailWidget.showAttributeDetail({
+                                        allAttributes: parsedAttrs,
+                                        attribute: matchedAttr,
+                                        isOwned: true,
+                                        x: e.pageX,
+                                        y: e.pageY
+                                    });
+                                    setState("showAttributeDetail");                                    
+                                } else {
+                                    setState("showHelpTooltip");
+                                }
+                            }, 100);
+                        } else {
+                            setState("showHelpTooltip");
+                        }
+                    }}
+                    onKeyDown={() => attributeDetailWidget.hide()}
+                    onBlur={() => save()}
+                    disableNewlines disableSpellcheck
+                />
+
+                { needsSaving && <ActionButton
+                    icon="bx bx-save"
+                    className="save-attributes-button"
+                    text={escapeQuotes(t("attribute_editor.save_attributes"))}
+                    onClick={save}
+                /> }
+
+                <ActionButton 
+                    icon="bx bx-plus"
+                    className="add-new-attribute-button"
+                    text={escapeQuotes(t("attribute_editor.add_a_new_attribute"))}
+                    onClick={(e) => {
+                        // Prevent automatic hiding of the context menu due to the button being clicked.
+                        e.stopPropagation();
+
+                        contextMenu.show<AttributeCommandNames>({
+                            x: e.pageX,
+                            y: e.pageY,
+                            orientation: "left",
+                            items: [
+                                { title: t("attribute_editor.add_new_label"), command: "addNewLabel", uiIcon: "bx bx-hash" },
+                                { title: t("attribute_editor.add_new_relation"), command: "addNewRelation", uiIcon: "bx bx-transfer" },
+                                { title: "----" },
+                                { title: t("attribute_editor.add_new_label_definition"), command: "addNewLabelDefinition", uiIcon: "bx bx-empty" },
+                                { title: t("attribute_editor.add_new_relation_definition"), command: "addNewRelationDefinition", uiIcon: "bx bx-empty" }
+                            ],
+                            selectMenuItemHandler: (item) => handleAddNewAttributeCommand(item.command)
+                        });
+                    }}
+                />
+
+                { error && (
+                    <div className="attribute-errors">
+                        {getErrorMessage(error)}
+                    </div>
+                )}
+            </div>}
+
+            {attributeDetailWidgetEl}
+        </>
+    )   
+}
+
+function getPreprocessedData(currentValue: string) {
+    const str = currentValue
+        .replace(/<a[^>]+href="(#[A-Za-z0-9_/]*)"[^>]*>[^<]*<\/a>/g, "$1")
+        .replace(/&nbsp;/g, " "); // otherwise .text() below outputs non-breaking space in unicode
+
+    return $("<div>").html(str).text();
+}
+
+function getClickIndex(pos: ModelPosition) {
+    let clickIndex = pos.offset - (pos.textNode?.startOffset ?? 0);
+
+    let curNode: ModelNode | Text | ModelElement | null = pos.textNode;
+
+    while (curNode?.previousSibling) {
+        curNode = curNode.previousSibling;
+
+        if ((curNode as ModelElement).name === "reference") {
+            clickIndex += (curNode.getAttribute("href") as string).length + 1;
+        } else if ("data" in curNode) {
+            clickIndex += (curNode.data as string).length;
+        }
+    }
+
+    return clickIndex;
+}
diff --git a/apps/client/src/widgets/ribbon/ribbon-interface.ts b/apps/client/src/widgets/ribbon/ribbon-interface.ts
new file mode 100644
index 000000000..c40daf2c7
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/ribbon-interface.ts
@@ -0,0 +1,13 @@
+import NoteContext from "../../components/note_context";
+import FNote from "../../entities/fnote";
+
+export interface TabContext {
+    note: FNote | null | undefined;
+    hidden: boolean;
+    ntxId?: string | null;
+    hoistedNoteId?: string;
+    notePath?: string | null;
+    noteContext?: NoteContext;
+    componentId: string;
+    activate(): void;
+}
diff --git a/apps/client/src/widgets/ribbon/style.css b/apps/client/src/widgets/ribbon/style.css
new file mode 100644
index 000000000..3c6df6ba8
--- /dev/null
+++ b/apps/client/src/widgets/ribbon/style.css
@@ -0,0 +1,472 @@
+.ribbon-container {
+    margin-bottom: 5px;
+}
+
+.ribbon-top-row {
+    display: flex;
+    min-height: 36px;
+}
+
+.ribbon-tab-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-left: 10px;
+    flex-grow: 1;
+    flex-flow: row wrap;
+}
+
+.ribbon-tab-title {
+    color: var(--muted-text-color);
+    border-bottom: 1px solid var(--main-border-color);
+    min-width: 24px;
+    flex-basis: 24px;
+    max-width: max-content;
+    flex-grow: 10;
+    user-select: none;
+}
+
+.ribbon-tab-title .bx {
+    font-size: 150%;
+    position: relative;
+    top: 3px;
+}
+
+.ribbon-tab-title.active {
+    color: var(--main-text-color);
+    border-bottom: 3px solid var(--main-text-color);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.ribbon-tab-title:hover {
+    cursor: pointer;
+}
+
+.ribbon-tab-title:hover {
+    color: var(--main-text-color);
+}
+
+.ribbon-tab-title:first-of-type {
+    padding-left: 10px;
+}
+
+.ribbon-tab-spacer {
+    flex-basis: 0;
+    min-width: 0;
+    max-width: 35px;
+    flex-grow: 1;
+    border-bottom: 1px solid var(--main-border-color);
+}
+
+.ribbon-tab-spacer:last-of-type {
+    flex-grow: 1;
+    flex-basis: 0;
+    min-width: 0;
+    max-width: 10000px;
+}
+
+.ribbon-button-container {
+    display: flex;
+    border-bottom: 1px solid var(--main-border-color);
+    margin-right: 5px;
+}
+
+.ribbon-button-container > * {
+    position: relative;
+    top: -3px;
+    margin-left: 10px;
+}
+
+.ribbon-body {
+    border-bottom: 1px solid var(--main-border-color);
+    margin-left: 10px;
+    margin-right: 5px; /* needs to have this value so that the bottom border is the same width as the top one */
+}
+
+.ribbon-body.active {
+    display: block;
+}
+
+.ribbon-tab-title.active .ribbon-tab-title-label {
+    display: inline;
+}
+
+/* #region Basic Properties */
+
+.basic-properties-widget {
+    padding: 0px 12px 6px 12px;
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+}
+
+.basic-properties-widget > * {
+    margin-top: 9px;
+    margin-bottom: 2px;
+    margin-right: 30px;
+}
+
+.note-type-container,
+.editability-select-container,
+.note-language-container {
+    display: flex;
+    align-items: center;
+}
+
+.note-type-dropdown {
+    max-height: 500px;
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
+.editability-dropdown {
+    width: 300px;
+}
+
+/* #endregion */
+
+/* #region Formatting Toolbar */
+
+.classic-toolbar-widget {
+    --ck-color-toolbar-background: transparent;
+    --ck-color-button-default-background: transparent;
+    --ck-color-button-default-disabled-background: transparent;
+    min-height: 39px;
+}
+
+.classic-toolbar-widget .ck.ck-toolbar {
+    border: none;
+}
+
+.classic-toolbar-widget .ck.ck-button.ck-disabled {
+    opacity: 0.3;
+}
+
+/* #endregion */
+
+/* #region Script Tab */
+.script-runner-widget {
+    padding: 12px;
+    color: var(--muted-text-color);
+}
+
+.execute-description {
+    margin-bottom: 10px;
+}
+/* #endregion */
+
+/* #region Note info */
+.note-info-widget {
+    padding: 12px;
+}
+
+.note-info-widget-table {
+    max-width: 100%;
+    display: block;
+    overflow-x: auto;
+    white-space: nowrap;
+}
+
+.note-info-widget-table td, .note-info-widget-table th {
+    padding: 5px;
+}
+
+.note-info-mime {
+    max-width: 13em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+/* #endregion */
+
+/* #region Similar Notes */
+.similar-notes-wrapper {
+    max-height: 200px;
+    overflow: auto;
+    padding: 12px;
+}
+
+.similar-notes-wrapper a {
+    display: inline-block;
+    border: 1px dotted var(--main-border-color);
+    border-radius: 20px;
+    background-color: var(--accented-background-color);
+    padding: 0 10px 0 10px;
+    margin: 0 3px 0 3px;
+    max-width: 10em;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+/* #endregion */
+
+/* #region File Properties */
+.file-table {
+    width: 100%;
+    margin-top: 10px;
+}
+
+.file-table th, .file-table td {
+    padding: 5px;
+    overflow-wrap: anywhere;
+}
+
+.file-buttons {
+    padding: 10px;
+    display: flex;
+    justify-content: space-evenly;
+}
+/* #endregion */
+
+/* #region Note paths */
+.note-paths-widget {
+    padding: 12px;
+    max-height: 300px;
+    overflow-y: auto;
+}
+
+.note-path-list {
+    margin-top: 10px;
+}
+
+.note-path-list .path-current a {
+    font-weight: bold;
+}
+
+.note-path-list .path-archived a {
+    color: var(--muted-text-color) !important;
+}
+
+.note-path-list .path-search a {
+    font-style: italic;
+}
+/* #endregion */
+
+/* #region Note map */
+.note-map-ribbon-widget {
+    position: relative;
+}
+
+.note-map-ribbon-widget .note-map-container {
+    height: 100%;
+}
+
+.note-map-ribbon-widget .open-full-button, .note-map-ribbon-widget .collapse-button {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    z-index: 1000;
+}
+
+.style-resolver {
+    color: var(--muted-text-color);
+    display: none;
+}
+/* #endregion */
+
+/* #region Attribute editor */
+.attribute-list-editor {
+    border: 0 !important;
+    outline: 0 !important;
+    box-shadow: none !important;
+    padding: 0 0 0 5px !important;
+    margin: 0 !important;
+    max-height: 100px;
+    overflow: auto;
+    transition: opacity .1s linear;
+}
+
+.attribute-list-editor.ck-content .mention {
+    color: var(--muted-text-color) !important;
+    background: transparent !important;
+}
+
+.save-attributes-button {
+    color: var(--muted-text-color);
+    position: absolute;
+    bottom: 14px;
+    right: 25px;
+    cursor: pointer;
+    border: 1px solid transparent;
+    font-size: 130%;
+}
+
+.add-new-attribute-button {
+    color: var(--muted-text-color);
+    position: absolute;
+    bottom: 13px;
+    right: 0;
+    cursor: pointer;
+    border: 1px solid transparent;
+    font-size: 130%;
+}
+
+.add-new-attribute-button:hover, .save-attributes-button:hover {
+    border: 1px solid var(--button-border-color);
+    border-radius: var(--button-border-radius);
+    background: var(--button-background-color);
+    color: var(--button-text-color);
+}
+
+.attribute-errors {
+    color: red;
+    padding: 5px 50px 0px 5px; /* large right padding to avoid buttons */
+}
+/* #endregion */
+
+/* #region Owned Attributes */
+.attribute-list {
+    margin-left: 7px;
+    margin-right: 7px;
+    margin-top: 5px;
+    margin-bottom: 2px;
+    position: relative;
+}
+
+.attribute-list-editor p {
+    margin: 0 !important;
+}
+
+.attribute-list .attr-detail,
+.inherited-attributes-widget .attr-detail {
+    contain: none;
+}
+
+/* #endregion */
+
+/* #region Inherited attributes */
+.inherited-attributes-widget {
+    position: relative;
+}
+
+.inherited-attributes-container {
+    color: var(--muted-text-color);
+    max-height: 200px;
+    overflow: auto;
+    padding: 14px 12px 13px 12px;
+}
+/* #endregion */
+
+/* #region Book properties */
+.book-properties-widget {
+    padding: 12px 12px 6px 12px;
+    display: flex;
+}
+
+.book-properties-widget > * {
+    margin-right: 15px;
+}
+
+.book-properties-container {
+    display: flex;
+    align-items: center;
+}
+
+.book-properties-container > div {
+    margin-right: 15px;
+}
+
+.book-properties-container > .type-number > label {
+    display: flex;
+    align-items: baseline;
+}
+
+.book-properties-container input[type="checkbox"] {
+    margin-right: 5px;
+}
+
+.book-properties-container label {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-overflow: clip;
+    white-space: nowrap;
+}
+/* #endregion */
+
+/* #region Search definition */
+.search-setting-table {
+    margin-top: 0;
+    margin-bottom: 7px;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 10px;
+}
+
+.search-setting-table div {
+    white-space: nowrap;
+}
+
+.search-setting-table .title-column {
+    /* minimal width so that table remains static sized and most space remains for middle column with settings */
+    width: 50px;
+    white-space: nowrap;
+}
+
+.search-setting-table .button-column {
+    /* minimal width so that table remains static sized and most space remains for middle column with settings */
+    width: 50px;
+    white-space: nowrap;
+    text-align: right;
+    vertical-align: middle;
+}
+
+.search-setting-table .button-column .dropdown {
+    display: inline-block !important;
+}
+
+.search-setting-table .button-column .dropdown-menu {
+    white-space: normal;
+}
+
+.search-setting-table .button-column > * {
+    vertical-align: middle;
+}
+
+.attribute-list hr {
+    height: 1px;
+    border-color: var(--main-border-color);
+    position: relative;
+    top: 4px;
+    margin-top: 5px;
+    margin-bottom: 0;
+}
+
+.search-definition-widget input:invalid {
+    border: 3px solid red;
+}
+
+.add-search-option button {
+    margin: 3px;
+}
+
+.dropdown-header {
+    background-color: var(--accented-background-color);
+}
+/* #endregion */
+
+/* #region Note actions */
+.note-actions {
+    width: 35px;
+    height: 35px;
+}
+
+.note-actions .dropdown-menu {
+    min-width: 15em;
+}
+
+.note-actions .dropdown-item .bx {
+    position: relative;
+    top: 3px;
+    font-size: 120%;
+    margin-right: 5px;
+}
+
+.note-actions .dropdown-item[disabled], .note-actions .dropdown-item[disabled]:hover {
+    color: var(--muted-text-color) !important;
+    background-color: transparent !important;
+    pointer-events: none; /* makes it unclickable */
+}
+/* #endregion */
\ No newline at end of file
diff --git a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts b/apps/client/src/widgets/ribbon_widgets/basic_properties.ts
deleted file mode 100644
index b78e80a8d..000000000
--- a/apps/client/src/widgets/ribbon_widgets/basic_properties.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import NoteTypeWidget from "../note_type.js";
-import ProtectedNoteSwitchWidget from "../protected_note_switch.js";
-import EditabilitySelectWidget from "../editability_select.js";
-import BookmarkSwitchWidget from "../bookmark_switch.js";
-import SharedSwitchWidget from "../shared_switch.js";
-import { t } from "../../services/i18n.js";
-import TemplateSwitchWidget from "../template_switch.js";
-import type FNote from "../../entities/fnote.js";
-import NoteLanguageWidget from "../note_language.js";
-
-const TPL = /*html*/`
-<div class="basic-properties-widget">
-    <style>
-        .basic-properties-widget {
-            padding: 0px 12px 6px 12px;
-            display: flex;
-            align-items: baseline;
-            flex-wrap: wrap;
-        }
-
-        .basic-properties-widget > * {
-            margin-top: 9px;
-            margin-bottom: 2px;
-        }
-
-        .basic-properties-widget > * > :last-child {
-            margin-right: 30px;
-        }
-
-        .note-type-container,
-        .editability-select-container,
-        .note-language-container {
-            display: flex;
-            align-items: center;
-        }
-    </style>
-
-    <div class="note-type-container">
-        <span>${t("basic_properties.note_type")}:</span> &nbsp;
-    </div>
-
-    <div class="protected-note-switch-container"></div>
-
-    <div class="editability-select-container">
-        <span>${t("basic_properties.editable")}:</span> &nbsp;
-    </div>
-
-    <div class="bookmark-switch-container"></div>
-
-    <div class="shared-switch-container"></div>
-
-    <div class="template-switch-container"></div>
-
-    <div class="note-language-container">
-        <span>${t("basic_properties.language")}:</span> &nbsp;
-    </div>
-</div>`;
-
-export default class BasicPropertiesWidget extends NoteContextAwareWidget {
-
-    private noteTypeWidget: NoteTypeWidget;
-    private protectedNoteSwitchWidget: ProtectedNoteSwitchWidget;
-    private editabilitySelectWidget: EditabilitySelectWidget;
-    private bookmarkSwitchWidget: BookmarkSwitchWidget;
-    private sharedSwitchWidget: SharedSwitchWidget;
-    private templateSwitchWidget: TemplateSwitchWidget;
-    private noteLanguageWidget: NoteLanguageWidget;
-
-    constructor() {
-        super();
-
-        this.noteTypeWidget = new NoteTypeWidget().contentSized();
-        this.protectedNoteSwitchWidget = new ProtectedNoteSwitchWidget().contentSized();
-        this.editabilitySelectWidget = new EditabilitySelectWidget().contentSized();
-        this.bookmarkSwitchWidget = new BookmarkSwitchWidget().contentSized();
-        this.sharedSwitchWidget = new SharedSwitchWidget().contentSized();
-        this.templateSwitchWidget = new TemplateSwitchWidget().contentSized();
-        this.noteLanguageWidget = new NoteLanguageWidget().contentSized();
-
-        this.child(
-            this.noteTypeWidget,
-            this.protectedNoteSwitchWidget,
-            this.editabilitySelectWidget,
-            this.bookmarkSwitchWidget,
-            this.sharedSwitchWidget,
-            this.templateSwitchWidget,
-            this.noteLanguageWidget);
-    }
-
-    get name() {
-        return "basicProperties";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonBasicProperties";
-    }
-
-    getTitle() {
-        return {
-            show: !this.note?.isLaunchBarConfig(),
-            title: t("basic_properties.basic_properties"),
-            icon: "bx bx-slider"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$widget.find(".note-type-container").append(this.noteTypeWidget.render());
-        this.$widget.find(".protected-note-switch-container").append(this.protectedNoteSwitchWidget.render());
-        this.$widget.find(".editability-select-container").append(this.editabilitySelectWidget.render());
-        this.$widget.find(".bookmark-switch-container").append(this.bookmarkSwitchWidget.render());
-        this.$widget.find(".shared-switch-container").append(this.sharedSwitchWidget.render());
-        this.$widget.find(".template-switch-container").append(this.templateSwitchWidget.render());
-        this.$widget.find(".note-language-container").append(this.noteLanguageWidget.render());
-    }
-
-    async refreshWithNote(note: FNote) {
-        await super.refreshWithNote(note);
-        if (!this.note) {
-            return;
-        }
-
-        this.$widget.find(".editability-select-container").toggle(this.note && ["text", "code", "mermaid"].includes(this.note.type));
-        this.$widget.find(".note-language-container").toggle(this.note && ["text"].includes(this.note.type));
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/book_properties.ts b/apps/client/src/widgets/ribbon_widgets/book_properties.ts
deleted file mode 100644
index 47c1a83f1..000000000
--- a/apps/client/src/widgets/ribbon_widgets/book_properties.ts
+++ /dev/null
@@ -1,262 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import attributeService from "../../services/attributes.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-import { bookPropertiesConfig, BookProperty } from "./book_properties_config.js";
-import attributes from "../../services/attributes.js";
-import type { ViewTypeOptions } from "../../services/note_list_renderer.js";
-
-const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
-    grid: t("book_properties.grid"),
-    list: t("book_properties.list"),
-    calendar: t("book_properties.calendar"),
-    table: t("book_properties.table"),
-    geoMap: t("book_properties.geo-map"),
-    board: t("book_properties.board")
-};
-
-const TPL = /*html*/`
-<div class="book-properties-widget">
-    <style>
-        .book-properties-widget {
-            padding: 12px 12px 6px 12px;
-            display: flex;
-        }
-
-        .book-properties-widget > * {
-            margin-right: 15px;
-        }
-
-        .book-properties-container {
-            display: flex;
-            align-items: center;
-        }
-
-        .book-properties-container > div {
-            margin-right: 15px;
-        }
-
-        .book-properties-container > .type-number > label {
-            display: flex;
-            align-items: baseline;
-        }
-
-        .book-properties-container input[type="checkbox"] {
-            margin-right: 5px;
-        }
-
-        .book-properties-container label {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            text-overflow: clip;
-            white-space: nowrap;
-        }
-    </style>
-
-    <div style="display: flex; align-items: baseline">
-        <span style="white-space: nowrap">${t("book_properties.view_type")}:&nbsp; &nbsp;</span>
-
-        <select class="view-type-select form-select form-select-sm">
-            ${Object.entries(VIEW_TYPE_MAPPINGS)
-                .filter(([type]) => type !== "raster")
-                .map(([type, label]) => `
-                <option value="${type}">${label}</option>
-            `).join("")}
-        </select>
-    </div>
-
-    <div class="book-properties-container">
-    </div>
-</div>
-`;
-
-export default class BookPropertiesWidget extends NoteContextAwareWidget {
-
-    private $viewTypeSelect!: JQuery<HTMLElement>;
-    private $propertiesContainer!: JQuery<HTMLElement>;
-    private labelsToWatch: string[] = [];
-
-    get name() {
-        return "bookProperties";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabBookProperties";
-    }
-
-    isEnabled() {
-        return this.note && this.note.type === "book";
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled(),
-            title: t("book_properties.book_properties"),
-            icon: "bx bx-book"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$viewTypeSelect = this.$widget.find(".view-type-select");
-        this.$viewTypeSelect.on("change", () => this.toggleViewType(String(this.$viewTypeSelect.val())));
-
-        this.$propertiesContainer = this.$widget.find(".book-properties-container");
-    }
-
-    async refreshWithNote(note: FNote) {
-        if (!this.note) {
-            return;
-        }
-
-        const viewType = this.note.getLabelValue("viewType") || "grid";
-
-        this.$viewTypeSelect.val(viewType);
-
-        this.$propertiesContainer.empty();
-
-        const bookPropertiesData = bookPropertiesConfig[viewType];
-        if (bookPropertiesData) {
-            for (const property of bookPropertiesData.properties) {
-                this.$propertiesContainer.append(this.renderBookProperty(property));
-                this.labelsToWatch.push(property.bindToLabel);
-            }
-        }
-    }
-
-    async toggleViewType(type: string) {
-        if (!this.noteId) {
-            return;
-        }
-
-        if (!VIEW_TYPE_MAPPINGS.hasOwnProperty(type)) {
-            throw new Error(t("book_properties.invalid_view_type", { type }));
-        }
-
-        await attributeService.setLabel(this.noteId, "viewType", type);
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows().find((attr) =>
-                attr.noteId === this.noteId
-                && (attr.name === "viewType" || this.labelsToWatch.includes(attr.name ?? "")))) {
-            this.refresh();
-        }
-    }
-
-    renderBookProperty(property: BookProperty) {
-        const $container = $("<div>");
-        $container.addClass(`type-${property.type}`);
-        const note = this.note;
-        if (!note) {
-            return $container;
-        }
-        switch (property.type) {
-            case "checkbox":
-                const $label = $("<label>").text(property.label);
-                const $checkbox = $("<input>", {
-                    type: "checkbox",
-                    class: "form-check-input",
-                });
-                $checkbox.on("change", () => {
-                    if ($checkbox.prop("checked")) {
-                        attributes.setLabel(note.noteId, property.bindToLabel);
-                    } else {
-                        attributes.removeOwnedLabelByName(note, property.bindToLabel);
-                    }
-                });
-                $checkbox.prop("checked", note.hasOwnedLabel(property.bindToLabel));
-                $label.prepend($checkbox);
-                $container.append($label);
-                break;
-            case "button":
-                const $button = $("<button>", {
-                    type: "button",
-                    class: "btn btn-sm"
-                }).text(property.label);
-                if (property.title) {
-                    $button.attr("title", property.title);
-                }
-                if (property.icon) {
-                    $button.prepend($("<span>", { class: property.icon }));
-                }
-                $button.on("click", () => {
-                    property.onClick({
-                        note,
-                        triggerCommand: this.triggerCommand.bind(this)
-                    });
-                });
-                $container.append($button);
-                break;
-            case "number":
-                const $numberInput = $("<input>", {
-                    type: "number",
-                    class: "form-control form-control-sm",
-                    value: note.getLabelValue(property.bindToLabel) || "",
-                    width: property.width ?? 100,
-                    min: property.min ?? 0
-                });
-                $numberInput.on("change", () => {
-                    const value = $numberInput.val();
-                    if (value === "") {
-                        attributes.removeOwnedLabelByName(note, property.bindToLabel);
-                    } else {
-                        attributes.setLabel(note.noteId, property.bindToLabel, String(value));
-                    }
-                });
-                $container.append($("<label>")
-                    .text(property.label)
-                    .append("&nbsp;".repeat(2))
-                    .append($numberInput));
-                break;
-            case "combobox":
-                const $select = $("<select>", {
-                    class: "form-select form-select-sm"
-                });
-                const actualValue = note.getLabelValue(property.bindToLabel) ?? property.defaultValue ?? "";
-                for (const option of property.options) {
-                    if ("items" in option) {
-                        const $optGroup = $("<optgroup>", { label: option.name });
-                        for (const item of option.items) {
-                            buildComboBoxItem(item, actualValue).appendTo($optGroup);
-                        }
-                        $optGroup.appendTo($select);
-                    } else {
-                        buildComboBoxItem(option, actualValue).appendTo($select);
-                    }
-                }
-                $select.on("change", () => {
-                    const value = $select.val();
-                    if (value === null || value === "") {
-                        attributes.removeOwnedLabelByName(note, property.bindToLabel);
-                    } else {
-                        attributes.setLabel(note.noteId, property.bindToLabel, String(value));
-                    }
-                });
-                $container.append($("<label>")
-                    .text(property.label)
-                    .append("&nbsp;".repeat(2))
-                    .append($select));
-                break;
-        }
-
-        return $container;
-    }
-
-
-}
-
-function buildComboBoxItem({ value, label }: { value: string, label: string }, actualValue: string) {
-    const $option = $("<option>", {
-        value,
-        text: label
-    });
-    if (actualValue === value) {
-        $option.prop("selected", true);
-    }
-    return $option;
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts b/apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts
deleted file mode 100644
index a4974ff24..000000000
--- a/apps/client/src/widgets/ribbon_widgets/classic_editor_toolbar.ts
+++ /dev/null
@@ -1,84 +0,0 @@
-import { t } from "../../services/i18n.js";
-import options from "../../services/options.js";
-import utils from "../../services/utils.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-
-const TPL = /*html*/`\
-<div class="classic-toolbar-widget"></div>
-
-<style>
-    .classic-toolbar-widget {
-        --ck-color-toolbar-background: transparent;
-        --ck-color-button-default-background: transparent;
-        --ck-color-button-default-disabled-background: transparent;
-        min-height: 39px;
-    }
-
-    .classic-toolbar-widget .ck.ck-toolbar {
-        border: none;
-    }
-
-    .classic-toolbar-widget .ck.ck-button.ck-disabled {
-        opacity: 0.3;
-    }
-</style>
-`;
-
-/**
- * Handles the editing toolbar when the CKEditor is in decoupled mode.
- *
- * <p>
- * This toolbar is only enabled if the user has selected the classic CKEditor.
- *
- * <p>
- * The ribbon item is active by default for text notes, as long as they are not in read-only mode.
- */
-export default class ClassicEditorToolbar extends NoteContextAwareWidget {
-
-    get name() {
-        return "classicEditor";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabClassicEditor";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-    }
-
-    isEnabled(): boolean | null | undefined {
-        if (options.get("textNoteEditorType") !== "ckeditor-classic") {
-            return false;
-        }
-
-        if (!this.note || this.note.type !== "text") {
-            return false;
-        }
-
-        return true;
-    }
-
-    async getTitle() {
-        return {
-            show: await this.#shouldDisplay(),
-            activate: true,
-            title: t("classic_editor_toolbar.title"),
-            icon: "bx bx-text"
-        };
-    }
-
-    async #shouldDisplay() {
-        if (!this.isEnabled()) {
-            return false;
-        }
-
-        if (await this.noteContext?.isReadOnly()) {
-            return false;
-        }
-
-        return true;
-    }
-
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/edited_notes.ts b/apps/client/src/widgets/ribbon_widgets/edited_notes.ts
deleted file mode 100644
index 2967b5f6f..000000000
--- a/apps/client/src/widgets/ribbon_widgets/edited_notes.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import linkService from "../../services/link.js";
-import server from "../../services/server.js";
-import froca from "../../services/froca.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import options from "../../services/options.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-
-const TPL = /*html*/`
-<div class="edited-notes-widget">
-    <style>
-        .edited-notes-widget {
-            padding: 12px;
-            max-height: 200px;
-            width: 100%;
-            overflow: auto;
-        }
-    </style>
-
-    <div class="no-edited-notes-found">${t("edited_notes.no_edited_notes_found")}</div>
-
-    <div class="edited-notes-list use-tn-links"></div>
-</div>
-`;
-
-// TODO: Deduplicate with server.
-interface EditedNotesResponse {
-    noteId: string;
-    isDeleted: boolean;
-    title: string;
-    notePath: string[];
-}
-
-export default class EditedNotesWidget extends NoteContextAwareWidget {
-
-    private $list!: JQuery<HTMLElement>;
-    private $noneFound!: JQuery<HTMLElement>;
-
-    get name() {
-        return "editedNotes";
-    }
-
-    isEnabled() {
-        return super.isEnabled() && this.note?.hasOwnedLabel("dateNote");
-    }
-
-    getTitle() {
-        return {
-            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"
-        };
-    }
-
-    async doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-        this.$list = this.$widget.find(".edited-notes-list");
-        this.$noneFound = this.$widget.find(".no-edited-notes-found");
-    }
-
-    async refreshWithNote(note: FNote) {
-        let editedNotes = await server.get<EditedNotesResponse[]>(`edited-notes/${note.getLabelValue("dateNote")}`);
-
-        editedNotes = editedNotes.filter((n) => n.noteId !== note.noteId);
-
-        this.$list.empty();
-        this.$noneFound.hide();
-
-        if (editedNotes.length === 0) {
-            this.$noneFound.show();
-            return;
-        }
-
-        const noteIds = editedNotes.flatMap((n) => n.noteId);
-
-        await froca.getNotes(noteIds, true); // preload all at once
-
-        for (let i = 0; i < editedNotes.length; i++) {
-            const editedNote = editedNotes[i];
-            const $item = $('<span class="edited-note-line">');
-
-            if (editedNote.isDeleted) {
-                const title = `${editedNote.title} ${t("edited_notes.deleted")}`;
-                $item.append($("<i>").text(title).attr("title", title));
-            } else {
-                $item.append(editedNote.notePath ? await linkService.createLink(editedNote.notePath.join("/"), { showNotePath: true }) : $("<span>").text(editedNote.title));
-            }
-
-            if (i < editedNotes.length - 1) {
-                $item.append(", ");
-            }
-
-            this.$list.append($item);
-        }
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/file_properties.ts b/apps/client/src/widgets/ribbon_widgets/file_properties.ts
deleted file mode 100644
index b6fc1082d..000000000
--- a/apps/client/src/widgets/ribbon_widgets/file_properties.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import server from "../../services/server.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import toastService from "../../services/toast.js";
-import openService from "../../services/open.js";
-import utils from "../../services/utils.js";
-import protectedSessionHolder from "../../services/protected_session_holder.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-
-const TPL = /*html*/`
-<div class="file-properties-widget">
-    <style>
-        .file-table {
-            width: 100%;
-            margin-top: 10px;
-        }
-
-        .file-table th, .file-table td {
-            padding: 5px;
-            overflow-wrap: anywhere;
-        }
-
-        .file-buttons {
-            padding: 10px;
-            display: flex;
-            justify-content: space-evenly;
-        }
-    </style>
-
-    <table class="file-table">
-        <tr>
-            <th class="text-nowrap">${t("file_properties.note_id")}:</th>
-            <td class="file-note-id"></td>
-            <th class="text-nowrap">${t("file_properties.original_file_name")}:</th>
-            <td class="file-filename"></td>
-        </tr>
-        <tr>
-            <th class="text-nowrap">${t("file_properties.file_type")}:</th>
-            <td class="file-filetype"></td>
-            <th class="text-nowrap">${t("file_properties.file_size")}:</th>
-            <td class="file-filesize"></td>
-        </tr>
-
-        <tr>
-            <td colspan="4">
-                <div class="file-buttons">
-                    <button class="file-download btn btn-sm btn-primary" type="button">
-                        <span class="bx bx-download"></span>
-                        ${t("file_properties.download")}
-                    </button>
-
-                    <button class="file-open btn btn-sm btn-primary" type="button">
-                        <span class="bx bx-link-external"></span>
-                        ${t("file_properties.open")}
-                    </button>
-
-                    <button class="file-upload-new-revision btn btn-sm btn-primary">
-                        <span class="bx bx-folder-open"></span>
-                        ${t("file_properties.upload_new_revision")}
-                    </button>
-
-                    <input type="file" class="file-upload-new-revision-input" style="display: none">
-                </div>
-            </td>
-        </tr>
-    </table>
-</div>`;
-
-export default class FilePropertiesWidget extends NoteContextAwareWidget {
-
-    private $fileNoteId!: JQuery<HTMLElement>;
-    private $fileName!: JQuery<HTMLElement>;
-    private $fileType!: JQuery<HTMLElement>;
-    private $fileSize!: JQuery<HTMLElement>;
-    private $downloadButton!: JQuery<HTMLElement>;
-    private $openButton!: JQuery<HTMLElement>;
-    private $uploadNewRevisionButton!: JQuery<HTMLElement>;
-    private $uploadNewRevisionInput!: JQuery<HTMLFormElement>;
-
-    get name() {
-        return "fileProperties";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabFileProperties";
-    }
-
-    isEnabled() {
-        return this.note && this.note.type === "file";
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled(),
-            activate: true,
-            title: t("file_properties.title"),
-            icon: "bx bx-file"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-        this.$fileNoteId = this.$widget.find(".file-note-id");
-        this.$fileName = this.$widget.find(".file-filename");
-        this.$fileType = this.$widget.find(".file-filetype");
-        this.$fileSize = this.$widget.find(".file-filesize");
-        this.$downloadButton = this.$widget.find(".file-download");
-        this.$openButton = this.$widget.find(".file-open");
-        this.$uploadNewRevisionButton = this.$widget.find(".file-upload-new-revision");
-        this.$uploadNewRevisionInput = this.$widget.find(".file-upload-new-revision-input");
-
-        this.$downloadButton.on("click", () => this.noteId && openService.downloadFileNote(this.noteId));
-        this.$openButton.on("click", () => this.noteId && this.note && openService.openNoteExternally(this.noteId, this.note.mime));
-
-        this.$uploadNewRevisionButton.on("click", () => {
-            this.$uploadNewRevisionInput.trigger("click");
-        });
-
-        this.$uploadNewRevisionInput.on("change", async () => {
-            const fileToUpload = this.$uploadNewRevisionInput[0].files[0]; // copy to allow reset below
-            this.$uploadNewRevisionInput.val("");
-
-            const result = await server.upload(`notes/${this.noteId}/file`, fileToUpload);
-
-            if (result.uploaded) {
-                toastService.showMessage(t("file_properties.upload_success"));
-
-                this.refresh();
-            } else {
-                toastService.showError(t("file_properties.upload_failed"));
-            }
-        });
-    }
-
-    async refreshWithNote(note: FNote) {
-        this.$widget.show();
-
-        if (!this.note) {
-            return;
-        }
-
-        this.$fileNoteId.text(note.noteId);
-        this.$fileName.text(note.getLabelValue("originalFileName") || "?");
-        this.$fileType.text(note.mime);
-
-        const blob = await this.note.getBlob();
-
-        this.$fileSize.text(utils.formatSize(blob?.contentLength ?? 0));
-
-        // open doesn't work for protected notes since it works through a browser which isn't in protected session
-        this.$openButton.toggle(!note.isProtected);
-        this.$downloadButton.toggle(!note.isProtected || protectedSessionHolder.isProtectedSessionAvailable());
-        this.$uploadNewRevisionButton.toggle(!note.isProtected || protectedSessionHolder.isProtectedSessionAvailable());
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/image_properties.ts b/apps/client/src/widgets/ribbon_widgets/image_properties.ts
deleted file mode 100644
index 7412561e7..000000000
--- a/apps/client/src/widgets/ribbon_widgets/image_properties.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-import server from "../../services/server.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import toastService from "../../services/toast.js";
-import openService from "../../services/open.js";
-import utils from "../../services/utils.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-
-const TPL = /*html*/`
-<div class="image-properties">
-    <div style="display: flex; justify-content: space-evenly; margin: 10px;">
-        <span>
-            <strong>${t("image_properties.original_file_name")}:</strong>
-            <span class="image-filename"></span>
-        </span>
-
-        <span>
-            <strong>${t("image_properties.file_type")}:</strong>
-            <span class="image-filetype"></span>
-        </span>
-
-        <span>
-            <strong>${t("image_properties.file_size")}:</strong>
-            <span class="image-filesize"></span>
-        </span>
-    </div>
-
-    <div class="no-print" style="display: flex; justify-content: space-evenly; margin: 10px;">
-        <button class="image-download btn btn-sm btn-primary" type="button">
-            <span class="bx bx-download"></span>
-            ${t("image_properties.download")}
-        </button>
-
-        <button class="image-open btn btn-sm btn-primary" type="button">
-            <span class="bx bx-link-external"></span>
-            ${t("image_properties.open")}
-        </button>
-
-        <button class="image-copy-reference-to-clipboard btn btn-sm btn-primary" type="button">
-            <span class="bx bx-copy"></span>
-            ${t("image_properties.copy_reference_to_clipboard")}
-        </button>
-
-        <button class="image-upload-new-revision btn btn-sm btn-primary" type="button">
-            <span class="bx bx-folder-open"></span>
-            ${t("image_properties.upload_new_revision")}
-        </button>
-    </div>
-
-    <input type="file" class="image-upload-new-revision-input" style="display: none">
-</div>`;
-
-export default class ImagePropertiesWidget extends NoteContextAwareWidget {
-
-    private $copyReferenceToClipboardButton!: JQuery<HTMLElement>;
-    private $uploadNewRevisionButton!: JQuery<HTMLElement>;
-    private $uploadNewRevisionInput!: JQuery<HTMLFormElement>;
-    private $fileName!: JQuery<HTMLElement>;
-    private $fileType!: JQuery<HTMLElement>;
-    private $fileSize!: JQuery<HTMLElement>;
-    private $openButton!: JQuery<HTMLElement>;
-    private $imageDownloadButton!: JQuery<HTMLElement>;
-
-    get name() {
-        return "imageProperties";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabImageProperties";
-    }
-
-    isEnabled() {
-        return this.note && this.note.type === "image";
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled(),
-            activate: true,
-            title: t("image_properties.title"),
-            icon: "bx bx-image"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$copyReferenceToClipboardButton = this.$widget.find(".image-copy-reference-to-clipboard");
-        this.$copyReferenceToClipboardButton.on("click", () => this.triggerEvent(`copyImageReferenceToClipboard`, { ntxId: this.noteContext?.ntxId }));
-
-        this.$uploadNewRevisionButton = this.$widget.find(".image-upload-new-revision");
-        this.$uploadNewRevisionInput = this.$widget.find(".image-upload-new-revision-input");
-
-        this.$fileName = this.$widget.find(".image-filename");
-        this.$fileType = this.$widget.find(".image-filetype");
-        this.$fileSize = this.$widget.find(".image-filesize");
-
-        this.$openButton = this.$widget.find(".image-open");
-        this.$openButton.on("click", () => this.noteId && this.note && openService.openNoteExternally(this.noteId, this.note.mime));
-
-        this.$imageDownloadButton = this.$widget.find(".image-download");
-        this.$imageDownloadButton.on("click", () => this.noteId && openService.downloadFileNote(this.noteId));
-
-        this.$uploadNewRevisionButton.on("click", () => {
-            this.$uploadNewRevisionInput.trigger("click");
-        });
-
-        this.$uploadNewRevisionInput.on("change", async () => {
-            const fileToUpload = this.$uploadNewRevisionInput[0].files[0]; // copy to allow reset below
-            this.$uploadNewRevisionInput.val("");
-
-            const result = await server.upload(`images/${this.noteId}`, fileToUpload);
-
-            if (result.uploaded) {
-                toastService.showMessage(t("image_properties.upload_success"));
-
-                await utils.clearBrowserCache();
-
-                this.refresh();
-            } else {
-                toastService.showError(t("image_properties.upload_failed", { message: result.message }));
-            }
-        });
-    }
-
-    async refreshWithNote(note: FNote) {
-        this.$widget.show();
-
-        const blob = await this.note?.getBlob();
-
-        this.$fileName.text(note.getLabelValue("originalFileName") || "?");
-        this.$fileSize.text(utils.formatSize(blob?.contentLength ?? 0));
-        this.$fileType.text(note.mime);
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts
deleted file mode 100644
index 2e2ac4615..000000000
--- a/apps/client/src/widgets/ribbon_widgets/inherited_attribute_list.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import AttributeDetailWidget from "../attribute_widgets/attribute_detail.js";
-import attributeRenderer from "../../services/attribute_renderer.js";
-import attributeService from "../../services/attributes.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-
-const TPL = /*html*/`
-<div class="inherited-attributes-widget">
-    <style>
-    .inherited-attributes-widget {
-        position: relative;
-    }
-
-    .inherited-attributes-container {
-        color: var(--muted-text-color);
-        max-height: 200px;
-        overflow: auto;
-        padding: 14px 12px 13px 12px;
-    }
-    </style>
-
-    <div class="inherited-attributes-container"></div>
-</div>`;
-
-export default class InheritedAttributesWidget extends NoteContextAwareWidget {
-
-    private attributeDetailWidget: AttributeDetailWidget;
-
-    private $container!: JQuery<HTMLElement>;
-
-    get name() {
-        return "inheritedAttributes";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabInheritedAttributes";
-    }
-
-    constructor() {
-        super();
-
-        this.attributeDetailWidget = new AttributeDetailWidget().contentSized().setParent(this);
-
-        this.child(this.attributeDetailWidget);
-    }
-
-    getTitle() {
-        return {
-            show: !this.note?.isLaunchBarConfig(),
-            title: t("inherited_attribute_list.title"),
-            icon: "bx bx-list-plus"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$container = this.$widget.find(".inherited-attributes-container");
-        this.$widget.append(this.attributeDetailWidget.render());
-    }
-
-    async refreshWithNote(note: FNote) {
-        this.$container.empty();
-
-        const inheritedAttributes = this.getInheritedAttributes(note);
-
-        if (inheritedAttributes.length === 0) {
-            this.$container.append(t("inherited_attribute_list.no_inherited_attributes"));
-            return;
-        }
-
-        for (const attribute of inheritedAttributes) {
-            const $attr = (await attributeRenderer.renderAttribute(attribute, false)).on("click", (e) => {
-                setTimeout(
-                    () =>
-                        this.attributeDetailWidget.showAttributeDetail({
-                            attribute: {
-                                noteId: attribute.noteId,
-                                type: attribute.type,
-                                name: attribute.name,
-                                value: attribute.value,
-                                isInheritable: attribute.isInheritable
-                            },
-                            isOwned: false,
-                            x: e.pageX,
-                            y: e.pageY
-                        }),
-                    100
-                );
-            });
-
-            this.$container.append($attr).append(" ");
-        }
-    }
-
-    getInheritedAttributes(note: FNote) {
-        const attrs = note.getAttributes().filter((attr) => attr.noteId !== this.noteId);
-
-        attrs.sort((a, b) => {
-            if (a.noteId === b.noteId) {
-                return a.position - b.position;
-            } else {
-                // inherited attributes should stay grouped: https://github.com/zadam/trilium/issues/3761
-                return a.noteId < b.noteId ? -1 : 1;
-            }
-        });
-
-        return attrs;
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows(this.componentId).find((attr) => attributeService.isAffecting(attr, this.note))) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts b/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts
deleted file mode 100644
index efe95007d..000000000
--- a/apps/client/src/widgets/ribbon_widgets/note_info_widget.ts
+++ /dev/null
@@ -1,173 +0,0 @@
-import { formatDateTime } from "../../utils/formatters.js";
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import server from "../../services/server.js";
-import utils from "../../services/utils.js";
-import type { EventData } from "../../components/app_context.js";
-import type FNote from "../../entities/fnote.js";
-
-const TPL = /*html*/`
-<div class="note-info-widget">
-    <style>
-        .note-info-widget {
-            padding: 12px;
-        }
-
-        .note-info-widget-table {
-            max-width: 100%;
-            display: block;
-            overflow-x: auto;
-            white-space: nowrap;
-        }
-
-        .note-info-widget-table td, .note-info-widget-table th {
-            padding: 5px;
-        }
-
-        .note-info-mime {
-            max-width: 13em;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-    </style>
-
-    <table class="note-info-widget-table">
-        <tr>
-            <th>${t("note_info_widget.note_id")}:</th>
-            <td class="note-info-note-id"></td>
-            <th>${t("note_info_widget.created")}:</th>
-            <td class="note-info-date-created"></td>
-            <th>${t("note_info_widget.modified")}:</th>
-            <td class="note-info-date-modified"></td>
-        </tr>
-        <tr>
-            <th>${t("note_info_widget.type")}:</th>
-            <td>
-                <span class="note-info-type"></span>
-                <span class="note-info-mime"></span>
-            </td>
-
-            <th title="${t("note_info_widget.note_size_info")}">${t("note_info_widget.note_size")}:</th>
-            <td colspan="3">
-                <button class="btn btn-sm calculate-button" style="padding: 0px 10px 0px 10px;">
-                    <span class="bx bx-calculator"></span> ${t("note_info_widget.calculate")}
-                </button>
-                <span class="note-sizes-wrapper">
-                    <span class="note-size"></span>
-                    <span class="subtree-size"></span>
-                </span>
-            </td>
-        </tr>
-    </table>
-</div>
-`;
-
-// TODO: Deduplicate with server
-interface NoteSizeResponse {
-    noteSize: number;
-}
-
-interface SubtreeSizeResponse {
-    subTreeNoteCount: number;
-    subTreeSize: number;
-}
-
-interface MetadataResponse {
-    dateCreated: number;
-    dateModified: number;
-}
-
-export default class NoteInfoWidget extends NoteContextAwareWidget {
-
-    private $noteId!: JQuery<HTMLElement>;
-    private $dateCreated!: JQuery<HTMLElement>;
-    private $dateModified!: JQuery<HTMLElement>;
-    private $type!: JQuery<HTMLElement>;
-    private $mime!: JQuery<HTMLElement>;
-    private $noteSizesWrapper!: JQuery<HTMLElement>;
-    private $noteSize!: JQuery<HTMLElement>;
-    private $subTreeSize!: JQuery<HTMLElement>;
-    private $calculateButton!: JQuery<HTMLElement>;
-
-    get name() {
-        return "noteInfo";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabNoteInfo";
-    }
-
-    isEnabled() {
-        return !!this.note;
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled(),
-            title: t("note_info_widget.title"),
-            icon: "bx bx-info-circle"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$noteId = this.$widget.find(".note-info-note-id");
-        this.$dateCreated = this.$widget.find(".note-info-date-created");
-        this.$dateModified = this.$widget.find(".note-info-date-modified");
-        this.$type = this.$widget.find(".note-info-type");
-        this.$mime = this.$widget.find(".note-info-mime");
-
-        this.$noteSizesWrapper = this.$widget.find(".note-sizes-wrapper");
-        this.$noteSize = this.$widget.find(".note-size");
-        this.$subTreeSize = this.$widget.find(".subtree-size");
-
-        this.$calculateButton = this.$widget.find(".calculate-button");
-        this.$calculateButton.on("click", async () => {
-            this.$noteSizesWrapper.show();
-            this.$calculateButton.hide();
-
-            this.$noteSize.empty().append($('<span class="bx bx-loader bx-spin"></span>'));
-            this.$subTreeSize.empty().append($('<span class="bx bx-loader bx-spin"></span>'));
-
-            const noteSizeResp = await server.get<NoteSizeResponse>(`stats/note-size/${this.noteId}`);
-            this.$noteSize.text(utils.formatSize(noteSizeResp.noteSize));
-
-            const subTreeResp = await server.get<SubtreeSizeResponse>(`stats/subtree-size/${this.noteId}`);
-
-            if (subTreeResp.subTreeNoteCount > 1) {
-                this.$subTreeSize.text(t("note_info_widget.subtree_size", { size: utils.formatSize(subTreeResp.subTreeSize), count: subTreeResp.subTreeNoteCount }));
-            } else {
-                this.$subTreeSize.text("");
-            }
-        });
-    }
-
-    async refreshWithNote(note: FNote) {
-        const metadata = await server.get<MetadataResponse>(`notes/${this.noteId}/metadata`);
-
-        this.$noteId.text(note.noteId);
-        this.$dateCreated.text(formatDateTime(metadata.dateCreated)).attr("title", metadata.dateCreated);
-
-        this.$dateModified.text(formatDateTime(metadata.dateModified)).attr("title", metadata.dateModified);
-
-        this.$type.text(note.type);
-
-        if (note.mime) {
-            this.$mime.text(`(${note.mime})`);
-        } else {
-            this.$mime.empty();
-        }
-
-        this.$calculateButton.show();
-        this.$noteSizesWrapper.hide();
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (this.noteId && (loadResults.isNoteReloaded(this.noteId) || loadResults.isNoteContentReloaded(this.noteId))) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/note_map.ts b/apps/client/src/widgets/ribbon_widgets/note_map.ts
deleted file mode 100644
index b47de7b95..000000000
--- a/apps/client/src/widgets/ribbon_widgets/note_map.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import NoteMapWidget from "../note_map.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<div class="note-map-ribbon-widget">
-    <style>
-        .note-map-ribbon-widget {
-            position: relative;
-        }
-
-        .note-map-ribbon-widget .note-map-container {
-            height: 300px;
-        }
-
-        .note-map-ribbon-widget .open-full-button, .note-map-ribbon-widget .collapse-button {
-            position: absolute;
-            right: 5px;
-            bottom: 5px;
-            z-index: 1000;
-        }
-
-        .style-resolver {
-            color: var(--muted-text-color);
-            display: none;
-        }
-    </style>
-
-    <button class="bx bx-arrow-to-bottom icon-action open-full-button" title="${t("note_map.open_full")}"></button>
-    <button class="bx bx-arrow-to-top icon-action collapse-button" style="display: none;" title="${t("note_map.collapse")}"></button>
-
-    <div class="note-map-container"></div>
-</div>`;
-
-export default class NoteMapRibbonWidget extends NoteContextAwareWidget {
-
-    private openState!: "small" | "full";
-    private noteMapWidget: NoteMapWidget;
-    private $container!: JQuery<HTMLElement>;
-    private $openFullButton!: JQuery<HTMLElement>;
-    private $collapseButton!: JQuery<HTMLElement>;
-
-    constructor() {
-        super();
-
-        this.noteMapWidget = new NoteMapWidget("ribbon");
-        this.child(this.noteMapWidget);
-    }
-
-    get name() {
-        return "noteMap";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabNoteMap";
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled(),
-            title: t("note_map.title"),
-            icon: "bx bxs-network-chart"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-        this.$container = this.$widget.find(".note-map-container");
-        this.$container.append(this.noteMapWidget.render());
-
-        this.openState = "small";
-
-        this.$openFullButton = this.$widget.find(".open-full-button");
-        this.$openFullButton.on("click", () => {
-            this.setFullHeight();
-
-            this.$openFullButton.hide();
-            this.$collapseButton.show();
-
-            this.openState = "full";
-
-            this.noteMapWidget.setDimensions();
-        });
-
-        this.$collapseButton = this.$widget.find(".collapse-button");
-        this.$collapseButton.on("click", () => {
-            this.setSmallSize();
-
-            this.$openFullButton.show();
-            this.$collapseButton.hide();
-
-            this.openState = "small";
-
-            this.noteMapWidget.setDimensions();
-        });
-
-        const handleResize = () => {
-            if (!this.noteMapWidget.graph) {
-                // no graph has been even rendered
-                return;
-            }
-
-            if (this.openState === "full") {
-                this.setFullHeight();
-            } else if (this.openState === "small") {
-                this.setSmallSize();
-            }
-        };
-
-        new ResizeObserver(handleResize).observe(this.$widget[0]);
-    }
-
-    setSmallSize() {
-        const SMALL_SIZE_HEIGHT = 300;
-        const width = this.$widget.width() ?? 0;
-
-        this.$widget.find(".note-map-container").height(SMALL_SIZE_HEIGHT).width(width);
-    }
-
-    setFullHeight() {
-        const { top } = this.$widget[0].getBoundingClientRect();
-
-        const height = ($(window).height() ?? 0) - top;
-        const width = this.$widget.width() ?? 0;
-
-        this.$widget.find(".note-map-container")
-            .height(height)
-            .width(width);
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/note_paths.ts b/apps/client/src/widgets/ribbon_widgets/note_paths.ts
deleted file mode 100644
index 8681bfd21..000000000
--- a/apps/client/src/widgets/ribbon_widgets/note_paths.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import treeService from "../../services/tree.js";
-import linkService from "../../services/link.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-import type { NotePathRecord } from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-
-const TPL = /*html*/`
-<div class="note-paths-widget">
-    <style>
-    .note-paths-widget {
-        padding: 12px;
-        max-height: 300px;
-        overflow-y: auto;
-    }
-
-    .note-path-list {
-        margin-top: 10px;
-    }
-
-    .note-path-list .path-current a {
-        font-weight: bold;
-    }
-
-    .note-path-list .path-archived a {
-        color: var(--muted-text-color) !important;
-    }
-
-    .note-path-list .path-search a {
-        font-style: italic;
-    }
-    </style>
-
-    <div class="note-path-intro"></div>
-
-    <ul class="note-path-list"></ul>
-
-    <button class="btn btn-sm" data-trigger-command="cloneNoteIdsTo">${t("note_paths.clone_button")}</button>
-</div>`;
-
-export default class NotePathsWidget extends NoteContextAwareWidget {
-
-    private $notePathIntro!: JQuery<HTMLElement>;
-    private $notePathList!: JQuery<HTMLElement>;
-
-    get name() {
-        return "notePaths";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabNotePaths";
-    }
-
-    getTitle() {
-        return {
-            show: true,
-            title: t("note_paths.title"),
-            icon: "bx bx-collection"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$notePathIntro = this.$widget.find(".note-path-intro");
-        this.$notePathList = this.$widget.find(".note-path-list");
-    }
-
-    async refreshWithNote(note: FNote) {
-        this.$notePathList.empty();
-
-        if (!this.note || this.noteId === "root") {
-            this.$notePathList.empty().append(await this.getRenderedPath(["root"]));
-
-            return;
-        }
-
-        const sortedNotePaths = this.note.getSortedNotePathRecords(this.hoistedNoteId).filter((notePath) => !notePath.isHidden);
-
-        if (sortedNotePaths.length > 0) {
-            this.$notePathIntro.text(t("note_paths.intro_placed"));
-        } else {
-            this.$notePathIntro.text(t("note_paths.intro_not_placed"));
-        }
-
-        const renderedPaths: JQuery<HTMLElement>[] = [];
-
-        for (const notePathRecord of sortedNotePaths) {
-            const notePath = notePathRecord.notePath;
-
-            renderedPaths.push(await this.getRenderedPath(notePath, notePathRecord));
-        }
-
-        this.$notePathList.empty().append(...renderedPaths);
-    }
-
-    async getRenderedPath(notePath: string[], notePathRecord: NotePathRecord | null = null) {
-        const $pathItem = $("<li>");
-        const pathSegments: string[] = [];
-        const lastIndex = notePath.length - 1;
-
-        for (let i = 0; i < notePath.length; i++) {
-            const noteId = notePath[i];
-            pathSegments.push(noteId);
-            const title = await treeService.getNoteTitle(noteId);
-            const $noteLink = await linkService.createLink(pathSegments.join("/"), { title });
-
-            $noteLink.find("a").addClass("no-tooltip-preview tn-link");
-            $pathItem.append($noteLink);
-
-            if (i != lastIndex) {
-                $pathItem.append(" / ");
-            }
-        }
-
-        const icons: string[] = [];
-
-        if (this.notePath === notePath.join("/")) {
-            $pathItem.addClass("path-current");
-        }
-
-        if (!notePathRecord || notePathRecord.isInHoistedSubTree) {
-            $pathItem.addClass("path-in-hoisted-subtree");
-        } else {
-            icons.push(`<span class="bx bx-trending-up" title="${t("note_paths.outside_hoisted")}"></span>`);
-        }
-
-        if (notePathRecord?.isArchived) {
-            $pathItem.addClass("path-archived");
-
-            icons.push(`<span class="bx bx-archive" title="${t("note_paths.archived")}"></span>`);
-        }
-
-        if (notePathRecord?.isSearch) {
-            $pathItem.addClass("path-search");
-
-            icons.push(`<span class="bx bx-search" title="${t("note_paths.search")}"></span>`);
-        }
-
-        if (icons.length > 0) {
-            $pathItem.append(` ${icons.join(" ")}`);
-        }
-
-        return $pathItem;
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getBranchRows().find((branch) => branch.noteId === this.noteId) || (this.noteId != null && loadResults.isNoteReloaded(this.noteId))) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/note_properties.ts b/apps/client/src/widgets/ribbon_widgets/note_properties.ts
deleted file mode 100644
index eb104411d..000000000
--- a/apps/client/src/widgets/ribbon_widgets/note_properties.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import type FNote from "../../entities/fnote.js";
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-
-const TPL = /*html*/`
-<div class="note-properties-widget">
-    <style>
-        .note-properties-widget {
-            padding: 12px;
-            color: var(--muted-text-color);
-        }
-    </style>
-
-    <div style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
-        ${t("note_properties.this_note_was_originally_taken_from")} <a class="page-url external"></a>
-    </div>
-</div>`;
-
-/**
- * TODO: figure out better name or conceptualize better.
- */
-export default class NotePropertiesWidget extends NoteContextAwareWidget {
-
-    private $pageUrl!: JQuery<HTMLElement>;
-
-    isEnabled() {
-        return this.note && !!this.note.getLabelValue("pageUrl");
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled(),
-            activate: true,
-            title: t("note_properties.info"),
-            icon: "bx bx-info-square"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$pageUrl = this.$widget.find(".page-url");
-    }
-
-    async refreshWithNote(note: FNote) {
-        const pageUrl = note.getLabelValue("pageUrl");
-
-        this.$pageUrl
-            .attr("href", pageUrl)
-            .attr("title", pageUrl)
-            .text(pageUrl ?? "");
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts b/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts
deleted file mode 100644
index dab466569..000000000
--- a/apps/client/src/widgets/ribbon_widgets/owned_attribute_list.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-import { t } from "../../services/i18n.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import AttributeDetailWidget from "../attribute_widgets/attribute_detail.js";
-import AttributeEditorWidget from "../attribute_widgets/attribute_editor.js";
-import type { CommandListenerData } from "../../components/app_context.js";
-import type FAttribute from "../../entities/fattribute.js";
-
-const TPL = /*html*/`
-<div class="attribute-list">
-    <style>
-        .attribute-list {
-            margin-left: 7px;
-            margin-right: 7px;
-            margin-top: 5px;
-            margin-bottom: 2px;
-            position: relative;
-        }
-
-        .attribute-list-editor p {
-            margin: 0 !important;
-        }
-    </style>
-
-    <div class="attr-editor-placeholder"></div>
-</div>
-`;
-
-export default class OwnedAttributeListWidget extends NoteContextAwareWidget {
-
-    private attributeDetailWidget: AttributeDetailWidget;
-    private attributeEditorWidget: AttributeEditorWidget;
-    private $title!: JQuery<HTMLElement>;
-
-    get name() {
-        return "ownedAttributes";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabOwnedAttributes";
-    }
-
-    constructor() {
-        super();
-
-        this.attributeDetailWidget = new AttributeDetailWidget().contentSized().setParent(this);
-
-        this.attributeEditorWidget = new AttributeEditorWidget(this.attributeDetailWidget).contentSized().setParent(this);
-
-        this.child(this.attributeEditorWidget, this.attributeDetailWidget);
-    }
-
-    getTitle() {
-        return {
-            show: !this.note?.isLaunchBarConfig(),
-            title: t("owned_attribute_list.owned_attributes"),
-            icon: "bx bx-list-check"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$widget.find(".attr-editor-placeholder").replaceWith(this.attributeEditorWidget.render());
-        this.$widget.append(this.attributeDetailWidget.render());
-
-        this.$title = $("<div>");
-    }
-
-    async saveAttributesCommand() {
-        await this.attributeEditorWidget.save();
-    }
-
-    async reloadAttributesCommand() {
-        await this.attributeEditorWidget.refresh();
-    }
-
-    async updateAttributeListCommand({ attributes }: CommandListenerData<"updateAttributeList">) {
-        // TODO: See why we need FAttribute[] and Attribute[]
-        await this.attributeEditorWidget.updateAttributeList(attributes as FAttribute[]);
-    }
-
-    focus() {
-        this.attributeEditorWidget.focus();
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/script_executor.ts b/apps/client/src/widgets/ribbon_widgets/script_executor.ts
deleted file mode 100644
index 3b0b96278..000000000
--- a/apps/client/src/widgets/ribbon_widgets/script_executor.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import keyboardActionService from "../../services/keyboard_actions.js";
-import { t } from "../../services/i18n.js";
-import type FNote from "../../entities/fnote.js";
-
-const TPL = /*html*/`
-<div class="script-runner-widget">
-    <style>
-        .script-runner-widget {
-            padding: 12px;
-            color: var(--muted-text-color);
-        }
-
-        .execute-description {
-            margin-bottom: 10px;
-        }
-    </style>
-
-    <div class="execute-description"></div>
-
-    <div style="display: flex; justify-content: space-around">
-        <button data-trigger-command="runActiveNote" class="execute-button btn btn-sm"></button>
-    </div>
-</div>`;
-
-export default class ScriptExecutorWidget extends NoteContextAwareWidget {
-
-    private $executeButton!: JQuery<HTMLElement>;
-    private $executeDescription!: JQuery<HTMLElement>;
-
-    isEnabled() {
-        return (
-            super.isEnabled() &&
-            this.note &&
-            (this.note.mime.startsWith("application/javascript") || this.isTriliumSqlite()) &&
-            (this.note.hasLabel("executeDescription") || this.note.hasLabel("executeButton"))
-        );
-    }
-
-    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"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$executeButton = this.$widget.find(".execute-button");
-        this.$executeDescription = this.$widget.find(".execute-description");
-    }
-
-    async refreshWithNote(note: FNote) {
-        const executeTitle = note.getLabelValue("executeButton") || (this.isTriliumSqlite() ? t("script_executor.execute_query") : t("script_executor.execute_script"));
-
-        this.$executeButton.text(executeTitle);
-        this.$executeButton.attr("title", executeTitle);
-        keyboardActionService.updateDisplayedShortcuts(this.$widget);
-
-        const executeDescription = note.getLabelValue("executeDescription");
-
-        if (executeDescription) {
-            this.$executeDescription.show().html(executeDescription);
-        } else {
-            this.$executeDescription.empty().hide();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/search_definition.ts b/apps/client/src/widgets/ribbon_widgets/search_definition.ts
deleted file mode 100644
index 2439b590f..000000000
--- a/apps/client/src/widgets/ribbon_widgets/search_definition.ts
+++ /dev/null
@@ -1,335 +0,0 @@
-import { t } from "../../services/i18n.js";
-import server from "../../services/server.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import froca from "../../services/froca.js";
-import ws from "../../services/ws.js";
-import toastService from "../../services/toast.js";
-import treeService from "../../services/tree.js";
-
-import SearchString from "../search_options/search_string.js";
-import FastSearch from "../search_options/fast_search.js";
-import Ancestor from "../search_options/ancestor.js";
-import IncludeArchivedNotes from "../search_options/include_archived_notes.js";
-import OrderBy from "../search_options/order_by.js";
-import SearchScript from "../search_options/search_script.js";
-import Limit from "../search_options/limit.js";
-import Debug from "../search_options/debug.js";
-import appContext, { type EventData } from "../../components/app_context.js";
-import bulkActionService from "../../services/bulk_action.js";
-import { Dropdown } from "bootstrap";
-import type FNote from "../../entities/fnote.js";
-import type { AttributeType } from "../../entities/fattribute.js";
-import { renderReactWidget } from "../react/ReactBasicWidget.jsx";
-
-const TPL = /*html*/`
-<div class="search-definition-widget">
-    <style>
-    .search-setting-table {
-        margin-top: 0;
-        margin-bottom: 7px;
-        width: 100%;
-        border-collapse: separate;
-        border-spacing: 10px;
-    }
-
-    .search-setting-table div {
-        white-space: nowrap;
-    }
-
-    .search-setting-table .button-column {
-        /* minimal width so that table remains static sized and most space remains for middle column with settings */
-        width: 50px;
-        white-space: nowrap;
-        text-align: right;
-    }
-
-    .search-setting-table .title-column {
-        /* minimal width so that table remains static sized and most space remains for middle column with settings */
-        width: 50px;
-        white-space: nowrap;
-    }
-
-    .search-setting-table .button-column .dropdown-menu {
-        white-space: normal;
-    }
-
-    .attribute-list hr {
-        height: 1px;
-        border-color: var(--main-border-color);
-        position: relative;
-        top: 4px;
-        margin-top: 5px;
-        margin-bottom: 0;
-    }
-
-    .search-definition-widget input:invalid {
-        border: 3px solid red;
-    }
-
-    .add-search-option button {
-        margin-top: 5px; /* to give some spacing when buttons overflow on the next line */
-    }
-
-    .dropdown-header {
-        background-color: var(--accented-background-color);
-    }
-    </style>
-
-    <div class="search-settings">
-        <table class="search-setting-table">
-            <tr>
-                <td class="title-column">${t("search_definition.add_search_option")}</td>
-                <td colspan="2" class="add-search-option">
-                    <button type="button" class="btn btn-sm" data-search-option-add="searchString">
-                        <span class="bx bx-text"></span>
-                        ${t("search_definition.search_string")}
-                    </button>
-
-                    <button type="button" class="btn btn-sm" data-search-option-add="searchScript">
-                        <span class="bx bx-code"></span>
-                        ${t("search_definition.search_script")}
-                    </button>
-
-                    <button type="button" class="btn btn-sm" data-search-option-add="ancestor">
-                        <span class="bx bx-filter-alt"></span>
-                        ${t("search_definition.ancestor")}
-                    </button>
-
-                    <button type="button" class="btn btn-sm" data-search-option-add="fastSearch"
-                        title="${t("search_definition.fast_search_description")}">
-                        <span class="bx bx-run"></span>
-                        ${t("search_definition.fast_search")}
-                    </button>
-
-                    <button type="button" class="btn btn-sm" data-search-option-add="includeArchivedNotes"
-                        title="${t("search_definition.include_archived_notes_description")}">
-                        <span class="bx bx-archive"></span>
-                        ${t("search_definition.include_archived")}
-                    </button>
-
-                    <button type="button" class="btn btn-sm" data-search-option-add="orderBy">
-                        <span class="bx bx-arrow-from-top"></span>
-                        ${t("search_definition.order_by")}
-                    </button>
-
-                    <button type="button" class="btn btn-sm" data-search-option-add="limit" title="${t("search_definition.limit_description")}">
-                        <span class="bx bx-stop"></span>
-                        ${t("search_definition.limit")}
-                    </button>
-
-                    <button type="button" class="btn btn-sm" data-search-option-add="debug" title="${t("search_definition.debug_description")}">
-                        <span class="bx bx-bug"></span>
-                        ${t("search_definition.debug")}
-                    </button>
-
-                    <div class="dropdown" style="display: inline-block;">
-                      <button class="btn btn-sm dropdown-toggle action-add-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                        <span class="bx bxs-zap"></span>
-                        ${t("search_definition.action")}
-                      </button>
-                      <div class="dropdown-menu action-list"></div>
-                    </div>
-                </td>
-            </tr>
-            <tbody class="search-options"></tbody>
-            <tbody class="action-options"></tbody>
-            <tbody>
-                <tr>
-                    <td colspan="3">
-                        <div style="display: flex; justify-content: space-evenly">
-                            <button type="button" class="btn btn-sm search-button">
-                                <span class="bx bx-search"></span>
-                                ${t("search_definition.search_button")}
-                            </button>
-
-                            <button type="button" class="btn btn-sm search-and-execute-button">
-                                <span class="bx bxs-zap"></span>
-                                ${t("search_definition.search_execute")}
-                            </button>
-
-                            <button type="button" class="btn btn-sm save-to-note-button">
-                                <span class="bx bx-save"></span>
-                                ${t("search_definition.save_to_note")}
-                            </button>
-                        </div>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-</div>`;
-
-const OPTION_CLASSES = [SearchString, SearchScript, Ancestor, FastSearch, IncludeArchivedNotes, OrderBy, Limit, Debug];
-
-// TODO: Deduplicate with server
-interface SaveSearchNoteResponse {
-    notePath: string;
-}
-
-export default class SearchDefinitionWidget extends NoteContextAwareWidget {
-
-    private $component!: JQuery<HTMLElement>;
-    private $actionList!: JQuery<HTMLElement>;
-    private $searchOptions!: JQuery<HTMLElement>;
-    private $searchButton!: JQuery<HTMLElement>;
-    private $searchAndExecuteButton!: JQuery<HTMLElement>;
-    private $saveToNoteButton!: JQuery<HTMLElement>;
-    private $actionOptions!: JQuery<HTMLElement>;
-
-    get name() {
-        return "searchDefinition";
-    }
-
-    isEnabled() {
-        return this.note && this.note.type === "search";
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled(),
-            activate: true,
-            title: t("search_definition.search_parameters"),
-            icon: "bx bx-search"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-        this.$component = this.$widget.find(".search-definition-widget");
-        this.$actionList = this.$widget.find(".action-list");
-
-        for (const actionGroup of bulkActionService.ACTION_GROUPS) {
-            this.$actionList.append($('<h6 class="dropdown-header">').append(actionGroup.title));
-
-            for (const action of actionGroup.actions) {
-                this.$actionList.append($('<a class="dropdown-item" href="#">').attr("data-action-add", action.actionName).text(action.actionTitle));
-            }
-        }
-
-        this.$widget.on("click", "[data-search-option-add]", async (event) => {
-            const searchOptionName = $(event.target).attr("data-search-option-add");
-            const clazz = OPTION_CLASSES.find((SearchOptionClass) => SearchOptionClass.optionName === searchOptionName);
-
-            if (clazz && this.noteId) {
-                await clazz.create(this.noteId);
-            } else {
-                logError(t("search_definition.unknown_search_option", { searchOptionName }));
-            }
-
-            this.refresh();
-        });
-
-        this.$widget.on("click", "[data-action-add]", async (event) => {
-            Dropdown.getOrCreateInstance(this.$widget.find(".action-add-toggle")[0]);
-
-            const actionName = $(event.target).attr("data-action-add");
-
-            if (this.noteId && actionName) {
-                await bulkActionService.addAction(this.noteId, actionName);
-            }
-
-            this.refresh();
-        });
-
-        this.$searchOptions = this.$widget.find(".search-options");
-        this.$actionOptions = this.$widget.find(".action-options");
-
-        this.$searchButton = this.$widget.find(".search-button");
-        this.$searchButton.on("click", () => this.triggerCommand("refreshResults"));
-
-        this.$searchAndExecuteButton = this.$widget.find(".search-and-execute-button");
-        this.$searchAndExecuteButton.on("click", () => this.searchAndExecute());
-
-        this.$saveToNoteButton = this.$widget.find(".save-to-note-button");
-        this.$saveToNoteButton.on("click", async () => {
-            const { notePath } = await server.post<SaveSearchNoteResponse>("special-notes/save-search-note", { searchNoteId: this.noteId });
-
-            await ws.waitForMaxKnownEntityChangeId();
-
-            await appContext.tabManager.getActiveContext()?.setNote(notePath);
-            // Note the {{- notePathTitle}} in json file is not typo, it's unescaping
-            // See https://www.i18next.com/translation-function/interpolation#unescape
-            toastService.showMessage(t("search_definition.search_note_saved", { notePathTitle: await treeService.getNotePathTitle(notePath) }));
-        });
-    }
-
-    async refreshResultsCommand() {
-        if (!this.noteId) {
-            return;
-        }
-
-        try {
-            const result = await froca.loadSearchNote(this.noteId);
-
-            if (result && result.error) {
-                this.handleEvent("showSearchError", { error: result.error });
-            }
-        } catch (e: any) {
-            toastService.showError(e.message);
-        }
-
-        this.triggerEvent("searchRefreshed", { ntxId: this.noteContext?.ntxId });
-    }
-
-    async refreshSearchDefinitionCommand() {
-        await this.refresh();
-    }
-
-    async refreshWithNote(note: FNote) {
-        if (!this.note) {
-            return;
-        }
-
-        this.$component.show();
-
-        this.$saveToNoteButton.toggle(note.isHiddenCompletely());
-
-        this.$searchOptions.empty();
-
-        for (const OptionClass of OPTION_CLASSES) {
-            const { attributeType, optionName } = OptionClass;
-
-            const attr = this.note.getAttribute(attributeType as AttributeType, optionName);
-
-            this.$widget.find(`[data-search-option-add='${optionName}'`).toggle(!attr);
-
-            if (attr) {
-                const searchOption = new OptionClass(attr, this.note).setParent(this);
-                this.child(searchOption);
-
-                const renderedEl = searchOption.render();
-                if (renderedEl) {
-                    this.$searchOptions.append(renderedEl);
-                }
-            }
-        }
-
-        const actions = bulkActionService.parseActions(this.note);
-        const renderedEls = actions
-            .map((action) => renderReactWidget(this, action.doRender()))
-            .filter((e) => e) as JQuery<HTMLElement>[];
-
-        this.$actionOptions.empty().append(...renderedEls);
-        this.$searchAndExecuteButton.css("visibility", actions.length > 0 ? "visible" : "_hidden");
-    }
-
-    getContent() {
-        return "";
-    }
-
-    async searchAndExecute() {
-        await server.post(`search-and-execute-note/${this.noteId}`);
-
-        this.triggerCommand("refreshResults");
-
-        toastService.showMessage(t("search_definition.actions_executed"), 3000);
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        // only refreshing deleted attrs, otherwise components update themselves
-        if (loadResults.getAttributeRows().find((attrRow) => attrRow.type === "label" && attrRow.name === "action" && attrRow.isDeleted)) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/ribbon_widgets/similar_notes.ts b/apps/client/src/widgets/ribbon_widgets/similar_notes.ts
deleted file mode 100644
index e8e867b64..000000000
--- a/apps/client/src/widgets/ribbon_widgets/similar_notes.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-import { t } from "../../services/i18n.js";
-import linkService from "../../services/link.js";
-import server from "../../services/server.js";
-import froca from "../../services/froca.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import type FNote from "../../entities/fnote.js";
-import type { EventData } from "../../components/app_context.js";
-
-const TPL = /*html*/`
-<div class="similar-notes-widget">
-    <style>
-    .similar-notes-wrapper {
-        max-height: 200px;
-        overflow: auto;
-        padding: 12px;
-    }
-
-    .similar-notes-wrapper a {
-        display: inline-block;
-        border: 1px dotted var(--main-border-color);
-        border-radius: 20px;
-        background-color: var(--accented-background-color);
-        padding: 0 10px 0 10px;
-        margin: 0 3px 0 3px;
-        max-width: 10em;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        overflow: hidden;
-    }
-    </style>
-
-    <div class="similar-notes-wrapper"></div>
-</div>
-`;
-
-// TODO: Deduplicate with server
-interface SimilarNote {
-    score: number;
-    notePath: string[];
-    noteId: string;
-}
-
-export default class SimilarNotesWidget extends NoteContextAwareWidget {
-
-    private $similarNotesWrapper!: JQuery<HTMLElement>;
-    private title?: string;
-    private rendered?: boolean;
-
-    get name() {
-        return "similarNotes";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabSimilarNotes";
-    }
-
-    isEnabled() {
-        return super.isEnabled() && this.note?.type !== "search" && !this.note?.isLabelTruthy("similarNotesWidgetDisabled");
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled(),
-            title: t("similar_notes.title"),
-            icon: "bx bx-bar-chart"
-        };
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.contentSized();
-
-        this.$similarNotesWrapper = this.$widget.find(".similar-notes-wrapper");
-    }
-
-    async refreshWithNote(note: FNote) {
-        if (!this.note) {
-            return;
-        }
-
-        // remember which title was when we found the similar notes
-        this.title = this.note.title;
-
-        const similarNotes = await server.get<SimilarNote[]>(`similar-notes/${this.noteId}`);
-
-        if (similarNotes.length === 0) {
-            this.$similarNotesWrapper.empty().append(t("similar_notes.no_similar_notes_found"));
-
-            return;
-        }
-
-        const noteIds = similarNotes.flatMap((note) => note.notePath);
-
-        await froca.getNotes(noteIds, true); // preload all at once
-
-        const $list = $("<div>");
-
-        for (const similarNote of similarNotes) {
-            const note = await froca.getNote(similarNote.noteId, true);
-
-            if (!note) {
-                continue;
-            }
-
-            const $item = (await linkService.createLink(similarNote.notePath.join("/"))).css("font-size", 24 * (1 - 1 / (1 + similarNote.score)));
-
-            $list.append($item);
-        }
-
-        this.$similarNotesWrapper.empty().append($list);
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (this.note && this.title !== this.note.title) {
-            this.rendered = false;
-
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/search_options/abstract_search_option.ts b/apps/client/src/widgets/search_options/abstract_search_option.ts
deleted file mode 100644
index 42632b24b..000000000
--- a/apps/client/src/widgets/search_options/abstract_search_option.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-import server from "../../services/server.js";
-import ws from "../../services/ws.js";
-import Component from "../../components/component.js";
-import utils from "../../services/utils.js";
-import { t } from "../../services/i18n.js";
-import type FAttribute from "../../entities/fattribute.js";
-import type FNote from "../../entities/fnote.js";
-import type { AttributeType } from "../../entities/fattribute.js";
-
-export default abstract class AbstractSearchOption extends Component {
-
-    private attribute: FAttribute;
-    protected note: FNote;
-
-    constructor(attribute: FAttribute, note: FNote) {
-        super();
-
-        this.attribute = attribute;
-        this.note = note;
-    }
-
-    static async setAttribute(noteId: string, type: AttributeType, name: string, value: string = "") {
-        await server.put(`notes/${noteId}/set-attribute`, { type, name, value });
-
-        await ws.waitForMaxKnownEntityChangeId();
-    }
-
-    async setAttribute(type: AttributeType, name: string, value: string = "") {
-        // TODO: Find a better pattern.
-        await (this.constructor as any).setAttribute(this.note.noteId, type, name, value);
-    }
-
-    render() {
-        try {
-            const $rendered = this.doRender();
-
-            $rendered
-                .find(".search-option-del")
-                .on("click", () => this.deleteOption())
-                .attr("title", t("abstract_search_option.remove_this_search_option"));
-
-            utils.initHelpDropdown($rendered);
-
-            return $rendered;
-        } catch (e: any) {
-            logError(t("abstract_search_option.failed_rendering", { dto: JSON.stringify(this.attribute.dto), error: e.message, stack: e.stack }));
-            return null;
-        }
-    }
-
-    abstract doRender(): JQuery<HTMLElement>;
-
-    async deleteOption() {
-        // TODO: Find a better pattern.
-        await this.deleteAttribute((this.constructor as any).attributeType, (this.constructor as any).optionName);
-
-        await ws.waitForMaxKnownEntityChangeId();
-
-        await this.triggerCommand("refreshSearchDefinition");
-    }
-
-    async deleteAttribute(type: AttributeType, name: string) {
-        for (const attr of this.note.getOwnedAttributes()) {
-            if (attr.type === type && attr.name === name) {
-                await server.remove(`notes/${this.note.noteId}/attributes/${attr.attributeId}`);
-            }
-        }
-    }
-}
diff --git a/apps/client/src/widgets/search_options/ancestor.ts b/apps/client/src/widgets/search_options/ancestor.ts
deleted file mode 100644
index 8a29b675a..000000000
--- a/apps/client/src/widgets/search_options/ancestor.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import noteAutocompleteService from "../../services/note_autocomplete.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr>
-    <td colspan="2">
-        <div style="display: flex; align-items: center;">
-            <div style="margin-right: 10px">${t("ancestor.label")}:</div>
-            <div class="input-group" style="flex-shrink: 2">
-                <input class="ancestor form-control" placeholder="${t("ancestor.placeholder")}">
-            </div>
-
-            <div style="margin-left: 10px; margin-right: 10px">${t("ancestor.depth_label")}:</div>
-
-            <select name="depth" class="form-select d-inline ancestor-depth" style="flex-shrink: 3">
-                <option value="">${t("ancestor.depth_doesnt_matter")}</option>
-                <option value="eq1">${t("ancestor.depth_eq", { count: 1 })} (${t("ancestor.direct_children")})</option>
-                <option value="eq2">${t("ancestor.depth_eq", { count: 2 })}</option>
-                <option value="eq3">${t("ancestor.depth_eq", { count: 3 })}</option>
-                <option value="eq4">${t("ancestor.depth_eq", { count: 4 })}</option>
-                <option value="eq5">${t("ancestor.depth_eq", { count: 5 })}</option>
-                <option value="eq6">${t("ancestor.depth_eq", { count: 6 })}</option>
-                <option value="eq7">${t("ancestor.depth_eq", { count: 7 })}</option>
-                <option value="eq8">${t("ancestor.depth_eq", { count: 8 })}</option>
-                <option value="eq9">${t("ancestor.depth_eq", { count: 9 })}</option>
-                <option value="gt0">${t("ancestor.depth_gt", { count: 0 })}</option>
-                <option value="gt1">${t("ancestor.depth_gt", { count: 1 })}</option>
-                <option value="gt2">${t("ancestor.depth_gt", { count: 2 })}</option>
-                <option value="gt3">${t("ancestor.depth_gt", { count: 3 })}</option>
-                <option value="gt4">${t("ancestor.depth_gt", { count: 4 })}</option>
-                <option value="gt5">${t("ancestor.depth_gt", { count: 5 })}</option>
-                <option value="gt6">${t("ancestor.depth_gt", { count: 6 })}</option>
-                <option value="gt7">${t("ancestor.depth_gt", { count: 7 })}</option>
-                <option value="gt8">${t("ancestor.depth_gt", { count: 8 })}</option>
-                <option value="gt9">${t("ancestor.depth_gt", { count: 9 })}</option>
-                <option value="lt2">${t("ancestor.depth_lt", { count: 2 })}</option>
-                <option value="lt3">${t("ancestor.depth_lt", { count: 3 })}</option>
-                <option value="lt4">${t("ancestor.depth_lt", { count: 4 })}</option>
-                <option value="lt5">${t("ancestor.depth_lt", { count: 5 })}</option>
-                <option value="lt6">${t("ancestor.depth_lt", { count: 6 })}</option>
-                <option value="lt7">${t("ancestor.depth_lt", { count: 7 })}</option>
-                <option value="lt8">${t("ancestor.depth_lt", { count: 8 })}</option>
-                <option value="lt9">${t("ancestor.depth_lt", { count: 9 })}</option>
-            </select>
-        </div>
-    </td>
-    <td class="button-column">
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class Ancestor extends AbstractSearchOption {
-    static get optionName() {
-        return "ancestor";
-    }
-    static get attributeType() {
-        return "relation";
-    }
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "relation", "ancestor", "root");
-    }
-
-    doRender() {
-        const $option = $(TPL);
-        const $ancestor = $option.find(".ancestor");
-        const $ancestorDepth = $option.find(".ancestor-depth");
-        noteAutocompleteService.initNoteAutocomplete($ancestor);
-
-        $ancestor.on("autocomplete:closed", async () => {
-            const ancestorNoteId = $ancestor.getSelectedNoteId();
-
-            if (ancestorNoteId) {
-                await this.setAttribute("relation", "ancestor", ancestorNoteId);
-            }
-        });
-
-        $ancestorDepth.on("change", async () => {
-            const ancestorDepth = String($ancestorDepth.val());
-
-            if (ancestorDepth) {
-                await this.setAttribute("label", "ancestorDepth", ancestorDepth);
-            } else {
-                await this.deleteAttribute("label", "ancestorDepth");
-            }
-        });
-
-        const ancestorNoteId = this.note.getRelationValue("ancestor");
-
-        if (ancestorNoteId && ancestorNoteId !== "root") {
-            $ancestor.setNote(ancestorNoteId);
-        }
-
-        const ancestorDepth = this.note.getLabelValue("ancestorDepth");
-
-        if (ancestorDepth) {
-            $ancestorDepth.val(ancestorDepth);
-        }
-
-        return $option;
-    }
-
-    async deleteOption() {
-        await this.deleteAttribute("label", "ancestorDepth");
-
-        await super.deleteOption();
-    }
-}
diff --git a/apps/client/src/widgets/search_options/debug.ts b/apps/client/src/widgets/search_options/debug.ts
deleted file mode 100644
index fb19541b4..000000000
--- a/apps/client/src/widgets/search_options/debug.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr data-search-option-conf="debug">
-    <td colSpan="2">
-        <span class="bx bx-bug"></span>
-        ${t("debug.debug")}
-    </td>
-    <td class="button-column">
-        <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-            <div class="dropdown-menu dropdown-menu-right p-4">
-                <p>${t("debug.debug_info")}</p>
-                ${t("debug.access_info")}
-            </div>
-        </div>
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class Debug extends AbstractSearchOption {
-    static get optionName() {
-        return "debug";
-    }
-    static get attributeType() {
-        return "label";
-    }
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "label", "debug");
-    }
-
-    doRender() {
-        return $(TPL);
-    }
-}
diff --git a/apps/client/src/widgets/search_options/fast_search.ts b/apps/client/src/widgets/search_options/fast_search.ts
deleted file mode 100644
index 52cc4acfc..000000000
--- a/apps/client/src/widgets/search_options/fast_search.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr data-search-option-conf="fastSearch">
-    <td colSpan="2">
-        <span class="bx bx-run"></span>
-        ${t("fast_search.fast_search")}
-    </td>
-    <td class="button-column">
-        <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-            <div class="dropdown-menu dropdown-menu-right p-4">
-                ${t("fast_search.description")}
-            </div>
-        </div>
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class FastSearch extends AbstractSearchOption {
-    static get optionName() {
-        return "fastSearch";
-    }
-    static get attributeType() {
-        return "label";
-    }
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "label", "fastSearch");
-    }
-
-    doRender() {
-        return $(TPL);
-    }
-}
diff --git a/apps/client/src/widgets/search_options/include_archived_notes.ts b/apps/client/src/widgets/search_options/include_archived_notes.ts
deleted file mode 100644
index 7e8eea778..000000000
--- a/apps/client/src/widgets/search_options/include_archived_notes.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr data-search-option-conf="includeArchivedNotes">
-    <td colspan="2">
-        <span class="bx bx-archive"></span>
-        ${t("include_archived_notes.include_archived_notes")}
-    </td>
-    <td class="button-column">
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class IncludeArchivedNotes extends AbstractSearchOption {
-    static get optionName() {
-        return "includeArchivedNotes";
-    }
-    static get attributeType() {
-        return "label";
-    }
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "label", "includeArchivedNotes");
-    }
-
-    doRender() {
-        return $(TPL);
-    }
-}
diff --git a/apps/client/src/widgets/search_options/limit.ts b/apps/client/src/widgets/search_options/limit.ts
deleted file mode 100644
index 20fe0ec0a..000000000
--- a/apps/client/src/widgets/search_options/limit.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr data-search-option-conf="limit">
-    <td class="title-column">
-        <span class="bx bx-stop"></span>
-        ${t("limit.limit")}
-    </td>
-    <td>
-        <input name="limit" class="form-control" type="number" min="1" step="1" />
-    </td>
-    <td class="button-column">
-        <div class="dropdown help-dropdown">
-            <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-            <div class="dropdown-menu dropdown-menu-right p-4">
-                ${t("limit.take_first_x_results")}
-            </div>
-        </div>
-
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class Limit extends AbstractSearchOption {
-
-    private $limit!: JQuery<HTMLElement>;
-
-    static get optionName() {
-        return "limit";
-    }
-    static get attributeType() {
-        return "label";
-    }
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "label", "limit", "10");
-    }
-
-    doRender() {
-        const $option = $(TPL);
-
-        this.$limit = $option.find("input[name=limit]");
-        this.$limit.on("change", () => this.update());
-        this.$limit.on("input", () => this.update());
-        this.$limit.val(this.note.getLabelValue("limit") ?? "");
-
-        return $option;
-    }
-
-    async update() {
-        const limit = String(this.$limit.val());
-
-        await this.setAttribute("label", "limit", limit);
-    }
-}
diff --git a/apps/client/src/widgets/search_options/order_by.ts b/apps/client/src/widgets/search_options/order_by.ts
deleted file mode 100644
index 491693c84..000000000
--- a/apps/client/src/widgets/search_options/order_by.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr data-search-option-conf="orderBy">
-    <td class="title-column">
-        <span class="bx bx-arrow-from-top"></span>
-        ${t("order_by.order_by")}
-    </td>
-    <td>
-        <select name="orderBy" class="form-control w-auto d-inline">
-            <option value="relevancy">${t("order_by.relevancy")}</option>
-            <option value="title">${t("order_by.title")}</option>
-            <option value="dateCreated">${t("order_by.date_created")}</option>
-            <option value="dateModified">${t("order_by.date_modified")}</option>
-            <option value="contentSize">${t("order_by.content_size")}</option>
-            <option value="contentAndAttachmentsSize">${t("order_by.content_and_attachments_size")}</option>
-            <option value="contentAndAttachmentsAndRevisionsSize">${t("order_by.content_and_attachments_and_revisions_size")}</option>
-            <option value="revisionCount">${t("order_by.revision_count")}</option>
-            <option value="childrenCount">${t("order_by.children_count")}</option>
-            <option value="parentCount">${t("order_by.parent_count")}</option>
-            <option value="ownedLabelCount">${t("order_by.owned_label_count")}</option>
-            <option value="ownedRelationCount">${t("order_by.owned_relation_count")}</option>
-            <option value="targetRelationCount">${t("order_by.target_relation_count")}</option>
-            <option value="random">${t("order_by.random")}</option>
-        </select>
-
-        <select name="orderDirection" class="form-control w-auto d-inline">
-            <option value="asc">${t("order_by.asc")}</option>
-            <option value="desc">${t("order_by.desc")}</option>
-        </select>
-    </td>
-    <td class="button-column">
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class OrderBy extends AbstractSearchOption {
-
-    static get optionName() {
-        return "orderBy";
-    }
-    static get attributeType() {
-        return "label";
-    }
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "label", "orderBy", "relevancy");
-        await AbstractSearchOption.setAttribute(noteId, "label", "orderDirection", "asc");
-    }
-
-    doRender() {
-        const $option = $(TPL);
-
-        const $orderBy = $option.find("select[name=orderBy]");
-        $orderBy.on("change", async () => {
-            const orderBy = String($orderBy.val());
-
-            await this.setAttribute("label", "orderBy", orderBy);
-        });
-        $orderBy.val(this.note.getLabelValue("orderBy") ?? "");
-
-        const $orderDirection = $option.find("select[name=orderDirection]");
-        $orderDirection.on("change", async () => {
-            const orderDirection = String($orderDirection.val());
-
-            await this.setAttribute("label", "orderDirection", orderDirection);
-        });
-        $orderDirection.val(this.note.getLabelValue("orderDirection") || "asc");
-
-        return $option;
-    }
-
-    async deleteOption() {
-        await this.deleteAttribute("label", "orderDirection");
-
-        await super.deleteOption();
-    }
-}
diff --git a/apps/client/src/widgets/search_options/search_script.ts b/apps/client/src/widgets/search_options/search_script.ts
deleted file mode 100644
index d93a64a83..000000000
--- a/apps/client/src/widgets/search_options/search_script.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import noteAutocompleteService from "../../services/note_autocomplete.js";
-import { t } from "../../services/i18n.js";
-
-const TPL = /*html*/`
-<tr>
-    <td class="title-column">
-        ${t("search_script.title")}
-    </td>
-    <td>
-        <div class="input-group">
-            <input class="search-script form-control" placeholder="${t("search_script.placeholder")}">
-        </div>
-    </td>
-    <td class="button-column">
-        <div class="dropdown help-dropdown">
-          <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-          <div class="dropdown-menu dropdown-menu-right p-4">
-            <p>${t("search_script.description1")}</p>
-
-            <p>${t("search_script.description2")}</p>
-
-            <p>${t("search_script.example_title")}</p>
-
-            <pre>${t("search_script.example_code")}</pre>
-
-            ${t("search_script.note")}
-          </div>
-        </div>
-
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class SearchScript extends AbstractSearchOption {
-    static get optionName() {
-        return "searchScript";
-    }
-    static get attributeType() {
-        return "relation";
-    }
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "relation", "searchScript", "root");
-    }
-
-    doRender() {
-        const $option = $(TPL);
-        const $searchScript = $option.find(".search-script");
-        noteAutocompleteService.initNoteAutocomplete($searchScript, { allowCreatingNotes: true });
-
-        $searchScript.on("autocomplete:closed", async () => {
-            const searchScriptNoteId = $searchScript.getSelectedNoteId();
-
-            if (searchScriptNoteId) {
-                await this.setAttribute("relation", "searchScript", searchScriptNoteId);
-            }
-        });
-
-        const searchScriptNoteId = this.note.getRelationValue("searchScript");
-
-        if (searchScriptNoteId && searchScriptNoteId !== "root") {
-            $searchScript.setNote(searchScriptNoteId);
-        }
-
-        return $option;
-    }
-}
diff --git a/apps/client/src/widgets/search_options/search_string.ts b/apps/client/src/widgets/search_options/search_string.ts
deleted file mode 100644
index b3a6aaa39..000000000
--- a/apps/client/src/widgets/search_options/search_string.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import AbstractSearchOption from "./abstract_search_option.js";
-import SpacedUpdate from "../../services/spaced_update.js";
-import server from "../../services/server.js";
-import shortcutService from "../../services/shortcuts.js";
-import appContext, { type EventData } from "../../components/app_context.js";
-import { t } from "../../services/i18n.js";
-import { Tooltip } from "bootstrap";
-
-const TPL = /*html*/`
-<tr>
-    <td class="title-column">${t("search_string.title_column")}</td>
-    <td>
-        <textarea class="form-control search-string" placeholder="${t("search_string.placeholder")}" autofocus></textarea>
-    </td>
-    <td class="button-column">
-        <div class="dropdown help-dropdown">
-          <span class="bx bx-help-circle icon-action" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></span>
-          <div class="dropdown-menu dropdown-menu-right p-4">
-            <strong>${t("search_string.search_syntax")}</strong> - ${t("search_string.also_see")} <a href="#" data-help-page="search.html">${t("search_string.complete_help")}</a>
-
-            <ul style="marigin-bottom: 0;">
-                <li>${t("search_string.full_text_search")}</li>
-                <li><code>#abc</code> - ${t("search_string.label_abc")}</li>
-                <li><code>#year = 2019</code> - ${t("search_string.label_year")}</li>
-                <li><code>#rock #pop</code> - ${t("search_string.label_rock_pop")}</li>
-                <li><code>#rock or #pop</code> - ${t("search_string.label_rock_or_pop")}</li>
-                <li><code>#year &lt;= 2000</code> - ${t("search_string.label_year_comparison")}</li>
-                <li><code>note.dateCreated >= MONTH-1</code> - ${t("search_string.label_date_created")}</li>
-            </ul>
-          </div>
-        </div>
-
-        <span class="bx bx-x icon-action search-option-del"></span>
-    </td>
-</tr>`;
-
-export default class SearchString extends AbstractSearchOption {
-
-    private $searchString!: JQuery<HTMLElement>;
-    private spacedUpdate!: SpacedUpdate;
-
-    static get optionName() {
-        return "searchString";
-    }
-    static get attributeType() {
-        return "label";
-    }
-
-    static async create(noteId: string) {
-        await AbstractSearchOption.setAttribute(noteId, "label", "searchString");
-    }
-
-    doRender() {
-        const $option = $(TPL);
-        this.$searchString = $option.find(".search-string");
-        this.$searchString.on("input", () => this.spacedUpdate.scheduleUpdate());
-
-        shortcutService.bindElShortcut(this.$searchString, "return", async () => {
-            // this also in effect disallows new lines in query string.
-            // on one hand, this makes sense since search string is a label
-            // on the other hand, it could be nice for structuring long search string. It's probably a niche case though.
-            await this.spacedUpdate.updateNowIfNecessary();
-
-            this.triggerCommand("refreshResults");
-        });
-
-        this.spacedUpdate = new SpacedUpdate(async () => {
-            const searchString = String(this.$searchString.val());
-            appContext.lastSearchString = searchString;
-
-            await this.setAttribute("label", "searchString", searchString);
-
-            if (this.note.title.startsWith(t("search_string.search_prefix"))) {
-                await server.put(`notes/${this.note.noteId}/title`, {
-                    title: `${t("search_string.search_prefix")} ${searchString.length < 30 ? searchString : `${searchString.substr(0, 30)}…`}`
-                });
-            }
-        }, 1000);
-
-        this.$searchString.val(this.note.getLabelValue("searchString") ?? "");
-
-        return $option;
-    }
-
-    showSearchErrorEvent({ error }: EventData<"showSearchError">) {
-        let tooltip = new Tooltip(this.$searchString[0], {
-            trigger: "manual",
-            title: `${t("search_string.error", { error })}`,
-            placement: "bottom"
-        });
-
-        tooltip.show();
-
-        setTimeout(() => tooltip.dispose(), 4000);
-    }
-
-    focusOnSearchDefinitionEvent() {
-        this.$searchString
-            .val(String(this.$searchString.val()).trim() ?? appContext.lastSearchString)
-            .focus()
-            .select();
-        this.spacedUpdate.scheduleUpdate();
-    }
-}
diff --git a/apps/client/src/widgets/shared_switch.ts b/apps/client/src/widgets/shared_switch.ts
deleted file mode 100644
index 20e954efa..000000000
--- a/apps/client/src/widgets/shared_switch.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import SwitchWidget from "./switch.js";
-import branchService from "../services/branches.js";
-import server from "../services/server.js";
-import utils from "../services/utils.js";
-import syncService from "../services/sync.js";
-import dialogService from "../services/dialog.js";
-import { t } from "../services/i18n.js";
-import type FNote from "../entities/fnote.js";
-import type { EventData } from "../components/app_context.js";
-
-export default class SharedSwitchWidget extends SwitchWidget {
-
-    isEnabled() {
-        return super.isEnabled()
-            && !["root", "_share", "_hidden"].includes(this.noteId ?? "")
-            && !this.noteId?.startsWith("_options");
-    }
-
-    doRender() {
-        super.doRender();
-
-        this.switchOnName = t("shared_switch.shared");
-        this.switchOnTooltip = t("shared_switch.toggle-on-title");
-
-        this.switchOffName = t("shared_switch.shared");
-        this.switchOffTooltip = t("shared_switch.toggle-off-title");
-
-        this.$helpButton.attr("data-help-page", "sharing.html").show();
-        this.$helpButton.on("click", (e) => utils.openHelp($(e.target)));
-    }
-
-    async switchOn() {
-        if (!this.noteId) {
-            return;
-        }
-
-        await branchService.cloneNoteToParentNote(this.noteId, "_share");
-
-        syncService.syncNow(true);
-    }
-
-    async switchOff() {
-        const shareBranch = this.note?.getParentBranches().find((b) => b.parentNoteId === "_share");
-
-        if (!shareBranch) {
-            return;
-        }
-
-        if (this.note?.getParentBranches().length === 1) {
-            if (!(await dialogService.confirm(t("shared_switch.shared-branch")))) {
-                return;
-            }
-        }
-
-        await server.remove(`branches/${shareBranch.branchId}?taskId=no-progress-reporting`);
-
-        syncService.syncNow(true);
-    }
-
-    async refreshWithNote(note: FNote) {
-        const isShared = note.hasAncestor("_share");
-        const canBeUnshared = isShared && note.getParentBranches().find((b) => b.parentNoteId === "_share");
-        const switchDisabled = isShared && !canBeUnshared;
-
-        this.isToggled = isShared;
-
-        if (switchDisabled) {
-            this.disabledTooltip = t("shared_switch.inherited");
-            this.canToggle = false;
-        } else {
-            this.disabledTooltip = "";
-            this.canToggle = true;
-        }
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getBranchRows().find((b) => b.noteId === this.noteId)) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/switch.ts b/apps/client/src/widgets/switch.ts
deleted file mode 100644
index 166165fc1..000000000
--- a/apps/client/src/widgets/switch.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-import { t } from "../services/i18n.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-
-const TPL = /*html*/`
-<div class="switch-widget">
-    <style>
-    .switch-widget {
-        --switch-track-width: 50px;
-        --switch-track-height: 24px;
-        --switch-off-track-background: var(--more-accented-background-color);
-        --switch-on-track-background: var(--main-text-color);
-
-        --switch-thumb-width: 16px;
-        --switch-thumb-height: 16px;
-        --switch-off-thumb-background: var(--main-background-color);
-        --switch-on-thumb-background: var(--main-background-color);
-
-        display: flex;
-        align-items: center;
-    }
-
-    /* The track of the toggle switch */
-
-    .switch-widget .switch-button {
-        display: block;
-        position: relative;
-        margin-left: 8px;
-        width: var(--switch-track-width);
-        height: var(--switch-track-height);
-        border-radius: 24px;
-        background-color: var(--switch-off-track-background);
-        transition: background 200ms ease-in;
-    }
-
-    .switch-widget .switch-button.on {
-        background: var(--switch-on-track-background);
-        transition: background 100ms ease-out;
-    }
-
-    /* The thumb of the toggle switch */
-
-    .switch-widget .switch-button:after {
-        --y: calc((var(--switch-track-height) - var(--switch-thumb-height)) / 2);
-        --x: var(--y);
-
-        content: "";
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: var(--switch-thumb-width);
-        height: var(--switch-thumb-height);
-        background-color: var(--switch-off-thumb-background);
-        border-radius: 50%;
-        transform: translate(var(--x), var(--y));
-        transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
-                    background 200ms ease-out;
-    }
-
-    .switch-widget .switch-button.on:after {
-        --x: calc(var(--switch-track-width) - var(--switch-thumb-width) - var(--y));
-
-        background: var(--switch-on-thumb-background);
-        transition: transform 200ms cubic-bezier(0.64, 0, 0.78, 0),
-                    background 100ms ease-in;
-    }
-
-
-    .switch-widget .switch-button input[type="checkbox"] {
-        /* A hidden check box for accesibility purposes */
-        position: absolute:
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        opacity: 0;
-    }
-
-    /* Disabled state */
-    .switch-widget .switch-button:not(.disabled) input[type="checkbox"],
-    .switch-widget .switch-button:not(.disabled) {
-        cursor: pointer;
-    }
-
-    .switch-widget .switch-button:has(input[type="checkbox"]:focus-visible) {
-        outline: 2px solid var(--button-border-color);
-        outline-offset: 2px;
-    }
-
-    .switch-widget .switch-button.disabled {
-        opacity: 70%;
-    }
-
-    .switch-widget .switch-help-button {
-        border: 0;
-        margin-left: 4px;
-        background: none;
-        cursor: pointer;
-        font-size: 1.1em;
-        color: var(--muted-text-color);
-    }
-
-    .switch-widget .switch-help-button:hover {
-        color: var(--main-text-color);
-    }
-    </style>
-
-    <div class="switch-widget">
-        <span class="switch-name"></span>
-
-        <label>
-            <div class="switch-button">
-                <input class="switch-toggle" type="checkbox" />
-            </div>
-        </label>
-
-        <button class="switch-help-button icon-action bx bx-help-circle" type="button" data-help-page="" title="${t("open-help-page")}" style="display: none;"></button>
-    </div>
-
-</div>`;
-
-export default class SwitchWidget extends NoteContextAwareWidget {
-
-    private $switchButton!: JQuery<HTMLElement>;
-    private $switchToggle!: JQuery<HTMLElement>;
-    private $switchName!: JQuery<HTMLElement>;
-    protected $helpButton!: JQuery<HTMLElement>;
-
-    protected switchOnName = "";
-    protected switchOnTooltip = "";
-
-    protected switchOffName = "";
-    protected switchOffTooltip = "";
-
-    protected disabledTooltip = "";
-
-    private currentState = false;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$switchButton = this.$widget.find(".switch-button");
-
-        this.$switchToggle = this.$widget.find(".switch-toggle");
-        this.$switchToggle.on("click", (e) => {
-            this.toggle(!this.currentState);
-
-            // Prevent the check box from being toggled by the click, the value of the check box
-            // should be set exclusively by the 'isToggled' property setter.
-            e.preventDefault();
-        });
-
-        this.$switchName = this.$widget.find(".switch-name");
-        this.$helpButton = this.$widget.find(".switch-help-button");
-    }
-
-    toggle(state: boolean) {
-        if (state) {
-            this.switchOn();
-        } else {
-            this.switchOff();
-        }
-    }
-
-    switchOff() {}
-    switchOn() {}
-
-    /** Gets or sets whether the switch is toggled. */
-    get isToggled() {
-        return this.currentState;
-    }
-
-    set isToggled(state) {
-        this.currentState = !!state;
-
-        this.$switchButton.toggleClass("on", this.currentState);
-        this.$switchToggle.prop("checked", this.currentState);
-
-        if (this.currentState) {
-            this.$switchName.text(this.switchOffName);
-            this.$switchButton.attr("title", this.switchOffTooltip);
-        } else {
-            this.$switchName.text(this.switchOnName);
-            this.$switchButton.attr("title", this.switchOnTooltip);
-        }
-    }
-
-    /** Gets or sets whether the switch is enabled. */
-    get canToggle() {
-        return !this.$switchButton.hasClass("disabled");
-    }
-
-    set canToggle(isEnabled) {
-        this.$switchButton.toggleClass("disabled", !isEnabled);
-        this.$switchToggle.attr("disabled", !isEnabled ? "disabled" : null);
-
-        if (isEnabled) {
-            this.isToggled = this.currentState; // Reapply the correct tooltip
-        } else {
-            this.$switchButton.attr("title", this.disabledTooltip);
-        }
-    }
-}
diff --git a/apps/client/src/widgets/template_switch.ts b/apps/client/src/widgets/template_switch.ts
deleted file mode 100644
index 50c11f657..000000000
--- a/apps/client/src/widgets/template_switch.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import SwitchWidget from "./switch.js";
-import attributeService from "../services/attributes.js";
-import { t } from "../services/i18n.js";
-import type { EventData } from "../components/app_context.js";
-import type FNote from "../entities/fnote.js";
-
-/**
- * Switch for the basic properties widget which allows the user to select whether the note is a template or not, which toggles the `#template` attribute.
- */
-export default class TemplateSwitchWidget extends SwitchWidget {
-
-    isEnabled() {
-        return super.isEnabled() && !this.noteId?.startsWith("_options");
-    }
-
-    doRender() {
-        super.doRender();
-
-        this.switchOnName = t("template_switch.template");
-        this.switchOnTooltip = t("template_switch.toggle-on-hint");
-
-        this.switchOffName = t("template_switch.template");
-        this.switchOffTooltip = t("template_switch.toggle-off-hint");
-
-        this.$helpButton.attr("data-help-page", "template.html").show();
-    }
-
-    async switchOn() {
-        if (this.noteId) {
-            await attributeService.setLabel(this.noteId, "template");
-        }
-    }
-
-    async switchOff() {
-        if (this.note && this.noteId) {
-            for (const templateAttr of this.note.getOwnedLabels("template")) {
-                await attributeService.removeAttributeById(this.noteId, templateAttr.attributeId);
-            }
-        }
-    }
-
-    async refreshWithNote(note: FNote) {
-        const isTemplate = note.hasLabel("template");
-        this.isToggled = isTemplate;
-    }
-
-    entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
-        if (loadResults.getAttributeRows().find((attr) => attr.type === "label" && attr.name === "template" && attr.noteId === this.noteId)) {
-            this.refresh();
-        }
-    }
-}
diff --git a/apps/client/src/widgets/type_widgets/canvas.ts b/apps/client/src/widgets/type_widgets/canvas.ts
index e81e8a36f..42314f055 100644
--- a/apps/client/src/widgets/type_widgets/canvas.ts
+++ b/apps/client/src/widgets/type_widgets/canvas.ts
@@ -6,7 +6,7 @@ import type { LibraryItem } from "@excalidraw/excalidraw/types";
 import type { Theme } from "@excalidraw/excalidraw/element/types";
 import type Canvas from "./canvas_el.js";
 import { CanvasContent } from "./canvas_el.js";
-import { renderReactWidget } from "../react/ReactBasicWidget.jsx";
+import { renderReactWidget } from "../react/react_utils.jsx";
 
 const TPL = /*html*/`
     <div class="canvas-widget note-detail-canvas note-detail-printable note-detail">
diff --git a/apps/client/src/widgets/ribbon_widgets/mobile_editor_toolbar.ts b/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.ts
similarity index 96%
rename from apps/client/src/widgets/ribbon_widgets/mobile_editor_toolbar.ts
rename to apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.ts
index 38eeedc59..6db0b472a 100644
--- a/apps/client/src/widgets/ribbon_widgets/mobile_editor_toolbar.ts
+++ b/apps/client/src/widgets/type_widgets/ckeditor/mobile_editor_toolbar.ts
@@ -1,5 +1,5 @@
-import { isIOS } from "../../services/utils.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import { isIOS } from "../../../services/utils.js";
+import NoteContextAwareWidget from "../../note_context_aware_widget.js";
 
 const TPL = /*html*/`\
 <div class="classic-toolbar-outer-container">
diff --git a/apps/client/src/widgets/type_widgets/content_widget.tsx b/apps/client/src/widgets/type_widgets/content_widget.tsx
index be803018f..1d94b0d09 100644
--- a/apps/client/src/widgets/type_widgets/content_widget.tsx
+++ b/apps/client/src/widgets/type_widgets/content_widget.tsx
@@ -2,10 +2,9 @@ import TypeWidget from "./type_widget.js";
 import type FNote from "../../entities/fnote.js";
 import type NoteContextAwareWidget from "../note_context_aware_widget.js";
 import { t } from "../../services/i18n.js";
-import type BasicWidget from "../basic_widget.js";
 import type { JSX } from "preact/jsx-runtime";
 import AppearanceSettings from "./options/appearance.jsx";
-import { disposeReactWidget, renderReactWidget, renderReactWidgetAtElement } from "../react/ReactBasicWidget.jsx";
+import { disposeReactWidget, renderReactWidgetAtElement } from "../react/react_utils.jsx";
 import ImageSettings from "./options/images.jsx";
 import AdvancedSettings from "./options/advanced.jsx";
 import InternationalizationOptions from "./options/i18n.jsx";
@@ -21,6 +20,7 @@ import OtherSettings from "./options/other.jsx";
 import BackendLogWidget from "./content/backend_log.js";
 import MultiFactorAuthenticationSettings from "./options/multi_factor_authentication.js";
 import AiSettings from "./options/ai_settings.jsx";
+import { unmountComponentAtNode } from "preact/compat";
 
 const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
     <style>
@@ -76,7 +76,6 @@ const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextA
  */
 export default class ContentWidgetTypeWidget extends TypeWidget {
     private $content!: JQuery<HTMLElement>;
-    private widget?: BasicWidget;
 
     static getType() {
         return "contentWidget";
@@ -90,6 +89,7 @@ export default class ContentWidgetTypeWidget extends TypeWidget {
     }
 
     async doRefresh(note: FNote) {
+        unmountComponentAtNode(this.$content[0]);
         this.$content.empty();
         this.children = [];
 
@@ -113,7 +113,6 @@ export default class ContentWidgetTypeWidget extends TypeWidget {
                 this.child(widget);
 
                 this.$content.append(widget.render());
-                this.widget = widget;
                 await widget.refresh();
             }
             return;
diff --git a/apps/client/src/widgets/type_widgets/options/ai_settings.tsx b/apps/client/src/widgets/type_widgets/options/ai_settings.tsx
index c60c85cac..3b94a9d13 100644
--- a/apps/client/src/widgets/type_widgets/options/ai_settings.tsx
+++ b/apps/client/src/widgets/type_widgets/options/ai_settings.tsx
@@ -132,7 +132,7 @@ interface SingleProviderSettingsProps {
 }
 
 function SingleProviderSettings({ provider, title, apiKeyDescription, baseUrlDescription, modelDescription, validationErrorMessage, apiKeyOption, baseUrlOption, modelOption }: SingleProviderSettingsProps) {
-    const [ apiKey, setApiKey ] = apiKeyOption ? useTriliumOption(apiKeyOption) : [];
+    const [ apiKey, setApiKey ] = useTriliumOption(apiKeyOption ?? baseUrlOption);
     const [ baseUrl, setBaseUrl ] = useTriliumOption(baseUrlOption);
     const isValid = (apiKeyOption ? !!apiKey : !!baseUrl);
 
diff --git a/apps/client/src/widgets/type_widgets/options/backup.tsx b/apps/client/src/widgets/type_widgets/options/backup.tsx
index 0140f0c05..5cf240bf9 100644
--- a/apps/client/src/widgets/type_widgets/options/backup.tsx
+++ b/apps/client/src/widgets/type_widgets/options/backup.tsx
@@ -4,7 +4,7 @@ import server from "../../../services/server";
 import toast from "../../../services/toast";
 import Button from "../../react/Button";
 import FormCheckbox from "../../react/FormCheckbox";
-import FormGroup, { FormMultiGroup } from "../../react/FormGroup";
+import { FormMultiGroup } from "../../react/FormGroup";
 import FormText from "../../react/FormText";
 import { useTriliumOptionBool } from "../../react/hooks";
 import OptionsSection from "./components/OptionsSection";
diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.css b/apps/client/src/widgets/type_widgets/options/code_notes.css
new file mode 100644
index 000000000..7b51f619d
--- /dev/null
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.css
@@ -0,0 +1,16 @@
+/* #region CodeMimeTypesList */
+.options-mime-types {
+    list-style-type: none;
+    column-width: 250px;
+    padding-left: 0;
+}
+
+.options-mime-types > section {
+    margin-bottom: 1em;
+    break-inside: avoid-column;
+}
+
+.options-mime-types ul {
+    padding-left: 0;
+}
+/* #endregion */
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/code_notes.tsx b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
index 764b75732..da33cfbce 100644
--- a/apps/client/src/widgets/type_widgets/options/code_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/code_notes.tsx
@@ -6,13 +6,14 @@ import FormGroup from "../../react/FormGroup";
 import FormSelect from "../../react/FormSelect";
 import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
 import OptionsSection from "./components/OptionsSection";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useEffect, useMemo, useRef } from "preact/hooks";
 import codeNoteSample from "./samples/code_note.txt?raw";
 import { DEFAULT_PREFIX } from "../abstract_code_type_widget";
 import { MimeType } from "@triliumnext/commons";
 import mime_types from "../../../services/mime_types";
 import CheckboxList from "./components/CheckboxList";
 import AutoReadOnlySize from "./components/AutoReadOnlySize";
+import "./code_notes.css";
 
 const SAMPLE_MIME = "application/typescript";
 
@@ -123,17 +124,31 @@ function CodeNotePreview({ themeName, wordWrapping }: { themeName: string, wordW
 }
 
 function CodeMimeTypes() {
+    return (
+        <OptionsSection title={t("code_mime_types.title")}>
+            <CodeMimeTypesList />
+        </OptionsSection>
+    )
+}
+
+type MimeTypeWithDisabled = MimeType & { disabled?: boolean };
+
+export function CodeMimeTypesList() {
     const [ codeNotesMimeTypes, setCodeNotesMimeTypes ] = useTriliumOptionJson<string[]>("codeNotesMimeTypes");
-    const sectionStyle = useMemo(() => ({ marginBottom: "1em", breakInside: "avoid-column" }), []);
     const groupedMimeTypes: Record<string, MimeType[]> = useMemo(() => {
         mime_types.loadMimeTypes();
 
-        const ungroupedMimeTypes = Array.from(mime_types.getMimeTypes());
+        const ungroupedMimeTypes = Array.from(mime_types.getMimeTypes()) as MimeTypeWithDisabled[];
         const plainTextMimeType = ungroupedMimeTypes.shift();
         const result: Record<string, MimeType[]> = {};
         ungroupedMimeTypes.sort((a, b) => a.title.localeCompare(b.title));
 
-        result[""] = [ plainTextMimeType! ];
+        if (plainTextMimeType) {
+            result[""] = [ plainTextMimeType ];
+            plainTextMimeType.enabled = true;
+            plainTextMimeType.disabled = true;
+        }
+        
         for (const mimeType of ungroupedMimeTypes) {
             const initial = mimeType.title.charAt(0).toUpperCase();
             if (!result[initial]) {
@@ -142,23 +157,21 @@ function CodeMimeTypes() {
             result[initial].push(mimeType);
         }
         return result;
-    }, []);  
+    }, [ codeNotesMimeTypes ]);  
 
     return (
-        <OptionsSection title={t("code_mime_types.title")}>
-            <ul class="options-mime-types" style={{ listStyleType: "none", columnWidth: "250px" }}>
-                {Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => (
-                    <section style={sectionStyle}>
-                        { initial && <h5>{initial}</h5> }
-                        <CheckboxList
-                            values={mimeTypes}
-                            keyProperty="mime" titleProperty="title"
-                            currentValue={codeNotesMimeTypes} onChange={setCodeNotesMimeTypes}
-                            columnWidth="inherit"
-                        />
-                    </section>
-                ))}
-            </ul>
-        </OptionsSection>
-    )
+        <ul class="options-mime-types">
+            {Object.entries(groupedMimeTypes).map(([ initial, mimeTypes ]) => (
+                <section>
+                    { initial && <h5>{initial}</h5> }
+                    <CheckboxList
+                        values={mimeTypes as MimeTypeWithDisabled[]}
+                        keyProperty="mime" titleProperty="title" disabledProperty="disabled"
+                        currentValue={codeNotesMimeTypes} onChange={setCodeNotesMimeTypes}
+                        columnWidth="inherit"
+                    />
+                </section>
+            ))}
+        </ul>
+    );
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx b/apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx
index 3e0b20814..a2f48a04f 100644
--- a/apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx
@@ -2,12 +2,13 @@ interface CheckboxListProps<T> {
     values: T[];
     keyProperty: keyof T;
     titleProperty?: keyof T;
+    disabledProperty?: keyof T;
     currentValue: string[];
     onChange: (newValues: string[]) => void;
     columnWidth?: string;
 }
 
-export default function CheckboxList<T>({ values, keyProperty, titleProperty, currentValue, onChange, columnWidth }: CheckboxListProps<T>) {    
+export default function CheckboxList<T>({ values, keyProperty, titleProperty, disabledProperty, currentValue, onChange, columnWidth }: CheckboxListProps<T>) {    
     function toggleValue(value: string) {
         if (currentValue.includes(value)) {
             // Already there, needs removing.
@@ -28,6 +29,7 @@ export default function CheckboxList<T>({ values, keyProperty, titleProperty, cu
                             className="form-check-input"
                             value={String(value[keyProperty])}
                             checked={currentValue.includes(String(value[keyProperty]))}
+                            disabled={!!(disabledProperty && value[disabledProperty])}
                             onChange={e => toggleValue((e.target as HTMLInputElement).value)}
                         />
                         {String(value[titleProperty ?? keyProperty] ?? value[keyProperty])}
diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx b/apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx
index 03df50550..ff78d8a33 100644
--- a/apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/OptionsSection.tsx
@@ -11,7 +11,7 @@ interface OptionsSectionProps {
 
 export default function OptionsSection({ title, children, noCard, className, ...rest }: OptionsSectionProps) {
     return (
-        <div className={`options-section ${noCard && "tn-no-card"} ${className ?? ""}`} {...rest}>
+        <div className={`options-section ${noCard ? "tn-no-card" : ""} ${className ?? ""}`} {...rest}>
             {title && <h4>{title}</h4>}
             {children}
         </div>
diff --git a/apps/client/src/widgets/type_widgets/options/components/TimeSelector.tsx b/apps/client/src/widgets/type_widgets/options/components/TimeSelector.tsx
index 88968d52b..6ea6a8bac 100644
--- a/apps/client/src/widgets/type_widgets/options/components/TimeSelector.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/TimeSelector.tsx
@@ -1,5 +1,4 @@
 import { OptionDefinitions } from "@triliumnext/commons";
-import FormGroup from "../../../react/FormGroup";
 import FormTextBox from "../../../react/FormTextBox";
 import FormSelect from "../../../react/FormSelect";
 import { useEffect, useMemo, useState } from "preact/hooks";
diff --git a/apps/client/src/widgets/type_widgets/options/etapi.tsx b/apps/client/src/widgets/type_widgets/options/etapi.tsx
index 2309c2c12..3ee7c7e19 100644
--- a/apps/client/src/widgets/type_widgets/options/etapi.tsx
+++ b/apps/client/src/widgets/type_widgets/options/etapi.tsx
@@ -10,7 +10,7 @@ import toast from "../../../services/toast";
 import dialog from "../../../services/dialog";
 import { formatDateTime } from "../../../utils/formatters";
 import ActionButton from "../../react/ActionButton";
-import useTriliumEvent from "../../react/hooks";
+import { useTriliumEvent } from "../../react/hooks";
 
 type RenameTokenCallback = (tokenId: string, oldName: string) => Promise<void>;
 type DeleteTokenCallback = (tokenId: string, name: string ) => Promise<void>;
@@ -77,10 +77,6 @@ export default function EtapiSettings() {
 }
 
 function TokenList({ tokens }: { tokens: EtapiToken[] }) {
-    if (!tokens.length) {
-        return <div>{t("etapi.no_tokens_yet")}</div>;
-    }    
-    
     const renameCallback = useCallback<RenameTokenCallback>(async (tokenId: string, oldName: string) => {
         const tokenName = await dialog.prompt({
             title: t("etapi.rename_token_title"),
@@ -104,37 +100,45 @@ function TokenList({ tokens }: { tokens: EtapiToken[] }) {
     }, []);
 
     return (
-        <div style={{ overflow: "auto", height: "500px"}}>
-            <table className="table table-stripped">
-                <thead>
-                    <tr>
-                        <th>{t("etapi.token_name")}</th>
-                        <th>{t("etapi.created")}</th>
-                        <th>{t("etapi.actions")}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {tokens.map(({ etapiTokenId, name, utcDateCreated}) => (
+        tokens.length ? (
+            <div style={{ overflow: "auto", height: "500px"}}>
+                <table className="table table-stripped">
+                    <thead>
                         <tr>
-                            <td>{name}</td>
-                            <td>{formatDateTime(utcDateCreated)}</td>
-                            <td>
-                                <ActionButton
-                                    icon="bx bx-edit-alt"
-                                    text={t("etapi.rename_token")}
-                                    onClick={() => renameCallback(etapiTokenId!, name)}
-                                />
-
-                                <ActionButton
-                                    icon="bx bx-trash"
-                                    text={t("etapi.delete_token")}
-                                    onClick={() => deleteCallback(etapiTokenId!, name)}
-                                />
-                            </td>
+                            <th>{t("etapi.token_name")}</th>
+                            <th>{t("etapi.created")}</th>
+                            <th>{t("etapi.actions")}</th>
                         </tr>
-                    ))}
-                </tbody>
-            </table>
-        </div>
-    )
+                    </thead>
+                    <tbody>
+                        {tokens.map(({ etapiTokenId, name, utcDateCreated}) => (
+                            <tr>
+                                <td>{name}</td>
+                                <td>{formatDateTime(utcDateCreated)}</td>
+                                <td>
+                                    {etapiTokenId && (
+                                        <>
+                                            <ActionButton
+                                                icon="bx bx-edit-alt"
+                                                text={t("etapi.rename_token")}
+                                                onClick={() => renameCallback(etapiTokenId, name)}
+                                            />
+            
+                                            <ActionButton
+                                                icon="bx bx-trash"
+                                                text={t("etapi.delete_token")}
+                                                onClick={() => deleteCallback(etapiTokenId, name)}
+                                            />
+                                        </>
+                                    )}
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        ) : (
+            <div>{t("etapi.no_tokens_yet")}</div>
+        )
+    );
 }
diff --git a/apps/client/src/widgets/type_widgets/options/i18n.tsx b/apps/client/src/widgets/type_widgets/options/i18n.tsx
index f2ee255da..309f164bb 100644
--- a/apps/client/src/widgets/type_widgets/options/i18n.tsx
+++ b/apps/client/src/widgets/type_widgets/options/i18n.tsx
@@ -3,7 +3,7 @@ import { getAvailableLocales, t } from "../../../services/i18n";
 import FormSelect from "../../react/FormSelect";
 import OptionsRow from "./components/OptionsRow";
 import OptionsSection from "./components/OptionsSection";
-import { useTriliumOption, useTriliumOptionInt, useTriliumOptionJson } from "../../react/hooks";
+import { useTriliumOption, useTriliumOptionJson } from "../../react/hooks";
 import type { Locale } from "@triliumnext/commons";
 import { isElectron, restartDesktopApp } from "../../../services/utils";
 import FormRadioGroup, { FormInlineRadioGroup } from "../../react/FormRadioGroup";
@@ -118,18 +118,25 @@ function DateSettings() {
 }
 
 function ContentLanguages() {
-    const locales = useMemo(() => getAvailableLocales(), []);
-    const [ languages, setLanguages ] = useTriliumOptionJson<string[]>("languages");
-
     return (
         <OptionsSection title={t("content_language.title")}>
             <FormText>{t("content_language.description")}</FormText>
 
-            <CheckboxList
-                values={locales}
-                keyProperty="id" titleProperty="name"
-                currentValue={languages} onChange={setLanguages}
-            />
+            <ContentLanguagesList />
         </OptionsSection>
     );
+}
+
+export function ContentLanguagesList() {
+    const locales = useMemo(() => getAvailableLocales(), []);
+    const [ languages, setLanguages ] = useTriliumOptionJson<string[]>("languages");
+
+    return (
+        <CheckboxList
+            values={locales}
+            keyProperty="id" titleProperty="name"
+            currentValue={languages} onChange={setLanguages}
+            columnWidth="300px"
+        />
+    );
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx b/apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx
index 2e36af864..67ebc677e 100644
--- a/apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx
+++ b/apps/client/src/widgets/type_widgets/options/multi_factor_authentication.tsx
@@ -6,7 +6,7 @@ import FormCheckbox from "../../react/FormCheckbox"
 import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks"
 import { FormInlineRadioGroup } from "../../react/FormRadioGroup"
 import Admonition from "../../react/Admonition"
-import { useCallback, useEffect, useMemo, useState } from "preact/hooks"
+import { useCallback, useEffect, useState } from "preact/hooks"
 import { OAuthStatus, TOTPGenerate, TOTPRecoveryKeysResponse, TOTPStatus } from "@triliumnext/commons"
 import server from "../../../services/server"
 import Button from "../../react/Button"
@@ -206,7 +206,7 @@ function OAuthSettings() {
     const [ status, setStatus ] = useState<OAuthStatus>();
 
     useEffect(() => {
-        server.get<OAuthStatus>("oauth/status").then((result) => setStatus);
+        server.get<OAuthStatus>("oauth/status").then(setStatus);
     });
 
     return (
diff --git a/apps/client/src/widgets/type_widgets/options/shortcuts.tsx b/apps/client/src/widgets/type_widgets/options/shortcuts.tsx
index 215505b52..9094d0a00 100644
--- a/apps/client/src/widgets/type_widgets/options/shortcuts.tsx
+++ b/apps/client/src/widgets/type_widgets/options/shortcuts.tsx
@@ -11,7 +11,7 @@ import { useCallback, useEffect, useState } from "preact/hooks";
 import server from "../../../services/server";
 import options from "../../../services/options";
 import dialog from "../../../services/dialog";
-import useTriliumEvent from "../../react/hooks";
+import { useTriliumEvent } from "../../react/hooks";
 
 export default function ShortcutSettings() {
     const [ keyboardShortcuts, setKeyboardShortcuts ] = useState<KeyboardShortcut[]>([]);    
diff --git a/apps/server-e2e/src/help.spec.ts b/apps/server-e2e/src/help.spec.ts
index e3a316a83..0ac285a67 100644
--- a/apps/server-e2e/src/help.spec.ts
+++ b/apps/server-e2e/src/help.spec.ts
@@ -11,18 +11,6 @@ test("Help popup", async ({ page, context }) => {
     await expect(page.locator(".help-cards")).toBeVisible();
 });
 
-test("Complete help in search", async ({ page, context }) => {
-    const app = new App(page, context);
-    await app.goto();
-
-    await app.launcherBar.locator(".bx-search").first().click();
-    await app.currentNoteSplit.locator(".search-settings .bx-help-circle").click();
-    const popupPromise = page.waitForEvent("popup");
-    await page.getByRole("link", { name: "complete help on search syntax" }).click();
-    const popup = await popupPromise;
-    expect(popup.url()).toBe("https://triliumnext.github.io/Docs/Wiki/search.html");
-});
-
 test("In-app-help works in English", async ({ page, context }) => {
     const app = new App(page, context);
     await app.goto();
diff --git a/apps/server/src/becca/entities/bnote.ts b/apps/server/src/becca/entities/bnote.ts
index 116078e6a..68c82702b 100644
--- a/apps/server/src/becca/entities/bnote.ts
+++ b/apps/server/src/becca/entities/bnote.ts
@@ -14,12 +14,12 @@ import TaskContext from "../../services/task_context.js";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc.js";
 import eventService from "../../services/events.js";
-import type { AttachmentRow, AttributeType, NoteRow, NoteType, RevisionRow } from "@triliumnext/commons";
+import type { AttachmentRow, AttributeType, CloneResponse, NoteRow, NoteType, RevisionRow } from "@triliumnext/commons";
 import type BBranch from "./bbranch.js";
 import BAttribute from "./battribute.js";
 import type { NotePojo } from "../becca-interface.js";
 import searchService from "../../services/search/services/search.js";
-import cloningService, { type CloneResponse } from "../../services/cloning.js";
+import cloningService from "../../services/cloning.js";
 import noteService from "../../services/notes.js";
 import handlers from "../../services/handlers.js";
 dayjs.extend(utc);
diff --git a/apps/server/src/becca/similarity.ts b/apps/server/src/becca/similarity.ts
index fe7ecda21..dc0a4c3f8 100644
--- a/apps/server/src/becca/similarity.ts
+++ b/apps/server/src/becca/similarity.ts
@@ -4,6 +4,7 @@ import beccaService from "./becca_service.js";
 import dateUtils from "../services/date_utils.js";
 import { JSDOM } from "jsdom";
 import type BNote from "./entities/bnote.js";
+import { SimilarNote } from "@triliumnext/commons";
 
 const DEBUG = false;
 
@@ -36,12 +37,6 @@ interface DateLimits {
     maxDate: string;
 }
 
-export interface SimilarNote {
-    score: number;
-    notePath: string[];
-    noteId: string;
-}
-
 function filterUrlValue(value: string) {
     return value
         .replace(/https?:\/\//gi, "")
diff --git a/apps/server/src/routes/api/notes.ts b/apps/server/src/routes/api/notes.ts
index fd938dc18..f481d199a 100644
--- a/apps/server/src/routes/api/notes.ts
+++ b/apps/server/src/routes/api/notes.ts
@@ -12,7 +12,7 @@ import ValidationError from "../../errors/validation_error.js";
 import blobService from "../../services/blob.js";
 import type { Request } from "express";
 import type BBranch from "../../becca/entities/bbranch.js";
-import type { AttributeRow, DeleteNotesPreview } from "@triliumnext/commons";
+import type { AttributeRow, DeleteNotesPreview, MetadataResponse } from "@triliumnext/commons";
 
 /**
  * @swagger
@@ -101,7 +101,7 @@ function getNoteMetadata(req: Request) {
         utcDateCreated: note.utcDateCreated,
         dateModified: note.dateModified,
         utcDateModified: note.utcDateModified
-    };
+    } satisfies MetadataResponse;
 }
 
 function createNote(req: Request) {
diff --git a/apps/server/src/routes/api/revisions.ts b/apps/server/src/routes/api/revisions.ts
index cdcabe6d2..055d0b75e 100644
--- a/apps/server/src/routes/api/revisions.ts
+++ b/apps/server/src/routes/api/revisions.ts
@@ -12,7 +12,7 @@ import type { Request, Response } from "express";
 import type BRevision from "../../becca/entities/brevision.js";
 import type BNote from "../../becca/entities/bnote.js";
 import type { NotePojo } from "../../becca/becca-interface.js";
-import { RevisionItem, RevisionPojo, RevisionRow } from "@triliumnext/commons";
+import { EditedNotesResponse, RevisionItem, RevisionPojo, RevisionRow } from "@triliumnext/commons";
 
 interface NotePath {
     noteId: string;
@@ -184,7 +184,7 @@ function getEditedNotesOnDate(req: Request) {
         notePojo.notePath = notePath ? notePath.notePath : null;
 
         return notePojo;
-    });
+    }) satisfies EditedNotesResponse;
 }
 
 function getNotePathData(note: BNote): NotePath | undefined {
diff --git a/apps/server/src/routes/api/similar_notes.ts b/apps/server/src/routes/api/similar_notes.ts
index 8cd82dc72..6b9cbb926 100644
--- a/apps/server/src/routes/api/similar_notes.ts
+++ b/apps/server/src/routes/api/similar_notes.ts
@@ -4,13 +4,14 @@ import type { Request } from "express";
 
 import similarityService from "../../becca/similarity.js";
 import becca from "../../becca/becca.js";
+import { SimilarNoteResponse } from "@triliumnext/commons";
 
 async function getSimilarNotes(req: Request) {
     const noteId = req.params.noteId;
 
     const _note = becca.getNoteOrThrow(noteId);
 
-    return await similarityService.findSimilarNotes(noteId);
+    return (await similarityService.findSimilarNotes(noteId) satisfies SimilarNoteResponse);
 }
 
 export default {
diff --git a/apps/server/src/routes/api/stats.ts b/apps/server/src/routes/api/stats.ts
index 15e28f083..aebca079e 100644
--- a/apps/server/src/routes/api/stats.ts
+++ b/apps/server/src/routes/api/stats.ts
@@ -1,6 +1,7 @@
 import sql from "../../services/sql.js";
 import becca from "../../becca/becca.js";
 import type { Request } from "express";
+import { NoteSizeResponse, SubtreeSizeResponse } from "@triliumnext/commons";
 
 function getNoteSize(req: Request) {
     const { noteId } = req.params;
@@ -22,7 +23,7 @@ function getNoteSize(req: Request) {
 
     return {
         noteSize
-    };
+    } satisfies NoteSizeResponse;
 }
 
 function getSubtreeSize(req: Request) {
@@ -45,7 +46,7 @@ function getSubtreeSize(req: Request) {
     return {
         subTreeSize,
         subTreeNoteCount: subTreeNoteIds.length
-    };
+    } satisfies SubtreeSizeResponse;
 }
 
 export default {
diff --git a/apps/server/src/services/cloning.ts b/apps/server/src/services/cloning.ts
index 3c197cdfa..fc5552b42 100644
--- a/apps/server/src/services/cloning.ts
+++ b/apps/server/src/services/cloning.ts
@@ -6,13 +6,7 @@ import treeService from "./tree.js";
 import BBranch from "../becca/entities/bbranch.js";
 import becca from "../becca/becca.js";
 import log from "./log.js";
-
-export interface CloneResponse {
-    success: boolean;
-    message?: string;
-    branchId?: string;
-    notePath?: string;
-}
+import { CloneResponse } from "@triliumnext/commons";
 
 function cloneNoteToParentNote(noteId: string, parentNoteId: string, prefix: string | null = null): CloneResponse {
     if (!(noteId in becca.notes) || !(parentNoteId in becca.notes)) {
diff --git a/apps/server/src/services/special_notes.ts b/apps/server/src/services/special_notes.ts
index a877c8c2a..d4c37d764 100644
--- a/apps/server/src/services/special_notes.ts
+++ b/apps/server/src/services/special_notes.ts
@@ -10,6 +10,7 @@ import SearchContext from "./search/search_context.js";
 import { LBTPL_NOTE_LAUNCHER, LBTPL_CUSTOM_WIDGET, LBTPL_SPACER, LBTPL_SCRIPT } from "./hidden_subtree.js";
 import { t } from "i18next";
 import { BNote } from "./backend_script_entrypoint.js";
+import { SaveSearchNoteResponse } from "@triliumnext/commons";
 
 function getInboxNote(date: string) {
     const workspaceNote = hoistedNoteService.getWorkspaceNote();
@@ -119,7 +120,7 @@ function saveSearchNote(searchNoteId: string) {
         }
     }
 
-    return result;
+    return result satisfies SaveSearchNoteResponse;
 }
 
 function getMonthlyParentNoteId(rootNoteId: string, prefix: string) {
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 805361011..14d908731 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,21 +1,27 @@
 import nx from "@nx/eslint-plugin";
+import reactHooks from "eslint-plugin-react-hooks";
 
 export default [
     ...nx.configs["flat/base"],
     ...nx.configs["flat/typescript"],
     ...nx.configs["flat/javascript"],
-    {
      "ignores": [
-        "**/dist",
-        "**/vite.config.*.timestamp*",
-        "**/vitest.config.*.timestamp*"
+    {
+        files: ['**/*.{ts,tsx}'],
+        plugins: { 'react-hooks': reactHooks },
+        rules: {
+            'react-hooks/rules-of-hooks': 'error',
+        }
+    },
+    {
+      "ignores": [
+        "**/dist",
+        "**/vite.config.*.timestamp*",
+        "**/vitest.config.*.timestamp*"
       ]
     },
     {
         files: [
-            "**/*.ts",
             "**/*.tsx",
-            "**/*.js",
-            "**/*.jsx"
         ],
         rules: {
             "@nx/enforce-module-boundaries": [
diff --git a/package.json b/package.json
index 48bbb0347..049b21810 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "eslint": "^9.8.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-plugin-playwright": "^2.0.0",
+    "eslint-plugin-react-hooks": "5.2.0",
     "happy-dom": "~18.0.0",
     "jiti": "2.5.1",
     "jsdom": "~26.1.0",
diff --git a/packages/commons/src/lib/rows.ts b/packages/commons/src/lib/rows.ts
index 8bf64b275..9bb9d11d5 100644
--- a/packages/commons/src/lib/rows.ts
+++ b/packages/commons/src/lib/rows.ts
@@ -119,7 +119,8 @@ export const ALLOWED_NOTE_TYPES = [
     "book",
     "webView",
     "code",
-    "mindMap"
+    "mindMap",
+    "aiChat"
 ] as const;
 export type NoteType = (typeof ALLOWED_NOTE_TYPES)[number];
 
diff --git a/packages/commons/src/lib/server_api.ts b/packages/commons/src/lib/server_api.ts
index e660e049c..966e34418 100644
--- a/packages/commons/src/lib/server_api.ts
+++ b/packages/commons/src/lib/server_api.ts
@@ -1,4 +1,4 @@
-import { AttributeRow, NoteType } from "./rows.js";
+import { AttachmentRow, AttributeRow, NoteType } from "./rows.js";
 
 type Response = {
     success: true,
@@ -155,3 +155,54 @@ export interface OpenAiOrAnthropicModelResponse {
         type: string;
     }>;
 }
+
+export type ToggleInParentResponse = {
+    success: true;
+} | {
+    success: false;
+    message: string;
+}
+
+export type EditedNotesResponse = {
+    noteId: string;
+    isDeleted: boolean;
+    title?: string;
+    notePath?: string[] | null;
+}[];
+
+export interface MetadataResponse {
+    dateCreated: string | undefined;
+    utcDateCreated: string;
+    dateModified: string | undefined;
+    utcDateModified: string | undefined;
+}
+
+export interface NoteSizeResponse {
+    noteSize: number;
+}
+
+export interface SubtreeSizeResponse {
+    subTreeNoteCount: number;
+    subTreeSize: number;
+}
+
+export interface SimilarNote {
+    score: number;
+    notePath: string[];
+    noteId: string;
+}
+
+export type SimilarNoteResponse = (SimilarNote[] | undefined);
+
+export type SaveSearchNoteResponse = CloneResponse;
+
+export interface CloneResponse {
+    success: boolean;
+    message?: string;
+    branchId?: string;
+    notePath?: string;
+}
+
+export interface ConvertToAttachmentResponse {
+    attachment: AttachmentRow;
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3dbf26044..7cb517e43 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,6 +111,9 @@ importers:
       eslint-plugin-playwright:
         specifier: ^2.0.0
         version: 2.2.2(eslint@9.34.0(jiti@2.5.1))
+      eslint-plugin-react-hooks:
+        specifier: 5.2.0
+        version: 5.2.0(eslint@9.34.0(jiti@2.5.1))
       happy-dom:
         specifier: ~18.0.0
         version: 18.0.1
@@ -8597,6 +8600,12 @@ packages:
     peerDependencies:
       eslint: '>=8.40.0'
 
+  eslint-plugin-react-hooks@5.2.0:
+    resolution: {integrity: sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0
+
   eslint-plugin-svelte@3.11.0:
     resolution: {integrity: sha512-KliWlkieHyEa65aQIkRwUFfHzT5Cn4u3BQQsu3KlkJOs7c1u7ryn84EWaOjEzilbKgttT4OfBURA8Uc4JBSQIw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -16805,6 +16814,8 @@ snapshots:
       '@ckeditor/ckeditor5-core': 46.0.2
       '@ckeditor/ckeditor5-upload': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-ai@46.0.2':
     dependencies:
@@ -16839,6 +16850,8 @@ snapshots:
       '@ckeditor/ckeditor5-typing': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-autosave@46.0.2':
     dependencies:
@@ -16869,6 +16882,8 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-bookmark@46.0.2':
     dependencies:
@@ -16931,6 +16946,8 @@ snapshots:
       '@ckeditor/ckeditor5-core': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-code-block@46.0.2(patch_hash=2361d8caad7d6b5bddacc3a3b4aa37dbfba260b1c1b22a450413a79c1bb1ce95)':
     dependencies:
@@ -17156,6 +17173,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-editor-classic@46.0.2':
     dependencies:
@@ -17165,6 +17184,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-editor-decoupled@46.0.2':
     dependencies:
@@ -17209,8 +17230,6 @@ snapshots:
       '@ckeditor/ckeditor5-table': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-emoji@46.0.2':
     dependencies:
@@ -17236,6 +17255,8 @@ snapshots:
       '@ckeditor/ckeditor5-core': 46.0.2
       '@ckeditor/ckeditor5-engine': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-essentials@46.0.2':
     dependencies:
@@ -17267,8 +17288,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-export-word@46.0.2':
     dependencies:
@@ -17293,6 +17312,8 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
+    transitivePeerDependencies:
+      - supports-color
 
   '@ckeditor/ckeditor5-font@46.0.2':
     dependencies:
@@ -17417,8 +17438,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-indent@46.0.2':
     dependencies:
@@ -17541,8 +17560,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-merge-fields@46.0.2':
     dependencies:
@@ -17555,8 +17572,6 @@ snapshots:
       '@ckeditor/ckeditor5-widget': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-minimap@46.0.2':
     dependencies:
@@ -17565,8 +17580,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-operations-compressor@46.0.2':
     dependencies:
@@ -17619,8 +17632,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 46.0.2
       '@ckeditor/ckeditor5-widget': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-pagination@46.0.2':
     dependencies:
@@ -17727,8 +17738,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-slash-command@46.0.2':
     dependencies:
@@ -17741,8 +17750,6 @@ snapshots:
       '@ckeditor/ckeditor5-ui': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-source-editing-enhanced@46.0.2':
     dependencies:
@@ -17790,8 +17797,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-table@46.0.2':
     dependencies:
@@ -17804,8 +17809,6 @@ snapshots:
       '@ckeditor/ckeditor5-widget': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-template@46.0.2':
     dependencies:
@@ -17916,8 +17919,6 @@ snapshots:
       '@ckeditor/ckeditor5-engine': 46.0.2
       '@ckeditor/ckeditor5-utils': 46.0.2
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@ckeditor/ckeditor5-widget@46.0.2':
     dependencies:
@@ -17937,8 +17938,6 @@ snapshots:
       '@ckeditor/ckeditor5-utils': 46.0.2
       ckeditor5: 46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41)
       es-toolkit: 1.39.5
-    transitivePeerDependencies:
-      - supports-color
 
   '@codemirror/autocomplete@6.18.6':
     dependencies:
@@ -23725,8 +23724,6 @@ snapshots:
   ckeditor5-collaboration@46.0.2:
     dependencies:
       '@ckeditor/ckeditor5-collaboration-core': 46.0.2
-    transitivePeerDependencies:
-      - supports-color
 
   ckeditor5-premium-features@46.0.2(bufferutil@4.0.9)(ckeditor5@46.0.2(patch_hash=8331a09d41443b39ea1c784daaccfeb0da4f9065ed556e7de92e9c77edd9eb41))(utf-8-validate@6.0.5):
     dependencies:
@@ -25461,6 +25458,10 @@ snapshots:
       eslint: 9.34.0(jiti@2.5.1)
       globals: 13.24.0
 
+  eslint-plugin-react-hooks@5.2.0(eslint@9.34.0(jiti@2.5.1)):
+    dependencies:
+      eslint: 9.34.0(jiti@2.5.1)
+
   eslint-plugin-svelte@3.11.0(eslint@9.34.0(jiti@2.5.1))(svelte@5.38.5)(ts-node@10.9.2(@swc/core@1.11.29(@swc/helpers@0.5.17))(@types/node@24.3.0)(typescript@5.9.2)):
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@9.34.0(jiti@2.5.1))