fix(client-standalone): missing manifest

This reverts commit 94d4a307cf.

.github/workflows/deploy-app.yml

@@ -0,0 +1,65 @@
+name: Deploy Standalone App
+
+on:
+  # Trigger on push to main branch
+  push:
+    branches:
+      - main
+    # Only run when docs files change
+    paths:
+      - 'apps/client/**'
+      - 'apps/client-standalone/**'
+      - 'packages/trilium-core/**'
+
+  # Allow manual triggering from Actions tab
+  workflow_dispatch:
+
+  # Run on pull requests for preview deployments
+  pull_request:
+    paths:
+      - 'apps/client/**'
+      - 'apps/client-standalone/**'
+      - 'packages/trilium-core/**'
+jobs:
+  build-and-deploy:
+    name: Build and Deploy App
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    # Required permissions for deployment
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write # For PR preview comments
+      id-token: write # For OIDC authentication (if needed)
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v6
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Trigger build of app
+        run: pnpm --filter=client-standalone build
+
+      - name: Deploy
+        uses: ./.github/actions/deploy-to-cloudflare-pages
+        if: github.repository == ${{ vars.REPO_MAIN }}
+        with:
+          project_name: "trilium-app"
+          comment_body: "🖥️ App preview is ready"
+          production_url: "https://app.triliumnotes.org"
+          deploy_dir: "apps/client-standalone/dist"
+          cloudflare_api_token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          cloudflare_account_id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -11,6 +11,14 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  sanity-check:
+    name: Sanity Check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Check version consistency
+        run: pnpm tsx ${{ github.workspace }}/scripts/check-version-consistency.ts ${{ github.ref_name }}
   make-electron:
     name: Make Electron
     strategy:

.gitignore

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

apps/build-docs/package.json

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

apps/client-standalone/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@triliumnext/client-standalone",
+  "version": "0.101.3",
+  "description": "Standalone client for TriliumNext with SQLite WASM backend",
+  "private": true,
+  "license": "AGPL-3.0-only",
+  "scripts": {
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
+    "dev": "vite dev",
+    "test": "vitest",
+    "start-prod": "pnpm build && pnpm http-server dist -p 8888",
+    "coverage": "vitest --coverage"
+  },
+  "dependencies": {
+    "@excalidraw/excalidraw": "0.18.0",
+    "@fullcalendar/core": "6.1.20",
+    "@fullcalendar/daygrid": "6.1.20",
+    "@fullcalendar/interaction": "6.1.20",
+    "@fullcalendar/list": "6.1.20",
+    "@fullcalendar/multimonth": "6.1.20",
+    "@fullcalendar/timegrid": "6.1.20",
+    "@maplibre/maplibre-gl-leaflet": "0.1.3",
+    "@mermaid-js/layout-elk": "0.2.0",
+    "@mind-elixir/node-menu": "5.0.1",
+    "@popperjs/core": "2.11.8",
+    "@preact/signals": "2.5.1",
+    "@sqlite.org/sqlite-wasm": "3.51.1-build2",
+    "@triliumnext/ckeditor5": "workspace:*",
+    "@triliumnext/codemirror": "workspace:*",
+    "@triliumnext/commons": "workspace:*",
+    "@triliumnext/core": "workspace:*",
+    "@triliumnext/highlightjs": "workspace:*",
+    "@triliumnext/share-theme": "workspace:*",
+    "@triliumnext/split.js": "workspace:*",
+    "@zumer/snapdom": "2.0.1",
+    "autocomplete.js": "0.38.1",
+    "bootstrap": "5.3.8",
+    "boxicons": "2.1.4",
+    "clsx": "2.1.1",
+    "color": "5.0.3",
+    "debounce": "3.0.0",
+    "draggabilly": "3.0.0",
+    "force-graph": "1.51.0",
+    "globals": "17.0.0",
+    "i18next": "25.7.3",
+    "i18next-http-backend": "3.0.2",
+    "jquery": "3.7.1",
+    "jquery.fancytree": "2.38.5",
+    "js-sha1": "0.7.0",
+    "js-sha512": "0.9.0",
+    "jsplumb": "2.15.6",
+    "katex": "0.16.27",
+    "knockout": "3.5.1",
+    "leaflet": "1.9.4",
+    "leaflet-gpx": "2.2.0",
+    "mark.js": "8.11.1",
+    "marked": "17.0.1",
+    "mermaid": "11.12.2",
+    "mind-elixir": "5.4.0",
+    "normalize.css": "8.0.1",
+    "panzoom": "9.4.3",
+    "preact": "10.28.1",
+    "react-i18next": "16.5.1",
+    "react-window": "2.2.3",
+    "reveal.js": "5.2.1",
+    "svg-pan-zoom": "3.6.2",
+    "tabulator-tables": "6.3.1",
+    "vanilla-js-wheel-zoom": "9.0.4"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-inspector": "5.0.0",
+    "@preact/preset-vite": "2.10.2",
+    "@types/bootstrap": "5.2.10",
+    "@types/jquery": "3.5.33",
+    "@types/leaflet": "1.9.21",
+    "@types/leaflet-gpx": "1.3.8",
+    "@types/mark.js": "8.11.12",
+    "@types/reveal.js": "5.2.2",
+    "@types/tabulator-tables": "6.3.1",
+    "copy-webpack-plugin": "13.0.1",
+    "cross-env": "7.0.3",
+    "happy-dom": "20.0.11",
+    "script-loader": "0.7.2",
+    "vite-plugin-static-copy": "3.1.4"
+  }
+}

apps/client-standalone/public/_headers

@@ -0,0 +1,3 @@
+/*
+  Cross-Origin-Opener-Policy: same-origin
+  Cross-Origin-Embedder-Policy: require-corp

apps/client-standalone/public/manifest.webmanifest

@@ -0,0 +1,20 @@
+{
+    "name": "Trilium Notes",
+    "short_name": "Trilium",
+    "description": "Trilium Notes is a hierarchical note taking application with focus on building large personal knowledge bases.",
+    "theme_color": "#333333",
+    "background_color": "#1F1F1F",
+    "display": "standalone",
+    "scope": "/",
+    "start_url": "/",
+    "display_override": [
+        "window-controls-overlay"
+    ],
+    "icons": [
+        {
+            "src": "icon.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ]
+}

apps/client-standalone/src/desktop.ts

@@ -0,0 +1,2 @@
+// Re-export desktop from client
+export * from "../../client/src/desktop";

apps/client-standalone/src/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <link rel="shortcut icon" href="favicon.ico">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
+        <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
+        <title>Trilium Notes</title>
+    </head>
+
+    <body id="trilium-app">
+        <noscript>Trilium requires JavaScript to be enabled.</noscript>
+
+        <script>
+            // hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide <noscript>
+            document.getElementsByTagName("body")[0].style.display = "none";
+        </script>
+
+        <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>
+
+        <!-- Required for match the PWA's top bar color with the theme -->
+        <!-- This works even when the user directly changes --root-background in CSS -->
+        <div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
+
+        <!-- Bootstrap (request server for required information) -->
+        <script src="./main.ts" type="module"></script>
+
+        <!-- Required for correct loading of scripts in Electron -->
+        <script>
+            if (typeof module === 'object') {window.module = module; module = undefined;}
+        </script>
+    </body>
+</html>

apps/client-standalone/src/lightweight/browser_router.ts

@@ -0,0 +1,254 @@
+/**
+ * Browser-compatible router that mimics Express routing patterns.
+ * Supports path parameters (e.g., /api/notes/:noteId) and query strings.
+ */
+
+import { getContext, routes } from "@triliumnext/core";
+
+export interface BrowserRequest {
+    method: string;
+    url: string;
+    path: string;
+    params: Record<string, string>;
+    query: Record<string, string | undefined>;
+    body?: unknown;
+}
+
+export interface BrowserResponse {
+    status: number;
+    headers: Record<string, string>;
+    body: ArrayBuffer | null;
+}
+
+export type RouteHandler = (req: BrowserRequest) => unknown | Promise<unknown>;
+
+interface Route {
+    method: string;
+    pattern: RegExp;
+    paramNames: string[];
+    handler: RouteHandler;
+}
+
+const encoder = new TextEncoder();
+
+/**
+ * Convert an Express-style path pattern to a RegExp.
+ * Supports :param syntax for path parameters.
+ *
+ * Examples:
+ *   /api/notes/:noteId -> /^\/api\/notes\/([^\/]+)$/
+ *   /api/notes/:noteId/revisions -> /^\/api\/notes\/([^\/]+)\/revisions$/
+ */
+function pathToRegex(path: string): { pattern: RegExp; paramNames: string[] } {
+    const paramNames: string[] = [];
+
+    // Escape special regex characters except for :param patterns
+    const regexPattern = path
+        .replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // Escape special chars
+        .replace(/:([a-zA-Z_][a-zA-Z0-9_]*)/g, (_, paramName) => {
+            paramNames.push(paramName);
+            return '([^/]+)';
+        });
+
+    return {
+        pattern: new RegExp(`^${regexPattern}$`),
+        paramNames
+    };
+}
+
+/**
+ * Parse query string into an object.
+ */
+function parseQuery(search: string): Record<string, string | undefined> {
+    const query: Record<string, string | undefined> = {};
+    if (!search || search === '?') return query;
+
+    const params = new URLSearchParams(search);
+    for (const [key, value] of params) {
+        query[key] = value;
+    }
+    return query;
+}
+
+/**
+ * Convert a result to a JSON response.
+ */
+function jsonResponse(obj: unknown, status = 200, extraHeaders: Record<string, string> = {}): BrowserResponse {
+    const parsedObj = routes.convertEntitiesToPojo(obj);
+    const body = encoder.encode(JSON.stringify(parsedObj)).buffer as ArrayBuffer;
+    return {
+        status,
+        headers: { "content-type": "application/json; charset=utf-8", ...extraHeaders },
+        body
+    };
+}
+
+/**
+ * Convert a string to a text response.
+ */
+function textResponse(text: string, status = 200, extraHeaders: Record<string, string> = {}): BrowserResponse {
+    const body = encoder.encode(text).buffer as ArrayBuffer;
+    return {
+        status,
+        headers: { "content-type": "text/plain; charset=utf-8", ...extraHeaders },
+        body
+    };
+}
+
+/**
+ * Browser router class that handles route registration and dispatching.
+ */
+export class BrowserRouter {
+    private routes: Route[] = [];
+
+    /**
+     * Register a route handler.
+     */
+    register(method: string, path: string, handler: RouteHandler): void {
+        const { pattern, paramNames } = pathToRegex(path);
+        this.routes.push({
+            method: method.toUpperCase(),
+            pattern,
+            paramNames,
+            handler
+        });
+    }
+
+    /**
+     * Convenience methods for common HTTP methods.
+     */
+    get(path: string, handler: RouteHandler): void {
+        this.register('GET', path, handler);
+    }
+
+    post(path: string, handler: RouteHandler): void {
+        this.register('POST', path, handler);
+    }
+
+    put(path: string, handler: RouteHandler): void {
+        this.register('PUT', path, handler);
+    }
+
+    patch(path: string, handler: RouteHandler): void {
+        this.register('PATCH', path, handler);
+    }
+
+    delete(path: string, handler: RouteHandler): void {
+        this.register('DELETE', path, handler);
+    }
+
+    /**
+     * Dispatch a request to the appropriate handler.
+     */
+    async dispatch(method: string, urlString: string, body?: unknown, headers?: Record<string, string>): Promise<BrowserResponse> {
+        const url = new URL(urlString);
+        const path = url.pathname;
+        const query = parseQuery(url.search);
+        const upperMethod = method.toUpperCase();
+
+        // Parse JSON body if it's an ArrayBuffer and content-type suggests JSON
+        let parsedBody = body;
+        if (body instanceof ArrayBuffer && headers) {
+            const contentType = headers['content-type'] || headers['Content-Type'] || '';
+            if (contentType.includes('application/json')) {
+                try {
+                    const text = new TextDecoder().decode(body);
+                    if (text.trim()) {
+                        parsedBody = JSON.parse(text);
+                    }
+                } catch (e) {
+                    console.warn('[Router] Failed to parse JSON body:', e);
+                    // Keep original body if JSON parsing fails
+                    parsedBody = body;
+                }
+            }
+        }
+        // Find matching route
+        for (const route of this.routes) {
+            if (route.method !== upperMethod) continue;
+
+            const match = path.match(route.pattern);
+            if (!match) continue;
+
+            // Extract path parameters
+            const params: Record<string, string> = {};
+            for (let i = 0; i < route.paramNames.length; i++) {
+                params[route.paramNames[i]] = decodeURIComponent(match[i + 1]);
+            }
+
+            const request: BrowserRequest = {
+                method: upperMethod,
+                url: urlString,
+                path,
+                params,
+                query,
+                body: parsedBody
+            };
+
+            try {
+                const result = await getContext().init(async () => await route.handler(request));
+                return this.formatResult(result);
+            } catch (error) {
+                return this.formatError(error, `Error handling ${method} ${path}`);
+            }
+        }
+
+        // No route matched
+        return textResponse(`Not found: ${method} ${path}`, 404);
+    }
+
+    /**
+     * Format a handler result into a response.
+     * Follows the same patterns as the server's apiResultHandler.
+     */
+    private formatResult(result: unknown): BrowserResponse {
+        // Handle [statusCode, response] format
+        if (Array.isArray(result) && result.length > 0 && Number.isInteger(result[0])) {
+            const [statusCode, response] = result;
+            return jsonResponse(response, statusCode);
+        }
+
+        // Handle undefined (no content) - 204 should have no body
+        if (result === undefined) {
+            return {
+                status: 204,
+                headers: {},
+                body: null
+            };
+        }
+
+        // Default: JSON response with 200
+        return jsonResponse(result, 200);
+    }
+
+    /**
+     * Format an error into a response.
+     */
+    private formatError(error: unknown, context: string): BrowserResponse {
+        console.error('[Router] Handler error:', context, error);
+
+        // Check for known error types
+        if (error && typeof error === 'object') {
+            const err = error as { constructor?: { name?: string }; message?: string };
+
+            if (err.constructor?.name === 'NotFoundError') {
+                return jsonResponse({ message: err.message || 'Not found' }, 404);
+            }
+
+            if (err.constructor?.name === 'ValidationError') {
+                return jsonResponse({ message: err.message || 'Validation error' }, 400);
+            }
+        }
+
+        // Generic error
+        const message = error instanceof Error ? error.message : String(error);
+        return jsonResponse({ message }, 500);
+    }
+}
+
+/**
+ * Create a new router instance.
+ */
+export function createRouter(): BrowserRouter {
+    return new BrowserRouter();
+}

apps/client-standalone/src/lightweight/browser_routes.ts

@@ -0,0 +1,98 @@
+/**
+ * Browser route definitions.
+ * This integrates with the shared route builder from @triliumnext/core.
+ */
+
+import { BootstrapDefinition } from '@triliumnext/commons';
+import { getSharedBootstrapItems, routes } from '@triliumnext/core';
+
+import packageJson from '../../package.json' with { type: 'json' };
+import { type BrowserRequest,BrowserRouter } from './browser_router';
+
+type HttpMethod = 'get' | 'post' | 'put' | 'patch' | 'delete';
+
+/**
+ * Wraps a core route handler to work with the BrowserRouter.
+ * Core handlers expect an Express-like request object with params, query, and body.
+ */
+function wrapHandler(handler: (req: any) => unknown) {
+    return (req: BrowserRequest) => {
+        // Create an Express-like request object
+        const expressLikeReq = {
+            params: req.params,
+            query: req.query,
+            body: req.body
+        };
+        return handler(expressLikeReq);
+    };
+}
+
+/**
+ * Creates an apiRoute function compatible with buildSharedApiRoutes.
+ * This bridges the core's route registration to the BrowserRouter.
+ */
+function createApiRoute(router: BrowserRouter) {
+    return (method: HttpMethod, path: string, handler: (req: any) => unknown) => {
+        router.register(method, path, wrapHandler(handler));
+    };
+}
+
+/**
+ * Register all API routes on the browser router using the shared builder.
+ *
+ * @param router - The browser router instance
+ */
+export function registerRoutes(router: BrowserRouter): void {
+    const apiRoute = createApiRoute(router);
+    routes.buildSharedApiRoutes(apiRoute);
+    apiRoute('get', '/bootstrap', bootstrapRoute);
+
+    // Dummy routes for compatibility.
+    apiRoute("get", "/api/script/widgets", () => []);
+    apiRoute("get", "/api/script/startup", () => []);
+    apiRoute("get", "/api/system-checks", () => ({ isCpuArchMismatch: false }));
+    apiRoute("get", "/api/search/:searchString", () => []);
+    apiRoute("get", "/api/search-templates", () => []);
+    apiRoute("get", "/api/autocomplete", () => []);
+}
+
+function bootstrapRoute() {
+
+    const assetPath = ".";
+
+    return {
+        ...getSharedBootstrapItems(assetPath),
+        appPath: assetPath,
+        device: false, // Let the client detect device type.
+        csrfToken: "dummy-csrf-token",
+        themeCssUrl: false,
+        themeUseNextAsBase: "next",
+        triliumVersion: packageJson.version,
+        baseApiUrl: "../api/",
+        headingStyle: "plain",
+        layoutOrientation: "vertical",
+        platform: "web",
+        isDev: import.meta.env.DEV,
+        isMainWindow: true,
+        isElectron: false,
+        isStandalone: true,
+        hasNativeTitleBar: false,
+        hasBackgroundEffects: true,
+
+        // TODO: Fill properly
+        currentLocale: { id: "en", name: "English", rtl: false },
+        isRtl: false,
+        instanceName: null,
+        appCssNoteIds: [],
+        TRILIUM_SAFE_MODE: false
+    } satisfies BootstrapDefinition;
+}
+
+/**
+ * Create and configure a router with all routes registered.
+ */
+export function createConfiguredRouter(): BrowserRouter {
+    const router = new BrowserRouter();
+    registerRoutes(router);
+    return router;
+}

apps/client-standalone/src/lightweight/cls_provider.ts

@@ -0,0 +1,46 @@
+import { ExecutionContext } from "@triliumnext/core";
+
+export default class BrowserExecutionContext implements ExecutionContext {
+    private store: Map<string, any> | null = null;
+
+    get<T = any>(key: string): T | undefined {
+        return this.store?.get(key);
+    }
+
+    set(key: string, value: any): void {
+        if (!this.store) {
+            throw new Error("ExecutionContext not initialized");
+        }
+        this.store.set(key, value);
+    }
+
+    reset(): void {
+        this.store = null;
+    }
+
+    init<T>(callback: () => T): T {
+        // Create a fresh context for this request
+        const prev = this.store;
+        this.store = new Map();
+
+        try {
+            const result = callback();
+            
+            // If the result is a Promise, we need to handle cleanup after it resolves
+            if (result && typeof result === 'object' && 'then' in result && 'catch' in result) {
+                const promise = result as unknown as Promise<any>;
+                return promise.finally(() => {
+                    this.store = prev;
+                }) as T;
+            } else {
+                // Synchronous result, clean up immediately
+                this.store = prev;
+                return result;
+            }
+        } catch (error) {
+            // Always clean up on error (for synchronous errors)
+            this.store = prev;
+            throw error;
+        }
+    }
+}

apps/client-standalone/src/lightweight/crypto_provider.ts

@@ -0,0 +1,145 @@
+import type { CryptoProvider } from "@triliumnext/core";
+import { sha1 } from "js-sha1";
+import { sha512 } from "js-sha512";
+
+interface Cipher {
+    update(data: Uint8Array): Uint8Array;
+    final(): Uint8Array;
+}
+
+const CHARS = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
+
+/**
+ * Crypto provider for browser environments using the Web Crypto API.
+ */
+export default class BrowserCryptoProvider implements CryptoProvider {
+
+    createHash(algorithm: "sha1" | "sha512", content: string | Uint8Array): Uint8Array {
+        const data = typeof content === "string" ? content :
+                new TextDecoder().decode(content);
+
+        const hexHash = algorithm === "sha1" ? sha1(data) : sha512(data);
+
+        // Convert hex string to Uint8Array
+        const bytes = new Uint8Array(hexHash.length / 2);
+        for (let i = 0; i < hexHash.length; i += 2) {
+            bytes[i / 2] = parseInt(hexHash.substr(i, 2), 16);
+        }
+        return bytes;
+    }
+
+    createCipheriv(algorithm: "aes-128-cbc", key: Uint8Array, iv: Uint8Array): Cipher {
+        // Web Crypto API doesn't support streaming cipher like Node.js
+        // We need to implement a wrapper that collects data and encrypts on final()
+        return new WebCryptoCipher(algorithm, key, iv, "encrypt");
+    }
+
+    createDecipheriv(algorithm: "aes-128-cbc", key: Uint8Array, iv: Uint8Array): Cipher {
+        return new WebCryptoCipher(algorithm, key, iv, "decrypt");
+    }
+
+    randomBytes(size: number): Uint8Array {
+        const bytes = new Uint8Array(size);
+        crypto.getRandomValues(bytes);
+        return bytes;
+    }
+
+    randomString(length: number): string {
+        const bytes = this.randomBytes(length);
+        let result = "";
+        for (let i = 0; i < length; i++) {
+            result += CHARS[bytes[i] % CHARS.length];
+        }
+        return result;
+    }
+}
+
+/**
+ * A cipher implementation that wraps Web Crypto API.
+ * Note: This buffers all data until final() is called, which differs from
+ * Node.js's streaming cipher behavior.
+ */
+class WebCryptoCipher implements Cipher {
+    private chunks: Uint8Array[] = [];
+    private algorithm: string;
+    private key: Uint8Array;
+    private iv: Uint8Array;
+    private mode: "encrypt" | "decrypt";
+    private finalized = false;
+
+    constructor(
+        algorithm: "aes-128-cbc",
+        key: Uint8Array,
+        iv: Uint8Array,
+        mode: "encrypt" | "decrypt"
+    ) {
+        this.algorithm = algorithm;
+        this.key = key;
+        this.iv = iv;
+        this.mode = mode;
+    }
+
+    update(data: Uint8Array): Uint8Array {
+        if (this.finalized) {
+            throw new Error("Cipher has already been finalized");
+        }
+        // Buffer the data - Web Crypto doesn't support streaming
+        this.chunks.push(data);
+        // Return empty array since we process everything in final()
+        return new Uint8Array(0);
+    }
+
+    final(): Uint8Array {
+        if (this.finalized) {
+            throw new Error("Cipher has already been finalized");
+        }
+        this.finalized = true;
+
+        // Web Crypto API is async, but we need sync behavior
+        // This is a fundamental limitation that requires architectural changes
+        // For now, throw an error directing users to use async methods
+        throw new Error(
+            "Synchronous cipher finalization not available in browser. " +
+            "The Web Crypto API is async-only. Use finalizeAsync() instead."
+        );
+    }
+
+    /**
+     * Async version that actually performs the encryption/decryption.
+     */
+    async finalizeAsync(): Promise<Uint8Array> {
+        if (this.finalized) {
+            throw new Error("Cipher has already been finalized");
+        }
+        this.finalized = true;
+
+        // Concatenate all chunks
+        const totalLength = this.chunks.reduce((sum, chunk) => sum + chunk.length, 0);
+        const data = new Uint8Array(totalLength);
+        let offset = 0;
+        for (const chunk of this.chunks) {
+            data.set(chunk, offset);
+            offset += chunk.length;
+        }
+
+        // Copy key and iv to ensure they're plain ArrayBuffer-backed
+        const keyBuffer = new Uint8Array(this.key);
+        const ivBuffer = new Uint8Array(this.iv);
+
+        // Import the key
+        const cryptoKey = await crypto.subtle.importKey(
+            "raw",
+            keyBuffer,
+            { name: "AES-CBC" },
+            false,
+            [this.mode]
+        );
+
+        // Perform encryption/decryption
+        const result = this.mode === "encrypt"
+            ? await crypto.subtle.encrypt({ name: "AES-CBC", iv: ivBuffer }, cryptoKey, data)
+            : await crypto.subtle.decrypt({ name: "AES-CBC", iv: ivBuffer }, cryptoKey, data);
+
+        return new Uint8Array(result);
+    }
+}

apps/client-standalone/src/lightweight/messaging_provider.ts

@@ -0,0 +1,92 @@
+import type { WebSocketMessage } from "@triliumnext/commons";
+import type { MessagingProvider, MessageHandler } from "@triliumnext/core";
+
+/**
+ * Messaging provider for browser Worker environments.
+ *
+ * This provider uses the Worker's postMessage API to communicate
+ * with the main thread. It's designed to be used inside a Web Worker
+ * that runs the core services.
+ *
+ * Message flow:
+ * - Outbound (worker → main): Uses self.postMessage() with type: "WS_MESSAGE"
+ * - Inbound (main → worker): Listens to onmessage for type: "WS_MESSAGE"
+ */
+export default class WorkerMessagingProvider implements MessagingProvider {
+    private messageHandlers: MessageHandler[] = [];
+    private isDisposed = false;
+
+    constructor() {
+        // Listen for incoming messages from the main thread
+        self.addEventListener("message", this.handleIncomingMessage);
+        console.log("[WorkerMessagingProvider] Initialized");
+    }
+
+    private handleIncomingMessage = (event: MessageEvent) => {
+        if (this.isDisposed) return;
+
+        const { type, message } = event.data || {};
+
+        if (type === "WS_MESSAGE" && message) {
+            // Dispatch to all registered handlers
+            for (const handler of this.messageHandlers) {
+                try {
+                    handler(message as WebSocketMessage);
+                } catch (e) {
+                    console.error("[WorkerMessagingProvider] Error in message handler:", e);
+                }
+            }
+        }
+    };
+
+    /**
+     * Send a message to all clients (in this case, the main thread).
+     * The main thread is responsible for further distribution if needed.
+     */
+    sendMessageToAllClients(message: WebSocketMessage): void {
+        if (this.isDisposed) {
+            console.warn("[WorkerMessagingProvider] Cannot send message - provider is disposed");
+            return;
+        }
+
+        try {
+            self.postMessage({
+                type: "WS_MESSAGE",
+                message
+            });
+        } catch (e) {
+            console.error("[WorkerMessagingProvider] Error sending message:", e);
+        }
+    }
+
+    /**
+     * Subscribe to incoming messages from the main thread.
+     */
+    onMessage(handler: MessageHandler): () => void {
+        this.messageHandlers.push(handler);
+
+        return () => {
+            this.messageHandlers = this.messageHandlers.filter(h => h !== handler);
+        };
+    }
+
+    /**
+     * Get the number of connected "clients".
+     * In worker context, there's always exactly 1 client (the main thread).
+     */
+    getClientCount(): number {
+        return this.isDisposed ? 0 : 1;
+    }
+
+    /**
+     * Clean up resources.
+     */
+    dispose(): void {
+        if (this.isDisposed) return;
+
+        this.isDisposed = true;
+        self.removeEventListener("message", this.handleIncomingMessage);
+        this.messageHandlers = [];
+        console.log("[WorkerMessagingProvider] Disposed");
+    }
+}

apps/client-standalone/src/lightweight/sql_provider.ts

@@ -0,0 +1,615 @@
+import type { DatabaseProvider, RunResult, Statement, Transaction } from "@triliumnext/core";
+import sqlite3InitModule from "@sqlite.org/sqlite-wasm";
+import type { BindableValue } from "@sqlite.org/sqlite-wasm";
+import demoDbSql from "./db.sql?raw";
+
+// Type definitions for SQLite WASM (the library doesn't export these directly)
+type Sqlite3Module = Awaited<ReturnType<typeof sqlite3InitModule>>;
+type Sqlite3Database = InstanceType<Sqlite3Module["oo1"]["DB"]>;
+type Sqlite3PreparedStatement = ReturnType<Sqlite3Database["prepare"]>;
+
+/**
+ * Wraps an SQLite WASM PreparedStatement to match the Statement interface
+ * expected by trilium-core.
+ */
+class WasmStatement implements Statement {
+    private isRawMode = false;
+    private isPluckMode = false;
+    private isFinalized = false;
+
+    constructor(
+        private stmt: Sqlite3PreparedStatement,
+        private db: Sqlite3Database
+    ) {}
+
+    run(...params: unknown[]): RunResult {
+        if (this.isFinalized) {
+            throw new Error("Cannot call run() on finalized statement");
+        }
+
+        this.bindParams(params);
+        try {
+            // Use step() and then reset instead of stepFinalize()
+            // This allows the statement to be reused
+            this.stmt.step();
+            const changes = this.db.changes();
+            this.stmt.reset();
+            return {
+                changes,
+                lastInsertRowid: 0 // Would need sqlite3_last_insert_rowid for this
+            };
+        } catch (e) {
+            // Reset on error to allow reuse
+            this.stmt.reset();
+            throw e;
+        }
+    }
+
+    get(params: unknown): unknown {
+        if (this.isFinalized) {
+            throw new Error("Cannot call get() on finalized statement");
+        }
+
+        this.bindParams(Array.isArray(params) ? params : params !== undefined ? [params] : []);
+        try {
+            if (this.stmt.step()) {
+                if (this.isPluckMode) {
+                    // In pluck mode, return only the first column value
+                    const row = this.stmt.get([]);
+                    return Array.isArray(row) && row.length > 0 ? row[0] : undefined;
+                }
+                return this.isRawMode ? this.stmt.get([]) : this.stmt.get({});
+            }
+            return undefined;
+        } finally {
+            this.stmt.reset();
+        }
+    }
+
+    all(...params: unknown[]): unknown[] {
+        if (this.isFinalized) {
+            throw new Error("Cannot call all() on finalized statement");
+        }
+
+        this.bindParams(params);
+        const results: unknown[] = [];
+        try {
+            while (this.stmt.step()) {
+                if (this.isPluckMode) {
+                    // In pluck mode, return only the first column value for each row
+                    const row = this.stmt.get([]);
+                    if (Array.isArray(row) && row.length > 0) {
+                        results.push(row[0]);
+                    }
+                } else {
+                    results.push(this.isRawMode ? this.stmt.get([]) : this.stmt.get({}));
+                }
+            }
+            return results;
+        } finally {
+            this.stmt.reset();
+        }
+    }
+
+    iterate(...params: unknown[]): IterableIterator<unknown> {
+        if (this.isFinalized) {
+            throw new Error("Cannot call iterate() on finalized statement");
+        }
+
+        this.bindParams(params);
+        const stmt = this.stmt;
+        const isRaw = this.isRawMode;
+        const isPluck = this.isPluckMode;
+
+        return {
+            [Symbol.iterator]() {
+                return this;
+            },
+            next(): IteratorResult<unknown> {
+                if (stmt.step()) {
+                    if (isPluck) {
+                        const row = stmt.get([]);
+                        const value = Array.isArray(row) && row.length > 0 ? row[0] : undefined;
+                        return { value, done: false };
+                    }
+                    return { value: isRaw ? stmt.get([]) : stmt.get({}), done: false };
+                }
+                stmt.reset();
+                return { value: undefined, done: true };
+            }
+        };
+    }
+
+    raw(toggleState?: boolean): this {
+        // In raw mode, rows are returned as arrays instead of objects
+        // If toggleState is undefined, enable raw mode (better-sqlite3 behavior)
+        this.isRawMode = toggleState !== undefined ? toggleState : true;
+        return this;
+    }
+
+    pluck(toggleState?: boolean): this {
+        // In pluck mode, only the first column of each row is returned
+        // If toggleState is undefined, enable pluck mode (better-sqlite3 behavior)
+        this.isPluckMode = toggleState !== undefined ? toggleState : true;
+        return this;
+    }
+
+    private bindParams(params: unknown[]): void {
+        this.stmt.clearBindings();
+        if (params.length === 0) {
+            return;
+        }
+
+        // Handle single object with named parameters
+        if (params.length === 1 && typeof params[0] === "object" && params[0] !== null && !Array.isArray(params[0])) {
+            const inputBindings = params[0] as { [paramName: string]: BindableValue };
+
+            // SQLite WASM expects parameter names to include the prefix (@ : or $)
+            // better-sqlite3 automatically maps unprefixed names to @name
+            // We need to add the @ prefix for compatibility
+            const bindings: { [paramName: string]: BindableValue } = {};
+            for (const [key, value] of Object.entries(inputBindings)) {
+                // If the key already has a prefix, use it as-is
+                if (key.startsWith('@') || key.startsWith(':') || key.startsWith('$')) {
+                    bindings[key] = value;
+                } else {
+                    // Add @ prefix to match better-sqlite3 behavior
+                    bindings[`@${key}`] = value;
+                }
+            }
+
+            this.stmt.bind(bindings);
+        } else {
+            // Handle positional parameters - flatten and cast to BindableValue[]
+            const flatParams = params.flat() as BindableValue[];
+            if (flatParams.length > 0) {
+                this.stmt.bind(flatParams);
+            }
+        }
+    }
+
+    finalize(): void {
+        if (!this.isFinalized) {
+            try {
+                this.stmt.finalize();
+            } catch (e) {
+                console.warn("Error finalizing SQLite statement:", e);
+            } finally {
+                this.isFinalized = true;
+            }
+        }
+    }
+}
+
+/**
+ * SQLite database provider for browser environments using SQLite WASM.
+ *
+ * This provider wraps the official @sqlite.org/sqlite-wasm package to provide
+ * a DatabaseProvider implementation compatible with trilium-core.
+ *
+ * @example
+ * ```typescript
+ * const provider = new BrowserSqlProvider();
+ * await provider.initWasm(); // Initialize SQLite WASM module
+ * provider.loadFromMemory(); // Open an in-memory database
+ * // or
+ * provider.loadFromBuffer(existingDbBuffer); // Load from existing data
+ * ```
+ */
+export default class BrowserSqlProvider implements DatabaseProvider {
+    private db?: Sqlite3Database;
+    private sqlite3?: Sqlite3Module;
+    private _inTransaction = false;
+    private initPromise?: Promise<void>;
+    private initError?: Error;
+    private statementCache: Map<string, WasmStatement> = new Map();
+
+    // OPFS state tracking
+    private opfsDbPath?: string;
+
+    /**
+     * Get the SQLite WASM module version info.
+     * Returns undefined if the module hasn't been initialized yet.
+     */
+    get version(): { libVersion: string; sourceId: string } | undefined {
+        return this.sqlite3?.version;
+    }
+
+    /**
+     * Initialize the SQLite WASM module.
+     * This must be called before using any database operations.
+     * Safe to call multiple times - subsequent calls return the same promise.
+     *
+     * @returns A promise that resolves when the module is initialized
+     * @throws Error if initialization fails
+     */
+    async initWasm(): Promise<void> {
+        // Return existing promise if already initializing/initialized
+        if (this.initPromise) {
+            return this.initPromise;
+        }
+
+        // Fail fast if we already tried and failed
+        if (this.initError) {
+            throw this.initError;
+        }
+
+        this.initPromise = this.doInitWasm();
+        return this.initPromise;
+    }
+
+    private async doInitWasm(): Promise<void> {
+        try {
+            console.log("[BrowserSqlProvider] Initializing SQLite WASM...");
+            const startTime = performance.now();
+
+            this.sqlite3 = await sqlite3InitModule({
+                print: console.log,
+                printErr: console.error,
+            });
+
+            const initTime = performance.now() - startTime;
+            console.log(
+                `[BrowserSqlProvider] SQLite WASM initialized in ${initTime.toFixed(2)}ms:`,
+                this.sqlite3.version.libVersion
+            );
+        } catch (e) {
+            this.initError = e instanceof Error ? e : new Error(String(e));
+            console.error("[BrowserSqlProvider] SQLite WASM initialization failed:", this.initError);
+            throw this.initError;
+        }
+    }
+
+    /**
+     * Check if the SQLite WASM module has been initialized.
+     */
+    get isInitialized(): boolean {
+        return this.sqlite3 !== undefined;
+    }
+
+    // ==================== OPFS Support ====================
+
+    /**
+     * Check if the OPFS VFS is available.
+     * This requires:
+     * - Running in a Worker context
+     * - Browser support for OPFS APIs
+     * - COOP/COEP headers sent by the server (for SharedArrayBuffer)
+     *
+     * @returns true if OPFS VFS is available for use
+     */
+    isOpfsAvailable(): boolean {
+        this.ensureSqlite3();
+        // SQLite WASM automatically installs the OPFS VFS if the environment supports it
+        // We can check for its presence via sqlite3_vfs_find or the OpfsDb class
+        return this.sqlite3!.oo1.OpfsDb !== undefined;
+    }
+
+    /**
+     * Load or create a database stored in OPFS for persistent storage.
+     * The database will persist across browser sessions.
+     *
+     * Requires COOP/COEP headers to be set by the server:
+     * - Cross-Origin-Opener-Policy: same-origin
+     * - Cross-Origin-Embedder-Policy: require-corp
+     *
+     * @param path - The path for the database file in OPFS (e.g., "/trilium.db")
+     *               Paths without a leading slash are treated as relative to OPFS root.
+     *               Leading directories are created automatically.
+     * @param options - Additional options
+     * @throws Error if OPFS VFS is not available
+     *
+     * @example
+     * ```typescript
+     * const provider = new BrowserSqlProvider();
+     * await provider.initWasm();
+     * if (provider.isOpfsAvailable()) {
+     *     provider.loadFromOpfs("/my-database.db");
+     * } else {
+     *     console.warn("OPFS not available, using in-memory database");
+     *     provider.loadFromMemory();
+     * }
+     * ```
+     */
+    loadFromOpfs(path: string, options: { createIfNotExists?: boolean } = {}): void {
+        this.ensureSqlite3();
+
+        if (!this.isOpfsAvailable()) {
+            throw new Error(
+                "OPFS VFS is not available. This requires:\n" +
+                "1. Running in a Worker context\n" +
+                "2. Browser support for OPFS (Chrome 102+, Firefox 111+, Safari 17+)\n" +
+                "3. COOP/COEP headers from the server:\n" +
+                "   Cross-Origin-Opener-Policy: same-origin\n" +
+                "   Cross-Origin-Embedder-Policy: require-corp"
+            );
+        }
+
+        console.log(`[BrowserSqlProvider] Loading database from OPFS: ${path}`);
+        const startTime = performance.now();
+
+        try {
+            // OpfsDb automatically creates directories in the path
+            // Mode 'c' = create if not exists
+            const mode = options.createIfNotExists !== false ? 'c' : '';
+            this.db = new this.sqlite3!.oo1.OpfsDb(path, mode);
+            this.opfsDbPath = path;
+
+            // Configure the database for OPFS
+            // Note: WAL mode requires exclusive locking in OPFS environment
+            this.db.exec("PRAGMA journal_mode = DELETE");
+            this.db.exec("PRAGMA synchronous = NORMAL");
+
+            const loadTime = performance.now() - startTime;
+            console.log(`[BrowserSqlProvider] OPFS database loaded in ${loadTime.toFixed(2)}ms`);
+        } catch (e) {
+            const error = e instanceof Error ? e : new Error(String(e));
+            console.error(`[BrowserSqlProvider] Failed to load OPFS database: ${error.message}`);
+            throw error;
+        }
+    }
+
+    /**
+     * Check if the currently open database is stored in OPFS.
+     */
+    get isUsingOpfs(): boolean {
+        return this.opfsDbPath !== undefined;
+    }
+
+    /**
+     * Get the OPFS path of the currently open database.
+     * Returns undefined if not using OPFS.
+     */
+    get currentOpfsPath(): string | undefined {
+        return this.opfsDbPath;
+    }
+
+    /**
+     * Check if the database has been initialized with a schema.
+     * This is a simple sanity check that looks for the existence of core tables.
+     *
+     * @returns true if the database appears to be initialized
+     */
+    isDbInitialized(): boolean {
+        this.ensureDb();
+
+        // Check if the 'notes' table exists (a core table that must exist in an initialized DB)
+        const tableExists = this.db!.selectValue(
+            "SELECT name FROM sqlite_master WHERE type = 'table' AND name = 'notes'"
+        );
+
+        return tableExists !== undefined;
+    }
+
+    // ==================== End OPFS Support ====================
+
+    loadFromFile(_path: string, _isReadOnly: boolean): void {
+        // Browser environment doesn't have direct file system access.
+        // Use OPFS for persistent storage.
+        throw new Error(
+            "loadFromFile is not supported in browser environment. " +
+            "Use loadFromMemory() for temporary databases, loadFromBuffer() to load from data, " +
+            "or loadFromOpfs() for persistent storage."
+        );
+    }
+
+    /**
+     * Create an empty in-memory database.
+     * Data will be lost when the page is closed.
+     *
+     * For persistent storage, use loadFromOpfs() instead.
+     * To load demo data, call initializeDemoDatabase() after this.
+     */
+    loadFromMemory(): void {
+        this.ensureSqlite3();
+        console.log("[BrowserSqlProvider] Creating in-memory database...");
+        const startTime = performance.now();
+
+        this.db = new this.sqlite3!.oo1.DB(":memory:", "c");
+        this.opfsDbPath = undefined; // Not using OPFS
+        this.db.exec("PRAGMA journal_mode = WAL");
+
+        // Initialize with demo data for in-memory databases
+        // (since they won't persist anyway)
+        this.initializeDemoDatabase();
+
+        const loadTime = performance.now() - startTime;
+        console.log(`[BrowserSqlProvider] In-memory database created in ${loadTime.toFixed(2)}ms`);
+    }
+
+    /**
+     * Initialize the database with demo/starter data.
+     * This should only be called once when creating a new database.
+     *
+     * For OPFS databases, this is called automatically only if the database
+     * doesn't already exist.
+     */
+    initializeDemoDatabase(): void {
+        this.ensureDb();
+        console.log("[BrowserSqlProvider] Initializing database with demo data...");
+        const startTime = performance.now();
+
+        this.db!.exec(demoDbSql);
+
+        const loadTime = performance.now() - startTime;
+        console.log(`[BrowserSqlProvider] Demo data loaded in ${loadTime.toFixed(2)}ms`);
+    }
+
+    loadFromBuffer(buffer: Uint8Array): void {
+        this.ensureSqlite3();
+        // SQLite WASM can deserialize a database from a byte array
+        const p = this.sqlite3!.wasm.allocFromTypedArray(buffer);
+        try {
+            this.db = new this.sqlite3!.oo1.DB({ filename: ":memory:", flags: "c" });
+            this.opfsDbPath = undefined; // Not using OPFS
+
+            const rc = this.sqlite3!.capi.sqlite3_deserialize(
+                this.db.pointer!,
+                "main",
+                p,
+                buffer.byteLength,
+                buffer.byteLength,
+                this.sqlite3!.capi.SQLITE_DESERIALIZE_FREEONCLOSE |
+                this.sqlite3!.capi.SQLITE_DESERIALIZE_RESIZEABLE
+            );
+            if (rc !== 0) {
+                throw new Error(`Failed to deserialize database: ${rc}`);
+            }
+        } catch (e) {
+            this.sqlite3!.wasm.dealloc(p);
+            throw e;
+        }
+    }
+
+    backup(_destinationFile: string): void {
+        // In browser, we can serialize the database to a byte array
+        // For actual file backup, we'd need to use File System Access API or download
+        throw new Error(
+            "backup to file is not supported in browser environment. " +
+            "Use serialize() to get the database as a Uint8Array instead."
+        );
+    }
+
+    /**
+     * Serialize the database to a byte array.
+     * This can be used to save the database to IndexedDB, download it, etc.
+     */
+    serialize(): Uint8Array {
+        this.ensureDb();
+        // Use the convenience wrapper which handles all the memory management
+        return this.sqlite3!.capi.sqlite3_js_db_export(this.db!);
+    }
+
+    prepare(query: string): Statement {
+        this.ensureDb();
+
+        // Check if we already have this statement cached
+        if (this.statementCache.has(query)) {
+            return this.statementCache.get(query)!;
+        }
+
+        // Create new statement and cache it
+        const stmt = this.db!.prepare(query);
+        const wasmStatement = new WasmStatement(stmt, this.db!);
+        this.statementCache.set(query, wasmStatement);
+        return wasmStatement;
+    }
+
+    transaction<T>(func: (statement: Statement) => T): Transaction {
+        this.ensureDb();
+
+        const self = this;
+        let savepointCounter = 0;
+
+        // Helper function to execute within a transaction
+        const executeTransaction = (beginStatement: string, ...args: unknown[]): T => {
+            // If we're already in a transaction, use SAVEPOINTs for nesting
+            // This mimics better-sqlite3's behavior
+            if (self._inTransaction) {
+                const savepointName = `sp_${++savepointCounter}_${Date.now()}`;
+                self.db!.exec(`SAVEPOINT ${savepointName}`);
+                try {
+                    const result = func.apply(null, args as [Statement]);
+                    self.db!.exec(`RELEASE SAVEPOINT ${savepointName}`);
+                    return result;
+                } catch (e) {
+                    self.db!.exec(`ROLLBACK TO SAVEPOINT ${savepointName}`);
+                    throw e;
+                }
+            }
+
+            // Not in a transaction, start a new one
+            self._inTransaction = true;
+            self.db!.exec(beginStatement);
+            try {
+                const result = func.apply(null, args as [Statement]);
+                self.db!.exec("COMMIT");
+                return result;
+            } catch (e) {
+                self.db!.exec("ROLLBACK");
+                throw e;
+            } finally {
+                self._inTransaction = false;
+            }
+        };
+
+        // Create the transaction function that acts like better-sqlite3's Transaction interface
+        // In better-sqlite3, the transaction function is callable and has .deferred(), .immediate(), etc.
+        const transactionWrapper = Object.assign(
+            // Default call executes with BEGIN (same as immediate)
+            (...args: unknown[]): T => executeTransaction("BEGIN", ...args),
+            {
+                // Deferred transaction - locks acquired on first data access
+                deferred: (...args: unknown[]): T => executeTransaction("BEGIN DEFERRED", ...args),
+                // Immediate transaction - acquires write lock immediately
+                immediate: (...args: unknown[]): T => executeTransaction("BEGIN IMMEDIATE", ...args),
+                // Exclusive transaction - exclusive lock
+                exclusive: (...args: unknown[]): T => executeTransaction("BEGIN EXCLUSIVE", ...args),
+                // Default is same as calling directly
+                default: (...args: unknown[]): T => executeTransaction("BEGIN", ...args)
+            }
+        );
+
+        return transactionWrapper as unknown as Transaction;
+    }
+
+    get inTransaction(): boolean {
+        return this._inTransaction;
+    }
+
+    exec(query: string): void {
+        this.ensureDb();
+        this.db!.exec(query);
+    }
+
+    close(): void {
+        // Clean up all cached statements first
+        for (const statement of this.statementCache.values()) {
+            try {
+                statement.finalize();
+            } catch (e) {
+                // Ignore errors during cleanup
+                console.warn("Error finalizing statement during cleanup:", e);
+            }
+        }
+        this.statementCache.clear();
+
+        if (this.db) {
+            this.db.close();
+            this.db = undefined;
+        }
+
+        // Reset OPFS state
+        this.opfsDbPath = undefined;
+    }
+
+    /**
+     * Get the number of rows changed by the last INSERT, UPDATE, or DELETE statement.
+     */
+    changes(): number {
+        this.ensureDb();
+        return this.db!.changes();
+    }
+
+    /**
+     * Check if the database is currently open.
+     */
+    isOpen(): boolean {
+        return this.db !== undefined && this.db.isOpen();
+    }
+
+    private ensureSqlite3(): void {
+        if (!this.sqlite3) {
+            throw new Error(
+                "SQLite WASM module not initialized. Call initialize() first with the sqlite3 module."
+            );
+        }
+    }
+
+    private ensureDb(): void {
+        this.ensureSqlite3();
+        if (!this.db) {
+            throw new Error("Database not opened. Call loadFromMemory(), loadFromBuffer(), or loadFromOpfs() first.");
+        }
+    }
+}

apps/client-standalone/src/lightweight/translation_provider.ts

@@ -0,0 +1,16 @@
+import { LOCALE_IDS } from "@triliumnext/commons";
+import i18next from "i18next";
+import I18NextHttpBackend from "i18next-http-backend";
+
+export default async function translationProvider(locale: LOCALE_IDS) {
+    await i18next.use(I18NextHttpBackend).init({
+        lng: locale,
+        fallbackLng: "en",
+        ns: "server",
+        backend: {
+            loadPath: "server-assets/translations/{{lng}}/{{ns}}.json"
+        },
+        returnEmptyString: false,
+        debug: true
+    });
+}

apps/client-standalone/src/local-bridge.ts

@@ -0,0 +1,89 @@
+// public/local-bridge.js
+let localWorker: Worker | null = null;
+const pending = new Map();
+
+export function startLocalServerWorker() {
+    if (localWorker) return localWorker;
+
+    localWorker = new Worker(new URL("./local-server-worker.js", import.meta.url), { type: "module" });
+
+    // Handle worker errors during initialization
+    localWorker.onerror = (event) => {
+        console.error("[LocalBridge] Worker error:", event);
+        // Reject all pending requests
+        for (const [id, resolver] of pending) {
+            resolver.reject(new Error(`Worker error: ${event.message}`));
+        }
+        pending.clear();
+    };
+
+    localWorker.onmessage = (event) => {
+        const msg = event.data;
+        
+        // Handle worker error reports
+        if (msg?.type === "WORKER_ERROR") {
+            console.error("[LocalBridge] Worker reported error:", msg.error);
+            // Reject all pending requests with the error
+            for (const [id, resolver] of pending) {
+                resolver.reject(new Error(msg.error?.message || "Unknown worker error"));
+            }
+            pending.clear();
+            return;
+        }
+        
+        if (!msg || msg.type !== "LOCAL_RESPONSE") return;
+
+        const { id, response, error } = msg;
+        const resolver = pending.get(id);
+        if (!resolver) return;
+        pending.delete(id);
+
+        if (error) resolver.reject(new Error(error));
+        else resolver.resolve(response);
+    };
+
+    return localWorker;
+}
+
+export function attachServiceWorkerBridge() {
+    navigator.serviceWorker.addEventListener("message", async (event) => {
+        const msg = event.data;
+        if (!msg || msg.type !== "LOCAL_FETCH") return;
+
+        const port = event.ports && event.ports[0];
+        if (!port) return;
+
+        try {
+            startLocalServerWorker();
+
+            const id = msg.id;
+            const req = msg.request;
+
+            const response = await new Promise((resolve, reject) => {
+                pending.set(id, { resolve, reject });
+                // Transfer body to worker for efficiency (if present)
+                localWorker.postMessage({
+                    type: "LOCAL_REQUEST",
+                    id,
+                    request: req
+                }, req.body ? [req.body] : []);
+            });
+
+            port.postMessage({
+                type: "LOCAL_FETCH_RESPONSE",
+                id,
+                response
+            }, response.body ? [response.body] : []);
+        } catch (e) {
+            port.postMessage({
+                type: "LOCAL_FETCH_RESPONSE",
+                id: msg.id,
+                response: {
+                    status: 500,
+                    headers: { "content-type": "text/plain; charset=utf-8" },
+                    body: new TextEncoder().encode(String(e?.message || e)).buffer
+                }
+            });
+        }
+    });
+}

apps/client-standalone/src/local-server-worker.ts

@@ -0,0 +1,222 @@
+// public/local-server-worker.js
+// This will eventually import your core server and DB provider.
+// import { createCoreServer } from "@trilium/core"; (bundled)
+
+import { BrowserRouter } from './lightweight/browser_router';
+import { createConfiguredRouter } from './lightweight/browser_routes';
+import BrowserExecutionContext from './lightweight/cls_provider';
+import BrowserCryptoProvider from './lightweight/crypto_provider';
+import WorkerMessagingProvider from './lightweight/messaging_provider';
+import BrowserSqlProvider from './lightweight/sql_provider';
+import translationProvider from './lightweight/translation_provider';
+
+// Global error handlers - MUST be set up before any async imports
+self.onerror = (message, source, lineno, colno, error) => {
+    console.error("[Worker] Uncaught error:", message, source, lineno, colno, error);
+    // Try to notify the main thread about the error
+    try {
+        self.postMessage({
+            type: "WORKER_ERROR",
+            error: {
+                message: String(message),
+                source,
+                lineno,
+                colno,
+                stack: error?.stack
+            }
+        });
+    } catch (e) {
+        // Can't even post message, just log
+        console.error("[Worker] Failed to report error:", e);
+    }
+    return false; // Don't suppress the error
+};
+
+self.onunhandledrejection = (event) => {
+    console.error("[Worker] Unhandled rejection:", event.reason);
+    try {
+        self.postMessage({
+            type: "WORKER_ERROR",
+            error: {
+                message: String(event.reason?.message || event.reason),
+                stack: event.reason?.stack
+            }
+        });
+    } catch (e) {
+        console.error("[Worker] Failed to report rejection:", e);
+    }
+};
+
+console.log("[Worker] Error handlers installed");
+
+// Shared SQL provider instance
+const sqlProvider = new BrowserSqlProvider();
+
+// Messaging provider for worker-to-main-thread communication
+const messagingProvider = new WorkerMessagingProvider();
+
+// Core module, router, and initialization state
+let coreModule: typeof import("@triliumnext/core") | null = null;
+let router: BrowserRouter | null = null;
+let initPromise: Promise<void> | null = null;
+let initError: Error | null = null;
+
+/**
+ * Initialize SQLite WASM and load the core module.
+ * This happens once at worker startup.
+ */
+async function initialize(): Promise<void> {
+    if (initPromise) {
+        return initPromise; // Already initializing
+    }
+    if (initError) {
+        throw initError; // Failed before, don't retry
+    }
+
+    initPromise = (async () => {
+        try {
+            console.log("[Worker] Initializing SQLite WASM...");
+            await sqlProvider.initWasm();
+
+            // Try to use OPFS for persistent storage
+            if (sqlProvider.isOpfsAvailable()) {
+                console.log("[Worker] OPFS available, loading persistent database...");
+                sqlProvider.loadFromOpfs("/trilium.db");
+
+                // Check if database is initialized (schema exists)
+                if (!sqlProvider.isDbInitialized()) {
+                    console.log("[Worker] Database not initialized, loading demo data...");
+                    sqlProvider.initializeDemoDatabase();
+                    console.log("[Worker] Demo data loaded");
+                } else {
+                    console.log("[Worker] Existing initialized database loaded");
+                }
+            } else {
+                // Fall back to in-memory database (non-persistent)
+                console.warn("[Worker] OPFS not available, using in-memory database (data will not persist)");
+                console.warn("[Worker] To enable persistence, ensure COOP/COEP headers are set by the server");
+                sqlProvider.loadFromMemory();
+            }
+
+            console.log("[Worker] Database loaded");
+
+            console.log("[Worker] Loading @triliumnext/core...");
+            coreModule = await import("@triliumnext/core");
+            coreModule.initializeCore({
+                executionContext: new BrowserExecutionContext(),
+                crypto: new BrowserCryptoProvider(),
+                messaging: messagingProvider,
+                translations: translationProvider,
+                dbConfig: {
+                    provider: sqlProvider,
+                    isReadOnly: false,
+                    onTransactionCommit: () => {
+                        // No-op for now
+                    },
+                    onTransactionRollback: () => {
+                        // No-op for now
+                    }
+                }
+            });
+
+            console.log("[Worker] Supported routes", Object.keys(coreModule.routes));
+
+            // Create and configure the router
+            router = createConfiguredRouter();
+            console.log("[Worker] Router configured");
+
+            console.log("[Worker] Initializing becca...");
+            await coreModule.becca_loader.beccaLoaded;
+
+            console.log("[Worker] Initialization complete");
+        } catch (error) {
+            initError = error instanceof Error ? error : new Error(String(error));
+            console.error("[Worker] Initialization failed:", initError);
+            throw initError;
+        }
+    })();
+
+    return initPromise;
+}
+
+/**
+ * Ensure the worker is initialized before processing requests.
+ * Returns the router if initialization was successful.
+ */
+async function ensureInitialized() {
+    await initialize();
+    if (!router) {
+        throw new Error("Router not initialized");
+    }
+    return router;
+}
+
+const encoder = new TextEncoder();
+
+function jsonResponse(obj: unknown, status = 200, extraHeaders = {}) {
+    const body = encoder.encode(JSON.stringify(obj)).buffer;
+    return {
+        status,
+        headers: { "content-type": "application/json; charset=utf-8", ...extraHeaders },
+        body
+    };
+}
+
+interface LocalRequest {
+    method: string;
+    url: string;
+    body?: unknown;
+    headers?: Record<string, string>;
+}
+
+// Main dispatch
+async function dispatch(request: LocalRequest) {
+    const url = new URL(request.url);
+
+    console.log("[Worker] Dispatch:", url.pathname);
+
+    // Ensure initialization is complete and get the router
+    const appRouter = await ensureInitialized();
+
+    // Dispatch to the router
+    return appRouter.dispatch(request.method, request.url, request.body, request.headers);
+}
+
+// Start initialization immediately when the worker loads
+console.log("[Worker] Starting initialization...");
+initialize().catch(err => {
+    console.error("[Worker] Initialization failed:", err);
+    // Post error to main thread
+    self.postMessage({
+        type: "WORKER_ERROR",
+        error: {
+            message: String(err?.message || err),
+            stack: err?.stack
+        }
+    });
+});
+
+self.onmessage = async (event) => {
+    const msg = event.data;
+    if (!msg || msg.type !== "LOCAL_REQUEST") return;
+
+    const { id, request } = msg;
+
+    try {
+        const response = await dispatch(request);
+
+        // Transfer body back (if any) - use options object for proper typing
+        (self as unknown as Worker).postMessage({
+            type: "LOCAL_RESPONSE",
+            id,
+            response
+        }, { transfer: response.body ? [response.body] : [] });
+    } catch (e) {
+        console.error("[Worker] Dispatch error:", e);
+        (self as unknown as Worker).postMessage({
+            type: "LOCAL_RESPONSE",
+            id,
+            error: String((e as Error)?.message || e)
+        });
+    }
+};

apps/client-standalone/src/main.ts

@@ -0,0 +1,119 @@
+import { attachServiceWorkerBridge, startLocalServerWorker } from "./local-bridge.js";
+
+async function waitForServiceWorkerControl(): Promise<void> {
+    if (!("serviceWorker" in navigator)) {
+        throw new Error("Service Worker not supported in this browser");
+    }
+
+    // If already controlling, we're good
+    if (navigator.serviceWorker.controller) {
+        console.log("[Bootstrap] Service worker already controlling");
+        return;
+    }
+
+    console.log("[Bootstrap] Waiting for service worker to take control...");
+
+    // Register service worker
+    const registration = await navigator.serviceWorker.register("./sw.js", { scope: "/" });
+
+    // Wait for it to be ready (installed + activated)
+    await navigator.serviceWorker.ready;
+
+    // Check if we're now controlling
+    if (navigator.serviceWorker.controller) {
+        console.log("[Bootstrap] Service worker now controlling");
+        return;
+    }
+
+    // If not controlling yet, we need to reload the page for SW to take control
+    // This is standard PWA behavior on first install
+    console.log("[Bootstrap] Service worker installed but not controlling yet - reloading page");
+
+    // Wait a tiny bit for SW to fully activate
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    // Reload to let SW take control
+    window.location.reload();
+
+    // Throw to stop execution (page will reload)
+    throw new Error("Reloading for service worker activation");
+}
+
+async function fetchWithRetry(url: string, maxRetries = 3, delayMs = 500): Promise<Response> {
+    let lastError: Error | null = null;
+
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        try {
+            console.log(`[Bootstrap] Fetching ${url} (attempt ${attempt + 1}/${maxRetries})`);
+            const response = await fetch(url);
+
+            if (!response.ok) {
+                throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+            }
+
+            // Check if response has content
+            const contentType = response.headers.get("content-type");
+            if (!contentType || !contentType.includes("application/json")) {
+                throw new Error(`Invalid content-type: ${contentType || "none"}`);
+            }
+
+            return response;
+        } catch (err) {
+            lastError = err as Error;
+            console.warn(`[Bootstrap] Fetch attempt ${attempt + 1} failed:`, err);
+
+            if (attempt < maxRetries - 1) {
+                // Exponential backoff
+                const delay = delayMs * Math.pow(2, attempt);
+                console.log(`[Bootstrap] Retrying in ${delay}ms...`);
+                await new Promise(resolve => setTimeout(resolve, delay));
+            }
+        }
+    }
+
+    throw new Error(`Failed to fetch ${url} after ${maxRetries} attempts: ${lastError?.message}`);
+}
+
+async function bootstrap() {
+    /* fixes https://github.com/webpack/webpack/issues/10035 */
+    window.global = globalThis;
+
+    try {
+        // 1) Start local worker ASAP (so /bootstrap is fast)
+        startLocalServerWorker();
+
+        // 2) Bridge SW -> local worker
+        attachServiceWorkerBridge();
+
+        // 3) Wait for service worker to control the page (may reload on first install)
+        await waitForServiceWorkerControl();
+
+        await loadScripts();
+    } catch (err) {
+        // If error is from reload, it will stop here (page reloads)
+        // Otherwise, show error to user
+        if (err instanceof Error && err.message.includes("Reloading")) {
+            // Page is reloading, do nothing
+            return;
+        }
+
+        console.error("[Bootstrap] Fatal error:", err);
+        document.body.innerHTML = `
+            <div style="padding: 40px; max-width: 600px; margin: 0 auto; font-family: system-ui, sans-serif;">
+                <h1 style="color: #d32f2f;">Failed to Initialize</h1>
+                <p>The application failed to start. Please check the browser console for details.</p>
+                <pre style="background: #f5f5f5; padding: 16px; border-radius: 4px; overflow: auto;">${err instanceof Error ? err.message : String(err)}</pre>
+                <button onclick="location.reload()" style="padding: 12px 24px; background: #1976d2; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;">
+                    Reload Page
+                </button>
+            </div>
+        `;
+        document.body.style.display = "block";
+    }
+}
+
+async function loadScripts() {
+    await import("../../client/src/index.js");
+}
+
+bootstrap();

apps/client-standalone/src/sw.ts

@@ -0,0 +1,185 @@
+// public/sw.js
+const VERSION = "localserver-v1.4";
+const STATIC_CACHE = `static-${VERSION}`;
+
+// Check if running in dev mode (passed via URL parameter)
+const isDev = true;
+
+if (isDev) {
+    console.log('[Service Worker] Running in DEV mode - caching disabled');
+}
+
+// Adjust these to your routes:
+const LOCAL_FIRST_PREFIXES = [
+    "/bootstrap",
+    "/api/",
+    "/sync/",
+    "/search/"
+];
+
+// Optional: basic precache list (keep small; you can expand later)
+const PRECACHE_URLS = [
+    // "/",
+    // "/index.html",
+    // "/manifest.webmanifest",
+    // "/favicon.ico",
+];
+
+self.addEventListener("install", (event) => {
+    event.waitUntil((async () => {
+        // Skip precaching in dev mode
+        if (!isDev) {
+            const cache = await caches.open(STATIC_CACHE);
+            await cache.addAll(PRECACHE_URLS);
+        }
+        self.skipWaiting();
+    })());
+});
+
+self.addEventListener("activate", (event) => {
+    event.waitUntil((async () => {
+    // Cleanup old caches
+        const keys = await caches.keys();
+        await Promise.all(keys.map((k) => (k === STATIC_CACHE ? Promise.resolve() : caches.delete(k))));
+        await self.clients.claim();
+    })());
+});
+
+function isLocalFirst(url) {
+    return LOCAL_FIRST_PREFIXES.some((p) => url.pathname.startsWith(p));
+}
+
+async function cacheFirst(request) {
+    // In dev mode, always bypass cache
+    if (isDev) {
+        return fetch(request);
+    }
+
+    const cache = await caches.open(STATIC_CACHE);
+    const cached = await cache.match(request);
+    if (cached) return cached;
+
+    const fresh = await fetch(request);
+    // Cache only successful GETs
+    if (request.method === "GET" && fresh.ok) cache.put(request, fresh.clone());
+    return fresh;
+}
+
+async function networkFirst(request) {
+    // In dev mode, always bypass cache
+    if (isDev) {
+        return fetch(request);
+    }
+
+    const cache = await caches.open(STATIC_CACHE);
+    try {
+        const fresh = await fetch(request);
+        // Cache only successful GETs
+        if (request.method === "GET" && fresh.ok) cache.put(request, fresh.clone());
+        return fresh;
+    } catch (error) {
+        // Fallback to cache if network fails
+        const cached = await cache.match(request);
+        if (cached) return cached;
+        throw error;
+    }
+}
+
+async function forwardToClientLocalServer(request, clientId) {
+    // Find a client to handle the request (prefer the initiating client if available)
+    let client = clientId ? await self.clients.get(clientId) : null;
+
+    if (!client) {
+        const all = await self.clients.matchAll({ type: "window", includeUncontrolled: true });
+        client = all[0] || null;
+    }
+
+    // If no page is available, fall back to network
+    if (!client) return fetch(request);
+
+    const reqUrl = request.url;
+    const headersObj = {};
+    for (const [k, v] of request.headers.entries()) headersObj[k] = v;
+
+    const body = (request.method === "GET" || request.method === "HEAD")
+        ? null
+        : await request.arrayBuffer();
+
+    const id = crypto.randomUUID();
+    const channel = new MessageChannel();
+
+    const responsePromise = new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+            reject(new Error("Local server timeout"));
+        }, 30_000);
+
+        channel.port1.onmessage = (event) => {
+            clearTimeout(timeout);
+            resolve(event.data);
+        };
+        channel.port1.onmessageerror = () => {
+            clearTimeout(timeout);
+            reject(new Error("Local server message error"));
+        };
+    });
+
+    // Send to the client with a reply port
+    client.postMessage({
+        type: "LOCAL_FETCH",
+        id,
+        request: {
+            url: reqUrl,
+            method: request.method,
+            headers: headersObj,
+            body // ArrayBuffer or null
+        }
+    }, [channel.port2]);
+
+    const localResp = await responsePromise;
+
+    if (!localResp || localResp.type !== "LOCAL_FETCH_RESPONSE" || localResp.id !== id) {
+    // Protocol mismatch; fall back
+        return fetch(request);
+    }
+
+    // localResp.response: { status, headers, body }
+    const { status, headers, body: respBody } = localResp.response;
+
+    const respHeaders = new Headers();
+    if (headers) {
+        for (const [k, v] of Object.entries(headers)) respHeaders.set(k, String(v));
+    }
+
+    return new Response(respBody ? respBody : null, {
+        status: status || 200,
+        headers: respHeaders
+    });
+}
+
+self.addEventListener("fetch", (event) => {
+    const url = new URL(event.request.url);
+
+    // Only handle same-origin
+    if (url.origin !== self.location.origin) return;
+
+    // HTML files: network-first to ensure updates are reflected immediately
+    if (event.request.mode === "navigate" || url.pathname.endsWith(".html")) {
+        event.respondWith(networkFirst(event.request));
+        return;
+    }
+
+    // Static assets: cache-first for performance
+    if (event.request.method === "GET" && !isLocalFirst(url)) {
+        event.respondWith(cacheFirst(event.request));
+        return;
+    }
+
+    // API-ish: local-first via bridge
+    if (isLocalFirst(url)) {
+        event.respondWith(forwardToClientLocalServer(event.request, event.clientId));
+        return;
+    }
+
+    // Default
+    event.respondWith(fetch(event.request));
+});

apps/client-standalone/src/vite-env.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_APP_TITLE: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}
+
+interface Window {
+  glob: {
+    assetPath: string;
+    themeCssUrl?: string;
+    themeUseNextAsBase?: string;
+    iconPackCss: string;
+    device: string;
+    headingStyle: string;
+    layoutOrientation: string;
+    platform: string;
+    isElectron: boolean;
+    hasNativeTitleBar: boolean;
+    hasBackgroundEffects: boolean;
+    currentLocale: {
+      id: string;
+      rtl: boolean;
+    };
+    activeDialog: any;
+  };
+  global: typeof globalThis;
+}

apps/client-standalone/tsconfig.app.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": [
+      "ES2022",
+      "dom",
+      "dom.iterable"
+    ],
+    "skipLibCheck": true,
+    "types": [
+      "vite/client"
+    ],
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact"
+  },
+  "include": [
+    "src/**/*",
+    "../client/src/**/*"
+  ],
+  "exclude": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "../client/src/**/*.spec.ts",
+    "../client/src/**/*.test.ts"
+  ]
+}

apps/client-standalone/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.spec.json" }
+  ]
+}

apps/client-standalone/tsconfig.spec.json

@@ -0,0 +1,18 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "lib": [
+      "ES2022",
+      "dom",
+      "dom.iterable"
+    ],
+    "types": [
+      "vitest/globals",
+      "happy-dom"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts"
+  ]
+}

apps/client-standalone/vite.config.mts

@@ -0,0 +1,188 @@
+import prefresh from '@prefresh/vite';
+import { join } from 'path';
+import { defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+
+const clientAssets = ["assets", "stylesheets", "fonts", "translations"];
+
+const isDev = process.env.NODE_ENV === "development";
+
+// Watch client files and trigger reload in development
+const clientWatchPlugin = () => ({
+    name: 'client-watch',
+    configureServer(server: any) {
+        if (isDev) {
+            // Watch client source files (adjusted for new root)
+            server.watcher.add('../../client/src/**/*');
+            server.watcher.on('change', (file: string) => {
+                if (file.includes('../../client/src/')) {
+                    server.ws.send({
+                        type: 'full-reload'
+                    });
+                }
+            });
+        }
+    }
+});
+
+// Always copy SQLite WASM files so they're available to the module
+const sqliteWasmPlugin = viteStaticCopy({
+    targets: [
+        {
+            src: "../../../node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3.wasm",
+            dest: "assets"
+        },
+        {
+            src: "../../../node_modules/@sqlite.org/sqlite-wasm/sqlite-wasm/jswasm/sqlite3-opfs-async-proxy.js",
+            dest: "assets"
+        }
+    ]
+});
+
+let plugins: any = [
+    sqliteWasmPlugin,  // Always include SQLite WASM files
+    viteStaticCopy({
+        targets: clientAssets.map((asset) => ({
+            src: `../../client/src/${asset}/*`,
+            dest: asset
+        })),
+        // Enable watching in development
+        ...(isDev && {
+            watch: {
+                reloadPageOnChange: true
+            }
+        })
+    }),
+    viteStaticCopy({
+        targets: [
+            {
+                src: "../../server/src/assets/*",
+                dest: "server-assets"
+            }
+        ]
+    }),
+    // Watch client files for changes in development
+    ...(isDev ? [
+        prefresh(),
+        clientWatchPlugin()
+    ] : [])
+];
+
+if (!isDev) {
+    plugins = [
+        ...plugins,
+        viteStaticCopy({
+            structured: true,
+            targets: [
+                {
+                    src: "../../../node_modules/@excalidraw/excalidraw/dist/prod/fonts/*",
+                    dest: "",
+                }
+            ]
+        })
+    ]
+}
+
+export default defineConfig(() => ({
+    root: join(__dirname, 'src'),  // Set src as root so index.html is served from /
+    cacheDir: '../../../node_modules/.vite/apps/client-standalone',
+    base: "",
+    plugins,
+    esbuild: {
+        jsx: 'automatic',
+        jsxImportSource: 'preact',
+        jsxDev: isDev
+    },
+    css: {
+        transformer: 'lightningcss',
+        devSourcemap: isDev
+    },
+    publicDir: join(__dirname, 'public'),
+    resolve: {
+        alias: [
+            {
+                find: "react",
+                replacement: "preact/compat"
+            },
+            {
+                find: "react-dom",
+                replacement: "preact/compat"
+            },
+            {
+                find: "@client",
+                replacement: join(__dirname, "../client/src")
+            }
+        ],
+        dedupe: [
+            "react",
+            "react-dom",
+            "preact",
+            "preact/compat",
+            "preact/hooks"
+        ]
+    },
+    server: {
+        watch: {
+            // Watch workspace packages
+            ignored: ['!**/node_modules/@triliumnext/**'],
+            // Also watch client assets for live reload
+            usePolling: false,
+            interval: 100,
+            binaryInterval: 300
+        },
+        // Watch additional directories for changes
+        fs: {
+            allow: [
+                // Allow access to workspace root
+                '../../../',
+                // Explicitly allow client directory
+                '../../client/src/'
+            ]
+        },
+        headers: {
+            // Required for SharedArrayBuffer which is needed by SQLite WASM OPFS VFS
+            // See: https://sqlite.org/wasm/doc/trunk/persistence.md#coop-coep
+            "Cross-Origin-Opener-Policy": "same-origin",
+            "Cross-Origin-Embedder-Policy": "require-corp"
+        }
+    },
+    optimizeDeps: {
+        exclude: ['@sqlite.org/sqlite-wasm', '@triliumnext/core']
+    },
+    worker: {
+        format: "es" as const
+    },
+    commonjsOptions: {
+        transformMixedEsModules: true,
+    },
+    build: {
+        target: "esnext",
+        outDir: join(__dirname, 'dist'),
+        emptyOutDir: true,
+        rollupOptions: {
+            input: {
+                main: join(__dirname, 'src', 'index.html'),
+                sw: join(__dirname, 'src', 'sw.ts'),
+                'local-bridge': join(__dirname, 'src', 'local-bridge.ts'),
+                'local-server-worker': join(__dirname, 'src', 'local-server-worker.ts')
+            },
+            output: {
+                entryFileNames: (chunkInfo) => {
+                    // Service worker and other workers should be at root level
+                    if (chunkInfo.name === 'sw' || chunkInfo.name === 'local-server-worker') {
+                        return '[name].js';
+                    }
+                    return 'src/[name].js';
+                },
+                chunkFileNames: "src/[name].js",
+                assetFileNames: "src/[name].[ext]"
+            }
+        }
+    },
+    test: {
+        environment: "happy-dom"
+    },
+    define: {
+        "process.env.IS_PREACT": JSON.stringify("true"),
+    }
+}));

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.101.1",
+  "version": "0.101.3",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -56,13 +56,12 @@
     "mark.js": "8.11.1",
     "marked": "17.0.1",
     "mermaid": "11.12.2",
-    "mind-elixir": "5.4.0",
+    "mind-elixir": "5.5.0",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
     "preact": "10.28.1",
     "react-i18next": "16.5.1",
-    "react-window": "2.2.3",
-    "react-zoom-pan-pinch": "3.7.0",
+    "react-window": "2.2.4",
     "reveal.js": "5.2.1",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
@@ -70,7 +69,7 @@
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-inspector": "5.0.0",
-    "@preact/preset-vite": "2.10.2",
+    "@prefresh/vite": "2.4.11",
     "@types/bootstrap": "5.2.10",
     "@types/jquery": "3.5.33",
     "@types/leaflet": "1.9.21",
@@ -80,6 +79,7 @@
     "@types/tabulator-tables": "6.3.1",
     "copy-webpack-plugin": "13.0.1",
     "happy-dom": "20.0.11",
+    "lightningcss": "1.30.2",
     "script-loader": "0.7.2",
     "vite-plugin-static-copy": "3.1.4"
   }

apps/client/src/components/app_context.ts

@@ -154,6 +154,7 @@ export type CommandMappings = {
     };
     openInTab: ContextMenuCommandData;
     openNoteInSplit: ContextMenuCommandData;
+    openNoteInWindow: ContextMenuCommandData;
     openNoteInPopup: ContextMenuCommandData;
     toggleNoteHoisting: ContextMenuCommandData;
     insertNoteAfter: ContextMenuCommandData;

apps/client/src/entities/fnote.ts

@@ -616,7 +616,9 @@ export default class FNote {
     }
 
     isFolder() {
-        return this.type === "search" || this.getFilteredChildBranches().length > 0;
+        if (this.isLabelTruthy("subtreeHidden")) return false;
+        if (this.type === "search") return true;
+        return this.getFilteredChildBranches().length > 0;
     }
 
     getFilteredChildBranches() {

apps/client/src/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <link rel="shortcut icon" href="favicon.ico">
+        <meta name="mobile-web-app-capable" content="yes">
+        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
+        <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
+        <title>Trilium Notes</title>
+    </head>
+
+    <body id="trilium-app">
+        <noscript>Trilium requires JavaScript to be enabled.</noscript>
+
+        <div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>
+
+        <!-- Required to match the PWA's top bar color with the theme -->
+        <!-- This works even when the user directly changes --root-background in CSS -->
+        <div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
+
+        <script src="./index.ts" type="module"></script>
+
+        <!-- Required for correct loading of scripts in Electron -->
+        <script>
+            if (typeof module === 'object') {window.module = module; module = undefined;}
+        </script>
+    </body>
+</html>

apps/client/src/index.ts

@@ -0,0 +1,143 @@
+async function bootstrap() {
+    showSplash();
+    await setupGlob();
+    await Promise.all([
+        initJQuery(),
+        loadBootstrapCss()
+    ]);
+    loadStylesheets();
+    loadIcons();
+    setBodyAttributes();
+    await loadScripts();
+    hideSplash();
+}
+
+async function initJQuery() {
+    const $ = (await import("jquery")).default;
+    window.$ = $;
+    window.jQuery = $;
+}
+
+async function setupGlob() {
+    const response = await fetch(`/bootstrap${window.location.search}`);
+    const json = await response.json();
+
+    window.global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
+    window.glob = {
+        ...json,
+        activeDialog: null,
+        device: json.device || getDevice()
+    };
+}
+
+function getDevice() {
+    // Respect user's manual override via URL.
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.has("print")) {
+        return "print";
+    } else if (urlParams.has("desktop")) {
+        return "desktop";
+    } else if (urlParams.has("mobile")) {
+        return "mobile";
+    }
+
+    const deviceCookie = document.cookie.split("; ").find(row => row.startsWith("trilium-device="))?.split("=")[1];
+    if (deviceCookie === "desktop" || deviceCookie === "mobile") return deviceCookie;
+    return isMobile() ? "mobile" : "desktop";
+}
+
+// https://stackoverflow.com/a/73731646/944162
+function isMobile() {
+    const mQ = matchMedia?.("(pointer:coarse)");
+    if (mQ?.media === "(pointer:coarse)") return !!mQ.matches;
+
+    if ("orientation" in window) return true;
+    const userAgentsRegEx = /\b(Android|iPhone|iPad|iPod|Windows Phone|BlackBerry|webOS|IEMobile)\b/i;
+    return userAgentsRegEx.test(navigator.userAgent);
+}
+
+async function loadBootstrapCss() {
+    // We have to selectively import Bootstrap CSS based on text direction.
+    if (glob.isRtl) {
+        await import("bootstrap/dist/css/bootstrap.rtl.min.css");
+    } else {
+        await import("bootstrap/dist/css/bootstrap.min.css");
+    }
+}
+
+function loadStylesheets() {
+    const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+    const cssToLoad: string[] = [];
+    cssToLoad.push(`${assetPath}/stylesheets/ckeditor-theme.css`);
+    cssToLoad.push(`api/fonts`);
+    cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
+    if (themeCssUrl) {
+        cssToLoad.push(themeCssUrl);
+    }
+    if (themeUseNextAsBase === "next") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`);
+    } else if (themeUseNextAsBase === "next-dark") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`);
+    } else if (themeUseNextAsBase === "next-light") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`);
+    }
+    cssToLoad.push(`${assetPath}/stylesheets/style.css`);
+
+    for (const href of cssToLoad) {
+        const linkEl = document.createElement("link");
+        linkEl.href = href;
+        linkEl.rel = "stylesheet";
+        document.head.appendChild(linkEl);
+    }
+}
+
+function loadIcons() {
+    const styleEl = document.createElement("style");
+    styleEl.innerText = window.glob.iconPackCss;
+    document.head.appendChild(styleEl);
+}
+
+function setBodyAttributes() {
+    const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
+    const classesToSet = [
+        device,
+        `heading-style-${headingStyle}`,
+        `layout-${layoutOrientation}`,
+        `platform-${platform}`,
+        isElectron && "electron",
+        hasNativeTitleBar && "native-titlebar",
+        hasBackgroundEffects && "background-effects"
+    ].filter(Boolean) as string[];
+
+    for (const classToSet of classesToSet) {
+        document.body.classList.add(classToSet);
+    }
+
+    document.body.lang = currentLocale.id;
+    document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
+}
+
+async function loadScripts() {
+    switch (glob.device) {
+        case "mobile":
+            await import("./mobile.js");
+            break;
+        case "print":
+            await import("./print.js");
+            break;
+        case "desktop":
+        default:
+            await import("./desktop.js");
+    }
+}
+
+function showSplash() {
+    // hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide <noscript>
+    document.body.style.display = "none";
+}
+
+function hideSplash() {
+    document.body.style.display = "block";
+}
+
+bootstrap();

apps/client/src/menus/tree_context_menu.ts

@@ -1,21 +1,21 @@
-import NoteColorPicker from "./custom-items/NoteColorPicker.jsx";
-import treeService from "../services/tree.js";
-import froca from "../services/froca.js";
-import clipboard from "../services/clipboard.js";
-import noteCreateService from "../services/note_create.js";
-import contextMenu, { type MenuCommandItem, type MenuItem } from "./context_menu.js";
 import appContext, { type ContextMenuCommandData, type FilteredCommandNames } from "../components/app_context.js";
+import type { SelectMenuItemEventListener } from "../components/events.js";
+import type FAttachment from "../entities/fattachment.js";
+import attributes from "../services/attributes.js";
+import { executeBulkActions } from "../services/bulk_action.js";
+import clipboard from "../services/clipboard.js";
+import dialogService from "../services/dialog.js";
+import froca from "../services/froca.js";
+import { t } from "../services/i18n.js";
+import noteCreateService from "../services/note_create.js";
 import noteTypesService from "../services/note_types.js";
 import server from "../services/server.js";
 import toastService from "../services/toast.js";
-import dialogService from "../services/dialog.js";
-import { t } from "../services/i18n.js";
-import type NoteTreeWidget from "../widgets/note_tree.js";
-import type FAttachment from "../entities/fattachment.js";
-import type { SelectMenuItemEventListener } from "../components/events.js";
+import treeService from "../services/tree.js";
 import utils from "../services/utils.js";
-import attributes from "../services/attributes.js";
-import { executeBulkActions } from "../services/bulk_action.js";
+import type NoteTreeWidget from "../widgets/note_tree.js";
+import contextMenu, { type MenuCommandItem, type MenuItem } from "./context_menu.js";
+import NoteColorPicker from "./custom-items/NoteColorPicker.jsx";
 
 // TODO: Deduplicate once client/server is well split.
 interface ConvertToAttachmentResponse {
@@ -72,6 +72,8 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
         const noSelectedNotes = selNodes.length === 0 || (selNodes.length === 1 && selNodes[0] === this.node);
 
         const notSearch = note?.type !== "search";
+        const hasSubtreeHidden = note?.isLabelTruthy("subtreeHidden") ?? false;
+        const isSpotlighted = this.node.extraClasses.includes("spotlighted-node");
         const notOptionsOrHelp = !note?.noteId.startsWith("_options") && !note?.noteId.startsWith("_help");
         const parentNotSearch = !parentNote || parentNote.type !== "search";
         const insertNoteAfterEnabled = isNotRoot && !isHoisted && parentNotSearch;
@@ -79,17 +81,18 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
         const items: (MenuItem<TreeCommandNames> | null)[] = [
             { title: t("tree-context-menu.open-in-a-new-tab"), command: "openInTab", shortcut: "Ctrl+Click", uiIcon: "bx bx-link-external", enabled: noSelectedNotes },
             { title: t("tree-context-menu.open-in-a-new-split"), command: "openNoteInSplit", uiIcon: "bx bx-dock-right", enabled: noSelectedNotes },
+            { title: t("tree-context-menu.open-in-a-new-window"), command: "openNoteInWindow", uiIcon: "bx bx-window-open", enabled: noSelectedNotes },
             { title: t("tree-context-menu.open-in-popup"), command: "openNoteInPopup", uiIcon: "bx bx-edit", enabled: noSelectedNotes },
 
             isHoisted
                 ? null
                 : {
-                      title: `${t("tree-context-menu.hoist-note")}`,
-                      command: "toggleNoteHoisting",
-                      keyboardShortcut: "toggleNoteHoisting",
-                      uiIcon: "bx bxs-chevrons-up",
-                      enabled: noSelectedNotes && notSearch
-                  },
+                    title: `${t("tree-context-menu.hoist-note")}`,
+                    command: "toggleNoteHoisting",
+                    keyboardShortcut: "toggleNoteHoisting",
+                    uiIcon: "bx bxs-chevrons-up",
+                    enabled: noSelectedNotes && notSearch
+                },
             !isHoisted || !isNotRoot
                 ? null
                 : { title: t("tree-context-menu.unhoist-note"), command: "toggleNoteHoisting", keyboardShortcut: "toggleNoteHoisting", uiIcon: "bx bx-door-open" },
@@ -112,7 +115,7 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
                 keyboardShortcut: "createNoteInto",
                 uiIcon: "bx bx-plus",
                 items: notSearch ? await noteTypesService.getNoteTypeItems("insertChildNote") : null,
-                enabled: notSearch && noSelectedNotes && notOptionsOrHelp,
+                enabled: notSearch && noSelectedNotes && notOptionsOrHelp && !hasSubtreeHidden && !isSpotlighted,
                 columns: 2
             },
 
@@ -150,8 +153,17 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
 
                     { kind: "separator" },
 
-                    { title: t("tree-context-menu.expand-subtree"), command: "expandSubtree", keyboardShortcut: "expandSubtree", uiIcon: "bx bx-expand", enabled: noSelectedNotes },
-                    { title: t("tree-context-menu.collapse-subtree"), command: "collapseSubtree", keyboardShortcut: "collapseSubtree", uiIcon: "bx bx-collapse", enabled: noSelectedNotes },
+                    !hasSubtreeHidden && { title: t("tree-context-menu.expand-subtree"), command: "expandSubtree", keyboardShortcut: "expandSubtree", uiIcon: "bx bx-expand", enabled: noSelectedNotes },
+                    !hasSubtreeHidden && { title: t("tree-context-menu.collapse-subtree"), command: "collapseSubtree", keyboardShortcut: "collapseSubtree", uiIcon: "bx bx-collapse", enabled: noSelectedNotes },
+                    {
+                        title: hasSubtreeHidden ? t("tree-context-menu.show-subtree") : t("tree-context-menu.hide-subtree"),
+                        uiIcon: "bx bx-show",
+                        handler: async () => {
+                            const note = await froca.getNote(this.node.data.noteId);
+                            if (!note) return;
+                            attributes.setBooleanWithInheritance(note, "subtreeHidden", !hasSubtreeHidden);
+                        }
+                    },
                     {
                         title: t("tree-context-menu.sort-by"),
                         command: "sortChildNotes",
@@ -164,7 +176,7 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
 
                     { title: t("tree-context-menu.copy-note-path-to-clipboard"), command: "copyNotePathToClipboard", uiIcon: "bx bx-directions", enabled: true },
                     { title: t("tree-context-menu.recent-changes-in-subtree"), command: "recentChangesInSubtree", uiIcon: "bx bx-history", enabled: noSelectedNotes && notOptionsOrHelp }
-                ]
+                ].filter(Boolean) as MenuItem<TreeCommandNames>[]
             },
 
             { kind: "separator" },
@@ -292,25 +304,30 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
             noteCreateService.createNote(parentNotePath, {
                 target: "after",
                 targetBranchId: this.node.data.branchId,
-                type: type,
-                isProtected: isProtected,
-                templateNoteId: templateNoteId
+                type,
+                isProtected,
+                templateNoteId
             });
         } else if (command === "insertChildNote") {
             const parentNotePath = treeService.getNotePath(this.node);
 
             noteCreateService.createNote(parentNotePath, {
-                type: type,
+                type,
                 isProtected: this.node.data.isProtected,
-                templateNoteId: templateNoteId
+                templateNoteId
             });
         } else if (command === "openNoteInSplit") {
             const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
             const { ntxId } = subContexts?.[subContexts.length - 1] ?? {};
 
             this.treeWidget.triggerCommand("openNewNoteSplit", { ntxId, notePath });
+        } else if (command === "openNoteInWindow") {
+            appContext.triggerCommand("openInWindow", {
+                notePath,
+                hoistedNoteId: appContext.tabManager.getActiveContext()?.hoistedNoteId
+            });
         } else if (command === "openNoteInPopup") {
-            appContext.triggerCommand("openInPopup", { noteIdOrPath: notePath })
+            appContext.triggerCommand("openInPopup", { noteIdOrPath: notePath });
         } else if (command === "convertNoteToAttachment") {
             if (!(await dialogService.confirm(t("tree-context-menu.convert-to-attachment-confirm")))) {
                 return;
@@ -332,11 +349,11 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
 
             toastService.showMessage(t("tree-context-menu.converted-to-attachments", { count: converted }));
         } else if (command === "copyNotePathToClipboard") {
-            navigator.clipboard.writeText("#" + notePath);
+            navigator.clipboard.writeText(`#${  notePath}`);
         } else if (command) {
             this.treeWidget.triggerCommand<TreeCommandNames>(command, {
                 node: this.node,
-                notePath: notePath,
+                notePath,
                 noteId: this.node.data.noteId,
                 selectedOrActiveBranchIds: this.treeWidget.getSelectedOrActiveBranchIds(this.node),
                 selectedOrActiveNoteIds: this.treeWidget.getSelectedOrActiveNoteIds(this.node)

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

@@ -0,0 +1,139 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import { buildNote } from "../test/easy-froca";
+import { setBooleanWithInheritance } from "./attributes";
+import froca from "./froca";
+import server from "./server.js";
+
+// Spy on server methods to track calls
+// @ts-expect-error the generic typing is causing issues here
+server.put = vi.fn(async <T> (url: string, data?: T) => ({} as T));
+// @ts-expect-error the generic typing is causing issues here
+server.remove = vi.fn(async <T> (url: string) => ({} as T));
+
+describe("Set boolean with inheritance", () => {
+    beforeEach(() => {
+        vi.clearAllMocks();
+    });
+
+    it("doesn't call server if value matches directly", async () => {
+        const noteWithLabel = buildNote({
+            title: "New note",
+            "#foo": ""
+        });
+        const noteWithoutLabel = buildNote({
+            title: "New note"
+        });
+
+        await setBooleanWithInheritance(noteWithLabel, "foo", true);
+        await setBooleanWithInheritance(noteWithoutLabel, "foo", false);
+        expect(server.put).not.toHaveBeenCalled();
+        expect(server.remove).not.toHaveBeenCalled();
+    });
+
+    it("sets boolean normally without inheritance", async () => {
+        const standaloneNote = buildNote({
+            title: "New note"
+        });
+
+        await setBooleanWithInheritance(standaloneNote, "foo", true);
+        expect(server.put).toHaveBeenCalledWith(`notes/${standaloneNote.noteId}/set-attribute`, {
+            type: "label",
+            name: "foo",
+            value: "",
+            isInheritable: false
+        });
+    });
+
+    it("removes boolean normally without inheritance", async () => {
+        const standaloneNote = buildNote({
+            title: "New note",
+            "#foo": ""
+        });
+
+        const attributeId = standaloneNote.getLabel("foo")!.attributeId;
+        await setBooleanWithInheritance(standaloneNote, "foo", false);
+        expect(server.remove).toHaveBeenCalledWith(`notes/${standaloneNote.noteId}/attributes/${attributeId}`);
+    });
+
+    it("doesn't call server if value matches inherited", async () => {
+        const parentNote = buildNote({
+            title: "Parent note",
+            "#foo(inheritable)": "",
+            "children": [
+                {
+                    title: "Child note"
+                }
+            ]
+        });
+        const childNote = froca.getNoteFromCache(parentNote.children[0])!;
+        expect(childNote.isLabelTruthy("foo")).toBe(true);
+        await setBooleanWithInheritance(childNote, "foo", true);
+        expect(server.put).not.toHaveBeenCalled();
+        expect(server.remove).not.toHaveBeenCalled();
+    });
+
+    it("overrides boolean with inheritance", async () => {
+        const parentNote = buildNote({
+            title: "Parent note",
+            "#foo(inheritable)": "",
+            "children": [
+                {
+                    title: "Child note"
+                }
+            ]
+        });
+        const childNote = froca.getNoteFromCache(parentNote.children[0])!;
+        expect(childNote.isLabelTruthy("foo")).toBe(true);
+        await setBooleanWithInheritance(childNote, "foo", false);
+        expect(server.put).toHaveBeenCalledWith(`notes/${childNote.noteId}/set-attribute`, {
+            type: "label",
+            name: "foo",
+            value: "false",
+            isInheritable: false
+        });
+    });
+
+    it("overrides boolean with inherited false", async () => {
+        const parentNote = buildNote({
+            title: "Parent note",
+            "#foo(inheritable)": "false",
+            "children": [
+                {
+                    title: "Child note"
+                }
+            ]
+        });
+        const childNote = froca.getNoteFromCache(parentNote.children[0])!;
+        expect(childNote.isLabelTruthy("foo")).toBe(false);
+        await setBooleanWithInheritance(childNote, "foo", true);
+        expect(server.put).toHaveBeenCalledWith(`notes/${childNote.noteId}/set-attribute`, {
+            type: "label",
+            name: "foo",
+            value: "",
+            isInheritable: false
+        });
+    });
+
+    it("deletes override boolean with inherited false with already existing value", async () => {
+        const parentNote = buildNote({
+            title: "Parent note",
+            "#foo(inheritable)": "false",
+            "children": [
+                {
+                    title: "Child note",
+                    "#foo": "false",
+                }
+            ]
+        });
+        const childNote = froca.getNoteFromCache(parentNote.children[0])!;
+        expect(childNote.isLabelTruthy("foo")).toBe(false);
+        await setBooleanWithInheritance(childNote, "foo", true);
+        expect(server.put).toBeCalledWith(`notes/${childNote.noteId}/set-attribute`, {
+            type: "label",
+            name: "foo",
+            value: "",
+            isInheritable: false
+        });
+    });
+});

apps/client/src/services/attributes.ts

@@ -1,14 +1,15 @@
-import server from "./server.js";
-import froca from "./froca.js";
-import type FNote from "../entities/fnote.js";
-import type { AttributeRow } from "./load_results.js";
 import { AttributeType } from "@triliumnext/commons";
 
+import type FNote from "../entities/fnote.js";
+import froca from "./froca.js";
+import type { AttributeRow } from "./load_results.js";
+import server from "./server.js";
+
 async function addLabel(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/attribute`, {
         type: "label",
-        name: name,
-        value: value,
+        name,
+        value,
         isInheritable
     });
 }
@@ -16,8 +17,8 @@ async function addLabel(noteId: string, name: string, value: string = "", isInhe
 export async function setLabel(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/set-attribute`, {
         type: "label",
-        name: name,
-        value: value,
+        name,
+        value,
         isInheritable
     });
 }
@@ -25,12 +26,42 @@ export async function setLabel(noteId: string, name: string, value: string = "",
 export async function setRelation(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/set-attribute`, {
         type: "relation",
-        name: name,
-        value: value,
+        name,
+        value,
         isInheritable
     });
 }
 
+/**
+ * Sets a boolean label on the given note, taking inheritance into account. If the desired value matches the inherited
+ * value, any owned label will be removed to allow the inherited value to take effect. If the desired value differs
+ * from the inherited value, an owned label will be created or updated to reflect the desired value.
+ *
+ * When checking if the boolean value is set, don't use `note.hasLabel`; instead use `note.isLabelTruthy`.
+ *
+ * @param note the note on which to set the boolean label.
+ * @param labelName the name of the label to set.
+ * @param value the boolean value to set for the label.
+ */
+export async function setBooleanWithInheritance(note: FNote, labelName: string, value: boolean) {
+    const actualValue = note.isLabelTruthy(labelName);
+    if (actualValue === value) return;
+    const hasInheritedValue = !note.hasOwnedLabel(labelName) && note.hasLabel(labelName);
+
+    if (hasInheritedValue) {
+        if (value) {
+            setLabel(note.noteId, labelName, "");
+        } else {
+            // Label is inherited - override to false.
+            setLabel(note.noteId, labelName, "false");
+        }
+    } else if (value) {
+        setLabel(note.noteId, labelName, "");
+    } else {
+        removeOwnedLabelByName(note, labelName);
+    }
+}
+
 async function removeAttributeById(noteId: string, attributeId: string) {
     await server.remove(`notes/${noteId}/attributes/${attributeId}`);
 }
@@ -142,6 +173,7 @@ export default {
     setLabel,
     setRelation,
     setAttribute,
+    setBooleanWithInheritance,
     removeAttributeById,
     removeOwnedLabelByName,
     removeOwnedRelationByName,

apps/client/src/services/branches.ts

@@ -1,12 +1,12 @@
-import utils from "./utils.js";
-import server from "./server.js";
-import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
+import appContext from "../components/app_context.js";
+import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
 import froca from "./froca.js";
 import hoistedNoteService from "./hoisted_note.js";
-import ws from "./ws.js";
-import appContext from "../components/app_context.js";
 import { t } from "./i18n.js";
-import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
+import server from "./server.js";
+import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
+import utils from "./utils.js";
+import ws from "./ws.js";
 
 // TODO: Deduplicate type with server
 interface Response {
@@ -66,7 +66,7 @@ async function moveAfterBranch(branchIdsToMove: string[], afterBranchId: string)
     }
 }
 
-async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: string) {
+async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: string, componentId?: string) {
     const newParentBranch = froca.getBranch(newParentBranchId);
     if (!newParentBranch) {
         return;
@@ -86,7 +86,7 @@ async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: st
             continue;
         }
 
-        const resp = await server.put<Response>(`branches/${branchIdToMove}/move-to/${newParentBranchId}`);
+        const resp = await server.put<Response>(`branches/${branchIdToMove}/move-to/${newParentBranchId}`, undefined, componentId);
 
         if (!resp.success) {
             toastService.showError(resp.message);

apps/client/src/services/content_renderer.ts

@@ -23,6 +23,12 @@ export interface RenderOptions {
     imageHasZoom?: boolean;
     /** If enabled, it will prevent the default behavior in which an empty note would display a list of children. */
     noChildrenList?: boolean;
+    /** If enabled, it will prevent rendering of included notes. */
+    noIncludedNotes?: boolean;
+    /** If enabled, it will include archived notes when rendering children list. */
+    includeArchivedNotes?: boolean;
+    /** Set of note IDs that have already been seen during rendering to prevent infinite recursion. */
+    seenNoteIds?: Set<string>;
 }
 
 const CODE_MIME_TYPES = new Set(["application/json"]);

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

@@ -0,0 +1,132 @@
+import { trimIndentation } from "@triliumnext/commons";
+import { describe, expect, it } from "vitest";
+
+import { buildNote } from "../test/easy-froca";
+import renderText from "./content_renderer_text";
+
+describe("Text content renderer", () => {
+    it("renders included note", async () => {
+        const contentEl = document.createElement("div");
+        const includedNote = buildNote({
+            title: "Included note",
+            content: "<p>This is the included note.</p>"
+        });
+        const note = buildNote({
+            title: "New note",
+            content: trimIndentation`
+                <p>
+                    Hi there
+                </p>
+                <section class="include-note" data-note-id="${includedNote.noteId}" data-box-size="medium">
+                    &nbsp;
+                </section>
+            `
+        });
+        await renderText(note, $(contentEl));
+        expect(contentEl.querySelectorAll("section.include-note").length).toBe(1);
+        expect(contentEl.querySelectorAll("section.include-note p").length).toBe(1);
+    });
+
+    it("skips rendering included note", async () => {
+        const contentEl = document.createElement("div");
+        const includedNote = buildNote({
+            title: "Included note",
+            content: "<p>This is the included note.</p>"
+        });
+        const note = buildNote({
+            title: "New note",
+            content: trimIndentation`
+                <p>
+                    Hi there
+                </p>
+                <section class="include-note" data-note-id="${includedNote.noteId}" data-box-size="medium">
+                    &nbsp;
+                </section>
+            `
+        });
+        await renderText(note, $(contentEl), { noIncludedNotes: true });
+        expect(contentEl.querySelectorAll("section.include-note").length).toBe(0);
+    });
+
+    it("doesn't enter infinite loop on direct recursion", async () => {
+        const contentEl = document.createElement("div");
+        const note = buildNote({
+            title: "New note",
+            id: "Y7mBwmRjQyb4",
+            content: trimIndentation`
+                <p>
+                    Hi there
+                </p>
+                <section class="include-note" data-note-id="Y7mBwmRjQyb4" data-box-size="medium">
+                    &nbsp;
+                </section>
+                <section class="include-note" data-note-id="Y7mBwmRjQyb4" data-box-size="medium">
+                    &nbsp;
+                </section>
+            `
+        });
+        await renderText(note, $(contentEl));
+        expect(contentEl.querySelectorAll("section.include-note").length).toBe(0);
+    });
+
+    it("doesn't enter infinite loop on indirect recursion", async () => {
+        const contentEl = document.createElement("div");
+        buildNote({
+            id: "first",
+            title: "Included note",
+            content: trimIndentation`\
+                <p>This is the included note.</p>
+                <section class="include-note" data-note-id="second" data-box-size="medium">
+                    &nbsp;
+                </section>
+            `
+        });
+        const note = buildNote({
+            id: "second",
+            title: "New note",
+            content: trimIndentation`
+                <p>
+                    Hi there
+                </p>
+                <section class="include-note" data-note-id="first" data-box-size="medium">
+                    &nbsp;
+                </section>
+            `
+        });
+        await renderText(note, $(contentEl));
+        expect(contentEl.querySelectorAll("section.include-note").length).toBe(1);
+    });
+
+    it("renders children list when note is empty", async () => {
+        const contentEl = document.createElement("div");
+        const parentNote = buildNote({
+            title: "Parent note",
+            children: [
+                { title: "Child note 1" },
+                { title: "Child note 2" }
+            ]
+        });
+        await renderText(parentNote, $(contentEl));
+        const items = contentEl.querySelectorAll("a");
+        expect(items.length).toBe(2);
+        expect(items[0].textContent).toBe("Child note 1");
+        expect(items[1].textContent).toBe("Child note 2");
+    });
+
+    it("skips archived notes in children list", async () => {
+        const contentEl = document.createElement("div");
+        const parentNote = buildNote({
+            title: "Parent note",
+            children: [
+                { title: "Child note 1" },
+                { title: "Child note 2", "#archived": "" },
+                { title: "Child note 3" }
+            ]
+        });
+        await renderText(parentNote, $(contentEl));
+        const items = contentEl.querySelectorAll("a");
+        expect(items.length).toBe(2);
+        expect(items[0].textContent).toBe("Child note 1");
+        expect(items[1].textContent).toBe("Child note 3");
+    });
+});

apps/client/src/services/content_renderer_text.ts

@@ -15,7 +15,14 @@ export default async function renderText(note: FNote | FAttachment, $renderedCon
 
     if (blob && !isHtmlEmpty(blob.content)) {
         $renderedContent.append($('<div class="ck-content">').html(blob.content));
-        await renderIncludedNotes($renderedContent[0]);
+
+        const seenNoteIds = options.seenNoteIds ?? new Set<string>();
+        seenNoteIds.add("noteId" in note ? note.noteId : note.attachmentId);
+        if (!options.noIncludedNotes) {
+            await renderIncludedNotes($renderedContent[0], seenNoteIds);
+        } else {
+            $renderedContent.find("section.include-note").remove();
+        }
 
         if ($renderedContent.find("span.math-tex").length > 0) {
             renderMathInElement($renderedContent[0], { trust: true });
@@ -35,11 +42,11 @@ export default async function renderText(note: FNote | FAttachment, $renderedCon
         await rewriteMermaidDiagramsInContainer($renderedContent[0] as HTMLDivElement);
         await formatCodeBlocks($renderedContent);
     } else if (note instanceof FNote && !options.noChildrenList) {
-        await renderChildrenList($renderedContent, note);
+        await renderChildrenList($renderedContent, note, options.includeArchivedNotes ?? false);
     }
 }
 
-async function renderIncludedNotes(contentEl: HTMLElement) {
+async function renderIncludedNotes(contentEl: HTMLElement, seenNoteIds: Set<string>) {
     // TODO: Consider duplicating with server's share/content_renderer.ts.
     const includeNoteEls = contentEl.querySelectorAll("section.include-note");
 
@@ -66,7 +73,15 @@ async function renderIncludedNotes(contentEl: HTMLElement) {
             continue;
         }
 
-        const renderedContent = (await content_renderer.getRenderedContent(note)).$renderedContent;
+        if (seenNoteIds.has(noteId)) {
+            console.warn(`Skipping inclusion of ${noteId} to avoid circular reference.`);
+            includeNoteEl.remove();
+            continue;
+        }
+
+        const renderedContent = (await content_renderer.getRenderedContent(note, {
+            seenNoteIds
+        })).$renderedContent;
         includeNoteEl.replaceChildren(...renderedContent);
     }
 }
@@ -98,7 +113,7 @@ export async function applyInlineMermaid(container: HTMLDivElement) {
     }
 }
 
-async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: FNote) {
+async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: FNote, includeArchivedNotes: boolean) {
     let childNoteIds = note.getChildNoteIds();
 
     if (!childNoteIds.length) {
@@ -108,14 +123,16 @@ async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: F
     $renderedContent.css("padding", "10px");
     $renderedContent.addClass("text-with-ellipsis");
 
+    // just load the first 10 child notes
     if (childNoteIds.length > 10) {
         childNoteIds = childNoteIds.slice(0, 10);
     }
 
-    // just load the first 10 child notes
     const childNotes = await froca.getNotes(childNoteIds);
 
     for (const childNote of childNotes) {
+        if (childNote.isArchived && !includeArchivedNotes) continue;
+
         $renderedContent.append(
             await link.createLink(`${note.noteId}/${childNote.noteId}`, {
                 showTooltip: false,

apps/client/src/services/doc_renderer.ts

@@ -5,7 +5,7 @@ import { formatCodeBlocks } from "./syntax_highlight.js";
 
 export default function renderDoc(note: FNote) {
     return new Promise<JQuery<HTMLElement>>((resolve) => {
-        let docName = note.getLabelValue("docName");
+        const docName = note.getLabelValue("docName");
         const $content = $("<div>");
 
         if (docName) {
@@ -16,7 +16,7 @@ export default function renderDoc(note: FNote) {
                 if (status === "error") {
                     const fallbackUrl = getUrl(docName, "en");
                     $content.load(fallbackUrl, async () => {
-                        await processContent(fallbackUrl, $content)
+                        await processContent(fallbackUrl, $content);
                         resolve($content);
                     });
                     return;
@@ -37,9 +37,9 @@ async function processContent(url: string, $content: JQuery<HTMLElement>) {
     const dir = url.substring(0, url.lastIndexOf("/"));
 
     // Images are relative to the docnote but that will not work when rendered in the application since the path breaks.
-    $content.find("img").each((i, el) => {
+    $content.find("img").each((_i, el) => {
         const $img = $(el);
-        $img.attr("src", dir + "/" + $img.attr("src"));
+        $img.attr("src", `${dir}/${$img.attr("src")}`);
     });
 
     formatCodeBlocks($content);
@@ -51,7 +51,16 @@ async function processContent(url: string, $content: JQuery<HTMLElement>) {
 function getUrl(docNameValue: string, language: string) {
     // Cannot have spaces in the URL due to how JQuery.load works.
     docNameValue = docNameValue.replaceAll(" ", "%20");
-
-    const basePath = window.glob.isDev ? window.glob.assetPath + "/.." : window.glob.assetPath;
-    return `${basePath}/doc_notes/${language}/${docNameValue}.html`;
+    if (docNameValue.includes("User%20Guide")) language = "en";
+    return `${getBasePath()}/doc_notes/${language}/${docNameValue}.html`;
+}
+
+function getBasePath() {
+    if (window.glob.isStandalone) {
+        return `server-assets`;
+    }
+    if (window.glob.isDev) {
+        return `${window.glob.assetPath  }/..`;
+    }
+    return window.glob.assetPath;
 }

apps/client/src/services/load_results.ts

@@ -1,4 +1,5 @@
 import type { AttachmentRow, EtapiTokenRow, NoteType, OptionNames } from "@triliumnext/commons";
+
 import type { AttributeType } from "../entities/fattribute.js";
 import type { EntityChange } from "../server_types.js";
 
@@ -135,7 +136,14 @@ export default class LoadResults {
     }
 
     getBranchRows() {
-        return this.branchRows.map((row) => this.getEntityRow("branches", row.branchId)).filter((branch) => !!branch);
+        return this.branchRows.map((row) => {
+            const branch = this.getEntityRow("branches", row.branchId);
+            if (branch) {
+                // Merge the componentId from the tracked row with the entity data
+                return { ...branch, componentId: row.componentId };
+            }
+            return null;
+        }).filter((branch) => !!branch) as BranchRow[];
     }
 
     addNoteReordering(parentNoteId: string, componentId: string) {
@@ -153,7 +161,14 @@ export default class LoadResults {
     getAttributeRows(componentId = "none"): AttributeRow[] {
         return this.attributeRows
             .filter((row) => row.componentId !== componentId)
-            .map((row) => this.getEntityRow("attributes", row.attributeId))
+            .map((row) => {
+                const attr = this.getEntityRow("attributes", row.attributeId);
+                if (attr) {
+                    // Merge the componentId from the tracked row with the entity data
+                    return { ...attr, componentId: row.componentId };
+                }
+                return null;
+            })
             .filter((attr) => !!attr) as AttributeRow[];
     }
 

apps/client/src/services/note_autocomplete.ts

@@ -12,7 +12,7 @@ const SELECTED_NOTE_PATH_KEY = "data-note-path";
 const SELECTED_EXTERNAL_LINK_KEY = "data-external-link";
 
 // To prevent search lag when there are a large number of notes, set a delay based on the number of notes to avoid jitter.
-const notesCount = await server.get<number>(`autocomplete/notesCount`);
+const notesCount = 10000; // TODO: Replace with dynamic count from becca once available.
 let debounceTimeoutId: ReturnType<typeof setTimeout>;
 
 function getSearchDelay(notesCount: number): number {

apps/client/src/services/promoted_attribute_definition_parser.ts

@@ -1,14 +1,4 @@
-export type LabelType = "text" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
-type Multiplicity = "single" | "multi";
-
-export interface DefinitionObject {
-    isPromoted?: boolean;
-    labelType?: LabelType;
-    multiplicity?: Multiplicity;
-    numberPrecision?: number;
-    promotedAlias?: string;
-    inverseRelation?: string;
-}
+import { DefinitionObject, LabelType, Multiplicity } from "@triliumnext/commons";
 
 function parse(value: string) {
     const tokens = value.split(",").map((t) => t.trim());

apps/client/src/services/utils.ts

@@ -133,6 +133,8 @@ export function isElectron() {
     return !!(window && window.process && window.process.type);
 }
 
+export const isStandalone = window.glob.isStandalone;
+
 /**
  * Returns `true` if the client is running as a PWA, otherwise `false`.
  */
@@ -814,7 +816,7 @@ function compareVersions(v1: string, v2: string): number {
 /**
  * Compares two semantic version strings and returns `true` if the latest version is greater than the current version.
  */
-function isUpdateAvailable(latestVersion: string | null | undefined, currentVersion: string): boolean {
+export function isUpdateAvailable(latestVersion: string | null | undefined, currentVersion: string): boolean {
     if (!latestVersion) {
         return false;
     }

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

@@ -69,24 +69,6 @@ export function buildNote(noteDef: NoteDefinition) {
     });
     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)) {
         const attributeId = utils.randomString(12);
@@ -136,5 +118,25 @@ export function buildNote(noteDef: NoteDefinition) {
         }
         noteAttributeCache.attributes[note.noteId].push(attribute);
     }
+
+    // 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);
+            childNote.addParent(note.noteId, branchId, false);
+            childNotePosition += 10;
+        }
+    }
+
     return note;
 }

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

@@ -25,7 +25,8 @@
     },
     "widget-list-error": {
       "title": "Abruf der Liste von Widgets vom Server ist fehlgeschlagen"
-    }
+    },
+    "open-script-note": "Script-Notiz öffnen"
   },
   "add_link": {
     "add_link": "Link hinzufügen",
@@ -208,7 +209,8 @@
   "info": {
     "modalTitle": "Infonachricht",
     "closeButton": "Schließen",
-    "okButton": "OK"
+    "okButton": "OK",
+    "copy_to_clipboard": "In die Zwischenablage kopieren"
   },
   "jump_to_note": {
     "search_button": "Suche im Volltext",
@@ -695,7 +697,9 @@
     "export_as_image": "Als Bild exportieren",
     "export_as_image_png": "PNG (Raster)",
     "export_as_image_svg": "SVG (Vektor)",
-    "note_map": "Notizen Karte"
+    "note_map": "Notizen Karte",
+    "view_revisions": "Notizrevisionen",
+    "advanced": "Erweitert"
   },
   "onclick_button": {
     "no_click_handler": "Das Schaltflächen-Widget „{{componentId}}“ hat keinen definierten Klick-Handler"

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

@@ -800,7 +800,8 @@
     "geo-map": "Geo Map",
     "board": "Board",
     "presentation": "Presentation",
-    "include_archived_notes": "Show archived notes"
+    "include_archived_notes": "Show archived notes",
+    "hide_child_notes": "Hide child notes in tree"
   },
   "edited_notes": {
     "no_edited_notes_found": "No edited notes on this day yet...",
@@ -1643,6 +1644,7 @@
   "tree-context-menu": {
     "open-in-a-new-tab": "Open in a new tab",
     "open-in-a-new-split": "Open in a new split",
+    "open-in-a-new-window": "Open in a new window",
     "insert-note-after": "Insert note after",
     "insert-child-note": "Insert child note",
     "archive": "Archive",
@@ -1655,6 +1657,8 @@
     "advanced": "Advanced",
     "expand-subtree": "Expand subtree",
     "collapse-subtree": "Collapse subtree",
+    "hide-subtree": "Hide subtree",
+    "show-subtree": "Show subtree",
     "sort-by": "Sort by...",
     "recent-changes-in-subtree": "Recent changes in subtree",
     "convert-to-attachment": "Convert to attachment",
@@ -1772,7 +1776,12 @@
     "clone-indicator-tooltip": "This note has {{- count}} parents: {{- parents}}",
     "clone-indicator-tooltip-single": "This note is cloned (1 additional parent: {{- parent}})",
     "shared-indicator-tooltip": "This note is shared publicly",
-    "shared-indicator-tooltip-with-url": "This note is shared publicly at: {{- url}}"
+    "shared-indicator-tooltip-with-url": "This note is shared publicly at: {{- url}}",
+    "subtree-hidden-tooltip_one": "{{count}} child note that is hidden from the tree",
+    "subtree-hidden-tooltip_other": "{{count}} child notes that are hidden from the tree",
+    "subtree-hidden-moved-title": "Added to {{title}}",
+    "subtree-hidden-moved-description-collection": "This collection hides its child notes in the tree.",
+    "subtree-hidden-moved-description-other": "Child notes are hidden in the tree for this note."
   },
   "title_bar_buttons": {
     "window-on-top": "Keep Window on Top"

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

@@ -21,7 +21,13 @@
     },
     "bundle-error": {
       "title": "Hubo un fallo al cargar un script personalizado",
-      "message": "El script de la nota con ID \"{{id}}\", titulado \"{{title}}\" no pudo ser ejecutado debido a:\n\n{{message}}"
+      "message": "El script no pudo ser ejecutado debido a:\n\n{{message}}"
+    },
+    "widget-list-error": {
+      "title": "Hubo un fallo al obtener la lista de widgets del servidor"
+    },
+    "widget-render-error": {
+      "title": "Hubo un fallo al renderizar un widget personalizado de React"
     }
   },
   "add_link": {
@@ -162,7 +168,8 @@
     "other": "Otro",
     "quickSearch": "centrarse en la entrada de búsqueda rápida",
     "inPageSearch": "búsqueda en la página",
-    "title": "Hoja de ayuda"
+    "title": "Hoja de ayuda",
+    "editShortcuts": "Editar atajos de teclado"
   },
   "import": {
     "importIntoNote": "Importar a nota",
@@ -690,7 +697,7 @@
     "convert_into_attachment_successful": "La nota '{{title}}' ha sido convertida a un archivo adjunto.",
     "convert_into_attachment_prompt": "¿Está seguro que desea convertir la nota '{{title}}' en un archivo adjunto de la nota padre?",
     "print_pdf": "Exportar como PDF...",
-    "open_note_on_server": "Abrir nota en el servidor"
+    "open_note_on_server": "Abrir nota en servidor"
   },
   "onclick_button": {
     "no_click_handler": "El widget de botón '{{componentId}}' no tiene un controlador de clics definido"
@@ -736,7 +743,7 @@
   "zpetne_odkazy": {
     "relation": "relación",
     "backlink_one": "{{count}} Vínculo de retroceso",
-    "backlink_many": "",
+    "backlink_many": "{{count}} Vínculos de retroceso",
     "backlink_other": "{{count}} vínculos de retroceso"
   },
   "mobile_detail_menu": {
@@ -749,7 +756,10 @@
   "note_icon": {
     "change_note_icon": "Cambiar icono de nota",
     "search": "Búsqueda:",
-    "reset-default": "Restablecer a icono por defecto"
+    "reset-default": "Restablecer a icono por defecto",
+    "search_placeholder_one": "Buscar {{number}} icono a través de {{count}} paquetes",
+    "search_placeholder_many": "Buscar {{number}} iconos a través de {{count}} paquetes",
+    "search_placeholder_other": "Buscar {{number}} iconos a través de {{count}} paquetes"
   },
   "basic_properties": {
     "note_type": "Tipo de nota",
@@ -789,7 +799,7 @@
     "file_type": "Tipo de archivo",
     "file_size": "Tamaño del archivo",
     "download": "Descargar",
-    "open": "Abrir",
+    "open": "Abrir externamente",
     "upload_new_revision": "Subir nueva revisión",
     "upload_success": "Se ha subido una nueva revisión de archivo.",
     "upload_failed": "Error al cargar una nueva revisión de archivo.",
@@ -1302,11 +1312,11 @@
   "code_mime_types": {
     "title": "Tipos MIME disponibles en el menú desplegable",
     "tooltip_syntax_highlighting": "Resaltado de sintaxis",
-    "tooltip_code_block_syntax": "Bloques de código en notas de texto",
-    "tooltip_code_note_syntax": "Notas de código"
+    "tooltip_code_block_syntax": "Bloques de Código en notas de Texto",
+    "tooltip_code_note_syntax": "Notas de Código"
   },
   "vim_key_bindings": {
-    "use_vim_keybindings_in_code_notes": "Atajos de teclas de Vim",
+    "use_vim_keybindings_in_code_notes": "Combinaciones de teclas Vim",
     "enable_vim_keybindings": "Habilitar los atajos de teclas de Vim en la notas de código (no es modo ex)"
   },
   "wrap_lines": {
@@ -1571,7 +1581,7 @@
     "will_be_deleted_in": "Este archivo adjunto se eliminará automáticamente en {{time}}",
     "will_be_deleted_soon": "Este archivo adjunto se eliminará automáticamente pronto",
     "deletion_reason": ", porque el archivo adjunto no está vinculado en el contenido de la nota. Para evitar la eliminación, vuelva a agregar el enlace del archivo adjunto al contenido o convierta el archivo adjunto en una nota.",
-    "role_and_size": "Rol: {{role}}, Tamaño: {{size}}",
+    "role_and_size": "Rol: {{role}}, tamaño: {{size}}, MIME: {{- mimeType}}",
     "link_copied": "Enlace del archivo adjunto copiado al portapapeles.",
     "unrecognized_role": "Rol de archivo adjunto no reconocido '{{role}}'."
   },
@@ -1622,7 +1632,7 @@
     "import-into-note": "Importar a nota",
     "apply-bulk-actions": "Aplicar acciones en lote",
     "converted-to-attachments": "{{count}} notas han sido convertidas en archivos adjuntos.",
-    "convert-to-attachment-confirm": "¿Está seguro que desea convertir las notas seleccionadas en archivos adjuntos de sus notas padres?",
+    "convert-to-attachment-confirm": "¿Está seguro que desea convertir las notas seleccionadas en archivos adjuntos de sus notas padres? Esta operación solo aplica a notas de Imagen, otras notas serán omitidas.",
     "open-in-popup": "Edición rápida",
     "archive": "Archivar",
     "unarchive": "Desarchivar"
@@ -1717,7 +1727,10 @@
   "note_detail": {
     "could_not_find_typewidget": "No se pudo encontrar typeWidget para el tipo '{{type}}'",
     "printing": "Impresión en curso...",
-    "printing_pdf": "Exportando a PDF en curso.."
+    "printing_pdf": "Exportando a PDF en curso..",
+    "print_report_collection_content_one": "{{count}} nota en la colección no se puede imprimir porque no son compatibles o está protegida.",
+    "print_report_collection_content_many": "{{count}} notas en la colección no se pueden imprimir porque no son compatibles o están protegidas.",
+    "print_report_collection_content_other": "{{count}} notas en la colección no se pueden imprimir porque no son compatibles o están protegidas."
   },
   "note_title": {
     "placeholder": "escriba el título de la nota aquí..."
@@ -1929,7 +1942,7 @@
     "unknown_widget": "Widget desconocido para \"{{id}}\"."
   },
   "note_language": {
-    "not_set": "No establecido",
+    "not_set": "Idioma no establecido",
     "configure-languages": "Configurar idiomas..."
   },
   "content_language": {
@@ -1968,7 +1981,7 @@
     "hide-weekends": "Ocultar fines de semana",
     "show-scale": "Mostrar escala",
     "display-week-numbers": "Mostrar números de semana",
-    "map-style": "Estilo de mapa:",
+    "map-style": "Estilo de mapa",
     "max-nesting-depth": "Máxima profundidad de anidamiento:",
     "vector_light": "Vector (claro)",
     "vector_dark": "Vector (oscuro)",
@@ -2097,5 +2110,36 @@
     "clear-color": "Borrar color de nota",
     "set-color": "Asignar color de nota",
     "set-custom-color": "Asignar color de nota personalizado"
+  },
+  "status_bar": {
+    "backlinks_one": "{{count}} vínculo de retroceso",
+    "backlinks_many": "{{count}} vínculos de retroceso",
+    "backlinks_other": "{{count}} vínculos de retroceso",
+    "backlinks_title_one": "Ver vínculo de retroceso",
+    "backlinks_title_many": "Ver vínculos de retroceso",
+    "backlinks_title_other": "Ver vínculos de retroceso",
+    "attachments_one": "{{count}} adjunto",
+    "attachments_many": "{{count}} adjuntos",
+    "attachments_other": "{{count}} adjuntos",
+    "attachments_title_one": "Ver adjunto en una nueva pestaña",
+    "attachments_title_many": "Ver adjuntos en una nueva pestaña",
+    "attachments_title_other": "Ver adjuntos en una nueva pestaña",
+    "attributes_one": "{{count}} atributo",
+    "attributes_many": "{{count}} atributos",
+    "attributes_other": "{{count}} atributos",
+    "note_paths_one": "{{count}} ruta",
+    "note_paths_many": "{{count}} rutas",
+    "note_paths_other": "{{count}} rutas"
+  },
+  "pdf": {
+    "attachments_one": "{{count}} adjunto",
+    "attachments_many": "{{count}} adjuntos",
+    "attachments_other": "{{count}} adjuntos",
+    "layers_one": "{{count}} capa",
+    "layers_many": "{{count}} capas",
+    "layers_other": "{{count}} capas",
+    "pages_one": "{{count}} página",
+    "pages_many": "{{count}} páginas",
+    "pages_other": "{{count}} páginas"
   }
 }

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

@@ -21,7 +21,7 @@
     },
     "bundle-error": {
       "title": "Echec du chargement d'un script personnalisé",
-      "message": "Le script de la note avec l'ID \"{{id}}\", intitulé \"{{title}}\" n'a pas pu être exécuté à cause de\n\n{{message}}"
+      "message": "Le script n'a pas pu être exécuté à cause de\n\n{{message}}"
     },
     "widget-list-error": {
       "title": "Impossible d'obtenir la liste des widgets depuis le serveur"

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

@@ -31,5 +31,17 @@
   },
   "add_link": {
     "note": "नोट"
+  },
+  "bulk_actions": {
+    "other": "अन्य"
+  },
+  "clone_to": {
+    "search_for_note_by_its_name": "नोट क नाम से नोट खोजें"
+  },
+  "confirm": {
+    "also_delete_note": "नोट भी डिलीट करें"
+  },
+  "delete_notes": {
+    "delete_notes_preview": "नोट्स प्रिव्यू डिलीट करें"
   }
 }

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

@@ -21,7 +21,13 @@
     },
     "bundle-error": {
       "title": "Nem sikerült betölteni az egyéni szkriptet",
-      "message": "A(z) \"{{id}}\" azonosítójú, \"{{title}}\" című jegyzetből származó szkript nem hajtható végre a következő ok miatt:\n\n{{message}}"
+      "message": "A skript nem hajtható végre a következő ok miatt:\n\n{{message}}"
+    },
+    "widget-list-error": {
+      "title": "A Widget-ek letöltése sikertelen volt"
+    },
+    "widget-render-error": {
+      "title": "Nem sikerült renderelni a React widget-et"
     }
   },
   "add_link": {

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

@@ -1895,7 +1895,11 @@
     "create-child-note": "Crea nota figlio",
     "unhoist": "Sganciare",
     "toggle-sidebar": "Attiva/disattiva la barra laterale",
-    "dropping-not-allowed": "Non è consentito lasciare appunti in questa posizione."
+    "dropping-not-allowed": "Non è consentito lasciare appunti in questa posizione.",
+    "clone-indicator-tooltip": "Questa nota ha {{- count}} genitori: {{- parents}}",
+    "clone-indicator-tooltip-single": "Questa nota è stata clonata (1 genitore aggiuntivo: {{- parent}})",
+    "shared-indicator-tooltip": "Questa nota è condivisa pubblicamente",
+    "shared-indicator-tooltip-with-url": "Questa nota è condivisa pubblicamente all'indirizzo: {{- url}}"
   },
   "title_bar_buttons": {
     "window-on-top": "Mantieni la finestra in primo piano"
@@ -2200,7 +2204,14 @@
     "execute_sql_description": "Questa nota è una nota SQL. Clicca per eseguire la query SQL.",
     "shared_copy_to_clipboard": "Copia link negli appunti",
     "shared_open_in_browser": "Apri il link nel browser",
-    "shared_unshare": "Rimuovi condivisione"
+    "shared_unshare": "Rimuovi condivisione",
+    "save_status_saved": "Salvato",
+    "save_status_saving": "Salvataggio in corso...",
+    "save_status_unsaved": "Non salvato",
+    "save_status_error": "Salvataggio non riuscito",
+    "save_status_saving_tooltip": "Le modifiche sono state salvate.",
+    "save_status_unsaved_tooltip": "Ci sono modifiche non salvate. Verranno salvate automaticamente tra un attimo.",
+    "save_status_error_tooltip": "Si è verificato un errore durante il salvataggio della nota. Se possibile, prova a copiare il contenuto della nota altrove e a ricaricare l'applicazione."
   },
   "breadcrumb": {
     "workspace_badge": "Area di lavoro",
@@ -2243,5 +2254,18 @@
     "empty_button": "Nascondi il pannello",
     "toggle": "Attiva/disattiva pannello destro",
     "custom_widget_go_to_source": "Vai al codice sorgente"
+  },
+  "pdf": {
+    "attachments_one": "{{count}} allegato",
+    "attachments_many": "{{count}} allegati",
+    "attachments_other": "{{count}} allegati",
+    "layers_one": "{{count}} livello",
+    "layers_many": "{{count}} livelli",
+    "layers_other": "{{count}} livelli",
+    "pages_one": "{{count}} pagina",
+    "pages_many": "{{count}} pagine",
+    "pages_other": "{{count}} pagine",
+    "pages_alt": "Pagina {{pageNumber}}",
+    "pages_loading": "Caricamento in corso..."
   }
 }

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

@@ -69,7 +69,7 @@ declare namespace Fancytree {
         debug(msg: any): void;
 
         /** Expand (or collapse) all parent nodes. */
-        expandAll(flag?: boolean, options?: Object): void;
+        expandAll(flag?: boolean, options?: object): void;
 
         /** [ext-filter] Dimm or hide whole branches.
          * @returns {integer} count
@@ -221,6 +221,7 @@ declare namespace Fancytree {
         branchId: string;
         isProtected: boolean;
         noteType: NoteType;
+        subtreeHidden: boolean;
     }
 
     interface FancytreeNewNode extends FancytreeNodeData {
@@ -369,7 +370,7 @@ declare namespace Fancytree {
          * @param mode 'before', 'after', or 'child' (default='child')
          * @param init NodeData (or simple title string)
          */
-        editCreateNode(mode?: string, init?: Object): void;
+        editCreateNode(mode?: string, init?: object): void;
 
         /** [ext-edit] Stop inline editing.
          *
@@ -526,7 +527,7 @@ declare namespace Fancytree {
          *
          * @param opts passed to `setExpanded()`. Defaults to {noAnimation: false, noEvents: false, scrollIntoView: true}
          */
-        makeVisible(opts?: Object): JQueryPromise<any>;
+        makeVisible(opts?: object): JQueryPromise<any>;
 
         /** Move this node to targetNode.
          *
@@ -589,25 +590,25 @@ declare namespace Fancytree {
          * @param effects animation options.
          * @param options {topNode: null, effects: ..., parent: ...} this node will remain visible in any case, even if `this` is outside the scroll pane.
          */
-        scrollIntoView(effects?: boolean, options?: Object): JQueryPromise<any>;
+        scrollIntoView(effects?: boolean, options?: object): JQueryPromise<any>;
 
         /**
          * @param effects animation options.
          * @param options {topNode: null, effects: ..., parent: ...} this node will remain visible in any case, even if `this` is outside the scroll pane.
          */
-        scrollIntoView(effects?: Object, options?: Object): JQueryPromise<any>;
+        scrollIntoView(effects?: object, options?: object): JQueryPromise<any>;
 
         /**
          * @param flag pass false to deactivate
          * @param opts additional options. Defaults to {noEvents: false}
          */
-        setActive(flag?: boolean, opts?: Object): JQueryPromise<any>;
+        setActive(flag?: boolean, opts?: object): JQueryPromise<any>;
 
         /**
          * @param flag pass false to collapse.
          * @param opts additional options. Defaults to {noAnimation:false, noEvents:false}
          */
-        setExpanded(flag?: boolean, opts?: Object): JQueryPromise<any>;
+        setExpanded(flag?: boolean, opts?: object): JQueryPromise<any>;
 
         /**
          * Set keyboard focus to this node.
@@ -1109,7 +1110,7 @@ declare namespace Fancytree {
         /** class names added to the node markup (separate with space) */
         extraClasses?: string | undefined;
         /** all properties from will be copied to `node.data` */
-        data?: Object | undefined;
+        data?: object | undefined;
 
         /** Will be added as title attribute of the node's icon span,thus enabling a tooltip. */
         iconTooltip?: string | undefined;
@@ -1160,7 +1161,7 @@ declare namespace Fancytree {
 
         escapeHtml(s: string): string;
 
-        getEventTarget(event: Event): Object;
+        getEventTarget(event: Event): object;
 
         getEventTargetType(event: Event): string;
 
@@ -1179,7 +1180,7 @@ declare namespace Fancytree {
         parseHtml($ul: JQuery): NodeData[];
 
         /** Add Fancytree extension definition to the list of globally available extensions. */
-        registerExtension(definition: Object): void;
+        registerExtension(definition: object): void;
 
         unescapeHtml(s: string): string;
 

apps/client/src/types.d.ts

@@ -1,4 +1,4 @@
-import { IconRegistry } from "@triliumnext/commons";
+import { BootstrapDefinition } from "@triliumnext/commons";
 
 import appContext, { AppContext } from "./components/app_context";
 import type FNote from "./entities/fnote";
@@ -15,10 +15,9 @@ interface ElectronProcess {
     platform: string;
 }
 
-interface CustomGlobals {
+interface CustomGlobals extends BootstrapDefinition {
     isDesktop: typeof utils.isDesktop;
     isMobile: typeof utils.isMobile;
-    device: "mobile" | "desktop" | "print";
     getComponentByEl: typeof appContext.getComponentByEl;
     getHeaders: typeof server.getHeaders;
     getReferenceLinkTitle: (href: string) => Promise<string>;
@@ -31,30 +30,16 @@ interface CustomGlobals {
     SEARCH_HELP_TEXT: string;
     activeDialog: JQuery<HTMLElement> | null;
     componentId: string;
-    csrfToken: string;
-    baseApiUrl: string;
-    isProtectedSessionAvailable: boolean;
-    isDev: boolean;
-    isMainWindow: boolean;
-    maxEntityChangeIdAtLoad: number;
-    maxEntityChangeSyncIdAtLoad: number;
-    assetPath: string;
-    appPath: string;
-    instanceName: string;
-    appCssNoteIds: string[];
-    triliumVersion: string;
-    TRILIUM_SAFE_MODE: boolean;
-    platform?: typeof process.platform;
     linter: typeof lint;
-    hasNativeTitleBar: boolean;
-    isRtl: boolean;
-    iconRegistry: IconRegistry;
 }
 
 type RequireMethod = (moduleName: string) => any;
 
 declare global {
     interface Window {
+        $: JQueryStatic;
+        jQuery: JQueryStatic;
+
         logError(message: string);
         logInfo(message: string);
 

apps/client/src/widgets/NoteDetail.tsx

@@ -215,7 +215,7 @@ export default function NoteDetail() {
     return (
         <div
             ref={containerRef}
-            class={`note-detail ${isFullHeight ? "full-height" : ""}`}
+            class={`component note-detail ${isFullHeight ? "full-height" : ""}`}
         >
             {Object.entries(noteTypesToRender).map(([ itemType, Element ]) => {
                 return <NoteDetailWrapper

apps/client/src/widgets/attribute_widgets/UserAttributesList.tsx

@@ -1,14 +1,16 @@
-import { useState } from "preact/hooks";
-import FNote from "../../entities/fnote";
 import "./UserAttributesList.css";
-import { useTriliumEvent } from "../react/hooks";
-import attributes from "../../services/attributes";
-import { DefinitionObject } from "../../services/promoted_attribute_definition_parser";
-import { formatDateTime } from "../../utils/formatters";
+
+import type { DefinitionObject } from "@triliumnext/commons";
 import { ComponentChildren, CSSProperties } from "preact";
+import { useState } from "preact/hooks";
+
+import FNote from "../../entities/fnote";
+import attributes from "../../services/attributes";
+import { getReadableTextColor } from "../../services/css_class_manager";
+import { formatDateTime } from "../../utils/formatters";
+import { useTriliumEvent } from "../react/hooks";
 import Icon from "../react/Icon";
 import NoteLink from "../react/NoteLink";
-import { getReadableTextColor } from "../../services/css_class_manager";
 
 interface UserAttributesListProps {
     note: FNote;
@@ -29,7 +31,7 @@ export default function UserAttributesDisplay({ note, ignoredAttributes }: UserA
         <div className="user-attributes">
             {userAttributes?.map(attr => buildUserAttribute(attr))}
         </div>
-    )
+    );
 
 }
 
@@ -46,13 +48,13 @@ function useNoteAttributesWithDefinitions(note: FNote, attributesToIgnore:  stri
 }
 
 function UserAttribute({ attr, children, style }: { attr: AttributeWithDefinitions, children: ComponentChildren, style?: CSSProperties }) {
-    const className = `${attr.type === "label" ? "label" + " " + attr.def.labelType : "relation"}`;
+    const className = `${attr.type === "label" ? `label` + ` ${  attr.def.labelType}` : "relation"}`;
 
     return (
         <span key={attr.friendlyName} className={`user-attribute type-${className}`} style={style}>
             {children}
         </span>
-    )
+    );
 }
 
 function buildUserAttribute(attr: AttributeWithDefinitions): ComponentChildren {
@@ -61,7 +63,7 @@ function buildUserAttribute(attr: AttributeWithDefinitions): ComponentChildren {
     let style: CSSProperties | undefined;
 
     if (attr.type === "label") {
-        let value = attr.value;
+        const value = attr.value;
         switch (attr.def.labelType) {
             case "number":
                 let formattedValue = value;
@@ -102,7 +104,7 @@ function buildUserAttribute(attr: AttributeWithDefinitions): ComponentChildren {
         content = <>{defaultLabel}<NoteLink notePath={attr.value} showNoteIcon /></>;
     }
 
-    return <UserAttribute attr={attr} style={style}>{content}</UserAttribute>
+    return <UserAttribute attr={attr} style={style}>{content}</UserAttribute>;
 }
 
 function getAttributesWithDefinitions(note: FNote, attributesToIgnore: string[] = []): AttributeWithDefinitions[] {

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

@@ -8,7 +8,7 @@ import { CommandNames } from "../../components/app_context";
 import Component from "../../components/component";
 import { ExperimentalFeature, ExperimentalFeatureId, experimentalFeatures, isExperimentalFeatureEnabled, toggleExperimentalFeature } from "../../services/experimental_features";
 import { t } from "../../services/i18n";
-import utils, { dynamicRequire, isElectron, isMobile, reloadFrontendApp } from "../../services/utils";
+import utils, { dynamicRequire, isElectron, isMobile, isStandalone, reloadFrontendApp } from "../../services/utils";
 import Dropdown from "../react/Dropdown";
 import { FormDropdownDivider, FormDropdownSubmenu, FormListHeader, FormListItem } from "../react/FormList";
 import { useStaticTooltip, useStaticTooltipWithKeyboardShortcut, useTriliumOption, useTriliumOptionBool, useTriliumOptionInt } from "../react/hooks";
@@ -249,7 +249,7 @@ function ToggleWindowOnTop() {
 function useTriliumUpdateStatus() {
     const [ latestVersion, setLatestVersion ] = useState<string>();
     const [ checkForUpdates ] = useTriliumOptionBool("checkForUpdates");
-    const isUpdateAvailable = utils.isUpdateAvailable(latestVersion, glob.triliumVersion);
+    const isUpdateAvailable = utils.isUpdateAvailable(latestVersion, window.glob.triliumVersion);
 
     async function updateVersionStatus() {
         const RELEASES_API_URL = "https://api.github.com/repos/TriliumNext/Trilium/releases/latest";
@@ -267,7 +267,7 @@ function useTriliumUpdateStatus() {
     }
 
     useEffect(() => {
-        if (!checkForUpdates) {
+        if (!checkForUpdates || !isStandalone) {
             setLatestVersion(undefined);
             return;
         }

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

@@ -44,6 +44,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
 export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
     const noteIds = useFilteredNoteIds(note, unfilteredNoteIds);
     const { pageNotes, ...pagination } = usePagination(note, noteIds);
+    const [ includeArchived ] = useNoteLabelBoolean(note, "includeArchived");
 
     return (
         <div class="note-list grid-view">
@@ -52,7 +53,7 @@ export function GridView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
 
                 <div class="note-list-container use-tn-links">
                     {pageNotes?.map(childNote => (
-                        <GridNoteCard note={childNote} parentNote={note} highlightedTokens={highlightedTokens} />
+                        <GridNoteCard note={childNote} parentNote={note} highlightedTokens={highlightedTokens} includeArchived={includeArchived} />
                     ))}
                 </div>
 
@@ -94,14 +95,16 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
             </h5>
 
             {isExpanded && <>
-                <NoteContent note={note} highlightedTokens={highlightedTokens} noChildrenList />
+                <NoteContent note={note} highlightedTokens={highlightedTokens} noChildrenList includeArchivedNotes={includeArchived} />
                 <NoteChildren note={note} parentNote={parentNote} highlightedTokens={highlightedTokens} currentLevel={currentLevel} expandDepth={expandDepth} includeArchived={includeArchived} />
             </>}
         </div>
     );
 }
 
-function GridNoteCard({ note, parentNote, highlightedTokens }: { note: FNote, parentNote: FNote, highlightedTokens: string[] | null | undefined }) {
+function GridNoteCard({ note, parentNote, highlightedTokens, includeArchived }: { note: FNote, parentNote: FNote, highlightedTokens: string[] | null | undefined, includeArchived: boolean }) {
+    const titleRef = useRef<HTMLSpanElement>(null);
+    const [ noteTitle, setNoteTitle ] = useState<string>();
     const notePath = getNotePath(parentNote, note);
 
     return (
@@ -120,6 +123,7 @@ function GridNoteCard({ note, parentNote, highlightedTokens }: { note: FNote, pa
                 note={note}
                 trim
                 highlightedTokens={highlightedTokens}
+                includeArchivedNotes={includeArchived}
             />
         </div>
     );
@@ -136,14 +140,22 @@ function NoteAttributes({ note }: { note: FNote }) {
     return <span className="note-list-attributes" ref={ref} />;
 }
 
-function NoteContent({ note, trim, noChildrenList, highlightedTokens }: { note: FNote, trim?: boolean, noChildrenList?: boolean, highlightedTokens: string[] | null | undefined }) {
+function NoteContent({ note, trim, noChildrenList, highlightedTokens, includeArchivedNotes }: {
+    note: FNote;
+    trim?: boolean;
+    noChildrenList?: boolean;
+    highlightedTokens: string[] | null | undefined;
+    includeArchivedNotes: boolean;
+}) {
     const contentRef = useRef<HTMLDivElement>(null);
     const highlightSearch = useImperativeSearchHighlighlighting(highlightedTokens);
 
     useEffect(() => {
         content_renderer.getRenderedContent(note, {
             trim,
-            noChildrenList
+            noChildrenList,
+            noIncludedNotes: true,
+            includeArchivedNotes
         })
             .then(({ $renderedContent, type }) => {
                 if (!contentRef.current) return;

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

@@ -1,11 +1,12 @@
-import type { CellComponent, ColumnDefinition, EmptyCallback, FormatterParams, ValueBooleanCallback, ValueVoidCallback } from "tabulator-tables";
-import { LabelType } from "../../../services/promoted_attribute_definition_parser.js";
+import { LabelType } from "@triliumnext/commons";
 import { JSX } from "preact";
-import { renderReactWidget } from "../../react/react_utils.jsx";
-import Icon from "../../react/Icon.jsx";
 import { useEffect, useRef, useState } from "preact/hooks";
+import type { CellComponent, ColumnDefinition, EmptyCallback, FormatterParams, ValueBooleanCallback, ValueVoidCallback } from "tabulator-tables";
+
 import froca from "../../../services/froca.js";
+import Icon from "../../react/Icon.jsx";
 import NoteAutocomplete from "../../react/NoteAutocomplete.jsx";
+import { renderReactWidget } from "../../react/react_utils.jsx";
 
 type ColumnType = LabelType | "relation";
 
@@ -78,7 +79,7 @@ export function buildColumnDefinitions({ info, movableRows, existingColumnData,
             rowHandle: movableRows,
             width: calculateIndexColumnWidth(rowNumberHint, movableRows),
             formatter: wrapFormatter(({ cell, formatterParams }) => <div>
-                {(formatterParams as RowNumberFormatterParams).movableRows && <><span class="bx bx-dots-vertical-rounded"></span>{" "}</>}
+                {(formatterParams as RowNumberFormatterParams).movableRows && <><span class="bx bx-dots-vertical-rounded" />{" "}</>}
                 {cell.getRow().getPosition(true)}
             </div>),
             formatterParams: { movableRows } satisfies RowNumberFormatterParams
@@ -200,14 +201,14 @@ function wrapEditor(Component: (opts: EditorOpts) => JSX.Element): ((
     editorParams: {},
 ) => HTMLElement | false) {
     return (cell, _, success, cancel, editorParams) => {
-        const elWithParams = <Component cell={cell} success={success} cancel={cancel} editorParams={editorParams} />
+        const elWithParams = <Component cell={cell} success={success} cancel={cancel} editorParams={editorParams} />;
         return renderReactWidget(null, elWithParams)[0];
     };
 }
 
 function NoteFormatter({ cell }: FormatterOpts) {
     const noteId = cell.getValue();
-    const [ note, setNote ] = useState(noteId ? froca.getNoteFromCache(noteId) : null)
+    const [ note, setNote ] = useState(noteId ? froca.getNoteFromCache(noteId) : null);
 
     useEffect(() => {
         if (!noteId || note?.noteId === noteId) return;
@@ -231,5 +232,5 @@ function RelationEditor({ cell, success }: EditorOpts) {
             hideAllButtons: true
         }}
         noteIdChanged={success}
-    />
+    />;
 }

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

@@ -1,13 +1,14 @@
-import Modal from "../react/Modal.js";
+import type { AppInfo } from "@triliumnext/commons";
+import type { CSSProperties } from "preact/compat";
+import { useState } from "preact/hooks";
+
 import { t } from "../../services/i18n.js";
-import { formatDateTime } from "../../utils/formatters.js";
+import openService from "../../services/open.js";
 import server from "../../services/server.js";
 import utils from "../../services/utils.js";
-import openService from "../../services/open.js";
-import { useState } from "preact/hooks";
-import type { CSSProperties } from "preact/compat";
-import type { AppInfo } from "@triliumnext/commons";
+import { formatDateTime } from "../../utils/formatters.js";
 import { useTriliumEvent } from "../react/hooks.jsx";
+import Modal from "../react/Modal.js";
 
 export default function AboutDialog() {
     const [appInfo, setAppInfo] = useState<AppInfo | null>(null);
@@ -54,15 +55,15 @@ export default function AboutDialog() {
                     <tr>
                         <th>{t("about.build_revision")}</th>
                         <td className="selectable-text">
-                            {appInfo?.buildRevision && <a className="tn-link build-revision external" href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" style={forceWordBreak}>{appInfo.buildRevision}</a>}
+                            {appInfo?.buildRevision && <a className="tn-link build-revision external" href={`https://github.com/TriliumNext/Trilium/commit/${appInfo.buildRevision}`} target="_blank" style={forceWordBreak} rel="noreferrer">{appInfo.buildRevision}</a>}
                         </td>
                     </tr>
-                    <tr>
+                    { appInfo?.dataDirectory && <tr>
                         <th>{t("about.data_directory")}</th>
                         <td className="data-directory">
                             {appInfo?.dataDirectory && (<DirectoryLink directory={appInfo.dataDirectory} style={forceWordBreak} />)}
                         </td>
-                    </tr>
+                    </tr>}
                 </tbody>
             </table>
         </Modal>
@@ -76,8 +77,8 @@ function DirectoryLink({ directory, style }: { directory: string, style?: CSSPro
             openService.openDirectory(directory);
         };
 
-        return <a className="tn-link selectable-text" href="#" onClick={onClick} style={style}>{directory}</a>
-    } else {
-        return <span className="selectable-text" style={style}>{directory}</span>;
-    }
+        return <a className="tn-link selectable-text" href="#" onClick={onClick} style={style}>{directory}</a>;
+    } 
+    return <span className="selectable-text" style={style}>{directory}</span>;
+    
 }

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

@@ -27,6 +27,7 @@ export default function RecentChangesDialog() {
     });
 
     useEffect(() => {
+        if (!ancestorNoteId) return;
         server.get<RecentChangeRow[]>(`recent-changes/${ancestorNoteId}`)
             .then(async (recentChanges) => {
                 // preload all notes into cache

apps/client/src/widgets/launch_bar/LauncherContainer.tsx

@@ -1,17 +1,18 @@
 import { useCallback, useLayoutEffect, useState } from "preact/hooks";
+
 import FNote from "../../entities/fnote";
 import froca from "../../services/froca";
 import { isDesktop, isMobile } from "../../services/utils";
-import CalendarWidget from "./CalendarWidget";
-import SpacerWidget from "./SpacerWidget";
-import BookmarkButtons from "./BookmarkButtons";
-import ProtectedSessionStatusWidget from "./ProtectedSessionStatusWidget";
-import SyncStatus from "./SyncStatus";
-import HistoryNavigationButton from "./HistoryNavigation";
-import { AiChatButton, CommandButton, CustomWidget, NoteLauncher, QuickSearchLauncherWidget, ScriptLauncher, TodayLauncher } from "./LauncherDefinitions";
 import { useTriliumEvent } from "../react/hooks";
 import { onWheelHorizontalScroll } from "../widget_utils";
+import BookmarkButtons from "./BookmarkButtons";
+import CalendarWidget from "./CalendarWidget";
+import HistoryNavigationButton from "./HistoryNavigation";
 import { LaunchBarContext } from "./launch_bar_widgets";
+import { AiChatButton, CommandButton, CustomWidget, NoteLauncher, QuickSearchLauncherWidget, ScriptLauncher, TodayLauncher } from "./LauncherDefinitions";
+import ProtectedSessionStatusWidget from "./ProtectedSessionStatusWidget";
+import SpacerWidget from "./SpacerWidget";
+import SyncStatus from "./SyncStatus";
 
 export default function LauncherContainer({ isHorizontalLayout }: { isHorizontalLayout: boolean }) {
     const childNotes = useLauncherChildNotes();
@@ -34,18 +35,19 @@ export default function LauncherContainer({ isHorizontalLayout }: { isHorizontal
             }}>
                 {childNotes?.map(childNote => {
                     if (childNote.type !== "launcher") {
-                        throw new Error(`Note '${childNote.noteId}' '${childNote.title}' is not a launcher even though it's in the launcher subtree`);
+                        console.warn(`Note '${childNote.noteId}' '${childNote.title}' is not a launcher even though it's in the launcher subtree`);
+                        return false;
                     }
 
                     if (!isDesktop() && childNote.isLabelTruthy("desktopOnly")) {
                         return false;
                     }
 
-                    return <Launcher key={childNote.noteId} note={childNote} isHorizontalLayout={isHorizontalLayout} />
+                    return <Launcher key={childNote.noteId} note={childNote} isHorizontalLayout={isHorizontalLayout} />;
                 })}
             </LaunchBarContext.Provider>
         </div>
-    )
+    );
 }
 
 function Launcher({ note, isHorizontalLayout }: { note: FNote, isHorizontalLayout: boolean }) {
@@ -72,7 +74,7 @@ function initBuiltinWidget(note: FNote, isHorizontalLayout: boolean) {
     const builtinWidget = note.getLabelValue("builtinWidget");
     switch (builtinWidget) {
         case "calendar":
-            return <CalendarWidget launcherNote={note} />
+            return <CalendarWidget launcherNote={note} />;
         case "spacer":
             // || has to be inside since 0 is a valid value
             const baseSize = parseInt(note.getLabelValue("baseSize") || "40");
@@ -86,15 +88,15 @@ function initBuiltinWidget(note: FNote, isHorizontalLayout: boolean) {
         case "syncStatus":
             return <SyncStatus />;
         case "backInHistoryButton":
-            return <HistoryNavigationButton launcherNote={note} command="backInNoteHistory" />
+            return <HistoryNavigationButton launcherNote={note} command="backInNoteHistory" />;
         case "forwardInHistoryButton":
-            return <HistoryNavigationButton launcherNote={note} command="forwardInNoteHistory" />
+            return <HistoryNavigationButton launcherNote={note} command="forwardInNoteHistory" />;
         case "todayInJournal":
-            return <TodayLauncher launcherNote={note} />
+            return <TodayLauncher launcherNote={note} />;
         case "quickSearch":
-            return <QuickSearchLauncherWidget />
+            return <QuickSearchLauncherWidget />;
         case "aiChatLauncher":
-            return <AiChatButton launcherNote={note} />
+            return <AiChatButton launcherNote={note} />;
         default:
             throw new Error(`Unrecognized builtin widget ${builtinWidget} for launcher ${note.noteId} "${note.title}"`);
     }

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

@@ -338,19 +338,19 @@ interface AttributesProps extends StatusBarContext {
 function AttributesButton({ note, attributesShown, setAttributesShown }: AttributesProps) {
     const [ count, setCount ] = useState(note.attributes.length);
 
-    const refreshCount = useCallback((note: FNote) => {
+    const getAttributeCount = useCallback((note: FNote) => {
         return note.getAttributes().filter(a => !a.isAutoLink).length;
     }, []);
 
     // React to note changes.
     useEffect(() => {
-        setCount(refreshCount(note));
-    }, [ note, refreshCount ]);
+        setCount(getAttributeCount(note));
+    }, [ note, getAttributeCount ]);
 
     // React to changes in count.
     useTriliumEvent("entitiesReloaded", (({loadResults}) => {
         if (loadResults.getAttributeRows().some(attr => attributes.isAffecting(attr, note))) {
-            setCount(refreshCount(note));
+            setCount(getAttributeCount(note));
         }
     }));
 

apps/client/src/widgets/note_bars/CollectionProperties.tsx

@@ -82,6 +82,13 @@ function ViewOptions({ note, viewType }: { note: FNote, viewType: ViewTypeOption
             ))}
             {properties.length > 0 && <FormDropdownDivider />}
 
+            <ViewProperty note={note} property={{
+                type: "checkbox",
+                icon: "bx bx-hide",
+                label: t("book_properties.hide_child_notes"),
+                bindToLabel: "subtreeHidden"
+            } as CheckBoxProperty} />
+
             <ViewProperty note={note} property={{
                 type: "checkbox",
                 icon: "bx bx-archive",

apps/client/src/widgets/note_tree.css

@@ -0,0 +1,20 @@
+#left-pane .tree-wrapper {
+    .note-indicator-icon.subtree-hidden-badge {
+        font-family: inherit !important;
+        margin-inline: 0.5em;
+        margin-top: 0.3em;
+        background: var(--left-pane-item-action-button-background);
+        color: var(--left-pane-item-action-button-color);
+        padding: 0.1em 0.6em;
+        border-radius: 0.5em;
+        font-size: 0.7rem;
+        font-weight: normal;
+        float: right;
+        vertical-align: middle;
+    }
+
+    .spotlighted-node {
+        opacity: 0.8;
+        font-style: italic;
+    }
+}

apps/client/src/widgets/note_tree.ts

@@ -3,13 +3,13 @@ import "jquery.fancytree/dist/modules/jquery.fancytree.dnd5.js";
 import "jquery.fancytree/dist/modules/jquery.fancytree.clones.js";
 import "jquery.fancytree/dist/modules/jquery.fancytree.filter.js";
 import "../stylesheets/tree.css";
+import "./note_tree.css";
 
 import appContext, { type CommandListenerData, type EventData } from "../components/app_context.js";
 import type { SetNoteOpts } from "../components/note_context.js";
 import type { TouchBarItem } from "../components/touch_bar.js";
 import type FBranch from "../entities/fbranch.js";
 import type FNote from "../entities/fnote.js";
-import type { NoteType } from "../entities/fnote.js";
 import contextMenu from "../menus/context_menu.js";
 import type { TreeCommandNames } from "../menus/tree_context_menu.js";
 import branchService from "../services/branches.js";
@@ -153,7 +153,7 @@ const TPL = /*html*/`
 const MAX_SEARCH_RESULTS_IN_TREE = 100;
 
 // this has to be hanged on the actual elements to effectively intercept and stop click event
-const cancelClickPropagation: (e: JQuery.ClickEvent) => void = (e) => e.stopPropagation();
+const cancelClickPropagation: (e: Event) => void = (e) => e.stopPropagation();
 
 // TODO: Fix once we remove Node.js API from public
 type Timeout = NodeJS.Timeout | string | number | undefined;
@@ -190,6 +190,9 @@ export interface DragData {
 
 export const TREE_CLIPBOARD_TYPE = "application/x-fancytree-node";
 
+/** Entity changes below the given threshold will be processed without batching to avoid performance degradation. */
+const BATCH_UPDATE_THRESHOLD = 10;
+
 export default class NoteTreeWidget extends NoteContextAwareWidget {
     private $tree!: JQuery<HTMLElement>;
     private $treeActions!: JQuery<HTMLElement>;
@@ -201,6 +204,8 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
     private treeName: "main";
     private autoCollapseTimeoutId?: Timeout;
     private lastFilteredHoistedNotePath?: string | null;
+    private spotlightedNotePath?: string | null;
+    private spotlightedNode: Fancytree.FancytreeNode | null = null;
     private tree!: Fancytree.Fancytree;
 
     constructor() {
@@ -353,6 +358,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         this.$tree.fancytree({
             titlesTabbable: true,
             keyboard: true,
+            toggleEffect: options.is("motionEnabled") ? undefined : false,
             extensions: ["dnd5", "clones", "filter"],
             source: treeData,
             scrollOfs: {
@@ -552,7 +558,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                         } else if (data.hitMode === "after") {
                             branchService.moveAfterBranch(selectedBranchIds, node.data.branchId);
                         } else if (data.hitMode === "over") {
-                            branchService.moveToParentNote(selectedBranchIds, node.data.branchId);
+                            branchService.moveToParentNote(selectedBranchIds, node.data.branchId, this.componentId);
                         } else {
                             throw new Error(`Unknown hitMode '${data.hitMode}'`);
                         }
@@ -598,102 +604,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             clones: {
                 highlightActiveClones: true
             },
-            async enhanceTitle (
-                event: Event,
-                data: {
-                    node: Fancytree.FancytreeNode;
-                    noteId: string;
-                }
-            ) {
-                const node = data.node;
-
-                if (!node.data.noteId) {
-                    // if there's "non-note" node, then don't enhance
-                    // this can happen for e.g. "Load error!" node
-                    return;
-                }
-
-                const note = await froca.getNote(node.data.noteId, true);
-
-                if (!note) {
-                    return;
-                }
-
-                const activeNoteContext = appContext.tabManager.getActiveContext();
-
-                const $span = $(node.span);
-
-                $span.find(".tree-item-button").remove();
-                $span.find(".note-indicator-icon").remove();
-
-                const isHoistedNote = activeNoteContext && activeNoteContext.hoistedNoteId === note.noteId && note.noteId !== "root";
-
-                if (note.hasLabel("workspace") && !isHoistedNote) {
-                    const $enterWorkspaceButton = $(`<span class="tree-item-button tn-icon enter-workspace-button bx bx-door-open" title="${t("note_tree.hoist-this-note-workspace")}"></span>`).on(
-                        "click",
-                        cancelClickPropagation
-                    );
-
-                    $span.append($enterWorkspaceButton);
-                }
-
-                if (note.type === "search") {
-                    const $refreshSearchButton = $(`<span class="tree-item-button tn-icon refresh-search-button bx bx-refresh" title="${t("note_tree.refresh-saved-search-results")}"></span>`).on(
-                        "click",
-                        cancelClickPropagation
-                    );
-
-                    $span.append($refreshSearchButton);
-                }
-
-                // TODO: Deduplicate with server's notes.ts#getAndValidateParent
-                if (!["search", "launcher"].includes(note.type)
-                    && !note.isOptions()
-                    && !note.isLaunchBarConfig()
-                    && !note.noteId.startsWith("_help")
-                ) {
-                    const $createChildNoteButton = $(`<span class="tree-item-button tn-icon add-note-button bx bx-plus" title="${t("note_tree.create-child-note")}"></span>`).on(
-                        "click",
-                        cancelClickPropagation
-                    );
-
-                    $span.append($createChildNoteButton);
-                }
-
-                if (isHoistedNote) {
-                    const $unhoistButton = $(`<span class="tree-item-button tn-icon unhoist-button bx bx-door-open" title="${t("note_tree.unhoist")}"></span>`).on("click", cancelClickPropagation);
-
-                    $span.append($unhoistButton);
-                }
-
-                // Add clone indicator with tooltip if note has multiple parents
-                const parentNotes = note.getParentNotes();
-                const realParents = parentNotes.filter(
-                    (parent) => !["_share", "_lbBookmarks"].includes(parent.noteId) && parent.type !== "search"
-                );
-
-                if (realParents.length > 1) {
-                    const parentTitles = realParents.map((p) => p.title).join(", ");
-                    const tooltipText = realParents.length === 2
-                        ? t("note_tree.clone-indicator-tooltip-single", { parent: realParents[1].title })
-                        : t("note_tree.clone-indicator-tooltip", { count: realParents.length, parents: parentTitles });
-
-                    const $cloneIndicator = $(`<span class="note-indicator-icon clone-indicator"></span>`);
-                    $cloneIndicator.attr("title", tooltipText);
-                    $span.find(".fancytree-title").append($cloneIndicator);
-                }
-
-                // Add shared indicator with tooltip if note is shared
-                if (note.isShared()) {
-                    const shareId = note.getOwnedLabelValue("shareAlias") || note.noteId;
-                    const shareUrl = `${location.origin}${location.pathname}share/${shareId}`;
-                    const tooltipText = t("note_tree.shared-indicator-tooltip-with-url", { url: shareUrl });
-
-                    const $sharedIndicator = $(`<span class="note-indicator-icon shared-indicator"></span>`);
-                    $sharedIndicator.attr("title", tooltipText);
-                    $span.find(".fancytree-title").append($sharedIndicator);
-                }
-            },
+            enhanceTitle: buildEnhanceTitle(),
             // this is done to automatically lazy load all expanded notes after tree load
             loadChildren: (event, data) => {
                 data.node.visit((subNode) => {
@@ -803,6 +714,23 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             childBranches = childBranches.slice(0, MAX_SEARCH_RESULTS_IN_TREE);
         }
 
+        if (parentNote.isLabelTruthy("subtreeHidden")) {
+            // If we have a spotlighted note path, show only the child that leads to it
+            if (this.spotlightedNotePath) {
+                const spotlightPathSegments = this.spotlightedNotePath.split('/');
+                const parentIndex = spotlightPathSegments.indexOf(parentNote.noteId);
+
+                if (parentIndex >= 0 && parentIndex < spotlightPathSegments.length - 1) {
+                    const nextNoteIdInPath = spotlightPathSegments[parentIndex + 1];
+                    childBranches = childBranches.filter(branch => branch.noteId === nextNoteIdInPath);
+                } else {
+                    childBranches = [];
+                }
+            } else {
+                childBranches = [];
+            }
+        }
+
         for (const branch of childBranches) {
             if (hideArchivedNotes) {
                 const note = branch.getNoteFromCache();
@@ -874,6 +802,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             lazy: true,
             folder: isFolder,
             expanded: !!branch.isExpanded && note.type !== "search",
+            subtreeHidden: note.isLabelTruthy("subtreeHidden"),
             key: utils.randomString(12) // this should prevent some "duplicate key" errors
         };
 
@@ -932,6 +861,10 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             extraClasses.push(...["tinted", colorClass]);
         }
 
+        if (this.spotlightedNotePath && this.spotlightedNotePath.endsWith(`/${note.noteId}`)) {
+            extraClasses.push("spotlighted-node");
+        }
+
         return extraClasses.join(" ");
     }
 
@@ -1082,18 +1015,43 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     foundChildNode = this.findChildNode(parentNode, childNoteId);
 
                     if (!foundChildNode) {
-                        if (logErrors) {
-                            // besides real errors, this can be also caused by hiding of e.g. included images
-                            // these are real notes with real notePath, user can display them in a detail,
-                            // but they don't have a node in the tree
+                        const childNote = await froca.getNote(childNoteId);
 
-                            const childNote = await froca.getNote(childNoteId);
+                        if (childNote?.type === "image") return;
 
-                            if (!childNote || childNote.type !== "image") {
-                                ws.logError(
-                                    `Can't find node for child node of noteId=${childNoteId} for parent of noteId=${parentNode.data.noteId} and hoistedNoteId=${hoistedNoteService.getHoistedNoteId()}, requested path is ${notePath}`
-                                );
+                        // The child note can be part of a note with #subtreeHidden, case in which we need to "spotlight" it.
+                        const parentNote = froca.getNoteFromCache(parentNode.data.noteId);
+                        if (parentNote?.isLabelTruthy("subtreeHidden")) {
+                            // Enable spotlight mode and reload the parent to show only the path to this note
+                            this.spotlightedNotePath = notePath;
+                            await parentNode.load(true);
+
+                            // Try to find the child again after reload
+                            foundChildNode = this.findChildNode(parentNode, childNoteId);
+                            this.spotlightedNode = foundChildNode ?? null;
+
+                            if (!foundChildNode) {
+                                if (logErrors || !childNote) {
+                                    ws.logError(
+                                        `Can't find node for child node of noteId=${childNoteId} for parent of noteId=${parentNode.data.noteId} and hoistedNoteId=${hoistedNoteService.getHoistedNoteId()}, requested path is ${notePath}`
+                                    );
+                                    return;
+                                }
+                                return;
                             }
+
+                            parentNode = foundChildNode;
+                            continue;
+                        }
+
+                        // besides real errors, this can be also caused by hiding of e.g. included images
+                        // these are real notes with real notePath, user can display them in a detail,
+                        // but they don't have a node in the tree
+                        if (logErrors || !childNote) {
+                            ws.logError(
+                                `Can't find node for child node of noteId=${childNoteId} for parent of noteId=${parentNode.data.noteId} and hoistedNoteId=${hoistedNoteService.getHoistedNoteId()}, requested path is ${notePath}`
+                            );
+                            return;
                         }
 
                         return;
@@ -1108,7 +1066,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
     }
 
     findChildNode(parentNode: Fancytree.FancytreeNode, childNoteId: string) {
-        return parentNode.getChildren().find((childNode) => childNode.data.noteId === childNoteId);
+        return parentNode.getChildren()?.find((childNode) => childNode.data.noteId === childNoteId);
     }
 
     async expandToNote(notePath: string, logErrors = true) {
@@ -1149,12 +1107,20 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
             (!treeService.isNotePathInHiddenSubtree(this.noteContext.notePath) || (await hoistedNoteService.isHoistedInHiddenSubtree())) &&
             (await this.getNodeFromPath(this.noteContext.notePath));
 
+        if (this.spotlightedNode && newActiveNode !== this.spotlightedNode) {
+            // Can get removed when switching to another note in a spotlighted subtree.
+            if (this.spotlightedNode.parent) {
+                this.spotlightedNode.remove();
+            }
+            this.spotlightedNode = null;
+            this.spotlightedNotePath = null;
+        }
+
         if (newActiveNode !== oldActiveNode) {
             let oldActiveNodeFocused = false;
 
             if (oldActiveNode) {
                 oldActiveNodeFocused = oldActiveNode.hasFocus();
-
                 oldActiveNode.setActive(false);
                 oldActiveNode.setFocus(false);
             }
@@ -1257,10 +1223,18 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         const { movedActiveNode, parentsOfAddedNodes } = await this.#processBranchRows(branchRows, refreshCtx);
 
         for (const noteId of loadResults.getNoteIds()) {
+            const contentReloaded = loadResults.isNoteContentReloaded(noteId);
+            if (contentReloaded && !loadResults.isNoteReloaded(noteId, contentReloaded.componentId)) {
+                // Only the note content was reloaded, not the note itself. This would cause a redundant update on every few seconds while editing a note.
+                continue;
+            }
+
             refreshCtx.noteIdsToUpdate.add(noteId);
         }
 
-        await this.#executeTreeUpdates(refreshCtx, loadResults);
+        if (refreshCtx.noteIdsToUpdate.size + refreshCtx.noteIdsToReload.size > 0) {
+            await this.#executeTreeUpdates(refreshCtx, loadResults);
+        }
 
         await this.#setActiveNode(activeNotePath, activeNodeFocused, movedActiveNode, parentsOfAddedNodes);
 
@@ -1280,7 +1254,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                 } else {
                     refreshCtx.noteIdsToUpdate.add(attrRow.noteId);
                 }
-            } else if (attrRow.type === "label" && attrRow.name === "archived" && attrRow.noteId) {
+            } else if (attrRow.type === "label" && (attrRow.name === "archived" || attrRow.name === "subtreeHidden") && attrRow.noteId) {
                 const note = froca.getNoteFromCache(attrRow.noteId);
 
                 if (note) {
@@ -1365,18 +1339,34 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     } else if (frocaBranch) {
                         // make sure it's loaded
                         // we're forcing lazy since it's not clear if the whole required subtree is in froca
-                        const newNode = this.prepareNode(frocaBranch, true);
-                        if (newNode) {
-                            parentNode.addChildren([newNode]);
-                        }
+                        if (!parentNode.data.subtreeHidden) {
+                            const newNode = this.prepareNode(frocaBranch, true);
+                            if (newNode) {
+                                parentNode.addChildren([newNode]);
+                            }
 
-                        if (frocaBranch?.isExpanded && note && note.hasChildren()) {
-                            refreshCtx.noteIdsToReload.add(frocaBranch.noteId);
-                        }
+                            if (frocaBranch?.isExpanded && note && note.hasChildren()) {
+                                refreshCtx.noteIdsToReload.add(frocaBranch.noteId);
+                            }
 
-                        this.sortChildren(parentNode);
+                            this.sortChildren(parentNode);
+                        } else if (branchRow.componentId === this.componentId) {
+                            // Display the toast and focus to parent note only if we know for sure that the operation comes from the tree.
+                            const parentNote = froca.getNoteFromCache(parentNode.data.noteId || "");
+                            toastService.showPersistent({
+                                id: `subtree-hidden-moved`,
+                                title: t("note_tree.subtree-hidden-moved-title", { title: parentNote?.title }),
+                                message: parentNote?.type === "book"
+                                    ? t("note_tree.subtree-hidden-moved-description-collection")
+                                    : t("note_tree.subtree-hidden-moved-description-other"),
+                                icon: "bx bx-hide",
+                                timeout: 5_000,
+                            });
+                            parentNode.setActive(true);
+                        }
 
                         // this might be a first child which would force an icon change
+                        // also update the count if the subtree is hidden.
                         if (branchRow.parentNoteId) {
                             refreshCtx.noteIdsToUpdate.add(branchRow.parentNoteId);
                         }
@@ -1392,7 +1382,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
     }
 
     async #executeTreeUpdates(refreshCtx: RefreshContext, loadResults: LoadResults) {
-        await this.batchUpdate(async () => {
+        const performUpdates = async () => {
             for (const noteId of refreshCtx.noteIdsToReload) {
                 for (const node of this.getNodesByNoteId(noteId)) {
                     await node.load(true);
@@ -1408,7 +1398,19 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
                     }
                 }
             }
-        });
+        };
+
+        if (refreshCtx.noteIdsToReload.size + refreshCtx.noteIdsToUpdate.size >= BATCH_UPDATE_THRESHOLD) {
+            /**
+             * Batch updates are used for large number of updates to prevent multiple re-renders, however in the context of small updates (such as changing a note title)
+             * it can cause up to 400ms of delay for ~8k notes which is not acceptable. Therefore we use batching only for larger number of updates.
+             * Without batching, the updates would take a couple of milliseconds.
+             * We still keep the batching for potential cases where there are many updates, for example in a sync.
+             */
+            await this.batchUpdate(performUpdates);
+        } else {
+            await performUpdates();
+        }
 
         // for some reason, node update cannot be in the batchUpdate() block (node is not re-rendered)
         for (const noteId of refreshCtx.noteIdsToUpdate) {
@@ -1672,7 +1674,7 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         const toNode = node.getPrevSibling();
 
         if (toNode !== null) {
-            branchService.moveToParentNote([node.data.branchId], toNode.data.branchId);
+            branchService.moveToParentNote([node.data.branchId], toNode.data.branchId, this.componentId);
         }
     }
 
@@ -1809,12 +1811,12 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
     #moveLaunchers(selectedOrActiveBranchIds: string[], desktopParent: string, mobileParent: string) {
         const desktopLaunchersToMove = selectedOrActiveBranchIds.filter((branchId) => !branchId.startsWith("_lbMobile"));
         if (desktopLaunchersToMove) {
-            branchService.moveToParentNote(desktopLaunchersToMove, `_lbRoot_${  desktopParent}`);
+            branchService.moveToParentNote(desktopLaunchersToMove, `_lbRoot_${  desktopParent}`, this.componentId);
         }
 
         const mobileLaunchersToMove = selectedOrActiveBranchIds.filter((branchId) => branchId.startsWith("_lbMobile"));
         if (mobileLaunchersToMove) {
-            branchService.moveToParentNote(mobileLaunchersToMove, `_lbMobileRoot_${  mobileParent}`);
+            branchService.moveToParentNote(mobileLaunchersToMove, `_lbMobileRoot_${mobileParent}`, this.componentId);
         }
     }
 
@@ -1882,3 +1884,112 @@ export default class NoteTreeWidget extends NoteContextAwareWidget {
         return items;
     }
 }
+
+function buildEnhanceTitle() {
+    const createChildTemplate = document.createElement("span");
+    createChildTemplate.className = "tree-item-button tn-icon add-note-button bx bx-plus";
+    createChildTemplate.title = t("note_tree.create-child-note");
+
+    return async function enhanceTitle(event: Event,
+        data: {
+            node: Fancytree.FancytreeNode;
+            noteId: string;
+        }) {
+        const node = data.node;
+
+        if (!node.data.noteId) {
+            // if there's "non-note" node, then don't enhance
+            // this can happen for e.g. "Load error!" node
+            return;
+        }
+
+        const note = froca.getNoteFromCache(node.data.noteId);
+        if (!note) return;
+
+        const activeNoteContext = appContext.tabManager.getActiveContext();
+
+        const $span = $(node.span);
+
+        $span.find(".tree-item-button").remove();
+        $span.find(".note-indicator-icon").remove();
+
+        const isHoistedNote = activeNoteContext && activeNoteContext.hoistedNoteId === note.noteId && note.noteId !== "root";
+
+        if (note.hasLabel("workspace") && !isHoistedNote) {
+            const $enterWorkspaceButton = $(`<span class="tree-item-button tn-icon enter-workspace-button bx bx-door-open" title="${t("note_tree.hoist-this-note-workspace")}"></span>`).on(
+                "click",
+                cancelClickPropagation
+            );
+
+            $span.append($enterWorkspaceButton);
+        }
+
+        if (note.type === "search") {
+            const $refreshSearchButton = $(`<span class="tree-item-button tn-icon refresh-search-button bx bx-refresh" title="${t("note_tree.refresh-saved-search-results")}"></span>`).on(
+                "click",
+                cancelClickPropagation
+            );
+
+            $span.append($refreshSearchButton);
+        }
+
+        // TODO: Deduplicate with server's notes.ts#getAndValidateParent
+        const isSubtreeHidden = note.isLabelTruthy("subtreeHidden");
+        if (!["search", "launcher"].includes(note.type)
+            && !note.isOptions()
+            && !note.isLaunchBarConfig()
+            && !note.noteId.startsWith("_help")
+            && !isSubtreeHidden
+            && !node.extraClasses.includes("spotlighted-node")
+        ) {
+            const createChildItem = createChildTemplate.cloneNode();
+            createChildItem.addEventListener("click", cancelClickPropagation);
+            node.span.append(createChildItem);
+        }
+
+        if (isHoistedNote) {
+            const $unhoistButton = $(`<span class="tree-item-button tn-icon unhoist-button bx bx-door-open" title="${t("note_tree.unhoist")}"></span>`).on("click", cancelClickPropagation);
+
+            $span.append($unhoistButton);
+        }
+
+        // Add clone indicator with tooltip if note has multiple parents
+        const parentNotes = note.getParentNotes();
+        const realParents: FNote[] = [];
+        for (const parent of parentNotes) {
+            if (parent.noteId !== "_share" && parent.noteId !== "_lbBookmarks" && parent.type !== "search") {
+                realParents.push(parent);
+            }
+        }
+
+        if (realParents.length > 1) {
+            const parentTitles = realParents.map((p) => p.title).join(", ");
+            const tooltipText = realParents.length === 2
+                ? t("note_tree.clone-indicator-tooltip-single", { parent: realParents[1].title })
+                : t("note_tree.clone-indicator-tooltip", { count: realParents.length, parents: parentTitles });
+
+            const $cloneIndicator = $(`<span class="note-indicator-icon clone-indicator"></span>`);
+            $cloneIndicator.attr("title", tooltipText);
+            $span.find(".fancytree-title").append($cloneIndicator);
+        }
+
+        // Add shared indicator with tooltip if note is shared
+        if (note.isShared()) {
+            const shareId = note.getOwnedLabelValue("shareAlias") || note.noteId;
+            const shareUrl = `${location.origin}${location.pathname}share/${shareId}`;
+            const tooltipText = t("note_tree.shared-indicator-tooltip-with-url", { url: shareUrl });
+
+            const $sharedIndicator = $(`<span class="note-indicator-icon shared-indicator"></span>`);
+            $sharedIndicator.attr("title", tooltipText);
+            $span.find(".fancytree-title").append($sharedIndicator);
+        }
+
+        // Add a badge with the number of items if it hides children.
+        const count = note.getChildNoteIds().length;
+        if (isSubtreeHidden && count > 0) {
+            const $badge = $(`<span class="note-indicator-icon subtree-hidden-badge">${count}</span>`);
+            $badge.attr("title", t("note_tree.subtree-hidden-tooltip", { count }));
+            $span.find(".fancytree-title").append($badge);
+        }
+    };
+}

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

@@ -646,17 +646,13 @@ export function useNoteLabelBoolean(note: FNote | undefined | null, labelName: F
 
     const setter = useCallback((value: boolean) => {
         if (note) {
-            if (value) {
-                attributes.setLabel(note.noteId, labelName, "");
-            } else {
-                attributes.removeOwnedLabelByName(note, labelName);
-            }
+            attributes.setBooleanWithInheritance(note, labelName, value);
         }
-    }, [note]);
+    }, [note, labelName]);
 
     useDebugValue(labelName);
 
-    const labelValue = !!note?.hasLabel(labelName);
+    const labelValue = !!note?.isLabelTruthy(labelName);
     return [ labelValue, setter ] as const;
 }
 

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

@@ -2,12 +2,14 @@ import "./TableOfContents.css";
 
 import { CKTextEditor, ModelElement } from "@triliumnext/ckeditor5";
 import clsx from "clsx";
-import { useCallback, useEffect, useState } from "preact/hooks";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 
 import { t } from "../../services/i18n";
+import math from "../../services/math";
 import { randomString } from "../../services/utils";
 import { useActiveNoteContext, useContentElement, useGetContextData, useIsNoteReadOnly, useNoteProperty, useTextEditor } from "../react/hooks";
 import Icon from "../react/Icon";
+import RawHtml from "../react/RawHtml";
 import RightPanelWidget from "./RightPanelWidget";
 
 //#region Generic impl.
@@ -80,6 +82,22 @@ function TableOfContentsHeading({ heading, scrollToHeading, activeHeadingId }: {
 }) {
     const [ collapsed, setCollapsed ] = useState(false);
     const isActive = heading.id === activeHeadingId;
+    const contentRef = useRef<HTMLElement>(null);
+
+    // Render math equations after component mounts/updates
+    useEffect(() => {
+        if (!contentRef.current) return;
+        const mathElements = contentRef.current.querySelectorAll(".ck-math-tex");
+
+        for (const mathEl of mathElements ?? []) {
+            try {
+                math.render(mathEl.textContent || "", mathEl as HTMLElement);
+            } catch (e) {
+                console.warn("Failed to render math in TOC:", e);
+            }
+        }
+    }, [heading.text]);
+
     return (
         <>
             <li className={clsx(collapsed && "collapsed", isActive && "active")}>
@@ -90,12 +108,14 @@ function TableOfContentsHeading({ heading, scrollToHeading, activeHeadingId }: {
                         onClick={() => setCollapsed(!collapsed)}
                     />
                 )}
-                <span
+                <RawHtml
+                    containerRef={contentRef}
                     className="item-content"
                     onClick={() => scrollToHeading(heading)}
-                >{heading.text}</span>
+                    html={heading.text}
+                />
             </li>
-            {heading.children && (
+            {heading.children.length > 0 && (
                 <ol>
                     {heading.children.map(heading => <TableOfContentsHeading key={heading.id} heading={heading} scrollToHeading={scrollToHeading} activeHeadingId={activeHeadingId} />)}
                 </ol>
@@ -189,9 +209,23 @@ function extractTocFromTextEditor(editor: CKTextEditor) {
             if (type !== "elementStart" || !item.is('element') || !item.name.startsWith('heading')) continue;
 
             const level = Number(item.name.replace( 'heading', '' ));
-            const text = Array.from( item.getChildren() )
-                .map( c => c.is( '$text' ) ? c.data : '' )
-                .join( '' );
+
+            // Convert model element to view, then to DOM to get HTML
+            const viewEl = editor.editing.mapper.toViewElement(item);
+            let text = '';
+            if (viewEl) {
+                const domEl = editor.editing.view.domConverter.mapViewToDom(viewEl);
+                if (domEl instanceof HTMLElement) {
+                    text = domEl.innerHTML;
+                }
+            }
+
+            // Fallback to plain text if conversion fails
+            if (!text) {
+                text = Array.from( item.getChildren() )
+                    .map( c => c.is( '$text' ) ? c.data : '' )
+                    .join( '' );
+            }
 
             // Assign a unique ID
             let tocId = item.getAttribute(TOC_ID) as string | undefined;

apps/client/src/widgets/sql_result.tsx

@@ -23,7 +23,7 @@ export default function SqlResults() {
                         {t("sql_result.no_rows")}
                     </Alert>
                 ) : (
-                    <div class="sql-console-result-container">
+                    <div className="sql-console-result-container selectable-text">
                         {results?.map(rows => {
                             // inserts, updates
                             if (typeof rows === "object" && !Array.isArray(rows)) {

apps/client/src/widgets/sql_table_schemas.tsx

@@ -8,39 +8,44 @@ import Dropdown from "./react/Dropdown";
 
 export default function SqlTableSchemas() {
     const { note } = useNoteContext();
+
+    const isEnabled = note?.mime === "text/x-sqlite;schema=trilium";
+    return (
+        <div className={`sql-table-schemas-widget ${!isEnabled ? "hidden-ext" : ""}`}>
+            {isEnabled && <SqlTableSchemasContent />}
+        </div>
+    )
+}
+
+function SqlTableSchemasContent() {
     const [ schemas, setSchemas ] = useState<SchemaResponse[]>();
 
     useEffect(() => {
         server.get<SchemaResponse[]>("sql/schema").then(setSchemas);
     }, []);
 
-    const isEnabled = note?.mime === "text/x-sqlite;schema=trilium" && schemas;
-    return (
-        <div className={`sql-table-schemas-widget ${!isEnabled ? "hidden-ext" : ""}`}>
-            {isEnabled && (
-                <>
-                    {t("sql_table_schemas.tables")}{": "}
+    return schemas && (
+        <>
+            {t("sql_table_schemas.tables")}{": "}
 
-                    <span class="sql-table-schemas">
-                        {schemas.map(({ name, columns }) => (
-                            <>
-                                <Dropdown text={name} noSelectButtonStyle hideToggleArrow
-                                >
-                                    <table className="table-schema">
-                                        {columns.map(column => (
-                                            <tr>
-                                                <td>{column.name}</td>
-                                                <td>{column.type}</td>
-                                            </tr>
-                                        ))}
-                                    </table>
-                                </Dropdown>
-                                {" "}
-                            </>
-                        ))}
-                    </span>
-                </>
-            )}
-        </div>
+            <span className="sql-table-schemas">
+                {schemas.map(({ name, columns }) => (
+                    <>
+                        <Dropdown text={name} noSelectButtonStyle hideToggleArrow
+                        >
+                            <table className="table-schema">
+                                {columns.map(column => (
+                                    <tr>
+                                        <td>{column.name}</td>
+                                        <td>{column.type}</td>
+                                    </tr>
+                                ))}
+                            </table>
+                        </Dropdown>
+                        {" "}
+                    </>
+                ))}
+            </span>
+        </>
     )
-}
+}

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

@@ -1,20 +1,29 @@
-import "./Image.css";
-
 import { useEffect, useRef, useState } from "preact/hooks";
-import { TransformComponent,TransformWrapper } from "react-zoom-pan-pinch";
-
-import image_context_menu from "../../menus/image_context_menu";
-import { copyImageReferenceToClipboard } from "../../services/image";
 import { createImageSrcUrl } from "../../services/utils";
 import { useTriliumEvent, useUniqueName } from "../react/hooks";
-import { refToJQuerySelector } from "../react/react_utils";
+import "./Image.css";
 import { TypeWidgetProps } from "./type_widget";
+import WheelZoom from 'vanilla-js-wheel-zoom';
+import image_context_menu from "../../menus/image_context_menu";
+import { refToJQuerySelector } from "../react/react_utils";
+import { copyImageReferenceToClipboard } from "../../services/image";
 
 export default function Image({ note, ntxId }: TypeWidgetProps) {
     const uniqueId = useUniqueName("image");
     const containerRef = useRef<HTMLDivElement>(null);
     const [ refreshCounter, setRefreshCounter ] = useState(0);
 
+    // Set up pan & zoom
+    useEffect(() => {
+        const zoomInstance = WheelZoom.create(`#${uniqueId}`, {
+            maxScale: 50,
+            speed: 1.3,
+            zoomOnClick: false
+        });
+
+        return () => zoomInstance.destroy();
+    }, [ note ]);
+
     // Set up context menu
     useEffect(() => image_context_menu.setupContextMenu(refToJQuerySelector(containerRef)), []);
 
@@ -33,23 +42,11 @@ export default function Image({ note, ntxId }: TypeWidgetProps) {
 
     return (
         <div ref={containerRef} className="note-detail-image-wrapper">
-            <TransformWrapper
-                initialScale={1}
-                centerOnInit
-            >
-                <TransformComponent
-                    wrapperStyle={{
-                        width: "100%",
-                        height: "100%"
-                    }}
-                >
-                    <img
-                        id={uniqueId}
-                        className="note-detail-image-view"
-                        src={createImageSrcUrl(note)}
-                    />
-                </TransformComponent>
-            </TransformWrapper>
+            <img
+                id={uniqueId}
+                className="note-detail-image-view"
+                src={createImageSrcUrl(note)}
+            />
         </div>
-    );
+    )
 }

apps/client/src/widgets/type_widgets/helpers/SplitEditor.css

@@ -15,6 +15,8 @@
 .note-detail-split .note-detail-split-editor {
     width: 100%;
     flex-grow: 1;
+    min-width: 0;
+    min-height: 0;
 }
 
 .note-detail-split .note-detail-split-editor .note-detail-code {
@@ -30,6 +32,7 @@
     margin: 5px;
     white-space: pre-wrap;
     font-size: 0.85em;
+    overflow: auto;
 }
 
 .note-detail-split .note-detail-split-preview {

apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx

@@ -1,15 +1,13 @@
-import { RefObject } from "preact";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
-import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
-import svgPanZoom from "svg-pan-zoom";
-
 import { t } from "../../../services/i18n";
-import server from "../../../services/server";
-import toast from "../../../services/toast";
-import utils from "../../../services/utils";
-import { useElementSize, useTriliumEvent } from "../../react/hooks";
-import { RawHtmlBlock } from "../../react/RawHtml";
 import SplitEditor, { PreviewButton, SplitEditorProps } from "./SplitEditor";
+import { RawHtmlBlock } from "../../react/RawHtml";
+import server from "../../../services/server";
+import svgPanZoom from "svg-pan-zoom";
+import { RefObject } from "preact";
+import { useElementSize, useTriliumEvent } from "../../react/hooks";
+import utils from "../../../services/utils";
+import toast from "../../../services/toast";
 
 interface SvgSplitEditorProps extends Omit<SplitEditorProps, "previewContent"> {
     /**
@@ -119,20 +117,11 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
             onContentChanged={onContentChanged}
             dataSaved={onSave}
             previewContent={(
-                <TransformWrapper>
-                    <TransformComponent
-                        wrapperStyle={{
-                            width: "100%",
-                            height: "100%"
-                        }}
-                    >
-                        <RawHtmlBlock
-                            className="render-container"
-                            containerRef={containerRef}
-                            html={svg}
-                        />
-                    </TransformComponent>
-                </TransformWrapper>
+                <RawHtmlBlock
+                    className="render-container"
+                    containerRef={containerRef}
+                    html={svg}
+                />
             )}
             previewButtons={
                 <>
@@ -155,7 +144,7 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
             }
             {...props}
         />
-    );
+    )
 }
 
 function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg: string | undefined) {
@@ -192,7 +181,7 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
             lastPanZoom.current = {
                 pan: zoomInstance.getPan(),
                 zoom: zoomInstance.getZoom()
-            };
+            }
             zoomRef.current = undefined;
             zoomInstance.destroy();
         };

apps/client/src/widgets/type_widgets/text/EditableText.tsx

@@ -286,7 +286,7 @@ function useWatchdogCrashHandling() {
         const currentState = watchdog.state;
         logInfo(`CKEditor state changed to ${currentState}`);
 
-        if (currentState === "ready") {
+        if (currentState === "ready" && hasCrashed.current) {
             hasCrashed.current = false;
             watchdog.editor?.focus();
         }

apps/client/src/widgets/type_widgets/text/config.ts

@@ -1,15 +1,14 @@
-import { ALLOWED_PROTOCOLS, DISPLAYABLE_LOCALE_IDS, MIME_TYPE_AUTO } from "@triliumnext/commons";
-import { buildExtraCommands, type EditorConfig, getCkLocale, PREMIUM_PLUGINS, TemplateDefinition } from "@triliumnext/ckeditor5";
-import { getHighlightJsNameForMime } from "../../../services/mime_types.js";
-import options from "../../../services/options.js";
-import { ensureMimeTypesForHighlighting, isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
+import { buildExtraCommands, type EditorConfig, getCkLocale, loadPremiumPlugins, TemplateDefinition } from "@triliumnext/ckeditor5";
 import emojiDefinitionsUrl from "@triliumnext/ckeditor5/src/emoji_definitions/en.json?url";
+import { ALLOWED_PROTOCOLS, DISPLAYABLE_LOCALE_IDS, MIME_TYPE_AUTO, normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
+
 import { copyTextWithToast } from "../../../services/clipboard_ext.js";
 import { t } from "../../../services/i18n.js";
 import { getMermaidConfig } from "../../../services/mermaid.js";
+import { default as mimeTypesService, getHighlightJsNameForMime } from "../../../services/mime_types.js";
 import noteAutocompleteService, { type Suggestion } from "../../../services/note_autocomplete.js";
-import mimeTypesService from "../../../services/mime_types.js";
-import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
+import options from "../../../services/options.js";
+import { ensureMimeTypesForHighlighting, isSyntaxHighlightEnabled } from "../../../services/syntax_highlight.js";
 import { buildToolbarConfig } from "./toolbar.js";
 
 export const OPEN_SOURCE_LICENSE_KEY = "GPL";
@@ -36,7 +35,7 @@ export async function buildConfig(opts: BuildEditorOptions): Promise<EditorConfi
             engine: "katex",
             outputType: "span", // or script
             lazyLoad: async () => {
-                (window as any).katex = (await import("../../../services/math.js")).default
+                (window as any).katex = (await import("../../../services/math.js")).default;
             },
             forceOutputType: false, // forces output to use outputType
             enablePreview: true // Enable preview view
@@ -172,7 +171,7 @@ export async function buildConfig(opts: BuildEditorOptions): Promise<EditorConfi
         config.language = {
             ui: (typeof config.language === "string" ? config.language : "en"),
             content: contentLanguage
-        }
+        };
     }
 
     // Mention customisation.
@@ -195,11 +194,9 @@ export async function buildConfig(opts: BuildEditorOptions): Promise<EditorConfi
         };
     }
 
-    // Enable premium plugins.
+    // Enable premium plugins dynamically to avoid eager loading.
     if (hasPremiumLicense) {
-        config.extraPlugins = [
-            ...PREMIUM_PLUGINS
-        ];
+        config.extraPlugins = await loadPremiumPlugins();
     }
 
     return {
@@ -237,7 +234,7 @@ function getLicenseKey() {
 }
 
 function getDisabledPlugins() {
-    let disabledPlugins: string[] = [];
+    const disabledPlugins: string[] = [];
 
     if (options.get("textNoteEmojiCompletionEnabled") !== "true") {
         disabledPlugins.push("EmojiMention");

apps/client/src/widgets/type_widgets/text/snippets.ts

@@ -3,7 +3,6 @@ import froca from "../../../services/froca.js";
 import type LoadResults from "../../../services/load_results.js";
 import search from "../../../services/search.js";
 import type { TemplateDefinition } from "@triliumnext/ckeditor5";
-import appContext from "../../../components/app_context.js";
 import type FNote from "../../../entities/fnote.js";
 
 interface TemplateData {
@@ -21,20 +20,25 @@ const debouncedHandleContentUpdate = debounce(handleContentUpdate, 1000);
  * @returns the list of templates.
  */
 export default async function getTemplates() {
-    // Build the definitions and populate the cache.
-    const snippets = await search.searchForNotes("#textSnippet");
-    const definitions: TemplateDefinition[] = [];
-    for (const snippet of snippets) {
-        const { description } = await invalidateCacheFor(snippet);
+    try {
+        // Build the definitions and populate the cache.
+        const snippets = await search.searchForNotes("#textSnippet");
+        const definitions: TemplateDefinition[] = [];
+        for (const snippet of snippets) {
+            const { description } = await invalidateCacheFor(snippet);
 
-        definitions.push({
-            title: snippet.title,
-            data: () => templateCache.get(snippet.noteId)?.content ?? "",
-            icon: buildIcon(snippet),
-            description
-        });
+            definitions.push({
+                title: snippet.title,
+                data: () => templateCache.get(snippet.noteId)?.content ?? "",
+                icon: buildIcon(snippet),
+                description
+            });
+        }
+        return definitions;
+    } catch (e) {
+        logError("Error while building text snippet templates: ", e);
+        return [];
     }
-    return definitions;
 }
 
 async function invalidateCacheFor(snippet: FNote) {

apps/client/vite.config.mts

@@ -1,24 +1,22 @@
 /// <reference types='vitest' />
-import { join, resolve } from 'path';
-import { defineConfig, type Plugin } from 'vite';
-import { viteStaticCopy } from 'vite-plugin-static-copy'
+import prefresh from '@prefresh/vite';
+import { join } from 'path';
 import webpackStatsPlugin from 'rollup-plugin-webpack-stats';
-import preact from "@preact/preset-vite";
+import { defineConfig } from 'vite';
+import { viteStaticCopy } from 'vite-plugin-static-copy'
 
 const assets = [ "assets", "stylesheets", "fonts", "translations" ];
 
 const isDev = process.env.NODE_ENV === "development";
-let plugins: any = [
-    preact({
-        babel: {
-            compact: !isDev
-        }
-    })
-];
+let plugins: any = [];
 
-if (!isDev) {
+if (isDev) {
+    // Add Prefresh for Preact HMR in development
+    plugins = [
+        prefresh()
+    ];
+} else {
     plugins = [
-        ...plugins,
         viteStaticCopy({
             targets: assets.map((asset) => ({
                 src: `src/${asset}/*`,
@@ -40,9 +38,19 @@ if (!isDev) {
 
 export default defineConfig(() => ({
     root: __dirname,
-    cacheDir: '../../node_modules/.vite/apps/client',
+    cacheDir: '../../.cache/vite',
     base: "",
     plugins,
+    // Use esbuild for JSX transformation (much faster than Babel)
+    esbuild: {
+        jsx: 'automatic',
+        jsxImportSource: 'preact',
+        jsxDev: isDev
+    },
+    css: {
+        transformer: 'lightningcss',
+        devSourcemap: isDev
+    },
     resolve: {
         alias: [
             {
@@ -62,6 +70,13 @@ export default defineConfig(() => ({
             "preact/hooks"
         ]
     },
+    optimizeDeps: {
+        include: [
+            "ckeditor5-premium-features",
+            "ckeditor5",
+            "mathlive"
+        ]
+    },
     build: {
         target: "esnext",
         outDir: './dist',
@@ -70,8 +85,7 @@ export default defineConfig(() => ({
         sourcemap: false,
         rollupOptions: {
             input: {
-                desktop: join(__dirname, "src", "desktop.ts"),
-                mobile: join(__dirname, "src", "mobile.ts"),
+                index: join(__dirname, "src", "index.html"),
                 login: join(__dirname, "src", "login.ts"),
                 setup: join(__dirname, "src", "setup.ts"),
                 set_password: join(__dirname, "src", "set_password.ts"),
@@ -80,11 +94,10 @@ export default defineConfig(() => ({
             },
             output: {
                 entryFileNames: "src/[name].js",
-                chunkFileNames: "src/[name].js",
-                assetFileNames: "src/[name].[ext]",
+                chunkFileNames: "src/[name]-[hash].js",
+                assetFileNames: "src/[name]-[hash].[ext]",
                 manualChunks: {
-                    "ckeditor5": [ "@triliumnext/ckeditor5" ],
-                    "boxicons": [ "../../node_modules/boxicons/css/boxicons.min.css" ]
+                    "ckeditor5": [ "@triliumnext/ckeditor5" ]
                 },
             },
             onwarn(warning, rollupWarn) {

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/desktop",
-  "version": "0.101.1",
+  "version": "0.101.3",
   "description": "Build your personal knowledge base with Trilium Notes",
   "private": true,
   "main": "src/main.ts",
@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "@electron/remote": "2.1.3",
-    "better-sqlite3": "12.5.0",
+    "better-sqlite3": "12.6.0",
     "electron-debug": "4.1.0",
     "electron-dl": "4.0.0",
     "electron-squirrel-startup": "1.0.1",

apps/dump-db/package.json

@@ -4,7 +4,7 @@
   "description": "Standalone tool to dump contents of Trilium document.db file into a directory tree of notes",
   "private": true,
   "dependencies": {
-    "better-sqlite3": "12.5.0",
+    "better-sqlite3": "12.6.0",
     "mime-types": "3.0.2",
     "sanitize-filename": "1.6.3",
     "tsx": "4.21.0",

apps/edit-docs/package.json

@@ -5,7 +5,7 @@
   "description": "Desktop version of Trilium which imports the demo database (presented to new users at start-up) or the user guide and other documentation and saves the modifications for committing.",
   "dependencies": {
     "archiver": "7.0.1",
-    "better-sqlite3": "12.5.0"
+    "better-sqlite3": "12.6.0"
   },
   "devDependencies": {
     "@triliumnext/client": "workspace:*",

apps/server-e2e/playwright.config.ts

@@ -9,36 +9,36 @@ const baseURL = process.env['BASE_URL'] || `http://127.0.0.1:${port}`;
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
-  testDir: "src",
-  reporter: [["list"], ["html", { outputFolder: "test-output" }]],
-  outputDir: "test-output",
-  retries: 3,
+    testDir: "src",
+    reporter: [["list"], ["html", { outputFolder: "test-output" }]],
+    outputDir: "test-output",
+    retries: 3,
 
-  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
-  use: {
-    baseURL,
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
-  },
-
-  /* Run your local dev server before starting the tests */
-  webServer: !process.env.TRILIUM_DOCKER ? {
-    command: 'pnpm start-prod-no-dir',
-    url: baseURL,
-    reuseExistingServer: !process.env.CI,
-    cwd: join(__dirname, "../server"),
-    env: {
-        TRILIUM_DATA_DIR: "spec/db",
-        TRILIUM_PORT: port,
-        TRILIUM_INTEGRATION_TEST: "memory"
+    /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+    use: {
+        baseURL,
+        /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+        trace: 'on-first-retry',
     },
-    timeout: 5 * 60 * 1000
-  } : undefined,
 
-  projects: [
-    {
-      name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
-    }
-  ]
+    /* Run your local dev server before starting the tests */
+    webServer: !process.env.TRILIUM_DOCKER ? {
+        command: 'pnpm start-prod-no-dir',
+        url: baseURL,
+        reuseExistingServer: !process.env.CI,
+        cwd: join(__dirname, "../server"),
+        env: {
+            TRILIUM_DATA_DIR: "spec/db",
+            TRILIUM_PORT: port,
+            TRILIUM_INTEGRATION_TEST: "memory"
+        },
+        timeout: 5 * 60 * 1000
+    } : undefined,
+
+    projects: [
+        {
+            name: "chromium",
+            use: { ...devices["Desktop Chrome"] },
+        }
+    ]
 });

apps/server-e2e/src/layout/tab_bar.spec.ts

@@ -1,4 +1,5 @@
-import { test, expect } from "@playwright/test";
+import { expect,test } from "@playwright/test";
+
 import App from "../support/app";
 
 const NOTE_TITLE = "Trilium Integration Test DB";
@@ -65,21 +66,21 @@ test("Tabs are restored in right order", async ({ page, context }) => {
     // Open three tabs.
     await app.closeAllTabs();
     await app.goToNoteInNewTab("Code notes");
+    await expect(app.getActiveTab()).toContainText("Code notes");
     await app.addNewTab();
     await app.goToNoteInNewTab("Text notes");
+    await expect(app.getActiveTab()).toContainText("Text notes");
     await app.addNewTab();
     await app.goToNoteInNewTab("Mermaid");
+    await expect(app.getActiveTab()).toContainText("Mermaid");
 
     // Select the mid one.
     await app.getTab(1).click();
     await expect(app.noteTreeActiveNote).toContainText("Text notes");
-    await expect(app.getTab(0)).toContainText("Code notes");
-    await expect(app.getTab(1)).toContainText("Text notes");
-    await expect(app.getTab(2)).toContainText("Mermaid");
 
     // Refresh the page and check the order.
     await app.goto( { preserveTabs: true });
-    await expect(app.getTab(0)).toContainText("Code notes", { timeout: 15_000 });
+    await expect(app.getTab(0)).toContainText("Code notes");
     await expect(app.getTab(1)).toContainText("Text notes");
     await expect(app.getTab(2)).toContainText("Mermaid");
 
@@ -128,8 +129,8 @@ test("New tab displays workspaces", async ({ page, context }) => {
 
     const workspaceNotesEl = app.currentNoteSplitContent.locator(".workspace-notes");
     await expect(workspaceNotesEl).toBeVisible();
-    expect(workspaceNotesEl).toContainText("Personal");
-    expect(workspaceNotesEl).toContainText("Work");
+    await expect(workspaceNotesEl).toContainText("Personal");
+    await expect(workspaceNotesEl).toContainText("Work");
     await expect(workspaceNotesEl.locator(".bx.bxs-user")).toBeVisible();
     await expect(workspaceNotesEl.locator(".bx.bx-briefcase-alt")).toBeVisible();
 

apps/server-e2e/src/note_types/pdf.spec.ts

@@ -1,12 +1,12 @@
-import test, { BrowserContext, expect, Page } from "@playwright/test";
+import test, { expect, Page } from "@playwright/test";
 
 import App from "../support/app";
 
 test.beforeEach(async ({ page, context }) => {
-    const app = await setLayout({ page, context }, true);
+    const app = new App(page, context);
+    await app.goto();
     await app.setOption("rightPaneCollapsedItems", "[]");
 });
-test.afterEach(async ({ page, context }) => await setLayout({ page, context }, false));
 
 test("Table of contents works", async ({ page, context }) => {
     const app = new App(page, context);
@@ -73,13 +73,15 @@ test("Attachments listing works", async ({ page, context }) => {
 test("Download original PDF works", async ({ page, context }) => {
     const app = new App(page, context);
     await app.goto();
-    await app.goToNoteInNewTab("Dacia Logan.pdf");
+    await app.goToNoteInNewTab("Layers test.pdf");
     const pdfHelper = new PdfHelper(app);
     await pdfHelper.toBeInitialized();
 
+    const downloadButton = app.currentNoteSplit.locator(".icon-action.bx.bx-download");
+    await expect(downloadButton).toBeVisible();
     const [ download ] = await Promise.all([
         page.waitForEvent("download"),
-        app.currentNoteSplit.locator(".icon-action.bx.bx-download").click()
+        downloadButton.click()
     ]);
     expect(download).toBeDefined();
 });
@@ -105,13 +107,6 @@ test("Layers listing works", async ({ page, context }) => {
     await expect(layersList.locator(".pdf-layer-item")).toHaveCount(0);
 });
 
-async function setLayout({ page, context}: { page: Page; context: BrowserContext }, newLayout: boolean) {
-    const app = new App(page, context);
-    await app.goto();
-    await app.setOption("newLayout", newLayout ? "true" : "false");
-    return app;
-}
-
 class PdfHelper {
     private contentFrame: ReturnType<Page["frameLocator"]>;
 
@@ -125,5 +120,6 @@ class PdfHelper {
 
     async toBeInitialized() {
         await expect(this.contentFrame.locator("#pageNumber")).toBeVisible();
+        await expect(this.contentFrame.locator(".page")).toBeVisible();
     }
 }

apps/server-e2e/src/note_types/text.spec.ts

@@ -1,4 +1,5 @@
-import { test, expect, Page } from "@playwright/test";
+import { expect, test } from "@playwright/test";
+
 import App from "../support/app";
 
 test("Table of contents is displayed", async ({ page, context }) => {
@@ -8,7 +9,7 @@ test("Table of contents is displayed", async ({ page, context }) => {
     await app.goToNoteInNewTab("Table of contents");
 
     await expect(app.sidebar).toContainText("Table of Contents");
-    const rootList = app.sidebar.locator(".toc-widget > span > ol");
+    const rootList = app.sidebar.locator(".toc > ol");
 
     // Heading 1.1
     //  Heading 1.1
@@ -42,7 +43,7 @@ test("Highlights list is displayed", async ({ page, context }) => {
     await app.closeAllTabs();
     await app.goToNoteInNewTab("Highlights list");
 
-    await expect(app.sidebar).toContainText("Highlights List");
+    await expect(app.sidebar).toContainText("10 highlights");
     const rootList = app.sidebar.locator(".highlights-list ol");
     let index = 0;
     for (const highlightedEl of ["Bold 1", "Italic 1", "Underline 1", "Colored text 1", "Background text 1", "Bold 2", "Italic 2", "Underline 2", "Colored text 2", "Background text 2"]) {
@@ -63,7 +64,9 @@ test("Displays math popup", async ({ page, context }) => {
     const mathForm = page.locator(".ck-math-form");
     await expect(mathForm).toBeVisible();
 
-    const input = mathForm.locator(".ck-input").first();
+    const input = mathForm.locator(".ck-latex-textarea").first();
+    await expect(input).toBeVisible();
+    await expect(input).toBeEnabled();
     await input.click();
     await input.fill("e=mc^2");
     await page.waitForTimeout(100);

apps/server-e2e/src/support/app.ts

@@ -37,7 +37,7 @@ export default class App {
         this.noteTreeHoistedNote = this.noteTree.locator(".fancytree-node", { has: page.locator(".unhoist-button") });
         this.launcherBar = page.locator("#launcher-container");
         this.currentNoteSplit = page.locator(".note-split:not(.hidden-ext)");
-        this.currentNoteSplitTitle = this.currentNoteSplit.locator(".note-title");
+        this.currentNoteSplitTitle = this.currentNoteSplit.locator(".note-title").first();
         this.currentNoteSplitContent = this.currentNoteSplit.locator(".note-detail-printable.visible");
         this.sidebar = page.locator("#right-pane");
     }
@@ -68,13 +68,15 @@ export default class App {
 
     async goToNoteInNewTab(noteTitle: string) {
         const autocomplete = this.currentNoteSplit.locator(".note-autocomplete");
+        await expect(autocomplete).toBeVisible();
         await autocomplete.fill(noteTitle);
 
         const resultsSelector = this.currentNoteSplit.locator(".note-detail-empty-results");
         await expect(resultsSelector).toContainText(noteTitle);
-        await resultsSelector.locator(".aa-suggestion", { hasText: noteTitle })
-            .nth(1) // Select the second one, as the first one is "Create a new note"
-            .click();
+        const suggestionSelector = resultsSelector.locator(".aa-suggestion")
+            .nth(1); // Select the second one (best candidate), as the first one is "Create a new note"
+        await expect(suggestionSelector).toContainText(noteTitle);
+        suggestionSelector.click();
     }
 
     async goToSettings() {

apps/server/docker/package.json

@@ -1,5 +1,5 @@
 {
     "dependencies": {
-        "better-sqlite3": "12.5.0"
+        "better-sqlite3": "12.6.0"
     }
 }

apps/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/server",
-  "version": "0.101.1",
+  "version": "0.101.3",
   "description": "The server-side component of TriliumNext, which exposes the client via the web, allows for sync and provides a REST API for both internal and external use.",
   "private": true,
   "main": "./src/main.ts",
@@ -29,17 +29,16 @@
     "proxy-nginx-subdir": "docker run --name trilium-nginx-subdir --rm --network=host -v ./docker/nginx.conf:/etc/nginx/conf.d/default.conf:ro nginx:latest"
   },
   "dependencies": {
-    "better-sqlite3": "12.5.0",
+    "better-sqlite3": "12.6.0",
     "html-to-text": "9.0.5",
-    "node-html-parser": "7.0.1",
+    "node-html-parser": "7.0.2",
     "sucrase": "3.35.1"
   },
   "devDependencies": {
     "@anthropic-ai/sdk": "0.71.2",
-    "@braintree/sanitize-url": "7.1.1",
     "@electron/remote": "2.1.3",
-    "@preact/preset-vite": "2.10.2",
     "@triliumnext/commons": "workspace:*",
+    "@triliumnext/core": "workspace:*",
     "@triliumnext/express-partial-content": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/turndown-plugin-gfm": "workspace:*",
@@ -50,16 +49,13 @@
     "@types/cookie-parser": "1.4.10",
     "@types/debounce": "1.2.4",
     "@types/ejs": "3.1.5",
-    "@types/escape-html": "1.0.4",
     "@types/express-http-proxy": "1.6.7",
     "@types/express-session": "1.18.2",
     "@types/fs-extra": "11.0.4",
     "@types/html": "1.0.4",
     "@types/ini": "4.1.1",
-    "@types/mime-types": "3.0.1",
     "@types/multer": "2.0.0",
     "@types/safe-compare": "1.1.2",
-    "@types/sanitize-html": "2.16.0",
     "@types/sax": "1.2.7",
     "@types/serve-favicon": "2.5.7",
     "@types/serve-static": "2.2.0",
@@ -87,10 +83,9 @@
     "electron": "39.2.7",
     "electron-debug": "4.1.0",
     "electron-window-state": "5.0.3",
-    "escape-html": "1.0.3",
     "express": "5.2.1",
     "express-http-proxy": "2.1.2",
-    "express-openid-connect": "2.19.3",
+    "express-openid-connect": "2.19.4",
     "express-rate-limit": "8.2.1",
     "express-session": "1.18.2",
     "file-uri-to-path": "2.0.0",
@@ -109,26 +104,22 @@
     "jimp": "1.6.0",
     "lorem-ipsum": "2.0.8",
     "marked": "17.0.1",
-    "mime-types": "3.0.2",
     "multer": "2.0.2",
     "normalize-strings": "1.1.1",
     "ollama": "0.6.3",
-    "openai": "6.15.0",
+    "openai": "6.16.0",
     "rand-token": "1.0.1",
     "safe-compare": "1.1.4",
-    "sanitize-filename": "1.6.3",
-    "sanitize-html": "2.17.0",
     "sax": "1.4.3",
     "serve-favicon": "2.5.1",
     "stream-throttle": "0.1.3",
     "strip-bom": "5.0.0",
     "striptags": "3.2.0",
-    "supertest": "7.1.4",
+    "supertest": "7.2.2",
     "swagger-jsdoc": "6.2.8",
     "time2fa": "1.4.2",
     "tmp": "0.2.5",
     "turndown": "7.2.2",
-    "unescape": "1.0.1",
     "vite": "7.3.0",
     "ws": "8.18.3",
     "xml2js": "0.6.2",

apps/server/src/anonymize.ts

@@ -1,6 +1,6 @@
 import anonymizationService from "./services/anonymization.js";
 import sqlInit from "./services/sql_init.js";
-await import("./becca/entity_constructor.js");
+await import("@triliumnext/core");
 
 sqlInit.dbReady.then(async () => {
     try {

apps/server/src/app.ts

@@ -1,25 +1,25 @@
+import("@triliumnext/core");
+
+import { erase } from "@triliumnext/core";
+import compression from "compression";
+import cookieParser from "cookie-parser";
 import express from "express";
+import { auth } from "express-openid-connect";
+import helmet from "helmet";
+import { t } from "i18next";
 import path from "path";
 import favicon from "serve-favicon";
-import cookieParser from "cookie-parser";
-import helmet from "helmet";
-import compression from "compression";
-import config from "./services/config.js";
-import utils, { getResourceDir, isDev } from "./services/utils.js";
+
 import assets from "./routes/assets.js";
-import routes from "./routes/routes.js";
 import custom from "./routes/custom.js";
 import error_handlers from "./routes/error_handlers.js";
-import { startScheduledCleanup } from "./services/erase.js";
-import sql_init from "./services/sql_init.js";
-import { auth } from "express-openid-connect";
-import openID from "./services/open_id.js";
-import { t } from "i18next";
-import eventService from "./services/events.js";
+import routes from "./routes/routes.js";
+import config from "./services/config.js";
 import log from "./services/log.js";
-import "./services/handlers.js";
-import "./becca/becca_loader.js";
+import openID from "./services/open_id.js";
 import { RESOURCE_DIR } from "./services/resource_dir.js";
+import sql_init from "./services/sql_init.js";
+import utils, { getResourceDir, isDev } from "./services/utils.js";
 
 export default async function buildApp() {
     const app = express();
@@ -107,7 +107,7 @@ export default async function buildApp() {
 
     await import("./services/scheduler.js");
 
-    startScheduledCleanup();
+    erase.startScheduledCleanup();
 
     if (utils.isElectron) {
         (await import("@electron/remote/main/index.js")).initialize();

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Basic Concepts and Features/UI Elements/Note Tree/Hiding the subtree.html

@@ -0,0 +1,95 @@
+<figure class="image image-style-align-right">
+  <img style="aspect-ratio:328/45;" src="1_Hiding the subtree_image.png"
+  width="328" height="45">
+  <figcaption>An example of a collection with a relatively large number of children
+    that are hidden from the tree.</figcaption>
+</figure>
+<p>The tree works well when the notes are structured in a hierarchy so that
+  the number of items stays small. When a note has a large number of notes
+  (in the order of thousands or tens of thousands), two problems arise:</p>
+<ul>
+  <li data-list-item-id="e536c86d371061c12f76f7de2a0af67be">Navigating between notes becomes cumbersome and the tree itself gets cluttered
+    with a large amount of notes.</li>
+  <li data-list-item-id="ecc37d6c4d0430254e98615842b94429d">The large amount of notes can slow down the application considerably.</li>
+</ul>
+<p>Since v0.102.0, Trilium allows the tree to hide the child notes of particular
+  notes. This works for both&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/_help_GTwFsgaA0lCt">Collections</a>&nbsp;and
+  normal notes.</p>
+<h2>Interaction</h2>
+<p>When the subtree of a note is hidden, there are a few subtle changes:</p>
+<ul>
+  <li data-list-item-id="ec1ce3d2030f36e4847f3bbd9468d28e3">To indicate that the subtree is hidden, the note will not have an expand
+    button and it will display the number of children to the right.</li>
+  <li
+  data-list-item-id="ea99d38ea6c8a816cf2ab7a7e73cfcac5">It's not possible to add a new note directly from the tree.
+    <ul>
+      <li data-list-item-id="ef0132a903a11e9f667b2b2f4c4fff17a">For&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/_help_GTwFsgaA0lCt">Collections</a>,
+        it's best to use the built-in mechanism to create notes (for example by
+        creating a new point on a geo-map, or by adding a new row in a table).</li>
+      <li
+      data-list-item-id="e7db44100046c8c79bf79841285aacd1f">For normal notes, it's still possible to create children via other means
+        such as using the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/iPIMuisry3hd/QEAPj01N5f7w/_help_hrZ1D00cLbal">Internal (reference) links</a>&nbsp;system.</li>
+    </ul>
+    </li>
+    <li data-list-item-id="eb049f46cf91db6de113af1099a14944e">Notes can be dragged from outside the note, case in which they will be
+      cloned into it.
+      <ul>
+        <li data-list-item-id="e96d9b7a0755e9c054bab5db4fc1aa25e">Instead of switching to the child notes that were copied, the parent note
+          is highlighted instead.</li>
+        <li data-list-item-id="ec667e3f94a0cfa3fa41ce38d3ed6ee95">A notification will indicate this behavior.</li>
+      </ul>
+    </li>
+    <li data-list-item-id="eb64670dd7ace6764c18602b440f88049">Similarly, features such as cut/copy and then paste into the note will
+      also work.</li>
+</ul>
+<h2>Spotlighting</h2>
+<figure class="image image-style-align-right">
+  <img style="aspect-ratio:322/83;" src="Hiding the subtree_image.png"
+  width="322" height="83">
+</figure>
+<p>Even if the subtree of a note is hidden, if a child note manages to become
+  active, it will still appear inside the tree in a special state called <em>spotlighted</em>.</p>
+<p>During this state, the note remains under its normal hierarchy, so that
+  its easy to tell its location. In addition, this means that:</p>
+<ul>
+  <li data-list-item-id="e2490369eb3d99ca694dba23a3410abef">The note position is clearly visible when using the&nbsp;<a class="reference-link"
+    href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/wArbEsdSae6g/_help_eIg8jdvaoNNd">Search</a>.</li>
+  <li
+  data-list-item-id="e041d3807f80dc77b022540b0551b8376">The note can still be operated on from the tree, such as adding a&nbsp;
+    <a
+    class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/BFs8mudNFgCS/IakOLONlIfGI/_help_TBwsyfadTA18">Branch prefix</a>&nbsp;or moving it outside the collection.</li>
+</ul>
+<p>The note appears in italics to indicate its temporary display. When switching
+  to another note, the spotlighted note will disappear.</p>
+<aside class="admonition note">
+  <p>Only one note can be highlighted at the time. When working with multiple
+    notes such as dragging them into the collection, no note will be spotlighted.
+    This is intentional to avoid displaying a partial state of the subtree.</p>
+</aside>
+<h2>Working with collections</h2>
+<p>By default, some of the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/_help_GTwFsgaA0lCt">Collections</a>&nbsp;will
+  automatically hide their child notes, for example the&nbsp;<a class="reference-link"
+  href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_CtBQqbwXDx1w">Kanban Board</a>&nbsp;or
+  the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_2FvYrpmOXm29">Table</a>.</p>
+<p>The reasoning behind this is that collections are generally opaque to
+  the rest of the notes and they can generate a large amount of sub-notes
+  since they intentionally lack structure (in order to allow easy swapping
+  between views).</p>
+<p>Some types of collections have the child notes intentionally shown, for
+  example the legacy ones (Grid and List), but also the&nbsp;<a class="reference-link"
+  href="#root/pOsGYCXsbNQG/GTwFsgaA0lCt/_help_zP3PMqaG71Ct">Presentation</a>&nbsp;which
+  requires the tree structure in order to organize and edit the slides.</p>
+<p>To toggle this behavior:</p>
+<ul>
+  <li data-list-item-id="e6d8c8c98802d70f13df626ea1f062122">In the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_IjZS7iK5EXtb">New Layout</a>,
+    press the Options button underneath the title and uncheck <em>Hide child notes in tree</em>.</li>
+  <li
+  data-list-item-id="e2398432e127c54239d679a6b13d8390b">Right click the collection note in the&nbsp;<a class="reference-link"
+    href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and
+    select <em>Advanced</em> → <em>Show subtree</em>.</li>
+</ul>
+<h2>Working with normal notes</h2>
+<p>It's possible to hide the subtree for normal notes as well, not just collections.
+  To do so, right click the note in the&nbsp;<a class="reference-link" href="#root/pOsGYCXsbNQG/gh7bpGYxajRS/Vc8PjrjAGuOp/_help_oPVyFC7WL2Lp">Note Tree</a>&nbsp;and
+  select <em>Advanced</em> → <em>Hide subtree.</em>
+</p>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/FAQ.html

@@ -47,7 +47,7 @@
   href="#root/_help_tAassRL4RSQL">data directory</a>in the <code spellcheck="false">TRILIUM_DATA_DIR</code> environment
     variable and separate port on <code spellcheck="false">TRILIUM_PORT</code> environment
     variable. How to do that depends on the platform, in Unix-based systems
-    you can achieve that by running command such as this:</p><pre><code class="language-text-x-trilium-auto">TRILIUM_DATA_DIR=/home/me/path/to/data/dir TRILIUM_PORT=12345 trilium </code></pre>
+    you can achieve that by running command such as this:</p><pre><code class="language-text-x-sh">TRILIUM_DATA_DIR=/home/me/path/to/data/dir TRILIUM_PORT=12345 trilium </code></pre>
 <p>You can save this command into a <code spellcheck="false">.sh</code> script
   file or make an alias. Do this similarly for a second instance with different
   data directory and port.</p>

apps/server/src/assets/translations/en/server.json

@@ -220,7 +220,6 @@
     "password-confirmation": "Password confirmation",
     "button": "Set password"
   },
-  "javascript-required": "Trilium requires JavaScript to be enabled.",
   "setup": {
     "heading": "Trilium Notes setup",
     "new-document": "I'm a new user, and I want to create a new Trilium document for my notes",

apps/server/src/assets/translations/hi/server.json

@@ -10,6 +10,18 @@
     "creating-and-moving-notes": "नोट्स बनाना और स्थानांतरित करना",
     "move-note-up": "नोट को ऊपर ले जाएं",
     "move-note-down": "नोट को नीचे ले जाएं",
-    "note-clipboard": "नोट क्लिपबोर्ड"
+    "note-clipboard": "नोट क्लिपबोर्ड",
+    "duplicate-subtree": "डुप्लिकेट सबट्री",
+    "open-new-tab": "नया टैब खोलें",
+    "second-tab": "लिस्ट में दूसरी टैब एक्टिवेट करें",
+    "third-tab": "लिस्ट में तीसरी टैब एक्टिवेट करें",
+    "fourth-tab": "लिस्ट में चौथी टैब एक्टिवेट करें",
+    "sixth-tab": "लिस्ट में छठी टैब एक्टिवेट करें",
+    "seventh-tab": "लिस्ट में सातवीं टैब एक्टिवेट करें",
+    "eight-tab": "लिस्ट में आठवीं टैब एक्टिवेट करें",
+    "ninth-tab": "लिस्ट में नौवीं टैब एक्टिवेट करें",
+    "last-tab": "लिस्ट में आखिरी टैब एक्टिवेट करें",
+    "show-sql-console": "\"SQL कंसोल\" पेज खोलें",
+    "show-backend-log": "\"बैकेंड लॉग\" पेज खोलें"
   }
 }

apps/server/src/assets/views/desktop.ejs

@@ -1,60 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="favicon.ico">
-    <meta name="mobile-web-app-capable" content="yes">
-	  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-	  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />
-    <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
-    <title>Trilium Notes</title>
-    <style id="trilium-icon-packs">
-      <%- iconPackCss %>
-    </style>
-    <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
-</head>
-<body
-  id="trilium-app"
-  class="desktop heading-style-<%= headingStyle %> layout-<%= layoutOrientation %> platform-<%= platform %> <%= isElectron ? 'electron' : '' %> <%= hasNativeTitleBar ? 'native-titlebar' : '' %> <%= hasBackgroundEffects ? 'background-effects' : '' %>"
-  lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>"
->
-<noscript><%= t("javascript-required") %></noscript>
-
-<script>
-    // hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide <noscript>
-    document.getElementsByTagName("body")[0].style.display = "none";
-</script>
-
-<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container" style="display: none"></div>
-
-<%- include("./partials/windowGlobal.ejs", locals) %>
-
-<!-- Required for match the PWA's top bar color with the theme -->
-<!-- This works even when the user directly changes --root-background in CSS -->
-<div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>
-
-<!-- Required for correct loading of scripts in Electron -->
-<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
-
-<link href="<%= assetPath %>/stylesheets/ckeditor-theme.css" rel="stylesheet">
-<link href="api/fonts" rel="stylesheet">
-<link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet">
-
-<% if (themeCssUrl) { %>
-<link href="<%= themeCssUrl %>" rel="stylesheet">
-<% } %>
-
-<% if (themeUseNextAsBase === "next") { %>
-  <link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet">
-<% } else if (themeUseNextAsBase === "next-dark") { %>
-  <link href="<%= assetPath %>/stylesheets/theme-next-dark.css" rel="stylesheet">
-<% } else if (themeUseNextAsBase === "next-light") { %>
-  <link href="<%= assetPath %>/stylesheets/theme-next-light.css" rel="stylesheet">
-<% } %>
-
-<link href="<%= assetPath %>/stylesheets/style.css" rel="stylesheet">
-
-<script src="<%= appPath %>/desktop.js" crossorigin type="module"></script>
-
-</body>
-</html>

apps/server/src/assets/views/mobile.ejs

@@ -1,137 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="utf-8">
-    <link rel="shortcut icon" href="favicon.ico">
-    <meta name="mobile-web-app-capable" content="yes">
-	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, interactive-widget=resizes-content" />
-    <meta name="theme-color" content="#fff">
-    <title>Trilium Notes</title>
-    <link rel="manifest" crossorigin="use-credentials" href="manifest.webmanifest">
-
-    <style>
-        .lds-roller {
-            display: inline-block;
-            position: relative;
-            width: 80px;
-            height: 80px;
-        }
-        .lds-roller div {
-            animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-            transform-origin: 40px 40px;
-        }
-        .lds-roller div:after {
-            content: " ";
-            display: block;
-            position: absolute;
-            width: 7px;
-            height: 7px;
-            border-radius: 50%;
-            background: #000;
-            margin: -4px 0 0 -4px;
-        }
-        .lds-roller div:nth-child(1) {
-            animation-delay: -0.036s;
-        }
-        .lds-roller div:nth-child(1):after {
-            top: 63px;
-            left: 63px;
-        }
-        .lds-roller div:nth-child(2) {
-            animation-delay: -0.072s;
-        }
-        .lds-roller div:nth-child(2):after {
-            top: 68px;
-            left: 56px;
-        }
-        .lds-roller div:nth-child(3) {
-            animation-delay: -0.108s;
-        }
-        .lds-roller div:nth-child(3):after {
-            top: 71px;
-            left: 48px;
-        }
-        .lds-roller div:nth-child(4) {
-            animation-delay: -0.144s;
-        }
-        .lds-roller div:nth-child(4):after {
-            top: 72px;
-            left: 40px;
-        }
-        .lds-roller div:nth-child(5) {
-            animation-delay: -0.18s;
-        }
-        .lds-roller div:nth-child(5):after {
-            top: 71px;
-            left: 32px;
-        }
-        .lds-roller div:nth-child(6) {
-            animation-delay: -0.216s;
-        }
-        .lds-roller div:nth-child(6):after {
-            top: 68px;
-            left: 24px;
-        }
-        .lds-roller div:nth-child(7) {
-            animation-delay: -0.252s;
-        }
-        .lds-roller div:nth-child(7):after {
-            top: 63px;
-            left: 17px;
-        }
-        .lds-roller div:nth-child(8) {
-            animation-delay: -0.288s;
-        }
-        .lds-roller div:nth-child(8):after {
-            top: 56px;
-            left: 12px;
-        }
-        @keyframes lds-roller {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
-                transform: rotate(360deg);
-            }
-        }
-    </style>
-
-    <style id="trilium-icon-packs">
-      <%- iconPackCss %>
-    </style>
-    <script src="<%= appPath %>/runtime.js" crossorigin type="module"></script>
-</head>
-<body
-    class="mobile heading-style-<%= headingStyle %>"
-    lang="<%= currentLocale.id %>" dir="<%= currentLocale.rtl ? 'rtl' : 'ltr' %>"
->
-<noscript><%= t("javascript-required") %></noscript>
-
-<div id="context-menu-cover"></div>
-
-<div class="dropdown-menu dropdown-menu-sm" id="context-menu-container"></div>
-
-<%- include("./partials/windowGlobal.ejs", locals) %>
-
-<script src="<%= appPath %>/mobile.js" crossorigin type="module"></script>
-
-<link href="api/fonts" rel="stylesheet">
-<link href="<%= assetPath %>/stylesheets/ckeditor-theme.css" rel="stylesheet">
-<link href="<%= assetPath %>/stylesheets/theme-light.css" rel="stylesheet">
-<% if (themeCssUrl) { %>
-    <link href="<%= themeCssUrl %>" rel="stylesheet">
-<% } %>
-
-<% if (themeUseNextAsBase === "next") { %>
-  <link href="<%= assetPath %>/stylesheets/theme-next.css" rel="stylesheet">
-<% } else if (themeUseNextAsBase === "next-dark") { %>
-  <link href="<%= assetPath %>/stylesheets/theme-next-dark.css" rel="stylesheet">
-<% } else if (themeUseNextAsBase === "next-light") { %>
-  <link href="<%= assetPath %>/stylesheets/theme-next-light.css" rel="stylesheet">
-<% } %>
-
-<link href="<%= assetPath %>/stylesheets/style.css" rel="stylesheet">
-
-</body>
-</html>

apps/server/src/assets/views/partials/windowGlobal.ejs

@@ -1,25 +0,0 @@
-<script type="text/javascript">
-    global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
-
-    window.glob = {
-        device: "<%= device %>",
-        baseApiUrl: "<%= baseApiUrl %>",
-        activeDialog: null,
-        maxEntityChangeIdAtLoad: <%= maxEntityChangeIdAtLoad %>,
-        maxEntityChangeSyncIdAtLoad: <%= maxEntityChangeSyncIdAtLoad %>,
-        instanceName: '<%= instanceName %>',
-        csrfToken: '<%= csrfToken %>',
-        isDev: <%= isDev %>,
-        appCssNoteIds: <%- JSON.stringify(appCssNoteIds) %>,
-        isMainWindow: <%= isMainWindow %>,
-        isProtectedSessionAvailable: <%= isProtectedSessionAvailable %>,
-        triliumVersion: "<%= triliumVersion %>",
-        assetPath: "<%= assetPath %>",
-        appPath: "<%= appPath %>",
-        platform: "<%= platform %>",
-        hasNativeTitleBar: <%= hasNativeTitleBar %>,
-        TRILIUM_SAFE_MODE: <%= !!process.env.TRILIUM_SAFE_MODE %>,
-        isRtl: <%= !!currentLocale.rtl %>,
-        iconRegistry: <%- JSON.stringify(iconRegistry) %>
-    };
-</script>