chore(core): port bulk actions route

; Conflicts:
;	apps/client/src/index.ts
;	apps/client/src/widgets/sql_table_schemas.tsx
;	apps/server/package.json
;	apps/server/src/app.ts
;	apps/server/src/becca/entities/bnote.ts
;	apps/server/src/services/import/single.ts
;	apps/server/src/services/import/zip.ts
;	apps/server/src/services/note-interface.ts
;	apps/server/src/services/notes.ts
;	apps/server/src/services/tree.ts
;	apps/server/src/services/utils.ts
;	apps/server/src/share/shaca/entities/snote.ts
;	pnpm-lock.yaml
;	scripts/update-nightly-version.ts
;	scripts/update-version.ts

.github/workflows/deploy-app.yml

@@ -0,0 +1,67 @@
+name: Deploy Standalone App
+
+on:
+  # Trigger on push to main branch
+  push:
+    branches:
+      - standalone
+    # Only run when app files change
+    paths:
+      - 'apps/client/**'
+      - 'apps/client-standalone/**'
+      - 'packages/trilium-core/**'
+      - '.github/workflows/deploy-app.yml'
+
+  # 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/**'
+      - '.github/workflows/deploy-app.yml'
+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/dev.yml

@@ -1,9 +1,9 @@
 name: Dev
 on:
   push:
-    branches: [ main ]
+    branches: [ main, standalone ]
   pull_request:
-    branches: [ main ]
+    branches: [ main, standalone ]
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}

.nvmrc

@@ -1 +1 @@
-24.13.1
+24.13.0

apps/build-docs/package.json

@@ -9,14 +9,14 @@
   "keywords": [],
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.29.3",
+  "packageManager": "pnpm@10.29.1",
   "devDependencies": {
-    "@redocly/cli": "2.18.1",
+    "@redocly/cli": "2.15.1",
     "archiver": "7.0.1",
     "fs-extra": "11.3.3",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "typedoc": "0.28.17",
+    "typedoc": "0.28.16",
     "typedoc-plugin-missing-exports": "4.1.2"
   }
 }

apps/client-standalone/.env

@@ -0,0 +1,4 @@
+# The development license key for premium CKEditor features.
+# Note: This key must only be used for the Trilium Notes project.
+VITE_CKEDITOR_KEY=eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3ODcyNzA0MDAsImp0aSI6IjkyMWE1MWNlLTliNDMtNGRlMC1iOTQwLTc5ZjM2MDBkYjg1NyIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOiJ0cmlsaXVtIiwiZmVhdHVyZXMiOlsiVFJJTElVTSJdLCJ2YyI6ImU4YzRhMjBkIn0.hny77p-U4-jTkoqbwPytrEar5ylGCWBN7Ez3SlB8i6_mJCBIeCSTOlVQk_JMiOEq3AGykUMHzWXzjdMFwgniOw
+VITE_CKEDITOR_ENABLE_INSPECTOR=false

apps/client-standalone/.env.production

@@ -0,0 +1 @@
+VITE_CKEDITOR_ENABLE_INSPECTOR=false

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.2",
+    "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": "assets/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,31 @@
+<!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>
+
+        <div id="context-menu-cover"></div>
+        <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,101 @@
+/**
+ * Browser route definitions.
+ * This integrates with the shared route builder from @triliumnext/core.
+ */
+
+import { BootstrapDefinition } from '@triliumnext/commons';
+import { getSharedBootstrapItems, getSql, 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, transactional: boolean) {
+    return (req: BrowserRequest) => {
+        // Create an Express-like request object
+        const expressLikeReq = {
+            params: req.params,
+            query: req.query,
+            body: req.body
+        };
+        if (transactional) {
+            return getSql().transactional(() => handler(expressLikeReq));
+        }
+        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, true));
+    };
+}
+
+/**
+ * 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: false,
+
+        // 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,77 @@
+import { ExecutionContext } from "@triliumnext/core";
+
+/**
+ * Browser execution context implementation.
+ * 
+ * Handles per-request context isolation with support for fire-and-forget async operations
+ * using a context stack and grace-period cleanup to allow unawaited promises to complete.
+ */
+export default class BrowserExecutionContext implements ExecutionContext {
+    private contextStack: Map<string, any>[] = [];
+    private cleanupTimers = new WeakMap<Map<string, any>, ReturnType<typeof setTimeout>>();
+    private readonly CLEANUP_GRACE_PERIOD = 1000; // 1 second for fire-and-forget operations
+
+    private getCurrentContext(): Map<string, any> {
+        if (this.contextStack.length === 0) {
+            throw new Error("ExecutionContext not initialized");
+        }
+        return this.contextStack[this.contextStack.length - 1];
+    }
+
+    get<T = any>(key: string): T {
+        return this.getCurrentContext().get(key);
+    }
+
+    set(key: string, value: any): void {
+        this.getCurrentContext().set(key, value);
+    }
+
+    reset(): void {
+        this.contextStack = [];
+    }
+
+    init<T>(callback: () => T): T {
+        const context = new Map<string, any>();
+        this.contextStack.push(context);
+
+        // Cancel any pending cleanup timer for this context
+        const existingTimer = this.cleanupTimers.get(context);
+        if (existingTimer) {
+            clearTimeout(existingTimer);
+            this.cleanupTimers.delete(context);
+        }
+
+        try {
+            const result = callback();
+
+            // If the result is a Promise
+            if (result && typeof result === 'object' && 'then' in result && 'catch' in result) {
+                const promise = result as unknown as Promise<any>;
+                return promise.finally(() => {
+                    this.scheduleContextCleanup(context);
+                }) as T;
+            } else {
+                // For synchronous results, schedule delayed cleanup to allow fire-and-forget operations
+                this.scheduleContextCleanup(context);
+                return result;
+            }
+        } catch (error) {
+            // Always clean up on error with grace period
+            this.scheduleContextCleanup(context);
+            throw error;
+        }
+    }
+
+    private scheduleContextCleanup(context: Map<string, any>): void {
+        const timer = setTimeout(() => {
+            // Remove from stack if still present
+            const index = this.contextStack.indexOf(context);
+            if (index !== -1) {
+                this.contextStack.splice(index, 1);
+            }
+            this.cleanupTimers.delete(context);
+        }, this.CLEANUP_GRACE_PERIOD);
+
+        this.cleanupTimers.set(context, timer);
+    }
+}

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,90 @@
+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);
+    }
+
+    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 = [];
+    }
+}

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

@@ -0,0 +1,618 @@
+import { type BindableValue, default as sqlite3InitModule } from "@sqlite.org/sqlite-wasm";
+import type { DatabaseProvider, RunResult, Statement, Transaction } from "@triliumnext/core";
+
+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,
+        private sqlite3: Sqlite3Module
+    ) {}
+
+    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();
+            // Get the last insert row ID using the C API
+            const lastInsertRowid = this.db.pointer ? this.sqlite3.capi.sqlite3_last_insert_rowid(this.db.pointer) : 0;
+            this.stmt.reset();
+            return {
+                changes,
+                lastInsertRowid: typeof lastInsertRowid === "bigint" ? Number(lastInsertRowid) : lastInsertRowid
+            };
+        } 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.sqlite3!);
+        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 type i18next from "i18next";
+import I18NextHttpBackend from "i18next-http-backend";
+
+export default async function translationProvider(i18nextInstance: typeof i18next, locale: LOCALE_IDS) {
+    await i18nextInstance.use(I18NextHttpBackend).init({
+        lng: locale,
+        fallbackLng: "en",
+        ns: "server",
+        backend: {
+            loadPath: `${import.meta.resolve("../server-assets/translations")}/{{lng}}/{{ns}}.json`
+        },
+        returnEmptyString: false,
+        debug: true
+    });
+}

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

@@ -0,0 +1,88 @@
+import LocalServerWorker from "./local-server-worker?worker";
+let localWorker: Worker | null = null;
+const pending = new Map();
+
+export function startLocalServerWorker() {
+    if (localWorker) return localWorker;
+    localWorker = new LocalServerWorker();
+
+    // Handle worker errors during initialization
+    localWorker.onerror = (event) => {
+        console.error("[LocalBridge] Worker error:", event);
+        // Reject all pending requests
+        for (const [, 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 [, 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,207 @@
+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");
+            await 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;
+}
+
+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,84 @@
+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
+    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 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 /
+    envDir: __dirname,  // Load .env files from client-standalone directory, not src/
+    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'),
+            },
+            output: {
+                entryFileNames: (chunkInfo) => {
+                    // Service worker and other workers should be at root level
+                    if (chunkInfo.name === 'sw') {
+                        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

@@ -27,7 +27,7 @@
     "@mermaid-js/layout-elk": "0.2.0",
     "@mind-elixir/node-menu": "5.0.1",
     "@popperjs/core": "2.11.8",
-    "@preact/signals": "2.8.0",
+    "@preact/signals": "2.6.2",
     "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
     "@triliumnext/commons": "workspace:*",
@@ -44,7 +44,7 @@
     "draggabilly": "3.0.0",
     "force-graph": "1.51.1",
     "globals": "17.3.0",
-    "i18next": "25.8.7",
+    "i18next": "25.8.0",
     "i18next-http-backend": "3.0.2",
     "jquery": "4.0.0",
     "jquery.fancytree": "2.38.5",
@@ -54,14 +54,14 @@
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "17.0.2",
+    "marked": "17.0.1",
     "mermaid": "11.12.2",
     "mind-elixir": "5.8.0",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
     "preact": "10.28.3",
     "react-i18next": "16.5.4",
-    "react-window": "2.2.7",
+    "react-window": "2.2.6",
     "reveal.js": "5.2.1",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
@@ -78,7 +78,7 @@
     "@types/reveal.js": "5.2.2",
     "@types/tabulator-tables": "6.3.1",
     "copy-webpack-plugin": "13.0.1",
-    "happy-dom": "20.6.1",
+    "happy-dom": "20.5.0",
     "lightningcss": "1.31.1",
     "script-loader": "0.7.2",
     "vite-plugin-static-copy": "3.2.0"

apps/client/src/entities/fnote.ts

@@ -700,15 +700,6 @@ export default class FNote {
         return this.hasAttribute(LABEL, name);
     }
 
-    /**
-     * Returns `true` if the note has a label with the given name (same as {@link hasOwnedLabel}), or it has a label with the `disabled:` prefix (for example due to a safe import).
-     * @param name the name of the label to look for.
-     * @returns `true` if the label exists, or its version with the `disabled:` prefix.
-     */
-    hasLabelOrDisabled(name: string) {
-        return this.hasLabel(name) || this.hasLabel(`disabled:${name}`);
-    }
-
     /**
      * @param name - label name
      * @returns true if label exists (including inherited) and does not have "false" value.

apps/client/src/index.ts

@@ -36,10 +36,37 @@ async function setupGlob() {
     window.global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
     window.glob = {
         ...json,
-        activeDialog: null
+        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) {

apps/client/src/layouts/desktop_layout.tsx

@@ -30,6 +30,7 @@ import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
 import InlineTitle from "../widgets/layout/InlineTitle.jsx";
 import NoteBadges from "../widgets/layout/NoteBadges.jsx";
 import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
+import StandaloneWarningBar from "../widgets/layout/StandaloneWarningBar.jsx";
 import StatusBar from "../widgets/layout/StatusBar.jsx";
 import NoteIconWidget from "../widgets/note_icon.jsx";
 import NoteTitleWidget from "../widgets/note_title.jsx";
@@ -186,6 +187,7 @@ export default class DesktopLayout {
                     )
             )
             .optChild(launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
+            .optChild(glob.isStandalone, <StandaloneWarningBar />)
             .child(<CloseZenModeButton />)
 
             // Desktop-specific dialogs.

apps/client/src/layouts/mobile_layout.tsx

@@ -13,6 +13,7 @@ import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
 import InlineTitle from "../widgets/layout/InlineTitle.jsx";
 import NoteBadges from "../widgets/layout/NoteBadges.jsx";
 import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
+import StandaloneWarningBar from "../widgets/layout/StandaloneWarningBar";
 import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
@@ -25,7 +26,6 @@ import NoteDetail from "../widgets/NoteDetail.jsx";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import { useNoteContext } from "../widgets/react/hooks.jsx";
 import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
-import ScrollPadding from "../widgets/scroll_padding";
 import SearchResult from "../widgets/search_result.jsx";
 import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
 import { applyModals } from "./layout_commons.js";
@@ -57,6 +57,7 @@ export default class MobileLayout {
                             .child(
                                 new SplitNoteContainer(() =>
                                     new NoteWrapperWidget()
+                                        .optChild(glob.isStandalone, <StandaloneWarningBar />)
                                         .child(
                                             new FlexContainer("row")
                                                 .class("title-row note-split-title")
@@ -77,7 +78,7 @@ export default class MobileLayout {
                                                 .child(<NoteDetail />)
                                                 .child(<NoteList media="screen" />)
                                                 .child(<SearchResult />)
-                                                .child(<ScrollPadding />)
+                                                .child(<FilePropertiesWrapper />)
                                         )
                                         .child(<MobileEditorToolbar />)
                                         .child(new FindWidget())
@@ -101,3 +102,13 @@ export default class MobileLayout {
         return rootContainer;
     }
 }
+
+function FilePropertiesWrapper() {
+    const { note, ntxId } = useNoteContext();
+
+    return (
+        <div>
+            {note?.type === "file" && <FilePropertiesTab note={note} ntxId={ntxId} />}
+        </div>
+    );
+}

apps/client/src/print.tsx

@@ -18,10 +18,6 @@ export type PrintReport = {
 } | {
     type: "collection";
     ignoredNoteIds: string[];
-} | {
-    type: "error";
-    message: string;
-    stack?: string;
 };
 
 async function main() {

apps/client/src/services/attributes.ts

@@ -168,49 +168,6 @@ function isAffecting(attrRow: AttributeRow, affectedNote: FNote | null | undefin
     return false;
 }
 
-/**
- * Toggles whether a dangerous attribute is enabled or not. When an attribute is disabled, its name is prefixed with `disabled:`.
- *
- * Note that this work for non-dangerous attributes as well.
- *
- * If there are multiple attributes with the same name, all of them will be toggled at the same time.
- *
- * @param note the note whose attribute to change.
- * @param type the type of dangerous attribute (label or relation).
- * @param name the name of the dangerous attribute.
- * @param willEnable whether to enable or disable the attribute.
- * @returns a promise that will resolve when the request to the server completes.
- */
-async function toggleDangerousAttribute(note: FNote, type: "label" | "relation", name: string, willEnable: boolean) {
-    const attrs = [
-        ...note.getOwnedAttributes(type, name),
-        ...note.getOwnedAttributes(type, `disabled:${name}`)
-    ];
-
-    for (const attr of attrs) {
-        const baseName = getNameWithoutDangerousPrefix(attr.name);
-        const newName = willEnable ? baseName : `disabled:${baseName}`;
-        if (newName === attr.name) continue;
-
-        // We are adding and removing afterwards to avoid a flicker (because for a moment there would be no active content attribute anymore) because the operations are done in sequence and not atomically.
-        if (attr.type === "label") {
-            await setLabel(note.noteId, newName, attr.value);
-        } else {
-            await setRelation(note.noteId, newName, attr.value);
-        }
-        await removeAttributeById(note.noteId, attr.attributeId);
-    }
-}
-
-/**
- * Returns the name of an attribute without the `disabled:` prefix, or the same name if it's not disabled.
- * @param name the name of an attribute.
- * @returns the name without the `disabled:` prefix.
- */
-function getNameWithoutDangerousPrefix(name: string) {
-    return name.startsWith("disabled:") ? name.substring(9) : name;
-}
-
 export default {
     addLabel,
     setLabel,
@@ -220,7 +177,5 @@ export default {
     removeAttributeById,
     removeOwnedLabelByName,
     removeOwnedRelationByName,
-    isAffecting,
-    toggleDangerousAttribute,
-    getNameWithoutDangerousPrefix
+    isAffecting
 };

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,17 @@ 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`;
+    // The user guide is available only in English, so make sure we are requesting correctly since 404s in standalone client are treated differently.
+    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/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/render.ts

@@ -6,7 +6,7 @@ import bundleService, { type Bundle } from "./bundle.js";
 import froca from "./froca.js";
 import server from "./server.js";
 
-async function render(note: FNote, $el: JQuery<HTMLElement>, onError?: (e: unknown) => void) {
+async function render(note: FNote, $el: JQuery<HTMLElement>) {
     const relations = note.getRelations("renderNote");
     const renderNoteIds = relations.map((rel) => rel.value).filter((noteId) => noteId);
 
@@ -21,14 +21,12 @@ async function render(note: FNote, $el: JQuery<HTMLElement>, onError?: (e: unkno
         $scriptContainer.append(bundle.html);
 
         // async so that scripts cannot block trilium execution
-        bundleService.executeBundle(bundle, note, $scriptContainer)
-            .catch(onError)
-            .then(result => {
-                // Render JSX
-                if (bundle.html === "") {
-                    renderIfJsx(bundle, result, $el).catch(onError);
-                }
-            });
+        bundleService.executeBundle(bundle, note, $scriptContainer).then(result => {
+            // Render JSX
+            if (bundle.html === "") {
+                renderIfJsx(bundle, result, $el);
+            }
+        });
     }
 
     return renderNoteIds.length > 0;

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/services/ws.ts

@@ -304,7 +304,7 @@ async function sendPing() {
 }
 
 setTimeout(() => {
-    if (glob.device === "print") return;
+    if (glob.device === "print" || glob.isStandalone) return;
 
     ws = connectWebSocket();
 

apps/client/src/stylesheets/style.css

@@ -153,11 +153,6 @@ textarea,
     background: var(--input-background-color);
 }
 
-.form-control:disabled {
-    background-color: var(--input-background-color);
-    opacity: 0.6;
-}
-
 .form-control:focus {
     color: var(--input-text-color);
     background: var(--input-background-color);
@@ -947,7 +942,6 @@ table.promoted-attributes-in-tooltip th {
     color: var(--muted-text-color);
     opacity: 0.6;
     line-height: 1;
-    word-wrap: break-word;
 }
 
 .aa-dropdown-menu .aa-suggestion p {
@@ -1342,12 +1336,15 @@ body.desktop .dropdown-submenu > .dropdown-menu {
     max-width: 300px;
 }
 
-.dropdown-submenu.dropstart > .dropdown-menu,
-body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
+.dropdown-submenu.dropstart > .dropdown-menu {
     inset-inline-start: auto;
     inset-inline-end: calc(100% - 2px);
 }
 
+body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
+    inset-inline-start: calc(-100% + 10px);
+}
+
 .right-dropdown-widget {
     flex-shrink: 0;
 }

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

@@ -210,7 +210,6 @@
     --badge-share-background-color: #4d4d4d;
     --badge-clipped-note-background-color: #295773;
     --badge-execute-background-color: #604180;
-    --badge-active-content-background-color: rgb(12, 68, 70);
 
     --note-icon-background-color: #444444;
     --note-icon-color: #d4d4d4;
@@ -239,9 +238,9 @@
 
     --bottom-panel-background-color: #11111180;
     --bottom-panel-title-bar-background-color: #3F3F3F80;
-
+    
     --status-bar-border-color: var(--main-border-color);
-
+    
     --scrollbar-thumb-color: #fdfdfd5c;
     --scrollbar-thumb-hover-color: #ffffff7d;
     --scrollbar-background-color: transparent;
@@ -291,15 +290,6 @@
     --ck-editor-toolbar-button-on-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
     --ck-editor-toolbar-dropdown-button-open-background: #ffffff14;
 
-    --note-list-view-icon-color: var(--left-pane-icon-color);
-    --note-list-view-large-icon-background: var(--note-icon-background-color);
-    --note-list-view-large-icon-color: var(--note-icon-color);
-    --note-list-view-search-result-highlight-background: transparent;
-    --note-list-view-search-result-highlight-color: var(--quick-search-result-highlight-color);
-    --note-list-view-content-background: rgba(0, 0, 0, .2);
-    --note-list-view-content-search-result-highlight-background: var(--quick-search-result-highlight-color);
-    --note-list-view-content-search-result-highlight-color: black;
-
     --calendar-coll-event-background-saturation: 25%;
     --calendar-coll-event-background-lightness: 20%;
     --calendar-coll-event-background-color: #3c3c3c;
@@ -313,8 +303,7 @@
  * Dark color scheme tweaks
  */
 
-#left-pane .fancytree-node.tinted,
-.nested-note-list-item.use-note-color {
+#left-pane .fancytree-node.tinted {
     --custom-color: var(--dark-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -348,24 +337,12 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%);
 }
 
-.modal.tab-bar-modal .tabs .tab-card.with-hue {
-    background-color: hsl(var(--bg-hue), 8.8%, 11.2%);
-    border-color: hsl(var(--bg-hue), 9.4%, 25.1%);
-}
-
-.modal.tab-bar-modal .tabs .tab-card.active.with-hue {
-    background-color: hsl(var(--bg-hue), 8.8%, 16.2%);
-    border-color: hsl(var(--bg-hue), 9.4%, 25.1%);
-}
-
-
 .use-note-color {
     --custom-color: var(--dark-theme-custom-color);
 }
 
 .note-split.with-hue,
-.quick-edit-dialog-wrapper.with-hue,
-.nested-note-list-item.with-hue {
+.quick-edit-dialog-wrapper.with-hue {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%);
     --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 28.3%, 36.7%);
@@ -374,4 +351,4 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .note-split.with-hue *::selection,
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 49.2%, 35%);
-}
+}

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

@@ -202,7 +202,6 @@
     --badge-share-background-color: #6b6b6b;
     --badge-clipped-note-background-color: #2284c0;
     --badge-execute-background-color: #7b47af;
-    --badge-active-content-background-color: rgb(27, 164, 168);
 
     --note-icon-background-color: #4f4f4f;
     --note-icon-color: white;
@@ -289,15 +288,6 @@
     --ck-editor-toolbar-button-on-shadow: none;
     --ck-editor-toolbar-dropdown-button-open-background: #0000000f;
 
-    --note-list-view-icon-color: var(--left-pane-icon-color);
-    --note-list-view-large-icon-background: var(--note-icon-background-color);
-    --note-list-view-large-icon-color: var(--note-icon-color);
-    --note-list-view-search-result-highlight-background: transparent;
-    --note-list-view-search-result-highlight-color: var(--quick-search-result-highlight-color);
-    --note-list-view-content-background: #b1b1b133;
-    --note-list-view-content-search-result-highlight-background: var(--quick-search-result-highlight-color);
-    --note-list-view-content-search-result-highlight-color: white;
-
     --calendar-coll-event-background-lightness: 95%;
     --calendar-coll-event-background-saturation: 80%;
     --calendar-coll-event-background-color: #eaeaea;
@@ -307,8 +297,7 @@
     --calendar-coll-today-background-color: #00000006;
 }
 
-#left-pane .fancytree-node.tinted,
-.nested-note-list-item.use-note-color {
+#left-pane .fancytree-node.tinted {
     --custom-color: var(--light-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -323,19 +312,8 @@
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
 }
 
-.modal.tab-bar-modal .tabs .tab-card.with-hue {
-    background-color: hsl(var(--bg-hue), 56%, 96%);
-    border-color: hsl(var(--bg-hue), 33%, 41%);
-}
-
-.modal.tab-bar-modal .tabs .tab-card.active.with-hue {
-    background-color: hsl(var(--bg-hue), 86%, 96%);
-    border-color: hsl(var(--bg-hue), 33%, 41%);
-}
-
 .note-split.with-hue,
-.quick-edit-dialog-wrapper.with-hue,
-.nested-note-list-item.with-hue {
+.quick-edit-dialog-wrapper.with-hue {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%);
     --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%);
@@ -344,4 +322,4 @@
 .note-split.with-hue *::selection,
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 60%, 90%);
-}
+}

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

@@ -800,18 +800,3 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     background: var(--hover-item-background-color);
     color: var(--hover-item-text-color);
 }
-
-/*
- * Alert bars
- */
-
-div.alert {
-    margin-bottom: 8px;
-    background: var(--alert-bar-background) !important;
-    border-radius: 8px;
-    font-size: .85em;
-}
-
-div.alert p + p {
-    margin-block: 1em 0;
-}

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

@@ -84,22 +84,6 @@ button.btn.btn-success kbd {
     letter-spacing: 0.5pt;
 }
 
-/*
- * Low profile buttons
- */
-
-button.tn-low-profile {
-    appearance: none;
-    background: transparent;
-    border: 0;
-    border-radius: 8px;
-    color: inherit;
-}
-
-button.tn-low-profile:hover {
-    background-color: var(--icon-button-hover-background);
-}
-
 /*
  * Icon buttons
  */
@@ -810,35 +794,3 @@ input[type="range"] {
         scrollbar-width: unset;
     }
 }
-
-/*
- * Centered forms
- */
-
-.tn-centered-form {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin-bottom: 20vh;
-}
-
-.tn-centered-form .form-group {
-    text-align: center;
-    color: var(--muted-text-color);
-}
-
-.tn-centered-form .form-icon {
-    font-size: 140px;
-    color: var(--main-border-color);
-}
-
-.tn-centered-form .protected-session-password {
-    margin-inline: auto;
-    max-width: 350px;
-    text-align: center;
-}
-
-.tn-centered-form .input-group,
-.tn-centered-form button {
-    margin-top: 12px;
-}

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

@@ -265,6 +265,13 @@ body.desktop .options-section:not(.tn-no-card) {
     margin-bottom: 6px;
 }
 
+.options-section .alert {
+    margin-bottom: 8px;
+    background: var(--alert-bar-background) !important;
+    border-radius: 8px;
+    font-size: .85em;
+}
+
 nav.options-section-tabs {
     min-width: var(--options-card-min-width);
     max-width: var(--options-card-max-width);

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

@@ -751,14 +751,12 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i
     }
 }
 
-#left-pane .fancytree-expander,
-.nested-note-list-item .note-expander {
+#left-pane .fancytree-expander {
     opacity: 0.65;
     transition: opacity 150ms ease-in;
 }
 
-#left-pane .fancytree-expander:hover,
-.nested-note-list-item .note-expander:hover {
+#left-pane .fancytree-expander:hover {
     opacity: 1;
     transition: opacity 300ms ease-out;
 }

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

@@ -1180,6 +1180,9 @@
     "note_not_found": "الملاحظة {{noteId}} غير موجودة!",
     "cannot_match_transform": "تعذر مطابقة التحويل: {{transform}}"
   },
+  "web_view": {
+    "web_view": "عرض الويب"
+  },
   "consistency_checks": {
     "title": "فحوصات التناسق"
   },

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

@@ -1068,6 +1068,11 @@
     "note_detail_render_help_1": "之所以显示此帮助说明，是因为这个类型为渲染 HTML 的笔记没有正常工作所需的关系。",
     "note_detail_render_help_2": "渲染 HTML 笔记类型用于<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">编写脚本</a>。简而言之，您有一份 HTML 代码笔记（可包含一些 JavaScript），然后这个笔记会把页面渲染出来。要使其正常工作，您需要定义一个名为 \"renderNote\" 的<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">关系</a>指向要渲染的 HTML 笔记。"
   },
+  "web_view": {
+    "web_view": "网页视图",
+    "embed_websites": "网页视图类型的笔记允许您将网站嵌入到 Trilium 中。",
+    "create_label": "首先，请创建一个带有您要嵌入的 URL 地址的标签，例如 #webViewSrc=\"https://www.bing.com\""
+  },
   "backend_log": {
     "refresh": "刷新"
   },
@@ -1416,8 +1421,7 @@
     "description": "描述",
     "reload_app": "重载应用以应用更改",
     "set_all_to_default": "将所有快捷键重置为默认值",
-    "confirm_reset": "您确定要将所有键盘快捷键重置为默认值吗？",
-    "no_results": "未找到与“{{filter}}”匹配的快捷方式"
+    "confirm_reset": "您确定要将所有键盘快捷键重置为默认值吗？"
   },
   "spellcheck": {
     "title": "拼写检查",
@@ -1618,9 +1622,7 @@
     "print_report_title": "打印报告",
     "print_report_collection_content_other": "集合中的 {{count}} 篇笔记无法打印，因为它们不受支持或受到保护。",
     "print_report_collection_details_button": "查看详情",
-    "print_report_collection_details_ignored_notes": "忽略的笔记",
-    "print_report_error_title": "打印失败",
-    "print_report_stack_trace": "堆栈跟踪"
+    "print_report_collection_details_ignored_notes": "忽略的笔记"
   },
   "note_title": {
     "placeholder": "请输入笔记标题...",
@@ -2266,12 +2268,5 @@
   },
   "bookmark_buttons": {
     "bookmarks": "书签"
-  },
-  "web_view_setup": {
-    "title": "直接在 Trilium 中创建网页的实时视图",
-    "url_placeholder": "输入或粘贴网站地址，例如 https://triliumnotes.org",
-    "create_button": "创建网页视图",
-    "invalid_url_title": "无效的地址",
-    "invalid_url_message": "请输入有效的网址，例如 https://triliumnotes.org。"
   }
 }

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

@@ -1067,6 +1067,11 @@
     "note_detail_render_help_1": "Diese Hilfesnotiz wird angezeigt, da diese Notiz vom Typ „HTML rendern“ nicht über die erforderliche Beziehung verfügt, um ordnungsgemäß zu funktionieren.",
     "note_detail_render_help_2": "Render-HTML-Notiztyp wird benutzt für <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripting</a>. Kurzgesagt, du hast ein HTML-Code-Notiz (optional mit JavaScript) und diese Notiz rendert es. Damit es funktioniert, musst du eine a <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">Beziehung</a> namens \"renderNote\" zeigend auf die HTML-Notiz zum rendern definieren."
   },
+  "web_view": {
+    "web_view": "Webansicht",
+    "embed_websites": "Notiz vom Typ Web View ermöglicht das Einbetten von Websites in Trilium.",
+    "create_label": "Um zu beginnen, erstelle bitte ein Label mit einer URL-Adresse, die eingebettet werden soll, z. B. #webViewSrc=\"https://www.google.com\""
+  },
   "backend_log": {
     "refresh": "Aktualisieren"
   },
@@ -1382,8 +1387,7 @@
     "description": "Beschreibung",
     "reload_app": "Lade die App neu, um die Änderungen zu übernehmen",
     "set_all_to_default": "Setze alle Verknüpfungen auf die Standardeinstellungen",
-    "confirm_reset": "Möchtest du wirklich alle Tastaturkürzel auf die Standardeinstellungen zurücksetzen?",
-    "no_results": "Keine Tastenkürzel für '{{filter}}' gefunden"
+    "confirm_reset": "Möchtest du wirklich alle Tastaturkürzel auf die Standardeinstellungen zurücksetzen?"
   },
   "spellcheck": {
     "title": "Rechtschreibprüfung",
@@ -1587,9 +1591,7 @@
     "print_report_collection_details_button": "Details anzeigen",
     "print_report_collection_details_ignored_notes": "Ignorierte Notizen",
     "print_report_collection_content_one": "{{count}} Notiz in der Sammlung konnte nicht gedruckt werden, weil sie nicht unterstützt oder geschützt ist.",
-    "print_report_collection_content_other": "{{count}} Notizen in der Sammlung konnten nicht gedruckt werden, weil sie nicht unterstützt oder geschützt sind.",
-    "print_report_error_title": "Druck fehlgeschlagen",
-    "print_report_stack_trace": "Stapelzurückverfolgung"
+    "print_report_collection_content_other": "{{count}} Notizen in der Sammlung konnten nicht gedruckt werden, weil sie nicht unterstützt oder geschützt sind."
   },
   "note_title": {
     "placeholder": "Titel der Notiz hier eingeben…",
@@ -2281,12 +2283,5 @@
   },
   "bookmark_buttons": {
     "bookmarks": "Lesezeichen"
-  },
-  "web_view_setup": {
-    "title": "Erstelle eine Live-Ansicht einer Webseite direkt in Trilium",
-    "url_placeholder": "Gib oder füge die Adresse der Webseite ein, zum Beispiel https://triliumnotes.org",
-    "create_button": "Erstelle Web Ansicht",
-    "invalid_url_title": "Ungültige Adresse",
-    "invalid_url_message": "Füge eine valide Webadresse ein, zum Beispiel https://triliumnotes.org."
   }
 }

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

@@ -13,61 +13,6 @@
     "critical-error": {
       "title": "Κρίσιμο σφάλμα",
       "message": "Συνέβη κάποιο κρίσιμο σφάλμα, το οποίο δεν επιτρέπει στην εφαρμογή χρήστη να ξεκινήσει:\n\n{{message}}\n\nΤο πιθανότερο είναι να προκλήθηκε από κάποιο script που απέτυχε απρόοπτα. Δοκιμάστε να ξεκινήσετε την εφαρμογή σε ασφαλή λειτουργία για να λύσετε το πρόβλημα."
-    },
-    "widget-error": {
-      "title": "Δεν ήταν δυνατή η αρχικοποίηση του widget",
-      "message-custom": "Προσαρμοσμένο widget της σημείωσης με ID \"{{id}}\", με τίτλο \"{{title}}\", δεν ήταν δυνατό να αρχικοποιηθεί λόγω:\n\n{{message}}",
-      "message-unknown": "Άγνωστο widget δεν ήταν δυνατό να αρχικοποιηθεί λόγω:\n\n{{message}}"
-    },
-    "bundle-error": {
-      "title": "Δεν ήταν δυνατή η φόρτωση προσαρμοσμένου script",
-      "message": "Το script δεν ήταν δυνατό να εκτελεστεί λόγω:\n\n{{message}}"
-    },
-    "widget-list-error": {
-      "title": "Δεν ήταν δυνατή η λήψη της λίστας των widgets από τον server"
-    },
-    "widget-render-error": {
-      "title": "Δεν ήταν δυνατή η απόδοση προσαρμοσμένου React widget"
-    },
-    "widget-missing-parent": "Το προσαρμοσμένο widget δεν έχει ορισμένη την υποχρεωτική ιδιότητα '{{property}}'.\n\nΕάν το script προορίζεται για εκτέλεση χωρίς UI element, χρησιμοποιήστε '#run=frontendStartup' αντί για αυτό.",
-    "open-script-note": "Άνοιγμα σημείωσης script",
-    "scripting-error": "Σφάλμα προσαρμοσμένου script: {{title}}"
-  },
-  "bookmark_buttons": {
-    "bookmarks": "Σελιδοδείκτες"
-  },
-  "add_link": {
-    "add_link": "Προσθήκη συνδέσμου",
-    "help_on_links": "Βοήθεια για συνδέσμους",
-    "note": "Σημείωση",
-    "search_note": "Αναζήτηση σημείωσης με βάση το όνομά της",
-    "link_title_mirrors": "Ο τίτλος του συνδέσμου αντικατοπτρίζει τον τρέχοντα τίτλο της σημείωσης",
-    "link_title_arbitrary": "Ο τίτλος του συνδέσμου μπορεί να τροποποιηθεί ελεύθερα",
-    "link_title": "Τίτλος συνδέσμου",
-    "button_add_link": "Προσθήκη συνδέσμου"
-  },
-  "branch_prefix": {
-    "edit_branch_prefix": "Επεξεργασία προθέματος κλάδου",
-    "edit_branch_prefix_multiple": "Επεξεργασία προθέματος κλάδου για {{count}} κλάδους",
-    "help_on_tree_prefix": "Βοήθεια για πρόθεμα δέντρου",
-    "prefix": "Πρόθεμα: ",
-    "save": "Αποθήκευση",
-    "branch_prefix_saved": "Το πρόθεμα κλάδου αποθηκεύτηκε.",
-    "branch_prefix_saved_multiple": "Το πρόθεμα κλάδου αποθηκεύτηκε για {{count}} κλάδους.",
-    "affected_branches": "Επηρεαζόμενοι κλάδοι ({{count}}):"
-  },
-  "bulk_actions": {
-    "bulk_actions": "Μαζικές ενέργειες",
-    "affected_notes": "Επηρεαζόμενες σημειώσεις",
-    "include_descendants": "Συμπερίληψη απογόνων των επιλεγμένων σημειώσεων",
-    "available_actions": "Διαθέσιμες ενέργειες",
-    "chosen_actions": "Επιλεγμένες ενέργειες",
-    "execute_bulk_actions": "Εκτέλεση μαζικών ενεργειών",
-    "bulk_actions_executed": "Οι μαζικές ενέργειες εκτελέστηκαν επιτυχώς.",
-    "none_yet": "Καμία ακόμη… προσθέστε μια ενέργεια επιλέγοντας μία από τις διαθέσιμες παραπάνω.",
-    "labels": "Ετικέτες",
-    "relations": "Συσχετίσεις",
-    "notes": "Σημειώσεις",
-    "other": "Λοιπά"
+    }
   }
 }

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

@@ -1067,21 +1067,13 @@
     "click_on_canvas_to_place_new_note": "Click on canvas to place new note"
   },
   "render": {
-    "setup_title": "Display custom HTML or Preact JSX inside this note",
-    "setup_create_sample_preact": "Create sample note with Preact",
-    "setup_create_sample_html": "Create sample note with HTML",
-    "setup_sample_created": "A sample note was created as a child note.",
-    "disabled_description": "This render notes comes from an external source. To protect you from malicious content, it is not enabled by default. Make sure you trust the source before enabling it.",
-    "disabled_button_enable": "Enable render note"
+    "note_detail_render_help_1": "This help note is shown because this note of type Render HTML doesn't have required relation to function properly.",
+    "note_detail_render_help_2": "Render HTML note type is used for <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripting</a>. In short, you have a HTML code note (optionally with some JavaScript) and this note will render it. To make it work, you need to define a <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relation</a> called \"renderNote\" pointing to the HTML note to render."
   },
-  "web_view_setup": {
-    "title": "Create a live view of a webpage directly into Trilium",
-    "url_placeholder": "Enter or paste the website address, for example https://triliumnotes.org",
-    "create_button": "Create Web View",
-    "invalid_url_title": "Invalid address",
-    "invalid_url_message": "Insert a valid web address, for example https://triliumnotes.org.",
-    "disabled_description": "This web view was imported from an external source. To help protect you from phishing or malicious content, it isn’t loading automatically. You can enable it if you trust the source.",
-    "disabled_button_enable": "Enable web view"
+  "web_view": {
+    "web_view": "Web View",
+    "embed_websites": "Note of type Web View allows you to embed websites into Trilium.",
+    "create_label": "To start, please create a label with a URL address you want to embed, e.g. #webViewSrc=\"https://www.google.com\""
   },
   "backend_log": {
     "refresh": "Refresh"
@@ -1597,8 +1589,7 @@
     "description": "Description",
     "reload_app": "Reload app to apply changes",
     "set_all_to_default": "Set all shortcuts to the default",
-    "confirm_reset": "Do you really want to reset all keyboard shortcuts to the default?",
-    "no_results": "No shortcuts found matching '{{filter}}'"
+    "confirm_reset": "Do you really want to reset all keyboard shortcuts to the default?"
   },
   "spellcheck": {
     "title": "Spell Check",
@@ -1804,8 +1795,6 @@
     "printing": "Printing in progress...",
     "printing_pdf": "Exporting to PDF in progress...",
     "print_report_title": "Print report",
-    "print_report_error_title": "Failed to print",
-    "print_report_stack_trace": "Stack trace",
     "print_report_collection_content_one": "{{count}} note in the collection could not be printed because they are not supported or they are protected.",
     "print_report_collection_content_other": "{{count}} notes in the collection could not be printed because they are not supported or they are protected.",
     "print_report_collection_details_button": "See details",
@@ -2110,8 +2099,7 @@
     "raster": "Raster",
     "vector_light": "Vector (Light)",
     "vector_dark": "Vector (Dark)",
-    "show-scale": "Show scale",
-    "show-labels": "Show marker names"
+    "show-scale": "Show scale"
   },
   "table_context_menu": {
     "delete_row": "Delete row"
@@ -2190,9 +2178,8 @@
     "percentage": "%"
   },
   "pagination": {
-    "total_notes": "{{count}} notes",
-    "prev_page": "Previous page",
-    "next_page": "Next page"
+    "page_title": "Page of {{startIndex}} - {{endIndex}}",
+    "total_notes": "{{count}} notes"
   },
   "collections": {
     "rendering_error": "Unable to show content due to an error."
@@ -2296,32 +2283,5 @@
   },
   "bookmark_buttons": {
     "bookmarks": "Bookmarks"
-  },
-  "active_content_badges": {
-    "type_icon_pack": "Icon pack",
-    "type_backend_script": "Backend script",
-    "type_frontend_script": "Frontend script",
-    "type_widget": "Widget",
-    "type_app_css": "Custom CSS",
-    "type_render_note": "Render note",
-    "type_web_view": "Web view",
-    "type_app_theme": "Custom theme",
-    "toggle_tooltip_enable_tooltip": "Click to enable this {{type}}.",
-    "toggle_tooltip_disable_tooltip": "Click to disable this {{type}}.",
-    "menu_docs": "Open documentation",
-    "menu_execute_now": "Execute script now",
-    "menu_run": "Run automatically",
-    "menu_run_disabled": "Manually",
-    "menu_run_backend_startup": "When the backend starts up",
-    "menu_run_hourly": "Hourly",
-    "menu_run_daily": "Daily",
-    "menu_run_frontend_startup": "When the desktop frontend starts up",
-    "menu_run_mobile_startup": "When the mobile frontend starts up",
-    "menu_change_to_widget": "Change to widget",
-    "menu_change_to_frontend_script": "Change to frontend script",
-    "menu_theme_base": "Theme base"
-  },
-  "setup_form": {
-    "more_info": "Learn more"
   }
 }

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

@@ -1072,6 +1072,11 @@
     "note_detail_render_help_1": "Esta nota de ayuda se muestra porque esta nota de tipo Renderizar HTML no tiene la relación requerida para funcionar correctamente.",
     "note_detail_render_help_2": "El tipo de nota Render HTML es usado para <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripting</a>. De forma resumida, tiene una nota con código HTML (opcionalmente con algo de JavaScript) y esta nota la renderizará. Para que funcione, es necesario definir una <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relación</a> llamada \"renderNote\" apuntando a la nota HTML nota a renderizar."
   },
+  "web_view": {
+    "web_view": "Vista web",
+    "embed_websites": "La nota de tipo Web View le permite insertar sitios web en Trilium.",
+    "create_label": "Para comenzar, por favor cree una etiqueta con una dirección URL que desee empotrar, e.g. #webViewSrc=\"https://www.google.com\""
+  },
   "backend_log": {
     "refresh": "Refrescar"
   },
@@ -1572,8 +1577,7 @@
     "description": "Descripción",
     "reload_app": "Vuelva a cargar la aplicación para aplicar los cambios",
     "set_all_to_default": "Establecer todos los accesos directos al valor predeterminado",
-    "confirm_reset": "¿Realmente desea restablecer todos los atajos de teclado a sus valores predeterminados?",
-    "no_results": "No se encontraron atajos que coincidan con '{{filter}} '"
+    "confirm_reset": "¿Realmente desea restablecer todos los atajos de teclado a sus valores predeterminados?"
   },
   "spellcheck": {
     "title": "Revisión ortográfica",
@@ -1780,9 +1784,7 @@
     "print_report_collection_content_other": "{{count}} notas en la colección no se pueden imprimir porque no son compatibles o están protegidas.",
     "print_report_title": "Imprimir informe",
     "print_report_collection_details_button": "Ver detalles",
-    "print_report_collection_details_ignored_notes": "Notas ignoradas",
-    "print_report_stack_trace": "Rastreo de pila",
-    "print_report_error_title": "Fallo al imprimir"
+    "print_report_collection_details_ignored_notes": "Notas ignoradas"
   },
   "note_title": {
     "placeholder": "escriba el título de la nota aquí...",
@@ -2296,12 +2298,5 @@
   },
   "bookmark_buttons": {
     "bookmarks": "Marcadores"
-  },
-  "web_view_setup": {
-    "title": "Crear una vista en vivo de una página web directamente en Trilium",
-    "url_placeholder": "Ingresar o pegar la dirección del sitio web, por ejemplo https://triliumnotes.org",
-    "create_button": "Crear Vista Web",
-    "invalid_url_title": "Dirección inválida",
-    "invalid_url_message": "Ingrese una dirección web válida, por ejemplo https://triliumnotes.org."
   }
 }

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

@@ -1057,6 +1057,11 @@
     "note_detail_render_help_1": "Cette note d'aide s'affiche car cette note de type Rendu HTML n'a pas la relation requise pour fonctionner correctement.",
     "note_detail_render_help_2": "Le type de note Rendu HTML est utilisé pour les <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripts</a>. En résumé, vous disposez d'une note de code HTML (éventuellement contenant JavaScript) et cette note affichera le rendu. Pour que cela fonctionne, vous devez définir une <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relation</a> appelée \"renderNote\" pointant vers la note HTML à rendre."
   },
+  "web_view": {
+    "web_view": "Affichage Web",
+    "embed_websites": "Les notes de type Affichage Web vous permet d'intégrer des sites Web dans Trilium.",
+    "create_label": "Pour commencer, veuillez créer un label avec l'adresse URL que vous souhaitez intégrer, par ex. #webViewSrc=\"https://www.google.com\""
+  },
   "backend_log": {
     "refresh": "Rafraîchir"
   },

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

@@ -1076,6 +1076,11 @@
     "note_detail_render_help_1": "Taispeántar an nóta cabhrach seo mar nach bhfuil aon ghaol riachtanach ag an nóta seo den chineál Render HTML le go bhfeidhmeoidh sé i gceart.",
     "note_detail_render_help_2": "Úsáidtear cineál nóta HTML rindreála le haghaidh <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scriptithe</a>. Go hachomair, tá nóta cóid HTML agat (le roinnt JavaScript más féidir) agus déanfaidh an nóta seo é a rindreáil. Chun go n-oibreoidh sé, ní mór duit <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">gaol</a> ar a dtugtar \"renderNote\" a shainiú ag pointeáil chuig an nóta HTML atá le rindreáil."
   },
+  "web_view": {
+    "web_view": "Radharc Gréasáin",
+    "embed_websites": "Nóta den chineál Gréasáin a ligeann duit suíomhanna gréasáin a leabú i Trilium.",
+    "create_label": "Chun tús a chur leis, cruthaigh lipéad le seoladh URL ar mhaith leat a leabú, m.sh. #webViewSrc=\"https://www.google.com\""
+  },
   "backend_log": {
     "refresh": "Athnuachan"
   },
@@ -1590,8 +1595,7 @@
     "description": "Cur síos",
     "reload_app": "Athlódáil an aip chun na hathruithe a chur i bhfeidhm",
     "set_all_to_default": "Socraigh gach aicearra go dtí an réamhshocrú",
-    "confirm_reset": "An bhfuil tú cinnte gur mhaith leat na haicearraí méarchláir go léir a athshocrú go dtí an rogha réamhshocraithe?",
-    "no_results": "Níor aimsíodh aon aicearraí a mheaitseálann '{{filter}}'"
+    "confirm_reset": "An bhfuil tú cinnte gur mhaith leat na haicearraí méarchláir go léir a athshocrú go dtí an rogha réamhshocraithe?"
   },
   "spellcheck": {
     "title": "Seiceáil Litrithe",
@@ -1809,9 +1813,7 @@
     "print_report_collection_content_many": "Níorbh fhéidir {{count}} nótaí sa bhailiúchán a phriontáil mar nach dtacaítear leo nó mar go bhfuil siad faoi chosaint.",
     "print_report_collection_content_other": "Níorbh fhéidir {{count}} nótaí sa bhailiúchán a phriontáil mar nach dtacaítear leo nó mar go bhfuil siad faoi chosaint.",
     "print_report_collection_details_button": "Féach sonraí",
-    "print_report_collection_details_ignored_notes": "Nótaí neamhairdithe",
-    "print_report_error_title": "Theip ar phriontáil",
-    "print_report_stack_trace": "Rian cruachta"
+    "print_report_collection_details_ignored_notes": "Nótaí neamhairdithe"
   },
   "note_title": {
     "placeholder": "clóscríobh teideal an nóta anseo...",
@@ -2326,12 +2328,5 @@
   },
   "bookmark_buttons": {
     "bookmarks": "Leabharmharcanna"
-  },
-  "web_view_setup": {
-    "title": "Cruthaigh radharc beo de leathanach gréasáin go díreach isteach i Trilium",
-    "url_placeholder": "Cuir isteach nó greamaigh seoladh an tsuímh ghréasáin, mar shampla https://triliumnotes.org",
-    "create_button": "Cruthaigh Radharc Gréasáin",
-    "invalid_url_title": "Seoladh neamhbhailí",
-    "invalid_url_message": "Cuir isteach seoladh gréasáin bailí, mar shampla https://triliumnotes.org."
   }
 }

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

@@ -50,8 +50,7 @@
     "save": "Simpan",
     "branch_prefix_saved": "Prefiks cabang telah disimpan.",
     "branch_prefix_saved_multiple": "Prefix cabang telah disimpan pada {{count}} cabang.",
-    "affected_branches": "Cabang terdampak ({{count}}):",
-    "edit_branch_prefix": "Sunting awalan cabang"
+    "affected_branches": "Cabang terdampak ({{count}}):"
   },
   "bulk_actions": {
     "bulk_actions": "Aksi borongan",
@@ -62,10 +61,7 @@
     "execute_bulk_actions": "Eksekusi aksi borongan",
     "bulk_actions_executed": "Aksi borongan telah di eksekusi dengan sukses.",
     "none_yet": "Belum ada... tambahkan aksi dengan memilih salah satu dari aksi di atas.",
-    "labels": "Label-label",
-    "relations": "Hubungan",
-    "notes": "Catatan",
-    "other": "Lainnya"
+    "labels": "Label-label"
   },
   "confirm": {
     "cancel": "Batal",
@@ -84,8 +80,6 @@
     "no_note_to_delete": "Tidak ada Catatan yang akan dihapus (hanya duplikat)."
   },
   "clone_to": {
-    "clone_notes_to": "Duplikat catatan ke…",
-    "help_on_links": "Bantuan pada tautan",
-    "notes_to_clone": "Catatan untuk kloning"
+    "clone_notes_to": "Duplikat catatan ke…"
   }
 }

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

@@ -186,8 +186,7 @@
   "geo-map": {
     "create-child-note-title": "Crea una nota figlia e aggiungila alla mappa",
     "create-child-note-instruction": "Clicca sulla mappa per creare una nuova nota qui o premi Escape per uscire.",
-    "unable-to-load-map": "Impossibile caricare la mappa.",
-    "create-child-note-text": "Aggiungi indicatore"
+    "unable-to-load-map": "Impossibile caricare la mappa."
   },
   "geo-map-context": {
     "open-location": "Apri la posizione",
@@ -423,8 +422,7 @@
     "unknown_search_option": "Opzione di ricerca sconosciuta {{searchOptionName}}",
     "search_note_saved": "La nota di ricerca è stata salvata in {{- notePathTitle}}",
     "actions_executed": "Le azioni sono state eseguite.",
-    "view_options": "Opzioni di visualizzazione:",
-    "option": "opzione"
+    "view_options": "Opzioni di visualizzazione:"
   },
   "modal": {
     "close": "Chiudi",
@@ -1243,8 +1241,7 @@
     "show-cheatsheet": "Mostra il foglietto illustrativo",
     "toggle-zen-mode": "Modalità Zen",
     "new-version-available": "Nuovo aggiornamento disponibile",
-    "download-update": "Ottieni la versione {{latestVersion}}",
-    "search_notes": "Cerca note"
+    "download-update": "Ottieni la versione {{latestVersion}}"
   },
   "zen_mode": {
     "button_exit": "Esci dalla modalità Zen"
@@ -1343,9 +1340,7 @@
     "delete_this_note": "Elimina questa nota",
     "note_revisions": "Revisioni delle note",
     "error_cannot_get_branch_id": "Impossibile ottenere branchId per notePath '{{notePath}}'",
-    "error_unrecognized_command": "Comando non riconosciuto {{command}}",
-    "backlinks": "Backlinks",
-    "content_language_switcher": "Lingua dei contenuti: {{language}}"
+    "error_unrecognized_command": "Comando non riconosciuto {{command}}"
   },
   "note_icon": {
     "change_note_icon": "Cambia icona nota",
@@ -1586,6 +1581,11 @@
     "note_detail_render_help_1": "Questa nota di aiuto viene visualizzata perché questa nota di tipo Render HTML non ha la relazione richiesta per funzionare correttamente.",
     "note_detail_render_help_2": "Il tipo di nota HTML Render viene utilizzato per lo <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">scripting</a>. In breve, si ottiene una nota in codice HTML (opzionalmente con un po' di JavaScript) che verrà visualizzata. Per farla funzionare, è necessario definire una <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relazione</a> denominata \"renderNote\" che punti alla nota HTML da visualizzare."
   },
+  "web_view": {
+    "web_view": "Visualizzazione Web",
+    "embed_websites": "La nota di tipo Web View consente di incorporare siti web in Trilium.",
+    "create_label": "Per iniziare, crea un'etichetta con l'indirizzo URL che desideri incorporare, ad esempio #webViewSrc=\"https://www.google.com\""
+  },
   "vacuum_database": {
     "title": "Pulizia del database",
     "description": "Questa operazione ricostruirà il database, generando in genere un file di dimensioni inferiori. In realtà, nessun dato verrà modificato.",
@@ -2145,7 +2145,7 @@
     "background_effects_title": "Gli effetti di sfondo sono ora stabili",
     "background_effects_message": "Sui dispositivi Windows, gli effetti di sfondo sono ora completamente stabili. Gli effetti di sfondo aggiungono un tocco di colore all'interfaccia utente sfocando lo sfondo retrostante. Questa tecnica è utilizzata anche in altre applicazioni come Esplora risorse di Windows.",
     "background_effects_button": "Abilita gli effetti di sfondo",
-    "dismiss": "Chiudi",
+    "dismiss": "Congedare",
     "new_layout_title": "Nuovo layout",
     "new_layout_message": "Abbiamo introdotto un layout modernizzato per Trilium. La barra multifunzione è stata rimossa e integrata perfettamente nell'interfaccia principale, con una nuova barra di stato e sezioni espandibili (come gli attributi promossi) che assumono le funzioni chiave.\n\nIl nuovo layout è abilitato di default e può essere temporaneamente disabilitato tramite Opzioni → Aspetto.",
     "new_layout_button": "Maggiori informazioni"
@@ -2281,24 +2281,5 @@
     "pages_other": "{{count}} pagine",
     "pages_alt": "Pagina {{pageNumber}}",
     "pages_loading": "Caricamento in corso..."
-  },
-  "web_view_setup": {
-    "title": "Crea una visualizzazione live di una pagina web direttamente in Trilium",
-    "url_placeholder": "Inserisci o incolla l'indirizzo del sito web, ad esempio https://triliumnotes.org",
-    "create_button": "Crea vista Web",
-    "invalid_url_title": "Indirizzo non valido",
-    "invalid_url_message": "Inserisci un indirizzo web valido, ad esempio https://triliumnotes.org."
-  },
-  "platform_indicator": {
-    "available_on": "Disponibile su {{platform}}"
-  },
-  "mobile_tab_switcher": {
-    "title_one": "Scheda {{count}}",
-    "title_many": "Schede {{count}}",
-    "title_other": "Schede {{count}}",
-    "more_options": "Altre opzioni"
-  },
-  "bookmark_buttons": {
-    "bookmarks": "Segnalibri"
   }
 }

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

@@ -249,8 +249,7 @@
     "reload_app": "リロードして変更を適用する",
     "set_all_to_default": "すべてのショートカットをデフォルトに戻す",
     "confirm_reset": "キーボードショートカットをすべてデフォルトにリセットしますか？",
-    "keyboard_shortcuts": "キーボードショートカット",
-    "no_results": "'{{filter}}' に一致するショートカットが見つかりません"
+    "keyboard_shortcuts": "キーボードショートカット"
   },
   "confirm": {
     "confirmation": "確認",
@@ -827,6 +826,11 @@
     "error_no_path": "移動するパスがありません。",
     "move_success_message": "選択したノートは以下に移動されました "
   },
+  "web_view": {
+    "web_view": "Web ビュー",
+    "embed_websites": "Web ビュータイプでは、web サイトを Trilium に埋め込むことができます。",
+    "create_label": "まず始めに、埋め込みたいURLアドレスのラベルを作成してください。例: #webViewSrc=\"https://www.google.com\""
+  },
   "backend_log": {
     "refresh": "リフレッシュ"
   },
@@ -1955,9 +1959,7 @@
     "print_report_title": "レポートを印刷",
     "print_report_collection_content_other": "コレクション内の {{count}} 件のノートは、サポートされていないか保護されているため、印刷できませんでした。",
     "print_report_collection_details_button": "詳細を見る",
-    "print_report_collection_details_ignored_notes": "無視されたノート",
-    "print_report_error_title": "印刷に失敗しました",
-    "print_report_stack_trace": "スタックトレース"
+    "print_report_collection_details_ignored_notes": "無視されたノート"
   },
   "watched_file_update_status": {
     "ignore_this_change": "この変更を無視する",
@@ -2266,12 +2268,5 @@
   },
   "bookmark_buttons": {
     "bookmarks": "ブックマーク"
-  },
-  "web_view_setup": {
-    "title": "Trilium に直接 Web ページのライブビューを作成",
-    "url_placeholder": "Web サイトのアドレスを入力または貼り付けて下さい。 例: https://triliumnotes.org",
-    "create_button": "Web ビューを作成",
-    "invalid_url_title": "無効なアドレス",
-    "invalid_url_message": "有効な Web アドレスを入力してください。 例: https://triliumnotes.org"
   }
 }

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

@@ -1436,6 +1436,11 @@
     "note_detail_render_help_1": "Ta notatka pomocy jest wyświetlana, ponieważ ta notatka typu Render HTML nie ma wymaganej relacji do poprawnego działania.",
     "note_detail_render_help_2": "Typ notatki Render HTML jest używany do <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">skryptowania</a>. W skrócie, masz notatkę kodu HTML (opcjonalnie z JavaScript) i ta notatka ją wyrenderuje. Aby to zadziałało, musisz zdefiniować <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relację</a> o nazwie \"renderNote\" wskazującą na notatkę HTML do wyrenderowania."
   },
+  "web_view": {
+    "web_view": "Widok WWW",
+    "embed_websites": "Notatka typu Widok WWW pozwala na osadzanie stron internetowych w Trilium.",
+    "create_label": "Aby rozpocząć, utwórz etykietę z adresem URL, który chcesz osadzić, np. #webViewSrc=\"https://www.google.com\""
+  },
   "backend_log": {
     "refresh": "Odśwież"
   },

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

@@ -1068,6 +1068,11 @@
     "note_detail_render_help_1": "Esta nota de ajuda é mostrada porque esta nota do tipo Renderizar HTML não possui a relação necessária para funcionar corretamente.",
     "note_detail_render_help_2": "O tipo de nota Renderizar HTML é usado para <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">automação</a>. Em suma, tem uma nota de código HTML (opcionalmente com algum JavaScript) e esta nota irá renderizá-la. Para fazê-lo funcionar, deve definir uma <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">relação</a> chamada \"renderNote\" que aponta para a nota HTML a ser renderizada."
   },
+  "web_view": {
+    "web_view": "Web View",
+    "embed_websites": "Nota do tipo Visualização Web permite que incorpore sites no Trilium.",
+    "create_label": "Para começar, crie uma etiqueta com um endereço URL que deseja incorporar, por exemplo, #webViewSrc=\"https://www.google.com\""
+  },
   "backend_log": {
     "refresh": "Recarregar"
   },

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

@@ -1271,6 +1271,11 @@
     "start_dragging_relations": "Comece arrastando as relações daqui e solte-as em outra nota.",
     "cannot_match_transform": "Não foi possível combinar a transformação: {{transform}}"
   },
+  "web_view": {
+    "web_view": "Web View",
+    "embed_websites": "Nota do tipo Visualização Web permite que você incorpore sites dentro do Trilium.",
+    "create_label": "Para começar, crie uma etiqueta com um endereço URL que deseja incorporar, por exemplo, #webViewSrc=\"https://www.google.com\""
+  },
   "backend_log": {
     "refresh": "Recarregar"
   },

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

@@ -1376,6 +1376,11 @@
     "enable_vim_keybindings": "Permite utilizarea combinațiilor de taste în stil Vim pentru notițele de tip cod (fără modul ex)",
     "use_vim_keybindings_in_code_notes": "Combinații de taste Vim"
   },
+  "web_view": {
+    "create_label": "Pentru a începe, creați o etichetă cu adresa URL de încorporat, e.g. #webViewSrc=\"https://www.google.com\"",
+    "embed_websites": "Notițele de tip „Vizualizare web” permit încorporarea site-urilor web în Trilium.",
+    "web_view": "Vizualizare web"
+  },
   "wrap_lines": {
     "enable_line_wrap": "Activează trecerea automată pe rândul următor (poate necesita o reîncărcare a interfeței pentru a avea efect)",
     "wrap_lines_in_code_notes": "Trecerea automată pe rândul următor în notițe de cod"

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

@@ -668,8 +668,7 @@
   "geo-map": {
     "unable-to-load-map": "Не удалось загрузить карту.",
     "create-child-note-instruction": "Щелкните по карте, чтобы создать новую заметку в этом месте, или нажмите Escape, чтобы закрыть ее.",
-    "create-child-note-title": "Создать новую дочернюю заметку и добавить ее на карту",
-    "create-child-note-text": "Добавить маркер"
+    "create-child-note-title": "Создать новую дочернюю заметку и добавить ее на карту"
   },
   "note_tooltip": {
     "quick-edit": "Быстрое редактирование",
@@ -686,8 +685,8 @@
   "electron_integration": {
     "zoom-factor": "Коэффициент масштабирования",
     "restart-app-button": "Применить изменения и перезапустить приложение",
-    "background-effects-description": "Добавляет размытый, стильный фон окнам приложений, создавая глубину и современный вид. Опция \"Системная строка заголовка\" должна быть отключена.",
-    "background-effects": "Включить фоновые эффекты",
+    "background-effects-description": "Эффект Mica добавляет размытый, стильный фон окнам приложений, создавая глубину и современный вид. Опция \"Системная строка заголовка\" должна быть отключена.",
+    "background-effects": "Включить фоновые эффекты (только Windows 11)",
     "native-title-bar-description": "В Windows и macOS отключение системной строки заголовка делает приложение более компактным. В Linux включение системной строки заголовка улучшает интеграцию с остальной частью системы.",
     "native-title-bar": "Системная панель заголовка",
     "desktop-application": "Десктопное приложение"
@@ -777,11 +776,7 @@
     "refresh-saved-search-results": "Обновить сохраненные результаты поиска",
     "automatically-collapse-notes-title": "Заметки будут свернуты после определенного периода бездействия, чтобы навести порядок в дереве.",
     "toggle-sidebar": "Переключить боковую панель",
-    "dropping-not-allowed": "Перетаскивание заметок в эту область не разрешено.",
-    "shared-indicator-tooltip": "Эта заметка опубликована",
-    "shared-indicator-tooltip-with-url": "Эта заметка доступно публично по адресу: {{- url}}",
-    "subtree-hidden-moved-description-other": "В дереве, к которому относится эта заметка, скрыты дочерние заметки.",
-    "subtree-hidden-moved-description-collection": "Эта коллекция скрывает свои дочерние заметки в дереве."
+    "dropping-not-allowed": "Перетаскивание заметок в эту область не разрешено."
   },
   "quick-search": {
     "no-results": "Результаты не найдены",
@@ -861,10 +856,7 @@
     "convert-to-attachment-confirm": "Вы уверены, что хотите преобразовать выбранные заметки во вложения их родительских заметок? Эта операция применяется только к заметкам в виде изображений; другие заметки будут пропущены.",
     "converted-to-attachments": "{{count}} заметок были преобразованы во вложения.",
     "archive": "Архивировать",
-    "unarchive": "Разархивировать",
-    "open-in-a-new-window": "Открыть в новом окне",
-    "hide-subtree": "Скрыть поддерево",
-    "show-subtree": "Показать поддерево"
+    "unarchive": "Разархивировать"
   },
   "info": {
     "closeButton": "Закрыть",
@@ -1008,8 +1000,7 @@
     "switch_to_mobile_version": "Перейти на мобильную версию",
     "switch_to_desktop_version": "Переключиться на версию для ПК",
     "new-version-available": "Доступно обновление",
-    "download-update": "Обновить до {{latestVersion}}",
-    "search_notes": "Поиск заметок"
+    "download-update": "Обновить до {{latestVersion}}"
   },
   "zpetne_odkazy": {
     "relation": "отношение",
@@ -1056,8 +1047,7 @@
     "expand_all_levels": "Развернуть все вложенные уровни",
     "expand_nth_level": "Развернуть уровни: {{depth}} шт.",
     "expand_first_level": "Развернуть прямые дочерние уровни",
-    "expand_tooltip": "Разщвернуть дочерние элементы этой коллекции (на один уровень вложенности). Для получения дополнительных параметров нажмите стрелку справа.",
-    "hide_child_notes": "Скрыть дочерние заметки в дереве"
+    "expand_tooltip": "Разщвернуть дочерние элементы этой коллекции (на один уровень вложенности). Для получения дополнительных параметров нажмите стрелку справа."
   },
   "edited_notes": {
     "deleted": "(удалено)",
@@ -1702,7 +1692,7 @@
     "zoom_in_title": "Увеличить масштаб",
     "zoom_out_title": "Уменьшить масштаб",
     "reset_pan_zoom_title": "Сбросить панорамирование и масштабирование",
-    "create_child_note_title": "Создать дочернюю заметку и добавить ее в карту"
+    "create_child_note_title": "Создать новую дочернюю заметку и добавить ее в эту карту связей"
   },
   "code_auto_read_only_size": {
     "unit": "символов",
@@ -1855,8 +1845,7 @@
     "error_cannot_get_branch_id": "Невозможно получить branchId для notePath '{{notePath}}'",
     "delete_this_note": "Удалить эту заметку",
     "insert_child_note": "Вставить дочернюю заметку",
-    "note_revisions": "История изменений",
-    "content_language_switcher": "Язык содержимого: {{language}}"
+    "note_revisions": "История изменений"
   },
   "svg_export_button": {
     "button_title": "Экспортировать диаграмму как SVG"
@@ -1911,7 +1900,7 @@
     "dismiss": "Отклонить",
     "background_effects_button": "Включить эффекты фона",
     "next_theme_button": "Попробовать новую тему",
-    "background_effects_message": "На устройствах с ОС Windows или macOS, фоновые эффекты теперь полностью стабильны. Они добавляют цвета в пользовательский интерфейс, размывая фон за ним.",
+    "background_effects_message": "На устройствах Windows фоновые эффекты теперь полностью стабильны. Они добавляют цвет в пользовательский интерфейс, размывая фон за ним. Этот приём также используется в других приложениях, например, в проводнике Windows.",
     "background_effects_title": "Фоновые эффекты теперь стабильны",
     "next_theme_title": "Попробуйте новую тему Trilium",
     "new_layout_button": "Подробнее",
@@ -1999,6 +1988,11 @@
     "attachment_deleted": "Это вложение было удалено.",
     "you_can_also_open": ", вы также можете открыть "
   },
+  "web_view": {
+    "web_view": "Веб-страница",
+    "create_label": "Для начала создайте метку с URL-адресом, который вы хотите встроить, например, #webViewSrc=\"https://www.google.com\"",
+    "embed_websites": "Заметки типа \"Веб-страница\" позволяет встраивать веб-сайты в Trilium."
+  },
   "ribbon": {
     "widgets": "Виджеты ленты",
     "promoted_attributes_message": "Вкладка \"Продвигаемые атрибуты\" будет автоматически открыта, если таковые атрибуты установлены у заметки",
@@ -2100,11 +2094,7 @@
     "ui": "Пользовательский интерфейс"
   },
   "sql_result": {
-    "no_rows": "По этому запросу не возвращено ни одной строки",
-    "not_executed": "Запрос еще не выполнен.",
-    "failed": "Выполнение SQL-запроса завершилось с ошибкой",
-    "statement_result": "Результат заявления",
-    "execute_now": "Выполнить сейчас"
+    "no_rows": "По этому запросу не возвращено ни одной строки"
   },
   "editable_code": {
     "placeholder": "Введите содержимое для заметки с кодом..."
@@ -2199,14 +2189,7 @@
     "read_only_auto_description": "Эта заметка была автоматически переведена в режим только для чтения по соображениям производительности. Это автоматическое ограничение можно изменить в настройках.\n\nНажмите, чтобы временно отредактировать её.",
     "read_only_auto": "Автоматический режим \"только для чтения\"",
     "read_only_explicit_description": "Эта заметка была вручную установлена в режим «только для чтения».\nНажмите, чтобы временно отредактировать её.",
-    "read_only_explicit": "Только для чтения",
-    "save_status_saving": "Сохранение...",
-    "save_status_saved": "Сохранение",
-    "save_status_unsaved": "Не сохранено",
-    "save_status_error": "Ошибка сохранения",
-    "save_status_saving_tooltip": "Изменения сохраняются.",
-    "save_status_unsaved_tooltip": "Есть несохраненные изменения. Они будут сохранены автоматически через некоторое время.",
-    "save_status_error_tooltip": "Произошла ошибка при сохранении заметки. Если возможно, попробуйте скопировать содержимое заметки в другое место и перезагрузить приложение."
+    "read_only_explicit": "Только для чтения"
   },
   "breadcrumb": {
     "hoisted_badge_title": "Снять фокус",
@@ -2260,30 +2243,5 @@
   },
   "attributes_panel": {
     "title": "Атрибуты заметки"
-  },
-  "bookmark_buttons": {
-    "bookmarks": "Закладки"
-  },
-  "mobile_tab_switcher": {
-    "more_options": "Показать больше",
-    "title_one": "{{count}} вкладка",
-    "title_few": "{{count}} вкладки",
-    "title_many": "{{count}} вкладок"
-  },
-  "pdf": {
-    "pages_loading": "Загрузка...",
-    "pages_alt": "Страница {{pageNumber}}",
-    "pages_one": "{{count}} страница",
-    "pages_few": "{{count}} страницы",
-    "pages_many": "{{count}} страниц",
-    "layers_one": "{{count}} слой",
-    "layers_few": "{{count}} слоя",
-    "layers_many": "{{count}} слоев",
-    "attachments_one": "{{count}} вложение",
-    "attachments_few": "{{count}} вложения",
-    "attachments_many": "{{count}} вложений"
-  },
-  "platform_indicator": {
-    "available_on": "Доступно для {{platform}}"
   }
 }

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

@@ -662,8 +662,7 @@
     "show-cheatsheet": "顯示快捷鍵說明",
     "toggle-zen-mode": "禪模式",
     "new-version-available": "發現新更新",
-    "download-update": "取得版本 {{latestVersion}}",
-    "search_notes": "搜尋筆記"
+    "download-update": "取得版本 {{latestVersion}}"
   },
   "sync_status": {
     "unknown": "<p>同步狀態將在下一次同步嘗試開始後顯示。</p><p>點擊以立即觸發同步。</p>",
@@ -759,8 +758,7 @@
     "error_cannot_get_branch_id": "無法獲取 notePath '{{notePath}}' 的 branchId",
     "error_unrecognized_command": "無法識別的命令 {{command}}",
     "note_revisions": "筆記歷史版本",
-    "backlinks": "反向連結",
-    "content_language_switcher": "內文語言：{{language}}"
+    "backlinks": "反向連結"
   },
   "note_icon": {
     "change_note_icon": "更改筆記圖標",
@@ -912,8 +910,7 @@
     "unknown_search_option": "未知的搜尋選項 {{searchOptionName}}",
     "search_note_saved": "搜尋筆記已儲存至 {{- notePathTitle}}",
     "actions_executed": "已執行操作。",
-    "view_options": "查看選項：",
-    "option": "選項"
+    "view_options": "查看選項："
   },
   "similar_notes": {
     "title": "相似筆記",
@@ -1067,6 +1064,11 @@
     "note_detail_render_help_1": "之所以顯示此說明筆記，是因為該類型的渲染 HTML 沒有設定好必須的關聯。",
     "note_detail_render_help_2": "渲染筆記類型用於編寫 <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">腳本</a>。簡單說就是您可以寫HTML程式碼（或者加上一些JavaScript程式碼）， 然後這個筆記會把頁面渲染出來。要使其正常工作，您需要定義一個名為 \"renderNote\" 的 <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">關聯</a> 指向要呈現的 HTML 筆記。"
   },
+  "web_view": {
+    "web_view": "網頁顯示",
+    "embed_websites": "網頁顯示類型的筆記允許您將網站嵌入至 Trilium 中。",
+    "create_label": "首先，請新增一個帶有您要嵌入的 URL 地址的標籤，例如 #webViewSrc=\"https://www.bing.com\""
+  },
   "backend_log": {
     "refresh": "重新整理"
   },
@@ -2270,13 +2272,9 @@
   },
   "mobile_tab_switcher": {
     "more_options": "更多選項",
-    "title_one": "{{count}} 個分頁",
-    "title_other": ""
+    "title_one": "{{count}} 個分頁"
   },
   "platform_indicator": {
     "available_on": "可於 {{platform}} 使用"
-  },
-  "bookmark_buttons": {
-    "bookmarks": "書籤"
   }
 }

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

@@ -1134,6 +1134,11 @@
     "note_detail_render_help_1": "Ця довідка відображається, оскільки ця нотатка типу Render HTML не має необхідного зв'язку для належного функціонування.",
     "note_detail_render_help_2": "Тип нотатки Render HTML використовується для <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/scripts.html\">скриптів</a>. Коротше кажучи, у вас є нотатка з HTML-кодом (за бажанням з деяким JavaScript), і ця нотатка її відобразить. Щоб це запрацювало, вам потрібно визначити <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/attributes.html\">відношення</a> під назвою \"renderNote\", яке вказує на нотатку HTML для відображення."
   },
+  "web_view": {
+    "web_view": "Веб-перегляд",
+    "embed_websites": "Нотатка типу Веб-перегляд дозволяє вбудовувати веб-сайти в Trilium.",
+    "create_label": "Для початку створіть мітку з URL-адресою, яку ви хочете вбудувати, наприклад, #webViewSrc=\"https://www.google.com\""
+  },
   "backend_log": {
     "refresh": "Оновити"
   },

apps/client/src/types.d.ts

@@ -1,4 +1,4 @@
-import { IconRegistry, Locale } 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,32 +30,7 @@ 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;
-    hasBackgroundEffects: boolean;
-    isElectron: boolean;
-    isRtl: boolean;
-    iconRegistry: IconRegistry;
-    themeCssUrl: string;
-    themeUseNextAsBase?: "next" | "next-light" | "next-dark";
-    iconPackCss: string;
-    headingStyle: "plain" | "underline" | "markdown";
-    layoutOrientation: "vertical" | "horizontal";
-    currentLocale: Locale;
 }
 
 type RequireMethod = (moduleName: string) => any;

apps/client/src/widgets/NoteDetail.tsx

@@ -370,33 +370,7 @@ function showToast(type: "printing" | "exporting_pdf", progress: number = 0) {
 }
 
 function handlePrintReport(printReport?: PrintReport) {
-    if (!printReport) return;
-
-    if (printReport.type === "error") {
-        toast.showPersistent({
-            id: "print-error",
-            icon: "bx bx-error-circle",
-            title: t("note_detail.print_report_error_title"),
-            message: printReport.message,
-            buttons: printReport.stack ? [
-                {
-                    text: t("note_detail.print_report_collection_details_button"),
-                    onClick(api) {
-                        api.dismissToast();
-                        dialog.info(<>
-                            <p>{printReport.message}</p>
-                            <details>
-                                <summary>{t("note_detail.print_report_stack_trace")}</summary>
-                                <pre style="font-size: 0.85em; overflow-x: auto;">{printReport.stack}</pre>
-                            </details>
-                        </>, {
-                            title: t("note_detail.print_report_error_title")
-                        });
-                    }
-                }
-            ] : undefined
-        });
-    } else if (printReport.type === "collection" && printReport.ignoredNoteIds.length > 0) {
+    if (printReport?.type === "collection" && printReport.ignoredNoteIds.length > 0) {
         toast.showPersistent({
             id: "print-report",
             icon: "bx bx-collection",

apps/client/src/widgets/PromotedAttributes.css

@@ -16,10 +16,6 @@ body.mobile .promoted-attributes-widget {
     display: table;
 }
 
-body.experimental-feature-new-layout .promoted-attributes-container {
-    max-height: unset;
-}
-
 .promoted-attribute-cell {
     display: flex;
     align-items: center;
@@ -98,4 +94,4 @@ body.experimental-feature-new-layout .promoted-attributes-container {
     background: rgba(0, 0, 0, 0.5);
     transform: rotate(45deg);
     pointer-events: none;
-}
+}

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";
@@ -250,7 +250,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";
@@ -268,7 +268,7 @@ function useTriliumUpdateStatus() {
     }
 
     useEffect(() => {
-        if (!checkForUpdates) {
+        if (!checkForUpdates || !isStandalone) {
             setLatestVersion(undefined);
             return;
         }

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

@@ -19,3 +19,14 @@ body.prefers-centered-content .note-list-widget:not(.full-height) {
 .note-list-widget video {
     height: 100%;
 }
+
+/* #region Pagination */
+.note-list-pager {
+    font-size: 1rem;
+
+    span.current-page {
+        text-decoration: underline;
+        font-weight: bold;
+    }
+}
+/* #endregion */

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

@@ -4,8 +4,6 @@ import FNote from "../../entities/fnote";
 import froca from "../../services/froca";
 import { useNoteLabelInt } from "../react/hooks";
 import { t } from "../../services/i18n";
-import ActionButton from "../react/ActionButton";
-import Button from "../react/Button";
 
 interface PaginationContext {
     page: number;
@@ -19,79 +17,46 @@ interface PaginationContext {
 export function Pager({ page, pageSize, setPage, pageCount, totalNotes }: Omit<PaginationContext, "pageNotes">) {
     if (pageCount < 2) return;
 
-    const children = createPageButtons(page, setPage, pageCount);
+    let lastPrinted = false;
+    let children: ComponentChildren[] = [];
+    for (let i = 1; i <= pageCount; i++) {
+        if (pageCount < 20 || i <= 5 || pageCount - i <= 5 || Math.abs(page - i) <= 2) {
+            lastPrinted = true;
+
+            const startIndex = (i - 1) * pageSize + 1;
+            const endIndex = Math.min(totalNotes, i * pageSize);
+
+            if (i !== page) {
+                children.push((
+                    <a
+                        href="javascript:"
+                        title={t("pagination.page_title", { startIndex, endIndex })}
+                        onClick={() => setPage(i)}
+                    >
+                    {i}
+                    </a>
+                ))
+            } else {
+                // Current page
+                children.push(<span className="current-page">{i}</span>)
+            }
+
+            children.push(<>{" "}&nbsp;{" "}</>);
+        } else if (lastPrinted) {
+            children.push(<>{"... "}&nbsp;{" "}</>);
+            lastPrinted = false;
+        }
+    }
 
     return (
         <div class="note-list-pager">
-            <ActionButton
-                icon="bx bx-caret-left"
-                disabled={(page === 1)}
-                text={t("pagination.prev_page")}
-                onClick={() => {setPage(page - 1)}}
-            />
-
             {children}
-            
-            <ActionButton
-                icon="bx bx-caret-right"
-                disabled={(page === pageCount)}
-                text={t("pagination.next_page")}
-                onClick={() => {setPage(page + 1)}}
-            />
+
             <span className="note-list-pager-total-count">({t("pagination.total_notes", { count: totalNotes })})</span>
         </div>
     )
 }
 
-function createPageButtons(page: number, setPage: Dispatch<StateUpdater<number>>, pageCount: number): ComponentChildren[] {
-    const maxButtonCount = 9;
-    const maxLeftRightSegmentLength = 2;
-    
-    // The left-side segment
-    const leftLength = Math.min(pageCount, maxLeftRightSegmentLength);
-    const leftStart = 1;
-
-    // The middle segment
-    const middleMaxLength = maxButtonCount - maxLeftRightSegmentLength * 2;
-    const middleLength = Math.min(pageCount - leftLength, middleMaxLength);
-    let middleStart = page - Math.floor(middleLength / 2);
-    middleStart = Math.max(middleStart, leftLength + 1);
-
-    // The right-side segment
-    const rightLength = Math.min(pageCount - (middleLength + leftLength), maxLeftRightSegmentLength);
-    const rightStart = pageCount - rightLength + 1;
-    middleStart = Math.min(middleStart, rightStart - middleLength);
-
-    return [
-        ...createSegment(leftStart, leftLength, page, setPage, false),
-        ...createSegment(middleStart, middleLength, page, setPage, (middleStart - leftLength > 1)),
-        ...createSegment(rightStart, rightLength, page, setPage, (rightStart - (middleStart + middleLength - 1) > 1)),
-    ];
-
-}
-
-function createSegment(start: number, length: number, currentPage: number, setPage: Dispatch<StateUpdater<number>>, prependEllipsis: boolean): ComponentChildren[] {
-    const children: ComponentChildren[] = [];
-    
-    if (prependEllipsis) {
-        children.push("...");
-    }
-
-    for (let i = 0; i < length; i++) {
-        const pageNum = start + i;
-
-        children.push((
-            <Button
-                text={pageNum.toString()}
-                disabled={(pageNum === currentPage)}
-                onClick={() => setPage(pageNum)}
-            />
-        ));
-    }
-
-    return children;
-}
-
 export function usePagination(note: FNote, noteIds: string[]): PaginationContext {
     const [ page, setPage ] = useState(1);
     const [ pageNotes, setPageNotes ] = useState<FNote[]>();

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

@@ -7,14 +7,10 @@
 
   > .collection-properties {
     position: relative;
-    z-index: 998;
+    z-index: 2000;
   }
 }
 
-body.mobile .geo-view > .collection-properties {
-    z-index: 2500;
-}
-
 .geo-map-container {
   height: 100%;
   overflow: hidden;
@@ -26,7 +22,7 @@ body.mobile .geo-view > .collection-properties {
 
 .leaflet-top,
 .leaflet-bottom {
-  z-index: 997 !important;
+  z-index: 997;
 }
 
 .geo-view.placing-note .geo-map-container {

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

@@ -22,7 +22,7 @@ import { ViewModeProps } from "../interface";
 import { createNewNote, moveMarker } from "./api";
 import openContextMenu, { openMapContextMenu } from "./context_menu";
 import Map from "./map";
-import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS, MapLayer } from "./map_layer";
+import { DEFAULT_MAP_LAYER_NAME } from "./map_layer";
 import Marker, { GpxTrack } from "./marker";
 
 const DEFAULT_COORDINATES: [number, number] = [3.878638227135724, 446.6630455551659];
@@ -45,11 +45,10 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
     const [ state, setState ] = useState(State.Normal);
     const [ coordinates, setCoordinates ] = useState(viewConfig?.view?.center);
     const [ zoom, setZoom ] = useState(viewConfig?.view?.zoom);
+    const [ layerName ] = useNoteLabel(note, "map:style");
     const [ hasScale ] = useNoteLabelBoolean(note, "map:scale");
-    const [ hideLabels ] = useNoteLabelBoolean(note, "map:hideLabels");
     const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly");
     const [ notes, setNotes ] = useState<FNote[]>([]);
-    const layerData = useLayerData(note);
     const spacedUpdate = useSpacedUpdate(() => {
         if (viewConfig) {
             saveConfig(viewConfig);
@@ -153,7 +152,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
                 apiRef={apiRef} containerRef={containerRef}
                 coordinates={coordinates}
                 zoom={zoom}
-                layerData={layerData}
+                layerName={layerName ?? DEFAULT_MAP_LAYER_NAME}
                 viewportChanged={(coordinates, zoom) => {
                     if (!viewConfig) viewConfig = {};
                     viewConfig.view = { center: coordinates, zoom };
@@ -163,35 +162,13 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
                 onContextMenu={onContextMenu}
                 scale={hasScale}
             >
-                {notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} hideLabels={hideLabels} />)}
+                {notes.map(note => <NoteWrapper note={note} isReadOnly={isReadOnly} />)}
             </Map>}
             <GeoMapTouchBar state={state} map={apiRef.current} />
         </div>
     );
 }
 
-function useLayerData(note: FNote) {
-    const [ layerName ] = useNoteLabel(note, "map:style");
-    // Memo is needed because it would generate unnecessary reloads due to layer change.
-    const layerData = useMemo(() => {
-        // Custom layers.
-        if (layerName?.startsWith("http")) {
-            return {
-                name: "Custom",
-                type: "raster",
-                url: layerName,
-                attribution: ""
-            } satisfies MapLayer;
-        }
-
-        // Built-in layers.
-        const layerData = MAP_LAYERS[layerName ?? ""] ?? MAP_LAYERS[DEFAULT_MAP_LAYER_NAME];
-        return layerData;
-    }, [ layerName ]);
-
-    return layerData;
-}
-
 function ToggleReadOnlyButton({ note }: { note: FNote }) {
     const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
 
@@ -202,26 +179,22 @@ function ToggleReadOnlyButton({ note }: { note: FNote }) {
     />;
 }
 
-function NoteWrapper({ note, isReadOnly, hideLabels }: {
-    note: FNote,
-    isReadOnly: boolean,
-    hideLabels: boolean
-}) {
+function NoteWrapper({ note, isReadOnly }: { note: FNote, isReadOnly: boolean }) {
     const mime = useNoteProperty(note, "mime");
     const [ location ] = useNoteLabel(note, LOCATION_ATTRIBUTE);
 
     if (mime === "application/gpx+xml") {
-        return <NoteGpxTrack note={note} hideLabels={hideLabels} />;
+        return <NoteGpxTrack note={note} />;
     }
 
     if (location) {
         const latLng = location?.split(",", 2).map((el) => parseFloat(el)) as [ number, number ] | undefined;
         if (!latLng) return;
-        return <NoteMarker note={note} editable={!isReadOnly} latLng={latLng} hideLabels={hideLabels} />;
+        return <NoteMarker note={note} editable={!isReadOnly} latLng={latLng} />;
     }
 }
 
-function NoteMarker({ note, editable, latLng, hideLabels }: { note: FNote, editable: boolean, latLng: [number, number], hideLabels: boolean }) {
+function NoteMarker({ note, editable, latLng }: { note: FNote, editable: boolean, latLng: [number, number] }) {
     // React to changes
     const [ color ] = useNoteLabel(note, "color");
     const [ iconClass ] = useNoteLabel(note, "iconClass");
@@ -229,9 +202,8 @@ function NoteMarker({ note, editable, latLng, hideLabels }: { note: FNote, edita
 
     const title = useNoteProperty(note, "title");
     const icon = useMemo(() => {
-        const titleOrNone = hideLabels ? undefined : title;
-        return buildIcon(note.getIcon(), note.getColorClass() ?? undefined, titleOrNone, note.noteId, archived);
-    }, [ iconClass, color, title, note.noteId, archived, hideLabels ]);
+        return buildIcon(note.getIcon(), note.getColorClass() ?? undefined, title, note.noteId, archived);
+    }, [ iconClass, color, title, note.noteId, archived]);
 
     const onClick = useCallback(() => {
         appContext.triggerCommand("openInPopup", { noteIdOrPath: note.noteId });
@@ -263,7 +235,7 @@ function NoteMarker({ note, editable, latLng, hideLabels }: { note: FNote, edita
     />;
 }
 
-function NoteGpxTrack({ note, hideLabels }: { note: FNote, hideLabels?: boolean }) {
+function NoteGpxTrack({ note }: { note: FNote }) {
     const [ xmlString, setXmlString ] = useState<string>();
     const blob = useNoteBlob(note);
 
@@ -284,7 +256,7 @@ function NoteGpxTrack({ note, hideLabels }: { note: FNote, hideLabels?: boolean
 
     const options = useMemo<GPXOptions>(() => ({
         markers: {
-            startIcon: buildIcon(note.getIcon(), note.getColorClass(), hideLabels ? undefined : note.title),
+            startIcon: buildIcon(note.getIcon(), note.getColorClass(), note.title),
             endIcon: buildIcon("bxs-flag-checkered"),
             wptIcons: {
                 "": buildIcon("bx bx-pin")
@@ -293,7 +265,7 @@ function NoteGpxTrack({ note, hideLabels }: { note: FNote, hideLabels?: boolean
         polyline_options: {
             color: note.getLabelValue("color") ?? "blue"
         }
-    }), [ color, iconClass, hideLabels ]);
+    }), [ color, iconClass ]);
     return xmlString && <GpxTrack gpxXmlString={xmlString} options={options} />;
 }
 

apps/client/src/widgets/collections/geomap/map.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useImperativeHandle, useRef, useState } from "preact/hooks";
 import L, { control, LatLng, Layer, LeafletMouseEvent } from "leaflet";
 import "leaflet/dist/leaflet.css";
-import { MAP_LAYERS, type MapLayer } from "./map_layer";
+import { MAP_LAYERS } from "./map_layer";
 import { ComponentChildren, createContext, RefObject } from "preact";
 import { useElementSize, useSyncedRef } from "../../react/hooks";
 
@@ -12,7 +12,7 @@ interface MapProps {
     containerRef?: RefObject<HTMLDivElement>;
     coordinates: LatLng | [number, number];
     zoom: number;
-    layerData: MapLayer;
+    layerName: string;
     viewportChanged: (coordinates: LatLng, zoom: number) => void;
     children: ComponentChildren;
     onClick?: (e: LeafletMouseEvent) => void;
@@ -21,7 +21,7 @@ interface MapProps {
     scale: boolean;
 }
 
-export default function Map({ coordinates, zoom, layerData, viewportChanged, children, onClick, onContextMenu, scale, apiRef, containerRef: _containerRef, onZoom }: MapProps) {
+export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale, apiRef, containerRef: _containerRef, onZoom }: MapProps) {
     const mapRef = useRef<L.Map>(null);
     const containerRef = useSyncedRef<HTMLDivElement>(_containerRef);
 
@@ -49,6 +49,8 @@ export default function Map({ coordinates, zoom, layerData, viewportChanged, chi
     const [ layer, setLayer ] = useState<Layer>();
     useEffect(() => {
         async function load() {
+            const layerData = MAP_LAYERS[layerName];
+
             if (layerData.type === "vector") {
                 const style = (typeof layerData.style === "string" ? layerData.style : await layerData.style());
                 await import("@maplibre/maplibre-gl-leaflet");
@@ -66,7 +68,7 @@ export default function Map({ coordinates, zoom, layerData, viewportChanged, chi
         }
 
         load();
-    }, [ layerData ]);
+    }, [ layerName ]);
 
     // Attach layer to the map.
     useEffect(() => {
@@ -137,7 +139,7 @@ export default function Map({ coordinates, zoom, layerData, viewportChanged, chi
     return (
         <div
             ref={containerRef}
-            className={`geo-map-container ${layerData.isDarkTheme ? "dark" : ""}`}
+            className={`geo-map-container ${MAP_LAYERS[layerName].isDarkTheme ? "dark" : ""}`}
         >
             <ParentMap.Provider value={mapRef.current}>
                 {children}

apps/client/src/widgets/collections/geomap/map_layer.ts

@@ -1,17 +1,20 @@
-export type MapLayer = ({
+export interface MapLayer {
+    name: string;
+    isDarkTheme?: boolean;
+}
+
+interface VectorLayer extends MapLayer {
     type: "vector";
     style: string | (() => Promise<{}>)
-} | {
+}
+
+interface RasterLayer extends MapLayer {
     type: "raster";
     url: string;
     attribution: string;
-}) & {
-    // Common properties
-    name: string;
-    isDarkTheme?: boolean;
-};
+}
 
-export const MAP_LAYERS: Record<string, MapLayer> = {
+export const MAP_LAYERS: Record<string, VectorLayer | RasterLayer> = {
     "openstreetmap": {
         name: "OpenStreetMap",
         type: "raster",

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

@@ -100,206 +100,23 @@
     overflow: auto;
 }
 
-/* #region List view */
-
-@keyframes note-preview-show {
-    from {
-        opacity: 0;
-    } to {
-        opacity: 1;
-    }
+.note-expander {
+    font-size: x-large;
+    position: relative;
+    top: 3px;
+    cursor: pointer;
 }
 
-.nested-note-list {
-    --card-nested-section-indent: 25px;
-
-    &.search-results {
-        --card-nested-section-indent: 32px;
-    }
+.note-list-pager {
+    text-align: center;
 }
 
-/* List item */
-.nested-note-list-item {
-    h5 {
-        display: flex;
-        align-items: center;
-        font-size: 1em;
-        font-weight: normal;
-        margin: 0;
-    }
-
-    .note-expander {
-        margin-inline-end: 4px;
-        font-size: x-large;
-        cursor: pointer;
-    }
-
-    .tn-icon {
-        margin-inline-end: 8px;
-        color: var(--note-list-view-icon-color);
-        font-size: 1.2em;
-    }
-
-    .note-book-title {
-        --link-hover-background: transparent;
-        --link-hover-color: currentColor;
-        color: inherit;
-        font-weight: normal;
-    }
-
-    .note-path {
-        margin-left: 0.5em;
-        vertical-align: middle;
-        opacity: 0.5;
-    }
-
-    .note-list-attributes {
-        flex-grow: 1;
-        margin-inline-start: 1em;
-        text-align: right;
-        font-size: .75em;
-        opacity: .75;
-    }
-
-    .nested-note-list-item-menu {
-        margin-inline-start: 8px;
-        flex-shrink: 0;
-    }
-
-    &.archived {
-        span.tn-icon + span,
-        .tn-icon {
-            opacity: .6;
-        }
-    }
-
-    &.use-note-color {
-        span.tn-icon + span,
-        .nested-note-list:not(.search-results) & .tn-icon,
-        .rendered-note-attributes {
-            color: var(--custom-color);
-        }
-    }
+.note-list.list-view .note-path {
+    margin-left: 0.5em;
+    vertical-align: middle;
+    opacity: 0.5;
 }
 
-.nested-note-list:not(.search-results) h5 {
-    span.tn-icon + span,
-    .note-list-attributes {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-}
-
-/* List item (search results view) */
-.nested-note-list.search-results .nested-note-list-item {
-    span.tn-icon + span > span {
-        display: flex;
-        flex-direction: column-reverse;
-        align-items: flex-start;
-    }
-
-    small {
-        line-height: .85em;
-    }
-
-    .note-path {
-        margin-left: 0;
-        font-size: .85em;
-        line-height: .85em;
-        font-weight: 500;
-        letter-spacing: .5pt;
-    }
-
-    .tn-icon {
-        display: flex;
-        flex-shrink: 0;
-        justify-content: center;
-        align-items: center;
-        width: 1.75em;
-        height: 1.75em;
-        margin-inline-end: 12px;
-        border-radius: 50%;
-        background: var(--note-icon-custom-background-color, var(--note-list-view-large-icon-background));
-        font-size: 1.2em;
-        color: var(--note-icon-custom-color, var(--note-list-view-large-icon-color));
-    }
-
-    h5 .ck-find-result {
-        background: var(--note-list-view-search-result-highlight-background);
-        color: var(--note-list-view-search-result-highlight-color);
-        font-weight: 600;
-        text-decoration: underline;
-    }
-}
-
-/* Note content preview */
-.nested-note-list .note-book-content {
-    display: none;
-    outline: 1px solid var(--note-list-view-content-background);
-    border-radius: 8px;
-    background-color: var(--note-list-view-content-background);
-    overflow: hidden;
-    user-select: text;
-    font-size: .85rem;
-    animation: note-preview-show .25s ease-out;
-    will-change: opacity;
-
-    &.note-book-content-ready {
-        display: block;
-    }
-
-    > .rendered-content > *:last-child {
-        margin-bottom: 0;
-    }
-
-    &.type-text {
-        padding: 8px 24px;
-
-        .ck-content > *:last-child {
-            margin-bottom: 0;
-        }
-    }
-
-    &.type-protectedSession {
-        padding: 20px;
-    }
-
-    &.type-image {
-        padding: 0;
-    }
-
-    &.type-pdf {
-        iframe {
-            height: 50vh;
-        }
-
-        .file-footer {
-            padding: 8px;
-        }
-    }
-
-    &.type-webView {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        min-height: 50vh;
-    }
-
-    .ck-find-result {
-        outline: 2px solid var(--note-list-view-content-search-result-highlight-background);
-        border-radius: 4px;
-        background: var(--note-list-view-content-search-result-highlight-background);
-        color: var(--note-list-view-content-search-result-highlight-color);
-    }
-}
-
-.note-content-preview:has(.note-book-content:empty) {
-    display: none;
-}
-
-/* #endregion */
-
 /* #region Grid view */
 .note-list.grid-view .note-list-container {
     display: flex;
@@ -311,10 +128,6 @@
     border: 1px solid transparent;
 }
 
-body.mobile .note-list.grid-view .note-book-card {
-    flex-basis: 150px;
-}
-
 .note-list.grid-view .note-book-card {
     max-height: 300px;
 }

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

@@ -1,5 +1,4 @@
 import "./ListOrGridView.css";
-import { Card, CardSection } from "../../react/Card";
 
 import { useEffect, useRef, useState } from "preact/hooks";
 
@@ -15,11 +14,6 @@ import NoteLink from "../../react/NoteLink";
 import { ViewModeProps } from "../interface";
 import { Pager, usePagination } from "../Pagination";
 import { filterChildNotes, useFilteredNoteIds } from "./utils";
-import { JSX } from "preact/jsx-runtime";
-import { clsx } from "clsx";
-import ActionButton from "../../react/ActionButton";
-import linkContextMenuService from "../../../menus/link_context_menu";
-import { TargetedMouseEvent } from "preact";
 
 export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }: ViewModeProps<{}>) {
     const expandDepth = useExpansionDepth(note);
@@ -39,7 +33,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
             { noteIds.length > 0 && <div class="note-list-wrapper">
                 {!hasCollectionProperties && <Pager {...pagination} />}
 
-                <Card className={clsx("nested-note-list", {"search-results": (noteType === "search")})}>
+                <div class="note-list-container use-tn-links">
                     {pageNotes?.map(childNote => (
                         <ListNoteCard
                             key={childNote.noteId}
@@ -47,7 +41,7 @@ export function ListView({ note, noteIds: unfilteredNoteIds, highlightedTokens }
                             expandDepth={expandDepth} highlightedTokens={highlightedTokens}
                             currentLevel={1} includeArchived={includeArchived} />
                     ))}
-                </Card>
+                </div>
 
                 <Pager {...pagination} />
             </div>}
@@ -99,52 +93,27 @@ function ListNoteCard({ note, parentNote, highlightedTokens, currentLevel, expan
     // Reset expand state if switching to another note, or if user manually toggled expansion state.
     useEffect(() => setExpanded(currentLevel <= expandDepth), [ note, currentLevel, expandDepth ]);
 
-    let subSections: JSX.Element | undefined = undefined;
-    if (isExpanded) {
-        subSections = <>
-            <CardSection className="note-content-preview">
-                <NoteContent note={note}
-                             highlightedTokens={highlightedTokens}
-                             noChildrenList
-                             includeArchivedNotes={includeArchived} />
-            </CardSection>
-
-            <NoteChildren note={note}
-                          parentNote={parentNote}
-                          highlightedTokens={highlightedTokens}
-                          currentLevel={currentLevel}
-                          expandDepth={expandDepth}
-                          includeArchived={includeArchived} />
-        </>
-    }
-    
     return (
-        <CardSection
-            className={clsx("nested-note-list-item", "no-tooltip-preview", note.getColorClass(), {
-                "expanded": isExpanded,
-                "archived": note.isArchived
-            })}
-            subSections={subSections}
-            subSectionsVisible={isExpanded}
-            highlightOnHover
+        <div
+            className={`note-book-card no-tooltip-preview ${isExpanded ? "expanded" : ""} ${note.isArchived ? "archived" : ""}`}
             data-note-id={note.noteId}
         >
-            <h5>
-                <span className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`} 
-                      onClick={() => setExpanded(!isExpanded)}/>
-                <Icon className="note-icon" icon={note.getIcon()} />
-                <NoteLink className="note-book-title"
-                          notePath={notePath}
-                          noPreview
-                          showNotePath={parentNote.type === "search"}
-                          highlightedTokens={highlightedTokens} />
-                <NoteAttributes note={note} />
-                <ActionButton className="nested-note-list-item-menu"
-                              icon="bx bx-dots-vertical-rounded" text=""
-                              onClick={(e) => openNoteMenu(notePath, e)} 
+            <h5 className="note-book-header">
+                <span
+                    className={`note-expander ${isExpanded ? "bx bx-chevron-down" : "bx bx-chevron-right"}`}
+                    onClick={() => setExpanded(!isExpanded)}
                 />
+
+                <Icon className="note-icon" icon={note.getIcon()} />
+                <NoteLink className="note-book-title" notePath={notePath} noPreview showNotePath={parentNote.type === "search"} highlightedTokens={highlightedTokens} />
+                <NoteAttributes note={note} />
             </h5>
-        </CardSection>
+
+            {isExpanded && <>
+                <NoteContent note={note} highlightedTokens={highlightedTokens} noChildrenList includeArchivedNotes={includeArchived} />
+                <NoteChildren note={note} parentNote={parentNote} highlightedTokens={highlightedTokens} currentLevel={currentLevel} expandDepth={expandDepth} includeArchived={includeArchived} />
+            </>}
+        </div>
     );
 }
 
@@ -196,9 +165,6 @@ export function NoteContent({ note, trim, noChildrenList, highlightedTokens, inc
     const contentRef = useRef<HTMLDivElement>(null);
     const highlightSearch = useImperativeSearchHighlighlighting(highlightedTokens);
 
-    const [ready, setReady] = useState(false);
-    const [noteType, setNoteType] = useState<string>("none");
-
     useEffect(() => {
         content_renderer.getRenderedContent(note, {
             trim,
@@ -213,19 +179,17 @@ export function NoteContent({ note, trim, noChildrenList, highlightedTokens, inc
                 } else {
                     contentRef.current.replaceChildren();
                 }
+                contentRef.current.classList.add(`type-${type}`);
                 highlightSearch(contentRef.current);
-                setNoteType(type);
-                setReady(true);
             })
             .catch(e => {
                 console.warn(`Caught error while rendering note '${note.noteId}' of type '${note.type}'`);
                 console.error(e);
                 contentRef.current?.replaceChildren(t("collections.rendering_error"));
-                setReady(true);
             });
     }, [ note, highlightedTokens ]);
 
-    return <div ref={contentRef} className={clsx("note-book-content", `type-${noteType}`, {"note-book-content-ready": ready})} />;
+    return <div ref={contentRef} className="note-book-content" />;
 }
 
 function NoteChildren({ note, parentNote, highlightedTokens, currentLevel, expandDepth, includeArchived }: {
@@ -274,8 +238,3 @@ function useExpansionDepth(note: FNote) {
     return parseInt(expandDepth, 10);
 
 }
-
-function openNoteMenu(notePath, e: TargetedMouseEvent<HTMLElement>) {
-    linkContextMenuService.openContextMenu(notePath, e);
-    e.stopPropagation()
-}

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/containers/scrolling_container.css

@@ -19,10 +19,6 @@
     }
 }
 
-body.mobile .scrolling-container {
-    --content-margin-inline: 8px;
-}
-
 .note-split.type-code:not(.mime-text-x-sqlite) {
     &> .scrolling-container {
         background-color: var(--code-background-color);

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

@@ -32,12 +32,6 @@ body.mobile .modal.popup-editor-dialog .modal-dialog {
     display: flex;
     align-items: center;
     margin-block: 0;
-
-    .note-icon-widget {
-        display: flex;
-        align-items: center;
-        margin-inline-start: 0;
-    }
 }
 
 .modal.popup-editor-dialog .modal-header .note-title-widget {

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

@@ -67,7 +67,10 @@ export default function PopupEditor() {
         <NoteContextContext.Provider value={noteContext}>
             <DialogWrapper>
                 <Modal
-                    title={<TitleRow />}
+                    title={<>
+                        <TitleRow />
+                        {isNewLayout && <NoteBadges />}
+                    </>}
                     customTitleBarButtons={[{
                         iconClassName: "bx-expand-alt",
                         title: t("popup-editor.maximize"),
@@ -120,7 +123,6 @@ export function TitleRow() {
         <div className="title-row">
             <NoteIcon />
             <NoteTitleWidget />
-            {isNewLayout && <NoteBadges />}
         </div>
     );
 }

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/layout/ActiveContentBadges.tsx

@@ -1,282 +0,0 @@
-import { BUILTIN_ATTRIBUTES } from "@triliumnext/commons";
-import clsx from "clsx";
-import { useEffect, useState } from "preact/hooks";
-
-import FNote from "../../entities/fnote";
-import attributes from "../../services/attributes";
-import { t } from "../../services/i18n";
-import { openInAppHelpFromUrl } from "../../services/utils";
-import { BadgeWithDropdown } from "../react/Badge";
-import { FormDropdownDivider, FormListItem } from "../react/FormList";
-import FormToggle from "../react/FormToggle";
-import { useNoteContext, useTriliumEvent } from "../react/hooks";
-import { BookProperty, ViewProperty } from "../react/NotePropertyMenu";
-
-const NON_DANGEROUS_ACTIVE_CONTENT = [ "appCss", "appTheme" ];
-const DANGEROUS_ATTRIBUTES = BUILTIN_ATTRIBUTES.filter(a => a.isDangerous || NON_DANGEROUS_ACTIVE_CONTENT.includes(a.name));
-const activeContentLabels = [ "iconPack", "widget", "appCss", "appTheme" ] as const;
-
-interface ActiveContentInfo {
-    type: "iconPack" | "backendScript" | "frontendScript" | "widget" | "appCss" | "renderNote" | "webView" | "appTheme";
-    isEnabled: boolean;
-    canToggleEnabled: boolean;
-}
-
-const executeOption: BookProperty = {
-    type: "button",
-    icon: "bx bx-play",
-    label: t("active_content_badges.menu_execute_now"),
-    onClick: context => context.triggerCommand("runActiveNote")
-};
-
-const typeMappings: Record<ActiveContentInfo["type"], {
-    title: string;
-    icon: string;
-    helpPage: string;
-    apiDocsPage?: string;
-    isExecutable?: boolean;
-    additionalOptions?: BookProperty[];
-}> = {
-    iconPack: {
-        title: t("active_content_badges.type_icon_pack"),
-        icon: "bx bx-package",
-        helpPage: "g1mlRoU8CsqC",
-    },
-    backendScript: {
-        title: t("active_content_badges.type_backend_script"),
-        icon: "bx bx-server",
-        helpPage: "SPirpZypehBG",
-        apiDocsPage: "MEtfsqa5VwNi",
-        isExecutable: true,
-        additionalOptions: [
-            executeOption,
-            {
-                type: "combobox",
-                bindToLabel: "run",
-                label: t("active_content_badges.menu_run"),
-                icon: "bx bx-rss",
-                dropStart: true,
-                options: [
-                    { value: null, label: t("active_content_badges.menu_run_disabled") },
-                    { value: "backendStartup", label: t("active_content_badges.menu_run_backend_startup") },
-                    { value: "daily", label: t("active_content_badges.menu_run_daily") },
-                    { value: "hourly", label: t("active_content_badges.menu_run_hourly") }
-                ]
-            }
-        ]
-    },
-    frontendScript: {
-        title: t("active_content_badges.type_frontend_script"),
-        icon: "bx bx-window",
-        helpPage: "yIhgI5H7A2Sm",
-        apiDocsPage: "Q2z6av6JZVWm",
-        isExecutable: true,
-        additionalOptions: [
-            executeOption,
-            {
-                type: "combobox",
-                bindToLabel: "run",
-                label: t("active_content_badges.menu_run"),
-                icon: "bx bx-rss",
-                dropStart: true,
-                options: [
-                    { value: null, label: t("active_content_badges.menu_run_disabled") },
-                    { value: "frontendStartup", label: t("active_content_badges.menu_run_frontend_startup") },
-                    { value: "mobileStartup", label: t("active_content_badges.menu_run_mobile_startup") },
-                ]
-            },
-            { type: "separator" },
-            {
-                type: "button",
-                label: t("active_content_badges.menu_change_to_widget"),
-                icon: "bx bxs-widget",
-                onClick: ({ note }) => attributes.setLabel(note.noteId, "widget")
-            }
-        ]
-    },
-    widget: {
-        title: t("active_content_badges.type_widget"),
-        icon: "bx bxs-widget",
-        helpPage: "MgibgPcfeuGz",
-        additionalOptions: [
-            {
-                type: "button",
-                label: t("active_content_badges.menu_change_to_frontend_script"),
-                icon: "bx bx-window",
-                onClick: ({ note }) => {
-                    attributes.removeOwnedLabelByName(note, "widget");
-                    attributes.removeOwnedLabelByName(note, "disabled:widget");
-                }
-            }
-        ]
-    },
-    appCss: {
-        title: t("active_content_badges.type_app_css"),
-        icon: "bx bxs-file-css",
-        helpPage: "AlhDUqhENtH7"
-    },
-    renderNote: {
-        title: t("active_content_badges.type_render_note"),
-        icon: "bx bx-extension",
-        helpPage: "HcABDtFCkbFN"
-    },
-    webView: {
-        title: t("active_content_badges.type_web_view"),
-        icon: "bx bx-globe",
-        helpPage: "1vHRoWCEjj0L"
-    },
-    appTheme: {
-        title :t("active_content_badges.type_app_theme"),
-        icon: "bx bx-palette",
-        helpPage: "7NfNr5pZpVKV",
-        additionalOptions: [
-            {
-                type: "combobox",
-                bindToLabel: "appThemeBase",
-                label: t("active_content_badges.menu_theme_base"),
-                icon: "bx bx-layer",
-                dropStart: true,
-                options: [
-                    { label: t("theme.auto_theme"), value: null },
-                    { type: "separator" },
-                    { label: t("theme.triliumnext"), value: "next" },
-                    { label: t("theme.triliumnext-light"), value: "next-light" },
-                    { label: t("theme.triliumnext-dark"), value: "next-dark" }
-                ]
-            }
-        ]
-    }
-};
-
-export function ActiveContentBadges() {
-    const { note } = useNoteContext();
-    const info = useActiveContentInfo(note);
-
-    return (note && info &&
-        <>
-            {info.canToggleEnabled && <ActiveContentToggle info={info} note={note} />}
-            <ActiveContentBadge info={info} note={note} />
-        </>
-    );
-}
-
-function ActiveContentBadge({ info, note }: { note: FNote, info: ActiveContentInfo }) {
-    const { title, icon, helpPage, apiDocsPage, additionalOptions } = typeMappings[info.type];
-    return (
-        <BadgeWithDropdown
-            className={clsx("active-content-badge", info.canToggleEnabled && !info.isEnabled && "disabled")}
-            icon={icon}
-            text={title}
-            dropdownOptions={{
-                dropdownContainerClassName: "mobile-bottom-menu",
-                mobileBackdrop: true
-            }}
-        >
-            {additionalOptions?.length && (
-                <>
-                    {additionalOptions?.map((property, i) => (
-                        <ViewProperty key={i} note={note} property={property} />
-                    ))}
-                    <FormDropdownDivider />
-                </>
-            )}
-
-            <FormListItem
-                icon="bx bx-help-circle"
-                onClick={() => openInAppHelpFromUrl(helpPage)}
-            >{t("active_content_badges.menu_docs")}</FormListItem>
-
-            {apiDocsPage && <FormListItem
-                icon="bx bx-book-content"
-                onClick={() => openInAppHelpFromUrl(apiDocsPage)}
-            >{t("code_buttons.trilium_api_docs_button_title")}</FormListItem>}
-        </BadgeWithDropdown>
-    );
-}
-
-function ActiveContentToggle({ note, info }: { note: FNote, info: ActiveContentInfo }) {
-    const { title } = typeMappings[info.type];
-
-    return info && <FormToggle
-        switchOnName="" switchOffName=""
-        currentValue={info.isEnabled}
-        switchOffTooltip={t("active_content_badges.toggle_tooltip_disable_tooltip", { type: title })}
-        switchOnTooltip={t("active_content_badges.toggle_tooltip_enable_tooltip", { type: title })}
-        onChange={async (willEnable) => {
-            await Promise.all(note.getOwnedAttributes()
-                .map(attr => ({ name: attributes.getNameWithoutDangerousPrefix(attr.name), type: attr.type }))
-                .filter(({ name, type }) => DANGEROUS_ATTRIBUTES.some(item => item.name === name && item.type === type))
-                .map(({ name, type }) => attributes.toggleDangerousAttribute(note, type, name, willEnable)));
-        }}
-    />;
-}
-
-function useActiveContentInfo(note: FNote | null | undefined) {
-    const [ info, setInfo ] = useState<ActiveContentInfo | null>(null);
-
-    function refresh() {
-        let type: ActiveContentInfo["type"] | null = null;
-        let isEnabled = false;
-        let canToggleEnabled = false;
-
-        if (!note) {
-            setInfo(null);
-            return;
-        }
-
-        if (note.type === "render") {
-            type = "renderNote";
-            isEnabled = note.hasRelation("renderNote");
-        } else if (note.type === "webView") {
-            type = "webView";
-            isEnabled = note.hasLabel("webViewSrc");
-        } else if (note.type === "code" && note.mime === "application/javascript;env=backend") {
-            type = "backendScript";
-            for (const backendLabel of [ "run", "customRequestHandler", "customResourceProvider" ]) {
-                isEnabled ||= note.hasLabel(backendLabel);
-
-                if (!canToggleEnabled && note.hasLabelOrDisabled(backendLabel)) {
-                    canToggleEnabled = true;
-                }
-            }
-        } else if (note.type === "code" && note.mime === "application/javascript;env=frontend") {
-            type = "frontendScript";
-            isEnabled = note.hasLabel("widget") || note.hasLabel("run");
-            canToggleEnabled = note.hasLabelOrDisabled("widget") || note.hasLabelOrDisabled("run");
-        } else if (note.type === "code" && note.hasLabelOrDisabled("appTheme")) {
-            isEnabled = note.hasLabel("appTheme");
-            canToggleEnabled = true;
-        }
-
-        for (const labelToCheck of activeContentLabels) {
-            if (note.hasLabel(labelToCheck)) {
-                type = labelToCheck;
-                isEnabled = true;
-                canToggleEnabled = true;
-                break;
-            } else if (note.hasLabel(`disabled:${labelToCheck}`)) {
-                type = labelToCheck;
-                isEnabled = false;
-                canToggleEnabled = true;
-                break;
-            }
-        }
-
-        if (type) {
-            setInfo({ type, isEnabled, canToggleEnabled });
-        } else {
-            setInfo(null);
-        }
-    }
-
-    // Refresh on note change.
-    useEffect(refresh, [ note ]);
-
-    useTriliumEvent("entitiesReloaded", ({ loadResults }) => {
-        if (loadResults.getAttributeRows().some(attr => attributes.isAffecting(attr, note))) {
-            refresh();
-        }
-    });
-
-    return info;
-}

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

@@ -37,10 +37,6 @@
                 pointer-events: none;
             }
         }
-        &.active-content-badge { --color: var(--badge-active-content-background-color); }
-        &.active-content-badge.disabled {
-            opacity: 0.5;
-        }
 
         min-width: 0;
 
@@ -49,11 +45,6 @@
             text-overflow: ellipsis;
             min-width: 0;
         }
-
-        .switch-button {
-            --switch-track-height: 8px;
-            --switch-track-width: 30px;
-        }
     }
 
     .dropdown-badge {

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

@@ -10,7 +10,6 @@ import { FormDropdownDivider, FormListItem } from "../react/FormList";
 import { useGetContextData, useIsNoteReadOnly, useNoteContext, useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
 import { useShareState } from "../ribbon/BasicPropertiesTab";
 import { useShareInfo } from "../shared_info";
-import { ActiveContentBadges } from "./ActiveContentBadges";
 
 export default function NoteBadges() {
     return (
@@ -20,7 +19,6 @@ export default function NoteBadges() {
             <ShareBadge />
             <ClippedNoteBadge />
             <ExecuteBadge />
-            <ActiveContentBadges />
         </div>
     );
 }

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

@@ -0,0 +1,26 @@
+import { isMobile } from "../../services/utils";
+import Admonition from "../react/Admonition";
+
+export default function StandaloneWarningBar() {
+    return (
+        <div
+            className="standalone-warning-bar"
+            style={{
+                contain: "none"
+            }}
+        >
+            <Admonition
+                type="caution"
+                style={{
+                    margin: 0,
+                    fontSize: "0.8em"
+                }}
+            >
+                {isMobile()
+                    ? "Running Trilium standalone. Beware of data loss and other issues."
+                    : "You are running Trilium in standalone mode. Some features are not available, and you may experience issues or data loss. Use the desktop application or self-hosted server for the best experience."
+                }
+            </Admonition>
+        </div>
+    );
+}

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

@@ -37,10 +37,6 @@
                 &:hover {
                     background: var(--input-background-color);
                 }
-
-                .text {
-                    white-space: nowrap;
-                }
             }
 
             .status-bar-dropdown-button {

apps/client/src/widgets/mobile_widgets/TabSwitcher.css

@@ -35,6 +35,11 @@
             display: flex;
             flex-direction: column;
 
+            &.with-hue {
+                background-color: hsl(var(--bg-hue), 8.8%, 11.2%);
+                border-color: hsl(var(--bg-hue), 9.4%, 25.1%);
+            }
+
             &.active {
                 outline: 4px solid var(--more-accented-background-color);
                 background: var(--card-background-hover-color);

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

@@ -2,16 +2,18 @@ import "./CollectionProperties.css";
 
 import { t } from "i18next";
 import { ComponentChildren } from "preact";
-import { useRef } from "preact/hooks";
+import { useContext, useRef } from "preact/hooks";
+import { Fragment } from "preact/jsx-runtime";
 
 import FNote from "../../entities/fnote";
 import { ViewTypeOptions } from "../collections/interface";
 import Dropdown from "../react/Dropdown";
-import { FormDropdownDivider, FormListItem } from "../react/FormList";
-import { useNoteProperty, useTriliumEvent } from "../react/hooks";
+import { FormDropdownDivider, FormDropdownSubmenu, FormListItem, FormListToggleableItem } from "../react/FormList";
+import FormTextBox from "../react/FormTextBox";
+import { useNoteLabel, useNoteLabelBoolean, useNoteLabelWithDefault, useNoteProperty, useTriliumEvent } from "../react/hooks";
 import Icon from "../react/Icon";
-import { CheckBoxProperty, ViewProperty } from "../react/NotePropertyMenu";
-import { bookPropertiesConfig } from "../ribbon/collection-properties-config";
+import { ParentComponent } from "../react/react_utils";
+import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, ComboBoxItem, ComboBoxProperty, NumberProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
 import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
 
 export const ICON_MAPPINGS: Record<ViewTypeOptions, string> = {
@@ -83,11 +85,9 @@ function ViewOptions({ note, viewType }: { note: FNote, viewType: ViewTypeOption
         <Dropdown
             buttonClassName="bx bx-cog icon-action"
             hideToggleArrow
-            dropdownContainerClassName="mobile-bottom-menu"
-            mobileBackdrop
         >
-            {properties.map((property, index) => (
-                <ViewProperty key={index} note={note} property={property} />
+            {properties.map(property => (
+                <ViewProperty key={property.label} note={note} property={property} />
             ))}
             {properties.length > 0 && <FormDropdownDivider />}
 
@@ -107,3 +107,127 @@ function ViewOptions({ note, viewType }: { note: FNote, viewType: ViewTypeOption
         </Dropdown>
     );
 }
+
+function ViewProperty({ note, property }: { note: FNote, property: BookProperty }) {
+    switch (property.type) {
+        case "button":
+            return <ButtonPropertyView note={note} property={property} />;
+        case "split-button":
+            return <SplitButtonPropertyView note={note} property={property} />;
+        case "checkbox":
+            return <CheckBoxPropertyView note={note} property={property} />;
+        case "number":
+            return <NumberPropertyView note={note} property={property} />;
+        case "combobox":
+            return <ComboBoxPropertyView note={note} property={property} />;
+    }
+}
+
+function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonProperty }) {
+    const parentComponent = useContext(ParentComponent);
+
+    return (
+        <FormListItem
+            icon={property.icon}
+            title={property.title}
+            onClick={() => {
+                if (!parentComponent) return;
+                property.onClick({
+                    note,
+                    triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
+                });
+            }}
+        >{property.label}</FormListItem>
+    );
+}
+
+function SplitButtonPropertyView({ note, property }: { note: FNote, property: SplitButtonProperty }) {
+    const parentComponent = useContext(ParentComponent);
+    const ItemsComponent = property.items;
+    const clickContext = parentComponent && {
+        note,
+        triggerCommand: parentComponent.triggerCommand.bind(parentComponent)
+    };
+
+    return (parentComponent &&
+        <FormDropdownSubmenu
+            icon={property.icon ?? "bx bx-empty"}
+            title={property.label}
+            onDropdownToggleClicked={() => clickContext && property.onClick(clickContext)}
+        >
+            <ItemsComponent note={note} parentComponent={parentComponent} />
+        </FormDropdownSubmenu>
+    );
+}
+
+function NumberPropertyView({ note, property }: { note: FNote, property: NumberProperty }) {
+    //@ts-expect-error Interop with text box which takes in string values even for numbers.
+    const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
+    const disabled = property.disabled?.(note);
+
+    return (
+        <FormListItem
+            icon={property.icon}
+            disabled={disabled}
+            onClick={(e) => e.stopPropagation()}
+        >
+            {property.label}
+            <FormTextBox
+                type="number"
+                currentValue={value ?? ""} onChange={setValue}
+                style={{ width: (property.width ?? 100) }}
+                min={property.min ?? 0}
+                disabled={disabled}
+            />
+        </FormListItem>
+    );
+}
+
+function ComboBoxPropertyView({ note, property }: { note: FNote, property: ComboBoxProperty }) {
+    const [ value, setValue ] = useNoteLabelWithDefault(note, property.bindToLabel, property.defaultValue ?? "");
+
+    function renderItem(option: ComboBoxItem) {
+        return (
+            <FormListItem
+                key={option.value}
+                checked={value === option.value}
+                onClick={() => setValue(option.value)}
+            >
+                {option.label}
+            </FormListItem>
+        );
+    }
+
+    return (
+        <FormDropdownSubmenu
+            title={property.label}
+            icon={property.icon ?? "bx bx-empty"}
+        >
+            {(property.options).map((option, index) => {
+                if ("items" in option) {
+                    return (
+                        <Fragment key={option.title}>
+                            <FormListItem key={option.title} disabled>{option.title}</FormListItem>
+                            {option.items.map(renderItem)}
+                            {index < property.options.length - 1 && <FormDropdownDivider />}
+                        </Fragment>
+                    );
+                }
+                return renderItem(option);
+
+            })}
+        </FormDropdownSubmenu>
+    );
+}
+
+function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
+    const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
+    return (
+        <FormListToggleableItem
+            icon={property.icon}
+            title={property.label}
+            currentValue={value}
+            onChange={setValue}
+        />
+    );
+}

apps/client/src/widgets/note_tree.css

@@ -9,6 +9,7 @@
         border-radius: 0.5em;
         font-size: 0.7rem;
         font-weight: normal;
+        float: right;
         vertical-align: middle;
     }
 

apps/client/src/widgets/note_tree.ts

@@ -1992,7 +1992,7 @@ function buildEnhanceTitle() {
         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.append($badge);
+            $span.find(".fancytree-title").append($badge);
         }
     };
 }

apps/client/src/widgets/note_types.tsx

@@ -43,8 +43,7 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
     },
     protectedSession: {
         view: () => import("./type_widgets/ProtectedSession"),
-        className: "protected-session-password-component",
-        isFullHeight: true
+        className: "protected-session-password-component"
     },
     book: {
         view: () => import("./type_widgets/Book"),

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

@@ -1,15 +1,16 @@
-import { ComponentChildren } from "preact";
+import { HTML } from "mermaid/dist/diagram-api/types.js";
+import { ComponentChildren, HTMLAttributes } from "preact";
 
-interface AdmonitionProps {
+interface AdmonitionProps extends Pick<HTMLAttributes<HTMLDivElement>, "style"> {
     type: "warning" | "note" | "caution";
     children: ComponentChildren;
     className?: string;
 }
 
-export default function Admonition({ type, children, className }: AdmonitionProps) {
+export default function Admonition({ type, children, className, ...props }: AdmonitionProps) {
     return (
-        <div className={`admonition ${type} ${className}`} role="alert">
+        <div className={`admonition ${type} ${className}`} role="alert" {...props}>
             {children}
         </div>
-    )
+    );
 }

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

@@ -1,47 +0,0 @@
-:where(.tn-card) {
-    --card-border-radius: 8px;
-    --card-padding-block: 8px;
-    --card-padding-inline: 16px;
-    --card-section-gap: 3px;
-    --card-nested-section-indent: 30px;
-}
-
-.tn-card-heading {
-    margin-bottom: 10px;
-    font-size: .75rem;
-    font-weight: 600;
-    letter-spacing: .4pt;
-    text-transform: uppercase;
-}
-
-.tn-card-body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--card-section-gap);
-
-    .tn-card-section {
-        padding: var(--card-padding-block) var(--card-padding-inline);
-        border: 1px solid var(--card-border-color, var(--main-border-color));
-        background: var(--card-background-color);
-
-        &:first-of-type {
-            border-top-left-radius: var(--card-border-radius);
-            border-top-right-radius: var(--card-border-radius);
-        }
-
-        &:last-of-type {
-            border-bottom-left-radius: var(--card-border-radius);
-            border-bottom-right-radius: var(--card-border-radius);
-        }
-
-        &.tn-card-section-nested {
-            padding-left: calc(var(--card-padding-inline) + var(--card-nested-section-indent) * var(--tn-card-section-nesting-level));
-            background-color: color-mix(in srgb, var(--card-background-color) calc(100% / (var(--tn-card-section-nesting-level) + 1)) , transparent);
-        }
-
-        &.tn-card-section-highlight-on-hover:hover {
-            background-color: var(--card-background-hover-color);
-            transition: background-color .2s ease-out;
-        }
-    }
-}

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

@@ -1,63 +0,0 @@
-import "./Card.css";
-import { ComponentChildren, createContext } from "preact";
-import { JSX } from "preact";
-import { useContext } from "preact/hooks";
-import clsx from "clsx";
-
-// #region Card
-
-export interface CardProps {
-    className?: string;
-    heading?: string;
-}
-
-export function Card(props: {children: ComponentChildren} & CardProps) {
-    return <div className={clsx("tn-card", props.className)}>
-        {props.heading && <h5 class="tn-card-heading">{props.heading}</h5>}
-        <div className="tn-card-body">
-            {props.children}
-        </div>
-    </div>;
-}
-
-// #endregion
-
-// #region Card Section
-
-export interface CardSectionProps {
-    className?: string;
-    subSections?: JSX.Element | JSX.Element[];
-    subSectionsVisible?: boolean;
-    highlightOnHover?: boolean;
-    onAction?: () => void;
-}
-
-interface CardSectionContextType {
-    nestingLevel: number;
-}
-
-const CardSectionContext = createContext<CardSectionContextType | undefined>(undefined);
-
-export function CardSection(props: {children: ComponentChildren} & CardSectionProps) {
-    const parentContext = useContext(CardSectionContext);
-    const nestingLevel = (parentContext && parentContext.nestingLevel + 1) ?? 0;
-
-    return <>
-        <section className={clsx("tn-card-section", props.className, {
-                    "tn-card-section-nested": nestingLevel > 0,
-                    "tn-card-section-highlight-on-hover": props.highlightOnHover || props.onAction
-                 })}
-                 style={{"--tn-card-section-nesting-level": (nestingLevel) ? nestingLevel : null}}
-                 onClick={props.onAction}>
-            {props.children}
-        </section>
-
-        {props.subSectionsVisible && props.subSections &&
-            <CardSectionContext.Provider value={{nestingLevel}}>
-                {props.subSections}
-            </CardSectionContext.Provider>
-        }
-    </>;
-}
-
-// #endregion

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

@@ -3,7 +3,10 @@
         line-height: 1em;
         display: flex;
         align-items: center;
-        padding-inline-end: 12px;
+        appearance: none;
+        background: transparent;
+        border: 0;
+        color: inherit;
 
         .arrow {
             font-size: 1.3em;