feat(dev): merge main into feature branch

Resolved conflicts by:
- Combining imports from both branches in search.ts (added
hoistedNoteService and beccaService alongside existing ftsSearchService
and log imports)
- Integrating FTS5 search optimization from feature branch with flatText
attribute search logic from main in note_content_fulltext.ts
- Maintained backward compatibility by keeping fallback search
implementation for cases where FTS5 is not available or not suitable

.gitignore

@@ -51,4 +51,3 @@ upload
 # docs
 site/
 apps/*/coverage
-scripts/translation/.language*.json

apps/build-docs/package.json

@@ -9,9 +9,9 @@
   "keywords": [],
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.27.0",
+  "packageManager": "pnpm@10.26.2",
   "devDependencies": {
-    "@redocly/cli": "2.14.3",
+    "@redocly/cli": "2.14.1",
     "archiver": "7.0.1",
     "fs-extra": "11.3.3",
     "react": "19.2.3",

apps/client/package.json

@@ -43,7 +43,7 @@
     "debounce": "3.0.0",
     "draggabilly": "3.0.0",
     "force-graph": "1.51.0",
-    "globals": "17.0.0",
+    "globals": "16.5.0",
     "i18next": "25.7.3",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
@@ -56,13 +56,11 @@
     "mark.js": "8.11.1",
     "marked": "17.0.1",
     "mermaid": "11.12.2",
-    "mind-elixir": "5.4.0",
+    "mind-elixir": "5.3.8",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
     "preact": "10.28.1",
-    "react-i18next": "16.5.1",
-    "react-window": "2.2.3",
-    "react-zoom-pan-pinch": "3.7.0",
+    "react-i18next": "16.5.0",
     "reveal.js": "5.2.1",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",

apps/client/src/components/app_context.ts

@@ -6,7 +6,7 @@ import { ColumnComponent } from "tabulator-tables";
 
 import type { Attribute } from "../services/attribute_parser.js";
 import froca from "../services/froca.js";
-import { initLocale, t } from "../services/i18n.js";
+import { initLocale,t } from "../services/i18n.js";
 import keyboardActionsService from "../services/keyboard_actions.js";
 import linkService, { type ViewScope } from "../services/link.js";
 import type LoadResults from "../services/load_results.js";
@@ -382,8 +382,7 @@ export type CommandMappings = {
     reloadTextEditor: CommandData;
     chooseNoteType: CommandData & {
         callback: ChooseNoteTypeCallback
-    };
-    customDownload: CommandData;
+    }
 };
 
 type EventMappings = {
@@ -474,11 +473,6 @@ type EventMappings = {
     noteContextRemoved: {
         ntxIds: string[];
     };
-    contextDataChanged: {
-        noteContext: NoteContext;
-        key: string;
-        value: unknown;
-    };
     exportSvg: { ntxId: string | null | undefined; };
     exportPng: { ntxId: string | null | undefined; };
     geoMapCreateChildNote: {

apps/client/src/components/component.ts

@@ -57,18 +57,6 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
         return this;
     }
 
-    /**
-     * Removes a child component from this component's children array.
-     * This is used for cleanup when a widget is unmounted to prevent event listener accumulation.
-     */
-    removeChild(component: ChildT) {
-        const index = this.children.indexOf(component);
-        if (index !== -1) {
-            this.children.splice(index, 1);
-            component.parent = undefined;
-        }
-    }
-
     handleEvent<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null | undefined {
         try {
             const callMethodPromise = this.initialized ? this.initialized.then(() => this.callMethod((this as any)[`${name}Event`], data)) : this.callMethod((this as any)[`${name}Event`], data);

apps/client/src/components/note_context.ts

@@ -12,7 +12,6 @@ import server from "../services/server.js";
 import treeService from "../services/tree.js";
 import utils from "../services/utils.js";
 import { ReactWrappedWidget } from "../widgets/basic_widget.js";
-import type { HeadingContext } from "../widgets/sidebar/TableOfContents.js";
 import appContext, { type EventData, type EventListener } from "./app_context.js";
 import Component from "./component.js";
 
@@ -23,31 +22,6 @@ export interface SetNoteOpts {
 
 export type GetTextEditorCallback = (editor: CKTextEditor) => void;
 
-export type SaveState = "saved" | "saving" | "unsaved" | "error";
-
-export interface NoteContextDataMap {
-    toc: HeadingContext;
-    pdfPages: {
-        totalPages: number;
-        currentPage: number;
-        scrollToPage(page: number): void;
-        requestThumbnail(page: number): void;
-    };
-    pdfAttachments: {
-        attachments: PdfAttachment[];
-        downloadAttachment(filename: string): void;
-    };
-    pdfLayers: {
-        layers: PdfLayer[];
-        toggleLayer(layerId: string, visible: boolean): void;
-    };
-    saveState: {
-        state: SaveState;
-    };
-}
-
-type ContextDataKey = keyof NoteContextDataMap;
-
 class NoteContext extends Component implements EventListener<"entitiesReloaded"> {
     ntxId: string | null;
     hoistedNoteId: string;
@@ -58,13 +32,6 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     parentNoteId?: string | null;
     viewScope?: ViewScope;
 
-    /**
-     * Metadata storage for UI components (e.g., table of contents, PDF page list, code outline).
-     * This allows type widgets to publish data that sidebar/toolbar components can consume.
-     * Data is automatically cleared when navigating to a different note.
-     */
-    private contextData: Map<string, unknown> = new Map();
-
     constructor(ntxId: string | null = null, hoistedNoteId: string = "root", mainNtxId: string | null = null) {
         super();
 
@@ -124,22 +91,6 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
         this.viewScope = opts.viewScope;
         ({ noteId: this.noteId, parentNoteId: this.parentNoteId } = treeService.getNoteIdAndParentIdFromUrl(resolvedNotePath));
 
-        // Clear context data when switching notes and notify subscribers
-        const oldKeys = Array.from(this.contextData.keys());
-        this.contextData.clear();
-        if (oldKeys.length > 0) {
-            // Notify subscribers asynchronously to avoid blocking navigation
-            window.setTimeout(() => {
-                for (const key of oldKeys) {
-                    this.triggerEvent("contextDataChanged", {
-                        noteContext: this,
-                        key,
-                        value: undefined
-                    });
-                }
-            }, 0);
-        }
-
         this.saveToRecentNotes(resolvedNotePath);
 
         protectedSessionHolder.touchProtectedSessionIfNecessary(this.note);
@@ -492,52 +443,6 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
         return title;
     }
-
-    /**
-     * Set metadata for this note context (e.g., table of contents, PDF pages, code outline).
-     * This data can be consumed by sidebar/toolbar components.
-     *
-     * @param key - Unique identifier for the data type (e.g., "toc", "pdfPages", "codeOutline")
-     * @param value - The data to store (will be cleared when switching notes)
-     */
-    setContextData<K extends ContextDataKey>(key: K, value: NoteContextDataMap[K]): void {
-        this.contextData.set(key, value);
-        // Trigger event so subscribers can react
-        this.triggerEvent("contextDataChanged", {
-            noteContext: this,
-            key,
-            value
-        });
-    }
-
-    /**
-     * Get metadata for this note context.
-     *
-     * @param key - The data key to retrieve
-     * @returns The stored data, or undefined if not found
-     */
-    getContextData<K extends ContextDataKey>(key: K): NoteContextDataMap[K] | undefined {
-        return this.contextData.get(key) as NoteContextDataMap[K] | undefined;
-    }
-
-    /**
-     * Check if context data exists for a given key.
-     */
-    hasContextData(key: ContextDataKey): boolean {
-        return this.contextData.has(key);
-    }
-
-    /**
-     * Clear specific context data.
-     */
-    clearContextData(key: ContextDataKey): void {
-        this.contextData.delete(key);
-        this.triggerEvent("contextDataChanged", {
-            noteContext: this,
-            key,
-            value: undefined
-        });
-    }
 }
 
 export function openInCurrentNoteContext(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, notePath: string, viewScope?: ViewScope) {

apps/client/src/desktop.ts

@@ -1,18 +1,17 @@
-import "autocomplete.js/index_jquery.js";
-
-import type ElectronRemote from "@electron/remote";
-import type Electron from "electron";
-
 import appContext from "./components/app_context.js";
-import electronContextMenu from "./menus/electron_context_menu.js";
+import utils from "./services/utils.js";
+import noteTooltipService from "./services/note_tooltip.js";
 import bundleService from "./services/bundle.js";
+import toastService from "./services/toast.js";
+import noteAutocompleteService from "./services/note_autocomplete.js";
+import electronContextMenu from "./menus/electron_context_menu.js";
 import glob from "./services/glob.js";
 import { t } from "./services/i18n.js";
-import noteAutocompleteService from "./services/note_autocomplete.js";
-import noteTooltipService from "./services/note_tooltip.js";
 import options from "./services/options.js";
-import toastService from "./services/toast.js";
-import utils from "./services/utils.js";
+import type ElectronRemote from "@electron/remote";
+import type Electron from "electron";
+import "boxicons/css/boxicons.min.css";
+import "autocomplete.js/index_jquery.js";
 
 await appContext.earlyInit();
 

apps/client/src/entities/fnote.ts

@@ -8,7 +8,7 @@ import search from "../services/search.js";
 import server from "../services/server.js";
 import utils from "../services/utils.js";
 import type FAttachment from "./fattachment.js";
-import type { AttributeType, default as FAttribute } from "./fattribute.js";
+import type { AttributeType,default as FAttribute } from "./fattribute.js";
 
 const LABEL = "label";
 const RELATION = "relation";
@@ -582,10 +582,6 @@ export default class FNote {
     }
 
     getIcon() {
-        return `tn-icon ${this.#getIconInternal()}`;
-    }
-
-    #getIconInternal() {
         const iconClassLabels = this.getLabels("iconClass");
         const workspaceIconClass = this.getWorkspaceIconClass();
 

apps/client/src/layouts/mobile_layout.tsx

@@ -1,35 +1,35 @@
-import type AppContext from "../components/app_context.js";
-import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
-import CloseZenModeButton from "../widgets/close_zen_button.js";
-import NoteList from "../widgets/collections/NoteList.jsx";
-import ContentHeader from "../widgets/containers/content_header.js";
-import FlexContainer from "../widgets/containers/flex_container.js";
-import RootContainer from "../widgets/containers/root_container.js";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
-import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import { applyModals } from "./layout_commons.js";
 import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
-import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import { useNoteContext } from "../widgets/react/hooks.jsx";
+import CloseZenModeButton from "../widgets/close_zen_button.js";
+import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
+import FlexContainer from "../widgets/containers/flex_container.js";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
-import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
-import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
-import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
+import NoteList from "../widgets/collections/NoteList.jsx";
 import NoteTitleWidget from "../widgets/note_title.js";
+import ContentHeader from "../widgets/containers/content_header.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import NoteDetail from "../widgets/NoteDetail.jsx";
-import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
 import QuickSearchWidget from "../widgets/quick_search.js";
-import { useNoteContext } from "../widgets/react/hooks.jsx";
 import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
-import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
+import RootContainer from "../widgets/containers/root_container.js";
+import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
 import SearchResult from "../widgets/search_result.jsx";
 import SharedInfoWidget from "../widgets/shared_info.js";
+import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
+import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
 import TabRowWidget from "../widgets/tab_row.js";
+import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
+import type AppContext from "../components/app_context.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
 import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
-import { applyModals } from "./layout_commons.js";
+import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
+import SplitNoteContainer from "../widgets/containers/split_note_container.js";
+import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
 
 const MOBILE_CSS = `
 <style>
@@ -194,11 +194,11 @@ export default class MobileLayout {
 }
 
 function FilePropertiesWrapper() {
-    const { note, ntxId } = useNoteContext();
+    const { note } = useNoteContext();
 
     return (
         <div>
-            {note?.type === "file" && <FilePropertiesTab note={note} ntxId={ntxId} />}
+            {note?.type === "file" && <FilePropertiesTab note={note} />}
         </div>
     );
 }

apps/client/src/mobile.ts

@@ -1,8 +1,8 @@
-import "autocomplete.js/index_jquery.js";
-
 import appContext from "./components/app_context.js";
-import glob from "./services/glob.js";
 import noteAutocompleteService from "./services/note_autocomplete.js";
+import glob from "./services/glob.js";
+import "boxicons/css/boxicons.min.css";
+import "autocomplete.js/index_jquery.js";
 
 glob.setupGlobs();
 

apps/client/src/services/content_renderer.ts

@@ -1,19 +1,18 @@
-import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
-import WheelZoom from 'vanilla-js-wheel-zoom';
-
-import FAttachment from "../entities/fattachment.js";
-import FNote from "../entities/fnote.js";
-import imageContextMenuService from "../menus/image_context_menu.js";
-import { t } from "../services/i18n.js";
-import renderText from "./content_renderer_text.js";
-import renderDoc from "./doc_renderer.js";
-import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
-import openService from "./open.js";
+import renderService from "./render.js";
 import protectedSessionService from "./protected_session.js";
 import protectedSessionHolder from "./protected_session_holder.js";
-import renderService from "./render.js";
-import { applySingleBlockSyntaxHighlight } from "./syntax_highlight.js";
+import openService from "./open.js";
 import utils from "./utils.js";
+import FNote from "../entities/fnote.js";
+import FAttachment from "../entities/fattachment.js";
+import imageContextMenuService from "../menus/image_context_menu.js";
+import { applySingleBlockSyntaxHighlight } from "./syntax_highlight.js";
+import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
+import renderDoc from "./doc_renderer.js";
+import { t } from "../services/i18n.js";
+import WheelZoom from 'vanilla-js-wheel-zoom';
+import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
+import renderText from "./content_renderer_text.js";
 
 let idCounter = 1;
 
@@ -153,7 +152,7 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
 
     const $img = $("<img>")
         .attr("src", url || "")
-        .attr("id", `attachment-image-${idCounter++}`)
+        .attr("id", "attachment-image-" + idCounter++)
         .css("max-width", "100%");
 
     $renderedContent.append($img);
@@ -194,7 +193,7 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
 
     if (type === "pdf") {
         const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
-        $pdfPreview.attr("src", openService.getUrlForDownload(`pdfjs/web/viewer.html?file=../../api/${entityType}/${entityId}/open`));
+        $pdfPreview.attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open`));
 
         $content.append($pdfPreview);
     } else if (type === "audio") {
@@ -218,28 +217,28 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
         //       in attachment list
         const $downloadButton = $(`
             <button class="file-download btn btn-primary" type="button">
-                <span class="tn-icon bx bx-download"></span>
+                <span class="bx bx-download"></span>
                 ${t("file_properties.download")}
             </button>
         `);
 
         const $openButton = $(`
             <button class="file-open btn btn-primary" type="button">
-                <span class="tn-icon bx bx-link-external"></span>
+                <span class="bx bx-link-external"></span>
                 ${t("file_properties.open")}
             </button>
         `);
 
         $downloadButton.on("click", (e) => {
             e.stopPropagation();
-            openService.downloadFileNote(entity, null, null);
+            openService.downloadFileNote(entity.noteId)
         });
         $openButton.on("click", async (e) => {
             const iconEl = $openButton.find("> .bx");
             iconEl.removeClass("bx bx-link-external");
             iconEl.addClass("bx bx-loader spin");
             e.stopPropagation();
-            await openService.openNoteExternally(entity.noteId, entity.mime);
+            await openService.openNoteExternally(entity.noteId, entity.mime)
             iconEl.removeClass("bx bx-loader spin");
             iconEl.addClass("bx bx-link-external");
         });
@@ -267,7 +266,7 @@ async function renderMermaid(note: FNote | FAttachment, $renderedContent: JQuery
 
     try {
         await loadElkIfNeeded(mermaid, content);
-        const { svg } = await mermaid.mermaidAPI.render(`in-mermaid-graph-${idCounter++}`, content);
+        const { svg } = await mermaid.mermaidAPI.render("in-mermaid-graph-" + idCounter++, content);
 
         $renderedContent.append($(postprocessMermaidSvg(svg)));
     } catch (e) {

apps/client/src/services/css_class_manager.spec.ts

@@ -1,14 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { getReadableTextColor } from "./css_class_manager";
-
-describe("getReadableTextColor", () => {
-    it("doesn't crash for invalid color", () => {
-        expect(getReadableTextColor("RandomColor")).toBe("#000");
-    });
-
-    it("tolerates different casing", () => {
-        expect(getReadableTextColor("Blue"))
-            .toBe(getReadableTextColor("blue"));
-    });
-});

apps/client/src/services/css_class_manager.ts

@@ -1,7 +1,6 @@
 import clsx from "clsx";
-import Color, { ColorInstance } from "color";
-
 import {readCssVar} from "../utils/css-var";
+import Color, { ColorInstance } from "color";
 
 const registeredClasses = new Set<string>();
 const colorsWithHue = new Set<string>();
@@ -9,14 +8,14 @@ const colorsWithHue = new Set<string>();
 // Read the color lightness limits defined in the theme as CSS variables
 
 const lightThemeColorMaxLightness = readCssVar(
-    document.documentElement,
-    "tree-item-light-theme-max-color-lightness"
-).asNumber(70);
+                                        document.documentElement,
+                                        "tree-item-light-theme-max-color-lightness"
+                                    ).asNumber(70);
 
 const darkThemeColorMinLightness = readCssVar(
-    document.documentElement,
-    "tree-item-dark-theme-min-color-lightness"
-).asNumber(50);
+                                        document.documentElement,
+                                        "tree-item-dark-theme-min-color-lightness"
+                                    ).asNumber(50);
 
 function createClassForColor(colorString: string | null) {
     if (!colorString?.trim()) return "";
@@ -28,7 +27,7 @@ function createClassForColor(colorString: string | null) {
 
     if (!registeredClasses.has(className)) {
         const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
-            darkThemeColorMinLightness!);
+                                                   darkThemeColorMinLightness!);
         const hue = getHue(color);
 
         $("head").append(`<style>
@@ -51,7 +50,7 @@ function createClassForColor(colorString: string | null) {
 
 function parseColor(color: string) {
     try {
-        return Color(color.toLowerCase());
+        return Color(color);
     } catch (ex) {
         console.error(ex);
     }
@@ -85,8 +84,8 @@ function getHue(color: ColorInstance) {
 }
 
 export function getReadableTextColor(bgColor: string) {
-    const colorInstance = parseColor(bgColor);
-    return !colorInstance || colorInstance?.isLight() ? "#000" : "#fff";
+    const colorInstance = Color(bgColor);
+    return colorInstance.isLight() ? "#000" : "#fff";
 }
 
 export default {

apps/client/src/services/open.ts

@@ -1,8 +1,6 @@
-import Component from "../components/component.js";
-import FNote from "../entities/fnote.js";
+import utils from "./utils.js";
 import options from "./options.js";
 import server from "./server.js";
-import utils from "./utils.js";
 
 type ExecFunction = (command: string, cb: (err: string, stdout: string, stderror: string) => void) => void;
 
@@ -38,14 +36,9 @@ function download(url: string) {
     }
 }
 
-export function downloadFileNote(note: FNote, parentComponent: Component | null, ntxId: string | null | undefined) {
-    if (note.type === "file" && note.mime === "application/pdf" && parentComponent) {
-        // Special handling, manages its own downloading process.
-        parentComponent.triggerEvent("customDownload", { ntxId });
-        return;
-    }
+export function downloadFileNote(noteId: string) {
+    const url = `${getFileUrl("notes", noteId)}?${Date.now()}`; // don't use cache
 
-    const url = `${getFileUrl("notes", note.noteId)}?${Date.now()}`; // don't use cache
     download(url);
 }
 
@@ -104,7 +97,7 @@ async function openCustom(type: string, entityId: string, mime: string) {
             // Note that the path separator must be \ instead of /
             filePath = filePath.replace(/\//g, "\\");
         }
-        const command = `rundll32.exe shell32.dll,OpenAs_RunDLL ${filePath}`;
+        const command = `rundll32.exe shell32.dll,OpenAs_RunDLL ` + filePath;
         exec(command, (err, stdout, stderr) => {
             if (err) {
                 console.error("Open Note custom: ", err);
@@ -138,10 +131,10 @@ export function getUrlForDownload(url: string) {
     if (utils.isElectron()) {
         // electron needs absolute URL, so we extract current host, port, protocol
         return `${getHost()}/${url}`;
+    } else {
+        // web server can be deployed on subdomain, so we need to use a relative path
+        return url;
     }
-    // web server can be deployed on subdomain, so we need to use a relative path
-    return url;
-
 }
 
 function canOpenInBrowser(mime: string) {

apps/client/src/services/server.ts

@@ -85,15 +85,13 @@ async function remove<T>(url: string, componentId?: string) {
     return await call<T>("DELETE", url, componentId);
 }
 
-async function upload(url: string, fileToUpload: File, componentId?: string) {
+async function upload(url: string, fileToUpload: File) {
     const formData = new FormData();
     formData.append("upload", fileToUpload);
 
     return await $.ajax({
         url: window.glob.baseApiUrl + url,
-        headers: await getHeaders(componentId ? {
-            "trilium-component-id": componentId
-        } : undefined),
+        headers: await getHeaders(),
         data: formData,
         type: "PUT",
         timeout: 60 * 60 * 1000,

apps/client/src/services/spaced_update.ts

@@ -1,30 +1,22 @@
-import type { SaveState } from "../components/note_context";
-import { getErrorMessage } from "./utils";
-
 type Callback = () => Promise<void> | void;
 
-export type StateCallback = (state: SaveState) => void;
-
 export default class SpacedUpdate {
     private updater: Callback;
     private lastUpdated: number;
     private changed: boolean;
     private updateInterval: number;
     private changeForbidden?: boolean;
-    private stateCallback?: StateCallback;
 
-    constructor(updater: Callback, updateInterval = 1000, stateCallback?: StateCallback) {
+    constructor(updater: Callback, updateInterval = 1000) {
         this.updater = updater;
         this.lastUpdated = Date.now();
         this.changed = false;
         this.updateInterval = updateInterval;
-        this.stateCallback = stateCallback;
     }
 
     scheduleUpdate() {
         if (!this.changeForbidden) {
             this.changed = true;
-            this.stateCallback?.("unsaved");
             setTimeout(() => this.triggerUpdate());
         }
     }
@@ -34,13 +26,10 @@ export default class SpacedUpdate {
             this.changed = false; // optimistic...
 
             try {
-                this.stateCallback?.("saving");
                 await this.updater();
-                this.stateCallback?.("saved");
             } catch (e) {
                 this.changed = true;
-                this.stateCallback?.("error");
-                logError(getErrorMessage(e));
+
                 throw e;
             }
         }
@@ -70,22 +59,15 @@ export default class SpacedUpdate {
         this.updateInterval = interval;
     }
 
-    async triggerUpdate() {
+    triggerUpdate() {
         if (!this.changed) {
             return;
         }
 
         if (Date.now() - this.lastUpdated > this.updateInterval) {
-            this.stateCallback?.("saving");
-            try {
-                await this.updater();
-                this.stateCallback?.("saved");
-                this.changed = false;
-            } catch (e) {
-                this.stateCallback?.("error");
-                logError(getErrorMessage(e));
-            }
+            this.updater();
             this.lastUpdated = Date.now();
+            this.changed = false;
         } else {
             // update isn't triggered but changes are still pending, so we need to schedule another check
             this.scheduleUpdate();

apps/client/src/services/utils.ts

@@ -187,15 +187,13 @@ export function formatSize(size: number | null | undefined) {
         return "";
     }
 
-    if (size === 0) {
-        return "0 B";
+    size = Math.max(Math.round(size / 1024), 1);
+
+    if (size < 1024) {
+        return `${size} KiB`;
     }
+    return `${Math.round(size / 102.4) / 10} MiB`;
 
-    const k = 1024;
-    const sizes = ["B", "KiB", "MiB", "GiB"];
-    const i = Math.floor(Math.log(size) / Math.log(k));
-
-    return `${Math.round((size / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`;
 }
 
 function toObject<T, R>(array: T[], fn: (arg0: T) => [key: string, value: R]) {

apps/client/src/stylesheets/boxicons-compat.css

@@ -1,498 +0,0 @@
-.bx-ul
-{
-    margin-left: 2em;
-    padding-left: 0;
-
-    list-style: none;
-}
-.bx-ul > li
-{
-    position: relative;
-}
-.bx-ul .bx
-{
-    font-size: inherit;
-    line-height: inherit;
-
-    position: absolute;
-    left: -2em;
-
-    width: 2em;
-
-    text-align: center;
-}
-@-webkit-keyframes spin
-{
-    0%
-    {
-        -webkit-transform: rotate(0);
-                transform: rotate(0);
-    }
-    100%
-    {
-        -webkit-transform: rotate(359deg);
-                transform: rotate(359deg);
-    }
-}
-@keyframes spin
-{
-    0%
-    {
-        -webkit-transform: rotate(0);
-                transform: rotate(0);
-    }
-    100%
-    {
-        -webkit-transform: rotate(359deg);
-                transform: rotate(359deg);
-    }
-}
-@-webkit-keyframes burst
-{
-    0%
-    {
-        -webkit-transform: scale(1);
-                transform: scale(1);
-
-        opacity: 1;
-    }
-    90%
-    {
-        -webkit-transform: scale(1.5);
-                transform: scale(1.5);
-
-        opacity: 0;
-    }
-}
-@keyframes burst
-{
-    0%
-    {
-        -webkit-transform: scale(1);
-                transform: scale(1);
-
-        opacity: 1;
-    }
-    90%
-    {
-        -webkit-transform: scale(1.5);
-                transform: scale(1.5);
-
-        opacity: 0;
-    }
-}
-@-webkit-keyframes flashing
-{
-    0%
-    {
-        opacity: 1;
-    }
-    45%
-    {
-        opacity: 0;
-    }
-    90%
-    {
-        opacity: 1;
-    }
-}
-@keyframes flashing
-{
-    0%
-    {
-        opacity: 1;
-    }
-    45%
-    {
-        opacity: 0;
-    }
-    90%
-    {
-        opacity: 1;
-    }
-}
-@-webkit-keyframes fade-left
-{
-    0%
-    {
-        -webkit-transform: translateX(0);
-                transform: translateX(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateX(-20px);
-                transform: translateX(-20px);
-
-        opacity: 0;
-    }
-}
-@keyframes fade-left
-{
-    0%
-    {
-        -webkit-transform: translateX(0);
-                transform: translateX(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateX(-20px);
-                transform: translateX(-20px);
-
-        opacity: 0;
-    }
-}
-@-webkit-keyframes fade-right
-{
-    0%
-    {
-        -webkit-transform: translateX(0);
-                transform: translateX(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateX(20px);
-                transform: translateX(20px);
-
-        opacity: 0;
-    }
-}
-@keyframes fade-right
-{
-    0%
-    {
-        -webkit-transform: translateX(0);
-                transform: translateX(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateX(20px);
-                transform: translateX(20px);
-
-        opacity: 0;
-    }
-}
-@-webkit-keyframes fade-up
-{
-    0%
-    {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateY(-20px);
-                transform: translateY(-20px);
-
-        opacity: 0;
-    }
-}
-@keyframes fade-up
-{
-    0%
-    {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateY(-20px);
-                transform: translateY(-20px);
-
-        opacity: 0;
-    }
-}
-@-webkit-keyframes fade-down
-{
-    0%
-    {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateY(20px);
-                transform: translateY(20px);
-
-        opacity: 0;
-    }
-}
-@keyframes fade-down
-{
-    0%
-    {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateY(20px);
-                transform: translateY(20px);
-
-        opacity: 0;
-    }
-}
-@-webkit-keyframes tada
-{
-    from
-    {
-        -webkit-transform: scale3d(1, 1, 1);
-                transform: scale3d(1, 1, 1);
-    }
-
-    10%,
-    20%
-    {
-        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
-                transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
-    }
-
-    30%,
-    50%,
-    70%,
-    90%
-    {
-        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
-                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
-    }
-
-    40%,
-    60%,
-    80%
-    {
-        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
-                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
-    }
-
-    to
-    {
-        -webkit-transform: scale3d(1, 1, 1);
-                transform: scale3d(1, 1, 1);
-    }
-}
-
-@keyframes tada
-{
-    from
-    {
-        -webkit-transform: scale3d(1, 1, 1);
-                transform: scale3d(1, 1, 1);
-    }
-
-    10%,
-    20%
-    {
-        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
-                transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
-    }
-
-    30%,
-    50%,
-    70%,
-    90%
-    {
-        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
-                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
-    }
-
-    40%,
-    60%,
-    80%
-    {
-        -webkit-transform: rotate3d(0, 0, 1, -10deg);
-                transform: rotate3d(0, 0, 1, -10deg);
-    }
-
-    to
-    {
-        -webkit-transform: scale3d(1, 1, 1);
-                transform: scale3d(1, 1, 1);
-    }
-}
-.bx-spin
-{
-    -webkit-animation: spin 2s linear infinite;
-            animation: spin 2s linear infinite;
-}
-.bx-spin-hover:hover
-{
-    -webkit-animation: spin 2s linear infinite;
-            animation: spin 2s linear infinite;
-}
-
-.bx-tada
-{
-    -webkit-animation: tada 1.5s ease infinite;
-            animation: tada 1.5s ease infinite;
-}
-.bx-tada-hover:hover
-{
-    -webkit-animation: tada 1.5s ease infinite;
-            animation: tada 1.5s ease infinite;
-}
-
-.bx-flashing
-{
-    -webkit-animation: flashing 1.5s infinite linear;
-            animation: flashing 1.5s infinite linear;
-}
-.bx-flashing-hover:hover
-{
-    -webkit-animation: flashing 1.5s infinite linear;
-            animation: flashing 1.5s infinite linear;
-}
-
-.bx-burst
-{
-    -webkit-animation: burst 1.5s infinite linear;
-            animation: burst 1.5s infinite linear;
-}
-.bx-burst-hover:hover
-{
-    -webkit-animation: burst 1.5s infinite linear;
-            animation: burst 1.5s infinite linear;
-}
-.bx-fade-up
-{
-    -webkit-animation: fade-up 1.5s infinite linear;
-            animation: fade-up 1.5s infinite linear;
-}
-.bx-fade-up-hover:hover
-{
-    -webkit-animation: fade-up 1.5s infinite linear;
-            animation: fade-up 1.5s infinite linear;
-}
-.bx-fade-down
-{
-    -webkit-animation: fade-down 1.5s infinite linear;
-            animation: fade-down 1.5s infinite linear;
-}
-.bx-fade-down-hover:hover
-{
-    -webkit-animation: fade-down 1.5s infinite linear;
-            animation: fade-down 1.5s infinite linear;
-}
-.bx-fade-left
-{
-    -webkit-animation: fade-left 1.5s infinite linear;
-            animation: fade-left 1.5s infinite linear;
-}
-.bx-fade-left-hover:hover
-{
-    -webkit-animation: fade-left 1.5s infinite linear;
-            animation: fade-left 1.5s infinite linear;
-}
-.bx-fade-right
-{
-    -webkit-animation: fade-right 1.5s infinite linear;
-            animation: fade-right 1.5s infinite linear;
-}
-.bx-fade-right-hover:hover
-{
-    -webkit-animation: fade-right 1.5s infinite linear;
-            animation: fade-right 1.5s infinite linear;
-}
-.bx-xs
-{
-    font-size: 1rem!important;
-}
-.bx-sm
-{
-    font-size: 1.55rem!important;
-}
-.bx-md
-{
-    font-size: 2.25rem!important;
-}
-.bx-lg
-{
-    font-size: 3.0rem!important;
-}
-.bx-fw
-{
-    font-size: 1.2857142857em;
-    line-height: .8em;
-
-    width: 1.2857142857em;
-    height: .8em;
-    margin-top: -.2em!important;
-
-    vertical-align: middle;
-}
-.bx-pull-left
-{
-    float: left;
-
-    margin-right: .3em!important;
-}
-.bx-pull-right
-{
-    float: right;
-
-    margin-left: .3em!important;
-}
-.bx-rotate-90
-{
-    transform: rotate(90deg);
-
-    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
-}
-.bx-rotate-180
-{
-    transform: rotate(180deg);
-
-    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
-}
-.bx-rotate-270
-{
-    transform: rotate(270deg);
-
-    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
-}
-.bx-flip-horizontal
-{
-    transform: scaleX(-1);
-
-    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)';
-}
-.bx-flip-vertical
-{
-    transform: scaleY(-1);
-
-    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
-}
-.bx-border
-{
-    padding: .25em;
-
-    border: .07em solid rgba(0,0,0,.1);
-    border-radius: .25em;
-}
-.bx-border-circle
-{
-    padding: .25em;
-
-    border: .07em solid rgba(0,0,0,.1);
-    border-radius: 50%;
-}
-
-/** Custom icon **/
-.bx-empty {
-    width: 1em;
-    display: inline-block;
-}

apps/client/src/stylesheets/style.css

@@ -1,5 +1,3 @@
-@import "./boxicons-compat.css";
-
 @font-face {
     font-family: Montserrat;
     src: url(../fonts/Montserrat-Light.ttf);
@@ -1130,6 +1128,11 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     border-color: var(--main-border-color) !important;
 }
 
+.bx-empty {
+    width: 1em;
+    display: inline-block;
+}
+
 .modal-header {
     padding: 0.5rem 1rem 0.5rem 1rem !important; /* make modal header padding slightly smaller */
 }
@@ -1796,7 +1799,7 @@ button.close:hover {
     display: none;
 }
 
-.reference-link .tn-icon {
+.reference-link .bx {
     position: relative;
     top: 1px;
     margin-inline-end: 3px;
@@ -2415,7 +2418,7 @@ footer.webview-footer button {
     gap: 5px;
 }
 
-.right-pane-tab .tab-title .tn-icon {
+.right-pane-tab .tab-title .bx {
     font-size: 1.1em;
 }
 
@@ -2543,11 +2546,18 @@ footer.webview-footer button {
     inset-inline-end: 10px;
 }
 
-.content-floating-buttons button.tn-icon {
+.content-floating-buttons button.bx {
     font-size: 130%;
     padding: 1px 10px 1px 10px;
 }
 
+/* Customized icons */
+
+.bx-tn-toc::before {
+    content: "\ec24";
+    transform: rotate(180deg);
+}
+
 /* CK Editor */
 
 /* Insert text snippet: limit the width of the listed items to avoid overly long names */

apps/client/src/stylesheets/theme-next/base.css

@@ -17,8 +17,6 @@
  */
 
 :root {
-    color-scheme: var(--theme-style);
-
     --main-font-family: "Inter", sans-serif;
 
     --main-font-size: normal;
@@ -136,7 +134,7 @@ body.backdrop-effects-disabled {
     white-space-collapse: discard;
 }
 
-.dropdown-menu.tn-dropdown-menu .dropdown-item .tn-icon {
+.dropdown-menu.tn-dropdown-menu .bx {
     margin-inline-end: 6px;
 }
 
@@ -251,7 +249,7 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item icon */
-.dropdown-item .tn-icon {
+.dropdown-item .bx {
     translate: 0 var(--menu-item-icon-vert-offset);
     color: var(--menu-item-icon-color) !important;
     font-size: 1.1em;
@@ -498,7 +496,7 @@ li.dropdown-item a.dropdown-item-button {
     border: unset;
 }
 
-li.dropdown-item a.dropdown-item-button.tn-icon {
+li.dropdown-item a.dropdown-item-button.bx {
     color: var(--menu-text-color) !important;
 }
 
@@ -559,13 +557,13 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     padding-top: 0;
 }
 
-#toast-container .toast:not(.no-title) .tn-icon {
+#toast-container .toast:not(.no-title) .bx {
     margin-inline-end: 0.5em;
     font-size: 1.1em;
     opacity: 0.85;
 }
 
-#toast-container .toast.no-title .tn-icon {
+#toast-container .toast.no-title .bx {
     margin-inline-end: 0;
     font-size: 1.3em;
 }
@@ -756,7 +754,7 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     margin-bottom: 0;
 }
 
-.note-list-wrapper .note-book-card .tn-icon {
+.note-list-wrapper .note-book-card .bx {
     color: var(--left-pane-icon-color) !important;
 }
 

apps/client/src/stylesheets/theme-next/dialogs.css

@@ -423,6 +423,6 @@ div.tn-tool-dialog {
     font-size: unset;
 }
 
-.note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.tn-icon {
+.note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.bx {
     margin-inline-end: .25em;
-}
+}

apps/client/src/stylesheets/theme-next/forms.css

@@ -62,10 +62,10 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .c
 }
 
 /* Button's icon */
-button.btn.btn-primary span.tn-icon,
-button.btn.btn-secondary span.tn-icon,
-button.btn.btn-sm span.tn-icon,
-button.btn.btn-success span.tn-icon {
+button.btn.btn-primary span.bx,
+button.btn.btn-secondary span.bx,
+button.btn.btn-sm span.bx,
+button.btn.btn-success span.bx {
     color: var(--cmd-button-icon-color);
     padding-inline-end: 0.35em;
     font-size: 1.2em;

apps/client/src/stylesheets/theme-next/pages.css

@@ -151,11 +151,6 @@
     --options-title-font-size: .75rem;
     --options-title-offset: 13px;
 }
-
-.note-split.options {
-    --preferred-max-content-width: var(--options-card-max-width);
-}
-
 /* Create a gap at the top of the option pages */
 .note-detail-content-widget-content.options>*:first-child {
     margin-top: var(--options-first-item-top-margin, 1em);
@@ -190,6 +185,10 @@ body.experimental-feature-new-layout .note-detail-content-widget-content.options
     padding: var(--options-card-padding);
 }
 
+body.prefers-centered-content .options-section:not(.tn-no-card) {
+    margin-inline: auto;
+}
+
 body.desktop .options-section:not(.tn-no-card) {
     min-width: var(--options-card-min-width);
     max-width: var(--options-card-max-width);

apps/client/src/stylesheets/theme-next/shell.css

@@ -497,7 +497,7 @@ div.bookmark-folder-widget .note-link:hover a {
 }
 
 /* The item's icon */
-div.bookmark-folder-widget .note-link .tn-icon {
+div.bookmark-folder-widget .note-link .bx {
     color: var(--menu-item-icon-color);
     font-size: 1.2em;
 }
@@ -767,7 +767,7 @@ body.mobile .fancytree-node > span {
     background: var(--left-pane-item-hover-background);
 }
 
-#left-pane .note-indicator-icon.shared-indicator {
+#left-pane span.fancytree-node.shared .fancytree-title::after {
     opacity: 0.5;
 }
 
@@ -1259,16 +1259,8 @@ body.layout-horizontal #rest-pane > .classic-toolbar-widget {
 #center-pane .note-split {
     padding-top: 2px;
     background-color: var(--note-split-background-color, var(--main-background-color));
-    transition: border-color 250ms ease-in;
-    border: 2px solid transparent;
 }
 
-/* The active split in a multi-split view */
-#center-pane > .split-note-container-widget:has(> .note-split.visible ~ .note-split.visible) > .note-split.active {
-    border-color: var(--link-selection-outline-color);
-}
-
-
 body:not(.background-effects) #center-pane .note-split {
     animation: note-entrance 100ms linear;
 }

apps/client/src/stylesheets/tree.css

@@ -148,28 +148,29 @@ span.fancytree-node.protected > span.fancytree-custom-icon {
     filter: drop-shadow(2px 2px 2px var(--main-text-color));
 }
 
-/* Note indicator icons (clone, shared) - real DOM elements for tooltip support */
-.note-indicator-icon {
+span.fancytree-node.multiple-parents.shared .fancytree-title::after {
     font-family: "boxicons" !important;
     font-size: smaller;
-    margin-inline-start: 4px;
-    opacity: 0.8;
-    cursor: help;
+    content: " \eb3d \ec03";
 }
 
-.note-indicator-icon.clone-indicator::before {
-    content: "\eb3d"; /* bx-link-alt */
+span.fancytree-node.multiple-parents .fancytree-title::after {
+    font-family: "boxicons" !important;
+    font-size: smaller;
+    content: " \eb3d"; /* lookup code for "link-alt" in boxicons.css */
 }
 
-.note-indicator-icon.shared-indicator::before {
-    content: "\ec03"; /* bx-share-alt */
-}
-
-body.experimental-feature-new-layout .note-indicator-icon.clone-indicator::before {
-    content: "\ed82";
+body.experimental-feature-new-layout span.fancytree-node.multiple-parents .fancytree-title::after {
+    content: " \ed82";
     opacity: 0.5;
 }
 
+span.fancytree-node.shared .fancytree-title::after {
+    font-family: "boxicons" !important;
+    font-size: smaller;
+    content: " \ec03"; /* lookup code for "share-alt" in boxicons.css */
+}
+
 span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-title {
     font-weight: bold;
 }
@@ -228,11 +229,11 @@ span.fancytree-node.archived {
     opacity: 0.6;
 }
 
-.fancytree-node:hover .tn-icon.tree-item-button {
+.fancytree-node:hover .bx.tree-item-button {
     display: inline-block;
 }
 
-.tn-icon.tree-item-button {
+.bx.tree-item-button {
     display: none;
     font-size: 120%;
     cursor: pointer;
@@ -242,7 +243,7 @@ span.fancytree-node.archived {
     border-radius: 5px;
 }
 
-.unhoist-button.tn-icon.tree-item-button {
+.unhoist-button.bx.tree-item-button {
     margin-inline-start: 0; /* unhoist button is on the left and doesn't need more margin */
     display: block; /* keep always visible */
 }

apps/client/src/translations/ar/translation.json

@@ -223,6 +223,7 @@
     "backlink_other": ""
   },
   "note_icon": {
+    "category": "الفئة:",
     "search": "بحث:",
     "change_note_icon": "تغيير ايقونة الملاحظة",
     "reset-default": "اعادة تعيين الى الايقونة الافتراضية"
@@ -484,6 +485,7 @@
     "delete_button": "حذف",
     "download_button": "تنزيل",
     "restore_button": "أستعادة",
+    "preview": "معاينة:",
     "note_revisions": "مراجعات الملاحظة",
     "diff_on": "عرض الفروقات",
     "diff_off": "عرض المحتوى",

apps/client/src/translations/ca/translation.json

@@ -64,7 +64,8 @@
     "restore_button": "Restaura",
     "delete_button": "Suprimeix",
     "download_button": "Descarrega",
-    "mime": "MIME: "
+    "mime": "MIME: ",
+    "preview": "Vista prèvia:"
   },
   "sort_child_notes": {
     "title": "títol",
@@ -145,6 +146,7 @@
     "relation": "relació"
   },
   "note_icon": {
+    "category": "Categoria:",
     "search": "Cerca:"
   },
   "basic_properties": {

apps/client/src/translations/cn/translation.json

@@ -290,6 +290,7 @@
     "download_button": "下载",
     "mime": "MIME 类型： ",
     "file_size": "文件大小：",
+    "preview": "预览：",
     "preview_not_available": "无法预览此类型的笔记。",
     "diff_on": "显示差异",
     "diff_off": "显示内容",
@@ -763,15 +764,9 @@
   },
   "note_icon": {
     "change_note_icon": "更改笔记图标",
+    "category": "类别:",
     "search": "搜索:",
-    "reset-default": "重置为默认图标",
-    "search_placeholder_other": "在 {{count}} 个图标包中搜索 {{number}} 个图标",
-    "search_placeholder_filtered": "在 {{name}} 中搜索 {{number}} 个图标",
-    "filter": "筛选",
-    "filter-none": "所有图标",
-    "filter-default": "默认图标",
-    "icon_tooltip": "{{name}}\n图标包：{{iconPack}}",
-    "no_results": "没有找到图标。"
+    "reset-default": "重置为默认图标"
   },
   "basic_properties": {
     "note_type": "笔记类型",
@@ -1451,7 +1446,7 @@
     "will_be_deleted_in": "此附件将在 {{time}} 后自动删除",
     "will_be_deleted_soon": "该附件在不久后将被自动删除",
     "deletion_reason": "，因为该附件未链接在笔记的内容中。为防止被删除，请将附件链接重新添加到内容中或将附件转换为笔记。",
-    "role_and_size": "角色：{{role}}，大小：{{size}}，文件类型：{{- mimeType}}",
+    "role_and_size": "角色：{{role}}，大小：{{size}}",
     "link_copied": "附件链接已复制到剪贴板。",
     "unrecognized_role": "无法识别的附件角色 '{{role}}'。"
   },
@@ -1594,11 +1589,7 @@
     "create-child-note": "创建子笔记",
     "unhoist": "取消聚焦",
     "toggle-sidebar": "切换侧边栏",
-    "dropping-not-allowed": "不允许移动笔记到此处。",
-    "shared-indicator-tooltip": "此笔记已公开分享",
-    "shared-indicator-tooltip-with-url": "此笔记已公开分享至：{{- url}}",
-    "clone-indicator-tooltip": "此笔记有 {{- count}} 个父级： {{- parents}}",
-    "clone-indicator-tooltip-single": "此笔记已克隆（1 个额外的父级：{{- parent}}）"
+    "dropping-not-allowed": "不允许移动笔记到此处。"
   },
   "title_bar_buttons": {
     "window-on-top": "保持此窗口置顶"
@@ -2196,14 +2187,7 @@
     "execute_sql_description": "这是一篇 SQL 笔记。点击即可执行 SQL 查询。",
     "shared_copy_to_clipboard": "复制链接到剪贴板",
     "shared_open_in_browser": "在浏览器中打开链接",
-    "shared_unshare": "取消共享",
-    "save_status_saved": "已保存",
-    "save_status_saving": "保存中...",
-    "save_status_unsaved": "未保存",
-    "save_status_error": "保存失败",
-    "save_status_unsaved_tooltip": "还有一些更改尚未保存。它们将稍后自动保存。",
-    "save_status_error_tooltip": "保存笔记时出错。如果可以，请尝试将笔记内容复制到其他位置并重新加载应用程序。",
-    "save_status_saving_tooltip": "更改正在保存。"
+    "shared_unshare": "取消共享"
   },
   "status_bar": {
     "language_title": "更改内容语言",
@@ -2234,12 +2218,5 @@
   },
   "attributes_panel": {
     "title": "笔记属性"
-  },
-  "pdf": {
-    "attachments_other": "{{count}} 个附件",
-    "pages_other": "共{{count}}页",
-    "pages_alt": "第{{pageNumber}}页",
-    "pages_loading": "加载中...",
-    "layers_other": "{{count}} 层"
   }
 }

apps/client/src/translations/de/translation.json

@@ -21,10 +21,7 @@
     },
     "bundle-error": {
       "title": "Benutzerdefiniertes Skript konnte nicht geladen werden",
-      "message": "Skript konnte nicht ausgeführt werden wegen:\n\n{{message}}"
-    },
-    "widget-list-error": {
-      "title": "Abruf der Liste von Widgets vom Server ist fehlgeschlagen"
+      "message": "Skript aus der Notiz \"{{title}}\" mit der ID \"{{id}}\", konnte nicht ausgeführt werden wegen:\n\n{{message}}"
     }
   },
   "add_link": {
@@ -281,6 +278,7 @@
     "download_button": "Herunterladen",
     "mime": "MIME: ",
     "file_size": "Dateigröße:",
+    "preview": "Vorschau:",
     "preview_not_available": "Für diesen Notiztyp ist keine Vorschau verfügbar.",
     "restore_button": "Wiederherstellen",
     "delete_button": "Löschen",
@@ -691,11 +689,7 @@
     "convert_into_attachment_successful": "Notiz '{{title}}' wurde als Anhang konvertiert.",
     "convert_into_attachment_prompt": "Bist du dir sicher, dass du die Notiz '{{title}}' in ein Anhang der übergeordneten Notiz konvertieren möchtest?",
     "print_pdf": "Export als PDF...",
-    "open_note_on_server": "Öffne Notiz auf dem Server",
-    "export_as_image": "Als Bild exportieren",
-    "export_as_image_png": "PNG (Raster)",
-    "export_as_image_svg": "SVG (Vektor)",
-    "note_map": "Notizen Karte"
+    "open_note_on_server": "Öffne Notiz auf dem Server"
   },
   "onclick_button": {
     "no_click_handler": "Das Schaltflächen-Widget „{{componentId}}“ hat keinen definierten Klick-Handler"
@@ -752,16 +746,9 @@
   },
   "note_icon": {
     "change_note_icon": "Notiz-Icon ändern",
+    "category": "Kategorie:",
     "search": "Suche:",
-    "reset-default": "Standard wiederherstellen",
-    "search_placeholder_one": "Suche {{number}} Icons über {{count}} Pakete",
-    "search_placeholder_other": "Suche {{number}} Icons über {{count}} Pakete",
-    "search_placeholder_filtered": "Suche {{number}} Icons in {{name}}",
-    "filter": "Filter",
-    "filter-none": "Alle Icons",
-    "filter-default": "Standard Icons",
-    "icon_tooltip": "{{name}}\nIcon Paket: {{iconPack}}",
-    "no_results": "Keine Icons gefunden."
+    "reset-default": "Standard wiederherstellen"
   },
   "basic_properties": {
     "note_type": "Notiztyp",
@@ -821,8 +808,7 @@
   },
   "inherited_attribute_list": {
     "title": "Geerbte Attribute",
-    "no_inherited_attributes": "Keine geerbten Attribute.",
-    "none": "Keine"
+    "no_inherited_attributes": "Keine geerbten Attribute."
   },
   "note_info_widget": {
     "note_id": "Notiz-ID",
@@ -833,9 +819,7 @@
     "note_size_info": "Die Notizgröße bietet eine grobe Schätzung des Speicherbedarfs für diese Notiz. Es berücksichtigt den Inhalt der Notiz und den Inhalt ihrer Notizrevisionen.",
     "calculate": "berechnen",
     "subtree_size": "(Teilbaumgröße: {{size}} in {{count}} Notizen)",
-    "title": "Notizinfo",
-    "mime": "MIME Typ",
-    "show_similar_notes": "Zeige ähnliche Notizen"
+    "title": "Notizinfo"
   },
   "note_map": {
     "open_full": "Vollständig erweitern",
@@ -898,8 +882,7 @@
     "search_parameters": "Suchparameter",
     "unknown_search_option": "Unbekannte Suchoption {{searchOptionName}}",
     "search_note_saved": "Suchnotiz wurde in {{-notePathTitle}} gespeichert",
-    "actions_executed": "Aktionen wurden ausgeführt.",
-    "view_options": "Anzeigeoptionen:"
+    "actions_executed": "Aktionen wurden ausgeführt."
   },
   "similar_notes": {
     "title": "Ähnliche Notizen",
@@ -1003,12 +986,7 @@
   "editable_text": {
     "placeholder": "Gebe hier den Inhalt deiner Notiz ein...",
     "auto-detect-language": "Automatisch erkannt",
-    "keeps-crashing": "Die Bearbeitungskomponente stürzt immer wieder ab. Bitte starten Sie Trilium neu. Wenn das Problem weiterhin besteht, erstellen Sie einen Fehlerbericht.",
-    "editor_crashed_title": "Der Text Editor ist abgestürzt",
-    "editor_crashed_content": "Ihr Inhalt wurde erfolgreich wiederhergestellt, aber einzelne Ihrer letzten Änderungen waren möglicherweise noch nicht gespeichert.",
-    "editor_crashed_details_button": "Zeige mehr Details…",
-    "editor_crashed_details_intro": "Falls Sie diesen Fehler mehrmals sehen, melden Sie dies auf GitHub mit den folgenden Informationen.",
-    "editor_crashed_details_title": "Technische Informationen"
+    "keeps-crashing": "Die Bearbeitungskomponente stürzt immer wieder ab. Bitte starten Sie Trilium neu. Wenn das Problem weiterhin besteht, erstellen Sie einen Fehlerbericht."
   },
   "empty": {
     "open_note_instruction": "Öffne eine Notiz, indem du den Titel der Notiz in die Eingabe unten eingibst oder eine Notiz in der Baumstruktur auswählst.",
@@ -1523,12 +1501,7 @@
   },
   "highlights_list_2": {
     "title": "Hervorhebungs-Liste",
-    "options": "Optionen",
-    "title_with_count_one": "{{count}} Highlight",
-    "title_with_count_other": "{{count}} Highlights",
-    "modal_title": "Highlight Liste konfigurieren",
-    "menu_configure": "Highlight Liste konfigurieren…",
-    "no_highlights": "Keine Highlights gefunden."
+    "options": "Optionen"
   },
   "quick-search": {
     "placeholder": "Schnellsuche",
@@ -1560,21 +1533,10 @@
   "note_detail": {
     "could_not_find_typewidget": "Konnte typeWidget für Typ ‚{{type}}‘ nicht finden",
     "printing": "Druckvorgang läuft…",
-    "printing_pdf": "PDF-Export läuft…",
-    "print_report_title": "Druckreport",
-    "print_report_collection_details_button": "Details anzeigen",
-    "print_report_collection_details_ignored_notes": "Ignorierte Notizen"
+    "printing_pdf": "PDF-Export läuft…"
   },
   "note_title": {
-    "placeholder": "Titel der Notiz hier eingeben…",
-    "created_on": "Erstellt am <Value />",
-    "last_modified": "Bearbeitet am <Value />",
-    "note_type_switcher_label": "Ändere von {{type}} zu:",
-    "note_type_switcher_others": "Andere Notizart",
-    "note_type_switcher_templates": "Template",
-    "note_type_switcher_collection": "Sammlung",
-    "edited_notes": "Notizen, bearbeitet an diesem Tag",
-    "promoted_attributes": "Hervorgehobene Attribute"
+    "placeholder": "Titel der Notiz hier eingeben…"
   },
   "search_result": {
     "no_notes_found": "Es wurden keine Notizen mit den angegebenen Suchparametern gefunden.",
@@ -1603,8 +1565,7 @@
   },
   "toc": {
     "table_of_contents": "Inhaltsverzeichnis",
-    "options": "Optionen",
-    "no_headings": "Keine Überschriften."
+    "options": "Optionen"
   },
   "watched_file_update_status": {
     "file_last_modified": "Datei <code class=\"file-path\"></code> wurde zuletzt geändert am <span class=\"file-last-modified\"></span>.",
@@ -2143,10 +2104,5 @@
   },
   "popup-editor": {
     "maximize": "Wechsele zum vollständigen Editor"
-  },
-  "experimental_features": {
-    "title": "Experimentelle Optionen",
-    "disclaimer": "Diese Optionen sind experimentell und können Instabilitäten verursachen. Achtsam zu verwenden.",
-    "new_layout_name": "Neues Layout"
   }
 }

apps/client/src/translations/en/translation.json

@@ -295,6 +295,7 @@
     "download_button": "Download",
     "mime": "MIME: ",
     "file_size": "File size:",
+    "preview": "Preview:",
     "preview_not_available": "Preview isn't available for this note type."
   },
   "sort_child_notes": {
@@ -764,16 +765,9 @@
   },
   "note_icon": {
     "change_note_icon": "Change note icon",
+    "category": "Category:",
     "search": "Search:",
-    "search_placeholder_one": "Search {{number}} icons across {{count}} packs",
-    "search_placeholder_other": "Search {{number}} icons across {{count}} packs",
-    "search_placeholder_filtered": "Search {{number}} icons in {{name}}",
-    "reset-default": "Reset to default icon",
-    "filter": "Filter",
-    "filter-none": "All icons",
-    "filter-default": "Default icons",
-    "icon_tooltip": "{{name}}\nIcon pack: {{iconPack}}",
-    "no_results": "No icons found."
+    "reset-default": "Reset to default icon"
   },
   "basic_properties": {
     "note_type": "Note type",
@@ -1619,7 +1613,7 @@
     "will_be_deleted_in": "This attachment will be automatically deleted in {{time}}",
     "will_be_deleted_soon": "This attachment will be automatically deleted soon",
     "deletion_reason": ", because the attachment is not linked in the note's content. To prevent deletion, add the attachment link back into the content or convert the attachment into note.",
-    "role_and_size": "Role: {{role}}, size: {{size}}, MIME: {{- mimeType}}",
+    "role_and_size": "Role: {{role}}, Size: {{size}}",
     "link_copied": "Attachment link copied to clipboard.",
     "unrecognized_role": "Unrecognized attachment role '{{role}}'."
   },
@@ -1768,11 +1762,7 @@
     "create-child-note": "Create child note",
     "unhoist": "Unhoist",
     "toggle-sidebar": "Toggle sidebar",
-    "dropping-not-allowed": "Dropping notes into this location is not allowed.",
-    "clone-indicator-tooltip": "This note has {{- count}} parents: {{- parents}}",
-    "clone-indicator-tooltip-single": "This note is cloned (1 additional parent: {{- parent}})",
-    "shared-indicator-tooltip": "This note is shared publicly",
-    "shared-indicator-tooltip-with-url": "This note is shared publicly at: {{- url}}"
+    "dropping-not-allowed": "Dropping notes into this location is not allowed."
   },
   "title_bar_buttons": {
     "window-on-top": "Keep Window on Top"
@@ -2208,14 +2198,7 @@
     "execute_script": "Run script",
     "execute_script_description": "This note is a script note. Click to execute the script.",
     "execute_sql": "Run SQL",
-    "execute_sql_description": "This note is a SQL note. Click to execute the SQL query.",
-    "save_status_saved": "Saved",
-    "save_status_saving": "Saving...",
-    "save_status_unsaved": "Unsaved",
-    "save_status_error": "Save failed",
-    "save_status_saving_tooltip": "Changes are being saved.",
-    "save_status_unsaved_tooltip": "There are unsaved changes. They will be saved automatically in a moment.",
-    "save_status_error_tooltip": "An error occurred while saving the note. If possible, try copying the note content elsewhere and reloading the application."
+    "execute_sql_description": "This note is a SQL note. Click to execute the SQL query."
   },
   "status_bar": {
     "language_title": "Change content language",
@@ -2244,15 +2227,5 @@
     "empty_button": "Hide the panel",
     "toggle": "Toggle right panel",
     "custom_widget_go_to_source": "Go to source code"
-  },
-  "pdf": {
-    "attachments_one": "{{count}} attachment",
-    "attachments_other": "{{count}} attachments",
-    "layers_one": "{{count}} layer",
-    "layers_other": "{{count}} layers",
-    "pages_one": "{{count}} page",
-    "pages_other": "{{count}} pages",
-    "pages_alt": "Page {{pageNumber}}",
-    "pages_loading": "Loading..."
   }
 }

apps/client/src/translations/es/translation.json

@@ -279,6 +279,7 @@
     "download_button": "Descargar",
     "mime": "MIME: ",
     "file_size": "Tamaño del archivo:",
+    "preview": "Vista previa:",
     "preview_not_available": "La vista previa no está disponible para este tipo de notas.",
     "diff_off": "Mostrar contenido",
     "diff_on": "Mostrar diferencia",
@@ -748,6 +749,7 @@
   },
   "note_icon": {
     "change_note_icon": "Cambiar icono de nota",
+    "category": "Categoría:",
     "search": "Búsqueda:",
     "reset-default": "Restablecer a icono por defecto"
   },

apps/client/src/translations/fr/translation.json

@@ -22,12 +22,6 @@
     "bundle-error": {
       "title": "Echec du chargement d'un script personnalisé",
       "message": "Le script de la note avec l'ID \"{{id}}\", intitulé \"{{title}}\" n'a pas pu être exécuté à cause de\n\n{{message}}"
-    },
-    "widget-list-error": {
-      "title": "Impossible d'obtenir la liste des widgets depuis le serveur"
-    },
-    "widget-render-error": {
-      "title": "Rendu impossible d'un widget React custom"
     }
   },
   "add_link": {
@@ -285,6 +279,7 @@
     "download_button": "Télécharger",
     "mime": "MIME : ",
     "file_size": "Taille du fichier :",
+    "preview": "Aperçu :",
     "preview_not_available": "L'aperçu n'est pas disponible pour ce type de note.",
     "restore_button": "Restaurer",
     "delete_button": "Supprimer",
@@ -761,12 +756,9 @@
   },
   "note_icon": {
     "change_note_icon": "Changer l'icône de note",
+    "category": "Catégorie :",
     "search": "Recherche :",
-    "reset-default": "Réinitialiser l'icône par défaut",
-    "filter": "Filtre",
-    "filter-none": "Toutes les icônes",
-    "filter-default": "Icônes par défaut",
-    "icon_tooltip": "{{name}}\nPack d'icônes : {{iconPack}}"
+    "reset-default": "Réinitialiser l'icône par défaut"
   },
   "basic_properties": {
     "note_type": "Type de note",
@@ -1550,8 +1542,7 @@
     "refresh-saved-search-results": "Rafraîchir les résultats de recherche enregistrée",
     "create-child-note": "Créer une note enfant",
     "unhoist": "Désactiver le focus",
-    "toggle-sidebar": "Basculer la barre latérale",
-    "dropping-not-allowed": "Lâcher des notes à cet endroit n'est pas autorisé"
+    "toggle-sidebar": "Basculer la barre latérale"
   },
   "title_bar_buttons": {
     "window-on-top": "Épingler cette fenêtre au premier plan"
@@ -1559,19 +1550,10 @@
   "note_detail": {
     "could_not_find_typewidget": "Impossible de trouver typeWidget pour le type '{{type}}'",
     "printing": "Impression en cours...",
-    "printing_pdf": "Export au format PDF en cours...",
-    "print_report_title": "Imprimer le rapport",
-    "print_report_collection_details_button": "Consulter les détails",
-    "print_report_collection_details_ignored_notes": "Notes ignorées"
+    "printing_pdf": "Export au format PDF en cours..."
   },
   "note_title": {
-    "placeholder": "saisir le titre de la note ici...",
-    "created_on": "Créé le <Value />",
-    "last_modified": "Modifié le <Value />",
-    "note_type_switcher_label": "Basculer de {{type}} à :",
-    "note_type_switcher_others": "Autre type de note",
-    "note_type_switcher_templates": "Modèle",
-    "note_type_switcher_collection": "Collection"
+    "placeholder": "saisir le titre de la note ici..."
   },
   "search_result": {
     "no_notes_found": "Aucune note n'a été trouvée pour les paramètres de recherche donnés.",
@@ -1600,8 +1582,7 @@
   },
   "toc": {
     "table_of_contents": "Table des matières",
-    "options": "Options",
-    "no_headings": "Pas d'en-tête."
+    "options": "Options"
   },
   "watched_file_update_status": {
     "file_last_modified": "Le fichier <code class=\"file-path\"></code> a été modifié pour la dernière fois le <span class=\"file-last-modified\"></span>.",
@@ -1702,8 +1683,7 @@
     "copy-link": "Copier le lien",
     "paste": "Coller",
     "paste-as-plain-text": "Coller comme texte brut",
-    "search_online": "Rechercher «{{term}}» avec {{searchEngine}}",
-    "search_in_trilium": "Rechercher \"{{term}}\" dans Trilium"
+    "search_online": "Rechercher «{{term}}» avec {{searchEngine}}"
   },
   "image_context_menu": {
     "copy_reference_to_clipboard": "Copier la référence dans le presse-papiers",
@@ -2012,8 +1992,7 @@
     "add-column": "Ajouter une colonne",
     "add-column-placeholder": "Entrez le nom de la colonne...",
     "edit-note-title": "Cliquez pour modifier le titre de la note",
-    "edit-column-title": "Cliquez pour modifier le titre de la colonne",
-    "column-already-exists": "Cette colonne existe déjà dans le tableau."
+    "edit-column-title": "Cliquez pour modifier le titre de la colonne"
   },
   "presentation_view": {
     "edit-slide": "Modifier cette diapositive",
@@ -2097,8 +2076,7 @@
     "button_title": "Exporter le diagramme au format PNG"
   },
   "svg": {
-    "export_to_png": "Le diagramme n'a pas pu être exporté au format PNG.",
-    "export_to_svg": "Le diagramme n'a pas pu être exporté en SVG."
+    "export_to_png": "Le diagramme n'a pas pu être exporté au format PNG."
   },
   "code_theme": {
     "title": "Apparence",
@@ -2131,10 +2109,6 @@
   },
   "read-only-info": {
     "read-only-note": "Vous consultez actuellement une note en lecture seule.",
-    "auto-read-only-note": "Cette note s'affiche en mode lecture seule pour un chargement plus rapide.",
-    "edit-note": "Editer la note"
-  },
-  "calendar_view": {
-    "delete_note": "Effacer la note..."
+    "auto-read-only-note": "Cette note s'affiche en mode lecture seule pour un chargement plus rapide."
   }
 }

apps/client/src/translations/hi/translation.json

@@ -1,35 +1,5 @@
 {
   "about": {
-    "title": "ट्रिलियम नोट्स के बारें में",
-    "build_date": "निर्माण की तारीख:"
-  },
-  "toast": {
-    "widget-error": {
-      "title": "एक विजेट को इनिशियलाइज़ करने में विफल रहा"
-    },
-    "bundle-error": {
-      "title": "एक कस्टम स्क्रिप्ट लोड करने में विफल रहा"
-    },
-    "widget-list-error": {
-      "title": "सर्वर से विजेट्स की सूची प्राप्त करने में विफल"
-    },
-    "open-script-note": "स्क्रिप्ट नोट खोलें"
-  },
-  "update_available": {
-    "update_available": "उपलब्ध अद्यतन"
-  },
-  "code_buttons": {
-    "execute_button_title": "स्क्रिप्ट एक्सीक्यूट करें",
-    "trilium_api_docs_button_title": "ट्रिलियम एपीआई डॉक्स खोलें",
-    "save_to_note_button_title": "नोट में सेव करें"
-  },
-  "hide_floating_buttons_button": {
-    "button_title": "बटन छुपाएं"
-  },
-  "show_floating_buttons_button": {
-    "button_title": "बटन दिखाएं"
-  },
-  "add_link": {
-    "note": "नोट"
+    "title": "ट्रिलियम नोट्स के बारें में"
   }
 }

apps/client/src/translations/it/translation.json

@@ -16,22 +16,13 @@
     },
     "bundle-error": {
       "title": "Non si è riusciti a caricare uno script personalizzato",
-      "message": "Impossibile eseguire lo script a causa di:\n\n{{message}}"
+      "message": "Lo script della nota con ID \"{{id}}\", dal titolo \"{{title}}\" non è stato inizializzato a causa di:\n\n{{message}}"
     },
     "widget-error": {
       "title": "Impossibile inizializzare un widget",
       "message-custom": "Il widget personalizzato dalla nota con ID “{{id}}”, intitolato “{{title}}”, non è stato possibile inizializzare a causa di:\n\n{{message}}",
       "message-unknown": "Un widget sconosciuto non è stato inizializzato a causa di:\n\n{{message}}"
-    },
-    "widget-list-error": {
-      "title": "Impossibile ottenere l'elenco dei widget dal server"
-    },
-    "widget-render-error": {
-      "title": "Impossibile eseguire il rendering di un widget React personalizzato"
-    },
-    "widget-missing-parent": "Il widget personalizzato non ha la proprietà obbligatoria '{{property}}' definita.\n\nSe questo script deve essere eseguito senza un elemento dell'interfaccia utente, utilizzare invece '#run=frontendStartup'.",
-    "open-script-note": "Apri script note",
-    "scripting-error": "Errore script personalizzato: {{title}}"
+    }
   },
   "add_link": {
     "add_link": "Aggiungi un collegamento",
@@ -902,6 +893,7 @@
     "download_button": "Scarica",
     "mime": "MIME: ",
     "file_size": "Dimensione del file:",
+    "preview": "Anteprima:",
     "preview_not_available": "L'anteprima non è disponibile per questo tipo di nota."
   },
   "sort_child_notes": {
@@ -1341,17 +1333,9 @@
   },
   "note_icon": {
     "change_note_icon": "Cambia icona nota",
+    "category": "Categoria:",
     "search": "Ricerca:",
-    "reset-default": "Ripristina l'icona predefinita",
-    "search_placeholder_one": "Cerca {{number}} icona in {{count}} pacchetto",
-    "search_placeholder_many": "Cerca {{number}} icone in {{count}} pacchetti",
-    "search_placeholder_other": "Cerca {{number}} icone in {{count}} pacchetti",
-    "search_placeholder_filtered": "Cerca {{number}} icone in {{name}}",
-    "filter": "Filtro",
-    "filter-none": "Tutte le icone",
-    "filter-default": "Icone predefinite",
-    "icon_tooltip": "{{name}}\nPacchetto icone: {{iconPack}}",
-    "no_results": "Nessuna icona trovata."
+    "reset-default": "Ripristina l'icona predefinita"
   },
   "basic_properties": {
     "note_type": "Tipo di nota",
@@ -1809,7 +1793,7 @@
     "will_be_deleted_in": "Questo allegato verrà eliminato automaticamente tra {{time}}",
     "will_be_deleted_soon": "Questo allegato verrà eliminato automaticamente a breve",
     "deletion_reason": ", perché l'allegato non è collegato al contenuto della nota. Per impedirne l'eliminazione, aggiungi nuovamente il collegamento all'allegato nel contenuto o converti l'allegato in nota.",
-    "role_and_size": "Ruolo: {{role}}, dimensione: {{size}}, MIME: {{- mimeType}}",
+    "role_and_size": "Ruolo: {{role}}, Dimensione: {{size}}",
     "link_copied": "Link all'allegato copiato negli appunti.",
     "unrecognized_role": "Ruolo di allegato non riconosciuto '{{role}}'."
   },
@@ -1903,13 +1887,7 @@
   "note_detail": {
     "could_not_find_typewidget": "Impossibile trovare typeWidget per il tipo '{{type}}'",
     "printing": "Stampa in corso...",
-    "printing_pdf": "Esportazione in PDF in corso...",
-    "print_report_title": "Stampa rapporto",
-    "print_report_collection_content_one": "{{count}} la note nella raccolta non può essere stampata perché non è supportata o è protetta.",
-    "print_report_collection_content_many": "{{count}} le note nella raccolta non possono essere stampate perché non sono supportate o sono protette.",
-    "print_report_collection_content_other": "{{count}} le note nella raccolta non possono essere stampate perché non sono supportate o sono protette.",
-    "print_report_collection_details_button": "Vedi dettagli",
-    "print_report_collection_details_ignored_notes": "Note ignorate"
+    "printing_pdf": "Esportazione in PDF in corso..."
   },
   "note_title": {
     "placeholder": "scrivi qui il titolo della nota...",
@@ -1919,8 +1897,7 @@
     "note_type_switcher_others": "Altro tipo di nota",
     "note_type_switcher_templates": "Modello",
     "note_type_switcher_collection": "Collezione",
-    "edited_notes": "Note modificate in questo giorno",
-    "promoted_attributes": "Attributi promossi"
+    "edited_notes": "Note modificate"
   },
   "search_result": {
     "no_notes_found": "Non sono state trovate note per i parametri di ricerca specificati.",

apps/client/src/translations/ja/translation.json

@@ -152,22 +152,16 @@
   },
   "note_icon": {
     "change_note_icon": "ノートアイコンの変更",
+    "category": "カテゴリー:",
     "search": "検索:",
-    "reset-default": "アイコンをデフォルトに戻す",
-    "search_placeholder_other": "{{count}} 個のパックから {{number}} 個のアイコンを検索",
-    "search_placeholder_filtered": "{{name}} で {{number}} 個のアイコンを検索",
-    "filter": "フィルター",
-    "filter-none": "すべてのアイコン",
-    "filter-default": "デフォルトアイコン",
-    "icon_tooltip": "{{name}}\nアイコンパック: {{iconPack}}",
-    "no_results": "アイコンが見つかりません。"
+    "reset-default": "アイコンをデフォルトに戻す"
   },
   "basic_properties": {
     "note_type": "ノートタイプ",
     "editable": "編集可能",
     "basic_properties": "基本プロパティ",
     "language": "言語",
-    "configure_code_notes": "コードノートを設定..."
+    "configure_code_notes": "コードノートを設定しています..."
   },
   "i18n": {
     "title": "ローカライゼーション",
@@ -654,6 +648,7 @@
     "revision_deleted": "ノートの変更履歴は削除されました。",
     "settings": "ノートの変更履歴の設定",
     "file_size": "ファイルサイズ:",
+    "preview": "プレビュー:",
     "preview_not_available": "このノートタイプではプレビューは利用できません。",
     "diff_on": "差分を表示",
     "diff_off": "内容を表示",
@@ -1244,11 +1239,7 @@
     "saved-search-note-refreshed": "保存した検索ノートが更新されました。",
     "refresh-saved-search-results": "保存した検索結果を更新",
     "toggle-sidebar": "サイドバーを切り替え",
-    "dropping-not-allowed": "この場所にノートをドロップすることはできません。",
-    "clone-indicator-tooltip": "このノートには {{- count}} 個の親があります: {{- parents}}",
-    "clone-indicator-tooltip-single": "このノートは複製されています (親が 1 件追加: {{- parent}})",
-    "shared-indicator-tooltip": "このノートは公開されています",
-    "shared-indicator-tooltip-with-url": "このノートは以下で公開されています: {{- url}}"
+    "dropping-not-allowed": "この場所にノートをドロップすることはできません。"
   },
   "bulk_actions": {
     "bulk_actions": "一括操作",
@@ -2139,7 +2130,7 @@
     "will_be_deleted_in": "この添付ファイルは {{time}} 後に自動的に削除されます",
     "will_be_deleted_soon": "この添付ファイルはすぐに自動的に削除されます",
     "deletion_reason": "、添付ファイルがノートのコンテンツにリンクされていないためです。削除されないようにするには、添付ファイルのリンクをコンテンツに再度追加するか、添付ファイルをノートに変換してください。",
-    "role_and_size": "ロール: {{role}},サイズ: {{size}}, MIME: {{- mimeType}}",
+    "role_and_size": "ロール: {{role}},サイズ: {{size}}",
     "link_copied": "添付ファイルのリンクをクリップボードにコピーしました。",
     "unrecognized_role": "添付ファイルのロール「{{role}}」は認識されません。"
   },
@@ -2196,14 +2187,7 @@
     "execute_sql_description": "このノートは SQL ノートです。クリックすると SQL クエリが実行されます。",
     "shared_copy_to_clipboard": "リンクをクリップボードにコピー",
     "shared_open_in_browser": "ブラウザでリンクを開く",
-    "shared_unshare": "共有を削除",
-    "save_status_saved": "保存されました",
-    "save_status_saving": "保存中...",
-    "save_status_unsaved": "未保存",
-    "save_status_error": "保存に失敗しました",
-    "save_status_saving_tooltip": "変更を保存しています。",
-    "save_status_unsaved_tooltip": "未保存の変更があります。すぐに自動的に保存されます。",
-    "save_status_error_tooltip": "ノートの保存中にエラーが発生しました。可能であれば、ノートの内容を別の場所にコピーして、アプリケーションを再読み込みしてください。"
+    "shared_unshare": "共有を削除"
   },
   "status_bar": {
     "language_title": "コンテンツの言語を変更",
@@ -2234,12 +2218,5 @@
   },
   "attributes_panel": {
     "title": "ノート属性"
-  },
-  "pdf": {
-    "attachments_other": "{{count}} 添付ファイル",
-    "layers_other": "{{count}} 層",
-    "pages_other": "{{count}} ページ",
-    "pages_alt": "ページ {{pageNumber}}",
-    "pages_loading": "読み込み中..."
   }
 }

apps/client/src/translations/nb-NO/translation.json

@@ -1,22 +1 @@
-{
-  "about": {
-    "title": "Om Trilium Notes",
-    "app_version": "App versjon:",
-    "db_version": "DB versjon:",
-    "sync_version": "Synk versjon:",
-    "build_date": "Byggdato:",
-    "build_revision": "Bygg versjon:",
-    "data_directory": "Datamappe:",
-    "homepage": "Hjemmeside:"
-  },
-  "experimental_features": {
-    "new_layout_description": "Prøv det nye grensesnittet for et mer moderne utseende og forbedret brukervenlighet. Det må påregnes betydelige endringer i kommende versjoner."
-  },
-  "cpu_arch_warning": {
-    "recommendation": "For den beste brukeropplevelsen, vennligst last ned den tilpassede ARM64-versjonen av TriliumNext fra siden for utgivelser."
-  },
-  "zpetne_odkazy": {
-    "backlink_one": "{{count}} Tilbakelenke",
-    "backlink_other": "{{count}} Tilbakelenker"
-  }
-}
+{}

apps/client/src/translations/pl/translation.json

@@ -959,6 +959,7 @@
     "download_button": "Pobierz",
     "mime": "MIME: ",
     "file_size": "Rozmiar pliku:",
+    "preview": "Podgląd:",
     "preview_not_available": "Podgląd nie jest dostępny dla tego typu notatki."
   },
   "sort_child_notes": {
@@ -1285,6 +1286,7 @@
   },
   "note_icon": {
     "change_note_icon": "Zmień ikonę notatki",
+    "category": "Kategoria:",
     "search": "Szukaj:",
     "reset-default": "Przywróć domyślną ikonę"
   },

apps/client/src/translations/pt/translation.json

@@ -274,6 +274,7 @@
     "download_button": "Descarregar",
     "mime": "MIME: ",
     "file_size": "Tamanho do ficheiro:",
+    "preview": "Visualizar:",
     "preview_not_available": "A visualização não está disponível para este tipo de nota."
   },
   "sort_child_notes": {
@@ -723,6 +724,7 @@
   },
   "note_icon": {
     "change_note_icon": "Alterar ícone da nota",
+    "category": "Categoria:",
     "search": "Pesquisa:",
     "reset-default": "Redefinir para o ícone padrão"
   },

apps/client/src/translations/pt_br/translation.json

@@ -439,6 +439,7 @@
     "download_button": "Download",
     "mime": "MIME: ",
     "file_size": "Tamanho do arquivo:",
+    "preview": "Visualizar:",
     "preview_not_available": "A visualização não está disponível para este tipo de nota.",
     "diff_on": "Exibir diferença",
     "diff_off": "Exibir conteúdo",
@@ -1007,6 +1008,7 @@
   },
   "note_icon": {
     "change_note_icon": "Alterar ícone da nota",
+    "category": "Categoria:",
     "search": "Busca:",
     "reset-default": "Redefinir para o ícone padrão"
   },

apps/client/src/translations/ro/translation.json

@@ -1103,6 +1103,7 @@
     "mime": "MIME: ",
     "no_revisions": "Nu există încă nicio revizie pentru această notiță...",
     "note_revisions": "Revizii ale notiței",
+    "preview": "Previzualizare:",
     "preview_not_available": "Nu este disponibilă o previzualizare pentru acest tip de notiță.",
     "restore_button": "Restaurează",
     "revision_deleted": "Revizia notiței a fost ștearsă.",
@@ -1482,6 +1483,7 @@
   },
   "note_icon": {
     "change_note_icon": "Schimbă iconița notiței",
+    "category": "Categorie:",
     "reset-default": "Resetează la iconița implicită",
     "search": "Căutare:"
   },

apps/client/src/translations/ru/translation.json

@@ -387,6 +387,7 @@
     "revision_deleted": "Версия заметки была удалена.",
     "download_button": "Скачать",
     "file_size": "Размер файла:",
+    "preview": "Предпросмотр:",
     "preview_not_available": "Предпосмотр недоступен для заметки этого типа.",
     "mime": "MIME: ",
     "settings": "Настройка версионирования заметок",
@@ -1009,18 +1010,10 @@
     "backlink_many": "{{count}} обратных ссылок"
   },
   "note_icon": {
+    "category": "Категория:",
     "search": "Поиск:",
     "change_note_icon": "Изменить иконку заметки",
-    "reset-default": "Сбросить к значку по умолчанию",
-    "no_results": "Иконки не найдены.",
-    "icon_tooltip": "{{name}}\nНабор иконок: {{iconPack}}",
-    "filter-default": "Иконки по-умолчанию",
-    "filter-none": "Все иконки",
-    "filter": "Фильтр",
-    "search_placeholder_filtered": "Поиск {{number}} иконок в {{name}}",
-    "search_placeholder_one": "Поиск {{number}} иконки среди {{count}} наборов",
-    "search_placeholder_few": "Поиск {{number}} иконок среди {{count}} наборов",
-    "search_placeholder_many": "Поиск {{number}} иконок среди {{count}} наборов"
+    "reset-default": "Сбросить к значку по умолчанию"
   },
   "basic_properties": {
     "editable": "Изменяемое",
@@ -2033,7 +2026,7 @@
     "lost-websocket-connection-message": "Проверьте конфигурацию обратного прокси (например, nginx или Apache), чтобы убедиться, что соединения WebSocket должным образом разрешены и не заблокированы."
   },
   "attachment_detail_2": {
-    "role_and_size": "Роль: {{role}}, размер: {{size}}, MIME: {{- mimeType}}",
+    "role_and_size": "Роль: {{role}}, Размер: {{size}}",
     "unrecognized_role": "Нераспознанная роль вложения '{{role}}'.",
     "link_copied": "Ссылка на вложение скопирована в буфер обмена.",
     "will_be_deleted_soon": "Это вложение скоро будет автоматически удалено",

apps/client/src/translations/sr/translation.json

@@ -271,6 +271,7 @@
     "download_button": "Preuzmi",
     "mime": "MIME: ",
     "file_size": "Veličina datoteke:",
+    "preview": "Pregled:",
     "preview_not_available": "Pregled nije dostupan za ovaj tip beleške."
   },
   "sort_child_notes": {

apps/client/src/translations/tw/translation.json

@@ -21,7 +21,7 @@
     },
     "bundle-error": {
       "title": "載入自訂腳本失敗",
-      "message": "腳本因以下原因無法執行：\n\n{{message}}"
+      "message": "來自 ID 為 \"{{id}}\"、標題為 \"{{title}}\" 的筆記的腳本因以下原因無法執行：\n\n{{message}}"
     },
     "widget-list-error": {
       "title": "無法從伺服器取得元件清單"
@@ -29,9 +29,8 @@
     "widget-render-error": {
       "title": "無法渲染自訂 React 元件"
     },
-    "widget-missing-parent": "自訂元件未定義強制性的 \"{{property}}\" 屬性。\n\n若此腳本需在無 UI 的情況下執行，請改用 \"#run=frontendStartup\"。",
-    "open-script-note": "打開腳本筆記",
-    "scripting-error": "自訂腳本錯誤：{{title}}"
+    "widget-missing-parent": "自訂元件未定義強制性的 \"{{property}}\" 屬性。",
+    "open-script-note": "打開腳本筆記"
   },
   "add_link": {
     "add_link": "新增連結",
@@ -288,6 +287,7 @@
     "download_button": "下載",
     "mime": "MIME類型： ",
     "file_size": "檔案大小：",
+    "preview": "預覽：",
     "preview_not_available": "無法預覽此類型的筆記。",
     "restore_button": "還原",
     "delete_button": "刪除",
@@ -761,16 +761,9 @@
   },
   "note_icon": {
     "change_note_icon": "更改筆記圖標",
+    "category": "類別：",
     "search": "搜尋：",
-    "reset-default": "重置為預設圖標",
-    "search_placeholder_one": "在 {{count}} 個圖示包中搜尋 {{number}} 個圖示",
-    "search_placeholder_other": "",
-    "search_placeholder_filtered": "在 {{name}} 中搜尋 {{number}} 個圖示",
-    "filter": "篩選",
-    "filter-none": "所有圖示",
-    "filter-default": "預設圖示",
-    "icon_tooltip": "{{name}}\n圖示包：{{iconPack}}",
-    "no_results": "找不到圖示。"
+    "reset-default": "重置為預設圖標"
   },
   "basic_properties": {
     "note_type": "筆記類型",
@@ -1412,7 +1405,7 @@
     "will_be_deleted_in": "此附件將在 {{time}} 後自動刪除",
     "will_be_deleted_soon": "該附件即將被自動刪除",
     "deletion_reason": "，因為該附件未連結在筆記的內容中。為防止被刪除，請將附件連結重新新增至內容中或將附件轉換為筆記。",
-    "role_and_size": "角色：{{role}}，大小：{{size}}，MIME：{{- mimeType}}",
+    "role_and_size": "角色：{{role}}，大小：{{size}}",
     "link_copied": "已複製附件連結到剪貼簿。",
     "unrecognized_role": "無法識別的附件角色 '{{role}}'。"
   },
@@ -1556,11 +1549,7 @@
     "create-child-note": "建立子筆記",
     "unhoist": "取消聚焦",
     "toggle-sidebar": "切換側邊欄",
-    "dropping-not-allowed": "不允許移動筆記至此處。",
-    "clone-indicator-tooltip": "此筆記有 {{- count}} 個父級：{{- parents}}",
-    "clone-indicator-tooltip-single": "此筆記已克隆（新增 1 個父級：{{- parent}}）",
-    "shared-indicator-tooltip": "此筆記已公開分享",
-    "shared-indicator-tooltip-with-url": "此筆記已公開分享至：{{- url}}"
+    "dropping-not-allowed": "不允許移動筆記至此處。"
   },
   "title_bar_buttons": {
     "window-on-top": "保持此視窗置頂"
@@ -1568,12 +1557,7 @@
   "note_detail": {
     "could_not_find_typewidget": "找不到類型為 '{{type}}' 的 typeWidget",
     "printing": "正在列印…",
-    "printing_pdf": "正在匯出為 PDF…",
-    "print_report_title": "列印報告",
-    "print_report_collection_content_one": "集合中的 {{count}} 篇筆記無法列印，因為它們不被支援或受到保護。",
-    "print_report_collection_content_other": "",
-    "print_report_collection_details_button": "查看詳情",
-    "print_report_collection_details_ignored_notes": "忽略的筆記"
+    "printing_pdf": "正在匯出為 PDF…"
   },
   "note_title": {
     "placeholder": "請輸入筆記標題...",
@@ -1583,8 +1567,7 @@
     "note_type_switcher_others": "其他筆記類型",
     "note_type_switcher_templates": "模板",
     "note_type_switcher_collection": "集合",
-    "edited_notes": "今天編輯過的筆記",
-    "promoted_attributes": "升級屬性"
+    "edited_notes": "編輯過的筆記"
   },
   "search_result": {
     "no_notes_found": "沒有找到符合搜尋條件的筆記。",
@@ -2200,14 +2183,7 @@
     "read_only_temporarily_disabled_description": "此筆記目前可編輯，但通常為唯讀狀態。當您切換至其他筆記時，本筆記將立即恢復為唯讀模式。\n\n點擊此處重新啟用唯讀模式。",
     "clipped_note_description": "本筆記原始來源為 {{url}}。\n\n點擊此處前往原網頁。",
     "execute_script_description": "此筆記為腳本筆記。點擊以執行腳本。",
-    "execute_sql_description": "此筆記為 SQL 筆記。點擊以執行 SQL 查詢。",
-    "save_status_saved": "已儲存",
-    "save_status_saving": "正在儲存…",
-    "save_status_unsaved": "未儲存",
-    "save_status_error": "儲存失敗",
-    "save_status_saving_tooltip": "正在儲存更動。",
-    "save_status_unsaved_tooltip": "仍有更動尚未儲存。它們將在稍後自動儲存。",
-    "save_status_error_tooltip": "在儲存筆記時發生錯誤。如果可以，請嘗試將筆記內容複製至他處並重新載入應用程式。"
+    "execute_sql_description": "此筆記為 SQL 筆記。點擊以執行 SQL 查詢。"
   },
   "breadcrumb": {
     "hoisted_badge": "聚焦",
@@ -2244,15 +2220,5 @@
   },
   "attributes_panel": {
     "title": "筆記屬性"
-  },
-  "pdf": {
-    "attachments_one": "{{count}} 個附件",
-    "attachments_other": "",
-    "layers_one": "{{count}} 層",
-    "layers_other": "",
-    "pages_one": "共 {{count}} 頁",
-    "pages_other": "",
-    "pages_alt": "第 {{pageNumber}} 頁",
-    "pages_loading": "正在載入…"
   }
 }

apps/client/src/translations/uk/translation.json

@@ -321,6 +321,7 @@
     "download_button": "Завантажити",
     "mime": "МІМЕ: ",
     "file_size": "Розмір файлу:",
+    "preview": "Попередній перегляд:",
     "preview_not_available": "Попередній перегляд недоступний для цього типу нотатки.",
     "diff_on": "Показати різницю",
     "diff_off": "Показати вміст",
@@ -848,6 +849,7 @@
   },
   "note_icon": {
     "change_note_icon": "Змінити значок нотатки",
+    "category": "Категорія:",
     "search": "Пошук:",
     "reset-default": "Скинути значок до стандартного значення"
   },

apps/client/src/types-assets.d.ts

@@ -17,3 +17,5 @@ declare module "*?raw" {
     var content: string;
     export default content;
 }
+
+declare module "boxicons/css/boxicons.min.css" { }

apps/client/src/types-pdfjs.d.ts

@@ -1,121 +0,0 @@
-type HistoryData = {
-    files: {
-        fingerprint: string;
-        page: number;
-        zoom: string;
-        scrollLeft: number;
-        scrollTop: number;
-        rotation: number;
-        sidebarView: number;
-    }[];
-};
-
-interface Window {
-    /**
-     * By default, pdf.js will try to store information about the opened PDFs such as zoom and scroll position in local storage.
-     * The Trilium alternative is to use attachments stored at note level.
-     * This variable represents the direct content used by the pdf.js viewer in its local storage key, but in plain JS object format.
-     * The variable must be set early at startup, before pdf.js fully initializes.
-     */
-    TRILIUM_VIEW_HISTORY_STORE?: HistoryData;
-
-    /**
-     * If set to true, hides the pdf.js viewer default sidebar containing the outline, page navigation, etc.
-     * This needs to be set early in the main method.
-     */
-    TRILIUM_HIDE_SIDEBAR?: boolean;
-
-    TRILIUM_NOTE_ID: string;
-
-    TRILIUM_NTX_ID: string | null | undefined;
-}
-
-interface PdfOutlineItem {
-    title: string;
-    level: number;
-    dest: unknown;
-    id: string;
-    items: PdfOutlineItem[];
-}
-
-interface WithContext {
-    ntxId: string;
-    noteId: string | null | undefined;
-}
-
-interface PdfDocumentModifiedMessage extends WithContext {
-    type: "pdfjs-viewer-document-modified";
-}
-
-interface PdfDocumentBlobResultMessage extends WithContext {
-    type: "pdfjs-viewer-blob";
-    data: Uint8Array<ArrayBufferLike>;
-}
-
-interface PdfSaveViewHistoryMessage extends WithContext {
-    type: "pdfjs-viewer-save-view-history";
-    data: string;
-}
-
-interface PdfViewerTocMessage {
-    type: "pdfjs-viewer-toc";
-    data: PdfOutlineItem[];
-}
-
-interface PdfViewerActiveHeadingMessage {
-    type: "pdfjs-viewer-active-heading";
-    headingId: string;
-}
-
-interface PdfViewerPageInfoMessage {
-    type: "pdfjs-viewer-page-info";
-    totalPages: number;
-    currentPage: number;
-}
-
-interface PdfViewerCurrentPageMessage {
-    type: "pdfjs-viewer-current-page";
-    currentPage: number;
-}
-
-interface PdfViewerThumbnailMessage {
-    type: "pdfjs-viewer-thumbnail";
-    pageNumber: number;
-    dataUrl: string;
-}
-
-interface PdfAttachment {
-    filename: string;
-    size: number;
-}
-
-interface PdfViewerAttachmentsMessage {
-    type: "pdfjs-viewer-attachments";
-    attachments: PdfAttachment[];
-    downloadAttachment?: (fileName: string) => void;
-}
-
-interface PdfLayer {
-    id: string;
-    name: string;
-    visible: boolean;
-}
-
-interface PdfViewerLayersMessage {
-    type: "pdfjs-viewer-layers";
-    layers: PdfLayer[];
-    toggleLayer?: (layerId: string, visible: boolean) => void;
-}
-
-type PdfMessageEvent = MessageEvent<
-    PdfDocumentModifiedMessage
-    | PdfSaveViewHistoryMessage
-    | PdfViewerTocMessage
-    | PdfViewerActiveHeadingMessage
-    | PdfViewerPageInfoMessage
-    | PdfViewerCurrentPageMessage
-    | PdfViewerThumbnailMessage
-    | PdfViewerAttachmentsMessage
-    | PdfViewerLayersMessage
-    | PdfDocumentBlobResultMessage
->;

apps/client/src/types.d.ts

@@ -1,5 +1,3 @@
-import { IconRegistry } from "@triliumnext/commons";
-
 import appContext, { AppContext } from "./components/app_context";
 import type FNote from "./entities/fnote";
 import type { PrintReport } from "./print";
@@ -48,7 +46,6 @@ interface CustomGlobals {
     linter: typeof lint;
     hasNativeTitleBar: boolean;
     isRtl: boolean;
-    iconRegistry: IconRegistry;
 }
 
 type RequireMethod = (moduleName: string) => any;

apps/client/src/widgets/FloatingButtonsDefinitions.tsx

@@ -142,7 +142,7 @@ function ShowTocWidgetButton({ note, noteContext, isDefaultViewMode }: FloatingB
 
     return isEnabled && <FloatingButton
         text={t("show_toc_widget_button.show_toc")}
-        icon="bx bx-spreadsheet bx-rotate-180"
+        icon="bx bx-tn-toc"
         onClick={() => {
             if (noteContext?.viewScope && noteContext.noteId) {
                 noteContext.viewScope.tocTemporarilyHidden = false;

apps/client/src/widgets/buttons/right_pane_toggle.tsx

@@ -1,17 +1,11 @@
 import clsx from "clsx";
 
 import { t } from "../../services/i18n";
-import options from "../../services/options";
 import ActionButton from "../react/ActionButton";
-import { useState, useCallback } from "preact/hooks";
-import { useTriliumEvent } from "../react/hooks";
+import { useTriliumOptionBool } from "../react/hooks";
 
 export default function RightPaneToggle() {
-    const [ rightPaneVisible, setRightPaneVisible ] = useState(options.is("rightPaneVisible"));
-
-    useTriliumEvent("toggleRightPane", useCallback(() => {
-        setRightPaneVisible(current => !current);
-    }, []));
+    const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
 
     return (
         <ActionButton
@@ -21,7 +15,7 @@ export default function RightPaneToggle() {
             )}
             text={t("right_pane.toggle")}
             icon="bx bx-sidebar"
-            triggerCommand="toggleRightPane"
+            onClick={() => setRightPaneVisible(!rightPaneVisible)}
         />
     );
 }

apps/client/src/widgets/collections/NoteList.css

@@ -12,7 +12,7 @@ body.prefers-centered-content .note-list-widget:not(.full-height) {
 }
 
 .note-list-widget .note-list {
-    padding-block: 10px;
+    padding: 10px;
 }
 
 .note-list-widget.full-height,

apps/client/src/widgets/collections/NoteList.tsx

@@ -11,8 +11,7 @@ import froca from "../../services/froca";
 import { subscribeToMessages, unsubscribeToMessage as unsubscribeFromMessage } from "../../services/ws";
 import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent } from "../react/hooks";
 import { allViewTypes, ViewModeMedia, ViewModeProps, ViewTypeOptions } from "./interface";
-import ViewModeStorage, { type ViewModeStorageType } from "./view_mode_storage";
-
+import ViewModeStorage from "./view_mode_storage";
 interface NoteListProps {
     note: FNote | null | undefined;
     notePath: string | null | undefined;
@@ -216,7 +215,7 @@ export function useNoteIds(note: FNote | null | undefined, viewType: ViewTypeOpt
     return noteIds;
 }
 
-export function useViewModeConfig<T extends object>(note: FNote | null | undefined, viewType: ViewModeStorageType | undefined) {
+export function useViewModeConfig<T extends object>(note: FNote | null | undefined, viewType: ViewTypeOptions | undefined) {
     const [ viewConfig, setViewConfig ] = useState<{
         config: T | undefined;
         storeFn: (data: T) => void;

apps/client/src/widgets/collections/calendar/index.tsx

@@ -1,29 +1,27 @@
-import "./index.css";
-
-import { Calendar as FullCalendar } from "@fullcalendar/core";
 import { DateSelectArg, EventChangeArg, EventMountArg, EventSourceFuncArg, LocaleInput, PluginDef } from "@fullcalendar/core/index.js";
-import { DateClickArg } from "@fullcalendar/interaction";
-import { DISPLAYABLE_LOCALE_IDS } from "@triliumnext/commons";
-import { RefObject } from "preact";
-import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
-
-import appContext from "../../../components/app_context";
-import FNote from "../../../entities/fnote";
-import date_notes from "../../../services/date_notes";
-import dialog from "../../../services/dialog";
-import froca from "../../../services/froca";
-import { t } from "../../../services/i18n";
-import { isMobile } from "../../../services/utils";
-import ActionButton from "../../react/ActionButton";
-import Button, { ButtonGroup } from "../../react/Button";
-import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
-import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSegmentedControl, TouchBarSpacer } from "../../react/TouchBar";
 import { ViewModeProps } from "../interface";
-import { changeEvent, newEvent } from "./api";
 import Calendar from "./calendar";
-import { openCalendarContextMenu } from "./context_menu";
-import { buildEvents, buildEventsForCalendar } from "./event_builder";
+import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import "./index.css";
+import { useNoteLabel, useNoteLabelBoolean, useResizeObserver, useSpacedUpdate, useTriliumEvent, useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
+import { DISPLAYABLE_LOCALE_IDS } from "@triliumnext/commons";
+import { Calendar as FullCalendar } from "@fullcalendar/core";
 import { parseStartEndDateFromEvent, parseStartEndTimeFromEvent } from "./utils";
+import dialog from "../../../services/dialog";
+import { t } from "../../../services/i18n";
+import { buildEvents, buildEventsForCalendar } from "./event_builder";
+import { changeEvent, newEvent } from "./api";
+import froca from "../../../services/froca";
+import date_notes from "../../../services/date_notes";
+import appContext from "../../../components/app_context";
+import { DateClickArg } from "@fullcalendar/interaction";
+import FNote from "../../../entities/fnote";
+import Button, { ButtonGroup } from "../../react/Button";
+import ActionButton from "../../react/ActionButton";
+import { RefObject } from "preact";
+import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSegmentedControl, TouchBarSpacer } from "../../react/TouchBar";
+import { openCalendarContextMenu } from "./context_menu";
+import { isMobile } from "../../../services/utils";
 
 interface CalendarViewData {
 
@@ -61,7 +59,7 @@ const CALENDAR_VIEWS = [
         previousText: t("calendar.month_previous"),
         nextText: t("calendar.month_next")
     }
-];
+]
 
 const SUPPORTED_CALENDAR_VIEW_TYPE = CALENDAR_VIEWS.map(v => v.type);
 
@@ -77,7 +75,6 @@ export const LOCALE_MAPPINGS: Record<DISPLAYABLE_LOCALE_IDS, (() => Promise<{ de
     ru: () => import("@fullcalendar/core/locales/ru"),
     ja: () => import("@fullcalendar/core/locales/ja"),
     pt: () => import("@fullcalendar/core/locales/pt"),
-    pl: () => import("@fullcalendar/core/locales/pl"),
     "pt_br": () => import("@fullcalendar/core/locales/pt-br"),
     uk: () => import("@fullcalendar/core/locales/uk"),
     en: null,
@@ -105,9 +102,9 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
     const eventBuilder = useMemo(() => {
         if (!isCalendarRoot) {
             return async () => await buildEvents(noteIds);
-        } 
-        return async (e: EventSourceFuncArg) => await buildEventsForCalendar(note, e);
-        
+        } else {
+            return async (e: EventSourceFuncArg) => await buildEventsForCalendar(note, e);
+        }
     }, [isCalendarRoot, noteIds]);
 
     const plugins = usePlugins(isEditable, isCalendarRoot);
@@ -181,7 +178,7 @@ function CalendarHeader({ calendarRef }: { calendarRef: RefObject<FullCalendar>
                 <ActionButton icon="bx bx-chevron-right" text={currentViewData?.nextText ?? ""} frame onClick={() => calendarRef.current?.next()} />
             </ButtonGroup>
         </div>
-    );
+    )
 }
 
 function usePlugins(isEditable: boolean, isCalendarRoot: boolean) {
@@ -296,7 +293,7 @@ function useEventDisplayCustomization(parentNote: FNote) {
         if (promotedAttributes) {
             let promotedAttributesHtml = "";
             for (const [name, value] of promotedAttributes) {
-                promotedAttributesHtml = `${promotedAttributesHtml  /*html*/}\
+                promotedAttributesHtml = promotedAttributesHtml + /*html*/`\
                 <div class="promoted-attribute">
                     <span class="promoted-attribute-name">${name}</span>: <span class="promoted-attribute-value">${value}</span>
                 </div>`;

apps/client/src/widgets/collections/geomap/index.css

@@ -40,7 +40,7 @@
   z-index: -1;
 }
 
-.geo-map-container .leaflet-div-icon .tn-icon {
+.geo-map-container .leaflet-div-icon .bx {
   position: absolute;
   top: 3px;
   inset-inline-start: 2px;

apps/client/src/widgets/collections/legacy/ListOrGridView.css

@@ -142,10 +142,4 @@
     border: 1px solid var(--main-border-color);
     background: var(--more-accented-background-color);
 }
-
-.note-list.grid-view .note-path {
-    margin-left: 0.5em;
-    vertical-align: middle;
-    opacity: 0.5;
-}
 /* #endregion */

apps/client/src/widgets/collections/legacy/ListOrGridView.tsx

@@ -7,6 +7,7 @@ import attribute_renderer from "../../../services/attribute_renderer";
 import content_renderer from "../../../services/content_renderer";
 import { t } from "../../../services/i18n";
 import link from "../../../services/link";
+import tree from "../../../services/tree";
 import { useImperativeSearchHighlighlighting, useNoteLabel, useNoteLabelBoolean } from "../../react/hooks";
 import Icon from "../../react/Icon";
 import NoteLink from "../../react/NoteLink";
@@ -102,7 +103,16 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
 }
 
 function GridNoteCard({ note, parentNote, highlightedTokens }: { note: FNote, parentNote: FNote, highlightedTokens: string[] | null | undefined }) {
+    const titleRef = useRef<HTMLSpanElement>(null);
+    const [ noteTitle, setNoteTitle ] = useState<string>();
     const notePath = getNotePath(parentNote, note);
+    const highlightSearch = useImperativeSearchHighlighlighting(highlightedTokens);
+
+    useEffect(() => {
+        tree.getNoteTitle(note.noteId, parentNote.noteId).then(setNoteTitle);
+    }, [ note ]);
+
+    useEffect(() => highlightSearch(titleRef.current), [ noteTitle, highlightedTokens ]);
 
     return (
         <div
@@ -113,7 +123,7 @@ function GridNoteCard({ note, parentNote, highlightedTokens }: { note: FNote, pa
         >
             <h5 className="note-book-header">
                 <Icon className="note-icon" icon={note.getIcon()} />
-                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={parentNote.type === "search"} highlightedTokens={highlightedTokens} />
+                <span ref={titleRef} className="note-book-title">{noteTitle}</span>
                 <NoteAttributes note={note} />
             </h5>
             <NoteContent

apps/client/src/widgets/collections/presentation/model.spec.ts

@@ -74,11 +74,11 @@ describe("Presentation model", () => {
     });
 
     it("rewrites links to other slides", () => {
-        expect(data.slides[1].content.__html).toStrictEqual(`<div class="ck-content"><p>Go to&nbsp;<a class="reference-link" href="#/slide-slide1"><span><span class="tn-icon bx bx-folder"></span>First slide</span></a>.</p></div>`);
-        expect(data.slides[1].verticalSlides![0].content.__html).toStrictEqual(`<div class="ck-content"><p>Go to&nbsp;<a class="reference-link" href="#/slide-slide2"><span><span class="tn-icon bx bx-note"></span>First-sub</span></a>.</p></div>`);
+        expect(data.slides[1].content.__html).toStrictEqual(`<div class="ck-content"><p>Go to&nbsp;<a class="reference-link" href="#/slide-slide1"><span><span class="bx bx-folder"></span>First slide</span></a>.</p></div>`);
+        expect(data.slides[1].verticalSlides![0].content.__html).toStrictEqual(`<div class="ck-content"><p>Go to&nbsp;<a class="reference-link" href="#/slide-slide2"><span><span class="bx bx-note"></span>First-sub</span></a>.</p></div>`);
     });
 
     it("rewrites links even if they are not part of the slideshow", () => {
-        expect(data.slides[0].verticalSlides![0].content.__html).toStrictEqual(`<div class="ck-content"><p>Go to&nbsp;<a class="reference-link" href="#/slide-other"><span><span class="tn-icon bx bx-note"></span>Other note</span></a>.</p></div>`);
+        expect(data.slides[0].verticalSlides![0].content.__html).toStrictEqual(`<div class="ck-content"><p>Go to&nbsp;<a class="reference-link" href="#/slide-other"><span><span class="bx bx-note"></span>Other note</span></a>.</p></div>`);
     });
 });

apps/client/src/widgets/collections/view_mode_storage.ts

@@ -4,16 +4,14 @@ import { ViewTypeOptions } from "../collections/interface";
 
 const ATTACHMENT_ROLE = "viewConfig";
 
-export type ViewModeStorageType = ViewTypeOptions | "pdfHistory";
-
 export default class ViewModeStorage<T extends object> {
 
     private note: FNote;
     private attachmentName: string;
 
-    constructor(note: FNote, viewType: ViewModeStorageType) {
+    constructor(note: FNote, viewType: ViewTypeOptions) {
         this.note = note;
-        this.attachmentName = `${viewType}.json`;
+        this.attachmentName = viewType + ".json";
     }
 
     async store(data: T) {

apps/client/src/widgets/containers/scrolling_container.css

@@ -2,13 +2,6 @@
     overflow: auto;
     scroll-behavior: smooth;
     position: relative;
-
-    > .inline-title,
-    > .note-detail > .note-detail-editable-text,
-    > .note-list-widget:not(.full-height) {
-        padding-inline: 24px;
-    }
-
 }
 
 .note-split.type-code:not(.mime-text-x-sqlite) {

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

@@ -1,11 +1,10 @@
+import FlexContainer from "./flex_container.js";
 import appContext, { type CommandData, type CommandListenerData, type EventData, type EventNames, type NoteSwitchedContext } from "../../components/app_context.js";
+import type BasicWidget from "../basic_widget.js";
 import Component from "../../components/component.js";
-import NoteContext from "../../components/note_context.js";
 import splitService from "../../services/resizer.js";
 import { isMobile } from "../../services/utils.js";
-import type BasicWidget from "../basic_widget.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
-import FlexContainer from "./flex_container.js";
+import NoteContext from "../../components/note_context.js";
 
 interface SplitNoteWidget extends BasicWidget {
     hasBeenAlreadyShown?: boolean;
@@ -75,7 +74,7 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
 
 
         const subContexts = activeContext.getSubContexts();
-        let noteContext: NoteContext | undefined;
+        let noteContext: NoteContext | undefined = undefined;
         if (isMobile() && subContexts.length > 1) {
             noteContext = subContexts.find(s => s.ntxId !== ntxId);
         }
@@ -202,11 +201,6 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
 
     async refresh() {
         this.toggleExt(true);
-
-        // Mark the active note context.
-        for (const child of this.children as NoteContextAwareWidget[]) {
-            child.$widget.toggleClass("active", !!child.noteContext?.isActive());
-        }
     }
 
     toggleInt(show: boolean) {} // not needed
@@ -245,16 +239,16 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
                 widget.hasBeenAlreadyShown = true;
 
                 return [widget.handleEvent("noteSwitched", noteSwitchedContext), this.refreshNotShown(noteSwitchedContext)];
+            } else {
+                return Promise.resolve();
             }
-            return Promise.resolve();
-
         }
 
         if (name === "activeContextChanged") {
             return this.refreshNotShown(data as EventData<"activeContextChanged">);
+        } else {
+            return super.handleEventInChildren(name, data);
         }
-        return super.handleEventInChildren(name, data);
-
     }
 
     refreshNotShown(data: NoteSwitchedContext | EventData<"activeContextChanged">) {

apps/client/src/widgets/dialogs/PopupEditor.tsx

@@ -88,7 +88,6 @@ export default function PopupEditor() {
                     onHidden={() => setShown(false)}
                     keepInDom // needed for faster loading
                     noFocus // automatic focus breaks block popup
-                    stackable
                 >
                     {!isNewLayout && <ReadOnlyNoteInfoBar />}
                     <PromotedAttributes />

apps/client/src/widgets/dialogs/revisions.css

@@ -14,7 +14,7 @@ body.mobile .revisions-dialog {
         flex-grow: 1;
         width: 100%;
     }
-
+    
     .modal-body {
         height: fit-content !important;
         flex-direction: column;
@@ -24,7 +24,7 @@ body.mobile .revisions-dialog {
     .modal-footer {
         font-size: 0.9em;
     }
-
+    
     .revision-list {
         height: fit-content !important;
         max-height: 20vh;
@@ -32,7 +32,7 @@ body.mobile .revisions-dialog {
         padding: 0 1em;
         flex-shrink: 0;
     }
-
+    
     .modal-body > .revision-content-wrapper {
         flex-grow: 1;
         max-width: unset !important;
@@ -40,68 +40,24 @@ body.mobile .revisions-dialog {
         margin: 0;
         display: block !important;
     }
-
+    
     .modal-body > .revision-content-wrapper > div:first-of-type {
         flex-direction: column;
     }
-
+    
     .revision-title {
         font-size: 1rem;
     }
-
+    
     .revision-title-buttons {
         text-align: center;
         display: flex;
         gap: 0.25em;
         flex-wrap: wrap;
     }
-
+    
     .revision-content {
         padding: 0.5em;
         height: fit-content;
     }
-}
-
-.revisions-dialog {
-    .revision-title-buttons {
-        flex-shrink: 0;
-    }
-
-    .revision-list {
-        flex-shrink: 0;
-    }
-
-    .revision-content.type-file {
-        display: flex;
-        min-width: 0;
-        min-height: 0;
-        flex-grow: 1;
-
-        .file-preview-table {
-            th,
-            td {
-                padding: 0.25em 0;
-            }
-        }
-
-        .revision-file-preview {
-            display: flex;
-            flex-direction: column;
-            min-width: 0;
-            min-height: 0;
-            flex-grow: 1;
-        }
-
-        .revision-file-preview-content {
-            flex-grow: 1;
-            min-height: 0;
-            display: flex;
-            flex-direction: column;
-
-            > * {
-                height: 100%;
-            }
-        }
-    }
-
-}
+}

apps/client/src/widgets/dialogs/revisions.tsx

@@ -1,31 +1,26 @@
-import "./revisions.css";
-
-import type { RevisionItem, RevisionPojo } from "@triliumnext/commons";
-import clsx from "clsx";
-import { diffWords } from "diff";
-import type { CSSProperties } from "preact/compat";
-import { Dispatch, StateUpdater, useEffect, useRef, useState } from "preact/hooks";
-
+import type { RevisionPojo, RevisionItem } from "@triliumnext/commons";
 import appContext from "../../components/app_context";
 import FNote from "../../entities/fnote";
 import dialog from "../../services/dialog";
 import froca from "../../services/froca";
 import { t } from "../../services/i18n";
-import { renderMathInElement } from "../../services/math";
-import open from "../../services/open";
-import options from "../../services/options";
-import protected_session_holder from "../../services/protected_session_holder";
 import server from "../../services/server";
 import toast from "../../services/toast";
-import utils from "../../services/utils";
-import ActionButton from "../react/ActionButton";
 import Button from "../react/Button";
-import FormList, { FormListItem } from "../react/FormList";
 import FormToggle from "../react/FormToggle";
-import { useTriliumEvent } from "../react/hooks";
 import Modal from "../react/Modal";
-import { RawHtmlBlock } from "../react/RawHtml";
-import PdfViewer from "../type_widgets/file/PdfViewer";
+import FormList, { FormListItem } from "../react/FormList";
+import utils from "../../services/utils";
+import { Dispatch, StateUpdater, useEffect, useRef, useState } from "preact/hooks";
+import protected_session_holder from "../../services/protected_session_holder";
+import { renderMathInElement } from "../../services/math";
+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 { diffWords } from "diff";
+import "./revisions.css";
 
 export default function RevisionsDialog() {
     const [ note, setNote ] = useState<FNote>();
@@ -52,7 +47,7 @@ export default function RevisionsDialog() {
             setRevisions(undefined);
             setNoteContent(undefined);
         }
-    }, [ note, refreshCounter ]);
+    }, [ note?.noteId, refreshCounter ]);
 
     if (revisions?.length && !currentRevision) {
         setCurrentRevision(revisions[0]);
@@ -107,38 +102,38 @@ export default function RevisionsDialog() {
                 setRevisions(undefined);
             }}
             show={shown}
-        >
-            <RevisionsList
-                revisions={revisions ?? []}
-                onSelect={(revisionId) => {
-                    const correspondingRevision = (revisions ?? []).find((r) => r.revisionId === revisionId);
-                    if (correspondingRevision) {
-                        setCurrentRevision(correspondingRevision);
-                    }
-                }}
-                currentRevision={currentRevision}
-            />
+            >
+                <RevisionsList
+                    revisions={revisions ?? []}
+                    onSelect={(revisionId) => {
+                        const correspondingRevision = (revisions ?? []).find((r) => r.revisionId === revisionId);
+                        if (correspondingRevision) {
+                            setCurrentRevision(correspondingRevision);
+                        }
+                    }}
+                    currentRevision={currentRevision}
+                />
 
-            <div className="revision-content-wrapper" style={{
-                flexGrow: "1",
-                marginInlineStart: "20px",
-                display: "flex",
-                flexDirection: "column",
-                maxWidth: "calc(100% - 150px)",
-                minWidth: 0
-            }}>
-                <RevisionPreview
-                    noteContent={noteContent}
-                    revisionItem={currentRevision}
-                    showDiff={showDiff}
-                    setShown={setShown}
-                    onRevisionDeleted={() => {
-                        setRefreshCounter(c => c + 1);
-                        setCurrentRevision(undefined);
-                    }} />
-            </div>
+                <div className="revision-content-wrapper" style={{
+                    flexGrow: "1",
+                    marginInlineStart: "20px",
+                    display: "flex",
+                    flexDirection: "column",
+                    maxWidth: "calc(100% - 150px)",
+                    minWidth: 0
+                }}>
+                    <RevisionPreview
+                        noteContent={noteContent}
+                        revisionItem={currentRevision}
+                        showDiff={showDiff}
+                        setShown={setShown}
+                        onRevisionDeleted={() => {
+                            setRefreshCounter(c => c + 1);
+                            setCurrentRevision(undefined);
+                        }} />
+                </div>
         </Modal>
-    );
+    )
 }
 
 function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: RevisionItem[], onSelect: (val: string) => void, currentRevision?: RevisionItem }) {
@@ -146,7 +141,6 @@ function RevisionsList({ revisions, onSelect, currentRevision }: { revisions: Re
         <FormList onSelect={onSelect} fullHeight wrapperClassName="revision-list">
             {revisions.map((item) =>
                 <FormListItem
-                    key={item.revisionId}
                     value={item.revisionId}
                     active={currentRevision && item.revisionId === currentRevision.revisionId}
                 >
@@ -208,17 +202,14 @@ function RevisionPreview({noteContent, revisionItem, showDiff, setShown, onRevis
                                 text={t("revisions.download_button")}
                                 onClick={() => {
                                     if (revisionItem.revisionId) {
-                                        open.downloadRevision(revisionItem.noteId, revisionItem.revisionId);}
-                                }
+                                        open.downloadRevision(revisionItem.noteId, revisionItem.revisionId)}
+                                    }
                                 }/>
                         </>
                     }
                 </div>)}
             </div>
-            <div
-                className={clsx("revision-content use-tn-links selectable-text", `type-${revisionItem?.type}`)}
-                style={{ overflow: "auto", wordBreak: "break-word" }}
-            >
+            <div className="revision-content use-tn-links selectable-text" style={{ overflow: "auto", wordBreak: "break-word" }}>
                 <RevisionContent noteContent={noteContent} revisionItem={revisionItem} fullRevision={fullRevision} showDiff={showDiff}/>
             </div>
         </>
@@ -239,16 +230,16 @@ const CODE_STYLE: CSSProperties = {
 
 function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }: { noteContent?:string, revisionItem?: RevisionItem, fullRevision?: RevisionPojo, showDiff: boolean}) {
     const content = fullRevision?.content;
-    if (!revisionItem || !fullRevision) {
+    if (!revisionItem || !content) {
         return <></>;
     }
 
     if (showDiff) {
-        return <RevisionContentDiff noteContent={noteContent} itemContent={content} itemType={revisionItem.type}/>;
+        return <RevisionContentDiff noteContent={noteContent} itemContent={content} itemType={revisionItem.type}/>
     }
     switch (revisionItem.type) {
         case "text":
-            return <RevisionContentText content={content} />;
+            return <RevisionContentText content={content} />
         case "code":
             return <pre style={CODE_STYLE}>{content}</pre>;
         case "image":
@@ -265,11 +256,28 @@ function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }:
                     // as a URL to be used in a note. Instead, if they copy and paste it into a note, it will be uploaded as a new note
                     return <img
                         src={`data:${fullRevision.mime};base64,${fullRevision.content}`}
-                        style={IMAGE_STYLE} />;
+                        style={IMAGE_STYLE} />
                 }
             }
         case "file":
-            return <FilePreview fullRevision={fullRevision} revisionItem={revisionItem} />;
+            return <table cellPadding="10">
+                <tr>
+                    <th>{t("revisions.mime")}</th>
+                    <td>{revisionItem.mime}</td>
+                </tr>
+                <tr>
+                    <th>{t("revisions.file_size")}</th>
+                    <td>{revisionItem.contentLength && utils.formatSize(revisionItem.contentLength)}</td>
+                </tr>
+                {fullRevision.content &&
+                    <tr>
+                        <td colspan={2}>
+                            <strong>{t("revisions.preview")}</strong>
+                            <pre className="file-preview-content" style={CODE_STYLE}>{fullRevision.content}</pre>
+                        </td>
+                    </tr>
+                }
+            </table>;
         case "canvas":
         case "mindMap":
         case "mermaid": {
@@ -279,7 +287,7 @@ function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }:
                 style={IMAGE_STYLE} />;
         }
         default:
-            return <>{t("revisions.preview_not_available")}</>;
+            return <>{t("revisions.preview_not_available")}</>
     }
 }
 
@@ -290,7 +298,7 @@ function RevisionContentText({ content }: { content: string | Buffer<ArrayBuffer
             renderMathInElement(contentRef.current, { trust: true });
         }
     }, [content]);
-    return <RawHtmlBlock containerRef={contentRef} className="ck-content" html={content as string} />;
+    return <div ref={contentRef} className="ck-content" dangerouslySetInnerHTML={{ __html: content as string }}></div>
 }
 
 function RevisionContentDiff({ noteContent, itemContent, itemType }: {
@@ -322,9 +330,9 @@ function RevisionContentDiff({ noteContent, itemContent, itemType }: {
                 return `<span class="revision-diff-added">${utils.escapeHtml(part.value)}</span>`;
             } else if (part.removed) {
                 return `<span class="revision-diff-removed">${utils.escapeHtml(part.value)}</span>`;
+            } else {
+                return utils.escapeHtml(part.value);
             }
-            return utils.escapeHtml(part.value);
-
         }).join("");
 
         if (contentRef.current) {
@@ -332,7 +340,7 @@ function RevisionContentDiff({ noteContent, itemContent, itemType }: {
         }
     }, [noteContent, itemContent, itemType]);
 
-    return <div ref={contentRef} className="ck-content" style={{ whiteSpace: "pre-wrap" }} />;
+    return <div ref={contentRef} className="ck-content" style={{ whiteSpace: "pre-wrap" }}></div>;
 }
 
 function RevisionFooter({ note }: { note?: FNote }) {
@@ -340,7 +348,7 @@ function RevisionFooter({ note }: { note?: FNote }) {
         return <></>;
     }
 
-    let revisionsNumberLimit: number | string = parseInt(note?.getLabelValue("versioningLimit") ?? "", 10);
+    let revisionsNumberLimit: number | string = parseInt(note?.getLabelValue("versioningLimit") ?? "");
     if (!Number.isInteger(revisionsNumberLimit)) {
         revisionsNumberLimit = options.getInt("revisionSnapshotNumberLimit") ?? 0;
     }
@@ -362,67 +370,10 @@ function RevisionFooter({ note }: { note?: FNote }) {
     </>;
 }
 
-function FilePreview({ revisionItem, fullRevision }: { revisionItem: RevisionItem, fullRevision: RevisionPojo }) {
-    return (
-        <div className="revision-file-preview">
-            <table className="file-preview-table">
-                <tbody>
-                    <tr>
-                        <th>{t("revisions.mime")}</th>
-                        <td>{revisionItem.mime}</td>
-                    </tr>
-                    <tr>
-                        <th>{t("revisions.file_size")}</th>
-                        <td>{revisionItem.contentLength && utils.formatSize(revisionItem.contentLength)}</td>
-                    </tr>
-                </tbody>
-            </table>
-
-            <div class="revision-file-preview-content">
-                <FilePreviewInner revisionItem={revisionItem} fullRevision={fullRevision} />
-            </div>
-        </div>
-    );
-}
-
-function FilePreviewInner({ revisionItem, fullRevision }: { revisionItem: RevisionItem, fullRevision: RevisionPojo }) {
-    if (revisionItem.mime.startsWith("audio/")) {
-        return (
-            <audio
-                src={`api/revisions/${revisionItem.revisionId}/download`}
-                controls
-            />
-        );
-    }
-
-    if (revisionItem.mime.startsWith("video/")) {
-        return (
-            <video
-                src={`api/revisions/${revisionItem.revisionId}/download`}
-                controls
-            />
-        );
-    }
-
-    if (revisionItem.mime === "application/pdf") {
-        return (
-            <PdfViewer
-                pdfUrl={`../../api/revisions/${revisionItem.revisionId}/download`}
-            />
-        );
-    }
-
-    if (fullRevision.content) {
-        return <pre className="file-preview-content" style={CODE_STYLE}>{fullRevision.content}</pre>;
-    }
-
-    return t("revisions.preview_not_available");
-}
-
 async function getNote(noteId?: string | null) {
     if (noteId) {
         return await froca.getNote(noteId);
+    } else {
+        return appContext.tabManager.getActiveContextNote();
     }
-    return appContext.tabManager.getActiveContextNote();
-
 }

apps/client/src/widgets/layout/Breadcrumb.css

@@ -35,7 +35,7 @@
         align-items: center;
         min-width: 0;
 
-        .tn-icon {
+        .bx {
             margin-inline: 6px;
         }
 
@@ -55,7 +55,7 @@
     .icon-action {
         font-size: .9rem !important;
 
-        &.breadcrumb-separator {
+        .bxs-chevron-right {
             transform: translateY(8%);
 
             &::before {

apps/client/src/widgets/layout/Breadcrumb.tsx

@@ -191,7 +191,7 @@ function BreadcrumbSeparator(props: BreadcrumbSeparatorProps) {
         <Dropdown
             text={<Icon icon="bx bxs-chevron-right" />}
             noSelectButtonStyle
-            buttonClassName="icon-action breadcrumb-separator"
+            buttonClassName="icon-action"
             hideToggleArrow
             dropdownContainerClassName="tn-dropdown-menu-scrollable breadcrumb-child-list"
             dropdownOptions={{  popperConfig: { strategy: "fixed", placement: "top" } }}

apps/client/src/widgets/layout/InlineTitle.css

@@ -10,6 +10,7 @@
     max-width: var(--max-content-width);
     container-type: inline-size;
     padding-top: 20px;
+    padding-inline-start: 24px;
 
     & > .inline-title-row {
         --icon-size: 35px;

apps/client/src/widgets/layout/NoteBadges.css

@@ -2,11 +2,6 @@
     contain: none;
 }
 
-@keyframes fadeOut {
-    from { opacity: var(--default-opacity); }
-    to { opacity: 0; }
-}
-
 .note-badges {
     display: flex;
     gap: 5px;
@@ -21,23 +16,6 @@
         &.share-badge {--color: var(--badge-share-background-color);}
         &.clipped-note-badge {--color: var(--badge-clipped-note-background-color);}
         &.execute-badge {--color: var(--badge-execute-background-color);}
-        &.save-status-badge {
-            --default-opacity: 0.4;
-            opacity: var(--default-opacity);
-            transition: opacity 250ms ease-in;
-            color: var(--main-text-color);
-
-            &.error {
-                color: var(--dropdown-item-icon-destructive-color);
-                opacity: 1;
-            }
-
-            &.saved {
-                animation: fadeOut 250ms ease-in 5s forwards;
-                pointer-events: none;
-            }
-        }
-
         min-width: 0;
 
         .text {

apps/client/src/widgets/layout/NoteBadges.tsx

@@ -1,20 +1,17 @@
 import "./NoteBadges.css";
 
-import { clsx } from "clsx";
-
 import { copyTextWithToast } from "../../services/clipboard_ext";
 import { t } from "../../services/i18n";
 import { goToLinkExt } from "../../services/link";
 import { Badge, BadgeWithDropdown } from "../react/Badge";
 import { FormDropdownDivider, FormListItem } from "../react/FormList";
-import { useGetContextData, useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
+import { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
 import { useShareState } from "../ribbon/BasicPropertiesTab";
 import { useShareInfo } from "../shared_info";
 
 export default function NoteBadges() {
     return (
         <div className="note-badges">
-            <SaveStatusBadge />
             <ReadOnlyBadge />
             <ShareBadge />
             <ClippedNoteBadge />
@@ -108,42 +105,3 @@ function ExecuteBadge() {
         />
     );
 }
-
-export function SaveStatusBadge() {
-    const saveState = useGetContextData("saveState");
-    if (!saveState) return;
-
-    const stateConfig = {
-        saved: {
-            icon: "bx bx-check",
-            title: t("breadcrumb_badges.save_status_saved"),
-            tooltip: undefined
-        },
-        saving: {
-            icon: "bx bx-loader bx-spin",
-            title: t("breadcrumb_badges.save_status_saving"),
-            tooltip: t("breadcrumb_badges.save_status_saving_tooltip")
-        },
-        unsaved: {
-            icon: "bx bx-pencil",
-            title: t("breadcrumb_badges.save_status_unsaved"),
-            tooltip: t("breadcrumb_badges.save_status_unsaved_tooltip")
-        },
-        error: {
-            icon: "bx bxs-error",
-            title: t("breadcrumb_badges.save_status_error"),
-            tooltip: t("breadcrumb_badges.save_status_error_tooltip")
-        }
-    };
-
-    const { icon, title, tooltip } = stateConfig[saveState.state];
-
-    return (
-        <Badge
-            className={clsx("save-status-badge", saveState.state)}
-            icon={icon}
-            text={title}
-            tooltip={tooltip}
-        />
-    );
-}

apps/client/src/widgets/layout/NoteTitleActions.css

@@ -4,21 +4,12 @@ body.experimental-feature-new-layout {
     }
 
     .title-actions {
-        --title-actions-padding-start: 12px;
-        --title-actions-padding-end: 8px;
-
         display: flex;
-        max-width: var(--max-content-width);
         flex-direction: column;
         gap: 0.5em;
-        padding-inline: var(--title-actions-padding-start) var(--title-actions-padding-end);
-
-        body.prefers-centered-content .note-split:not(.full-content-width) & {
-            margin-inline: auto;
-        }
 
         &:not(:empty) {
-            padding-block: 0.75em;
+            padding: 0.75em 15px;
         }
 
         .edited-notes {
@@ -49,11 +40,5 @@ body.experimental-feature-new-layout {
                 padding: 0;
             }
         }
-
-        > .collapsible,
-        > .note-type-switcher {
-            padding-inline-start: calc(24px - var(--title-actions-padding-start));
-            padding-inline-end: calc(24px - var(--title-actions-padding-end));
-        }
     }
 }

apps/client/src/widgets/layout/StatusBar.css

@@ -9,7 +9,7 @@
         background-color: var(--left-pane-background-color);
         padding-inline: 0.25em;
         font-size: 0.85em;
-
+        
         > .breadcrumb {
             flex-grow: 1;
             --icon-button-size: 23px;
@@ -104,7 +104,7 @@
                 /* Note path card */
                 li {
                     --border-radius: 6px;
-
+                    
                     position: relative;
                     background: var(--card-background-color);
                     padding: 8px 20px 8px 25px;
@@ -120,7 +120,7 @@
                     & + li {
                         margin-top: 2px;
                     }
-
+                    
                     /* Current path arrow */
                     &.path-current::before {
                         position: absolute;
@@ -180,7 +180,7 @@
                 &:last-child {
                     border-radius: 0 0 var(--border-radius) var(--border-radius);
                 }
-
+                
                 /* Card header */
                 & > span:first-child {
                     display: block;
@@ -202,7 +202,7 @@
                         }
 
                         /* Note icon */
-                        > .tn-icon {
+                        > .bx {
                             color: var(--menu-item-icon-color);
                         }
 

apps/client/src/widgets/layout/StatusBar.tsx

@@ -5,7 +5,7 @@ import { Dropdown as BootstrapDropdown } from "bootstrap";
 import clsx from "clsx";
 import { type ComponentChildren, RefObject } from "preact";
 import { createPortal } from "preact/compat";
-import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import { CommandNames } from "../../components/app_context";
 import NoteContext from "../../components/note_context";
@@ -338,19 +338,15 @@ interface AttributesProps extends StatusBarContext {
 function AttributesButton({ note, attributesShown, setAttributesShown }: AttributesProps) {
     const [ count, setCount ] = useState(note.attributes.length);
 
-    const refreshCount = useCallback((note: FNote) => {
-        return note.getAttributes().filter(a => !a.isAutoLink).length;
-    }, []);
-
     // React to note changes.
     useEffect(() => {
-        setCount(refreshCount(note));
-    }, [ note, refreshCount ]);
+        setCount(note.getAttributes().filter(a => !a.isAutoLink).length);
+    }, [ note ]);
 
     // React to changes in count.
     useTriliumEvent("entitiesReloaded", (({loadResults}) => {
         if (loadResults.getAttributeRows().some(attr => attributes.isAffecting(attr, note))) {
-            setCount(refreshCount(note));
+            setCount(note.attributes.length);
         }
     }));
 

apps/client/src/widgets/note_icon.css

@@ -32,14 +32,17 @@ div.note-icon-widget {
 }
 
 .note-icon-widget .filter-row {
-    padding: 10px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-inline-end: 20px;
     display: flex;
-    align-items: center;
-    gap: 1em;
+    align-items: baseline;
 }
 
 .note-icon-widget .filter-row span {
     display: block;
+    padding-inline-start: 15px;
+    padding-inline-end: 15px;
     font-weight: bold;
 }
 
@@ -72,14 +75,6 @@ div.note-icon-widget {
     height: 1em;
 }
 
-.note-icon-widget {
-    .no-results {
-        padding: 20px;
-        text-align: center;
-        color: var(--muted-text-color);
-    }
-}
-
 body.experimental-feature-new-layout {
     .note-icon-widget button.note-icon {
         --input-focus-outline-color: var(--note-icon-hover-background-color);
@@ -116,4 +111,4 @@ body.experimental-feature-new-layout {
             transition: background 200ms ease-out;
         }
     }
-}
+}

apps/client/src/widgets/note_icon.tsx

@@ -1,36 +1,37 @@
+import Dropdown from "./react/Dropdown";
 import "./note_icon.css";
-
-import { IconRegistry } from "@triliumnext/commons";
-import { Dropdown as BootstrapDropdown } from "bootstrap";
-import clsx from "clsx";
 import { t } from "i18next";
-import { CSSProperties, RefObject } from "preact";
-import { useEffect, useMemo, useRef, useState } from "preact/hooks";
-import { CellComponentProps, Grid } from "react-window";
-
+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 server from "../services/server";
-import ActionButton from "./react/ActionButton";
-import Dropdown from "./react/Dropdown";
-import { FormDropdownDivider, FormListItem } from "./react/FormList";
-import FormTextBox from "./react/FormTextBox";
-import { useNoteContext, useNoteLabel, useStaticTooltip } from "./react/hooks";
+import Button from "./react/Button";
 
 interface IconToCountCache {
     iconClassToCountMap: Record<string, number>;
 }
 
-let iconToCountCache!: Promise<IconToCountCache> | null;
+interface IconData {
+    iconToCount: Record<string, number>;
+    categories: Category[];
+    icons: Icon[];
+}
 
-type IconWithName = (IconRegistry["sources"][number]["icons"][number] & { iconPack: string });
+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");
-    const dropdownRef = useRef<BootstrapDropdown>(null);
 
     useEffect(() => {
         setIcon(note?.getIcon());
@@ -40,217 +41,128 @@ export default function NoteIcon() {
         <Dropdown
             className="note-icon-widget"
             title={t("note_icon.change_note_icon")}
-            dropdownRef={dropdownRef}
-            dropdownContainerStyle={{ width: "620px" }}
-            dropdownOptions={{ autoClose: "outside" }}
+            dropdownContainerStyle={{ width: "610px" }}
             buttonClassName={`note-icon tn-focusable-button ${icon ?? "bx bx-empty"}`}
             hideToggleArrow
             disabled={viewScope?.viewMode !== "default"}
         >
-            { note && <NoteIconList note={note} dropdownRef={dropdownRef} /> }
+            { note && <NoteIconList note={note} /> }
         </Dropdown>
-    );
+    )
 }
 
-function NoteIconList({ note, dropdownRef }: {
-    note: FNote,
-    dropdownRef: RefObject<BootstrapDropdown>;
-}) {
+function NoteIconList({ note }: { note: FNote }) {
     const searchBoxRef = useRef<HTMLInputElement>(null);
-    const iconListRef = useRef<HTMLDivElement>(null);
     const [ search, setSearch ] = useState<string>();
-    const [ filterByPrefix, setFilterByPrefix ] = useState<string | null>(null);
-    useStaticTooltip(iconListRef, {
-        selector: "span",
-        customClass: "pre-wrap-text",
-        animation: false,
-        title() { return this.getAttribute("title") || ""; },
-    });
-
-    const allIcons = useAllIcons();
-    const filteredIcons = useFilteredIcons(allIcons, search, filterByPrefix);
-
-    return (
-        <>
-            <div class="filter-row">
-                <span>{t("note_icon.search")}</span>
-                <FormTextBox
-                    inputRef={searchBoxRef}
-                    type="text"
-                    name="icon-search"
-                    placeholder={ filterByPrefix
-                        ? t("note_icon.search_placeholder_filtered", {
-                            number: filteredIcons.length ?? 0,
-                            name: glob.iconRegistry.sources.find(s => s.prefix === filterByPrefix)?.name ?? ""
-                        })
-                        : t("note_icon.search_placeholder", { number: filteredIcons.length ?? 0, count: glob.iconRegistry.sources.length })}
-                    currentValue={search} onChange={setSearch}
-                    autoFocus
-                />
-
-                {getIconLabels(note).length > 0 && (
-                    <div style={{ textAlign: "center" }}>
-                        <ActionButton
-                            icon="bx bx-reset"
-                            text={t("note_icon.reset-default")}
-                            onClick={() => {
-                                if (!note) return;
-                                for (const label of getIconLabels(note)) {
-                                    attributes.removeAttributeById(note.noteId, label.attributeId);
-                                }
-                                dropdownRef?.current?.hide();
-                            }}
-                        />
-                    </div>
-                )}
-
-                {glob.iconRegistry.sources.length > 0 && <Dropdown
-                    buttonClassName="bx bx-filter-alt"
-                    hideToggleArrow
-                    noSelectButtonStyle
-                    noDropdownListStyle
-                    iconAction
-                    title={t("note_icon.filter")}
-                >
-                    <IconFilterContent filterByPrefix={filterByPrefix} setFilterByPrefix={setFilterByPrefix} />
-                </Dropdown>}
-            </div>
-
-            <div
-                class="icon-list"
-                ref={iconListRef}
-                onClick={(e) => {
-                    // Make sure we are not clicking on something else than a button.
-                    const clickedTarget = e.target as HTMLElement;
-                    if (!clickedTarget.classList.contains("tn-icon")) return;
-
-                    const iconClass = Array.from(clickedTarget.classList.values()).filter(c => c !== "tn-icon").join(" ");
-                    if (note) {
-                        const attributeToSet = note.hasOwnedLabel("workspace") ? "workspaceIconClass" : "iconClass";
-                        attributes.setLabel(note.noteId, attributeToSet, iconClass);
-                    }
-                    dropdownRef?.current?.hide();
-                }}
-            >
-                {filteredIcons.length ? (
-                    <Grid
-                        columnCount={12}
-                        columnWidth={48}
-                        rowCount={Math.ceil(filteredIcons.length / 12)}
-                        rowHeight={48}
-                        cellComponent={IconItemCell}
-                        cellProps={{
-                            filteredIcons
-                        }}
-                    />
-                ) : (
-                    <div class="no-results">{t("note_icon.no_results")}</div>
-                )}
-            </div>
-        </>
-    );
-}
-
-function IconItemCell({ rowIndex, columnIndex, style, filteredIcons }: CellComponentProps<{
-    filteredIcons: IconWithName[];
-}>): React.JSX.Element {
-    const iconIndex = rowIndex * 12 + columnIndex;
-    const iconData = filteredIcons[iconIndex] as IconWithName | undefined;
-    if (!iconData) return <></>;
-
-    const { id, terms, iconPack } = iconData;
-    return (
-        <span
-            key={id}
-            class={clsx(id, "tn-icon")}
-            title={t("note_icon.icon_tooltip", { name: terms?.[0] ?? id, iconPack })}
-            style={style as CSSProperties}
-        />
-    );
-}
-
-function IconFilterContent({ filterByPrefix, setFilterByPrefix }: {
-    filterByPrefix: string | null;
-    setFilterByPrefix: (value: string | null) => void;
-}) {
-    return (
-        <>
-            <FormListItem
-                checked={filterByPrefix === null}
-                onClick={() => setFilterByPrefix(null)}
-            >{t("note_icon.filter-none")}</FormListItem>
-            <FormListItem
-                checked={filterByPrefix === "bx"}
-                onClick={() => setFilterByPrefix("bx")}
-            >{t("note_icon.filter-default")}</FormListItem>
-            <FormDropdownDivider />
-
-            {glob.iconRegistry.sources.map(({ prefix, name, icon }) => (
-                prefix !== "bx" && <FormListItem
-                    key={prefix}
-                    onClick={() => setFilterByPrefix(prefix)}
-                    icon={icon}
-                    checked={filterByPrefix === prefix}
-                >{name}</FormListItem>
-            ))}
-        </>
-    );
-}
-
-function useAllIcons() {
-    const [ allIcons, setAllIcons ] = useState<IconWithName[]>();
+    const [ categoryId, setCategoryId ] = useState<string>("0");
+    const [ iconData, setIconData ] = useState<IconData>();
 
     useEffect(() => {
-        getIconToCountMap().then((iconsToCount) => {
-            const allIcons = [
-                ...glob.iconRegistry.sources.flatMap(s => s.icons.map((i) => ({
-                    ...i,
-                    iconPack: s.name,
-                })))
-            ];
+        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.
-            if (iconsToCount) {
-                allIcons.sort((a, b) => {
-                    const countA = iconsToCount[a.id ?? ""] || 0;
-                    const countB = iconsToCount[b.id ?? ""] || 0;
+            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;
                 });
             }
 
-            setAllIcons(allIcons);
-        });
-    }, []);
-
-    return allIcons;
-}
-
-function useFilteredIcons(allIcons: IconWithName[] | undefined, search: string | undefined, filterByPrefix: string | null) {
-    // Filter by text and/or icon pack.
-    const filteredIcons = useMemo(() => {
-        let icons: IconWithName[] = allIcons ?? [];
-        const processedSearch = search?.trim()?.toLowerCase();
-        if (processedSearch || filterByPrefix !== null) {
-            icons = icons.filter((icon) => {
-                if (filterByPrefix) {
-                    if (!icon.id?.startsWith(`${filterByPrefix} `)) {
-                        return false;
-                    }
-                }
-
-                if (processedSearch) {
-                    if (!icon.terms?.some((t) => t.includes(processedSearch))) {
-                        return false;
-                    }
-                }
-
-                return true;
-            });
+            setIconData({
+                iconToCount,
+                icons,
+                categories: fullIconData.categories
+            })
         }
-        return icons;
-    }, [ allIcons, search, filterByPrefix ]);
-    return filteredIcons;
+
+        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() {
@@ -268,5 +180,5 @@ function getIconLabels(note: FNote) {
     }
     return note.getOwnedLabels()
         .filter((label) => ["workspaceIconClass", "iconClass"]
-            .includes(label.name));
+        .includes(label.name));
 }

apps/client/src/widgets/note_title.css

@@ -92,7 +92,7 @@ body.experimental-feature-new-layout {
                 height: var(--size);
                 padding: 0;
 
-                .tn-icon {
+                .bx {
                     opacity: 1;
                     margin: 0;
                 }

apps/client/src/widgets/note_tree.ts

@@ -1,39 +1,38 @@
+import hoistedNoteService from "../services/hoisted_note.js";
+import treeService from "../services/tree.js";
+import utils from "../services/utils.js";
+import contextMenu from "../menus/context_menu.js";
+import froca from "../services/froca.js";
+import branchService from "../services/branches.js";
+import ws from "../services/ws.js";
+import NoteContextAwareWidget from "./note_context_aware_widget.js";
+import server from "../services/server.js";
+import noteCreateService from "../services/note_create.js";
+import toastService from "../services/toast.js";
+import appContext, { type CommandListenerData, type EventData } from "../components/app_context.js";
+import keyboardActionsService from "../services/keyboard_actions.js";
+import clipboard from "../services/clipboard.js";
+import protectedSessionService from "../services/protected_session.js";
+import linkService from "../services/link.js";
+import options from "../services/options.js";
+import protectedSessionHolder from "../services/protected_session_holder.js";
+import dialogService from "../services/dialog.js";
+import shortcutService from "../services/shortcuts.js";
+import { t } from "../services/i18n.js";
+import type FBranch from "../entities/fbranch.js";
+import type LoadResults from "../services/load_results.js";
+import type FNote from "../entities/fnote.js";
+import type { NoteType } from "../entities/fnote.js";
+import type { AttributeRow, BranchRow } from "../services/load_results.js";
+import type { SetNoteOpts } from "../components/note_context.js";
+import type { TouchBarItem } from "../components/touch_bar.js";
+import type { TreeCommandNames } from "../menus/tree_context_menu.js";
 import "jquery.fancytree";
 import "jquery.fancytree/dist/modules/jquery.fancytree.dnd5.js";
 import "jquery.fancytree/dist/modules/jquery.fancytree.clones.js";
 import "jquery.fancytree/dist/modules/jquery.fancytree.filter.js";
 import "../stylesheets/tree.css";
 
-import appContext, { type CommandListenerData, type EventData } from "../components/app_context.js";
-import type { SetNoteOpts } from "../components/note_context.js";
-import type { TouchBarItem } from "../components/touch_bar.js";
-import type FBranch from "../entities/fbranch.js";
-import type FNote from "../entities/fnote.js";
-import type { NoteType } from "../entities/fnote.js";
-import contextMenu from "../menus/context_menu.js";
-import type { TreeCommandNames } from "../menus/tree_context_menu.js";
-import branchService from "../services/branches.js";
-import clipboard from "../services/clipboard.js";
-import dialogService from "../services/dialog.js";
-import froca from "../services/froca.js";
-import hoistedNoteService from "../services/hoisted_note.js";
-import { t } from "../services/i18n.js";
-import keyboardActionsService from "../services/keyboard_actions.js";
-import linkService from "../services/link.js";
-import type LoadResults from "../services/load_results.js";
-import type { AttributeRow, BranchRow } from "../services/load_results.js";
-import noteCreateService from "../services/note_create.js";
-import options from "../services/options.js";
-import protectedSessionService from "../services/protected_session.js";
-import protectedSessionHolder from "../services/protected_session_holder.js";
-import server from "../services/server.js";
-import shortcutService from "../services/shortcuts.js";
-import toastService from "../services/toast.js";
-import treeService from "../services/tree.js";
-import utils from "../services/utils.js";
-import ws from "../services/ws.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-
 const TPL = /*html*/`
 <div class="tree-wrapper">
     <style>
@@ -243,7 +242,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     e.preventDefault();
 
                     appContext.tabManager.openTabWithNoteWithHoisting(notePath, {
-                        activate: !!e.shiftKey
+                        activate: e.shiftKey ? true : false
                     });
                 }
             }
@@ -403,7 +402,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     } else if (ctrlKey) {
                         const notePath = treeService.getNotePath(node);
                         appContext.tabManager.openTabWithNoteWithHoisting(notePath, {
-                            activate: !!event.shiftKey
+                            activate: event.shiftKey ? true : false
                         });
                     } else if (event.altKey) {
                         node.setSelected(!node.isSelected());
@@ -500,9 +499,9 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                         return ["before", "after"];
                     } else if (["_lbAvailableLaunchers", "_lbVisibleLaunchers"].includes(node.data.noteId)) {
                         return ["over"];
+                    } else {
+                        return true;
                     }
-                    return true;
-
                 },
                 dragDrop: async (node, data) => {
                     if (
@@ -598,7 +597,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             clones: {
                 highlightActiveClones: true
             },
-            async enhanceTitle (
+            enhanceTitle: async function (
                 event: Event,
                 data: {
                     node: Fancytree.FancytreeNode;
@@ -624,12 +623,11 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 const $span = $(node.span);
 
                 $span.find(".tree-item-button").remove();
-                $span.find(".note-indicator-icon").remove();
 
                 const isHoistedNote = activeNoteContext && activeNoteContext.hoistedNoteId === note.noteId && note.noteId !== "root";
 
                 if (note.hasLabel("workspace") && !isHoistedNote) {
-                    const $enterWorkspaceButton = $(`<span class="tree-item-button tn-icon enter-workspace-button bx bx-door-open" title="${t("note_tree.hoist-this-note-workspace")}"></span>`).on(
+                    const $enterWorkspaceButton = $(`<span class="tree-item-button enter-workspace-button bx bx-door-open" title="${t("note_tree.hoist-this-note-workspace")}"></span>`).on(
                         "click",
                         cancelClickPropagation
                     );
@@ -638,7 +636,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 }
 
                 if (note.type === "search") {
-                    const $refreshSearchButton = $(`<span class="tree-item-button tn-icon refresh-search-button bx bx-refresh" title="${t("note_tree.refresh-saved-search-results")}"></span>`).on(
+                    const $refreshSearchButton = $(`<span class="tree-item-button refresh-search-button bx bx-refresh" title="${t("note_tree.refresh-saved-search-results")}"></span>`).on(
                         "click",
                         cancelClickPropagation
                     );
@@ -652,7 +650,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     && !note.isLaunchBarConfig()
                     && !note.noteId.startsWith("_help")
                 ) {
-                    const $createChildNoteButton = $(`<span class="tree-item-button tn-icon add-note-button bx bx-plus" title="${t("note_tree.create-child-note")}"></span>`).on(
+                    const $createChildNoteButton = $(`<span class="tree-item-button add-note-button bx bx-plus" title="${t("note_tree.create-child-note")}"></span>`).on(
                         "click",
                         cancelClickPropagation
                     );
@@ -661,38 +659,10 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 }
 
                 if (isHoistedNote) {
-                    const $unhoistButton = $(`<span class="tree-item-button tn-icon unhoist-button bx bx-door-open" title="${t("note_tree.unhoist")}"></span>`).on("click", cancelClickPropagation);
+                    const $unhoistButton = $(`<span class="tree-item-button unhoist-button bx bx-door-open" title="${t("note_tree.unhoist")}"></span>`).on("click", cancelClickPropagation);
 
                     $span.append($unhoistButton);
                 }
-
-                // Add clone indicator with tooltip if note has multiple parents
-                const parentNotes = note.getParentNotes();
-                const realParents = parentNotes.filter(
-                    (parent) => !["_share", "_lbBookmarks"].includes(parent.noteId) && parent.type !== "search"
-                );
-
-                if (realParents.length > 1) {
-                    const parentTitles = realParents.map((p) => p.title).join(", ");
-                    const tooltipText = realParents.length === 2
-                        ? t("note_tree.clone-indicator-tooltip-single", { parent: realParents[1].title })
-                        : t("note_tree.clone-indicator-tooltip", { count: realParents.length, parents: parentTitles });
-
-                    const $cloneIndicator = $(`<span class="note-indicator-icon clone-indicator"></span>`);
-                    $cloneIndicator.attr("title", tooltipText);
-                    $span.find(".fancytree-title").append($cloneIndicator);
-                }
-
-                // Add shared indicator with tooltip if note is shared
-                if (note.isShared()) {
-                    const shareId = note.getOwnedLabelValue("shareAlias") || note.noteId;
-                    const shareUrl = `${location.origin}${location.pathname}share/${shareId}`;
-                    const tooltipText = t("note_tree.shared-indicator-tooltip-with-url", { url: shareUrl });
-
-                    const $sharedIndicator = $(`<span class="note-indicator-icon shared-indicator"></span>`);
-                    $sharedIndicator.attr("title", tooltipText);
-                    $span.find(".fancytree-title").append($sharedIndicator);
-                }
             },
             // this is done to automatically lazy load all expanded notes after tree load
             loadChildren: (event, data) => {
@@ -1311,7 +1281,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
 
         // activeNode is supposed to be moved when we find out activeNode is deleted but not all branches are deleted. save it for fixing activeNodePath after all nodes loaded.
         let movedActiveNode: Fancytree.FancytreeNode | null = null;
-        const parentsOfAddedNodes: Fancytree.FancytreeNode[] = [];
+        let parentsOfAddedNodes: Fancytree.FancytreeNode[] = [];
 
         for (const branchRow of branchRows) {
             if (branchRow.noteId) {
@@ -1482,10 +1452,10 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             if (branchId && branchId.startsWith("virt")) {
                 // in case of virtual branches there's nothing to update
                 return;
+            } else {
+                logError(`Cannot find branch=${branchId}`);
+                return;
             }
-            logError(`Cannot find branch=${branchId}`);
-            return;
-
         }
 
         branch.isExpanded = isExpanded;
@@ -1624,7 +1594,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         // Trigger the event with the selected branch IDs
         appContext.triggerEvent("editBranchPrefix", {
             selectedOrActiveBranchIds: branchIds,
-            node
+            node: node
         });
     }
 
@@ -1809,12 +1779,12 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
     #moveLaunchers(selectedOrActiveBranchIds: string[], desktopParent: string, mobileParent: string) {
         const desktopLaunchersToMove = selectedOrActiveBranchIds.filter((branchId) => !branchId.startsWith("_lbMobile"));
         if (desktopLaunchersToMove) {
-            branchService.moveToParentNote(desktopLaunchersToMove, `_lbRoot_${  desktopParent}`);
+            branchService.moveToParentNote(desktopLaunchersToMove, "_lbRoot_" + desktopParent);
         }
 
         const mobileLaunchersToMove = selectedOrActiveBranchIds.filter((branchId) => branchId.startsWith("_lbMobile"));
         if (mobileLaunchersToMove) {
-            branchService.moveToParentNote(mobileLaunchersToMove, `_lbMobileRoot_${  mobileParent}`);
+            branchService.moveToParentNote(mobileLaunchersToMove, "_lbMobileRoot_" + mobileParent);
         }
     }
 
@@ -1859,7 +1829,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 selectedOrActiveBranchIds: this.getSelectedOrActiveBranchIds(node),
                 selectedOrActiveNoteIds: this.getSelectedOrActiveNoteIds(node)
             });
-        };
+        }
 
         const items: TouchBarItem[] = [
             new TouchBar.TouchBarButton({

apps/client/src/widgets/note_types.tsx

@@ -4,8 +4,7 @@
  */
 
 import { NoteType } from "@triliumnext/commons";
-import { type JSX, VNode } from "preact";
-
+import { VNode, type JSX } from "preact";
 import { TypeWidgetProps } from "./type_widgets/type_widget";
 
 /**
@@ -14,7 +13,7 @@ import { TypeWidgetProps } from "./type_widgets/type_widget";
  */
 export type ExtendedNoteType = Exclude<NoteType, "launcher" | "text" | "code"> | "empty" | "readOnlyCode" | "readOnlyText" | "editableText" | "editableCode" | "attachmentDetail" | "attachmentList" |  "protectedSession" | "aiChat";
 
-export type TypeWidget = ((props: TypeWidgetProps) => VNode | JSX.Element | undefined);
+export type TypeWidget = ((props: TypeWidgetProps) => VNode | JSX.Element);
 type NoteTypeView = () => (Promise<{ default: TypeWidget } | TypeWidget> | TypeWidget);
 
 interface NoteTypeMapping {

apps/client/src/widgets/note_wrapper.ts

@@ -64,8 +64,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
         this.$widget.addClass(utils.getMimeTypeClass(note.mime));
         this.$widget.addClass(`view-mode-${this.noteContext?.viewScope?.viewMode ?? "default"}`);
         this.$widget.addClass(note.getColorClass());
-        this.$widget.toggleClass("options", note.isOptions());
-        this.$widget.toggleClass("bgfx", this.#hasBackgroundEffects(note));
+        this.$widget.toggleClass(["bgfx", "options"], note.isOptions());
         this.$widget.toggleClass("protected", note.isProtected);
 
         const noteLanguage = note?.getLabelValue("language");
@@ -89,22 +88,6 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
         return !!note?.isLabelTruthy("fullContentWidth");
     }
 
-    #hasBackgroundEffects(note: FNote): boolean {
-        const MIME_TYPES_WITH_BACKGROUND_EFFECTS = [
-            "application/pdf"
-        ]
-
-        if (note.isOptions()) {
-            return true;
-        }
-
-        if (note.type === "file" && MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime)) {
-            return true;
-        }
-
-        return false;
-    }
-
     async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         // listening on changes of note.type and CSS class
         const LABELS_CAUSING_REFRESH = ["cssClass", "language", "viewType", "color"];

apps/client/src/widgets/react/Badge.css

@@ -22,7 +22,7 @@
         }
     }
 
-    .tn-icon {
+    .bx {
         font-size: 1.2em;
         margin-inline-end: 4px;
         opacity: .6;

apps/client/src/widgets/react/FormList.css

@@ -5,7 +5,7 @@
         white-space: normal;
     }
 
-    span.tn-icon {
+    span.bx {
         flex-shrink: 0;
     }
 

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

@@ -9,7 +9,7 @@ interface IconProps extends Pick<HTMLAttributes<HTMLSpanElement>, "className" |
 export default function Icon({ icon, className, ...restProps }: IconProps) {
     return (
         <span
-            class={clsx(icon ?? "bx bx-empty", className, "tn-icon")}
+            class={clsx(icon ?? "bx bx-empty", className)}
             {...restProps}
         />
     );

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

@@ -8,7 +8,7 @@ import { MutableRef, useCallback, useContext, useDebugValue, useEffect, useLayou
 
 import appContext, { EventData, EventNames } from "../../components/app_context";
 import Component from "../../components/component";
-import NoteContext, { NoteContextDataMap } from "../../components/note_context";
+import NoteContext from "../../components/note_context";
 import FBlob from "../../entities/fblob";
 import FNote from "../../entities/fnote";
 import attributes from "../../services/attributes";
@@ -19,7 +19,7 @@ import options, { type OptionValue } from "../../services/options";
 import protected_session_holder from "../../services/protected_session_holder";
 import server from "../../services/server";
 import shortcuts, { Handler, removeIndividualBinding } from "../../services/shortcuts";
-import SpacedUpdate, { type StateCallback } from "../../services/spaced_update";
+import SpacedUpdate from "../../services/spaced_update";
 import toast, { ToastOptions } from "../../services/toast";
 import tree from "../../services/tree";
 import utils, { escapeRegExp, getErrorMessage, randomString, reloadFrontendApp } from "../../services/utils";
@@ -63,29 +63,22 @@ export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler:
     useDebugValue(() => eventNames.join(", "));
 }
 
-export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000, stateCallback?: StateCallback) {
+export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000) {
     const callbackRef = useRef(callback);
-    const stateCallbackRef = useRef(stateCallback);
     const spacedUpdateRef = useRef<SpacedUpdate>(new SpacedUpdate(
         () => callbackRef.current(),
-        interval,
-        (state) => stateCallbackRef.current?.(state)
+        interval
     ));
 
     // Update callback ref when it changes
     useEffect(() => {
         callbackRef.current = callback;
-    }, [ callback ]);
-
-    // Update state callback when it changes.
-    useEffect(() => {
-        stateCallbackRef.current = stateCallback;
-    }, [ stateCallback ]);
+    }, [callback]);
 
     // Update interval if it changes
     useEffect(() => {
         spacedUpdateRef.current?.setUpdateInterval(interval);
-    }, [ interval ]);
+    }, [interval]);
 
     return spacedUpdateRef.current;
 }
@@ -128,12 +121,7 @@ export function useEditorSpacedUpdate({ note, noteType, noteContext, getData, on
             dataSaved?.(data);
         };
     }, [ note, getData, dataSaved, noteType, parentComponent ]);
-    const stateCallback = useCallback<StateCallback>((state) => {
-        noteContext?.setContextData("saveState", {
-            state
-        });
-    }, [ noteContext ]);
-    const spacedUpdate = useSpacedUpdate(callback, updateInterval, stateCallback);
+    const spacedUpdate = useSpacedUpdate(callback);
 
     // React to note/blob changes.
     useEffect(() => {
@@ -170,73 +158,6 @@ export function useEditorSpacedUpdate({ note, noteType, noteContext, getData, on
     return spacedUpdate;
 }
 
-export function useBlobEditorSpacedUpdate({ note, noteType, noteContext, getData, onContentChange, dataSaved, updateInterval, replaceWithoutRevision }: {
-    noteType: NoteType;
-    note: FNote,
-    noteContext: NoteContext | null | undefined,
-    getData: () => Promise<Blob | undefined> | Blob | undefined,
-    onContentChange: (newBlob: FBlob) => void,
-    dataSaved?: (savedData: Blob) => void,
-    updateInterval?: number;
-    /** If set to true, then the blob is replaced directly without saving a revision before. */
-    replaceWithoutRevision?: boolean;
-}) {
-    const parentComponent = useContext(ParentComponent);
-    const blob = useNoteBlob(note, parentComponent?.componentId);
-
-    const callback = useMemo(() => {
-        return async () => {
-            const data = await getData();
-
-            // for read only notes
-            if (data === undefined || note.type !== noteType) return;
-
-            protected_session_holder.touchProtectedSessionIfNecessary(note);
-            await server.upload(`notes/${note.noteId}/file?replace=${replaceWithoutRevision ? "1" : "0"}`, new File([ data ], note.title, { type: note.mime }), parentComponent?.componentId);
-            dataSaved?.(data);
-        };
-    }, [ note, getData, dataSaved, noteType, parentComponent, replaceWithoutRevision ]);
-    const stateCallback = useCallback<StateCallback>((state) => {
-        noteContext?.setContextData("saveState", {
-            state
-        });
-    }, [ noteContext ]);
-    const spacedUpdate = useSpacedUpdate(callback, updateInterval, stateCallback);
-
-    // React to note/blob changes.
-    useEffect(() => {
-        if (!blob) return;
-        spacedUpdate.allowUpdateWithoutChange(() => onContentChange(blob));
-    }, [ blob ]);
-
-    // React to update interval changes.
-    useEffect(() => {
-        if (!updateInterval) return;
-        spacedUpdate.setUpdateInterval(updateInterval);
-    }, [ updateInterval ]);
-
-    // Save if needed upon switching tabs.
-    useTriliumEvent("beforeNoteSwitch", async ({ noteContext: eventNoteContext }) => {
-        if (eventNoteContext.ntxId !== noteContext?.ntxId) return;
-        await spacedUpdate.updateNowIfNecessary();
-    });
-
-    // Save if needed upon tab closing.
-    useTriliumEvent("beforeNoteContextRemove", async ({ ntxIds }) => {
-        if (!noteContext?.ntxId || !ntxIds.includes(noteContext.ntxId)) return;
-        await spacedUpdate.updateNowIfNecessary();
-    });
-
-    // Save if needed upon window/browser closing.
-    useEffect(() => {
-        const listener = () => spacedUpdate.isAllSavedAndTriggerUpdate();
-        appContext.addBeforeUnloadListener(listener);
-        return () => appContext.removeBeforeUnloadListener(listener);
-    }, []);
-
-    return spacedUpdate;
-}
-
 export function useNoteSavedData(noteId: string | undefined) {
     return useSyncExternalStore(
         (cb) => noteId ? noteSavedDataStore.subscribe(noteId, cb) : () => {},
@@ -713,8 +634,7 @@ export function useLegacyWidget<T extends BasicWidget>(widgetFactory: () => T, {
     const ref = useRef<HTMLDivElement>(null);
     const parentComponent = useContext(ParentComponent);
 
-    // Render the widget once - note that noteContext is intentionally NOT a dependency
-    // to prevent creating new widget instances on every note switch.
+    // Render the widget once.
     const [ widget, renderedWidget ] = useMemo(() => {
         const widget = widgetFactory();
 
@@ -722,21 +642,14 @@ export function useLegacyWidget<T extends BasicWidget>(widgetFactory: () => T, {
             parentComponent.child(widget);
         }
 
+        if (noteContext && widget instanceof NoteContextAwareWidget) {
+            widget.setNoteContextEvent({ noteContext });
+        }
+
         const renderedWidget = widget.render();
         return [ widget, renderedWidget ];
-    }, [ parentComponent ]); // eslint-disable-line react-hooks/exhaustive-deps
-    // widgetFactory() and noteContext are intentionally left out - widget should be created once
-    // and updated via activeContextChangedEvent when noteContext changes.
-
-    // Cleanup: remove widget from parent's children when unmounted
-    useEffect(() => {
-        return () => {
-            if (parentComponent) {
-                parentComponent.removeChild(widget);
-            }
-            widget.cleanup();
-        };
-    }, [ parentComponent, widget ]);
+    }, [ noteContext, parentComponent ]); // eslint-disable-line react-hooks/exhaustive-deps
+    // widgetFactory() is intentionally left out
 
     // Attach the widget to the parent.
     useEffect(() => {
@@ -747,17 +660,10 @@ export function useLegacyWidget<T extends BasicWidget>(widgetFactory: () => T, {
         }
     }, [ renderedWidget ]);
 
-    // Inject the note context - this updates the existing widget without recreating it.
-    // We check if the context actually changed to avoid double refresh when the event system
-    // also delivers activeContextChanged to the widget through component tree propagation.
+    // Inject the note context.
     useEffect(() => {
         if (noteContext && widget instanceof NoteContextAwareWidget) {
-            // Only trigger refresh if the context actually changed.
-            // The event system may have already updated the widget, in which case
-            // widget.noteContext will already equal noteContext.
-            if (widget.noteContext !== noteContext) {
-                widget.activeContextChangedEvent({ noteContext });
-            }
+            widget.activeContextChangedEvent({ noteContext });
         }
     }, [ noteContext, widget ]);
 
@@ -1286,92 +1192,3 @@ export function useContentElement(noteContext: NoteContext | null | undefined) {
 
     return contentElement;
 }
-
-/**
- * Set context data on the current note context.
- * This allows type widgets to publish data (e.g., table of contents, PDF pages)
- * that can be consumed by sidebar/toolbar components.
- *
- * Data is automatically cleared when navigating to a different note.
- *
- * @param key - Unique identifier for the data type (e.g., "toc", "pdfPages")
- * @param value - The data to publish
- *
- * @example
- * // In a PDF viewer widget:
- * const { noteContext } = useActiveNoteContext();
- * useSetContextData(noteContext, "pdfPages", pages);
- */
-export function useSetContextData<K extends keyof NoteContextDataMap>(
-    noteContext: NoteContext | null | undefined,
-    key: K,
-    value: NoteContextDataMap[K] | undefined
-) {
-    useEffect(() => {
-        if (!noteContext) return;
-
-        if (value !== undefined) {
-            noteContext.setContextData(key, value);
-        } else {
-            noteContext.clearContextData(key);
-        }
-
-        return () => {
-            noteContext.clearContextData(key);
-        };
-    }, [noteContext, key, value]);
-}
-
-/**
- * Get context data from the active note context.
- * This is typically used in sidebar/toolbar components that need to display
- * data published by type widgets.
- *
- * The component will automatically re-render when the data changes.
- *
- * @param key - The data key to retrieve (e.g., "toc", "pdfPages")
- * @returns The current data, or undefined if not available
- *
- * @example
- * // In a Table of Contents sidebar widget:
- * function TableOfContents() {
- *   const headings = useGetContextData<Heading[]>("toc");
- *   if (!headings) return <div>No headings available</div>;
- *   return <ul>{headings.map(h => <li>{h.text}</li>)}</ul>;
- * }
- */
-export function useGetContextData<K extends keyof NoteContextDataMap>(key: K): NoteContextDataMap[K] | undefined {
-    const { noteContext } = useActiveNoteContext();
-    return useGetContextDataFrom(noteContext, key);
-}
-
-/**
- * Get context data from a specific note context (not necessarily the active one).
- *
- * @param noteContext - The specific note context to get data from
- * @param key - The data key to retrieve
- * @returns The current data, or undefined if not available
- */
-export function useGetContextDataFrom<K extends keyof NoteContextDataMap>(
-    noteContext: NoteContext | null | undefined,
-    key: K
-): NoteContextDataMap[K] | undefined {
-    const [data, setData] = useState<NoteContextDataMap[K] | undefined>(() =>
-        noteContext?.getContextData(key)
-    );
-
-    // Update initial value when noteContext changes
-    useEffect(() => {
-        setData(noteContext?.getContextData(key));
-    }, [noteContext, key]);
-
-    // Subscribe to changes via Trilium event system
-    useTriliumEvent("contextDataChanged", ({ noteContext: eventNoteContext, key: changedKey, value }) => {
-        if (eventNoteContext === noteContext && changedKey === key) {
-            setData(value as NoteContextDataMap[K]);
-        }
-    });
-
-    return data;
-}
-

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

@@ -1,5 +1,3 @@
-import { useContext } from "preact/hooks";
-
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { downloadFileNote, openNoteExternally } from "../../services/open";
@@ -10,14 +8,11 @@ import { formatSize } from "../../services/utils";
 import Button from "../react/Button";
 import { FormFileUploadButton } from "../react/FormFileUpload";
 import { useNoteBlob, useNoteLabel } from "../react/hooks";
-import { ParentComponent } from "../react/react_utils";
-import { TabContext } from "./ribbon-interface";
 
-export default function FilePropertiesTab({ note, ntxId }: Pick<TabContext, "note" | "ntxId">) {
+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);
-    const parentComponent = useContext(ParentComponent);
 
     return (
         <div className="file-properties-widget">
@@ -45,7 +40,7 @@ export default function FilePropertiesTab({ note, ntxId }: Pick<TabContext, "not
                                         text={t("file_properties.download")}
                                         primary
                                         disabled={!canAccessProtectedNote}
-                                        onClick={() => downloadFileNote(note, parentComponent, ntxId)}
+                                        onClick={() => downloadFileNote(note.noteId)}
                                     />
 
                                     <Button

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

@@ -44,7 +44,7 @@ export default function ImagePropertiesTab({ note, ntxId }: TabContext) {
                             text={t("image_properties.download")}
                             icon="bx bx-download"
                             primary
-                            onClick={() => downloadFileNote(note, parentComponent, ntxId)}
+                            onClick={() => downloadFileNote(note.noteId)}
                         />
 
                         <Button

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

@@ -135,13 +135,13 @@ function OpenExternallyButton({ note, noteMime }: NoteActionsCustomInnerProps) {
     );
 }
 
-function DownloadFileButton({ note, parentComponent, ntxId }: NoteActionsCustomInnerProps) {
+function DownloadFileButton({ note }: NoteActionsCustomInnerProps) {
     return (
         <ActionButton
             icon="bx bx-download"
             text={t("file_properties.download")}
             disabled={!note.isContentAvailable()}
-            onClick={() => downloadFileNote(note, parentComponent, ntxId)}
+            onClick={() => downloadFileNote(note.noteId)}
         />
     );
 }

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

@@ -135,7 +135,7 @@ function RibbonTab({ icon, title, active, onClick, toggleCommand }: { icon: stri
             >
                 <span
                     ref={iconRef}
-                    className={`ribbon-tab-title-icon tn-icon ${icon}`}
+                    className={`ribbon-tab-title-icon ${icon}`}
                 />
                 &nbsp;
                 { active && <span class="ribbon-tab-title-label">{title}</span> }

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

@@ -38,7 +38,7 @@
     padding-top: 2px;
 }
 
-.ribbon-tab-title .tn-icon {
+.ribbon-tab-title .bx {
     font-size: 150%;
     position: relative;
 }

apps/client/src/widgets/sidebar/RightPanelContainer.css

@@ -28,7 +28,7 @@ body.experimental-feature-new-layout #right-pane {
             border-bottom: 0;
         }
 
-        &.collapsed .card-header > .tn-icon {
+        &.collapsed .card-header > .bx {
             transform: rotate(-90deg);
         }
     }
@@ -50,7 +50,7 @@ body.experimental-feature-new-layout #right-pane {
         padding: 0.75em;
         color: var(--muted-text-color);
 
-        .tn-icon {
+        .bx {
             font-size: 3em;
         }
 

apps/client/src/widgets/sidebar/RightPanelContainer.tsx

@@ -3,7 +3,7 @@ import "./RightPanelContainer.css";
 
 import Split from "@triliumnext/split.js";
 import { VNode } from "preact";
-import { useState, useEffect, useRef, useCallback } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 
 import appContext from "../../components/app_context";
 import { WidgetsByParent } from "../../services/bundle";
@@ -11,13 +11,10 @@ import { t } from "../../services/i18n";
 import options from "../../services/options";
 import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
 import Button from "../react/Button";
-import { useActiveNoteContext, useLegacyWidget, useNoteProperty, useTriliumEvent, useTriliumOptionJson } from "../react/hooks";
+import { useActiveNoteContext, useLegacyWidget, useNoteProperty, useTriliumEvent, useTriliumOptionBool, useTriliumOptionJson } from "../react/hooks";
 import Icon from "../react/Icon";
 import LegacyRightPanelWidget from "../right_panel_widget";
 import HighlightsList from "./HighlightsList";
-import PdfAttachments from "./pdf/PdfAttachments";
-import PdfLayers from "./pdf/PdfLayers";
-import PdfPages from "./pdf/PdfPages";
 import RightPanelWidget from "./RightPanelWidget";
 import TableOfContents from "./TableOfContents";
 
@@ -30,16 +27,12 @@ interface RightPanelWidgetDefinition {
 }
 
 export default function RightPanelContainer({ widgetsByParent }: { widgetsByParent: WidgetsByParent }) {
-    const [ rightPaneVisible, setRightPaneVisible ] = useState(options.is("rightPaneVisible"));
+    const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
     const items = useItems(rightPaneVisible, widgetsByParent);
     useSplit(rightPaneVisible);
-    useTriliumEvent("toggleRightPane", useCallback(() => {
-        setRightPaneVisible(current => {
-            const newValue = !current;
-            options.save("rightPaneVisible", newValue.toString());
-            return newValue;
-        });
-    }, []));
+    useTriliumEvent("toggleRightPane", () => {
+        setRightPaneVisible(!rightPaneVisible);
+    });
 
     return (
         <div id="right-pane">
@@ -52,7 +45,7 @@ export default function RightPanelContainer({ widgetsByParent }: { widgetsByPare
                         {t("right_pane.empty_message")}
                         <Button
                             text={t("right_pane.empty_button")}
-                            triggerCommand="toggleRightPane"
+                            onClick={() => setRightPaneVisible(!rightPaneVisible)}
                         />
                     </div>
                 )
@@ -64,27 +57,13 @@ export default function RightPanelContainer({ widgetsByParent }: { widgetsByPare
 function useItems(rightPaneVisible: boolean, widgetsByParent: WidgetsByParent) {
     const { note } = useActiveNoteContext();
     const noteType = useNoteProperty(note, "type");
-    const noteMime = useNoteProperty(note, "mime");
     const [ highlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
-    const isPdf = noteType === "file" && noteMime === "application/pdf";
 
     if (!rightPaneVisible) return [];
     const definitions: RightPanelWidgetDefinition[] = [
         {
             el: <TableOfContents />,
-            enabled: (noteType === "text" || noteType === "doc" || isPdf),
-        },
-        {
-            el: <PdfPages />,
-            enabled: isPdf,
-        },
-        {
-            el: <PdfAttachments />,
-            enabled: isPdf,
-        },
-        {
-            el: <PdfLayers />,
-            enabled: isPdf,
+            enabled: (noteType === "text" || noteType === "doc"),
         },
         {
             el: <HighlightsList />,

apps/client/src/widgets/sidebar/TableOfContents.css

@@ -29,11 +29,6 @@
     hyphens: auto;
 }
 
-.toc li.active > .item-content {
-    font-weight: bold;
-    color: var(--main-text-color);
-}
-
 .toc > ol {
     --toc-depth-level: 1;
 }

apps/client/src/widgets/sidebar/TableOfContents.tsx

@@ -6,7 +6,7 @@ import { useCallback, useEffect, useState } from "preact/hooks";
 
 import { t } from "../../services/i18n";
 import { randomString } from "../../services/utils";
-import { useActiveNoteContext, useContentElement, useGetContextData, useIsNoteReadOnly, useNoteProperty, useTextEditor } from "../react/hooks";
+import { useActiveNoteContext, useContentElement, useIsNoteReadOnly, useNoteProperty, useTextEditor } from "../react/hooks";
 import Icon from "../react/Icon";
 import RightPanelWidget from "./RightPanelWidget";
 
@@ -21,50 +21,29 @@ interface HeadingsWithNesting extends RawHeading {
     children: HeadingsWithNesting[];
 }
 
-export interface HeadingContext {
-    scrollToHeading(heading: RawHeading): void;
-    headings: RawHeading[];
-    activeHeadingId?: string | null;
-}
-
 export default function TableOfContents() {
     const { note, noteContext } = useActiveNoteContext();
     const noteType = useNoteProperty(note, "type");
-    const noteMime = useNoteProperty(note, "mime");
     const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
 
     return (
         <RightPanelWidget id="toc" title={t("toc.table_of_contents")} grow>
             {((noteType === "text" && isReadOnly) || (noteType === "doc")) && <ReadOnlyTextTableOfContents />}
             {noteType === "text" && !isReadOnly && <EditableTextTableOfContents />}
-            {noteType === "file" && noteMime === "application/pdf" && <PdfTableOfContents />}
         </RightPanelWidget>
     );
 }
 
-function PdfTableOfContents() {
-    const data = useGetContextData("toc");
-
-    return (
-        <AbstractTableOfContents
-            headings={data?.headings || []}
-            scrollToHeading={data?.scrollToHeading || (() => {})}
-            activeHeadingId={data?.activeHeadingId}
-        />
-    );
-}
-
-function AbstractTableOfContents<T extends RawHeading>({ headings, scrollToHeading, activeHeadingId }: {
+function AbstractTableOfContents<T extends RawHeading>({ headings, scrollToHeading }: {
     headings: T[];
     scrollToHeading(heading: T): void;
-    activeHeadingId?: string | null;
 }) {
     const nestedHeadings = buildHeadingTree(headings);
     return (
         <span className="toc">
             {nestedHeadings.length > 0 ? (
                 <ol>
-                    {nestedHeadings.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} activeHeadingId={activeHeadingId} />)}
+                    {nestedHeadings.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} />)}
                 </ol>
             ) : (
                 <div className="no-headings">{t("toc.no_headings")}</div>
@@ -73,16 +52,14 @@ function AbstractTableOfContents<T extends RawHeading>({ headings, scrollToHeadi
     );
 }
 
-function TableOfContentsHeading({ heading, scrollToHeading, activeHeadingId }: {
+function TableOfContentsHeading({ heading, scrollToHeading }: {
     heading: HeadingsWithNesting;
     scrollToHeading(heading: RawHeading): void;
-    activeHeadingId?: string | null;
 }) {
     const [ collapsed, setCollapsed ] = useState(false);
-    const isActive = heading.id === activeHeadingId;
     return (
         <>
-            <li className={clsx(collapsed && "collapsed", isActive && "active")}>
+            <li className={clsx(collapsed && "collapsed")}>
                 {heading.children.length > 0 && (
                     <Icon
                         className="collapse-button"
@@ -97,7 +74,7 @@ function TableOfContentsHeading({ heading, scrollToHeading, activeHeadingId }: {
             </li>
             {heading.children && (
                 <ol>
-                    {heading.children.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} activeHeadingId={activeHeadingId} />)}
+                    {heading.children.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} />)}
                 </ol>
             )}
         </>

apps/client/src/widgets/sidebar/pdf/PdfAttachments.css

@@ -1,57 +0,0 @@
-.pdf-attachments-list {
-    width: 100%;
-}
-
-.pdf-attachment-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    cursor: pointer;
-    border-bottom: 1px solid var(--main-border-color);
-    transition: background-color 0.2s;
-}
-
-.pdf-attachment-item:hover {
-    background-color: var(--hover-item-background-color);
-}
-
-.pdf-attachment-item:last-child {
-    border-bottom: none;
-}
-
-.pdf-attachment-info {
-    flex: 1;
-    min-width: 0;
-}
-
-.pdf-attachment-filename {
-    font-size: 13px;
-    font-weight: 500;
-    color: var(--main-text-color);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.pdf-attachment-size {
-    font-size: 11px;
-    color: var(--muted-text-color);
-    margin-top: 2px;
-}
-
-.no-attachments {
-    padding: 16px;
-    text-align: center;
-    color: var(--muted-text-color);
-}
-
-.pdf-attachment-item .bx {
-    flex-shrink: 0;
-    font-size: 18px;
-    color: var(--muted-text-color);
-}
-
-.pdf-attachment-item:hover .bx {
-    color: var(--main-text-color);
-}

apps/client/src/widgets/sidebar/pdf/PdfAttachments.tsx

@@ -1,62 +0,0 @@
-import "./PdfAttachments.css";
-
-import { t } from "../../../services/i18n";
-import { formatSize } from "../../../services/utils";
-import { useActiveNoteContext, useGetContextData, useNoteProperty } from "../../react/hooks";
-import Icon from "../../react/Icon";
-import RightPanelWidget from "../RightPanelWidget";
-
-interface AttachmentInfo {
-    filename: string;
-    size: number;
-}
-
-export default function PdfAttachments() {
-    const { note } = useActiveNoteContext();
-    const noteType = useNoteProperty(note, "type");
-    const noteMime = useNoteProperty(note, "mime");
-    const attachmentsData = useGetContextData("pdfAttachments");
-
-    if (noteType !== "file" || noteMime !== "application/pdf") {
-        return null;
-    }
-
-    if (!attachmentsData || attachmentsData.attachments.length === 0) {
-        return null;
-    }
-
-    return (
-        <RightPanelWidget id="pdf-attachments" title={t("pdf.attachments", { count: attachmentsData.attachments.length })}>
-            <div className="pdf-attachments-list">
-                {attachmentsData.attachments.map((attachment) => (
-                    <PdfAttachmentItem
-                        key={attachment.filename}
-                        attachment={attachment}
-                        onDownload={attachmentsData.downloadAttachment}
-                    />
-                ))}
-            </div>
-        </RightPanelWidget>
-    );
-}
-
-function PdfAttachmentItem({
-    attachment,
-    onDownload
-}: {
-    attachment: AttachmentInfo;
-    onDownload: (filename: string) => void;
-}) {
-    const sizeText = formatSize(attachment.size);
-
-    return (
-        <div className="pdf-attachment-item" onClick={() => onDownload(attachment.filename)}>
-            <Icon icon="bx bx-paperclip" />
-            <div className="pdf-attachment-info">
-                <div className="pdf-attachment-filename">{attachment.filename}</div>
-                <div className="pdf-attachment-size">{sizeText}</div>
-            </div>
-            <Icon icon="bx bx-download" />
-        </div>
-    );
-}

apps/client/src/widgets/sidebar/pdf/PdfLayers.css

@@ -1,54 +0,0 @@
-.pdf-layers-list {
-    width: 100%;
-}
-
-.pdf-layer-item {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    padding: 8px 12px;
-    cursor: pointer;
-    border-bottom: 1px solid var(--main-border-color);
-    transition: background-color 0.2s;
-}
-
-.pdf-layer-item:hover {
-    background-color: var(--hover-item-background-color);
-}
-
-.pdf-layer-item:last-child {
-    border-bottom: none;
-}
-
-.pdf-layer-item.hidden {
-    opacity: 0.5;
-}
-
-.pdf-layer-name {
-    flex: 1;
-    font-size: 13px;
-    color: var(--main-text-color);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-.no-layers {
-    padding: 16px;
-    text-align: center;
-    color: var(--muted-text-color);
-}
-
-.pdf-layer-item .bx {
-    flex-shrink: 0;
-    font-size: 18px;
-    color: var(--muted-text-color);
-}
-
-.pdf-layer-item:hover .bx {
-    color: var(--main-text-color);
-}
-
-.pdf-layer-item.visible .bx {
-    color: var(--main-text-color);
-}

apps/client/src/widgets/sidebar/pdf/PdfLayers.tsx

@@ -1,55 +0,0 @@
-import "./PdfLayers.css";
-
-import { t } from "../../../services/i18n";
-import { useActiveNoteContext, useGetContextData, useNoteProperty } from "../../react/hooks";
-import Icon from "../../react/Icon";
-import RightPanelWidget from "../RightPanelWidget";
-
-interface LayerInfo {
-    id: string;
-    name: string;
-    visible: boolean;
-}
-
-export default function PdfLayers() {
-    const { note } = useActiveNoteContext();
-    const noteType = useNoteProperty(note, "type");
-    const noteMime = useNoteProperty(note, "mime");
-    const layersData = useGetContextData("pdfLayers");
-
-    if (noteType !== "file" || noteMime !== "application/pdf") {
-        return null;
-    }
-
-    return (layersData?.layers && layersData.layers.length > 0 &&
-        <RightPanelWidget id="pdf-layers" title={t("pdf.layers", { count: layersData.layers.length })}>
-            <div className="pdf-layers-list">
-                {layersData.layers.map((layer) => (
-                    <PdfLayerItem
-                        key={layer.id}
-                        layer={layer}
-                        onToggle={layersData.toggleLayer}
-                    />
-                ))}
-            </div>
-        </RightPanelWidget>
-    );
-}
-
-function PdfLayerItem({
-    layer,
-    onToggle
-}: {
-    layer: LayerInfo;
-    onToggle: (layerId: string, visible: boolean) => void;
-}) {
-    return (
-        <div
-            className={`pdf-layer-item ${layer.visible ? 'visible' : 'hidden'}`}
-            onClick={() => onToggle(layer.id, !layer.visible)}
-        >
-            <Icon icon={layer.visible ? "bx bx-show" : "bx bx-hide"} />
-            <div className="pdf-layer-name">{layer.name}</div>
-        </div>
-    );
-}

apps/client/src/widgets/sidebar/pdf/PdfPages.css

@@ -1,67 +0,0 @@
-.pdf-pages-list {
-    width: 100%;
-    height: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-    gap: 8px;
-    padding: 8px;
-    align-content: flex-start;
-}
-
-.pdf-page-item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    padding: 8px;
-    cursor: pointer;
-    border: 2px solid transparent;
-    transition: border-color 0.2s;
-    box-sizing: border-box;
-    position: relative;
-
-    .pdf-page-number {
-        font-size: 12px;
-        margin-bottom: 4px;
-        color: var(--main-text-color);
-        position: absolute;
-        bottom: 1em;
-        left: 50%;
-        transform: translateX(-50%);
-        background-color: var(--accented-background-color);
-        padding: 0.2em 0.5em;
-        border-radius: 4px;
-    }
-}
-
-.pdf-page-item:hover {
-    background-color: var(--hover-item-background-color);
-}
-
-.pdf-page-item.active {
-    border-color: var(--main-border-color);
-    background-color: var(--active-item-background-color);
-}
-
-.pdf-page-thumbnail {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.pdf-page-thumbnail img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-}
-
-.pdf-page-loading {
-    color: var(--muted-text-color);
-    font-size: 11px;
-}
-
-.no-pages {
-    padding: 16px;
-    text-align: center;
-    color: var(--muted-text-color);
-}

apps/client/src/widgets/sidebar/pdf/PdfPages.tsx

@@ -1,111 +0,0 @@
-import "./PdfPages.css";
-
-import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-
-import { NoteContextDataMap } from "../../../components/note_context";
-import { t } from "../../../services/i18n";
-import { useActiveNoteContext, useGetContextData, useNoteProperty } from "../../react/hooks";
-import RightPanelWidget from "../RightPanelWidget";
-
-export default function PdfPages() {
-    const { note } = useActiveNoteContext();
-    const noteType = useNoteProperty(note, "type");
-    const noteMime = useNoteProperty(note, "mime");
-    const pagesData = useGetContextData("pdfPages");
-
-    if (noteType !== "file" || noteMime !== "application/pdf") {
-        return null;
-    }
-
-    return (pagesData &&
-        <RightPanelWidget id="pdf-pages" title={t("pdf.pages", { count: pagesData?.totalPages || 0 })} grow>
-            <PdfPagesList key={note?.noteId} pagesData={pagesData} />
-        </RightPanelWidget>
-    );
-}
-
-function PdfPagesList({ pagesData }: { pagesData: NoteContextDataMap["pdfPages"] }) {
-    const [thumbnails, setThumbnails] = useState<Map<number, string>>(new Map());
-    const requestedThumbnails = useRef<Set<number>>(new Set());
-
-    useEffect(() => {
-        // Listen for thumbnail responses via custom event
-        function handleThumbnail(event: CustomEvent) {
-            const { pageNumber, dataUrl } = event.detail;
-            setThumbnails(prev => new Map(prev).set(pageNumber, dataUrl));
-        }
-
-        window.addEventListener("pdf-thumbnail", handleThumbnail as EventListener);
-        return () => {
-            window.removeEventListener("pdf-thumbnail", handleThumbnail as EventListener);
-        };
-    }, []);
-
-    const requestThumbnail = useCallback((pageNumber: number) => {
-        // Only request if we haven't already requested it and don't have it
-        if (!requestedThumbnails.current.has(pageNumber) && !thumbnails.has(pageNumber) && pagesData) {
-            requestedThumbnails.current.add(pageNumber);
-            pagesData.requestThumbnail(pageNumber);
-        }
-    }, [pagesData, thumbnails]);
-
-    if (!pagesData || pagesData.totalPages === 0) {
-        return <div className="no-pages">No pages available</div>;
-    }
-
-    const pages = Array.from({ length: pagesData.totalPages }, (_, i) => i + 1);
-
-    return (
-        <div className="pdf-pages-list">
-            {pages.map(pageNumber => (
-                <PdfPageItem
-                    key={pageNumber}
-                    pageNumber={pageNumber}
-                    isActive={pageNumber === pagesData.currentPage}
-                    thumbnail={thumbnails.get(pageNumber)}
-                    onRequestThumbnail={requestThumbnail}
-                    onPageClick={() => pagesData.scrollToPage(pageNumber)}
-                />
-            ))}
-        </div>
-    );
-}
-
-function PdfPageItem({
-    pageNumber,
-    isActive,
-    thumbnail,
-    onRequestThumbnail,
-    onPageClick
-}: {
-    pageNumber: number;
-    isActive: boolean;
-    thumbnail?: string;
-    onRequestThumbnail(page: number): void;
-    onPageClick(): void;
-}) {
-    const hasRequested = useRef(false);
-
-    useEffect(() => {
-        if (!thumbnail && !hasRequested.current) {
-            hasRequested.current = true;
-            onRequestThumbnail(pageNumber);
-        }
-    }, [pageNumber, thumbnail, onRequestThumbnail]);
-
-    return (
-        <div
-            className={`pdf-page-item ${isActive ? 'active' : ''}`}
-            onClick={onPageClick}
-        >
-            <div className="pdf-page-number">{pageNumber}</div>
-            <div className="pdf-page-thumbnail">
-                {thumbnail ? (
-                    <img src={thumbnail} alt={t("pdf.pages_alt", { pageNumber })} />
-                ) : (
-                    <div className="pdf-page-loading">{t("pdf.pages_loading")}</div>
-                )}
-            </div>
-        </div>
-    );
-}

apps/client/src/widgets/type_widgets/Attachment.css

@@ -131,7 +131,7 @@
     width: 20em;
 }
 
-.attachment-actions .dropdown-item .tn-icon {
+.attachment-actions .dropdown-item .bx {
     position: relative;
     top: 3px;
     font-size: 120%;

apps/client/src/widgets/type_widgets/Attachment.tsx

@@ -195,11 +195,7 @@ function AttachmentInfo({ attachment, isFullDetail }: { attachment: FAttachment,
                         ) : (attachment.title)}
                     </h4>
                     <div className="attachment-details">
-                        {t("attachment_detail_2.role_and_size", {
-                            role: attachment.role,
-                            size: utils.formatSize(attachment.contentLength),
-                            mimeType: attachment.mime
-                        })}
+                        {t("attachment_detail_2.role_and_size", { role: attachment.role, size: utils.formatSize(attachment.contentLength) })}
                     </div>
                     <div style="flex: 1 1;" />
                 </div>

apps/client/src/widgets/type_widgets/File.tsx

@@ -1,29 +1,27 @@
+import { useNoteBlob } from "../react/hooks";
 import "./File.css";
-
+import { TypeWidgetProps } from "./type_widget";
 import FNote from "../../entities/fnote";
-import { t } from "../../services/i18n";
 import { getUrlForDownload } from "../../services/open";
 import Alert from "../react/Alert";
-import { useNoteBlob } from "../react/hooks";
-import PdfPreview from "./file/Pdf";
-import { TypeWidgetProps } from "./type_widget";
+import { t } from "../../services/i18n";
 
 const TEXT_MAX_NUM_CHARS = 5000;
 
-export default function FileTypeWidget({ note, parentComponent, noteContext }: TypeWidgetProps) {
-    const blob = useNoteBlob(note, parentComponent?.componentId);
+export default function File({ note }: TypeWidgetProps) {
+    const blob = useNoteBlob(note);
 
     if (blob?.content) {
-        return <TextPreview content={blob.content} />;
+        return <TextPreview content={blob.content} />
     } else if (note.mime === "application/pdf") {
-        return noteContext && <PdfPreview blob={blob} note={note} componentId={parentComponent?.componentId} noteContext={noteContext} />;
+        return <PdfPreview note={note} />
     } else if (note.mime.startsWith("video/")) {
-        return <VideoPreview note={note} />;
+        return <VideoPreview note={note} />
     } else if (note.mime.startsWith("audio/")) {
-        return <AudioPreview note={note} />;
+        return <AudioPreview note={note} />
+    } else {
+        return <NoPreview />
     }
-    return <NoPreview />;
-
 }
 
 function TextPreview({ content }: { content: string }) {
@@ -39,6 +37,14 @@ function TextPreview({ content }: { content: string }) {
             )}
             <pre class="file-preview-content">{trimmedContent}</pre>
         </>
+    )
+}
+
+function PdfPreview({ note }: { note: FNote }) {
+    return (
+        <iframe
+            class="pdf-preview"
+            src={getUrlForDownload(`api/notes/${note.noteId}/open`)} />
     );
 }
 
@@ -50,7 +56,7 @@ function VideoPreview({ note }: { note: FNote }) {
             datatype={note?.mime}
             controls
         />
-    );
+    )
 }
 
 function AudioPreview({ note }: { note: FNote }) {
@@ -60,7 +66,7 @@ function AudioPreview({ note }: { note: FNote }) {
             src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
             controls
         />
-    );
+    )
 }
 
 function NoPreview() {