chore(client): set up body classes

Currently translated at 100.0% (1751 of 1751 strings)

Translation: Trilium Notes/Client
Translate-URL: https://hosted.weblate.org/projects/trilium/client/zh_Hans/

.gitignore

@@ -51,3 +51,4 @@ 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.26.2",
+  "packageManager": "pnpm@10.27.0",
   "devDependencies": {
-    "@redocly/cli": "2.14.1",
+    "@redocly/cli": "2.14.3",
     "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": "16.5.0",
+    "globals": "17.0.0",
     "i18next": "25.7.3",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
@@ -56,11 +56,12 @@
     "mark.js": "8.11.1",
     "marked": "17.0.1",
     "mermaid": "11.12.2",
-    "mind-elixir": "5.3.8",
+    "mind-elixir": "5.4.0",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
     "preact": "10.28.1",
-    "react-i18next": "16.5.0",
+    "react-i18next": "16.5.1",
+    "react-window": "2.2.3",
     "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,7 +382,8 @@ export type CommandMappings = {
     reloadTextEditor: CommandData;
     chooseNoteType: CommandData & {
         callback: ChooseNoteTypeCallback
-    }
+    };
+    customDownload: CommandData;
 };
 
 type EventMappings = {
@@ -473,6 +474,11 @@ 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,6 +57,18 @@ 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,6 +12,7 @@ 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";
 
@@ -22,6 +23,31 @@ 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;
@@ -32,6 +58,13 @@ 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();
 
@@ -91,6 +124,22 @@ 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);
@@ -443,6 +492,52 @@ 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.html

@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <link rel="shortcut icon" href="favicon.ico">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+        <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
+        <title>Trilium Notes</title>
+    </head>
+
+    <body id="trilium-app">
+        <noscript><%= t("javascript-required") %></noscript>
+
+        <script>
+            // hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide <noscript>
+            document.getElementsByTagName("body")[0].style.display = "none";
+        </script>
+
+        <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>
+
+        <!-- Required for match the PWA's top bar color with the theme -->
+        <!-- This works even when the user directly changes --root-background in CSS -->
+        <div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
+
+        <!-- Bootstrap (request server for required information) -->
+        <script>
+            async function bootstrap() {
+                await setupGlob();
+                loadStylesheets();
+                loadIcons();
+                setBodyAttributes();
+                await loadScripts();
+            }
+
+            async function setupGlob() {
+                const response = await fetch("./bootstrap");
+                const json = await response.json();
+                
+                global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
+                window.glob = {
+                    ...json,
+                    activeDialog: null
+                };
+            }
+
+            function loadStylesheets() {
+                const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+                const cssToLoad = [];
+                cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
+                if (themeCssUrl) {
+                    cssToLoad.push(themeCssUrl);
+                }
+                if (themeUseNextAsBase === "next") {
+                    cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`)
+                } else if (themeUseNextAsBase === "next-dark") {
+                    cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`)
+                } else if (themeUseNextAsBase === "next-light") {
+                    cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`)
+                }
+                cssToLoad.push(`${assetPath}/stylesheets/style.css`);
+
+                for (const href of cssToLoad) {
+                    const linkEl = document.createElement("link");
+                    linkEl.href = href;
+                    linkEl.rel = "stylesheet";
+                    document.body.appendChild(linkEl);
+                }
+            }
+
+            function loadIcons() {
+                const styleEl = document.createElement("style");
+                styleEl.innerText = window.glob.iconPackCss;
+                document.head.appendChild(styleEl);
+            }
+
+            function setBodyAttributes() {
+                const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
+                const classesToSet = [
+                    device,
+                    `heading-style-${headingStyle}`,
+                    `layout-${layoutOrientation}`,
+                    `platform-${platform}`,
+                    isElectron && "isElectron",
+                    hasNativeTitleBar && "native-titlebar",
+                    hasBackgroundEffects && "background-effects"
+                ].filter(Boolean);
+
+                for (const classToSet of classesToSet) {
+                    document.body.classList.add(classToSet);
+                }
+
+                document.body.lang = currentLocale.id;
+                document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
+            }
+
+            async function loadScripts() {
+                const assetPath = glob.assetPath;
+                await import(`./${assetPath}/runtime.js`);
+                await import(`./${assetPath}/desktop.js`);
+            }
+            
+            bootstrap();
+        </script>
+
+        <!-- Required for correct loading of scripts in Electron -->
+        <script>
+            if (typeof module === 'object') {window.module = module; module = undefined;}
+        </script>
+    </body>
+</html>

apps/client/src/desktop.ts

@@ -1,17 +1,18 @@
-import appContext from "./components/app_context.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 options from "./services/options.js";
+import "autocomplete.js/index_jquery.js";
+
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
-import "boxicons/css/boxicons.min.css";
-import "autocomplete.js/index_jquery.js";
+
+import appContext from "./components/app_context.js";
+import electronContextMenu from "./menus/electron_context_menu.js";
+import bundleService from "./services/bundle.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";
 
 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,6 +582,10 @@ 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 { applyModals } from "./layout_commons.js";
-import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.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 type AppContext from "../components/app_context.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
-import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
+import CloseZenModeButton from "../widgets/close_zen_button.js";
 import NoteList from "../widgets/collections/NoteList.jsx";
-import NoteTitleWidget from "../widgets/note_title.js";
 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 { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+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 NoteTitleWidget from "../widgets/note_title.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 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 StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
+import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
 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 PromotedAttributes from "../widgets/PromotedAttributes.jsx";
-import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import { applyModals } from "./layout_commons.js";
 
 const MOBILE_CSS = `
 <style>
@@ -194,11 +194,11 @@ export default class MobileLayout {
 }
 
 function FilePropertiesWrapper() {
-    const { note } = useNoteContext();
+    const { note, ntxId } = useNoteContext();
 
     return (
         <div>
-            {note?.type === "file" && <FilePropertiesTab note={note} />}
+            {note?.type === "file" && <FilePropertiesTab note={note} ntxId={ntxId} />}
         </div>
     );
 }

apps/client/src/mobile.ts

@@ -1,9 +1,9 @@
-import appContext from "./components/app_context.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";
 
+import appContext from "./components/app_context.js";
+import glob from "./services/glob.js";
+import noteAutocompleteService from "./services/note_autocomplete.js";
+
 glob.setupGlobs();
 
 await appContext.earlyInit();

apps/client/src/services/content_renderer.ts

@@ -1,18 +1,19 @@
-import renderService from "./render.js";
+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 protectedSessionService from "./protected_session.js";
 import protectedSessionHolder from "./protected_session_holder.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 renderService from "./render.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";
+import utils from "./utils.js";
 
 let idCounter = 1;
 
@@ -152,7 +153,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);
@@ -193,7 +194,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(`api/${entityType}/${entityId}/open`));
+        $pdfPreview.attr("src", openService.getUrlForDownload(`pdfjs/web/viewer.html?file=../../api/${entityType}/${entityId}/open`));
 
         $content.append($pdfPreview);
     } else if (type === "audio") {
@@ -217,28 +218,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="bx bx-download"></span>
+                <span class="tn-icon bx bx-download"></span>
                 ${t("file_properties.download")}
             </button>
         `);
 
         const $openButton = $(`
             <button class="file-open btn btn-primary" type="button">
-                <span class="bx bx-link-external"></span>
+                <span class="tn-icon bx bx-link-external"></span>
                 ${t("file_properties.open")}
             </button>
         `);
 
         $downloadButton.on("click", (e) => {
             e.stopPropagation();
-            openService.downloadFileNote(entity.noteId)
+            openService.downloadFileNote(entity, null, null);
         });
         $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");
         });
@@ -266,7 +267,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

@@ -0,0 +1,14 @@
+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,21 +1,22 @@
 import clsx from "clsx";
-import {readCssVar} from "../utils/css-var";
 import Color, { ColorInstance } from "color";
 
+import {readCssVar} from "../utils/css-var";
+
 const registeredClasses = new Set<string>();
 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 "";
@@ -27,7 +28,7 @@ function createClassForColor(colorString: string | null) {
 
     if (!registeredClasses.has(className)) {
         const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
-                                                   darkThemeColorMinLightness!);
+            darkThemeColorMinLightness!);
         const hue = getHue(color);
 
         $("head").append(`<style>
@@ -50,7 +51,7 @@ function createClassForColor(colorString: string | null) {
 
 function parseColor(color: string) {
     try {
-        return Color(color);
+        return Color(color.toLowerCase());
     } catch (ex) {
         console.error(ex);
     }
@@ -84,8 +85,8 @@ function getHue(color: ColorInstance) {
 }
 
 export function getReadableTextColor(bgColor: string) {
-    const colorInstance = Color(bgColor);
-    return colorInstance.isLight() ? "#000" : "#fff";
+    const colorInstance = parseColor(bgColor);
+    return !colorInstance || colorInstance?.isLight() ? "#000" : "#fff";
 }
 
 export default {

apps/client/src/services/open.ts

@@ -1,6 +1,8 @@
-import utils from "./utils.js";
+import Component from "../components/component.js";
+import FNote from "../entities/fnote.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;
 
@@ -36,9 +38,14 @@ function download(url: string) {
     }
 }
 
-export function downloadFileNote(noteId: string) {
-    const url = `${getFileUrl("notes", noteId)}?${Date.now()}`; // don't use cache
+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;
+    }
 
+    const url = `${getFileUrl("notes", note.noteId)}?${Date.now()}`; // don't use cache
     download(url);
 }
 
@@ -97,7 +104,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);
@@ -131,10 +138,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,13 +85,15 @@ async function remove<T>(url: string, componentId?: string) {
     return await call<T>("DELETE", url, componentId);
 }
 
-async function upload(url: string, fileToUpload: File) {
+async function upload(url: string, fileToUpload: File, componentId?: string) {
     const formData = new FormData();
     formData.append("upload", fileToUpload);
 
     return await $.ajax({
         url: window.glob.baseApiUrl + url,
-        headers: await getHeaders(),
+        headers: await getHeaders(componentId ? {
+            "trilium-component-id": componentId
+        } : undefined),
         data: formData,
         type: "PUT",
         timeout: 60 * 60 * 1000,

apps/client/src/services/spaced_update.ts

@@ -1,22 +1,30 @@
+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) {
+    constructor(updater: Callback, updateInterval = 1000, stateCallback?: StateCallback) {
         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());
         }
     }
@@ -26,10 +34,13 @@ 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;
             }
         }
@@ -59,15 +70,22 @@ export default class SpacedUpdate {
         this.updateInterval = interval;
     }
 
-    triggerUpdate() {
+    async triggerUpdate() {
         if (!this.changed) {
             return;
         }
 
         if (Date.now() - this.lastUpdated > this.updateInterval) {
-            this.updater();
+            this.stateCallback?.("saving");
+            try {
+                await this.updater();
+                this.stateCallback?.("saved");
+                this.changed = false;
+            } catch (e) {
+                this.stateCallback?.("error");
+                logError(getErrorMessage(e));
+            }
             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,13 +187,15 @@ export function formatSize(size: number | null | undefined) {
         return "";
     }
 
-    size = Math.max(Math.round(size / 1024), 1);
-
-    if (size < 1024) {
-        return `${size} KiB`;
+    if (size === 0) {
+        return "0 B";
     }
-    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

@@ -0,0 +1,498 @@
+.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,3 +1,5 @@
+@import "./boxicons-compat.css";
+
 @font-face {
     font-family: Montserrat;
     src: url(../fonts/Montserrat-Light.ttf);
@@ -1128,11 +1130,6 @@ 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 */
 }
@@ -1799,7 +1796,7 @@ button.close:hover {
     display: none;
 }
 
-.reference-link .bx {
+.reference-link .tn-icon {
     position: relative;
     top: 1px;
     margin-inline-end: 3px;
@@ -2418,7 +2415,7 @@ footer.webview-footer button {
     gap: 5px;
 }
 
-.right-pane-tab .tab-title .bx {
+.right-pane-tab .tab-title .tn-icon {
     font-size: 1.1em;
 }
 
@@ -2546,18 +2543,11 @@ footer.webview-footer button {
     inset-inline-end: 10px;
 }
 
-.content-floating-buttons button.bx {
+.content-floating-buttons button.tn-icon {
     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,6 +17,8 @@
  */
 
 :root {
+    color-scheme: var(--theme-style);
+
     --main-font-family: "Inter", sans-serif;
 
     --main-font-size: normal;
@@ -134,7 +136,7 @@ body.backdrop-effects-disabled {
     white-space-collapse: discard;
 }
 
-.dropdown-menu.tn-dropdown-menu .bx {
+.dropdown-menu.tn-dropdown-menu .dropdown-item .tn-icon {
     margin-inline-end: 6px;
 }
 
@@ -249,7 +251,7 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item icon */
-.dropdown-item .bx {
+.dropdown-item .tn-icon {
     translate: 0 var(--menu-item-icon-vert-offset);
     color: var(--menu-item-icon-color) !important;
     font-size: 1.1em;
@@ -496,7 +498,7 @@ li.dropdown-item a.dropdown-item-button {
     border: unset;
 }
 
-li.dropdown-item a.dropdown-item-button.bx {
+li.dropdown-item a.dropdown-item-button.tn-icon {
     color: var(--menu-text-color) !important;
 }
 
@@ -557,13 +559,13 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     padding-top: 0;
 }
 
-#toast-container .toast:not(.no-title) .bx {
+#toast-container .toast:not(.no-title) .tn-icon {
     margin-inline-end: 0.5em;
     font-size: 1.1em;
     opacity: 0.85;
 }
 
-#toast-container .toast.no-title .bx {
+#toast-container .toast.no-title .tn-icon {
     margin-inline-end: 0;
     font-size: 1.3em;
 }
@@ -754,7 +756,7 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     margin-bottom: 0;
 }
 
-.note-list-wrapper .note-book-card .bx {
+.note-list-wrapper .note-book-card .tn-icon {
     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.bx {
+.note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.tn-icon {
     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.bx,
-button.btn.btn-secondary span.bx,
-button.btn.btn-sm span.bx,
-button.btn.btn-success span.bx {
+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 {
     color: var(--cmd-button-icon-color);
     padding-inline-end: 0.35em;
     font-size: 1.2em;

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

@@ -151,6 +151,11 @@
     --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);
@@ -185,10 +190,6 @@ 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 .bx {
+div.bookmark-folder-widget .note-link .tn-icon {
     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 span.fancytree-node.shared .fancytree-title::after {
+#left-pane .note-indicator-icon.shared-indicator {
     opacity: 0.5;
 }
 
@@ -1259,8 +1259,16 @@ 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,29 +148,28 @@ span.fancytree-node.protected > span.fancytree-custom-icon {
     filter: drop-shadow(2px 2px 2px var(--main-text-color));
 }
 
-span.fancytree-node.multiple-parents.shared .fancytree-title::after {
+/* Note indicator icons (clone, shared) - real DOM elements for tooltip support */
+.note-indicator-icon {
     font-family: "boxicons" !important;
     font-size: smaller;
-    content: " \eb3d \ec03";
+    margin-inline-start: 4px;
+    opacity: 0.8;
+    cursor: help;
 }
 
-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.clone-indicator::before {
+    content: "\eb3d"; /* bx-link-alt */
 }
 
-body.experimental-feature-new-layout span.fancytree-node.multiple-parents .fancytree-title::after {
-    content: " \ed82";
+.note-indicator-icon.shared-indicator::before {
+    content: "\ec03"; /* bx-share-alt */
+}
+
+body.experimental-feature-new-layout .note-indicator-icon.clone-indicator::before {
+    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;
 }
@@ -229,11 +228,11 @@ span.fancytree-node.archived {
     opacity: 0.6;
 }
 
-.fancytree-node:hover .bx.tree-item-button {
+.fancytree-node:hover .tn-icon.tree-item-button {
     display: inline-block;
 }
 
-.bx.tree-item-button {
+.tn-icon.tree-item-button {
     display: none;
     font-size: 120%;
     cursor: pointer;
@@ -243,7 +242,7 @@ span.fancytree-node.archived {
     border-radius: 5px;
 }
 
-.unhoist-button.bx.tree-item-button {
+.unhoist-button.tn-icon.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,7 +223,6 @@
     "backlink_other": ""
   },
   "note_icon": {
-    "category": "الفئة:",
     "search": "بحث:",
     "change_note_icon": "تغيير ايقونة الملاحظة",
     "reset-default": "اعادة تعيين الى الايقونة الافتراضية"
@@ -485,7 +484,6 @@
     "delete_button": "حذف",
     "download_button": "تنزيل",
     "restore_button": "أستعادة",
-    "preview": "معاينة:",
     "note_revisions": "مراجعات الملاحظة",
     "diff_on": "عرض الفروقات",
     "diff_off": "عرض المحتوى",

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

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

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

@@ -29,7 +29,7 @@
     "widget-render-error": {
       "title": "渲染自定义 React 小部件失败"
     },
-    "widget-missing-parent": "自定义小部件未定义强制性的 \"{{property}}\" 属性。",
+    "widget-missing-parent": "自定义小部件未定义强制性的 \"{{property}}\" 属性。\n\n如果此脚本需要在没有 UI 元素的情况下运行，请改用“#run=frontendStartup”。",
     "open-script-note": "打开脚本笔记",
     "scripting-error": "自定义脚本错误：{{title}}"
   },
@@ -290,7 +290,6 @@
     "download_button": "下载",
     "mime": "MIME 类型： ",
     "file_size": "文件大小：",
-    "preview": "预览：",
     "preview_not_available": "无法预览此类型的笔记。",
     "diff_on": "显示差异",
     "diff_off": "显示内容",
@@ -764,9 +763,15 @@
   },
   "note_icon": {
     "change_note_icon": "更改笔记图标",
-    "category": "类别:",
     "search": "搜索:",
-    "reset-default": "重置为默认图标"
+    "reset-default": "重置为默认图标",
+    "search_placeholder_other": "在 {{count}} 个图标包中搜索 {{number}} 个图标",
+    "search_placeholder_filtered": "在 {{name}} 中搜索 {{number}} 个图标",
+    "filter": "筛选",
+    "filter-none": "所有图标",
+    "filter-default": "默认图标",
+    "icon_tooltip": "{{name}}\n图标包：{{iconPack}}",
+    "no_results": "没有找到图标。"
   },
   "basic_properties": {
     "note_type": "笔记类型",
@@ -1446,7 +1451,7 @@
     "will_be_deleted_in": "此附件将在 {{time}} 后自动删除",
     "will_be_deleted_soon": "该附件在不久后将被自动删除",
     "deletion_reason": "，因为该附件未链接在笔记的内容中。为防止被删除，请将附件链接重新添加到内容中或将附件转换为笔记。",
-    "role_and_size": "角色：{{role}}，大小：{{size}}",
+    "role_and_size": "角色：{{role}}，大小：{{size}}，文件类型：{{- mimeType}}",
     "link_copied": "附件链接已复制到剪贴板。",
     "unrecognized_role": "无法识别的附件角色 '{{role}}'。"
   },
@@ -1589,7 +1594,11 @@
     "create-child-note": "创建子笔记",
     "unhoist": "取消聚焦",
     "toggle-sidebar": "切换侧边栏",
-    "dropping-not-allowed": "不允许移动笔记到此处。"
+    "dropping-not-allowed": "不允许移动笔记到此处。",
+    "shared-indicator-tooltip": "此笔记已公开分享",
+    "shared-indicator-tooltip-with-url": "此笔记已公开分享至：{{- url}}",
+    "clone-indicator-tooltip": "此笔记有 {{- count}} 个父级： {{- parents}}",
+    "clone-indicator-tooltip-single": "此笔记已克隆（1 个额外的父级：{{- parent}}）"
   },
   "title_bar_buttons": {
     "window-on-top": "保持此窗口置顶"
@@ -1597,7 +1606,11 @@
   "note_detail": {
     "could_not_find_typewidget": "找不到类型为 '{{type}}' 的 typeWidget",
     "printing": "正在打印…",
-    "printing_pdf": "正在导出为PDF…"
+    "printing_pdf": "正在导出为PDF…",
+    "print_report_title": "打印报告",
+    "print_report_collection_content_other": "集合中的 {{count}} 篇笔记无法打印，因为它们不受支持或受到保护。",
+    "print_report_collection_details_button": "查看详情",
+    "print_report_collection_details_ignored_notes": "忽略的笔记"
   },
   "note_title": {
     "placeholder": "请输入笔记标题...",
@@ -2183,7 +2196,14 @@
     "execute_sql_description": "这是一篇 SQL 笔记。点击即可执行 SQL 查询。",
     "shared_copy_to_clipboard": "复制链接到剪贴板",
     "shared_open_in_browser": "在浏览器中打开链接",
-    "shared_unshare": "取消共享"
+    "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": "更改正在保存。"
   },
   "status_bar": {
     "language_title": "更改内容语言",
@@ -2214,5 +2234,12 @@
   },
   "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,7 +21,10 @@
     },
     "bundle-error": {
       "title": "Benutzerdefiniertes Skript konnte nicht geladen werden",
-      "message": "Skript aus der Notiz \"{{title}}\" mit der ID \"{{id}}\", konnte nicht ausgeführt werden wegen:\n\n{{message}}"
+      "message": "Skript konnte nicht ausgeführt werden wegen:\n\n{{message}}"
+    },
+    "widget-list-error": {
+      "title": "Abruf der Liste von Widgets vom Server ist fehlgeschlagen"
     }
   },
   "add_link": {
@@ -278,7 +281,6 @@
     "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",
@@ -689,7 +691,11 @@
     "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"
+    "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"
   },
   "onclick_button": {
     "no_click_handler": "Das Schaltflächen-Widget „{{componentId}}“ hat keinen definierten Klick-Handler"
@@ -746,9 +752,16 @@
   },
   "note_icon": {
     "change_note_icon": "Notiz-Icon ändern",
-    "category": "Kategorie:",
     "search": "Suche:",
-    "reset-default": "Standard wiederherstellen"
+    "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."
   },
   "basic_properties": {
     "note_type": "Notiztyp",
@@ -808,7 +821,8 @@
   },
   "inherited_attribute_list": {
     "title": "Geerbte Attribute",
-    "no_inherited_attributes": "Keine geerbten Attribute."
+    "no_inherited_attributes": "Keine geerbten Attribute.",
+    "none": "Keine"
   },
   "note_info_widget": {
     "note_id": "Notiz-ID",
@@ -819,7 +833,9 @@
     "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"
+    "title": "Notizinfo",
+    "mime": "MIME Typ",
+    "show_similar_notes": "Zeige ähnliche Notizen"
   },
   "note_map": {
     "open_full": "Vollständig erweitern",
@@ -882,7 +898,8 @@
     "search_parameters": "Suchparameter",
     "unknown_search_option": "Unbekannte Suchoption {{searchOptionName}}",
     "search_note_saved": "Suchnotiz wurde in {{-notePathTitle}} gespeichert",
-    "actions_executed": "Aktionen wurden ausgeführt."
+    "actions_executed": "Aktionen wurden ausgeführt.",
+    "view_options": "Anzeigeoptionen:"
   },
   "similar_notes": {
     "title": "Ähnliche Notizen",
@@ -986,7 +1003,12 @@
   "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."
+    "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"
   },
   "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.",
@@ -1501,7 +1523,12 @@
   },
   "highlights_list_2": {
     "title": "Hervorhebungs-Liste",
-    "options": "Optionen"
+    "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."
   },
   "quick-search": {
     "placeholder": "Schnellsuche",
@@ -1533,10 +1560,21 @@
   "note_detail": {
     "could_not_find_typewidget": "Konnte typeWidget für Typ ‚{{type}}‘ nicht finden",
     "printing": "Druckvorgang läuft…",
-    "printing_pdf": "PDF-Export 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"
   },
   "note_title": {
-    "placeholder": "Titel der Notiz hier eingeben…"
+    "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"
   },
   "search_result": {
     "no_notes_found": "Es wurden keine Notizen mit den angegebenen Suchparametern gefunden.",
@@ -1565,7 +1603,8 @@
   },
   "toc": {
     "table_of_contents": "Inhaltsverzeichnis",
-    "options": "Optionen"
+    "options": "Optionen",
+    "no_headings": "Keine Überschriften."
   },
   "watched_file_update_status": {
     "file_last_modified": "Datei <code class=\"file-path\"></code> wurde zuletzt geändert am <span class=\"file-last-modified\"></span>.",
@@ -2104,5 +2143,10 @@
   },
   "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,7 +295,6 @@
     "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": {
@@ -765,9 +764,16 @@
   },
   "note_icon": {
     "change_note_icon": "Change note icon",
-    "category": "Category:",
     "search": "Search:",
-    "reset-default": "Reset to default icon"
+    "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."
   },
   "basic_properties": {
     "note_type": "Note type",
@@ -1613,7 +1619,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}}",
+    "role_and_size": "Role: {{role}}, size: {{size}}, MIME: {{- mimeType}}",
     "link_copied": "Attachment link copied to clipboard.",
     "unrecognized_role": "Unrecognized attachment role '{{role}}'."
   },
@@ -1762,7 +1768,11 @@
     "create-child-note": "Create child note",
     "unhoist": "Unhoist",
     "toggle-sidebar": "Toggle sidebar",
-    "dropping-not-allowed": "Dropping notes into this location is not allowed."
+    "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}}"
   },
   "title_bar_buttons": {
     "window-on-top": "Keep Window on Top"
@@ -2198,7 +2208,14 @@
     "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."
+    "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."
   },
   "status_bar": {
     "language_title": "Change content language",
@@ -2227,5 +2244,15 @@
     "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,7 +279,6 @@
     "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",
@@ -749,7 +748,6 @@
   },
   "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,6 +22,12 @@
     "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": {
@@ -279,7 +285,6 @@
     "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",
@@ -756,9 +761,12 @@
   },
   "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"
+    "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}}"
   },
   "basic_properties": {
     "note_type": "Type de note",
@@ -1542,7 +1550,8 @@
     "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"
+    "toggle-sidebar": "Basculer la barre latérale",
+    "dropping-not-allowed": "Lâcher des notes à cet endroit n'est pas autorisé"
   },
   "title_bar_buttons": {
     "window-on-top": "Épingler cette fenêtre au premier plan"
@@ -1550,10 +1559,19 @@
   "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..."
+    "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"
   },
   "note_title": {
-    "placeholder": "saisir le titre de la note ici..."
+    "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"
   },
   "search_result": {
     "no_notes_found": "Aucune note n'a été trouvée pour les paramètres de recherche donnés.",
@@ -1582,7 +1600,8 @@
   },
   "toc": {
     "table_of_contents": "Table des matières",
-    "options": "Options"
+    "options": "Options",
+    "no_headings": "Pas d'en-tête."
   },
   "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>.",
@@ -1683,7 +1702,8 @@
     "copy-link": "Copier le lien",
     "paste": "Coller",
     "paste-as-plain-text": "Coller comme texte brut",
-    "search_online": "Rechercher «{{term}}» avec {{searchEngine}}"
+    "search_online": "Rechercher «{{term}}» avec {{searchEngine}}",
+    "search_in_trilium": "Rechercher \"{{term}}\" dans Trilium"
   },
   "image_context_menu": {
     "copy_reference_to_clipboard": "Copier la référence dans le presse-papiers",
@@ -1992,7 +2012,8 @@
     "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"
+    "edit-column-title": "Cliquez pour modifier le titre de la colonne",
+    "column-already-exists": "Cette colonne existe déjà dans le tableau."
   },
   "presentation_view": {
     "edit-slide": "Modifier cette diapositive",
@@ -2076,7 +2097,8 @@
     "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_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."
   },
   "code_theme": {
     "title": "Apparence",
@@ -2109,6 +2131,10 @@
   },
   "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."
+    "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..."
   }
 }

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

@@ -1,5 +1,35 @@
 {
   "about": {
-    "title": "ट्रिलियम नोट्स के बारें में"
+    "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": "नोट"
   }
 }

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

@@ -16,13 +16,22 @@
     },
     "bundle-error": {
       "title": "Non si è riusciti a caricare uno script personalizzato",
-      "message": "Lo script della nota con ID \"{{id}}\", dal titolo \"{{title}}\" non è stato inizializzato a causa di:\n\n{{message}}"
+      "message": "Impossibile eseguire lo script 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",
@@ -893,7 +902,6 @@
     "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": {
@@ -1333,9 +1341,17 @@
   },
   "note_icon": {
     "change_note_icon": "Cambia icona nota",
-    "category": "Categoria:",
     "search": "Ricerca:",
-    "reset-default": "Ripristina l'icona predefinita"
+    "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."
   },
   "basic_properties": {
     "note_type": "Tipo di nota",
@@ -1793,7 +1809,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}}",
+    "role_and_size": "Ruolo: {{role}}, dimensione: {{size}}, MIME: {{- mimeType}}",
     "link_copied": "Link all'allegato copiato negli appunti.",
     "unrecognized_role": "Ruolo di allegato non riconosciuto '{{role}}'."
   },
@@ -1887,7 +1903,13 @@
   "note_detail": {
     "could_not_find_typewidget": "Impossibile trovare typeWidget per il tipo '{{type}}'",
     "printing": "Stampa in corso...",
-    "printing_pdf": "Esportazione in PDF 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"
   },
   "note_title": {
     "placeholder": "scrivi qui il titolo della nota...",
@@ -1897,7 +1919,8 @@
     "note_type_switcher_others": "Altro tipo di nota",
     "note_type_switcher_templates": "Modello",
     "note_type_switcher_collection": "Collezione",
-    "edited_notes": "Note modificate"
+    "edited_notes": "Note modificate in questo giorno",
+    "promoted_attributes": "Attributi promossi"
   },
   "search_result": {
     "no_notes_found": "Non sono state trovate note per i parametri di ricerca specificati.",

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

@@ -29,7 +29,7 @@
     "widget-render-error": {
       "title": "カスタム React ウィジェットのレンダリングに失敗しました"
     },
-    "widget-missing-parent": "カスタムウィジェットに必須の '{{property}}' プロパティが定義されていません。",
+    "widget-missing-parent": "カスタムウィジェットに必須の '{{property}}' プロパティが定義されていません。\n\nこのスクリプトを UI 要素なしで実行する場合は、代わりに '#run=frontendStartup' を使用してください。",
     "open-script-note": "スクリプトノートを開く",
     "scripting-error": "カスタムスクリプトエラー: {{title}}"
   },
@@ -152,16 +152,22 @@
   },
   "note_icon": {
     "change_note_icon": "ノートアイコンの変更",
-    "category": "カテゴリー:",
     "search": "検索:",
-    "reset-default": "アイコンをデフォルトに戻す"
+    "reset-default": "アイコンをデフォルトに戻す",
+    "search_placeholder_other": "{{count}} 個のパックから {{number}} 個のアイコンを検索",
+    "search_placeholder_filtered": "{{name}} で {{number}} 個のアイコンを検索",
+    "filter": "フィルター",
+    "filter-none": "すべてのアイコン",
+    "filter-default": "デフォルトアイコン",
+    "icon_tooltip": "{{name}}\nアイコンパック: {{iconPack}}",
+    "no_results": "アイコンが見つかりません。"
   },
   "basic_properties": {
     "note_type": "ノートタイプ",
     "editable": "編集可能",
     "basic_properties": "基本プロパティ",
     "language": "言語",
-    "configure_code_notes": "コードノートを設定しています..."
+    "configure_code_notes": "コードノートを設定..."
   },
   "i18n": {
     "title": "ローカライゼーション",
@@ -648,7 +654,6 @@
     "revision_deleted": "ノートの変更履歴は削除されました。",
     "settings": "ノートの変更履歴の設定",
     "file_size": "ファイルサイズ:",
-    "preview": "プレビュー:",
     "preview_not_available": "このノートタイプではプレビューは利用できません。",
     "diff_on": "差分を表示",
     "diff_off": "内容を表示",
@@ -1239,7 +1244,11 @@
     "saved-search-note-refreshed": "保存した検索ノートが更新されました。",
     "refresh-saved-search-results": "保存した検索結果を更新",
     "toggle-sidebar": "サイドバーを切り替え",
-    "dropping-not-allowed": "この場所にノートをドロップすることはできません。"
+    "dropping-not-allowed": "この場所にノートをドロップすることはできません。",
+    "clone-indicator-tooltip": "このノートには {{- count}} 個の親があります: {{- parents}}",
+    "clone-indicator-tooltip-single": "このノートは複製されています (親が 1 件追加: {{- parent}})",
+    "shared-indicator-tooltip": "このノートは公開されています",
+    "shared-indicator-tooltip-with-url": "このノートは以下で公開されています: {{- url}}"
   },
   "bulk_actions": {
     "bulk_actions": "一括操作",
@@ -1930,7 +1939,11 @@
   "note_detail": {
     "could_not_find_typewidget": "タイプ {{type}} の typeWidget が見つかりませんでした",
     "printing": "印刷中です...",
-    "printing_pdf": "PDF へのエクスポート中です..."
+    "printing_pdf": "PDF へのエクスポート中です...",
+    "print_report_title": "レポートを印刷",
+    "print_report_collection_content_other": "コレクション内の {{count}} 件のノートは、サポートされていないか保護されているため、印刷できませんでした。",
+    "print_report_collection_details_button": "詳細を見る",
+    "print_report_collection_details_ignored_notes": "無視されたノート"
   },
   "watched_file_update_status": {
     "ignore_this_change": "この変更を無視する",
@@ -2126,7 +2139,7 @@
     "will_be_deleted_in": "この添付ファイルは {{time}} 後に自動的に削除されます",
     "will_be_deleted_soon": "この添付ファイルはすぐに自動的に削除されます",
     "deletion_reason": "、添付ファイルがノートのコンテンツにリンクされていないためです。削除されないようにするには、添付ファイルのリンクをコンテンツに再度追加するか、添付ファイルをノートに変換してください。",
-    "role_and_size": "ロール: {{role}},サイズ: {{size}}",
+    "role_and_size": "ロール: {{role}},サイズ: {{size}}, MIME: {{- mimeType}}",
     "link_copied": "添付ファイルのリンクをクリップボードにコピーしました。",
     "unrecognized_role": "添付ファイルのロール「{{role}}」は認識されません。"
   },
@@ -2183,7 +2196,14 @@
     "execute_sql_description": "このノートは SQL ノートです。クリックすると SQL クエリが実行されます。",
     "shared_copy_to_clipboard": "リンクをクリップボードにコピー",
     "shared_open_in_browser": "ブラウザでリンクを開く",
-    "shared_unshare": "共有を削除"
+    "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": "ノートの保存中にエラーが発生しました。可能であれば、ノートの内容を別の場所にコピーして、アプリケーションを再読み込みしてください。"
   },
   "status_bar": {
     "language_title": "コンテンツの言語を変更",
@@ -2214,5 +2234,12 @@
   },
   "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 +1,22 @@
-{}
+{
+  "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,7 +959,6 @@
     "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": {
@@ -1286,7 +1285,6 @@
   },
   "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,7 +274,6 @@
     "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": {
@@ -724,7 +723,6 @@
   },
   "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,7 +439,6 @@
     "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",
@@ -1008,7 +1007,6 @@
   },
   "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,7 +1103,6 @@
     "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ă.",
@@ -1483,7 +1482,6 @@
   },
   "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

@@ -29,7 +29,7 @@
     "widget-render-error": {
       "title": "Не удалось отобразить пользовательский React виджет"
     },
-    "widget-missing-parent": "В пользовательском виджете не определено обязательное свойство '{{property}}'.",
+    "widget-missing-parent": "В пользовательском виджете не определено обязательное свойство '{{property}}'.\n\nЕсли этот скрипт предназначен для запуска без элемента пользовательского интерфейса, используйте '#run=frontendStartup'.",
     "open-script-note": "Открыть заметку со скриптом",
     "scripting-error": "Ошибка пользовательского скрипта: {{title}}"
   },
@@ -387,7 +387,6 @@
     "revision_deleted": "Версия заметки была удалена.",
     "download_button": "Скачать",
     "file_size": "Размер файла:",
-    "preview": "Предпросмотр:",
     "preview_not_available": "Предпосмотр недоступен для заметки этого типа.",
     "mime": "MIME: ",
     "settings": "Настройка версионирования заметок",
@@ -1010,10 +1009,18 @@
     "backlink_many": "{{count}} обратных ссылок"
   },
   "note_icon": {
-    "category": "Категория:",
     "search": "Поиск:",
     "change_note_icon": "Изменить иконку заметки",
-    "reset-default": "Сбросить к значку по умолчанию"
+    "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}} наборов"
   },
   "basic_properties": {
     "editable": "Изменяемое",
@@ -2026,7 +2033,7 @@
     "lost-websocket-connection-message": "Проверьте конфигурацию обратного прокси (например, nginx или Apache), чтобы убедиться, что соединения WebSocket должным образом разрешены и не заблокированы."
   },
   "attachment_detail_2": {
-    "role_and_size": "Роль: {{role}}, Размер: {{size}}",
+    "role_and_size": "Роль: {{role}}, размер: {{size}}, MIME: {{- mimeType}}",
     "unrecognized_role": "Нераспознанная роль вложения '{{role}}'.",
     "link_copied": "Ссылка на вложение скопирована в буфер обмена.",
     "will_be_deleted_soon": "Это вложение скоро будет автоматически удалено",
@@ -2112,7 +2119,13 @@
   "note_detail": {
     "could_not_find_typewidget": "Не удалось найти typeWidget для типа '{{type}}'",
     "printing_pdf": "Выполняется экспорт PDF...",
-    "printing": "Выполняется печать..."
+    "printing": "Выполняется печать...",
+    "print_report_title": "Отчет по печати",
+    "print_report_collection_content_one": "{{count}} заметка в коллекции не удалось распечатать, поскольку она не поддерживается или защищена.",
+    "print_report_collection_content_few": "{{count}} заметки в коллекции не удалось распечатать, поскольку они не поддерживаются или защищены.",
+    "print_report_collection_content_many": "{{count}} заметок в коллекции не удалось распечатать, поскольку они не поддерживаются или защищены.",
+    "print_report_collection_details_button": "Подробнее",
+    "print_report_collection_details_ignored_notes": "Пропущенные заметки"
   },
   "book": {
     "no_children_help": "В этой коллекции нет дочерних заметок, поэтому отображать нечего. Подробности см. в <a href=\"https://triliumnext.github.io/Docs/Wiki/book-note.html\">wiki</a>.",

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

@@ -271,7 +271,6 @@
     "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": "來自 ID 為 \"{{id}}\"、標題為 \"{{title}}\" 的筆記的腳本因以下原因無法執行：\n\n{{message}}"
+      "message": "腳本因以下原因無法執行：\n\n{{message}}"
     },
     "widget-list-error": {
       "title": "無法從伺服器取得元件清單"
@@ -29,8 +29,9 @@
     "widget-render-error": {
       "title": "無法渲染自訂 React 元件"
     },
-    "widget-missing-parent": "自訂元件未定義強制性的 \"{{property}}\" 屬性。",
-    "open-script-note": "打開腳本筆記"
+    "widget-missing-parent": "自訂元件未定義強制性的 \"{{property}}\" 屬性。\n\n若此腳本需在無 UI 的情況下執行，請改用 \"#run=frontendStartup\"。",
+    "open-script-note": "打開腳本筆記",
+    "scripting-error": "自訂腳本錯誤：{{title}}"
   },
   "add_link": {
     "add_link": "新增連結",
@@ -287,7 +288,6 @@
     "download_button": "下載",
     "mime": "MIME類型： ",
     "file_size": "檔案大小：",
-    "preview": "預覽：",
     "preview_not_available": "無法預覽此類型的筆記。",
     "restore_button": "還原",
     "delete_button": "刪除",
@@ -761,9 +761,16 @@
   },
   "note_icon": {
     "change_note_icon": "更改筆記圖標",
-    "category": "類別：",
     "search": "搜尋：",
-    "reset-default": "重置為預設圖標"
+    "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": "找不到圖示。"
   },
   "basic_properties": {
     "note_type": "筆記類型",
@@ -1405,7 +1412,7 @@
     "will_be_deleted_in": "此附件將在 {{time}} 後自動刪除",
     "will_be_deleted_soon": "該附件即將被自動刪除",
     "deletion_reason": "，因為該附件未連結在筆記的內容中。為防止被刪除，請將附件連結重新新增至內容中或將附件轉換為筆記。",
-    "role_and_size": "角色：{{role}}，大小：{{size}}",
+    "role_and_size": "角色：{{role}}，大小：{{size}}，MIME：{{- mimeType}}",
     "link_copied": "已複製附件連結到剪貼簿。",
     "unrecognized_role": "無法識別的附件角色 '{{role}}'。"
   },
@@ -1549,7 +1556,11 @@
     "create-child-note": "建立子筆記",
     "unhoist": "取消聚焦",
     "toggle-sidebar": "切換側邊欄",
-    "dropping-not-allowed": "不允許移動筆記至此處。"
+    "dropping-not-allowed": "不允許移動筆記至此處。",
+    "clone-indicator-tooltip": "此筆記有 {{- count}} 個父級：{{- parents}}",
+    "clone-indicator-tooltip-single": "此筆記已克隆（新增 1 個父級：{{- parent}}）",
+    "shared-indicator-tooltip": "此筆記已公開分享",
+    "shared-indicator-tooltip-with-url": "此筆記已公開分享至：{{- url}}"
   },
   "title_bar_buttons": {
     "window-on-top": "保持此視窗置頂"
@@ -1557,7 +1568,12 @@
   "note_detail": {
     "could_not_find_typewidget": "找不到類型為 '{{type}}' 的 typeWidget",
     "printing": "正在列印…",
-    "printing_pdf": "正在匯出為 PDF…"
+    "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": "忽略的筆記"
   },
   "note_title": {
     "placeholder": "請輸入筆記標題...",
@@ -1567,7 +1583,8 @@
     "note_type_switcher_others": "其他筆記類型",
     "note_type_switcher_templates": "模板",
     "note_type_switcher_collection": "集合",
-    "edited_notes": "編輯過的筆記"
+    "edited_notes": "今天編輯過的筆記",
+    "promoted_attributes": "升級屬性"
   },
   "search_result": {
     "no_notes_found": "沒有找到符合搜尋條件的筆記。",
@@ -2183,7 +2200,14 @@
     "read_only_temporarily_disabled_description": "此筆記目前可編輯，但通常為唯讀狀態。當您切換至其他筆記時，本筆記將立即恢復為唯讀模式。\n\n點擊此處重新啟用唯讀模式。",
     "clipped_note_description": "本筆記原始來源為 {{url}}。\n\n點擊此處前往原網頁。",
     "execute_script_description": "此筆記為腳本筆記。點擊以執行腳本。",
-    "execute_sql_description": "此筆記為 SQL 筆記。點擊以執行 SQL 查詢。"
+    "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": "在儲存筆記時發生錯誤。如果可以，請嘗試將筆記內容複製至他處並重新載入應用程式。"
   },
   "breadcrumb": {
     "hoisted_badge": "聚焦",
@@ -2220,5 +2244,15 @@
   },
   "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,7 +321,6 @@
     "download_button": "Завантажити",
     "mime": "МІМЕ: ",
     "file_size": "Розмір файлу:",
-    "preview": "Попередній перегляд:",
     "preview_not_available": "Попередній перегляд недоступний для цього типу нотатки.",
     "diff_on": "Показати різницю",
     "diff_off": "Показати вміст",
@@ -849,7 +848,6 @@
   },
   "note_icon": {
     "change_note_icon": "Змінити значок нотатки",
-    "category": "Категорія:",
     "search": "Пошук:",
     "reset-default": "Скинути значок до стандартного значення"
   },

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

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

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

@@ -0,0 +1,121 @@
+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,3 +1,5 @@
+import { IconRegistry } from "@triliumnext/commons";
+
 import appContext, { AppContext } from "./components/app_context";
 import type FNote from "./entities/fnote";
 import type { PrintReport } from "./print";
@@ -46,6 +48,7 @@ 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-tn-toc"
+        icon="bx bx-spreadsheet bx-rotate-180"
         onClick={() => {
             if (noteContext?.viewScope && noteContext.noteId) {
                 noteContext.viewScope.tocTemporarilyHidden = false;

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

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

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: 10px;
+    padding-block: 10px;
 }
 
 .note-list-widget.full-height,

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

@@ -11,7 +11,8 @@ 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 from "./view_mode_storage";
+import ViewModeStorage, { type ViewModeStorageType } from "./view_mode_storage";
+
 interface NoteListProps {
     note: FNote | null | undefined;
     notePath: string | null | undefined;
@@ -215,7 +216,7 @@ export function useNoteIds(note: FNote | null | undefined, viewType: ViewTypeOpt
     return noteIds;
 }
 
-export function useViewModeConfig<T extends object>(note: FNote | null | undefined, viewType: ViewTypeOptions | undefined) {
+export function useViewModeConfig<T extends object>(note: FNote | null | undefined, viewType: ViewModeStorageType | undefined) {
     const [ viewConfig, setViewConfig ] = useState<{
         config: T | undefined;
         storeFn: (data: T) => void;

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

@@ -1,27 +1,29 @@
-import { DateSelectArg, EventChangeArg, EventMountArg, EventSourceFuncArg, LocaleInput, PluginDef } from "@fullcalendar/core/index.js";
-import { ViewModeProps } from "../interface";
-import Calendar from "./calendar";
-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 { DateSelectArg, EventChangeArg, EventMountArg, EventSourceFuncArg, LocaleInput, PluginDef } from "@fullcalendar/core/index.js";
 import { DateClickArg } from "@fullcalendar/interaction";
-import FNote from "../../../entities/fnote";
-import Button, { ButtonGroup } from "../../react/Button";
-import ActionButton from "../../react/ActionButton";
+import { DISPLAYABLE_LOCALE_IDS } from "@triliumnext/commons";
 import { RefObject } from "preact";
-import TouchBar, { TouchBarButton, TouchBarLabel, TouchBarSegmentedControl, TouchBarSpacer } from "../../react/TouchBar";
-import { openCalendarContextMenu } from "./context_menu";
+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 { parseStartEndDateFromEvent, parseStartEndTimeFromEvent } from "./utils";
 
 interface CalendarViewData {
 
@@ -59,7 +61,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);
 
@@ -75,6 +77,7 @@ 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,
@@ -102,9 +105,9 @@ export default function CalendarView({ note, noteIds }: ViewModeProps<CalendarVi
     const eventBuilder = useMemo(() => {
         if (!isCalendarRoot) {
             return async () => await buildEvents(noteIds);
-        } else {
-            return async (e: EventSourceFuncArg) => await buildEventsForCalendar(note, e);
-        }
+        } 
+        return async (e: EventSourceFuncArg) => await buildEventsForCalendar(note, e);
+        
     }, [isCalendarRoot, noteIds]);
 
     const plugins = usePlugins(isEditable, isCalendarRoot);
@@ -178,7 +181,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) {
@@ -293,7 +296,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 .bx {
+.geo-map-container .leaflet-div-icon .tn-icon {
   position: absolute;
   top: 3px;
   inset-inline-start: 2px;

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

@@ -142,4 +142,10 @@
     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,7 +7,6 @@ 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";
@@ -103,16 +102,7 @@ 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
@@ -123,7 +113,7 @@ function GridNoteCard({ note, parentNote, highlightedTokens }: { note: FNote, pa
         >
             <h5 className="note-book-header">
                 <Icon className="note-icon" icon={note.getIcon()} />
-                <span ref={titleRef} className="note-book-title">{noteTitle}</span>
+                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={parentNote.type === "search"} highlightedTokens={highlightedTokens} />
                 <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="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>`);
+        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>`);
     });
 
     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="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="tn-icon bx bx-note"></span>Other note</span></a>.</p></div>`);
     });
 });

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

@@ -4,14 +4,16 @@ 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: ViewTypeOptions) {
+    constructor(note: FNote, viewType: ViewModeStorageType) {
         this.note = note;
-        this.attachmentName = viewType + ".json";
+        this.attachmentName = `${viewType}.json`;
     }
 
     async store(data: T) {

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

@@ -2,6 +2,13 @@
     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,10 +1,11 @@
-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 NoteContext from "../../components/note_context.js";
+import type BasicWidget from "../basic_widget.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import FlexContainer from "./flex_container.js";
 
 interface SplitNoteWidget extends BasicWidget {
     hasBeenAlreadyShown?: boolean;
@@ -74,7 +75,7 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
 
 
         const subContexts = activeContext.getSubContexts();
-        let noteContext: NoteContext | undefined = undefined;
+        let noteContext: NoteContext | undefined;
         if (isMobile() && subContexts.length > 1) {
             noteContext = subContexts.find(s => s.ntxId !== ntxId);
         }
@@ -201,6 +202,11 @@ 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
@@ -239,16 +245,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,6 +88,7 @@ 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,24 +40,68 @@ 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,26 +1,31 @@
-import type { RevisionPojo, RevisionItem } from "@triliumnext/commons";
+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 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 Button from "../react/Button";
-import FormToggle from "../react/FormToggle";
-import Modal from "../react/Modal";
-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 Button from "../react/Button";
+import FormList, { FormListItem } from "../react/FormList";
+import FormToggle from "../react/FormToggle";
 import { useTriliumEvent } from "../react/hooks";
-import { diffWords } from "diff";
-import "./revisions.css";
+import Modal from "../react/Modal";
+import { RawHtmlBlock } from "../react/RawHtml";
+import PdfViewer from "../type_widgets/file/PdfViewer";
 
 export default function RevisionsDialog() {
     const [ note, setNote ] = useState<FNote>();
@@ -47,7 +52,7 @@ export default function RevisionsDialog() {
             setRevisions(undefined);
             setNoteContent(undefined);
         }
-    }, [ note?.noteId, refreshCounter ]);
+    }, [ note, refreshCounter ]);
 
     if (revisions?.length && !currentRevision) {
         setCurrentRevision(revisions[0]);
@@ -102,38 +107,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 }) {
@@ -141,6 +146,7 @@ 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}
                 >
@@ -202,14 +208,17 @@ 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="revision-content use-tn-links selectable-text" style={{ overflow: "auto", wordBreak: "break-word" }}>
+            <div
+                className={clsx("revision-content use-tn-links selectable-text", `type-${revisionItem?.type}`)}
+                style={{ overflow: "auto", wordBreak: "break-word" }}
+            >
                 <RevisionContent noteContent={noteContent} revisionItem={revisionItem} fullRevision={fullRevision} showDiff={showDiff}/>
             </div>
         </>
@@ -230,16 +239,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 || !content) {
+    if (!revisionItem || !fullRevision) {
         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":
@@ -256,28 +265,11 @@ 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 <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>;
+            return <FilePreview fullRevision={fullRevision} revisionItem={revisionItem} />;
         case "canvas":
         case "mindMap":
         case "mermaid": {
@@ -287,7 +279,7 @@ function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }:
                 style={IMAGE_STYLE} />;
         }
         default:
-            return <>{t("revisions.preview_not_available")}</>
+            return <>{t("revisions.preview_not_available")}</>;
     }
 }
 
@@ -298,7 +290,7 @@ function RevisionContentText({ content }: { content: string | Buffer<ArrayBuffer
             renderMathInElement(contentRef.current, { trust: true });
         }
     }, [content]);
-    return <div ref={contentRef} className="ck-content" dangerouslySetInnerHTML={{ __html: content as string }}></div>
+    return <RawHtmlBlock containerRef={contentRef} className="ck-content" html={content as string} />;
 }
 
 function RevisionContentDiff({ noteContent, itemContent, itemType }: {
@@ -330,9 +322,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) {
@@ -340,7 +332,7 @@ function RevisionContentDiff({ noteContent, itemContent, itemType }: {
         }
     }, [noteContent, itemContent, itemType]);
 
-    return <div ref={contentRef} className="ck-content" style={{ whiteSpace: "pre-wrap" }}></div>;
+    return <div ref={contentRef} className="ck-content" style={{ whiteSpace: "pre-wrap" }} />;
 }
 
 function RevisionFooter({ note }: { note?: FNote }) {
@@ -348,7 +340,7 @@ function RevisionFooter({ note }: { note?: FNote }) {
         return <></>;
     }
 
-    let revisionsNumberLimit: number | string = parseInt(note?.getLabelValue("versioningLimit") ?? "");
+    let revisionsNumberLimit: number | string = parseInt(note?.getLabelValue("versioningLimit") ?? "", 10);
     if (!Number.isInteger(revisionsNumberLimit)) {
         revisionsNumberLimit = options.getInt("revisionSnapshotNumberLimit") ?? 0;
     }
@@ -370,10 +362,67 @@ 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;
 
-        .bx {
+        .tn-icon {
             margin-inline: 6px;
         }
 
@@ -55,7 +55,7 @@
     .icon-action {
         font-size: .9rem !important;
 
-        .bxs-chevron-right {
+        &.breadcrumb-separator {
             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"
+            buttonClassName="icon-action breadcrumb-separator"
             hideToggleArrow
             dropdownContainerClassName="tn-dropdown-menu-scrollable breadcrumb-child-list"
             dropdownOptions={{  popperConfig: { strategy: "fixed", placement: "top" } }}

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

@@ -10,7 +10,6 @@
     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,6 +2,11 @@
     contain: none;
 }
 
+@keyframes fadeOut {
+    from { opacity: var(--default-opacity); }
+    to { opacity: 0; }
+}
+
 .note-badges {
     display: flex;
     gap: 5px;
@@ -16,6 +21,23 @@
         &.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,17 +1,20 @@
 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 { useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
+import { useGetContextData, 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 />
@@ -105,3 +108,42 @@ 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,12 +4,21 @@ 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: 0.75em 15px;
+            padding-block: 0.75em;
         }
 
         .edited-notes {
@@ -40,5 +49,11 @@ 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 */
-                        > .bx {
+                        > .tn-icon {
                             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 { useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 
 import { CommandNames } from "../../components/app_context";
 import NoteContext from "../../components/note_context";
@@ -338,15 +338,19 @@ interface AttributesProps extends StatusBarContext {
 function AttributesButton({ note, attributesShown, setAttributesShown }: AttributesProps) {
     const [ count, setCount ] = useState(note.attributes.length);
 
+    const getAttributeCount = useCallback((note: FNote) => {
+        return note.getAttributes().filter(a => !a.isAutoLink).length;
+    }, []);
+
     // React to note changes.
     useEffect(() => {
-        setCount(note.attributes.length);
-    }, [ note ]);
+        setCount(getAttributeCount(note));
+    }, [ note, getAttributeCount ]);
 
     // React to changes in count.
     useTriliumEvent("entitiesReloaded", (({loadResults}) => {
         if (loadResults.getAttributeRows().some(attr => attributes.isAffecting(attr, note))) {
-            setCount(note.attributes.length);
+            setCount(getAttributeCount(note));
         }
     }));
 

apps/client/src/widgets/note_icon.css

@@ -32,17 +32,14 @@ div.note-icon-widget {
 }
 
 .note-icon-widget .filter-row {
-    padding-top: 10px;
-    padding-bottom: 10px;
-    padding-inline-end: 20px;
+    padding: 10px;
     display: flex;
-    align-items: baseline;
+    align-items: center;
+    gap: 1em;
 }
 
 .note-icon-widget .filter-row span {
     display: block;
-    padding-inline-start: 15px;
-    padding-inline-end: 15px;
     font-weight: bold;
 }
 
@@ -75,6 +72,14 @@ 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);
@@ -111,4 +116,4 @@ body.experimental-feature-new-layout {
             transition: background 200ms ease-out;
         }
     }
-}
+}

apps/client/src/widgets/note_icon.tsx

@@ -1,37 +1,36 @@
-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 { 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 { CSSProperties, RefObject } from "preact";
+import { useEffect, useMemo, useRef, useState } from "preact/hooks";
+import { CellComponentProps, Grid } from "react-window";
+
 import FNote from "../entities/fnote";
 import attributes from "../services/attributes";
-import Button from "./react/Button";
+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";
 
 interface IconToCountCache {
     iconClassToCountMap: Record<string, number>;
 }
 
-interface IconData {
-    iconToCount: Record<string, number>;
-    categories: Category[];
-    icons: Icon[];
-}
-
-let fullIconData: {
-    categories: Category[];
-    icons: Icon[];
-};
 let iconToCountCache!: Promise<IconToCountCache> | null;
 
+type IconWithName = (IconRegistry["sources"][number]["icons"][number] & { iconPack: string });
+
 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());
@@ -41,130 +40,219 @@ export default function NoteIcon() {
         <Dropdown
             className="note-icon-widget"
             title={t("note_icon.change_note_icon")}
-            dropdownContainerStyle={{ width: "610px" }}
+            dropdownRef={dropdownRef}
+            dropdownContainerStyle={{ width: "620px" }}
+            dropdownOptions={{ autoClose: "outside" }}
             buttonClassName={`note-icon tn-focusable-button ${icon ?? "bx bx-empty"}`}
             hideToggleArrow
             disabled={viewScope?.viewMode !== "default"}
         >
-            { note && <NoteIconList note={note} /> }
+            { note && <NoteIconList note={note} dropdownRef={dropdownRef} /> }
         </Dropdown>
-    )
+    );
 }
 
-function NoteIconList({ note }: { note: FNote }) {
+function NoteIconList({ note, dropdownRef }: {
+    note: FNote,
+    dropdownRef: RefObject<BootstrapDropdown>;
+}) {
     const searchBoxRef = useRef<HTMLInputElement>(null);
+    const iconListRef = useRef<HTMLDivElement>(null);
     const [ search, setSearch ] = useState<string>();
-    const [ categoryId, setCategoryId ] = useState<string>("0");
-    const [ iconData, setIconData ] = useState<IconData>();
+    const [ filterByPrefix, setFilterByPrefix ] = useState<string | null>(null);
+    useStaticTooltip(iconListRef, {
+        selector: "span",
+        customClass: "pre-wrap-text",
+        animation: false,
+        title() { return this.getAttribute("title") || ""; },
+    });
 
-    useEffect(() => {
-        async function loadIcons() {
-            if (!fullIconData) {
-                fullIconData = (await import("./icon_list.js")).default;
-            }
-
-            // Filter by text and/or category.
-            let icons: Icon[] = fullIconData.icons;
-            const processedSearch = search?.trim()?.toLowerCase();
-            if (processedSearch || categoryId) {
-                icons = icons.filter((icon) => {
-                    if (categoryId !== "0" && String(icon.category_id) !== categoryId) {
-                        return false;
-                    }
-
-                    if (processedSearch) {
-                        if (!icon.name.includes(processedSearch) &&
-                            !icon.term?.find((t) => t.includes(processedSearch))) {
-                            return false;
-                        }
-                    }
-
-                    return true;
-                });
-            }
-
-            // Sort by count.
-            const iconToCount = await getIconToCountMap();
-            if (iconToCount) {
-                icons.sort((a, b) => {
-                    const countA = iconToCount[a.className ?? ""] || 0;
-                    const countB = iconToCount[b.className ?? ""] || 0;
-
-                    return countB - countA;
-                });
-            }
-
-            setIconData({
-                iconToCount,
-                icons,
-                categories: fullIconData.categories
-            })
-        }
-
-        loadIcons();
-    }, [ search, categoryId ]);
+    const allIcons = useAllIcons();
+    const filteredIcons = useFilteredIcons(allIcons, search, filterByPrefix);
 
     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"
+                    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
                 />
-            </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
+                        <ActionButton
+                            icon="bx bx-reset"
                             text={t("note_icon.reset-default")}
                             onClick={() => {
-                                if (!note) {
-                                    return;
-                                }
+                                if (!note) return;
                                 for (const label of getIconLabels(note)) {
                                     attributes.removeAttributeById(note.noteId, label.attributeId);
                                 }
+                                dropdownRef?.current?.hide();
                             }}
                         />
                     </div>
                 )}
 
-                {(iconData?.icons ?? []).map(({className, name}) => (
-                    <span class={`bx ${className}`} title={name} />
-                ))}
+                {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[]>();
+
+    useEffect(() => {
+        getIconToCountMap().then((iconsToCount) => {
+            const allIcons = [
+                ...glob.iconRegistry.sources.flatMap(s => s.icons.map((i) => ({
+                    ...i,
+                    iconPack: s.name,
+                })))
+            ];
+
+            // Sort by count.
+            if (iconsToCount) {
+                allIcons.sort((a, b) => {
+                    const countA = iconsToCount[a.id ?? ""] || 0;
+                    const countB = iconsToCount[b.id ?? ""] || 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;
+            });
+        }
+        return icons;
+    }, [ allIcons, search, filterByPrefix ]);
+    return filteredIcons;
+}
+
 async function getIconToCountMap() {
     if (!iconToCountCache) {
         iconToCountCache = server.get<IconToCountCache>("other/icon-usage");
@@ -180,5 +268,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;
 
-                .bx {
+                .tn-icon {
                     opacity: 1;
                     margin: 0;
                 }

apps/client/src/widgets/note_tree.ts

@@ -1,38 +1,39 @@
-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>
@@ -242,7 +243,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     e.preventDefault();
 
                     appContext.tabManager.openTabWithNoteWithHoisting(notePath, {
-                        activate: e.shiftKey ? true : false
+                        activate: !!e.shiftKey
                     });
                 }
             }
@@ -402,7 +403,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     } else if (ctrlKey) {
                         const notePath = treeService.getNotePath(node);
                         appContext.tabManager.openTabWithNoteWithHoisting(notePath, {
-                            activate: event.shiftKey ? true : false
+                            activate: !!event.shiftKey
                         });
                     } else if (event.altKey) {
                         node.setSelected(!node.isSelected());
@@ -499,9 +500,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 (
@@ -597,7 +598,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             clones: {
                 highlightActiveClones: true
             },
-            enhanceTitle: async function (
+            async enhanceTitle (
                 event: Event,
                 data: {
                     node: Fancytree.FancytreeNode;
@@ -623,11 +624,12 @@ 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 enter-workspace-button bx bx-door-open" title="${t("note_tree.hoist-this-note-workspace")}"></span>`).on(
+                    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(
                         "click",
                         cancelClickPropagation
                     );
@@ -636,7 +638,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 }
 
                 if (note.type === "search") {
-                    const $refreshSearchButton = $(`<span class="tree-item-button refresh-search-button bx bx-refresh" title="${t("note_tree.refresh-saved-search-results")}"></span>`).on(
+                    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(
                         "click",
                         cancelClickPropagation
                     );
@@ -650,7 +652,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     && !note.isLaunchBarConfig()
                     && !note.noteId.startsWith("_help")
                 ) {
-                    const $createChildNoteButton = $(`<span class="tree-item-button add-note-button bx bx-plus" title="${t("note_tree.create-child-note")}"></span>`).on(
+                    const $createChildNoteButton = $(`<span class="tree-item-button tn-icon add-note-button bx bx-plus" title="${t("note_tree.create-child-note")}"></span>`).on(
                         "click",
                         cancelClickPropagation
                     );
@@ -659,10 +661,38 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 }
 
                 if (isHoistedNote) {
-                    const $unhoistButton = $(`<span class="tree-item-button unhoist-button bx bx-door-open" title="${t("note_tree.unhoist")}"></span>`).on("click", cancelClickPropagation);
+                    const $unhoistButton = $(`<span class="tree-item-button tn-icon 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) => {
@@ -1281,7 +1311,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;
-        let parentsOfAddedNodes: Fancytree.FancytreeNode[] = [];
+        const parentsOfAddedNodes: Fancytree.FancytreeNode[] = [];
 
         for (const branchRow of branchRows) {
             if (branchRow.noteId) {
@@ -1452,10 +1482,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;
@@ -1594,7 +1624,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         // Trigger the event with the selected branch IDs
         appContext.triggerEvent("editBranchPrefix", {
             selectedOrActiveBranchIds: branchIds,
-            node: node
+            node
         });
     }
 
@@ -1779,12 +1809,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}`);
         }
     }
 
@@ -1829,7 +1859,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,7 +4,8 @@
  */
 
 import { NoteType } from "@triliumnext/commons";
-import { VNode, type JSX } from "preact";
+import { type JSX, VNode } from "preact";
+
 import { TypeWidgetProps } from "./type_widgets/type_widget";
 
 /**
@@ -13,7 +14,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);
+export type TypeWidget = ((props: TypeWidgetProps) => VNode | JSX.Element | undefined);
 type NoteTypeView = () => (Promise<{ default: TypeWidget } | TypeWidget> | TypeWidget);
 
 interface NoteTypeMapping {

apps/client/src/widgets/note_wrapper.ts

@@ -64,7 +64,8 @@ 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(["bgfx", "options"], note.isOptions());
+        this.$widget.toggleClass("options", note.isOptions());
+        this.$widget.toggleClass("bgfx", this.#hasBackgroundEffects(note));
         this.$widget.toggleClass("protected", note.isProtected);
 
         const noteLanguage = note?.getLabelValue("language");
@@ -88,6 +89,22 @@ 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 @@
         }
     }
 
-    .bx {
+    .tn-icon {
         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.bx {
+    span.tn-icon {
         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)}
+            class={clsx(icon ?? "bx bx-empty", className, "tn-icon")}
             {...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 from "../../components/note_context";
+import NoteContext, { NoteContextDataMap } 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 from "../../services/spaced_update";
+import SpacedUpdate, { type StateCallback } 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,22 +63,29 @@ export function useTriliumEvents<T extends EventNames>(eventNames: T[], handler:
     useDebugValue(() => eventNames.join(", "));
 }
 
-export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000) {
+export function useSpacedUpdate(callback: () => void | Promise<void>, interval = 1000, stateCallback?: StateCallback) {
     const callbackRef = useRef(callback);
+    const stateCallbackRef = useRef(stateCallback);
     const spacedUpdateRef = useRef<SpacedUpdate>(new SpacedUpdate(
         () => callbackRef.current(),
-        interval
+        interval,
+        (state) => stateCallbackRef.current?.(state)
     ));
 
     // Update callback ref when it changes
     useEffect(() => {
         callbackRef.current = callback;
-    }, [callback]);
+    }, [ callback ]);
+
+    // Update state callback when it changes.
+    useEffect(() => {
+        stateCallbackRef.current = stateCallback;
+    }, [ stateCallback ]);
 
     // Update interval if it changes
     useEffect(() => {
         spacedUpdateRef.current?.setUpdateInterval(interval);
-    }, [interval]);
+    }, [ interval ]);
 
     return spacedUpdateRef.current;
 }
@@ -121,7 +128,12 @@ export function useEditorSpacedUpdate({ note, noteType, noteContext, getData, on
             dataSaved?.(data);
         };
     }, [ note, getData, dataSaved, noteType, parentComponent ]);
-    const spacedUpdate = useSpacedUpdate(callback);
+    const stateCallback = useCallback<StateCallback>((state) => {
+        noteContext?.setContextData("saveState", {
+            state
+        });
+    }, [ noteContext ]);
+    const spacedUpdate = useSpacedUpdate(callback, updateInterval, stateCallback);
 
     // React to note/blob changes.
     useEffect(() => {
@@ -158,6 +170,73 @@ 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) : () => {},
@@ -634,7 +713,8 @@ export function useLegacyWidget<T extends BasicWidget>(widgetFactory: () => T, {
     const ref = useRef<HTMLDivElement>(null);
     const parentComponent = useContext(ParentComponent);
 
-    // Render the widget once.
+    // Render the widget once - note that noteContext is intentionally NOT a dependency
+    // to prevent creating new widget instances on every note switch.
     const [ widget, renderedWidget ] = useMemo(() => {
         const widget = widgetFactory();
 
@@ -642,14 +722,21 @@ 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 ];
-    }, [ noteContext, parentComponent ]); // eslint-disable-line react-hooks/exhaustive-deps
-    // widgetFactory() is intentionally left out
+    }, [ 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 ]);
 
     // Attach the widget to the parent.
     useEffect(() => {
@@ -660,10 +747,17 @@ export function useLegacyWidget<T extends BasicWidget>(widgetFactory: () => T, {
         }
     }, [ renderedWidget ]);
 
-    // Inject the note context.
+    // 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.
     useEffect(() => {
         if (noteContext && widget instanceof NoteContextAwareWidget) {
-            widget.activeContextChangedEvent({ noteContext });
+            // 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 });
+            }
         }
     }, [ noteContext, widget ]);
 
@@ -1192,3 +1286,92 @@ 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,3 +1,5 @@
+import { useContext } from "preact/hooks";
+
 import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
 import { downloadFileNote, openNoteExternally } from "../../services/open";
@@ -8,11 +10,14 @@ 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 }: { note?: FNote | null }) {
+export default function FilePropertiesTab({ note, ntxId }: Pick<TabContext, "note" | "ntxId">) {
     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">
@@ -40,7 +45,7 @@ export default function FilePropertiesTab({ note }: { note?: FNote | null }) {
                                         text={t("file_properties.download")}
                                         primary
                                         disabled={!canAccessProtectedNote}
-                                        onClick={() => downloadFileNote(note.noteId)}
+                                        onClick={() => downloadFileNote(note, parentComponent, ntxId)}
                                     />
 
                                     <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.noteId)}
+                            onClick={() => downloadFileNote(note, parentComponent, ntxId)}
                         />
 
                         <Button

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

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

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 ${icon}`}
+                    className={`ribbon-tab-title-icon tn-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 .bx {
+.ribbon-tab-title .tn-icon {
     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 > .bx {
+        &.collapsed .card-header > .tn-icon {
             transform: rotate(-90deg);
         }
     }
@@ -50,7 +50,7 @@ body.experimental-feature-new-layout #right-pane {
         padding: 0.75em;
         color: var(--muted-text-color);
 
-        .bx {
+        .tn-icon {
             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 { useEffect, useRef } from "preact/hooks";
+import { useState, useEffect, useRef, useCallback } from "preact/hooks";
 
 import appContext from "../../components/app_context";
 import { WidgetsByParent } from "../../services/bundle";
@@ -11,10 +11,13 @@ 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, useTriliumOptionBool, useTriliumOptionJson } from "../react/hooks";
+import { useActiveNoteContext, useLegacyWidget, useNoteProperty, useTriliumEvent, 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";
 
@@ -27,12 +30,16 @@ interface RightPanelWidgetDefinition {
 }
 
 export default function RightPanelContainer({ widgetsByParent }: { widgetsByParent: WidgetsByParent }) {
-    const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
+    const [ rightPaneVisible, setRightPaneVisible ] = useState(options.is("rightPaneVisible"));
     const items = useItems(rightPaneVisible, widgetsByParent);
     useSplit(rightPaneVisible);
-    useTriliumEvent("toggleRightPane", () => {
-        setRightPaneVisible(!rightPaneVisible);
-    });
+    useTriliumEvent("toggleRightPane", useCallback(() => {
+        setRightPaneVisible(current => {
+            const newValue = !current;
+            options.save("rightPaneVisible", newValue.toString());
+            return newValue;
+        });
+    }, []));
 
     return (
         <div id="right-pane">
@@ -45,7 +52,7 @@ export default function RightPanelContainer({ widgetsByParent }: { widgetsByPare
                         {t("right_pane.empty_message")}
                         <Button
                             text={t("right_pane.empty_button")}
-                            onClick={() => setRightPaneVisible(!rightPaneVisible)}
+                            triggerCommand="toggleRightPane"
                         />
                     </div>
                 )
@@ -57,13 +64,27 @@ 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"),
+            enabled: (noteType === "text" || noteType === "doc" || isPdf),
+        },
+        {
+            el: <PdfPages />,
+            enabled: isPdf,
+        },
+        {
+            el: <PdfAttachments />,
+            enabled: isPdf,
+        },
+        {
+            el: <PdfLayers />,
+            enabled: isPdf,
         },
         {
             el: <HighlightsList />,

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

@@ -29,6 +29,11 @@
     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, useIsNoteReadOnly, useNoteProperty, useTextEditor } from "../react/hooks";
+import { useActiveNoteContext, useContentElement, useGetContextData, useIsNoteReadOnly, useNoteProperty, useTextEditor } from "../react/hooks";
 import Icon from "../react/Icon";
 import RightPanelWidget from "./RightPanelWidget";
 
@@ -21,29 +21,50 @@ 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 AbstractTableOfContents<T extends RawHeading>({ headings, scrollToHeading }: {
+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 }: {
     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} />)}
+                    {nestedHeadings.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} activeHeadingId={activeHeadingId} />)}
                 </ol>
             ) : (
                 <div className="no-headings">{t("toc.no_headings")}</div>
@@ -52,14 +73,16 @@ function AbstractTableOfContents<T extends RawHeading>({ headings, scrollToHeadi
     );
 }
 
-function TableOfContentsHeading({ heading, scrollToHeading }: {
+function TableOfContentsHeading({ heading, scrollToHeading, activeHeadingId }: {
     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")}>
+            <li className={clsx(collapsed && "collapsed", isActive && "active")}>
                 {heading.children.length > 0 && (
                     <Icon
                         className="collapse-button"
@@ -74,7 +97,7 @@ function TableOfContentsHeading({ heading, scrollToHeading }: {
             </li>
             {heading.children && (
                 <ol>
-                    {heading.children.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} />)}
+                    {heading.children.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} activeHeadingId={activeHeadingId} />)}
                 </ol>
             )}
         </>

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

@@ -0,0 +1,57 @@
+.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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,54 @@
+.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

@@ -0,0 +1,55 @@
+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

@@ -0,0 +1,67 @@
+.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

@@ -0,0 +1,111 @@
+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 .bx {
+.attachment-actions .dropdown-item .tn-icon {
     position: relative;
     top: 3px;
     font-size: 120%;

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

@@ -195,7 +195,11 @@ 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) })}
+                        {t("attachment_detail_2.role_and_size", {
+                            role: attachment.role,
+                            size: utils.formatSize(attachment.contentLength),
+                            mimeType: attachment.mime
+                        })}
                     </div>
                     <div style="flex: 1 1;" />
                 </div>