fix(search): make sure to highlight exact search results too

Not useful for the app.

.github/actions/build-server/action.yml

@@ -10,7 +10,7 @@ runs:
   steps:
   - uses: pnpm/action-setup@v4
   - name: Set up node & dependencies
-    uses: actions/setup-node@v5
+    uses: actions/setup-node@v6
     with:
       node-version: 22
       cache: "pnpm"

.github/workflows/checks.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - name: Check if PRs have conflicts
         uses: eps1lon/actions-label-merge-conflict@v3
-        if: github.repository == ${{ vars.REPO_MAIN }} && ${{secrets.MERGE_CONFLICT_LABEL_PAT}}
+        if: github.repository == ${{ vars.REPO_MAIN }}
         with:
           dirtyLabel: "merge-conflicts"
           repoToken: "${{ secrets.MERGE_CONFLICT_LABEL_PAT }}"

.github/workflows/deploy-docs.yml

@@ -72,7 +72,7 @@ jobs:
 
       # Setup Node.js with pnpm
       - name: Setup Node.js
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version: '22'
           cache: 'pnpm'
@@ -118,7 +118,7 @@ jobs:
 
       - name: Deploy
         uses: ./.github/actions/deploy-to-cloudflare-pages
-        if: github.repository == ${{ vars.REPO_MAIN }} && ${{secrets.CLOUDFLARE_API_TOKEN}}
+        if: github.repository == ${{ vars.REPO_MAIN }}
         with:
           project_name: "trilium-docs"
           comment_body: "📚 Documentation preview is ready"

.github/workflows/dev.yml

@@ -28,7 +28,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version: 22
           cache: "pnpm"

.github/workflows/main-docker.yml

@@ -44,7 +44,7 @@ jobs:
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version: 22
           cache: "pnpm"
@@ -144,7 +144,7 @@ jobs:
         uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version: 22
           cache: 'pnpm'

.github/workflows/nightly.yml

@@ -50,7 +50,7 @@ jobs:
       - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version: 22
           cache: 'pnpm'
@@ -77,7 +77,7 @@ jobs:
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.4.0
+        uses: softprops/action-gh-release@v2.4.1
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false
@@ -118,7 +118,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.4.0
+        uses: softprops/action-gh-release@v2.4.1
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false

.github/workflows/playwright.yml

@@ -22,7 +22,7 @@ jobs:
           fetch-depth: 0
 
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v5
+      - uses: actions/setup-node@v6
         with:
           node-version: 22
           cache: 'pnpm'

.github/workflows/release.yml

@@ -48,7 +48,7 @@ jobs:
       - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version: 22
           cache: 'pnpm'
@@ -127,7 +127,7 @@ jobs:
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.4.0
+        uses: softprops/action-gh-release@v2.4.1
         with:
           draft: false
           body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md

.github/workflows/website.yml

@@ -28,7 +28,7 @@ jobs:
       - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
           node-version: 22
           cache: "pnpm"

.nvmrc

@@ -1 +1 @@
-22.20.0
+22.21.0

.vscode/i18n-ally-custom-framework.yml

@@ -14,6 +14,7 @@ usageMatchRegex:
   # the `{key}` will be placed by a proper keypath matching regex,
   # you can ignore it and use your own matching rules as well
   - "[^\\w\\d]t\\(['\"`]({key})['\"`]"
+  - <Trans\s*i18nKey="({key})"[^>]*>
 
 # A RegEx to set a custom scope range. This scope will be used as a prefix when detecting keys
 # and works like how the i18next framework identifies the namespace scope from the

.vscode/settings.json

@@ -5,7 +5,8 @@
     "i18n-ally.keystyle": "nested",
     "i18n-ally.localesPaths": [
         "apps/server/src/assets/translations",
-        "apps/client/src/translations"
+        "apps/client/src/translations",
+        "apps/website/public/translations"
     ],
     "npm.exclude": [
         "**/dist",

README.md

@@ -1,3 +1,14 @@
+<div align="center">
+	<sup>Special thanks to:</sup><br />
+	<a href="https://go.warp.dev/Trilium" target="_blank">		
+		<img alt="Warp sponsorship" width="400" src="https://github.com/warpdotdev/brand-assets/blob/main/Github/Sponsor/Warp-Github-LG-03.png"><br />
+		Warp, built for coding with multiple AI agents<br />
+	</a>
+  <sup>Available for macOS, Linux and Windows</sup>
+</div>
+
+<hr />
+
 # Trilium Notes
 
 ![GitHub Sponsors](https://img.shields.io/github/sponsors/eliandoran) ![LiberaPay patrons](https://img.shields.io/liberapay/patrons/ElianDoran)  
@@ -13,6 +24,10 @@ See [screenshots](https://triliumnext.github.io/Docs/Wiki/screenshot-tour) for q
 
 <a href="https://triliumnext.github.io/Docs/Wiki/screenshot-tour"><img src="./docs/app.png" alt="Trilium Screenshot" width="1000"></a>
 
+## ⏬ Download
+- [Latest release](https://github.com/TriliumNext/Trilium/releases/latest) – stable version, recommended for most users.
+- [Nightly build](https://github.com/TriliumNext/Trilium/releases/tag/nightly) – unstable development version, updated daily with the latest features and fixes.
+
 ## 📚 Documentation
 
 **Visit our comprehensive documentation at [docs.triliumnotes.org](https://docs.triliumnotes.org/)**

_regroup/package.json

@@ -35,13 +35,13 @@
     "chore:generate-openapi": "tsx bin/generate-openapi.js"
   },
   "devDependencies": {    
-    "@playwright/test": "1.56.0",
-    "@stylistic/eslint-plugin": "5.4.0",        
+    "@playwright/test": "1.56.1",
+    "@stylistic/eslint-plugin": "5.5.0",        
     "@types/express": "5.0.3",    
-    "@types/node": "22.18.9",    
+    "@types/node": "22.18.12",    
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "3.2.4",
-    "eslint": "9.37.0",
+    "eslint": "9.38.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "esm": "3.2.25",
     "jsdoc": "4.0.5",
@@ -49,8 +49,8 @@
     "rcedit": "4.0.1",
     "rimraf": "6.0.1",    
     "tslib": "2.8.1",    
-    "typedoc": "0.28.13",
-    "typedoc-plugin-missing-exports": "4.1.0"
+    "typedoc": "0.28.14",
+    "typedoc-plugin-missing-exports": "4.1.2"
   },
   "optionalDependencies": {
     "appdmg": "0.6.6"

_regroup/spec/support/etapi.ts

@@ -1,4 +1,3 @@
-import type child_process from "child_process";
 import { describe, beforeAll, afterAll } from "vitest";
 
 let etapiAuthToken: string | undefined;
@@ -12,8 +11,6 @@ type SpecDefinitionsFunc = () => void;
 
 function describeEtapi(description: string, specDefinitions: SpecDefinitionsFunc): void {
     describe(description, () => {
-        let appProcess: ReturnType<typeof child_process.spawn>;
-
         beforeAll(async () => {});
 
         afterAll(() => {});

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.99.1",
+  "version": "0.99.2",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -15,7 +15,7 @@
     "circular-deps": "dpdm -T src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
   },
   "dependencies": {
-    "@eslint/js": "9.37.0",
+    "@eslint/js": "9.38.0",
     "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
@@ -32,33 +32,35 @@
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
+    "@triliumnext/split.js": "workspace:*",
     "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.8",
     "boxicons": "2.1.4",
+    "color": "5.0.2",
     "dayjs": "1.11.18",
     "dayjs-plugin-utc": "0.1.2",
     "debounce": "2.2.0",
     "draggabilly": "3.0.0",
     "force-graph": "1.51.0",
     "globals": "16.4.0",
-    "i18next": "25.5.3",
+    "i18next": "25.6.0",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.23",
+    "katex": "0.16.25",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "16.4.0",
+    "marked": "16.4.1",
     "mermaid": "11.12.0",
-    "mind-elixir": "5.3.2",
+    "mind-elixir": "5.3.3",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
     "preact": "10.27.2",
-    "react-i18next": "16.0.0",
-    "split.js": "1.6.5",
+    "react-i18next": "16.1.2",
+    "reveal.js": "5.2.1",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
     "vanilla-js-wheel-zoom": "9.0.4"
@@ -68,13 +70,14 @@
     "@preact/preset-vite": "2.10.2",
     "@types/bootstrap": "5.2.10",
     "@types/jquery": "3.5.33",
-    "@types/leaflet": "1.9.20",
+    "@types/leaflet": "1.9.21",
     "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
+    "@types/reveal.js": "5.2.1",
     "@types/tabulator-tables": "6.2.11",
     "copy-webpack-plugin": "13.0.1",
-    "happy-dom": "20.0.0",
+    "happy-dom": "20.0.7",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.1.3"
+    "vite-plugin-static-copy": "3.1.4"
   }
 }

apps/client/src/components/note_context.ts

@@ -326,9 +326,11 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
         }
 
         // Collections must always display a note list, even if no children.
-        const viewType = note.getLabelValue("viewType") ?? "grid";
-        if (!["list", "grid"].includes(viewType)) {
-            return true;
+        if (note.type === "book") {
+            const viewType = note.getLabelValue("viewType") ?? "grid";
+            if (!["list", "grid"].includes(viewType)) {
+                return true;
+            }
         }
 
         if (!note.hasChildren()) {
@@ -438,4 +440,22 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     }
 }
 
+export function openInCurrentNoteContext(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, notePath: string, viewScope?: ViewScope) {
+    const ntxId = $(evt?.target as Element)
+        .closest("[data-ntx-id]")
+        .attr("data-ntx-id");
+
+    const noteContext = ntxId ? appContext.tabManager.getNoteContextById(ntxId) : appContext.tabManager.getActiveContext();
+
+    if (noteContext) {
+        noteContext.setNote(notePath, { viewScope }).then(() => {
+            if (noteContext !== appContext.tabManager.getActiveContext()) {
+                appContext.tabManager.activateNoteContext(noteContext.ntxId);
+            }
+        });
+    } else {
+        appContext.tabManager.openContextWithNote(notePath, { viewScope, activate: true });
+    }
+}
+
 export default NoteContext;

apps/client/src/entities/fnote.ts

@@ -1,6 +1,5 @@
 import server from "../services/server.js";
 import noteAttributeCache from "../services/note_attribute_cache.js";
-import ws from "../services/ws.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import cssClassManager from "../services/css_class_manager.js";
 import type { Froca } from "../services/froca-interface.js";
@@ -586,7 +585,7 @@ export default class FNote {
         let childBranches = this.getChildBranches();
 
         if (!childBranches) {
-            ws.logError(`No children for '${this.noteId}'. This shouldn't happen.`);
+            console.error(`No children for '${this.noteId}'. This shouldn't happen.`);
             return [];
         }
 

apps/client/src/layouts/desktop_layout.tsx

@@ -138,7 +138,7 @@ export default class DesktopLayout {
                                                                 .child(new PromotedAttributesWidget())
                                                                 .child(<SqlTableSchemas />)
                                                                 .child(new NoteDetailWidget())
-                                                                .child(<NoteList />)
+                                                                .child(<NoteList media="screen" />)
                                                                 .child(<SearchResult />)
                                                                 .child(<SqlResults />)
                                                                 .child(<ScrollPadding />)

apps/client/src/layouts/layout_commons.tsx

@@ -66,6 +66,6 @@ export function applyModals(rootContainer: RootContainer) {
                 .child(<PopupEditorFormattingToolbar />)
                 .child(new PromotedAttributesWidget())
                 .child(new NoteDetailWidget())
-                .child(<NoteList displayOnlyCollections />))
+                .child(<NoteList media="screen" displayOnlyCollections />))
         .child(<CallToActionDialog />);
 }

apps/client/src/layouts/mobile_layout.tsx

@@ -154,7 +154,7 @@ export default class MobileLayout {
                                             .filling()
                                             .contentSized()
                                             .child(new NoteDetailWidget())
-                                            .child(<NoteList />)
+                                            .child(<NoteList media="screen" />)
                                             .child(<FilePropertiesWrapper />)
                                     )
                                     .child(<MobileEditorToolbar />)

apps/client/src/print.css

@@ -0,0 +1,155 @@
+:root {
+    --print-font-size: 11pt;
+    --ck-content-color-image-caption-background: transparent !important;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    color: black;
+}
+
+@page {
+    margin: 2cm;
+}
+
+.note-list-widget.full-height,
+.note-list-widget.full-height .note-list-widget-content {
+    height: unset !important;
+}
+
+.component {
+    contain: none !important;
+}
+
+body[data-note-type="text"] .ck-content {
+    font-size: var(--print-font-size);
+    text-align: justify;
+}
+
+.ck-content figcaption {
+    font-style: italic;
+}
+
+.ck-content a {
+    text-decoration: none;
+}
+
+.ck-content a:not([href^="#root/"]) {
+    text-decoration: underline;
+    color: #374a75;
+}
+
+.ck-content .todo-list__label * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+}
+
+@supports selector(.todo-list__label__description:has(*)) and (height: 1lh) {
+    .ck-content .todo-list__label__description {
+        /* The percentage of the line height that the check box occupies */
+        --box-ratio: 0.75;
+        /* The size of the gap between the check box and the caption */
+        --box-text-gap: 0.25em;
+
+        --box-size: calc(1lh * var(--box-ratio));
+        --box-vert-offset: calc((1lh - var(--box-size)) / 2);
+
+        display: inline-block;
+        padding-inline-start: calc(var(--box-size) + var(--box-text-gap));
+        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e");
+        background-position: 0 var(--box-vert-offset);
+        background-size: var(--box-size);
+        background-repeat: no-repeat;
+    }
+
+    .ck-content .todo-list__label:has(input[type="checkbox"]:checked) .todo-list__label__description {
+        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-outline/ */
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5A2%2c2 0 0%2c0 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5A2%2c2 0 0%2c0 19%2c3M19%2c5V19H5V5H19M10%2c17L6%2c13L7.41%2c11.58L10%2c14.17L16.59%2c7.58L18%2c9' /%3e%3c/svg%3e");
+    }
+
+    .ck-content .todo-list__label input[type="checkbox"] {
+        display: none !important;
+    }
+}
+
+/* #region Footnotes */
+.footnote-reference a,
+.footnote-back-link a {
+    text-decoration: none !important;
+}
+
+li.footnote-item {
+    position: relative;
+    width: fit-content;
+}
+
+.ck-content .footnote-back-link {
+    margin-right: 0.25em;
+}
+
+.ck-content .footnote-content {
+    display: inline-block;
+    width: unset;
+}
+/* #endregion */
+
+/* #region Widows and orphans */
+p,
+blockquote {
+    widows: 4;
+    orphans: 4;
+}
+
+pre > code {
+    widows: 6;
+    orphans: 6;
+    overflow: auto;
+    white-space: pre-wrap !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    page-break-after: avoid;
+    break-after: avoid;
+}
+/* #endregion */
+
+/* #region Tables */
+.table thead th,
+.table td,
+.table th {
+    /* Fix center vertical alignment of table cells */
+    vertical-align: middle;
+}
+
+pre {
+    box-shadow: unset !important;
+    border: 0.75pt solid gray !important;
+    border-radius: 2pt !important;
+}
+
+th,
+span[style] {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+}
+/* #endregion */
+
+/* #region Page breaks */
+.page-break {
+    page-break-after: always;
+    break-after: always;
+}
+
+.page-break > *,
+.page-break::after {
+    display: none !important;
+}
+/* #endregion */

apps/client/src/print.tsx

@@ -0,0 +1,92 @@
+import FNote from "./entities/fnote";
+import { render } from "preact";
+import { CustomNoteList } from "./widgets/collections/NoteList";
+import { useCallback, useLayoutEffect, useRef } from "preact/hooks";
+import content_renderer from "./services/content_renderer";
+
+interface RendererProps {
+    note: FNote;
+    onReady: () => void;
+}
+
+async function main() {
+    const notePath = window.location.hash.substring(1);
+    const noteId = notePath.split("/").at(-1);
+    if (!noteId) return;
+
+    await import("./print.css");
+    const froca = (await import("./services/froca")).default;
+    const note = await froca.getNote(noteId);
+
+    render(<App note={note} noteId={noteId} />, document.body);
+}
+
+function App({ note, noteId }: { note: FNote | null | undefined, noteId: string }) {
+    const sentReadyEvent = useRef(false);
+    const onReady = useCallback(() => {
+        if (sentReadyEvent.current) return;
+        window.dispatchEvent(new Event("note-ready"));
+        window._noteReady = true;
+        sentReadyEvent.current = true;
+    }, []);
+    const props: RendererProps | undefined | null = note && { note, onReady };
+
+    if (!note || !props) return <Error404 noteId={noteId} />
+
+    useLayoutEffect(() => {
+        document.body.dataset.noteType = note.type;
+    }, [ note ]);
+
+    return (
+        <>
+            {note.type === "book"
+            ? <CollectionRenderer {...props} />
+            : <SingleNoteRenderer {...props} />
+            }
+        </>
+    );
+}
+
+function SingleNoteRenderer({ note, onReady }: RendererProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        async function load() {
+            if (note.type === "text") {
+                await import("@triliumnext/ckeditor5/src/theme/ck-content.css");
+            }
+            const { $renderedContent } = await content_renderer.getRenderedContent(note, { noChildrenList: true });
+            containerRef.current?.replaceChildren(...$renderedContent);
+        }
+
+        load().then(() => requestAnimationFrame(onReady))
+    }, [ note ]);
+
+    return <>
+        <h1>{note.title}</h1>
+        <main ref={containerRef} />
+    </>;
+}
+
+function CollectionRenderer({ note, onReady }: RendererProps) {
+    return <CustomNoteList
+        isEnabled
+        note={note}
+        notePath={note.getBestNotePath().join("/")}
+        ntxId="print"
+        highlightedTokens={null}
+        media="print"
+        onReady={onReady}
+    />;
+}
+
+function Error404({ noteId }: { noteId: string }) {
+    return (
+        <main>
+            <p>The note you are trying to print could not be found.</p>
+            <small>{noteId}</small>
+        </main>
+    )
+}
+
+main();

apps/client/src/services/content_renderer.ts

@@ -23,11 +23,13 @@ interface Options {
     tooltip?: boolean;
     trim?: boolean;
     imageHasZoom?: boolean;
+    /** If enabled, it will prevent the default behavior in which an empty note would display a list of children. */
+    noChildrenList?: boolean;
 }
 
 const CODE_MIME_TYPES = new Set(["application/json"]);
 
-async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: Options = {}) {
+export async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: Options = {}) {
 
     options = Object.assign(
         {
@@ -42,7 +44,7 @@ async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FA
     const $renderedContent = $('<div class="rendered-content">');
 
     if (type === "text" || type === "book") {
-        await renderText(entity, $renderedContent);
+        await renderText(entity, $renderedContent, options);
     } else if (type === "code") {
         await renderCode(entity, $renderedContent);
     } else if (["image", "canvas", "mindMap"].includes(type)) {
@@ -114,7 +116,7 @@ async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FA
     };
 }
 
-async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>) {
+async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: Options = {}) {
     // entity must be FNote
     const blob = await note.getBlob();
 
@@ -135,7 +137,7 @@ async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HT
         }
 
         await formatCodeBlocks($renderedContent);
-    } else if (note instanceof FNote) {
+    } else if (note instanceof FNote && !options.noChildrenList) {
         await renderChildrenList($renderedContent, note);
     }
 }

apps/client/src/services/css_class_manager.ts

@@ -1,21 +1,39 @@
+import {readCssVar} from "../utils/css-var";
+import Color, { ColorInstance } from "color";
+
 const registeredClasses = new Set<string>();
 
-function createClassForColor(color: string | null) {
-    if (!color?.trim()) {
-        return "";
-    }
+// Read the color lightness limits defined in the theme as CSS variables
 
-    const normalizedColorName = color.replace(/[^a-z0-9]/gi, "");
+const lightThemeColorMaxLightness = readCssVar(
+                                        document.documentElement,
+                                        "tree-item-light-theme-max-color-lightness"
+                                    ).asNumber(70);
 
-    if (!normalizedColorName.trim()) {
-        return "";
-    }
+const darkThemeColorMinLightness = readCssVar(
+                                        document.documentElement,
+                                        "tree-item-dark-theme-min-color-lightness"
+                                    ).asNumber(50);
 
-    const className = `color-${normalizedColorName}`;
+function createClassForColor(colorString: string | null) {
+    if (!colorString?.trim()) return "";
+
+    const color = parseColor(colorString);
+    if (!color) return "";
+
+    const className = `color-${color.hex().substring(1)}`;
 
     if (!registeredClasses.has(className)) {
-        // make the active fancytree selector more specific than the normal color setting
-        $("head").append(`<style>.${className}, span.fancytree-active.${className} { color: ${color} !important; }</style>`);
+        const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
+                                                   darkThemeColorMinLightness!);
+
+        $("head").append(`<style>
+            .${className}, span.fancytree-active.${className} {
+                --light-theme-custom-color: ${adjustedColor.lightThemeColor};
+                --dark-theme-custom-color: ${adjustedColor.darkThemeColor};
+                --custom-color-hue: ${getHue(color) ?? 'unset'};
+            }
+        </style>`);
 
         registeredClasses.add(className);
     }
@@ -23,6 +41,41 @@ function createClassForColor(color: string | null) {
     return className;
 }
 
+function parseColor(color: string) {
+    try {
+        return Color(color);
+    } catch (ex) {
+        console.error(ex);
+    }
+}
+
+/**
+ * Returns a pair of colors — one optimized for light themes and the other for dark themes, derived
+ * from the specified color to maintain sufficient contrast with each theme.
+ * The adjustment is performed by limiting the color’s lightness in the CIELAB color space,
+ * according to the lightThemeMaxLightness and darkThemeMinLightness parameters.
+ */
+function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: number, darkThemeMinLightness: number) {
+    const labColor = color.lab();
+    const lightness = labColor.l();
+
+    // For the light theme, limit the maximum lightness
+    const lightThemeColor = labColor.l(Math.min(lightness, lightThemeMaxLightness)).hex();
+
+    // For the dark theme, limit the minimum lightness
+    const darkThemeColor = labColor.l(Math.max(lightness, darkThemeMinLightness)).hex();
+
+    return {lightThemeColor, darkThemeColor};
+}
+
+/** Returns the hue of the specified color, or undefined if the color is grayscale. */
+function getHue(color: ColorInstance) {
+    const hslColor = color.hsl();
+    if (hslColor.saturationl() > 0) {
+        return hslColor.hue();
+    }
+}
+
 export default {
     createClassForColor
 };

apps/client/src/services/froca.ts

@@ -40,20 +40,23 @@ class FrocaImpl implements Froca {
 
     constructor() {
         this.initializedPromise = this.loadInitialTree();
+        this.#clear();
     }
 
     async loadInitialTree() {
         const resp = await server.get<SubtreeResponse>("tree");
 
         // clear the cache only directly before adding new content which is important for e.g., switching to protected session
+        this.#clear();
+        this.addResp(resp);
+    }
 
+    #clear() {
         this.notes = {};
         this.branches = {};
         this.attributes = {};
         this.attachments = {};
         this.blobPromises = {};
-
-        this.addResp(resp);
     }
 
     async loadSubTree(subTreeNoteId: string) {

apps/client/src/services/in_app_help.ts

@@ -27,7 +27,8 @@ export const byBookType: Record<ViewTypeOptions, string | null> = {
     calendar: "xWbu3jpNWapp",
     table: "2FvYrpmOXm29",
     geoMap: "81SGnPGMk7Xc",
-    board: "CtBQqbwXDx1w"
+    board: "CtBQqbwXDx1w",
+    presentation: null
 };
 
 export function getHelpUrlForNote(note: FNote | null | undefined) {

apps/client/src/services/link.ts

@@ -4,6 +4,7 @@ import appContext, { type NoteCommandData } from "../components/app_context.js";
 import froca from "./froca.js";
 import utils from "./utils.js";
 import { ALLOWED_PROTOCOLS } from "@triliumnext/commons";
+import { openInCurrentNoteContext } from "../components/note_context.js";
 
 function getNotePathFromUrl(url: string) {
     const notePathMatch = /#(root[A-Za-z0-9_/]*)$/.exec(url);
@@ -316,21 +317,7 @@ function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent
                 viewScope
             });
         } else if (isLeftClick) {
-            const ntxId = $(evt?.target as any)
-                .closest("[data-ntx-id]")
-                .attr("data-ntx-id");
-
-            const noteContext = ntxId ? appContext.tabManager.getNoteContextById(ntxId) : appContext.tabManager.getActiveContext();
-
-            if (noteContext) {
-                noteContext.setNote(notePath, { viewScope }).then(() => {
-                    if (noteContext !== appContext.tabManager.getActiveContext()) {
-                        appContext.tabManager.activateNoteContext(noteContext.ntxId);
-                    }
-                });
-            } else {
-                appContext.tabManager.openContextWithNote(notePath, { viewScope, activate: true });
-            }
+            openInCurrentNoteContext(evt, notePath, viewScope);
         }
     } else if (hrefLink) {
         const withinEditLink = $link?.hasClass("ck-link-actions__preview");

apps/client/src/services/note_types.ts

@@ -168,7 +168,8 @@ async function getBuiltInTemplates(title: string | null, command: TreeCommandNam
     }
 
     for (const templateNote of childNotes) {
-        if (templateNote.hasLabel("collection") !== filterCollections) {
+        if (templateNote.hasLabel("collection") !== filterCollections ||
+            !templateNote.hasLabel("template")) {
             continue;
         }
 

apps/client/src/services/resizer.ts

@@ -1,5 +1,5 @@
 import options from "./options.js";
-import Split from "split.js"
+import Split from "@triliumnext/split.js";
 
 export const DEFAULT_GUTTER_SIZE = 5;
 
@@ -46,6 +46,7 @@ function setupLeftPaneResizer(leftPaneVisible: boolean) {
                 sizes: [leftPaneWidth, restPaneWidth],
                 gutterSize: DEFAULT_GUTTER_SIZE,
                 minSize: [150, 300],
+                rtl: glob.isRtl,
                 onDragEnd: (sizes) => {
                     leftPaneWidth = Math.round(sizes[0]);
                     options.save("leftPaneWidth", Math.round(sizes[0]));
@@ -79,6 +80,7 @@ function setupRightPaneResizer() {
             sizes: [100 - rightPaneWidth, rightPaneWidth],
             gutterSize: DEFAULT_GUTTER_SIZE,
             minSize: [300, 180],
+            rtl: glob.isRtl,
             onDragEnd: (sizes) => {
                 rightPaneWidth = Math.round(sizes[1]);
                 options.save("rightPaneWidth", Math.round(sizes[1]));
@@ -99,7 +101,7 @@ function setupNoteSplitResizer(ntxIds: string[]) {
     let targetNtxIds: string[] | undefined;
     for (const ntxId of ntxIds) {
         targetNtxIds = findKeyByNtxId(ntxId);
-        if (targetNtxIds) break; 
+        if (targetNtxIds) break;
     }
 
     if (targetNtxIds) {
@@ -154,6 +156,7 @@ function createSplitInstance(targetNtxIds: string[]) {
         const splitPanels = [...splitNoteContainer.querySelectorAll<HTMLElement>(':scope > .note-split')]
             .filter(el => targetNtxIds.includes(el.getAttribute('data-ntx-id') ?? ""));
         const splitInstance = Split(splitPanels, {
+            rtl: glob.isRtl,
             gutterSize: DEFAULT_GUTTER_SIZE,
             minSize: 150,
         });

apps/client/src/services/syntax_highlight.ts

@@ -61,7 +61,11 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
         highlightedText = highlightAuto(text);
     } else if (normalizedMimeType) {
         await ensureMimeTypesForHighlighting(normalizedMimeType);
-        highlightedText = highlight(text, { language: normalizedMimeType });
+        try {
+            highlightedText = highlight(text, { language: normalizedMimeType });
+        } catch (e) {
+            console.warn("Unable to apply syntax highlight.", e);
+        }
     }
 
     if (highlightedText) {
@@ -76,7 +80,7 @@ export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
 
     // Load theme.
     const currentThemeName = String(options.get("codeBlockTheme"));
-    loadHighlightingTheme(currentThemeName);
+    await loadHighlightingTheme(currentThemeName);
 
     // Load mime types.
     let mimeTypes: MimeType[];
@@ -98,17 +102,16 @@ export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
     highlightingLoaded = true;
 }
 
-export function loadHighlightingTheme(themeName: string) {
+export async function loadHighlightingTheme(themeName: string) {
     const themePrefix = "default:";
     let theme: Theme | null = null;
-    if (themeName.includes(themePrefix)) {
+    if (glob.device === "print") {
+        theme = Themes.vs;
+    } else if (themeName.includes(themePrefix)) {
         theme = Themes[themeName.substring(themePrefix.length)];
     }
-    if (!theme) {
-        theme = Themes.default;
-    }
 
-    loadTheme(theme);
+    await loadTheme(theme ?? Themes.default);
 }
 
 /**

apps/client/src/services/tree.ts

@@ -4,9 +4,6 @@ import froca from "./froca.js";
 import hoistedNoteService from "./hoisted_note.js";
 import appContext from "../components/app_context.js";
 
-/**
- * @returns {string|null}
- */
 async function resolveNotePath(notePath: string, hoistedNoteId = "root") {
     const runPath = await resolveNotePathToSegments(notePath, hoistedNoteId);
 

apps/client/src/services/ws.ts

@@ -304,6 +304,8 @@ async function sendPing() {
 }
 
 setTimeout(() => {
+    if (glob.device === "print") return;
+
     ws = connectWebSocket();
 
     lastPingTs = Date.now();

apps/client/src/stylesheets/print.css

@@ -1,322 +0,0 @@
-:root {
-    --main-background-color: white;
-    --root-background: var(--main-background-color);
-    --launcher-pane-background-color: var(--main-background-color);
-    --main-text-color: black;
-    --input-text-color: var(--main-text-color);
-
-    --print-font-size: 11pt;
-}
-
-@page {
-    margin: 2cm;
-}
-
-.ck-content {
-    font-size: var(--print-font-size);
-    text-align: justify;
-}
-
-.note-detail-readonly-text {
-    padding: 0 !important;
-}
-
-.no-print,
-.no-print *,
-.tab-row-container,
-.tab-row-widget,
-.title-bar-buttons,
-#launcher-pane,
-#left-pane,
-#center-pane > *:not(.split-note-container-widget),
-#right-pane,
-.title-row .note-icon-widget,
-.title-row .icon-action,
-.ribbon-container,
-.promoted-attributes-widget,
-.scroll-padding-widget,
-.note-list-widget,
-.spacer {
-    display: none !important;
-}
-
-body.mobile #mobile-sidebar-wrapper,
-body.mobile .classic-toolbar-widget,
-body.mobile .action-button {
-    display: none !important;
-}
-
-body.mobile #detail-container {
-    max-height: unset;
-}
-
-body.mobile .note-title-widget {
-    padding: 0 !important;
-}
-
-body,
-#root-widget,
-#rest-pane > div.component:first-child,
-.note-detail-printable,
-.note-detail-editable-text-editor {
-    height: unset !important;
-    overflow: auto;
-}
-
-.ck.ck-editor__editable_inline {
-    overflow: hidden !important;
-}
-
-.note-title-widget input,
-.note-detail-editable-text,
-.note-detail-editable-text-editor {
-    padding: 0 !important;
-}
-
-html,
-body {
-    width: unset !important;
-    height: unset !important;
-    overflow: visible;
-    position: unset;
-    /* https://github.com/zadam/trilium/issues/3202 */
-    color: black;
-}
-
-#root-widget,
-#horizontal-main-container,
-#rest-pane,
-#vertical-main-container,
-#center-pane,
-.split-note-container-widget,
-.note-split:not(.hidden-ext),
-body.mobile #mobile-rest-container {
-    display: block !important;
-    overflow: auto;
-    border-radius: 0 !important;
-}
-
-#center-pane,
-#rest-pane,
-.note-split,
-body.mobile #detail-container {
-    width: unset !important;
-    max-width: unset !important;
-}
-
-.component {
-    contain: none !important;
-}
-
-/* Respect page breaks */
-.page-break {
-    page-break-after: always;
-    break-after: always;
-}
-
-.page-break > * {
-    display: none !important;
-}
-
-.relation-map-wrapper {
-    height: 100vh !important;
-}
-
-.table thead th,
-.table td,
-.table th {
-    /* Fix center vertical alignment of table cells */
-    vertical-align: middle;
-}
-
-pre {
-    box-shadow: unset !important;
-    border: 0.75pt solid gray !important;
-    border-radius: 2pt !important;
-}
-
-th,
-span[style] {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-}
-
-/*
- * Text note specific fixes
- */
-.ck-widget {
-    outline: none !important;
-}
-
-.ck-placeholder,
-.ck-widget__type-around,
-.ck-widget__selection-handle {
-    display: none !important;
-}
-
-.ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused,
-.ck-widget.table td.ck-editor__nested-editable:focus,
-.ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused,
-.ck-widget.table th.ck-editor__nested-editable:focus {
-    background: unset !important;
-    outline: unset !important;
-}
-
-.include-note .include-note-content {
-    max-height: unset !important;
-    overflow: unset !important;
-}
-
-/* TODO: This will break once we translate the language */
-.ck-content pre[data-language="Auto-detected"]:after {
-    display: none !important;
-}
-
-/*
- * Code note specific fixes.
- */
-.note-detail-code pre {
-    border: unset !important;
-    border-radius: unset !important;
-}
-
-/*
- * Links
- */
-
-.note-detail-printable a {
-    text-decoration: none;
-}
-
-.note-detail-printable a:not([href^="#root/"]) {
-    text-decoration: underline;
-    color: #374a75;
-}
-
-.note-detail-printable a::after {
-    /* Hide the external link trailing arrow */
-    display: none !important;
-}
-
-/*
- * TODO list check boxes
- */
-
-.note-detail-printable .todo-list__label * {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-}
-
-@supports selector(.todo-list__label__description:has(*)) and (height: 1lh) {
-    .note-detail-printable .todo-list__label__description {
-        /* The percentage of the line height that the check box occupies */
-        --box-ratio: 0.75;
-        /* The size of the gap between the check box and the caption */
-        --box-text-gap: 0.25em;
-
-        --box-size: calc(1lh * var(--box-ratio));
-        --box-vert-offset: calc((1lh - var(--box-size)) / 2);
-
-        display: inline-block;
-        padding-inline-start: calc(var(--box-size) + var(--box-text-gap));
-        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e");
-        background-position: 0 var(--box-vert-offset);
-        background-size: var(--box-size);
-        background-repeat: no-repeat;
-    }
-
-    .note-detail-printable .todo-list__label:has(input[type="checkbox"]:checked) .todo-list__label__description {
-        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-outline/ */
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5A2%2c2 0 0%2c0 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5A2%2c2 0 0%2c0 19%2c3M19%2c5V19H5V5H19M10%2c17L6%2c13L7.41%2c11.58L10%2c14.17L16.59%2c7.58L18%2c9' /%3e%3c/svg%3e");
-    }
-
-    .note-detail-printable .todo-list__label input[type="checkbox"] {
-        display: none !important;
-    }
-}
-
-/*
- * Blockquotes
- */
-
-.note-detail-printable blockquote {
-    box-shadow: unset;
-}
-
-/* 
- * Figures
- */
-
-.note-detail-printable figcaption {
-    --accented-background-color: transparent;
-
-    font-style: italic;
-}
-
-/*
- * Footnotes
- */
-
-.note-detail-printable .footnote-reference a,
-.footnote-back-link a {
-    text-decoration: none;
-}
-
-/* Make the "^" link cover the whole area of the footnote item */
-
-.footnote-section {
-    clear: both;
-}
-
-.note-detail-printable li.footnote-item {
-    position: relative;
-    width: fit-content;
-}
-
-.note-detail-printable .footnote-back-link,
-.note-detail-printable .footnote-back-link *,
-.note-detail-printable .footnote-back-link a {
-    display: block;
-    position: absolute;
-
-    top: 0;
-    inset-inline-start: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.note-detail-printable .footnote-back-link a {
-    color: transparent;
-}
-
-.note-detail-printable .footnote-content {
-    display: inline-block;
-    width: unset;
-}
-
-/*
- * Widows and orphans
- */
-p,
-blockquote {
-    widows: 4;
-    orphans: 4;
-}
-
-pre > code {
-    widows: 6;
-    orphans: 6;
-    overflow: auto;
-    white-space: pre-wrap !important;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    page-break-after: avoid;
-    break-after: avoid;
-}

apps/client/src/stylesheets/style.css

@@ -360,7 +360,8 @@ button kbd {
 }
 
 .dropdown-menu,
-.tabulator-popup-container {
+.tabulator-popup-container,
+:root .excalidraw .popover {
     color: var(--menu-text-color) !important;
     font-size: inherit;
     background: var(--menu-background-color) !important;
@@ -371,7 +372,9 @@ button kbd {
 }
 
 body.desktop .dropdown-menu,
-body.desktop .tabulator-popup-container {
+body.desktop .tabulator-popup-container,
+:root .excalidraw .dropdown-menu .dropdown-menu-container,
+:root .excalidraw .popover {
     border: 1px solid var(--dropdown-border-color);
     column-rule: 1px solid var(--dropdown-border-color);
     box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
@@ -416,7 +419,8 @@ body.desktop .tabulator-popup-container {
 
 .dropdown-menu a:hover:not(.disabled),
 .dropdown-item:hover:not(.disabled, .dropdown-container-item),
-.tabulator-menu-item:hover {
+.tabulator-menu-item:hover,
+:root .excalidraw .context-menu .context-menu-item:hover {
     color: var(--hover-item-text-color) !important;
     background-color: var(--hover-item-background-color) !important;
     border-color: var(--hover-item-border-color) !important;
@@ -457,7 +461,8 @@ body #context-menu-container .dropdown-item > span {
 }
 
 .dropdown-item,
-.dropdown-header {
+.dropdown-header,
+:root .excalidraw .context-menu .context-menu-item:hover {
     color: var(--menu-text-color) !important;
     border: 1px solid transparent !important;
 }
@@ -1008,7 +1013,7 @@ svg.ck-icon .note-icon {
     --ck-content-line-height: var(--bs-body-line-height);
 }
 
-.ck-content .table table th {
+:root .ck-content .table table:not(.layout-table) th {
     background-color: var(--accented-background-color);
 }
 
@@ -1978,6 +1983,10 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
     -webkit-app-region: drag;
 }
 
+body.electron.platform-darwin:not(.native-titlebar) #tab-row-left-spacer {
+    width: 80px;
+}
+
 .tab-row-widget {
     padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw));
 }
@@ -2277,9 +2286,8 @@ footer.webview-footer button {
 
 .admonition {
     --accent-color: var(--card-border-color);
+    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
     border: 1px solid var(--accent-color);
-    box-shadow: var(--card-box-shadow);
-    background: var(--card-background-color);
     border-radius: 0.5em;
     padding: 1em;
     margin: 1.25em 0;
@@ -2414,4 +2422,14 @@ footer.webview-footer button {
 .revision-diff-removed {
     background: rgba(255, 100, 100, 0.5);
     text-decoration: line-through;
+}
+
+iframe.print-iframe {
+    position: absolute;
+    top: 0;
+    left: -600px;
+    right: -600px;
+    bottom: 0;
+    width: 0;
+    height: 0;
 }

apps/client/src/stylesheets/theme-dark.css

@@ -82,6 +82,10 @@ body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
 
+#left-pane .fancytree-node.tinted {
+    --custom-color: var(--dark-theme-custom-color);
+}
+
 .excalidraw.theme--dark {
     --theme-filter: invert(80%) hue-rotate(180deg) !important;
 }

apps/client/src/stylesheets/theme-light.css

@@ -81,3 +81,7 @@ html {
     --mermaid-theme: default;
     --native-titlebar-background: #ffffff00;
 }
+
+#left-pane .fancytree-node.tinted {
+    --custom-color: var(--light-theme-custom-color);
+}

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

@@ -160,6 +160,9 @@
     --launcher-pane-horiz-background-color-bgfx: #ffffff17; /* When background effects enabled */
     --launcher-pane-horiz-border-color-bgfx: #00000080; /* When background effects enabled */
 
+    --global-menu-update-available-badge-background-color: #7dbe61;
+    --global-menu-update-available-badge-color: black;
+
     --protected-session-active-icon-color: #8edd8e;
     --sync-status-error-pulse-color: #f47871;
 
@@ -265,6 +268,15 @@
  * Dark color scheme tweaks
  */
 
+#left-pane .fancytree-node.tinted {
+    --custom-color: var(--dark-theme-custom-color);
+
+    /* The background color of the active item in the note tree.
+     * The --custom-color-hue variable contains the hue of the user-selected note color.
+     * This value is unset for gray tones. */
+    --custom-bg-color: hsl(var(--custom-color-hue), 20%, 33%, 0.4);
+}
+
 body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
@@ -275,4 +287,4 @@ body ::-webkit-calendar-picker-indicator {
 
 body .todo-list input[type="checkbox"]:not(:checked):before {
     border-color: var(--muted-text-color) !important;
-}
+}

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

@@ -127,7 +127,7 @@
     --left-pane-item-selected-color: black;
     --left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     --left-pane-item-action-button-background: rgba(0, 0, 0, 0.11);
-    --left-pane-item-action-button-color: inherit;
+    --left-pane-item-action-button-color: var(--left-pane-text-color);
     --left-pane-item-action-button-hover-background: white;
     --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
     --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
@@ -153,6 +153,9 @@
     --launcher-pane-horiz-background-color-bgfx: #ffffffb3; /* When background effects enabled */
     --launcher-pane-horiz-border-color-bgfx: #00000026; /* When background effects enabled */
 
+    --global-menu-update-available-badge-background-color: #4fa450;
+    --global-menu-update-available-badge-color: white;
+
     --protected-session-active-icon-color: #16b516;
     --sync-status-error-pulse-color: #ff5528;
 
@@ -258,5 +261,13 @@
     --ck-editor-toolbar-button-on-color: black;
     --ck-editor-toolbar-button-on-shadow: none;
     --ck-editor-toolbar-dropdown-button-open-background: #0000000f;
-
 }
+
+#left-pane .fancytree-node.tinted {
+    --custom-color: var(--light-theme-custom-color);
+
+    /* The background color of the active item in the note tree.
+     * The --custom-color-hue variable contains the hue of the user-selected note color.
+     * This value is unset for gray tones. */
+    --custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1);
+}

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

@@ -4,6 +4,7 @@
 @import url(./pages.css);
 @import url(./ribbon.css);
 @import url(./notes/text.css);
+@import url(./notes/canvas.css);
 @import url(./notes/collections/table.css);
 
 @font-face {
@@ -81,6 +82,20 @@
 
     /* Theme capabilities */
     --tab-note-icons: true;
+
+    /* To ensure that a tree item's custom color remains sufficiently contrasted and readable,
+     * the color is adjusted based on the current color scheme (light or dark). The lightness
+     * component of the color represented in the CIELAB color space, will be
+     * constrained to a certain percentage defined below.
+     * 
+     * Note: the tree background may vary when background effects are enabled, so it is recommended
+     * to maintain a higher contrast margin than on the usual note tree solid background. */
+
+    /* The maximum perceptual lightness for the custom color in the light theme (%): */
+    --tree-item-light-theme-max-color-lightness: 60;
+    
+    /* The minimum perceptual lightness for the custom color in the dark theme (%): */
+    --tree-item-dark-theme-min-color-lightness: 65;
 }
 
 body.backdrop-effects-disabled {
@@ -96,9 +111,10 @@ body.backdrop-effects-disabled {
  * supported when this class is used.
  */
 
- .dropdown-menu:not(.static) {
+ .dropdown-menu:not(.static),
+ :root .excalidraw .popover {
     border-radius: var(--dropdown-border-radius);
-    padding: var(--menu-padding-size) !important;
+    padding: var(--padding, var(--menu-padding-size)) !important;
     font-size: 0.9rem !important;
 }
 
@@ -114,7 +130,8 @@ body.mobile .dropdown-menu .dropdown-menu {
 }
 
 body.desktop .dropdown-menu::before,
-:root .ck.ck-dropdown__panel::before {
+:root .ck.ck-dropdown__panel::before,
+:root .excalidraw .popover::before {
     content: "";
     backdrop-filter: var(--dropdown-backdrop-filter);
     border-radius: var(--dropdown-border-radius);
@@ -148,9 +165,17 @@ body.desktop .dropdown-submenu .dropdown-menu {
 }
 
 .dropdown-item,
-body.mobile .dropdown-submenu .dropdown-toggle {
-    padding: 2px 2px 2px 8px !important;
-    padding-inline-end: 22px !important;
+body.mobile .dropdown-submenu .dropdown-toggle,
+.excalidraw .context-menu .context-menu-item {
+    --menu-item-start-padding: 8px;
+    --menu-item-end-padding: 22px;
+    --menu-item-vertical-padding: 2px;
+    
+    padding-top: var(--menu-item-vertical-padding) !important;
+    padding-bottom: var(--menu-item-vertical-padding) !important;
+    padding-inline-start: var(--menu-item-start-padding) !important;
+    padding-inline-end: var(--menu-item-end-padding) !important;
+
     /* Note: the right padding should also accommodate the submenu arrow. */
     border-radius: 6px;
     cursor: default !important;
@@ -202,7 +227,8 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item keyboard shortcut */
-.dropdown-item kbd {
+.dropdown-item kbd,
+.excalidraw .context-menu-item__shortcut {
     font-family: unset !important;
     font-size: unset !important;
     color: var(--menu-item-keyboard-shortcut-color) !important;
@@ -214,13 +240,15 @@ html body .dropdown-item[disabled] {
     margin-inline-start: 16px;
 }
 
-.dropdown-divider {
+.dropdown-divider,
+.excalidraw .context-menu hr {
     position: relative;
     border-color: transparent !important;
     overflow: visible;
 }
 
-.dropdown-divider::after {
+.dropdown-divider::after,
+.excalidraw .context-menu hr::before {
     position: absolute;
     content: "";
     top: -1px;
@@ -253,7 +281,9 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
 /* Menu item group heading */
 
 /* The heading body */
-.dropdown-menu h6 {
+.dropdown-menu h6,
+.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
+.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"] {
     position: relative;
     background: transparent;
     padding: 1em 8px 14px 8px;
@@ -264,7 +294,9 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
 }
 
 /* The delimiter line */
-.dropdown-menu h6::before {
+.dropdown-menu h6::before,
+.excalidraw .dropdown-menu-container .dropdown-menu-group-title::before,
+.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"]::before {
     content: "";
     position: absolute;
     bottom: 8px;

apps/client/src/stylesheets/theme-next/notes/canvas.css

@@ -0,0 +1,261 @@
+:root .excalidraw {
+    --ui-font: var(--main-font-family);
+
+
+    /* Button hover background color */
+    --button-hover-bg: var(--hover-item-background-color);
+    --color-surface-high: var(--hover-item-background-color);
+
+
+    --button-active-border: transparent;
+    --color-brand-active: transparent;
+
+    --color-surface-mid: transparent;
+    --color-surface-low: transparent;
+
+    /* Slider colors */
+    --color-slider-track: var(--menu-item-delimiter-color);
+    --color-slider-thumb: var(--muted-text-color);
+
+    /* Selected button icon fill color */
+    --color-on-primary-container: var(--ck-editor-toolbar-button-on-color);
+    --color-primary: var(--ck-editor-toolbar-button-on-color);
+
+    /* Selected button icon background color */
+    --color-surface-primary-container: var(--ck-editor-toolbar-button-on-background);
+    --color-primary-light: var(--ck-editor-toolbar-button-on-background);
+
+    --island-bg-color: var(--floating-button-background-color);
+
+}
+
+/* Dark theme tweaks */
+
+:root body .excalidraw.theme--dark {
+    --color-surface-high: transparent;
+    --color-brand-hover: transparent;
+}
+
+:root .excalidraw.theme--dark.excalidraw .App-mobile-menu,
+:root .excalidraw.theme--dark.excalidraw .App-menu__left {
+    --button-hover-bg: var(--hover-item-background-color);
+}
+
+:root .excalidraw.theme--dark.excalidraw .dropdown-menu-button:hover {
+    --background: var(--hover-item-background-color);
+}
+
+/* Backdrop blur pseudo-element */
+.Island:not(.App-menu__left)::before,
+.excalidraw .picker::before,
+:root .App-menu__left > .panelColumn > fieldset::before,
+:root .App-menu__left > .panelColumn > label::before,
+:root .App-menu__left > .panelColumn > div:has(> *)::before {
+    display: block;
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    backdrop-filter: blur(10px) saturate(6);
+    z-index: -1;
+}
+
+/* Note's root */
+
+:root .type-canvas {
+    --floating-buttons-vert-offset: 20px;
+}
+
+
+/* Context menus */
+
+/* Context menu - outer wrapper */
+:root .excalidraw .popover {
+    --padding: 0;
+
+    max-width: unset;
+    overflow: hidden;
+    font-family: var(--main-font-family);
+}
+
+/* Context menu - inner wrapper */
+:root .excalidraw .popover > .context-menu {
+    margin: 0;
+    padding: 8px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    background: transparent;
+}
+
+/* Context menu item */
+:root .excalidraw .context-menu .context-menu-item {
+    --menu-item-start-padding: 22px;
+
+    border: 1px solid transparent;
+}
+
+/* Context menu item icon */
+:root .excalidraw .dropdown-menu-item__icon {
+    color: var(--menu-item-icon-color);
+}
+
+/* Context menu item label */
+:root .excalidraw .context-menu-item__label,
+:root .excalidraw .context-menu-item.dangerous .context-menu-item__label {
+    color: var(--menu-text-color);
+}
+
+:root .excalidraw .context-menu-item:hover .context-menu-item__label {
+    color: var(--hover-item-text-color);
+}
+
+/* Context menu item keyboard shortcut */
+:root .excalidraw .context-menu-item__shortcut {
+    padding: 0;
+    opacity: 1;
+}
+
+/* Context menu separator */
+.excalidraw .context-menu .context-menu-item-separator {
+    margin: 8px 0;
+    opacity: 1;
+}
+
+/* Main menu */
+
+/* Hide separators - no longer needed as the menu group headers feature a delimiter line */
+.excalidraw .Island.dropdown-menu-container>div:not(:has(>*)) {
+    display: none;
+}
+
+/* Menu group header */
+.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
+.excalidraw .Island.dropdown-menu-container div[data-testid="canvas-background-label"] {
+    margin: 0 !important;
+}
+
+/* Header */
+
+.excalidraw .App-menu.App-menu_top {
+    align-items: center;
+}
+
+.excalidraw .App-menu.App-menu_top .App-menu_top__left {
+    /* Fixes a layout glitch with the header when the options panel is visbile */
+    --gap: 0 !important;
+}
+
+/* The parent element of the "Library" button  */
+.excalidraw .App-menu.App-menu_top > div:nth-child(3) {
+    flex-direction: row-reverse;
+}
+
+/* Panels */
+
+.excalidraw .zoom-actions,
+.undo-redo-buttons {
+    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
+    backdrop-filter: blur(10px) saturate(6);
+}
+
+:root .excalidraw .main-menu-trigger,
+:root .excalidraw .sidebar-trigger,
+:root .excalidraw .help-icon  {
+    box-shadow: none;
+}
+
+/* Selected color outline */
+:root .excalidraw .color-picker__button.active .color-picker__button-outline {
+    box-shadow: 0 0 0 2px var(--input-focus-outline-color);
+}
+
+:root .excalidraw .buttonList label.active {
+    border-color: transparent;
+}
+
+/* Options panel */
+
+.excalidraw .Island.App-menu__left {
+    box-shadow: none;
+    background: transparent;
+    backdrop-filter: none;
+    width: 13.2em;
+}
+
+body[dir=ltr] .excalidraw .Island.App-menu__left {
+    right: 0;
+}
+
+body[dir=rtl] .excalidraw .Island.App-menu__left {
+    left: 0;
+}
+
+:root .App-menu__left > .panelColumn {
+    row-gap: 5px;
+}
+
+/* Options panel card */
+:root .App-menu__left > .panelColumn > fieldset,
+:root .App-menu__left > .panelColumn > label,
+:root .App-menu__left > .panelColumn > div:has(> *) {
+    position: relative;
+    margin: 0;
+    border-radius: 4px;
+    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
+    background: var(--floating-button-background-color);
+    padding: 8px 12px;
+
+    /* backdrop: blur() creates a new stacking context that prevents some popovers like the
+     * arrowheads picker from being positioned correctly. To workaround this, the backdrop blur
+     * effect is applyed using a pseudo-element instead. */
+}
+
+/* Options panel card title */
+:root .App-menu__left fieldset > legend,
+:root .App-menu__left div > h3,
+:root .App-menu__left > .panelColumn > label {
+    text-transform: uppercase;
+    font-size: .65rem;
+    letter-spacing: 1pt;
+    color: var(--muted-text-color);
+}
+
+/* Options panel button bar */
+:root .excalidraw .App-menu__left .buttonList {
+    padding: 0;
+}
+
+/* Picker */
+body[dir=ltr] .excalidraw .App-menu__left .buttonList .picker {
+    translate: -80% 0;
+}
+
+/* Properties panel */
+
+body[dir=ltr] .excalidraw .exc-stats {
+    left: 0;
+}
+
+body[dir=rtl] .excalidraw .exc-stats {
+    right: 0;
+}
+
+/* Sidebar */
+
+.split-note-container-widget > .component.type-canvas:has(.excalidraw-container > .Island.default-sidebar) > .floating-buttons {
+    /* Hide the floating buttons when the sidebar is open */
+    display: none;
+}
+
+/* Pickers */
+
+.excalidraw .picker {
+    position: relative;
+}

apps/client/src/stylesheets/theme-next/notes/text.css

@@ -354,6 +354,7 @@
     align-items: center;
     width: 100%;
     margin: 4px;
+    background: color-mix(in srgb, var(--accent) 15%, var(--main-background-color));
     padding-inline-end: 2em;
     border: 1px solid var(--accent);
     border-radius: 6px;

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

@@ -18,7 +18,7 @@
 
 body {
     --native-titlebar-darwin-x-offset: 10;
-    --native-titlebar-darwin-y-offset: 17 !important;
+    --native-titlebar-darwin-y-offset: 12 !important;
 }
 
 body.layout-horizontal {
@@ -100,7 +100,7 @@ body.layout-horizontal > .horizontal {
     align-items: center;
 }
 
-#launcher-container {
+body[dir=ltr] #launcher-container {
     scrollbar-gutter: stable both-edges;
 }
 
@@ -279,14 +279,11 @@ body.layout-horizontal > .horizontal {
     animation: sync-status-pulse 1s ease-in-out alternate-reverse infinite;
 }
 
-#launcher-pane .global-menu-button {
-    --hover-item-background-color: transparent;
-}
+#launcher-pane button.global-menu-button {
+    --update-badge-x-offset: 3%;
+    --update-badge-y-offset: -12%;
 
-#launcher-pane.horizontal .global-menu-button .global-menu-button-update-available {
-    inset-inline-end: -23px;
-    bottom: -22px;
-    transform: scale(0.85);
+    --hover-item-background-color: transparent;
 }
 
 .tooltip .tooltip-arrow {
@@ -642,7 +639,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
 #left-pane span.fancytree-node.fancytree-active {
     position: relative;
     background: transparent !important;
-    color: var(--left-pane-item-selected-color) !important;
+    color: var(--custom-color, var(--left-pane-item-selected-color));
 }
 
 @keyframes left-pane-item-select {
@@ -661,7 +658,7 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     inset-inline-start: var(--left-pane-item-selected-shadow-size);
     bottom: var(--left-pane-item-selected-shadow-size);
     inset-inline-end: var(--left-pane-item-selected-shadow-size);
-    background: var(--left-pane-item-selected-background) !important;
+    background: var(--custom-bg-color, var(--left-pane-item-selected-background)) !important;
     box-shadow: var(--left-pane-item-selected-shadow);
     border-radius: 6px;
     animation: left-pane-item-select 200ms ease-out;
@@ -721,9 +718,6 @@ body.mobile .fancytree-node > span {
     margin-top: 0; /* Use this to align the icon with the tree view item's caption */
 }
 
-#left-pane span .fancytree-title {
-    margin-top: -5px;
-}
 
 #left-pane span.fancytree-active .fancytree-title {
     font-weight: normal;
@@ -1790,10 +1784,6 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
     --border-radius-lg: 6px;
 }
 
-.excalidraw .Island {
-    backdrop-filter: var(--dropdown-backdrop-filter);
-}
-
 .excalidraw .Island.App-toolbar {
     --island-bg-color: var(--floating-button-background-color);
     --shadow-island: 1px 1px 1px var(--floating-button-shadow-color);

apps/client/src/stylesheets/tree.css

@@ -17,8 +17,6 @@ span.fancytree-node.fancytree-hide {
     overflow: hidden;
     margin-inline-start: 7px;
     outline: none;
-    position: relative;
-    top: 2px;
 }
 
 .fancytree-expander {
@@ -42,6 +40,7 @@ span.fancytree-node.fancytree-hide {
     text-overflow: ellipsis;
     user-select: none !important;
     -webkit-user-select: none !important;
+    color: var(--custom-color, inherit);
 }
 
 .fancytree-node:not(.fancytree-loading) .fancytree-expander {
@@ -181,7 +180,7 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
 }
 
 span.fancytree-active {
-    color: var(--active-item-text-color) !important;
+    color: var(--active-item-text-color);
     background-color: var(--active-item-background-color) !important;
     border-color: transparent; /* invisible border */
     border-radius: 5px;

apps/client/src/test/easy-froca.ts

@@ -3,6 +3,8 @@ import FNote from "../entities/fnote.js";
 import froca from "../services/froca.js";
 import FAttribute from "../entities/fattribute.js";
 import noteAttributeCache from "../services/note_attribute_cache.js";
+import FBranch from "../entities/fbranch.js";
+import FBlob from "../entities/fblob.js";
 
 type AttributeDefinitions = { [key in `#${string}`]: string; };
 type RelationDefinitions = { [key in `~${string}`]: string; };
@@ -10,6 +12,8 @@ type RelationDefinitions = { [key in `~${string}`]: string; };
 interface NoteDefinition extends AttributeDefinitions, RelationDefinitions {
     id?: string | undefined;
     title: string;
+    children?: NoteDefinition[];
+    content?: string;
 }
 
 /**
@@ -47,6 +51,38 @@ export function buildNote(noteDef: NoteDefinition) {
         blobId: ""
     });
     froca.notes[note.noteId] = note;
+    let childNotePosition = 0;
+
+    // Manage content.
+    const content = noteDef.content ?? "";
+    note.getContent = async () => content;
+
+    const blob = new FBlob({
+        blobId: utils.randomString(10),
+        content,
+        contentLength: content.length,
+        dateModified: new Date().toISOString(),
+        utcDateModified: new Date().toISOString()
+    });
+    note.getBlob = async () => blob;
+
+    // Manage children.
+    if (noteDef.children) {
+        for (const childDef of noteDef.children) {
+            const childNote = buildNote(childDef);
+            const branchId = `${note.noteId}_${childNote.noteId}`;
+            const branch = new FBranch(froca, {
+                branchId,
+                noteId: childNote.noteId,
+                parentNoteId: note.noteId,
+                notePosition: childNotePosition,
+                fromSearchNote: false
+            });
+            froca.branches[branchId] = branch;
+            note.addChild(childNote.noteId, branchId, false);
+            childNotePosition += 10;
+        }
+    }
 
     let position = 0;
     for (const [ key, value ] of Object.entries(noteDef)) {

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

@@ -646,7 +646,9 @@
     "about": "关于 TriliumNext 笔记",
     "logout": "登出",
     "show-cheatsheet": "显示快捷帮助",
-    "toggle-zen-mode": "禅模式"
+    "toggle-zen-mode": "禅模式",
+    "new-version-available": "新更新可用",
+    "download-update": "取得版本 {{latestVersion}}"
   },
   "zen_mode": {
     "button_exit": "退出禅模式"
@@ -736,7 +738,8 @@
     "insert_child_note": "插入子笔记",
     "delete_this_note": "删除此笔记",
     "error_cannot_get_branch_id": "无法获取 notePath '{{notePath}}' 的 branchId",
-    "error_unrecognized_command": "无法识别的命令 {{command}}"
+    "error_unrecognized_command": "无法识别的命令 {{command}}",
+    "note_revisions": "笔记历史版本"
   },
   "note_icon": {
     "change_note_icon": "更改笔记图标",
@@ -749,7 +752,7 @@
     "editable": "可编辑",
     "basic_properties": "基本属性",
     "language": "语言",
-    "configure_code_notes": "配置代码注释..."
+    "configure_code_notes": "配置代码笔记…"
   },
   "book_properties": {
     "view_type": "视图类型",
@@ -765,7 +768,8 @@
     "table": "表格",
     "geo-map": "地理地图",
     "board": "看板",
-    "include_archived_notes": "展示归档笔记"
+    "include_archived_notes": "展示归档笔记",
+    "presentation": "演示"
   },
   "edited_notes": {
     "no_edited_notes_found": "今天还没有编辑过的笔记...",
@@ -1258,7 +1262,13 @@
     "min-days-in-first-week": "第一周的最小天数",
     "first-week-info": "第一周包含一年的第一个周四，基于 <a href=\"https://en.wikipedia.org/wiki/ISO_week_date#First_week\">ISO 8601</a> 标准。",
     "first-week-warning": "更改第一周选项可能会导致与现有周笔记重复，已创建的周笔记将不会相应更新。",
-    "formatting-locale": "日期和数字格式"
+    "formatting-locale": "日期和数字格式",
+    "tuesday": "周二",
+    "wednesday": "周三",
+    "thursday": "周四",
+    "friday": "周五",
+    "saturday": "周六",
+    "formatting-locale-auto": "依应用的语言设置"
   },
   "backup": {
     "automatic_backup": "自动备份",
@@ -2065,5 +2075,10 @@
   },
   "collections": {
     "rendering_error": "出现错误无法显示内容。"
+  },
+  "presentation_view": {
+    "edit-slide": "编辑此幻灯片",
+    "start-presentation": "开始演示",
+    "slide-overview": "切换幻灯片概览"
   }
 }

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

@@ -4,7 +4,7 @@
     "homepage": "Domovská stránka:",
     "app_version": "Verze aplikace:",
     "db_version": "Verze DB:",
-    "sync_version": "Verze sync:",
+    "sync_version": "Verze synchronizace:",
     "build_date": "Datum sestavení:",
     "build_revision": "Revize sestavení:",
     "data_directory": "Datový adresář:"
@@ -36,6 +36,29 @@
     "add_link": "Přidat odkaz",
     "help_on_links": "Nápověda k odkazům",
     "note": "Poznámka",
-    "search_note": "hledat poznámku podle názvu"
+    "search_note": "hledat poznámku podle názvu",
+    "link_title": "Název odkazu",
+    "button_add_link": "Přidat odkaz"
+  },
+  "branch_prefix": {
+    "prefix": "Prefix: ",
+    "save": "Uložit"
+  },
+  "bulk_actions": {
+    "bulk_actions": "Hromadné akce",
+    "affected_notes": "Ovlivněné poznámky",
+    "notes": "Poznámky"
+  },
+  "confirm": {
+    "cancel": "Zrušit",
+    "ok": "OK"
+  },
+  "delete_notes": {
+    "cancel": "Zrušit",
+    "ok": "OK",
+    "close": "Zavřít"
+  },
+  "export": {
+    "close": "Zavřít"
   }
 }

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

@@ -646,7 +646,8 @@
     "about": "Über Trilium Notes",
     "logout": "Abmelden",
     "show-cheatsheet": "Cheatsheet anzeigen",
-    "toggle-zen-mode": "Zen Modus"
+    "toggle-zen-mode": "Zen Modus",
+    "new-version-available": "Neues Update verfügbar"
   },
   "sync_status": {
     "unknown": "<p>Der Synchronisations-Status wird bekannt, sobald der nächste Synchronisierungsversuch gestartet wird.</p><p>Klicke, um eine Synchronisierung jetzt auszulösen.</p>",
@@ -733,7 +734,8 @@
     "insert_child_note": "Untergeordnete Notiz einfügen",
     "delete_this_note": "Diese Notiz löschen",
     "error_cannot_get_branch_id": "BranchId für notePath „{{notePath}}“ kann nicht abgerufen werden",
-    "error_unrecognized_command": "Unbekannter Befehl {{command}}"
+    "error_unrecognized_command": "Unbekannter Befehl {{command}}",
+    "note_revisions": "Notiz Revisionen"
   },
   "note_icon": {
     "change_note_icon": "Notiz-Icon ändern",
@@ -762,7 +764,8 @@
     "table": "Tabelle",
     "geo-map": "Weltkarte",
     "board": "Tafel",
-    "include_archived_notes": "Zeige archivierte Notizen"
+    "include_archived_notes": "Zeige archivierte Notizen",
+    "presentation": "Präsentation"
   },
   "edited_notes": {
     "no_edited_notes_found": "An diesem Tag wurden noch keine Notizen bearbeitet...",
@@ -1255,7 +1258,13 @@
     "min-days-in-first-week": "Mindestanzahl an Tagen in erster Woche",
     "first-week-info": "Die erste Woche, die den ersten Donnerstag des Jahres enthält, basiert auf dem Standard <a href=\"https://en.wikipedia.org/wiki/ISO_week_date#First_week\">ISO 8601</a>.",
     "first-week-warning": "Das Ändern der Optionen für die erste Woche kann zu Duplikaten mit bestehenden Wochen-Notizen führen. Bestehende Wochen-Notizen werden nicht entsprechend aktualisiert.",
-    "formatting-locale": "Datums- und Zahlenformat"
+    "formatting-locale": "Datums- und Zahlenformat",
+    "tuesday": "Dienstag",
+    "wednesday": "Mittwoch",
+    "thursday": "Donnerstag",
+    "friday": "Freitag",
+    "saturday": "Samstag",
+    "formatting-locale-auto": "Basierend auf die Anwendungssprache"
   },
   "backup": {
     "automatic_backup": "Automatische Sicherung",
@@ -2067,5 +2076,9 @@
   },
   "collections": {
     "rendering_error": "Aufgrund eines Fehlers können keine Inhalte angezeigt werden."
+  },
+  "presentation_view": {
+    "edit-slide": "Folie bearbeiten",
+    "start-presentation": "Präsentation starten"
   }
 }

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

@@ -1,18 +1,24 @@
 {
-    "about": {
-        "title": "Πληροφορίες για το Trilium Notes",
-        "homepage": "Αρχική Σελίδα:",
-        "app_version": "Έκδοση εφαρμογής:",
-        "db_version": "Έκδοση βάσης δεδομένων:",
-        "sync_version": "Έκδοση πρωτοκόλου συγχρονισμού:",
-        "build_date": "Ημερομηνία χτισίματος εφαρμογής:",
-        "build_revision": "Αριθμός αναθεώρησης χτισίματος:",
-        "data_directory": "Φάκελος δεδομένων:"
-    },
-    "toast": {
-        "critical-error": {
-            "title": "Κρίσιμο σφάλμα",
-            "message": "Συνέβη κάποιο κρίσιμο σφάλμα, το οποίο δεν επιτρέπει στην εφαρμογή χρήστη να ξεκινήσει:\n\n{{message}}\n\nΤο πιθανότερο είναι να προκλήθηκε από κάποιο script που απέτυχε απρόοπτα. Δοκιμάστε να ξεκινήσετε την εφαρμογή σε ασφαλή λειτουργία για να λύσετε το πρόβλημα."
-        }
+  "about": {
+    "title": "Πληροφορίες για το Trilium Notes",
+    "homepage": "Αρχική Σελίδα:",
+    "app_version": "Έκδοση εφαρμογής:",
+    "db_version": "Έκδοση βάσης δεδομένων:",
+    "sync_version": "Έκδοση πρωτοκόλου συγχρονισμού:",
+    "build_date": "Ημερομηνία χτισίματος εφαρμογής:",
+    "build_revision": "Αριθμός αναθεώρησης χτισίματος:",
+    "data_directory": "Φάκελος δεδομένων:"
+  },
+  "toast": {
+    "critical-error": {
+      "title": "Κρίσιμο σφάλμα",
+      "message": "Συνέβη κάποιο κρίσιμο σφάλμα, το οποίο δεν επιτρέπει στην εφαρμογή χρήστη να ξεκινήσει:\n\n{{message}}\n\nΤο πιθανότερο είναι να προκλήθηκε από κάποιο script που απέτυχε απρόοπτα. Δοκιμάστε να ξεκινήσετε την εφαρμογή σε ασφαλή λειτουργία για να λύσετε το πρόβλημα."
     }
+  },
+  "ai_llm": {
+    "n_notes_queued": "{{ count }} σημείωση στην ουρά για εύρεση",
+    "n_notes_queued_plural": "{{ count }} σημειώσεις στην ουρά για εύρεση",
+    "notes_indexed": "{{ count }} σημείωση με ευρετήριο",
+    "notes_indexed_plural": "{{ count }} σημειώσεις με ευρετήριο"
+  }
 }

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

@@ -164,6 +164,7 @@
     "importIntoNote": "Import into note",
     "chooseImportFile": "Choose import file",
     "importDescription": "Content of the selected file(s) will be imported as child note(s) into",
+    "importZipRecommendation": "When importing a ZIP file, the note hierarchy will reflect the subdirectory structure within the archive.",
     "options": "Options",
     "safeImportTooltip": "Trilium <code>.zip</code> export files can contain executable scripts which may contain harmful behavior. Safe import will deactivate automatic execution of all imported scripts. Uncheck \"Safe import\" only if the imported archive is supposed to contain executable scripts and you completely trust the contents of the import file.",
     "safeImport": "Safe import",
@@ -647,7 +648,8 @@
     "logout": "Logout",
     "show-cheatsheet": "Show Cheatsheet",
     "toggle-zen-mode": "Zen Mode",
-    "update_available": "Version {{latestVersion}} is available, click to download."
+    "new-version-available": "New Update Available",
+    "download-update": "Get Version {{latestVersion}}"
   },
   "zen_mode": {
     "button_exit": "Exit Zen Mode"
@@ -767,6 +769,7 @@
     "table": "Table",
     "geo-map": "Geo Map",
     "board": "Board",
+    "presentation": "Presentation",
     "include_archived_notes": "Show archived notes"
   },
   "edited_notes": {
@@ -1720,7 +1723,9 @@
     "window-on-top": "Keep Window on Top"
   },
   "note_detail": {
-    "could_not_find_typewidget": "Could not find typeWidget for type '{{type}}'"
+    "could_not_find_typewidget": "Could not find typeWidget for type '{{type}}'",
+    "printing": "Printing in progress...",
+    "printing_pdf": "Exporting to PDF in progress..."
   },
   "note_title": {
     "placeholder": "type note's title here..."
@@ -2028,6 +2033,11 @@
     "edit-note-title": "Click to edit note title",
     "edit-column-title": "Click to edit column title"
   },
+  "presentation_view": {
+    "edit-slide": "Edit this slide",
+    "start-presentation": "Start presentation",
+    "slide-overview": "Toggle an overview of the slides"
+  },
   "command_palette": {
     "tree-action-name": "Tree: {{name}}",
     "export_note_title": "Export Note",

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

@@ -354,7 +354,7 @@
     "calendar_root": "marca la nota que debe usarse como raíz para las notas del día. Sólo uno debe estar marcado como tal.",
     "archived": "las notas con esta etiqueta no serán visibles de forma predeterminada en los resultados de búsqueda (tampoco en los cuadros de diálogo Saltar a, Agregar vínculo, etc.).",
     "exclude_from_export": "las notas (con su subárbol) no se incluirán en ninguna exportación de notas",
-    "run": "define en qué eventos debe ejecutarse el script. Los valores posibles son:\n<ul>\n<li>frontendStartup - cuando el frontend de Trilium inicia (o es recargado), pero no en dispositivos móviles. </li>\n<li>backendStartup - cuando el backend de Trilium se inicia </li>\n<li>hourly - se ejecuta una vez cada hora. Puede usar etiqueta adicional <code>runAtHour</code> para especificar a la hora. </li>\n<li>daily - ejecutar una vez al día </li>\n</ul>",
+    "run": "define en qué eventos debe ejecutarse el script. Los valores posibles son:\n<ul>\n<li>frontendStartup - cuando Trilium frontend se inicia (o se actualiza), pero no en móvil.</li>\n<li>mobileStartup - cuando Trilium frontend se inicia (o se actualiza), en móvil.</li>\n<li>backendStartup - cuando Trilium backend se inicia</li>\n<li>hourly - se ejecuta una vez por hora. Se puede usar la etiqueta adicional <code>runAtHour</code> para especificar a qué hora.</li>\n<li>daily - se ejecuta una vez al día</li>\n</ul>",
     "run_on_instance": "Definir en qué instancia de Trilium se debe ejecutar esto. Predeterminado para todas las instancias.",
     "run_at_hour": "¿A qué hora debería funcionar? Debe usarse junto con <code>#run=hourly</code>. Se puede definir varias veces para varias ejecuciones durante el día.",
     "disable_inclusion": "los scripts con esta etiqueta no se incluirán en la ejecución del script principal.",
@@ -384,7 +384,7 @@
     "inbox": "ubicación predeterminada de la bandeja de entrada para nuevas notas - cuando crea una nota usando el botón \"nueva nota\" en la barra lateral, las notas serán creadas como subnotas de la nota marcada con la etiqueta <code>#inbox</code>.",
     "workspace_inbox": "ubicación predeterminada de la bandeja de entrada para nuevas notas cuando se anclan a algún antecesor de esta nota del espacio de trabajo",
     "sql_console_home": "ubicación predeterminada de las notas de la consola SQL",
-    "bookmark_folder": "la nota con esta etiqueta aparecerá en los marcadores como carpeta (permitiendo el acceso a sus elementos hijos).",
+    "bookmark_folder": "la nota con esta etiqueta aparecerá en los marcadores como carpeta (permitiendo el acceso a sus elementos hijos)",
     "share_hidden_from_tree": "esta nota está oculta en el árbol de navegación izquierdo, pero aún se puede acceder a ella con su URL",
     "share_external_link": "la nota actuará como un enlace a un sitio web externo en el árbol compartido",
     "share_alias": "define un alias que al usar la nota va a estar disponible en https://your_trilium_host/share/[tu_alias]",
@@ -646,7 +646,9 @@
     "about": "Acerca de Trilium Notes",
     "logout": "Cerrar sesión",
     "show-cheatsheet": "Mostrar hoja de trucos",
-    "toggle-zen-mode": "Modo Zen"
+    "toggle-zen-mode": "Modo Zen",
+    "new-version-available": "Nueva actualización disponible",
+    "download-update": "Obtener versión {{latestVersion}}"
   },
   "zen_mode": {
     "button_exit": "Salir del modo Zen"
@@ -736,7 +738,8 @@
     "insert_child_note": "Insertar subnota",
     "delete_this_note": "Eliminar esta nota",
     "error_cannot_get_branch_id": "No se puede obtener el branchID del notePath '{{notePath}}'",
-    "error_unrecognized_command": "Comando no reconocido {{command}}"
+    "error_unrecognized_command": "Comando no reconocido {{command}}",
+    "note_revisions": "Revisiones de notas"
   },
   "note_icon": {
     "change_note_icon": "Cambiar icono de nota",
@@ -765,7 +768,8 @@
     "table": "Tabla",
     "geo-map": "Mapa Geo",
     "board": "Tablero",
-    "include_archived_notes": "Mostrar notas archivadas"
+    "include_archived_notes": "Mostrar notas archivadas",
+    "presentation": "Presentación"
   },
   "edited_notes": {
     "no_edited_notes_found": "Aún no hay notas editadas en este día...",
@@ -1010,7 +1014,7 @@
     "start_dragging_relations": "Empiece a arrastrar relaciones desde aquí y suéltelas en otra nota.",
     "note_not_found": "¡Nota {{noteId}} no encontrada!",
     "cannot_match_transform": "No se puede coincidir con la transformación: {{transform}}",
-    "note_already_in_diagram": "Note \"{{title}}\" is already in the diagram.",
+    "note_already_in_diagram": "La nota \"{{title}}\" ya está en el diagrama.",
     "enter_title_of_new_note": "Ingrese el título de la nueva nota",
     "default_new_note_title": "nueva nota",
     "click_on_canvas_to_place_new_note": "Haga clic en el lienzo para colocar una nueva nota"
@@ -1252,8 +1256,9 @@
     "indexing_stopped": "Indexado detenido",
     "indexing_in_progress": "Indexado en progreso...",
     "last_indexed": "Último indexado",
-    "n_notes_queued": "{{ count }} nota agregada a la cola para indexado",
-    "n_notes_queued_plural": "{{ count }} notas agregadas a la cola para indexado",
+    "n_notes_queued_0": "{{ count }} nota agregada a la cola para indexar",
+    "n_notes_queued_1": "{{ count }} notas agregadas a la cola para indexar",
+    "n_notes_queued_2": "",
     "note_chat": "Chat de nota",
     "notes_indexed": "{{ count }} nota indexada",
     "notes_indexed_plural": "{{ count }} notas indexadas",
@@ -1414,7 +1419,13 @@
     "min-days-in-first-week": "Días mínimos en la primer semana",
     "first-week-info": "Primer semana que contiene al primer jueves del año está basado en el estándar<a href=\"https://en.wikipedia.org/wiki/ISO_week_date#First_week\">ISO 8601</a>.",
     "first-week-warning": "Cambiar las opciones de primer semana puede causar duplicados con las Notas Semanales existentes y las Notas Semanales existentes no serán actualizadas respectivamente.",
-    "formatting-locale": "Fecha y formato de número"
+    "formatting-locale": "Fecha y formato de número",
+    "tuesday": "Martes",
+    "wednesday": "Miércoles",
+    "thursday": "Jueves",
+    "friday": "Viernes",
+    "saturday": "Sábado",
+    "formatting-locale-auto": "Basado en el idioma de la aplicación"
   },
   "backup": {
     "automatic_backup": "Copia de seguridad automática",
@@ -1507,7 +1518,7 @@
     "recovery_keys_used": "Usado: {{date}}",
     "recovery_keys_unused": "El código de recuperación {{index}} está sin usar",
     "oauth_title": "OAuth/OpenID",
-    "oauth_description": "OpenID es una forma estandarizada de permitirle iniciar sesión en sitios web utilizando una cuenta de otro servicio, como Google, para verificar su identidad. Siga estas <a href = \"https://developers.google.com/identity/openid-connect/openid-connect\">instrucciones</a> para configurar un servicio OpenID a través de Google.",
+    "oauth_description": "OpenID es un método estandarizado que permite iniciar sesión en sitios web usando una cuenta de otro servicio, como Google, para verificar tu identidad. El emisor predeterminado es Google, pero se puede cambiar a cualquier otro proveedor de OpenID. Consulta <a href=\"#root/_hidden/_help/_help_Otzi9La2YAUX/_help_WOcw2SLH6tbX/_help_7DAiwaf8Z7Rz\">aquí</a> para más información. Sigue estas <a href=\"https://developers.google.com/identity/openid-connect/openid-connect\">instrucciones</a> para configurar un servicio OpenID a través de Google.",
     "oauth_description_warning": "Para habilitar OAuth/OpenID, necesita establecer la URL base de OAuth/OpenID, ID de cliente y secreto de cliente en el archivo config.ini y reiniciar la aplicación. Si desea establecerlas desde variables de ambiente, por favor establezca TRILIUM_OAUTH_BASE_URL, TRILIUM_OAUTH_CLIENT_ID y TRILIUM_OAUTH_CLIENT_SECRET.",
     "oauth_missing_vars": "Ajustes faltantes: {{-variables}}",
     "oauth_user_account": "Cuenta de usuario: ",
@@ -1617,8 +1628,8 @@
     "unarchive": "Desarchivar"
   },
   "shared_info": {
-    "shared_publicly": "Esta nota está compartida públicamente en {{- link}}",
-    "shared_locally": "Esta nota está compartida localmente en {{- link}}",
+    "shared_publicly": "Esta nota está compartida públicamente en {{- link}}.",
+    "shared_locally": "Esta nota está compartida localmente en {{- link}}.",
     "help_link": "Para obtener ayuda visite <a href=\"https://triliumnext.github.io/Docs/Wiki/sharing.html\">wiki</a>."
   },
   "note_types": {
@@ -1980,7 +1991,8 @@
     "new-item-placeholder": "Ingresar título de la nota...",
     "add-column-placeholder": "Ingresar título de la columna...",
     "edit-note-title": "Haga clic para editar el título de la nota",
-    "edit-column-title": "Haga clic para editar el título de la columna"
+    "edit-column-title": "Haga clic para editar el título de la columna",
+    "remove-from-board": "Eliminar del tablero"
   },
   "content_renderer": {
     "open_externally": "Abrir externamente"
@@ -2035,7 +2047,7 @@
   },
   "call_to_action": {
     "next_theme_title": "Prueba el nuevo tema de Trilium",
-    "next_theme_message": "Estas usando actualmente el tema heredado,  ¿Te gustaría probar el nuevo tema?",
+    "next_theme_message": "Estás usando actualmente el tema heredado. ¿Te gustaría probar el nuevo tema?",
     "next_theme_button": "Prueba el nuevo tema",
     "background_effects_title": "Los efectos de fondo son ahora estables",
     "background_effects_message": "En los dispositivos Windows, los efectos de fondo ya son totalmente estables. Los efectos de fondo añaden un toque de color a la interfaz de usuario difuminando el fondo que hay detrás. Esta técnica también se utiliza en otras aplicaciones como el Explorador de Windows.",
@@ -2063,5 +2075,13 @@
   "pagination": {
     "total_notes": "{{count}} notas",
     "page_title": "Página de {{startIndex}} - {{endIndex}}"
+  },
+  "presentation_view": {
+    "edit-slide": "Editar este slide",
+    "start-presentation": "Iniciar presentación",
+    "slide-overview": "Alternar vista general de los slides"
+  },
+  "collections": {
+    "rendering_error": "No se puede mostrar contenido debido a un error."
   }
 }

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

@@ -276,7 +276,12 @@
     "preview": "Aperçu :",
     "preview_not_available": "L'aperçu n'est pas disponible pour ce type de note.",
     "restore_button": "Restaurer",
-    "delete_button": "Supprimer"
+    "delete_button": "Supprimer",
+    "diff_on": "Afficher les différences",
+    "diff_off": "Afficher le contenu",
+    "diff_on_hint": "Cliquez pour afficher les différences de la note d'origine",
+    "diff_off_hint": "Cliquez pour afficher le contenu de la note",
+    "diff_not_available": "La comparaison n'est pas disponible."
   },
   "sort_child_notes": {
     "sort_children_by": "Trier les enfants par...",
@@ -731,7 +736,8 @@
     "insert_child_note": "Insérer une note enfant",
     "delete_this_note": "Supprimer cette note",
     "error_cannot_get_branch_id": "Impossible d'obtenir branchId pour notePath '{{notePath}}'",
-    "error_unrecognized_command": "Commande non reconnue {{command}}"
+    "error_unrecognized_command": "Commande non reconnue {{command}}",
+    "note_revisions": "Révision de la note"
   },
   "note_icon": {
     "change_note_icon": "Changer l'icône de note",
@@ -1625,7 +1631,8 @@
   "link_context_menu": {
     "open_note_in_new_tab": "Ouvrir la note dans un nouvel onglet",
     "open_note_in_new_split": "Ouvrir la note dans une nouvelle division",
-    "open_note_in_new_window": "Ouvrir la note dans une nouvelle fenêtre"
+    "open_note_in_new_window": "Ouvrir la note dans une nouvelle fenêtre",
+    "open_note_in_popup": "Édition rapide"
   },
   "electron_integration": {
     "desktop-application": "Application de bureau",
@@ -1763,7 +1770,14 @@
     "reprocess_index": "Rafraîchir l'index de recherche",
     "reprocessing_index": "Mise à jour...",
     "reprocess_index_started": "L'optimisation de l'indice de recherche à commencer en arrière-plan",
-    "reprocess_index_error": "Erreur dans le rafraichissement de l'indice de recherche"
+    "reprocess_index_error": "Erreur dans le rafraichissement de l'indice de recherche",
+    "failed_notes": "Notes échouées",
+    "last_processed": "Dernier traitement",
+    "restore_provider": "Restaurer le fournisseur de la recherche",
+    "index_rebuild_progress": "Progression de la reconstruction de l'index",
+    "index_rebuilding": "Optimisation de l'index ({{percentage}}%)",
+    "index_rebuild_complete": "Optimisation de l'index terminée",
+    "index_rebuild_status_error": "Erreur lors de la vérification de l'état de reconstruction de l'index"
   },
   "ui-performance": {
     "title": "Performance",

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

@@ -3,6 +3,30 @@
     "title": "Tentang Trilium Notes",
     "homepage": "Halaman utama:",
     "app_version": "Versi Aplikasi:",
-    "db_version": "Versi DB:"
+    "db_version": "Versi DB:",
+    "sync_version": "Versi sinkronisasi:",
+    "build_date": "Tanggal pembuatan:",
+    "build_revision": "Revisi pembuatan:",
+    "data_directory": "Direktori data:"
+  },
+  "toast": {
+    "critical-error": {
+      "title": "Kesalahan kritis",
+      "message": "Telah terjadi kesalahan kritis yang mencegah aplikasi klien untuk memulai:\n\n{{message}}\n\nHal ini kemungkinan besar disebabkan oleh skrip yang gagal secara tidak terduga. Coba jalankan aplikasi dalam mode aman dan atasi masalahnya."
+    },
+    "widget-error": {
+      "title": "Gagal menginisialisasi widget",
+      "message-custom": "Widget kustom dari catatan dengan ID \"{{id}}\", berjudul \"{{title}}\" tidak dapat diinisialisasi karena:\n\n{{message}}",
+      "message-unknown": "Widget tidak dikenal tidak dapat diinisialisasi karena:\n\n{{message}}"
+    },
+    "bundle-error": {
+      "title": "Gagal memuat skrip kustom",
+      "message": "Skrip dari catatan dengan ID \"{{id}}\", berjudul \"{{title}}\" tidak dapat dijalankan karena:\n\n{{message}}"
+    }
+  },
+  "add_link": {
+    "add_link": "Tambah tautan",
+    "help_on_links": "Bantuan pada tautan",
+    "note": "Catatan"
   }
 }

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

@@ -68,7 +68,8 @@
     "switch_to_desktop_version": "デスクトップ版に切り替え",
     "configure_launchbar": "ランチャーバーの設定",
     "show_shared_notes_subtree": "共有ノートのサブツリーを表示",
-    "update_available": "バージョン {{latestVersion}} が利用可能です。クリックしてダウンロードしてください。"
+    "new-version-available": "新しいアップデートが利用可能",
+    "download-update": "{{latestVersion}} をバージョンを入手"
   },
   "left_pane_toggle": {
     "show_panel": "パネルを表示",
@@ -80,7 +81,7 @@
   },
   "clone_to": {
     "notes_to_clone": "クローンするノート",
-    "target_parent_note": "ターゲットの親ノート",
+    "target_parent_note": "対象の親ノート",
     "search_for_note_by_its_name": "ノート名で検索",
     "cloned_note_prefix_title": "クローンされたノートは、指定された接頭辞を付けてノートツリーに表示されます",
     "prefix_optional": "接頭辞（任意）",
@@ -164,7 +165,12 @@
     "first-week-info": "最初の週は、その年の最初の木曜日を含む週を指し、<a href=\"https://en.wikipedia.org/wiki/ISO_week_date#First_week\">ISO 8601</a>規格に基づいています。",
     "first-week-warning": "最初の週のオプションを変更すると、既存のウィークノートと重複する可能性があり、既存のウィークノートはそれに応じて更新されません。",
     "formatting-locale": "日付と数値のフォーマット",
-    "formatting-locale-auto": "アプリケーションの言語に基づいて"
+    "formatting-locale-auto": "アプリケーションの言語に基づいて",
+    "tuesday": "火曜日",
+    "wednesday": "水曜日",
+    "thursday": "木曜日",
+    "friday": "金曜日",
+    "saturday": "土曜日"
   },
   "tab_row": {
     "close_tab": "タブを閉じる",
@@ -276,11 +282,11 @@
     "selectAllNotes": "現在のレベルのノートをすべて選択",
     "selectNote": "ノートを選択",
     "copyNotes": "アクティブなノート（または現在の選択範囲）をクリップボードにコピーする（<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/cloning-notes.html#cloning-notes\">クローン</a>に使用）",
-    "cutNotes": "アクティブなノート（または現在の選択範囲）をクリップボードにカットする（ノートの移動に使用）",
-    "pasteNotes": "ノートをサブノートとしてアクティブノートに貼り付ける（コピーされたかカットされたかに よって、移動またはクローンになる）",
+    "cutNotes": "アクティブなノート（または現在の選択範囲）をクリップボードに切り取り（ノートの移動に使用）",
+    "pasteNotes": "ノートをサブノートとしてアクティブノートに貼り付ける（コピーされたか切り取りされたかに よって、移動またはクローンになる）",
     "deleteNotes": "ノート/サブツリーを削除",
     "editingNotes": "ノート編集",
-    "editNoteTitle": "押下するとツリーペインからタイトルの編集に移ります。タイトルの編集からEnterキーを押すと、本文の編集に移動します。<kbd>Ctrl+.</kbd> で本文の編集からツリーペインに戻ります。",
+    "editNoteTitle": "ツリーペインでEnterキーを押すと、ツリーペインからノートタイトルに切り替わります。ノートタイトルだとテキストエディタにフォーカスが切り替わります。<kbd>Ctrl+.</kbd> を押すと、エディタからツリーペインに戻ります。",
     "createEditLink": "外部リンクの作成/編集",
     "createInternalLink": "内部リンクの作成",
     "followLink": "カーソル下のリンクをたどる",
@@ -296,7 +302,7 @@
     "showDevTools": "開発者ツールを表示",
     "showSQLConsole": "SQLコンソールを表示",
     "other": "その他",
-    "quickSearch": "クイックサーチにフォーカス",
+    "quickSearch": "クイック検索にフォーカス",
     "inPageSearch": "ページ内検索",
     "showJumpToNoteDialog": "<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">「ジャンプ先」ダイアログ</a>を表示",
     "moveNoteUpDown": "ノートリストでノートを上/下に移動",
@@ -328,7 +334,8 @@
     "import-status": "インポート状況",
     "in-progress": "インポート中: {{progress}}",
     "successful": "インポートは正常に終了しました。",
-    "explodeArchives": "<code>.zip</code>, <code>.enex</code> および <code>.opml</code> アーカイブの内容を読み取ります。"
+    "explodeArchives": "<code>.zip</code>, <code>.enex</code> および <code>.opml</code> アーカイブの内容を読み取ります。",
+    "importZipRecommendation": "ZIP ファイルをインポートすると、ノートの階層はアーカイブ内のサブディレクトリ構造を反映します。"
   },
   "password_not_set": {
     "title": "パスワードが設定されていない",
@@ -346,18 +353,18 @@
   },
   "sort_child_notes": {
     "sort_children_by": "子ノートの並び替え...",
-    "sorting_criteria": "ソート基準",
+    "sorting_criteria": "並べ替えの基準",
     "title": "タイトル",
     "date_created": "作成日",
     "date_modified": "更新日",
-    "sorting_direction": "ソート方向",
+    "sorting_direction": "並べ替えの方向",
     "ascending": "昇順",
     "descending": "降順",
     "folders": "フォルダ",
-    "sort_folders_at_top": "フォルダーを一番上にソートする",
+    "sort_folders_at_top": "フォルダーを上にして並べ替える",
     "natural_sort": "自然順",
-    "sort_with_respect_to_different_character_sorting": "言語や地域によって異なる文字の並べ替えや照合順序の規則に従ってソートする。",
-    "sort": "ソート",
+    "sort_with_respect_to_different_character_sorting": "言語や地域によって異なる文字の並べ替えや照合順序の規則に従って並べ替える。",
+    "sort": "並べ替え",
     "natural_sort_language": "自然順言語",
     "the_language_code_for_natural_sort": "自然順の言語コード。例えば、中国語の場合は \"zh-CN\"。"
   },
@@ -398,9 +405,9 @@
     "protect-subtree": "サブツリーを保護",
     "unprotect-subtree": "サブツリーの保護を解除",
     "copy-clone": "コピー/クローン",
-    "clone-to": "クローン先...",
-    "cut": "カット",
-    "move-to": "移動先...",
+    "clone-to": "クローン...",
+    "cut": "切り取り",
+    "move-to": "移動...",
     "paste-into": "貼り付け",
     "paste-after": "後ろに貼り付け",
     "duplicate": "複製",
@@ -410,7 +417,7 @@
     "converted-to-attachments": "{{count}}ノートが添付ファイルに変換されました。",
     "convert-to-attachment": "添付ファイルに変換",
     "convert-to-attachment-confirm": "選択したノートを親ノートの添付ファイルに変換しますか？",
-    "open-in-popup": "クイックエディット",
+    "open-in-popup": "クイック編集",
     "hoist-note": "ホイストノート",
     "unhoist-note": "ノートをホイストしない",
     "edit-branch-prefix": "ブランチの接頭辞を編集",
@@ -528,7 +535,8 @@
     "table": "テーブル",
     "geo-map": "ジオマップ",
     "board": "ボード",
-    "include_archived_notes": "アーカイブされたノートを表示"
+    "include_archived_notes": "アーカイブされたノートを表示",
+    "presentation": "プレゼンテーション"
   },
   "note_types": {
     "geo-map": "ジオマップ",
@@ -1047,7 +1055,7 @@
     "inheritable": "継承",
     "related_notes_title": "このラベルが付いた他のノート",
     "attr_detail_title": "属性の詳細なタイトル",
-    "target_note_title": "リレーションは、ソースノートとターゲットノート間の名前付き接続です。",
+    "target_note_title": "リレーションは、ソースノートと対象のノート間の名前付き接続です。",
     "target_note": "対象のノート",
     "promoted_title": "プロモート属性はノートに目立つように表示されます。",
     "promoted": "プロモート",
@@ -1070,7 +1078,7 @@
     "sorted": "子ノートをアルファベット順に並べ替える",
     "sort_direction": "ASC（デフォルト）または DESC",
     "sort_folders_first": "フォルダ（子を持つノート）を上にして並べる",
-    "top": "指定されたノートをその親ノートの一番上に表示します（ソートされた親ノートにのみ適用されます）",
+    "top": "指定されたノートをその親ノートの一番上に表示します（並べ替えらた親ノートにのみ適用されます）",
     "hide_promoted_attributes": "このノートのプロモート属性を非表示にする",
     "read_only": "エディターは読み取り専用モードです。テキストとコードノートのみ機能します。",
     "auto_read_only_disabled": "テキスト/コードノートは、サイズが大きすぎる場合、自動的に読み取りモードに設定されます。このラベルをノートに追加することで、ノートごとにこの動作を無効にすることができます",
@@ -1144,13 +1152,13 @@
     "print_page_size": "PDF にエクスポートするときに、ページのサイズを変更します。サポートされる値: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>。"
   },
   "link_context_menu": {
-    "open_note_in_popup": "クイックエディット",
+    "open_note_in_popup": "クイック編集",
     "open_note_in_new_tab": "新しいタブでノートを開く",
     "open_note_in_new_split": "新しく分割してノートを開く",
     "open_note_in_new_window": "新しいウィンドウでノートを開く"
   },
   "note_tooltip": {
-    "quick-edit": "クイックエディット",
+    "quick-edit": "クイック編集",
     "note-has-been-deleted": "ノートは削除されました。"
   },
   "protect_note": {
@@ -1182,7 +1190,7 @@
     "options": "オプション"
   },
   "quick-search": {
-    "placeholder": "クイックサーチ",
+    "placeholder": "クイック検索",
     "searching": "検索中...",
     "no-results": "結果は見つかりませんでした",
     "more-results": "... および {{number}} 件の他の結果。",
@@ -1206,7 +1214,7 @@
   },
   "bulk_actions": {
     "bulk_actions": "一括操作",
-    "affected_notes": "影響されたノート",
+    "affected_notes": "影響されるノート",
     "include_descendants": "選択したノートの子ノートを含む",
     "available_actions": "利用可能なアクション",
     "chosen_actions": "選択されたアクション",
@@ -1238,7 +1246,7 @@
     "duplicated": "ノート \"{{title}}\" は複製されました。"
   },
   "clipboard": {
-    "cut": "ノートはクリップボードにカットされました。",
+    "cut": "ノートはクリップボードに切り取りとられました。",
     "copied": "ノートはクリップボードにコピーされました。",
     "copy_failed": "権限の問題で、クリップボードにコピーできません。",
     "copy_success": "クリップボードにコピーしました。"
@@ -1289,7 +1297,7 @@
   },
   "electron_context_menu": {
     "add-term-to-dictionary": "辞書に \"{{term}}\" を追加",
-    "cut": "カット",
+    "cut": "切り取り",
     "copy": "コピー",
     "copy-link": "リンクをコピー",
     "paste": "貼り付け",
@@ -1752,7 +1760,7 @@
     "target_parent_note": "対象の親ノート",
     "move_note_new_parent": "ノートに親が 1 つしかない場合は、ノートを新しい親に移動します (つまり、古いブランチが削除され、新しい親に新しいブランチが作成されます)",
     "clone_note_new_parent": "ノートに複数のクローン/ブランチがある場合、ノートを新しい親にクローンします（どのブランチを削除すべきか不明なため）",
-    "nothing_will_happen": "ノートをターゲットノートに移動できない場合は何も起こりません（つまり、ツリーサイクルが生じるため）",
+    "nothing_will_happen": "ノートを対象のノートに移動できない場合は何も起こりません（つまり、ツリーサイクルが生じるため）",
     "to": "次へ"
   },
   "onclick_button": {
@@ -1875,7 +1883,9 @@
     "window-on-top": "ウィンドウを最前面に維持"
   },
   "note_detail": {
-    "could_not_find_typewidget": "タイプ {{type}} の typeWidget が見つかりませんでした"
+    "could_not_find_typewidget": "タイプ {{type}} の typeWidget が見つかりませんでした",
+    "printing": "印刷中です...",
+    "printing_pdf": "PDF へのエクスポート中です..."
   },
   "watched_file_update_status": {
     "ignore_this_change": "この変更を無視する",
@@ -2068,5 +2078,10 @@
     "role_and_size": "ロール: {{role}},サイズ: {{size}}",
     "link_copied": "添付ファイルのリンクをクリップボードにコピーしました。",
     "unrecognized_role": "添付ファイルのロール「{{role}}」は認識されません。"
+  },
+  "presentation_view": {
+    "edit-slide": "このスライドを編集",
+    "start-presentation": "プレゼンテーションを開始",
+    "slide-overview": "スライドの概要を切り替え"
   }
 }

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

@@ -49,5 +49,11 @@
     "chosen_actions": "선택한 액션들",
     "execute_bulk_actions": "대량 액션들 실행",
     "bulk_actions_executed": "대량 액션들이 성공적으로 실행되었습니다."
+  },
+  "i18n": {
+    "saturday": "토요일",
+    "sunday": "일요일",
+    "first-week-of-the-year": "일년의 첫째 주",
+    "first-week-contains-first-day": "첫 번째 주에는 올해의 첫날이 포함됩니다"
   }
 }

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

@@ -289,7 +289,8 @@
     "table": "Tabel",
     "geo-map": "Hartă geografică",
     "board": "Tablă Kanban",
-    "include_archived_notes": "Afișează notițele arhivate"
+    "include_archived_notes": "Afișează notițele arhivate",
+    "presentation": "Prezentare"
   },
   "bookmark_switch": {
     "bookmark": "Semn de carte",
@@ -611,7 +612,9 @@
     "zoom_in": "Mărește",
     "zoom_out": "Micșorează",
     "show-cheatsheet": "Afișează ghidul rapid",
-    "toggle-zen-mode": "Mod zen"
+    "toggle-zen-mode": "Mod zen",
+    "new-version-available": "Actualizare nouă disponibilă",
+    "download-update": "Obțineți versiunea {{latestVersion}}"
   },
   "heading_style": {
     "markdown": "Stil Markdown",
@@ -701,7 +704,13 @@
     "first-week-has-minimum-days": "Prima săptămână are numărul minim de zile",
     "min-days-in-first-week": "Numărul minim de zile pentru prima săptămână",
     "first-week-info": "Opțiunea de prima săptămână conține prima zi de joi din an este bazată pe standardul <a href=\"https://en.wikipedia.org/wiki/ISO_week_date#First_week\">ISO 8601</a>.",
-    "first-week-warning": "Schimbarea opțiunii primei săptămâni poate cauza duplicate cu notițele săptămânale existente deoarece acestea nu vor fi actualizate retroactiv."
+    "first-week-warning": "Schimbarea opțiunii primei săptămâni poate cauza duplicate cu notițele săptămânale existente deoarece acestea nu vor fi actualizate retroactiv.",
+    "tuesday": "Marți",
+    "wednesday": "Miercuri",
+    "thursday": "Joi",
+    "friday": "Vineri",
+    "saturday": "Sâmbătă",
+    "formatting-locale-auto": "În funcție de limba aplicației"
   },
   "image_properties": {
     "copy_reference_to_clipboard": "Copiază referință în clipboard",
@@ -803,7 +812,8 @@
     "delete_this_note": "Șterge această notiță",
     "error_cannot_get_branch_id": "Nu s-a putut obține branchId-ul pentru calea „{{notePath}}”",
     "error_unrecognized_command": "Comandă nerecunoscută „{{command}}”",
-    "insert_child_note": "Inserează subnotiță"
+    "insert_child_note": "Inserează subnotiță",
+    "note_revisions": "Revizuiri ale notițelor"
   },
   "move_note": {
     "clone_note_new_parent": "clonează notița la noul părinte dacă notița are mai multe clone/ramuri (când nu este clar care ramură trebuie ștearsă)",
@@ -2069,5 +2079,10 @@
   },
   "collections": {
     "rendering_error": "Nu a putut fi afișat conținutul din cauza unei erori."
+  },
+  "presentation_view": {
+    "edit-slide": "Editați acest slide",
+    "start-presentation": "Începeți prezentarea",
+    "slide-overview": "Afișați o imagine de ansamblu a slide-urilor"
   }
 }

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

@@ -0,0 +1,8 @@
+{
+  "about": {
+    "title": "Om Trilium Notes",
+    "homepage": "Hemsida:",
+    "app_version": "App version:",
+    "db_version": "DB version:"
+  }
+}

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

@@ -646,7 +646,9 @@
     "about": "關於 TriliumNext 筆記",
     "logout": "登出",
     "show-cheatsheet": "顯示快捷鍵說明",
-    "toggle-zen-mode": "禪模式"
+    "toggle-zen-mode": "禪模式",
+    "new-version-available": "發現新更新",
+    "download-update": "取得版本 {{latestVersion}}"
   },
   "sync_status": {
     "unknown": "<p>同步狀態將在下一次同步嘗試開始後顯示。</p><p>點擊以立即觸發同步。</p>",
@@ -733,7 +735,8 @@
     "insert_child_note": "插入子筆記",
     "delete_this_note": "刪除此筆記",
     "error_cannot_get_branch_id": "無法獲取 notePath '{{notePath}}' 的 branchId",
-    "error_unrecognized_command": "無法識別的命令 {{command}}"
+    "error_unrecognized_command": "無法識別的命令 {{command}}",
+    "note_revisions": "筆記歷史版本"
   },
   "note_icon": {
     "change_note_icon": "更改筆記圖標",
@@ -746,7 +749,7 @@
     "editable": "可編輯",
     "basic_properties": "基本屬性",
     "language": "語言",
-    "configure_code_notes": "配寘代碼注釋..."
+    "configure_code_notes": "設定程式碼筆記…"
   },
   "book_properties": {
     "view_type": "視圖類型",
@@ -762,7 +765,8 @@
     "table": "表格",
     "geo-map": "地理地圖",
     "board": "看板",
-    "include_archived_notes": "顯示已封存筆記"
+    "include_archived_notes": "顯示已封存筆記",
+    "presentation": "簡報"
   },
   "edited_notes": {
     "no_edited_notes_found": "今天還沒有編輯過的筆記...",
@@ -1250,7 +1254,13 @@
     "min-days-in-first-week": "第一週的最少天數",
     "first-week-info": "年度第一週包含第一個週四是基於 <a href=\"https://en.wikipedia.org/wiki/ISO_week_date#First_week\">ISO 8601</a> 標準。",
     "first-week-warning": "變更第一週選項可能導致與現有的「週筆記」重複，現有的「週筆記」將不會相應更新。",
-    "formatting-locale": "日期和數字格式"
+    "formatting-locale": "日期和數字格式",
+    "tuesday": "週二",
+    "wednesday": "週三",
+    "thursday": "週四",
+    "friday": "週五",
+    "saturday": "週六",
+    "formatting-locale-auto": "根據應用程式的語言設定"
   },
   "backup": {
     "automatic_backup": "自動備份",
@@ -1431,7 +1441,7 @@
     "relation-map": "關聯圖",
     "note-map": "筆記地圖",
     "render-note": "渲染筆記",
-    "mermaid-diagram": "美人魚圖（Mermaid）",
+    "mermaid-diagram": "美人魚圖",
     "canvas": "畫布",
     "web-view": "網頁顯示",
     "mind-map": "心智圖",
@@ -1507,7 +1517,9 @@
     "window-on-top": "保持此視窗置頂"
   },
   "note_detail": {
-    "could_not_find_typewidget": "找不到類型為 '{{type}}' 的 typeWidget"
+    "could_not_find_typewidget": "找不到類型為 '{{type}}' 的 typeWidget",
+    "printing": "正在列印…",
+    "printing_pdf": "正在匯出為 PDF…"
   },
   "note_title": {
     "placeholder": "請輸入筆記標題..."
@@ -1627,7 +1639,7 @@
       "label": "格式工具欄",
       "floating": {
         "title": "浮動",
-        "description": "編輯工具出現在遊標附近;"
+        "description": "編輯工具出現在游標附近；"
       },
       "fixed": {
         "title": "固定",
@@ -2065,5 +2077,10 @@
   },
   "collections": {
     "rendering_error": "發現錯誤，無法顯示內容。"
+  },
+  "presentation_view": {
+    "edit-slide": "編輯此投影片",
+    "start-presentation": "開始簡報",
+    "slide-overview": "切換投影片概覽"
   }
 }

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

@@ -4,7 +4,10 @@
     "title": "Về Trilium Notes",
     "app_version": "Phiên bản:",
     "db_version": "Phiên bản DB:",
-    "sync_version": "Phiên bản liên kết:"
+    "sync_version": "Phiên bản liên kết:",
+    "build_date": "Ngày build:",
+    "build_revision": "Xây dựng bản sửa đổi:",
+    "data_directory": "Đường dẫn dữ liệu:"
   },
   "add_link": {
     "add_link": "Thêm liên kết",
@@ -34,7 +37,11 @@
   },
   "toast": {
     "critical-error": {
-      "title": "Lỗi nghiêm trọng"
+      "title": "Lỗi nghiêm trọng",
+      "message": "Đã xảy ra lỗi nghiêm trọng ngăn ứng dụng client khởi động\n\n{{message}}\n\nĐiều này có khả năng bị gây ra bởi một script hoạt động không như mong đợi. Hãy thử khởi động ứng dụng ở chế độ an toàn và giải quyết vấn đề."
+    },
+    "widget-error": {
+      "title": "Khởi tạo widget thất bại"
     }
   },
   "import": {

apps/client/src/types.d.ts

@@ -16,7 +16,7 @@ interface ElectronProcess {
 interface CustomGlobals {
     isDesktop: typeof utils.isDesktop;
     isMobile: typeof utils.isMobile;
-    device: "mobile" | "desktop";
+    device: "mobile" | "desktop" | "print";
     getComponentByEl: typeof appContext.getComponentByEl;
     getHeaders: typeof server.getHeaders;
     getReferenceLinkTitle: (href: string) => Promise<string>;
@@ -59,6 +59,9 @@ declare global {
         process?: ElectronProcess;
         glob?: CustomGlobals;
 
+        /** On the printing endpoint, set to true when the note has fully loaded and is ready to be printed/exported as PDF. */
+        _noteReady?: boolean;
+
         EXCALIDRAW_ASSET_PATH?: string;
     }
 

apps/client/src/utils/css-var.ts

@@ -0,0 +1,45 @@
+export function readCssVar(element: HTMLElement, varName: string) {
+    return new CssVarReader(getComputedStyle(element).getPropertyValue("--" + varName));
+}
+
+export class CssVarReader {
+    protected value: string;
+
+    constructor(rawValue: string) {
+        this.value = rawValue;
+    }
+
+    asString(defaultValue?: string) {
+        return (this.value) ? this.value : defaultValue;
+    }
+
+    asNumber(defaultValue?: number) {
+        let number: Number = NaN;
+
+        if (this.value) {
+            number = parseFloat(this.value);
+        }
+
+        return (!isNaN(number.valueOf()) ? number.valueOf() : defaultValue)
+    }
+
+    asEnum<T>(enumType: T, defaultValue?: T[keyof T]): T[keyof T] | undefined {
+        let result: T[keyof T] | undefined;
+
+        result = enumType[this.value as keyof T];
+       
+        if (result === undefined) {
+            result = defaultValue;
+        }
+
+        return result;
+    }
+
+    asArray(delimiter: string = " "): CssVarReader[] {
+        // Note: ignoring delimiters inside quotation marks is currently unsupported
+        let values = this.value.split(delimiter);
+        
+        return values.map((v) => new CssVarReader(v));
+    }
+
+}

apps/client/src/utils/formatters.spec.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import options from "../services/options";
+import { formatDateTime, normalizeLocale } from "./formatters";
+
+describe("formatters", () => {
+    it("tolerates incorrect locale", () => {
+        options.set("formattingLocale", "cn_TW");
+
+        expect(formatDateTime(new Date())).toBeTruthy();
+        expect(formatDateTime(new Date(), "full", "none")).toBeTruthy();
+        expect(formatDateTime(new Date(), "none", "full")).toBeTruthy();
+    });
+
+    it("normalizes locale", () => {
+        expect(normalizeLocale("zh_CN")).toBe("zh-CN");
+        expect(normalizeLocale("cn")).toBe("zh-CN");
+        expect(normalizeLocale("tw")).toBe("zh-TW");
+    });
+});

apps/client/src/utils/formatters.ts

@@ -10,7 +10,7 @@ export function formatDateTime(date: string | Date | number | null | undefined,
         return "";
     }
 
-    const locale = options.get("formattingLocale") || options.get("locale") || navigator.language;
+    const locale = normalizeLocale(options.get("formattingLocale") || options.get("locale") || navigator.language);
 
     let parsedDate;
     if (typeof date === "string" || typeof date === "number") {
@@ -26,15 +26,37 @@ export function formatDateTime(date: string | Date | number | null | undefined,
 
     if (timeStyle !== "none" && dateStyle !== "none") {
         // Format the date and time
-        const formatter = new Intl.DateTimeFormat(locale, { dateStyle, timeStyle });
-        return formatter.format(parsedDate);
+        try {
+            const formatter = new Intl.DateTimeFormat(locale, { dateStyle, timeStyle });
+            return formatter.format(parsedDate);
+        } catch (e) {
+            const formatter = new Intl.DateTimeFormat(undefined, { dateStyle, timeStyle });
+            return formatter.format(parsedDate);
+        }
     } else if (timeStyle === "none" && dateStyle !== "none") {
         // Format only the date
-        return parsedDate.toLocaleDateString(locale, { dateStyle });
+        try {
+            return parsedDate.toLocaleDateString(locale, { dateStyle });
+        } catch (e) {
+            return parsedDate.toLocaleDateString(undefined, { dateStyle });
+        }
     } else if (dateStyle === "none" && timeStyle !== "none") {
         // Format only the time
-        return parsedDate.toLocaleTimeString(locale, { timeStyle });
+        try {
+            return parsedDate.toLocaleTimeString(locale, { timeStyle });
+        } catch (e) {
+            return parsedDate.toLocaleTimeString(undefined, { timeStyle });
+        }
     }
 
     throw new Error("Incorrect state.");
 }
+
+export function normalizeLocale(locale: string) {
+    locale = locale.replaceAll("_", "-");
+    switch (locale) {
+        case "cn": return "zh-CN";
+        case "tw": return "zh-TW";
+        default: return locale;
+    }
+}

apps/client/src/widgets/buttons/global_menu.css

@@ -9,6 +9,9 @@
 }
 
 button.global-menu-button {
+    --update-badge-x-offset: 4%;
+    --update-badge-y-offset: -16%;
+
     position: relative;
     width: 100% !important;
     height: 100% !important;
@@ -55,13 +58,26 @@ button.global-menu-button {
 
 .global-menu-button-update-available {
     position: absolute;
-    inset-inline-end: -30px;
-    bottom: -30px;
-    width: 100%;
-    height: 100%;
+    display: flex;
+    width: 16px;
+    height: 16px;
+    right: calc(0px - var(--update-badge-x-offset));
+    bottom: calc(0px - var(--update-badge-y-offset));
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    background: var(--global-menu-update-available-badge-background-color, var(--admonition-tip-accent-color));
+    color: var(--global-menu-update-available-badge-color, var(--main-background-color));
+    font-size: 16px;
+    transition: transform 200ms ease-in-out;
     pointer-events: none;
 }
 
+.global-menu-button.show .global-menu-button-update-available {
+    transform: scale(.75);
+    transform-origin: center;
+}
+
 .global-menu .zoom-container {
     display: flex;
     flex-direction: row;
@@ -99,21 +115,6 @@ button.global-menu-button {
     margin-inline-end: 6px;
 }
 
-/* #region Update available */
-.global-menu-button-update-available-button {
-    width: 21px !important;
-    height: 21px !important;
-    padding: 0 !important;
-
-    border-radius: var(--button-border-radius);
-    transform: scale(0.9);
-    border: none;
-    opacity: 0.8;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
 
 .global-menu-button-wrapper:hover .global-menu-button-update-available-button {
     opacity: 1;

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

@@ -3,7 +3,7 @@ import "./global_menu.css";
 import { useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTriliumOption, useTriliumOptionBool, useTriliumOptionInt } from "../react/hooks";
 import { useContext, useEffect, useRef, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
-import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../react/FormList";
+import { FormDropdownDivider, FormDropdownSubmenu, FormListHeader, FormListItem } from "../react/FormList";
 import { CommandNames } from "../../components/app_context";
 import KeyboardShortcut from "../react/KeyboardShortcut";
 import { KeyboardActionNames } from "@triliumnext/commons";
@@ -26,7 +26,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
     const isVerticalLayout = !isHorizontalLayout;
     const parentComponent = useContext(ParentComponent);
     const { isUpdateAvailable, latestVersion } = useTriliumUpdateStatus();
-
+    
     return (
         <Dropdown
             className="global-menu"
@@ -34,7 +34,7 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
             text={<>
                 {isVerticalLayout && <VerticalLayoutIcon />}
                 {isUpdateAvailable && <div class="global-menu-button-update-available">
-                    <span className="bx bx-sync global-menu-button-update-available-button" title={t("update_available.update_available")}></span>
+                    <span className="bx bxs-down-arrow-alt global-menu-button-update-available-button" title={t("update_available.update_available")}></span>
                 </div>}
             </>}
             noDropdownListStyle
@@ -58,7 +58,14 @@ export default function GlobalMenu({ isHorizontalLayout }: { isHorizontalLayout:
             <KeyboardActionMenuItem command="showHelp" icon="bx bx-help-circle" text={t("global_menu.show_help")} />
             <KeyboardActionMenuItem command="showCheatsheet" icon="bx bxs-keyboard" text={t("global_menu.show-cheatsheet")} />
             <MenuItem command="openAboutDialog" icon="bx bx-info-circle" text={t("global_menu.about")} />
-            {isUpdateAvailable && <MenuItem command={() => window.open("https://github.com/TriliumNext/Trilium/releases/latest")} icon="bx bx-sync" text={t("global_menu.update_available", { latestVersion })} /> }
+            
+            {isUpdateAvailable &&  <>
+                <FormListHeader text={t("global_menu.new-version-available")} />
+                <MenuItem command={() => window.open("https://github.com/TriliumNext/Trilium/releases/latest")}
+                          icon="bx bx-download"
+                          text={t("global_menu.download-update", {latestVersion})} />
+            </>}
+            
             {!isElectron() && <BrowserOnlyOptions />}
         </Dropdown>
     )

apps/client/src/widgets/buttons/left_pane_toggle.css

@@ -0,0 +1,29 @@
+@keyframes left-pane-toggle-button-expand {
+    from {
+        rotate: 0deg;
+    } to {
+        rotate: 180deg;
+    }
+}
+
+@keyframes left-pane-toggle-button-collapse {
+    from {
+        rotate: 180deg;
+    } to {
+        rotate: 360deg;
+    }
+}
+
+.layout-vertical .left-pane-toggle-button::before {
+    display: block;
+}
+
+.layout-vertical .left-pane-toggle-button.action-collapse::before {
+    rotate: 360deg;
+    animation: left-pane-toggle-button-collapse 600ms ease-in-out;
+}
+
+.layout-vertical .left-pane-toggle-button.action-expand::before {
+    rotate: 180deg;
+    animation: left-pane-toggle-button-expand 600ms ease-in-out;
+}

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

@@ -1,3 +1,4 @@
+import "./left_pane_toggle.css";
 import { useEffect, useState } from "preact/hooks";
 import ActionButton from "../react/ActionButton";
 import options from "../../services/options";
@@ -18,12 +19,10 @@ export default function LeftPaneToggle({ isHorizontalLayout }: { isHorizontalLay
 
     return (
         <ActionButton
-            className={`${isHorizontalLayout ? "toggle-button" : "launcher-button"}`}
+            className={`${isHorizontalLayout ? "toggle-button" : "launcher-button"} left-pane-toggle-button ${currentLeftPaneVisible ? "action-collapse" : "action-expand"}`}
             text={currentLeftPaneVisible ? t("left_pane_toggle.hide_panel") : t("left_pane_toggle.show_panel")}
             triggerCommand={currentLeftPaneVisible ? "hideLeftPane" : "showLeftPane"}
-            icon={isHorizontalLayout
-                ? "bx bx-sidebar"
-                : (currentLeftPaneVisible ? "bx bx-chevrons-left" : "bx bx-chevrons-right" )}
+            icon={isHorizontalLayout ? "bx bx-sidebar" : "bx bx-chevrons-left"}
         />
     )
 }

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

@@ -1,4 +1,4 @@
-import { allViewTypes, ViewModeProps, ViewTypeOptions } from "./interface";
+import { allViewTypes, ViewModeMedia, ViewModeProps, ViewTypeOptions } from "./interface";
 import { useNoteContext, useNoteLabel, useNoteLabelBoolean, useTriliumEvent } from "../react/hooks";
 import FNote from "../../entities/fnote";
 import "./NoteList.css";
@@ -12,8 +12,9 @@ import BoardView from "./board";
 import { subscribeToMessages, unsubscribeToMessage as unsubscribeFromMessage } from "../../services/ws";
 import { WebSocketMessage } from "@triliumnext/commons";
 import froca from "../../services/froca";
+import PresentationView from "./presentation";
 
-interface NoteListProps<T extends object> {
+interface NoteListProps {
     note: FNote | null | undefined;
     notePath: string | null | undefined;
     highlightedTokens?: string[] | null;
@@ -21,22 +22,24 @@ interface NoteListProps<T extends object> {
     displayOnlyCollections?: boolean;
     isEnabled: boolean;
     ntxId: string | null | undefined;
+    media: ViewModeMedia;
+    onReady?: () => void;
 }
 
-export default function NoteList<T extends object>(props: Pick<NoteListProps<T>, "displayOnlyCollections">) {
+export default function NoteList<T extends object>(props: Pick<NoteListProps, "displayOnlyCollections" | "media" | "onReady">) {
     const { note, noteContext, notePath, ntxId } = useNoteContext();
     const isEnabled = noteContext?.hasNoteList();
     return <CustomNoteList note={note} isEnabled={!!isEnabled} notePath={notePath} ntxId={ntxId} {...props} />
 }
 
-export function SearchNoteList<T extends object>(props: Omit<NoteListProps<T>, "isEnabled">) {
+export function SearchNoteList<T extends object>(props: Omit<NoteListProps, "isEnabled">) {
     return <CustomNoteList {...props} isEnabled={true} />
 }
 
-function CustomNoteList<T extends object>({ note, isEnabled: shouldEnable, notePath, highlightedTokens, displayOnlyCollections, ntxId }: NoteListProps<T>) {
+export function CustomNoteList<T extends object>({ note, isEnabled: shouldEnable, notePath, highlightedTokens, displayOnlyCollections, ntxId, onReady, ...restProps }: NoteListProps) {
     const widgetRef = useRef<HTMLDivElement>(null);
     const viewType = useNoteViewType(note);
-    const noteIds = useNoteIds(note, viewType, ntxId);
+    const noteIds = useNoteIds(shouldEnable ? note : null, viewType, ntxId);
     const isFullHeight = (viewType && viewType !== "list" && viewType !== "grid");
     const [ isIntersecting, setIsIntersecting ] = useState(false);
     const shouldRender = (isFullHeight || isIntersecting || note?.type === "book");
@@ -75,12 +78,14 @@ function CustomNoteList<T extends object>({ note, isEnabled: shouldEnable, noteP
             note, noteIds, notePath,
             highlightedTokens,
             viewConfig: viewModeConfig[0],
-            saveConfig: viewModeConfig[1]
+            saveConfig: viewModeConfig[1],
+            onReady: onReady ?? (() => {}),
+            ...restProps
         }
     }
 
     return (
-        <div ref={widgetRef} className={`note-list-widget component ${isFullHeight ? "full-height" : ""}`}>
+        <div ref={widgetRef} className={`note-list-widget component ${isFullHeight && isEnabled ? "full-height" : ""}`}>
             {props && isEnabled && (
                 <div className="note-list-widget-content">
                     {getComponentByViewType(viewType, props)}
@@ -104,6 +109,8 @@ function getComponentByViewType(viewType: ViewTypeOptions, props: ViewModeProps<
             return <TableView {...props} />
         case "board":
             return <BoardView {...props} />
+        case "presentation":
+            return <PresentationView {...props} />
     }
 }
 
@@ -120,7 +127,7 @@ function useNoteViewType(note?: FNote | null): ViewTypeOptions | undefined {
     }
 }
 
-function useNoteIds(note: FNote | null | undefined, viewType: ViewTypeOptions | undefined, ntxId: string | null | undefined) {
+export function useNoteIds(note: FNote | null | undefined, viewType: ViewTypeOptions | undefined, ntxId: string | null | undefined) {
     const [ noteIds, setNoteIds ] = useState<string[]>([]);
     const [ includeArchived ] = useNoteLabelBoolean(note, "includeArchived");
 
@@ -133,7 +140,7 @@ function useNoteIds(note: FNote | null | undefined, viewType: ViewTypeOptions |
     }
 
     async function getNoteIds(note: FNote) {
-        if (viewType === "list" || viewType === "grid") {
+        if (viewType === "list" || viewType === "grid" || viewType === "table" || note.type === "search") {
             return note.getChildNoteIds();
         } else {
             return await note.getSubtreeNoteIds(includeArchived);
@@ -184,7 +191,7 @@ function useNoteIds(note: FNote | null | undefined, viewType: ViewTypeOptions |
     return noteIds;
 }
 
-function useViewModeConfig<T extends object>(note: FNote | null | undefined, viewType: ViewTypeOptions | undefined) {
+export function useViewModeConfig<T extends object>(note: FNote | null | undefined, viewType: ViewTypeOptions | undefined) {
     const [ viewConfig, setViewConfig ] = useState<[T | undefined, (data: T) => void]>();
 
     useEffect(() => {

apps/client/src/widgets/collections/board/data.ts

@@ -66,7 +66,7 @@ async function recursiveGroupBy(branches: FBranch[], byColumn: ColumnMap, groupB
         const note = await branch.getNote();
         if (!note || (!includeArchived && note.isArchived)) continue;
 
-        if (note.hasChildren()) {
+        if (note.type !== "search" && note.hasChildren()) {
             await recursiveGroupBy(note.getChildBranches(), byColumn, groupByColumn, includeArchived);
         }
 

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

@@ -1,8 +1,10 @@
 import FNote from "../../entities/fnote";
 
-export const allViewTypes = ["list", "grid", "calendar", "table", "geoMap", "board"] as const;
+export const allViewTypes = ["list", "grid", "calendar", "table", "geoMap", "board", "presentation"] as const;
 export type ViewTypeOptions = typeof allViewTypes[number];
 
+export type ViewModeMedia = "screen" | "print";
+
 export interface ViewModeProps<T extends object> {
     note: FNote;
     notePath: string;
@@ -13,4 +15,6 @@ export interface ViewModeProps<T extends object> {
     highlightedTokens: string[] | null | undefined;
     viewConfig: T | undefined;
     saveConfig(newConfig: T): void;
+    media: ViewModeMedia;
+    onReady(): void;
 }

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

@@ -106,6 +106,12 @@
     text-align: center;
 }
 
+.note-list.list-view .note-path {
+    margin-left: 0.5em;
+    vertical-align: middle;
+    opacity: 0.5;
+}
+
 /* #region Grid view */
 .note-list.grid-view .note-list-container {
     display: flex;

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

@@ -74,12 +74,12 @@ function ListNoteCard({ note, parentNote, expand, highlightedTokens }: { note: F
                 />
 
                 <Icon className="note-icon" icon={note.getIcon()} />
-                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={note.type === "search"} highlightedTokens={highlightedTokens} />
+                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={parentNote.type === "search"} highlightedTokens={highlightedTokens} />
                 <NoteAttributes note={note} />
             </h5>
 
             {isExpanded && <>
-                <NoteContent note={note} highlightedTokens={highlightedTokens} />
+                <NoteContent note={note} highlightedTokens={highlightedTokens} noChildrenList />
                 <NoteChildren note={note} parentNote={parentNote} highlightedTokens={highlightedTokens} />
             </>}
         </div>
@@ -110,7 +110,11 @@ function GridNoteCard({ note, parentNote, highlightedTokens }: { note: FNote, pa
                 <span ref={titleRef} className="note-book-title">{noteTitle}</span>
                 <NoteAttributes note={note} />
             </h5>
-            <NoteContent note={note} trim highlightedTokens={highlightedTokens} />
+            <NoteContent
+                note={note}
+                trim
+                highlightedTokens={highlightedTokens}
+            />
         </div>
     )
 }
@@ -126,12 +130,15 @@ function NoteAttributes({ note }: { note: FNote }) {
     return <span className="note-list-attributes" ref={ref} />
 }
 
-function NoteContent({ note, trim, highlightedTokens }: { note: FNote, trim?: boolean, highlightedTokens }) {
+function NoteContent({ note, trim, noChildrenList, highlightedTokens }: { note: FNote, trim?: boolean, noChildrenList?: boolean, highlightedTokens: string[] | null | undefined }) {
     const contentRef = useRef<HTMLDivElement>(null);
     const highlightSearch = useImperativeSearchHighlighlighting(highlightedTokens);
 
     useEffect(() => {
-        content_renderer.getRenderedContent(note, { trim })
+        content_renderer.getRenderedContent(note, {
+            trim,
+            noChildrenList
+        })
             .then(({ $renderedContent, type }) => {
                 if (!contentRef.current) return;
                 contentRef.current.replaceChildren(...$renderedContent);

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

@@ -0,0 +1,10 @@
+.presentation-button-bar {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+}
+
+.presentation-container {
+    width: 100%;
+    height: 100%;
+}

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

@@ -0,0 +1,245 @@
+import { ViewModeMedia, ViewModeProps } from "../interface";
+import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
+import Reveal from "reveal.js";
+import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
+import slideCustomStylesheet from "./slidejs.css?raw";
+import { buildPresentationModel, PresentationModel, PresentationSlideBaseModel } from "./model";
+import ShadowDom from "../../react/ShadowDom";
+import ActionButton from "../../react/ActionButton";
+import "./index.css";
+import { RefObject } from "preact";
+import { openInCurrentNoteContext } from "../../../components/note_context";
+import { useNoteLabelWithDefault, useTriliumEvent } from "../../react/hooks";
+import { t } from "../../../services/i18n";
+import { DEFAULT_THEME, loadPresentationTheme } from "./themes";
+import FNote from "../../../entities/fnote";
+
+export default function PresentationView({ note, noteIds, media, onReady }: ViewModeProps<{}>) {
+    const [ presentation, setPresentation ] = useState<PresentationModel>();
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [ api, setApi ] = useState<Reveal.Api>();
+    const stylesheets = usePresentationStylesheets(note, media);
+
+    function refresh() {
+        buildPresentationModel(note).then(setPresentation);
+    }
+
+    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
+        if (loadResults.getNoteIds().find(noteId => noteIds.includes(noteId)) ||
+            loadResults.getAttributeRows().find(attr => attr.noteId && attr.name?.startsWith("slide:") && noteIds.includes(attr.noteId))) {
+            refresh();
+        }
+    });
+
+    useLayoutEffect(refresh, [ note, noteIds ]);
+
+    useEffect(() => {
+        // We need to wait for Reveal.js to initialize (by setting api) and for the presentation to become available.
+        if (api && presentation) {
+            // Timeout is necessary because it otherwise can cause flakiness by rendering only the first slide.
+            setTimeout(onReady, 200);
+        }
+    }, [ api, presentation ]);
+
+    if (!presentation || !stylesheets) return;
+    const content = (
+        <>
+            {stylesheets.map(stylesheet => <style>{stylesheet}</style>)}
+            <Presentation presentation={presentation} setApi={setApi} />
+        </>
+    );
+
+    if (media === "screen") {
+        return (
+            <>
+                <ShadowDom
+                    className="presentation-container"
+                    containerRef={containerRef}
+                >{content}</ShadowDom>
+                <ButtonOverlay containerRef={containerRef} api={api} />
+            </>
+        )
+    } else if (media === "print") {
+        // Printing needs a query parameter that is read by Reveal.js.
+        const url = new URL(window.location.href);
+        url.searchParams.set("print-pdf", "");
+        window.history.replaceState({}, '', url);
+
+        // Shadow DOM doesn't work well with Reveal.js's PDF printing mechanism.
+        return content;
+    }
+}
+
+function usePresentationStylesheets(note: FNote, media: ViewModeMedia) {
+    const [ themeName ] = useNoteLabelWithDefault(note, "presentation:theme", DEFAULT_THEME);
+    const [ stylesheets, setStylesheets ] = useState<string[]>();
+
+    useLayoutEffect(() => {
+        loadPresentationTheme(themeName).then((themeStylesheet) => {
+            let stylesheets = [
+                slideBaseStylesheet,
+                themeStylesheet,
+                slideCustomStylesheet
+            ];
+            if (media === "screen") {
+                // We are rendering in the shadow DOM, so the global variables are not set correctly.
+                stylesheets = stylesheets.map(stylesheet => stylesheet.replace(/:root/g, ":host"));
+            }
+            setStylesheets(stylesheets);
+        });
+    }, [ themeName ]);
+
+    return stylesheets;
+}
+
+function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivElement>, api: Reveal.Api | undefined }) {
+    const [ isOverviewActive, setIsOverviewActive ] = useState(false);
+    useEffect(() => {
+        if (!api) return;
+        setIsOverviewActive(api.isOverview());
+        const onEnabled = () => setIsOverviewActive(true);
+        const onDisabled = () => setIsOverviewActive(false);
+        api.on("overviewshown", onEnabled);
+        api.on("overviewhidden", onDisabled);
+        return () => {
+            api.off("overviewshown", onEnabled);
+            api.off("overviewhidden", onDisabled);
+        };
+    }, [ api ]);
+
+    return (
+        <div className="presentation-button-bar">
+            <div className="floating-buttons-children">
+                <ActionButton
+                    className="floating-button"
+                    icon="bx bx-edit"
+                    text={t("presentation_view.edit-slide")}
+                    noIconActionClass
+                    onClick={e => {
+                        const currentSlide = api?.getCurrentSlide();
+                        const noteId = getNoteIdFromSlide(currentSlide);
+
+                        if (noteId) {
+                            openInCurrentNoteContext(e, noteId);
+                        }
+                    }}
+                />
+
+                <ActionButton
+                    className="floating-button"
+                    icon="bx bx-grid-horizontal"
+                    text={t("presentation_view.slide-overview")}
+                    active={isOverviewActive}
+                    noIconActionClass
+                    onClick={() => api?.toggleOverview()}
+                />
+
+                <ActionButton
+                    className="floating-button"
+                    icon="bx bx-fullscreen"
+                    text={t("presentation_view.start-presentation")}
+                    noIconActionClass
+                    onClick={() => containerRef.current?.requestFullscreen()}
+                />
+            </div>
+        </div>
+    )
+}
+
+function Presentation({ presentation, setApi } : { presentation: PresentationModel, setApi: (api: Reveal.Api | undefined) => void }) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const [revealApi, setRevealApi] = useState<Reveal.Api>();
+
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const api = new Reveal(containerRef.current, {
+            transition: "slide",
+            embedded: true,
+            pdfMaxPagesPerSlide: 1,
+            keyboardCondition(event) {
+                // Full-screen requests sometimes fail, we rely on the UI button instead.
+                if (event.key === "f") {
+                    return false;
+                }
+
+                return true;
+            },
+        });
+        api.initialize().then(() => {
+            setRevealApi(api);
+            setApi(api);
+
+            if (containerRef.current) {
+                rewireLinks(containerRef.current, api);
+            }
+        });
+
+        return () => {
+            api.destroy();
+            setRevealApi(undefined);
+            setApi(undefined);
+        }
+    }, []);
+
+    useEffect(() => {
+        revealApi?.sync();
+    }, [ presentation, revealApi ]);
+
+    return (
+        <div ref={containerRef} className="reveal">
+            <div className="slides">
+                {presentation.slides?.map(slide => {
+                    if (!slide.verticalSlides) {
+                        return <Slide key={slide.noteId} slide={slide} />
+                    } else {
+                        return (
+                            <section>
+                                <Slide key={slide.noteId} slide={slide} />
+                                {slide.verticalSlides.map(slide => <Slide key={slide.noteId} slide={slide} /> )}
+                            </section>
+                        );
+                    }
+                })}
+            </div>
+        </div>
+    )
+
+}
+
+function Slide({ slide }: { slide: PresentationSlideBaseModel }) {
+    return (
+        <section
+            id={`slide-${slide.noteId}`}
+            data-note-id={slide.noteId}
+            data-background-color={slide.backgroundColor}
+            data-background-gradient={slide.backgroundGradient}
+            dangerouslySetInnerHTML={slide.content}
+        />
+    );
+}
+
+function getNoteIdFromSlide(slide: HTMLElement | undefined) {
+    if (!slide) return;
+    return slide.dataset.noteId;
+}
+
+function rewireLinks(container: HTMLElement, api: Reveal.Api) {
+    const links = container.querySelectorAll<HTMLLinkElement>("a.reference-link");
+    for (const link of links) {
+        link.addEventListener("click", () => {
+            /**
+             * Reveal.js has built-in navigation by either index or ID. However, the ID-based navigation doesn't work because it tries to look
+             * outside the shadom DOM (via document.getElementById).
+             */
+            const url = new URL(link.href);
+            if (!url.hash.startsWith("#/slide-")) return;
+            const targetId = url.hash.substring(8);
+            const slide = container.querySelector<HTMLElement>(`#slide-${targetId}`);
+            if (!slide) return;
+
+            const { h, v, f } = api.getIndices(slide);
+            api.slide(h, v, f);
+        });
+    }
+}

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

@@ -0,0 +1,83 @@
+import { beforeAll, describe, expect, it } from "vitest";
+import { buildNote } from "../../../test/easy-froca";
+import FNote from "../../../entities/fnote";
+import { buildPresentationModel, PresentationModel } from "./model";
+
+let presentationNote!: FNote;
+let data!: PresentationModel;
+
+describe("Presentation model", () => {
+    beforeAll(async () => {
+        presentationNote = buildNote({
+            title: "Presentation",
+            id: "presentation",
+            "#viewType": "presentation",
+            "children": [
+                {
+                    id: "slide1",
+                    title: "First slide",
+                    children: [
+                        {
+                            id: "slide2",
+                            title: "First-sub",
+                            content: `<p>Go to&nbsp;<a class="reference-link" href="#root/other">Other note</a>.</p>`
+                        }
+                    ]
+                },
+                {
+                    title: "Second slide",
+                    id: "slide3",
+                    content: `<p>Go to&nbsp;<a class="reference-link" href="#root/presentation/slide1">First slide</a>.</p>`,
+                    children: [
+                        {
+                            id: "slide4",
+                            title: "Second-sub",
+                            content: `<p>Go to&nbsp;<a class="reference-link" href="#root/presentation/slide2">First-sub</a>.</p>`,
+                        }
+                    ]
+                }
+            ]
+        });
+        buildNote({
+            id: "other",
+            title: "Other note"
+        });
+        data = await buildPresentationModel(presentationNote);
+    });
+
+    it("it correctly maps horizontal and vertical slides", () => {
+        expect(data).toMatchObject({
+            slides: [
+                {
+                    noteId: "slide1",
+                    verticalSlides: [
+                        {
+                            noteId: "slide2"
+                        }
+                    ]
+                },
+                {
+                    noteId: "slide3",
+                    verticalSlides: [
+                        {
+                            noteId: "slide4"
+                        }
+                    ]
+                }
+            ]
+        })
+    });
+
+    it("empty slides don't render children", () => {
+        expect(data.slides[0].content.__html).toStrictEqual("");
+    });
+
+    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 class="bx bx-folder"></span>First slide</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 class="bx bx-note"></span>First-sub</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 class="bx bx-note"></span>Other note</a>.</p></div>`);
+    });
+});

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

@@ -0,0 +1,73 @@
+import { NoteType } from "@triliumnext/commons";
+import FNote from "../../../entities/fnote";
+import contentRenderer from "../../../services/content_renderer";
+
+type DangerouslySetInnerHTML = { __html: string; };
+
+/** A top-level slide with optional vertical slides. */
+interface PresentationSlideModel extends PresentationSlideBaseModel {
+    verticalSlides: PresentationSlideBaseModel[] | undefined;
+}
+
+/** Either a top-level slide or a vertical slide. */
+export interface PresentationSlideBaseModel {
+    noteId: string;
+    type: NoteType;
+    content: DangerouslySetInnerHTML;
+    backgroundColor?: string;
+    backgroundGradient?: string;
+}
+
+export interface PresentationModel {
+    slides: PresentationSlideModel[];
+}
+
+export async function buildPresentationModel(note: FNote): Promise<PresentationModel> {
+    const slideNotes = await note.getChildNotes();
+    const slides: PresentationSlideModel[] = await Promise.all(slideNotes.map(async slideNote => ({
+        ...(await buildSlideModel(slideNote)),
+        verticalSlides: note.type !== "search" ? await buildVerticalSlides(slideNote) : undefined
+    })));
+
+    postProcessSlides(slides);
+    return { slides };
+}
+
+async function buildVerticalSlides(parentSlideNote: FNote): Promise<undefined | PresentationSlideBaseModel[]> {
+    const children = await parentSlideNote.getChildNotes();
+    if (!children.length) return;
+
+    const slides: PresentationSlideBaseModel[] = await Promise.all(children.map(buildSlideModel));
+
+    return slides;
+}
+
+async function buildSlideModel(note: FNote): Promise<PresentationSlideBaseModel> {
+    const slideBackground = note.getLabelValue("slide:background") ?? undefined;
+    const isGradient = slideBackground?.includes("gradient(");
+
+    return {
+        noteId: note.noteId,
+        type: note.type,
+        content: await processContent(note),
+        backgroundColor: !isGradient ? slideBackground : undefined,
+        backgroundGradient: isGradient ? slideBackground : undefined
+    }
+}
+
+async function processContent(note: FNote): Promise<DangerouslySetInnerHTML> {
+    const { $renderedContent } = await contentRenderer.getRenderedContent(note, {
+        noChildrenList: true
+    });
+    return { __html: $renderedContent.html() };
+}
+
+async function postProcessSlides(slides: (PresentationSlideModel | PresentationSlideBaseModel)[]) {
+    for (const slide of slides) {
+        if (slide.type !== "text") continue;
+        slide.content.__html = slide.content.__html.replaceAll(/href="[^"]*#root[a-zA-Z0-9_\/]*\/([a-zA-Z0-9_]+)[^"]*"/g, `href="#/slide-$1"`);
+        if ("verticalSlides" in slide && slide.verticalSlides) {
+            postProcessSlides(slide.verticalSlides);
+        }
+    }
+}

apps/client/src/widgets/collections/presentation/slidejs.css

@@ -0,0 +1,29 @@
+figure img {
+    aspect-ratio: unset !important;
+    height: auto !important;
+}
+
+span.katex-html {
+    display: none !important;
+}
+
+p:has(span.text-tiny),
+p:has(span.text-small),
+p:has(span.text-big),
+p:has(span.text-huge) {
+    line-height: unset !important;
+}
+
+span.text-tiny { font-size: 0.5em; }
+span.text-small { font-size: 0.75em; }
+span.text-big { font-size: 1.5em; }
+span.text-huge { font-size: 2em; }
+
+footer.file-footer {
+    display: none !important;
+}
+
+.reveal video {
+    max-width: unset;
+    max-height: unset;
+}

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

@@ -0,0 +1,10 @@
+import { it, describe } from "vitest";
+import { getPresentationThemes, loadPresentationTheme } from "./themes";
+
+describe("Presentation themes", () => {
+    it("can load all themes", async () => {
+        const themes = getPresentationThemes();
+
+        await Promise.all(themes.map(theme => loadPresentationTheme(theme.id)));
+    });
+});

apps/client/src/widgets/collections/presentation/themes.ts

@@ -0,0 +1,58 @@
+export const DEFAULT_THEME = "white";
+
+const themes = {
+    black: {
+        name: "Black",
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
+    },
+    white: {
+        name: "White",
+        loadTheme: () => import("reveal.js/dist/theme/white.css?raw")
+    },
+    beige: {
+        name: "Beige",
+        loadTheme: () => import("reveal.js/dist/theme/beige.css?raw")
+    },
+    serif: {
+        name: "Serif",
+        loadTheme: () => import("reveal.js/dist/theme/serif.css?raw")
+    },
+    simple: {
+        name: "Simple",
+        loadTheme: () => import("reveal.js/dist/theme/simple.css?raw")
+    },
+    solarized: {
+        name: "Solarized",
+        loadTheme: () => import("reveal.js/dist/theme/solarized.css?raw")
+    },
+    moon: {
+        name: "Moon",
+        loadTheme: () => import("reveal.js/dist/theme/moon.css?raw")
+    },
+    dracula: {
+        name: "Dracula",
+        loadTheme: () => import("reveal.js/dist/theme/dracula.css?raw")
+    },
+    sky: {
+        name: "Sky",
+        loadTheme: () => import("reveal.js/dist/theme/sky.css?raw")
+    },
+    blood: {
+        name: "Blood",
+        loadTheme: () => import("reveal.js/dist/theme/blood.css?raw")
+    }
+} as const;
+
+export function getPresentationThemes() {
+    return Object.entries(themes).map(([ id, theme ]) => ({
+        id: id,
+        name: theme.name
+    }));
+}
+
+export async function loadPresentationTheme(name: keyof typeof themes | string) {
+    let theme = themes[name];
+    if (!theme) theme = themes[DEFAULT_THEME];
+
+    return (await theme.loadTheme()).default;
+}

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

@@ -2,7 +2,7 @@ import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "p
 import { ViewModeProps } from "../interface";
 import { buildColumnDefinitions } from "./columns";
 import getAttributeDefinitionInformation, { buildRowDefinitions, TableData } from "./rows";
-import { useLegacyWidget, useNoteLabelBoolean, useNoteLabelInt, useSpacedUpdate, useTriliumEvent } from "../../react/hooks";
+import { useLegacyWidget, useNoteLabelBoolean, useNoteLabelInt, useTriliumEvent } from "../../react/hooks";
 import Tabulator from "./tabulator";
 import { Tabulator as VanillaTabulator, SortModule, FormatModule, InteractionModule, EditModule, ResizeColumnsModule, FrozenColumnsModule, PersistenceModule, MoveColumnsModule, MoveRowsModule, ColumnDefinition, DataTreeModule, Options, RowComponent} from 'tabulator-tables';
 import { useContextMenu } from "./context_menu";
@@ -17,6 +17,7 @@ import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
 import attributes from "../../../services/attributes";
 import { RefObject } from "preact";
 import SpacedUpdate from "../../../services/spaced_update";
+import froca from "../../../services/froca";
 
 interface TableConfig {
     tableData: {
@@ -132,25 +133,27 @@ function useData(note: FNote, noteIds: string[], viewConfig: TableConfig | undef
     const [ isSorted ] = useNoteLabelBoolean(note, "sorted");
     const [ movableRows, setMovableRows ] = useState(false);
 
-    function refresh() {
+    async function refresh() {
         const info = getAttributeDefinitionInformation(note);
 
-        buildRowDefinitions(note, info, includeArchived, maxDepth).then(({ definitions: rowData, hasSubtree: hasChildren, rowNumber }) => {
-            const columnDefs = buildColumnDefinitions({
-                info,
-                movableRows,
-                existingColumnData: viewConfig?.tableData?.columns,
-                rowNumberHint: rowNumber,
-                position: newAttributePosition.current ?? undefined
-            });
-            setColumnDefs(columnDefs);
-            setRowData(rowData);
-            setHasChildren(hasChildren);
-            resetNewAttributePosition();
+        // Ensure all note IDs are loaded.
+        await froca.getNotes(noteIds);
+
+        const { definitions: rowData, hasSubtree: hasChildren, rowNumber } = await buildRowDefinitions(note, info, includeArchived, maxDepth);
+        const columnDefs = buildColumnDefinitions({
+            info,
+            movableRows,
+            existingColumnData: viewConfig?.tableData?.columns,
+            rowNumberHint: rowNumber,
+            position: newAttributePosition.current ?? undefined
         });
+        setColumnDefs(columnDefs);
+        setRowData(rowData);
+        setHasChildren(hasChildren);
+        resetNewAttributePosition();
     }
 
-    useEffect(refresh, [ note, noteIds, maxDepth, movableRows ]);
+    useEffect(() => { refresh() }, [ note, noteIds, maxDepth, movableRows ]);
 
     useTriliumEvent("entitiesReloaded", ({ loadResults}) => {
         // React to column changes.

apps/client/src/widgets/collections/table/rows.ts

@@ -20,6 +20,10 @@ export async function buildRowDefinitions(parentNote: FNote, infos: AttributeDef
     let hasSubtree = false;
     let rowNumber = childBranches.length;
 
+    if (parentNote.type === "search") {
+        maxDepth = 0;
+    }
+
     for (const branch of childBranches) {
         const note = await branch.getNote();
         if (!note || (!includeArchived && note.isArchived)) {

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

@@ -37,7 +37,7 @@ export default function ImportDialog() {
             onSubmit={async () => {
                 if (!files || !parentNoteId) {
                     return;
-                }                
+                }
 
                 const options: UploadFilesOptions = {
                     safeImport: boolToString(safeImport),
@@ -51,11 +51,19 @@ export default function ImportDialog() {
                 setShown(false);
                 await importService.uploadFiles("notes", parentNoteId, Array.from(files), options);
             }}
-            onHidden={() => setShown(false)}
+            onHidden={() => {
+                setShown(false);
+                setFiles(null);
+            }}
             footer={<Button text={t("import.import")} primary disabled={!files} />}
             show={shown}
         >
-            <FormGroup name="files" label={t("import.chooseImportFile")} description={<>{t("import.importDescription")} <strong>{ noteTitle }</strong></>}>
+            <FormGroup name="files" label={t("import.chooseImportFile")} description={
+                <>
+                    {t("import.importDescription")} <strong>{ noteTitle }</strong>.<br />
+                    {t("import.importZipRecommendation")}
+                </>
+            }>
                 <FormFileUpload multiple onChange={setFiles} />
             </FormGroup>
 
@@ -82,7 +90,7 @@ export default function ImportDialog() {
                     currentValue={codeImportedAsCode} onChange={setCodeImportedAsCode}
                 />
                 <FormCheckbox
-                    name="replace-underscores-with-spaces" label={t("import.replaceUnderscoresWithSpaces")} 
+                    name="replace-underscores-with-spaces" label={t("import.replaceUnderscoresWithSpaces")}
                     currentValue={replaceUnderscoresWithSpaces} onChange={setReplaceUnderscoresWithSpaces}
                 />
             </FormMultiGroup>
@@ -92,4 +100,4 @@ export default function ImportDialog() {
 
 function boolToString(value: boolean) {
     return value ? "true" : "false";
-}
+}

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

@@ -26,7 +26,7 @@ export interface PromptDialogOptions {
     readOnly?: boolean;
 }
 
-export default function PromptDialog() {    
+export default function PromptDialog() {
     const modalRef = useRef<HTMLDivElement>(null);
     const formRef = useRef<HTMLFormElement>(null);
     const labelRef = useRef<HTMLLabelElement>(null);
@@ -35,7 +35,7 @@ export default function PromptDialog() {
     const [ value, setValue ] = useState("");
     const [ shown, setShown ] = useState(false);
     const submitValue = useRef<string>(null);
-    
+
     useTriliumEvent("showPromptDialog", (newOpts) => {
         opts.current = newOpts;
         setValue(newOpts.defaultValue ?? "");
@@ -48,7 +48,7 @@ export default function PromptDialog() {
             title={opts.current?.title ?? t("prompt.title")}
             size="lg"
             zIndex={2000}
-            modalRef={modalRef} formRef={formRef}            
+            modalRef={modalRef} formRef={formRef}
             onShown={() => {
                 opts.current?.shown?.({
                     $dialog: refToJQuerySelector(modalRef),
@@ -57,6 +57,7 @@ export default function PromptDialog() {
                     $form: refToJQuerySelector(formRef)
                 });
                 answerRef.current?.focus();
+                answerRef.current?.select();
             }}
             onSubmit={() => {
                 submitValue.current = value;

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

@@ -28,6 +28,7 @@ export default function ProtectedSessionPasswordDialog() {
         >
             <label htmlFor="protected-session-password" className="col-form-label">{t("protected_session_password.form_label")}</label>
             <FormTextBox
+                inputRef={inputRef}
                 id="protected-session-password"
                 name="protected-session-password"
                 type="password"

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

@@ -40,14 +40,17 @@ export default function UploadAttachmentsDialog() {
                 if (!files || !parentNoteId) {
                     return;
                 }
-                
+
                 setIsUploading(true);
                 const filesCopy = Array.from(files);
                 await importService.uploadFiles("attachments", parentNoteId, filesCopy, { shrinkImages });
                 setIsUploading(false);
                 setShown(false);
             }}
-            onHidden={() => setShown(false)}
+            onHidden={() => {
+                setShown(false);
+                setFiles(null);
+            }}
             show={shown}
         >
             <FormGroup name="files" label={t("upload_attachments.choose_files")} description={description}>
@@ -55,7 +58,7 @@ export default function UploadAttachmentsDialog() {
             </FormGroup>
 
             <FormGroup name="shrink-images" label={t("upload_attachments.options")}>
-                <FormCheckbox                    
+                <FormCheckbox
                     hint={t("upload_attachments.tooltip")} label={t("upload_attachments.shrink_images")}
                     currentValue={shrinkImages} onChange={setShrinkImages}
                 />

apps/client/src/widgets/note_detail.ts

@@ -28,11 +28,12 @@ import ContentWidgetTypeWidget from "./type_widgets/content_widget.js";
 import AttachmentListTypeWidget from "./type_widgets/attachment_list.js";
 import AttachmentDetailTypeWidget from "./type_widgets/attachment_detail.js";
 import MindMapWidget from "./type_widgets/mind_map.js";
-import utils from "../services/utils.js";
+import utils, { isElectron } from "../services/utils.js";
 import type { NoteType } from "../entities/fnote.js";
 import type TypeWidget from "./type_widgets/type_widget.js";
 import { MermaidTypeWidget } from "./type_widgets/mermaid.js";
 import AiChatTypeWidget from "./type_widgets/ai_chat.js";
+import toast from "../services/toast.js";
 
 const TPL = /*html*/`
 <div class="note-detail">
@@ -140,6 +141,13 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
     doRender() {
         this.$widget = $(TPL);
         this.contentSized();
+
+        if (utils.isElectron()) {
+            const { ipcRenderer } = utils.dynamicRequire("electron");
+            ipcRenderer.on("print-done", () => {
+                toast.closePersistent("printing");
+            });
+        }
     }
 
     async refresh() {
@@ -297,18 +305,53 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
             return;
         }
 
-        // Trigger in timeout to dismiss the menu while printing.
-        setTimeout(window.print, 0);
+        toast.showPersistent({
+            icon: "bx bx-loader-circle bx-spin",
+            message: t("note_detail.printing"),
+            id: "printing"
+        });
+
+        if (isElectron()) {
+            const { ipcRenderer } = utils.dynamicRequire("electron");
+            ipcRenderer.send("print-note", {
+                notePath: this.notePath
+            });
+        } else {
+            const iframe = document.createElement('iframe');
+            iframe.src = `?print#${this.notePath}`;
+            iframe.className = "print-iframe";
+            document.body.appendChild(iframe);
+            iframe.onload = () => {
+                if (!iframe.contentWindow) {
+                    toast.closePersistent("printing");
+                    document.body.removeChild(iframe);
+                    return;
+                }
+
+                iframe.contentWindow.addEventListener("note-ready", () => {
+                    toast.closePersistent("printing");
+                    iframe.contentWindow?.print();
+                    document.body.removeChild(iframe);
+                });
+            };
+        }
     }
 
     async exportAsPdfEvent() {
-        if (!this.noteContext?.isActive() || !this.note) {
+        if (!this.noteContext?.isActive() || !this.note || !this.notePath) {
             return;
         }
 
+        toast.showPersistent({
+            icon: "bx bx-loader-circle bx-spin",
+            message: t("note_detail.printing_pdf"),
+            id: "printing"
+        });
+
         const { ipcRenderer } = utils.dynamicRequire("electron");
         ipcRenderer.send("export-as-pdf", {
             title: this.note.title,
+            notePath: this.notePath,
             pageSize: this.note.getAttributeValue("label", "printPageSize") ?? "Letter",
             landscape: this.note.hasAttribute("label", "printLandscape")
         });

apps/client/src/widgets/note_tree.ts

@@ -905,7 +905,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         const colorClass = note.getColorClass();
 
         if (colorClass) {
-            extraClasses.push(colorClass);
+            extraClasses.push(...["tinted", colorClass]);
         }
 
         return extraClasses.join(" ");

apps/client/src/widgets/note_wrapper.ts

@@ -78,6 +78,10 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
             return true;
         }
 
+        if (note.type === "search" && ![ "grid", "list" ].includes(note.getLabelValue("viewType") ?? "list")) {
+            return true;
+        }
+
         return !!note?.isLabelTruthy("fullContentWidth");
     }
 
@@ -87,7 +91,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
         const noteId = this.noteContext?.noteId;
         if (
             loadResults.isNoteReloaded(noteId) ||
-            loadResults.getAttributeRows().find((attr) => attr.type === "label" && ["cssClass", "language"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.noteContext?.note))
+            loadResults.getAttributeRows().find((attr) => attr.type === "label" && ["cssClass", "language", "viewType"].includes(attr.name ?? "") && attributeService.isAffecting(attr, this.noteContext?.note))
         ) {
             this.refresh();
         }

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

@@ -5,16 +5,18 @@ import keyboard_actions from "../../services/keyboard_actions";
 
 export interface ActionButtonProps {
     text: string;
-    titlePosition?: "bottom" | "left";
+    titlePosition?: "top" | "right" | "bottom" | "left";
     icon: string;
     className?: string;
     onClick?: (e: MouseEvent) => void;
     triggerCommand?: CommandNames;
     noIconActionClass?: boolean;
     frame?: boolean;
+    active?: boolean;
+    disabled?: boolean;
 }
 
-export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame }: ActionButtonProps) {
+export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame, active, disabled }: ActionButtonProps) {
     const buttonRef = useRef<HTMLButtonElement>(null);
     const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
 
@@ -32,8 +34,9 @@ export default function ActionButton({ text, icon, className, onClick, triggerCo
 
     return <button
         ref={buttonRef}
-        class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""}`}
+        class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""} ${disabled ? "disabled" : ""} ${active ? "active" : ""}`}
         onClick={onClick}
         data-trigger-command={triggerCommand}
+        disabled={disabled}
     />;
 }

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

@@ -1,11 +1,10 @@
 import { Dropdown as BootstrapDropdown } from "bootstrap";
 import { ComponentChildren } from "preact";
-import { CSSProperties } from "preact/compat";
+import { CSSProperties, HTMLProps } from "preact/compat";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 import { useUniqueName } from "./hooks";
 
-export interface DropdownProps {
-    className?: string;
+export interface DropdownProps extends Pick<HTMLProps<HTMLDivElement>, "id" | "className"> {
     buttonClassName?: string;
     isStatic?: boolean;
     children: ComponentChildren;
@@ -22,7 +21,7 @@ export interface DropdownProps {
     forceShown?: boolean;
 }
 
-export default function Dropdown({ className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown }: DropdownProps) {
+export default function Dropdown({ id, className, buttonClassName, isStatic, children, title, text, dropdownContainerStyle, dropdownContainerClassName, hideToggleArrow, iconAction, disabled, noSelectButtonStyle, noDropdownListStyle, forceShown }: DropdownProps) {
     const dropdownRef = useRef<HTMLDivElement | null>(null);
     const triggerRef = useRef<HTMLButtonElement | null>(null);
 
@@ -74,7 +73,7 @@ export default function Dropdown({ className, buttonClassName, isStatic, childre
                 aria-haspopup="true"
                 aria-expanded="false"
                 title={title}
-                id={ariaId}
+                id={id ?? ariaId}
                 disabled={disabled}
             >
                 {text}

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

@@ -1,6 +1,6 @@
 import { Ref } from "preact";
 import Button, { ButtonProps } from "./Button";
-import { useRef } from "preact/hooks";
+import { useEffect, useRef } from "preact/hooks";
 
 interface FormFileUploadProps {
     name?: string;
@@ -11,6 +11,11 @@ interface FormFileUploadProps {
 }
 
 export default function FormFileUpload({ inputRef, name, onChange, multiple, hidden }: FormFileUploadProps) {
+    // Prevent accidental reuse of a file selected in a previous instance of the upload form.
+    useEffect(() => {
+        onChange(null);
+    }, []);
+
     return (
         <label class="tn-file-input tn-input-field" style={hidden ? { display: "none" } : undefined}>
             <input
@@ -18,7 +23,7 @@ export default function FormFileUpload({ inputRef, name, onChange, multiple, hid
                 name={name}
                 type="file"
                 class="form-control-file"
-                multiple={multiple}                
+                multiple={multiple}
                 onChange={e => onChange((e.target as HTMLInputElement).files)} />
         </label>
     )
@@ -26,7 +31,7 @@ export default function FormFileUpload({ inputRef, name, onChange, multiple, hid
 
 /**
  * Combination of a button with a hidden file upload field.
- * 
+ *
  * @param param the change listener for the file upload and the properties for the button.
  */
 export function FormFileUploadButton({ onChange, ...buttonProps }: Omit<ButtonProps, "onClick"> & Pick<FormFileUploadProps, "onChange">) {
@@ -39,10 +44,10 @@ export function FormFileUploadButton({ onChange, ...buttonProps }: Omit<ButtonPr
                 onClick={() => inputRef.current?.click()}
             />
             <FormFileUpload
-                inputRef={inputRef} 
+                inputRef={inputRef}
                 hidden
                 onChange={onChange}
             />
         </>
     )
-}
+}

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

@@ -9,22 +9,26 @@ interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "
 }
 
 export default function FormTextBox({ inputRef, className, type, currentValue, onChange, onBlur, autoFocus, ...rest}: FormTextBoxProps) {
-    if (type === "number" && currentValue) {
-        const { min, max } = rest;
-        const currentValueNum = parseInt(currentValue, 10);
-        if (min && currentValueNum < parseInt(String(min), 10)) {
-            currentValue = String(min);
-        } else if (max && currentValueNum > parseInt(String(max), 10)) {
-            currentValue = String(max);
-        }
-    }
-
     useEffect(() => {
         if (autoFocus) {
             inputRef?.current?.focus();
         }
     }, []);
 
+    function applyLimits(value: string) {
+        if (type === "number") {
+            const { min, max } = rest;
+            const currentValueNum = parseInt(value, 10);
+            if (min && currentValueNum < parseInt(String(min), 10)) {
+                return String(min);
+            } else if (max && currentValueNum > parseInt(String(max), 10)) {
+                return String(max);
+            }
+        }
+
+        return value;
+    }
+
     return (
         <input
             ref={inputRef}
@@ -33,11 +37,13 @@ export default function FormTextBox({ inputRef, className, type, currentValue, o
             value={currentValue}
             onInput={onChange && (e => {
                 const target = e.currentTarget;
-                onChange?.(target.value, target.validity);
+                const currentValue = applyLimits(e.currentTarget.value);
+                onChange?.(currentValue, target.validity);
             })}
-            onBlur={onBlur && (e => {
-                const target = e.currentTarget;
-                onBlur(target.value);
+            onBlur={(e => {
+                const currentValue = applyLimits(e.currentTarget.value);
+                e.currentTarget.value = currentValue;
+                onBlur?.(currentValue);
             })}
             {...rest}
         />
@@ -49,6 +55,6 @@ export function FormTextBoxWithUnit(props: FormTextBoxProps & { unit: string })
         <label class="input-group tn-number-unit-pair">
             <FormTextBox {...props} />
             <span class="input-group-text">{props.unit}</span>
-        </label>        
+        </label>
     )
-}
+}

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

@@ -0,0 +1,28 @@
+import { ComponentChildren, HTMLAttributes, JSX, RefObject, render } from "preact";
+import { useEffect, useState } from "preact/hooks";
+import { useSyncedRef } from "./hooks";
+
+interface ShadowDomProps extends Omit<HTMLAttributes<HTMLDivElement>, "ref"> {
+    children: ComponentChildren;
+    containerRef?: RefObject<HTMLDivElement>;
+}
+
+export default function ShadowDom({ children, containerRef: externalContainerRef, ...containerProps }: ShadowDomProps) {
+    const containerRef = useSyncedRef<HTMLDivElement>(externalContainerRef, null);
+    const [ shadowRoot, setShadowRoot ] = useState<ShadowRoot | null>(null);
+
+    // Create the shadow root.
+    useEffect(() => {
+        if (!containerRef.current) return;
+        const shadow = containerRef.current.attachShadow({ mode: "open" });
+        setShadowRoot(shadow);
+    }, []);
+
+    // Render the child elements.
+    useEffect(() => {
+        if (!shadowRoot) return;
+        render(<>{children}</>, shadowRoot);
+    }, [ shadowRoot, children ]);
+
+    return <div ref={containerRef} {...containerProps} />
+}

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

@@ -5,7 +5,7 @@ import { FormDropdownDivider, FormListBadge, FormListItem } from "../react/FormL
 import { getAvailableLocales, t } from "../../services/i18n";
 import { useNoteLabel, useNoteLabelBoolean, useNoteProperty, useTriliumEvent, useTriliumOption } from "../react/hooks";
 import mime_types from "../../services/mime_types";
-import { Locale, NoteType, ToggleInParentResponse } from "@triliumnext/commons";
+import { Locale, LOCALES, NoteType, ToggleInParentResponse } from "@triliumnext/commons";
 import server from "../../services/server";
 import dialog from "../../services/dialog";
 import FormToggle from "../react/FormToggle";
@@ -20,6 +20,7 @@ import { TabContext } from "./ribbon-interface";
 import Modal from "../react/Modal";
 import { CodeMimeTypesList } from "../type_widgets/options/code_notes";
 import { ContentLanguagesList } from "../type_widgets/options/i18n";
+import { LocaleSelector } from "../type_widgets/options/components/LocaleSelector";
 
 export default function BasicPropertiesTab({ note }: TabContext) {
     return (
@@ -290,68 +291,31 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
         id: "",
         name: t("note_language.not_set")
     };
-
     const [ currentNoteLanguage, setCurrentNoteLanguage ] = useNoteLabel(note, "language");
     const [ modalShown, setModalShown ] = useState(false);
-
     const locales = useMemo(() => {
         const enabledLanguages = JSON.parse(languages ?? "[]") as string[];
         const filteredLanguages = getAvailableLocales().filter((l) => typeof l !== "object" || enabledLanguages.includes(l.id));
-        const leftToRightLanguages = filteredLanguages.filter((l) => !l.rtl);
-        const rightToLeftLanguages = filteredLanguages.filter((l) => l.rtl);
-
-        let locales: ("---" | Locale)[] = [
-            DEFAULT_LOCALE
-        ];
-
-        if (leftToRightLanguages.length > 0) {
-            locales = [
-                ...locales,
-                "---",
-                ...leftToRightLanguages
-            ];
-        }
-
-        if (rightToLeftLanguages.length > 0) {
-            locales = [
-                ...locales,
-                "---",
-                ...rightToLeftLanguages
-            ];
-        }
-
-        // This will separate the list of languages from the "Configure languages" button.
-        // If there is at least one language.
-        locales.push("---");
-        return locales;
+        return filteredLanguages;
     }, [ languages ]);
 
-    const currentLocale = useMemo(() => {
-        return locales.find(locale => typeof locale === "object" && locale.id === currentNoteLanguage) as Locale | undefined;
-    }, [ currentNoteLanguage ]);
-
     return (
         <div className="note-language-container">
             <span>{t("basic_properties.language")}:</span>
             &nbsp;
-            <Dropdown text={currentLocale?.name ?? DEFAULT_LOCALE.name}>
-                {locales.map(locale => {
-                    if (typeof locale === "object") {
-                        const checked = locale.id === (currentNoteLanguage ?? "");
-                        return <FormListItem
-                            rtl={locale.rtl}
-                            checked={checked}
-                            onClick={() => setCurrentNoteLanguage(locale.id || null)}
-                        >{locale.name}</FormListItem>
-                    } else {
-                        return <FormDropdownDivider />
-                    }
-                })}
+            <LocaleSelector
+                locales={locales}
+                defaultLocale={DEFAULT_LOCALE}
+                currentValue={currentNoteLanguage ?? ""} onChange={setCurrentNoteLanguage}
+                extraChildren={(
+                    <FormListItem
+                        onClick={() => setModalShown(true)}
+                        icon="bx bx-cog"
+                    >{t("note_language.configure-languages")}</FormListItem>
+                )}
+            >
 
-                <FormListItem
-                    onClick={() => setModalShown(true)}
-                >{t("note_language.configure-languages")}</FormListItem>
-            </Dropdown>
+            </LocaleSelector>
 
             <HelpButton helpPage="B0lcI9xz1r8K" style={{ marginInlineStart: "4px" }} />
 
@@ -364,7 +328,7 @@ function NoteLanguageSwitch({ note }: { note?: FNote | null }) {
                 <ContentLanguagesList />
             </Modal>
         </div>
-    )
+    );
 }
 
 function findTypeTitle(type?: NoteType, mime?: string | null) {

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

@@ -19,12 +19,14 @@ const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
   calendar: t("book_properties.calendar"),
   table: t("book_properties.table"),
   geoMap: t("book_properties.geo-map"),
-  board: t("book_properties.board")
+  board: t("book_properties.board"),
+  presentation: t("book_properties.presentation")
 };
 
 export default function CollectionPropertiesTab({ note }: TabContext) {
   const [ viewType, setViewType ] = useNoteLabel(note, "viewType");
-  const viewTypeWithDefault = (viewType ?? "grid") as ViewTypeOptions;
+  const defaultViewType = (note?.type === "search" ? "list" : "grid");
+  const viewTypeWithDefault = (viewType ?? defaultViewType) as ViewTypeOptions;
   const properties = bookPropertiesConfig[viewTypeWithDefault].properties;
 
   return (
@@ -120,6 +122,7 @@ function CheckboxPropertyView({ note, property }: { note: FNote, property: Check
 function NumberPropertyView({ note, property }: { note: FNote, property: NumberProperty }) {
     //@ts-expect-error Interop with text box which takes in string values even for numbers.
     const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
+    const disabled = property.disabled?.(note);
 
     return (
         <LabelledEntry label={property.label}>
@@ -128,6 +131,7 @@ function NumberPropertyView({ note, property }: { note: FNote, property: NumberP
                 currentValue={value ?? ""} onChange={setValue}
                 style={{ width: (property.width ?? 100) + "px" }}
                 min={property.min ?? 0}
+                disabled={disabled}
             />
         </LabelledEntry>
     )

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

@@ -47,11 +47,11 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not
   const canBeConvertedToAttachment = note?.isEligibleForConversionToAttachment();
   const isSearchable = ["text", "code", "book", "mindMap", "doc"].includes(note.type);
   const isInOptions = note.noteId.startsWith("_options");
-  const isPrintable = ["text", "code"].includes(note.type);
+  const isPrintable = ["text", "code"].includes(note.type) || (note.type === "book" && note.getLabelValue("viewType") === "presentation");
   const isElectron = getIsElectron();
   const isMac = getIsMac();
   const hasSource = ["text", "code", "relationMap", "mermaid", "canvas", "mindMap"].includes(note.type);
-  const isSearchOrBook = ["search", "book"].includes(note.type);  
+  const isSearchOrBook = ["search", "book"].includes(note.type);
 
   return (
     <Dropdown
@@ -74,7 +74,7 @@ function NoteContextMenu({ note, noteContext }: { note: FNote, noteContext?: Not
       <CommandItem icon="bx bx-export" text={t("note_actions.export_note")}
         disabled={isInOptions || note.noteId === "_backendLog"}
         command={() => noteContext?.notePath && parentComponent?.triggerCommand("showExportDialog", {
-          notePath: noteContext.notePath, 
+          notePath: noteContext.notePath,
           defaultType: "single"
         })} />
       <FormDropdownDivider />
@@ -133,4 +133,4 @@ function ConvertToAttachment({ note }: { note: FNote }) {
         }}
       >{t("note_actions.convert_into_attachment")}</FormListItem>
   )
-}
+}

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { t } from "../../services/i18n";
-import { useNoteContext, useNoteProperty, useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTooltip, useTriliumEvent, useTriliumEvents } from "../react/hooks";
+import { useNoteContext, useNoteProperty, useStaticTooltipWithKeyboardShortcut, useTriliumEvents } from "../react/hooks";
 import "./style.css";
 import { VNode } from "preact";
 import BasicPropertiesTab from "./BasicPropertiesTab";
@@ -24,7 +24,6 @@ import InheritedAttributesTab from "./InheritedAttributesTab";
 import CollectionPropertiesTab from "./CollectionPropertiesTab";
 import SearchDefinitionTab from "./SearchDefinitionTab";
 import NoteActions from "./NoteActions";
-import keyboard_actions from "../../services/keyboard_actions";
 import { KeyboardActionNames } from "@triliumnext/commons";
 
 interface TitleContext {
@@ -81,7 +80,7 @@ const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>([
         title: t("book_properties.book_properties"),
         icon: "bx bx-book",
         content: CollectionPropertiesTab,
-        show: ({ note }) => note?.type === "book",
+        show: ({ note }) => note?.type === "book" || note?.type === "search",
         toggleCommand: "toggleRibbonTabBookProperties"
     },
     {