Merge branch 'main' of https://github.com/TriliumNext/Trilium

Currently translated at 100.0% (2008 of 2008 strings)

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

.editorconfig

@@ -1,6 +1,6 @@
 root = true
 
-[*.{js,ts,tsx,css}]
+[*.{js,cjs,ts,tsx,css}]
 charset = utf-8
 end_of_line = lf
 indent_size = 4

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

@@ -21,7 +21,7 @@ runs:
   # Certificate setup
   - name: Import Apple certificates
     if: inputs.os == 'macos'
-    uses: apple-actions/import-codesign-certs@v6
+    uses: apple-actions/import-codesign-certs@v7
     with:
       p12-file-base64: ${{ env.APPLE_APP_CERTIFICATE_BASE64 }}
       p12-password: ${{ env.APPLE_APP_CERTIFICATE_PASSWORD }}
@@ -30,7 +30,7 @@ runs:
 
   - name: Install Installer certificate
     if: inputs.os == 'macos'
-    uses: apple-actions/import-codesign-certs@v6
+    uses: apple-actions/import-codesign-certs@v7
     with:
       p12-file-base64: ${{ env.APPLE_INSTALLER_CERTIFICATE_BASE64 }}
       p12-password: ${{ env.APPLE_INSTALLER_CERTIFICATE_PASSWORD }}
@@ -66,12 +66,20 @@ runs:
     if: ${{ inputs.os == 'linux' }}
     shell: ${{ inputs.shell }}
     run: |
-      sudo apt-get update && sudo apt-get install rpm flatpak-builder elfutils
+      sudo apt-get update && sudo apt-get install rpm flatpak-builder elfutils libfuse2
       flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
       FLATPAK_ARCH=$(if [[ ${{ inputs.arch }} = 'arm64' ]]; then echo 'aarch64'; else echo 'x86_64'; fi)
       FLATPAK_VERSION='24.08'
       flatpak install --user --no-deps --arch $FLATPAK_ARCH --assumeyes runtime/org.freedesktop.Platform/$FLATPAK_ARCH/$FLATPAK_VERSION runtime/org.freedesktop.Sdk/$FLATPAK_ARCH/$FLATPAK_VERSION org.electronjs.Electron2.BaseApp/$FLATPAK_ARCH/$FLATPAK_VERSION
 
+  - name: Install appimagetool
+    if: ${{ inputs.os == 'linux' }}
+    shell: ${{ inputs.shell }}
+    run: |
+      APPIMAGETOOL_ARCH=$(if [[ ${{ inputs.arch }} = 'arm64' ]]; then echo 'aarch64'; else echo 'x86_64'; fi)
+      wget -q "https://github.com/AppImage/appimagetool/releases/download/continuous/appimagetool-${APPIMAGETOOL_ARCH}.AppImage" -O /usr/local/bin/appimagetool
+      chmod +x /usr/local/bin/appimagetool
+
   - name: Update build info
     shell: ${{ inputs.shell }}
     run: pnpm run chore:update-build-info
@@ -85,10 +93,19 @@ runs:
       APPLE_ID: ${{ env.APPLE_ID }}
       APPLE_ID_PASSWORD: ${{ env.APPLE_ID_PASSWORD }}
       WINDOWS_SIGN_EXECUTABLE: ${{ env.WINDOWS_SIGN_EXECUTABLE }}
+      WINDOWS_SIGN_ERROR_LOG: ${{ env.WINDOWS_SIGN_ERROR_LOG }}
       TRILIUM_ARTIFACT_NAME_HINT: TriliumNotes-${{ github.ref_name }}-${{ inputs.os }}-${{ inputs.arch }}
       TARGET_ARCH: ${{ inputs.arch }}
     run: pnpm run --filter desktop electron-forge:make --arch=${{ inputs.arch }} --platform=${{ inputs.forge_platform }}
 
+  - name: Build AppImage
+    if: ${{ inputs.os == 'linux' }}
+    shell: ${{ inputs.shell }}
+    env:
+      TRILIUM_ARTIFACT_NAME_HINT: TriliumNotes-${{ github.ref_name }}-${{ inputs.os }}-${{ inputs.arch }}
+      APPIMAGE_EXTRACT_AND_RUN: "1"
+    run: bash apps/desktop/scripts/build-appimage.sh ${{ inputs.arch }}
+
   # Add DMG signing step
   - name: Sign DMG
     if: inputs.os == 'macos'

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

@@ -8,7 +8,7 @@ inputs:
 runs:
   using: composite
   steps:
-  - uses: pnpm/action-setup@v4
+  - uses: pnpm/action-setup@v6
   - name: Set up node & dependencies
     uses: actions/setup-node@v6
     with:

.github/actions/deploy-to-cloudflare-pages/action.yml

@@ -55,7 +55,7 @@ runs:
     # Post deployment URL as PR comment
     - name: Comment PR with Preview URL
       if: github.event_name == 'pull_request'
-      uses: actions/github-script@v8
+      uses: actions/github-script@v9
       env:
         COMMENT_BODY: ${{ inputs.comment_body }}
         PRODUCTION_URL: ${{ inputs.production_url }}

.github/actions/report-size/action.yml

@@ -69,7 +69,7 @@ runs:
 
     # Post github action comment
     - name: Post comment
-      uses: marocchino/sticky-pull-request-comment@v2
+      uses: marocchino/sticky-pull-request-comment@v3
       if: ${{ steps.bundleSize.outputs.hasDifferences == 'true' }} # post only in case of changes
       with:
         number: ${{ github.event.pull_request.number }}

.github/copilot-instructions.md

@@ -1,5 +1,7 @@
 # Trilium Notes - AI Coding Agent Instructions
 
+> **Note**: When updating this file, also update `CLAUDE.md` in the repository root to keep both AI coding assistants in sync.
+
 ## Project Overview
 
 Trilium Notes is a hierarchical note-taking application with advanced features like synchronization, scripting, and rich text editing. Built as a TypeScript monorepo using pnpm, it implements a three-layer caching architecture (Becca/Froca/Shaca) with a widget-based UI system and supports extensive user scripting capabilities.
@@ -115,6 +117,24 @@ class MyNoteWidget extends NoteContextAwareWidget {
 
 **Important**: Widgets use jQuery (`this.$widget`) for DOM manipulation. Don't mix React patterns here.
 
+### Reusable Preact Components
+Common UI components are available in `apps/client/src/widgets/react/` — **always** reuse these instead of writing raw HTML elements or custom implementations:
+- `NoItems` - Empty state placeholder with icon and message (use for "no results", "too many items", error states)
+- `ActionButton` - Consistent button styling with icon support
+- `FormTextBox` - Text input with validation and controlled input handling; `FormTextBoxWithUnit` for inputs with a unit suffix (e.g. "mm", "px")
+- `FormSelect` - Dropdown/combobox taking an object array as data
+- `Slider` - Range slider with label
+- `Checkbox`, `RadioButton` - Form controls
+- `CollapsibleSection` - Expandable content sections
+
+**Do not use Bootstrap utility classes** (e.g. `form-control-sm`, `form-select-sm`, `input-group`) on these components — they manage their own styling internally. If you need to adjust sizing or layout, use props provided by the component or CSS custom properties, not Bootstrap overrides.
+
+#### Component Styling
+- **Avoid inline styles** — do not use the `style` attribute/prop on JSX elements unless absolutely necessary (e.g. a truly dynamic, computed value that cannot be expressed in CSS). Static layout, sizing, spacing, and visual properties must go in CSS.
+- **Per-component CSS files**: each component should have a matching `.css` file (e.g. `my_dialog.tsx` → `my_dialog.css`), imported at the top of the component file.
+- **CSS nesting for scoping**: since CSS modules are not available, scope styles using a root class and native CSS nesting. For example, a dialog with `className="my-dialog"` should have its styles nested under `.modal.my-dialog { … }`.
+- **Reuse existing components** instead of building custom markup — prefer `FormTextBox`, `FormTextBoxWithUnit`, `FormSelect`, `Slider`, `Button`, etc. over hand-rolled `<input>`, `<select>`, or `<button>` elements.
+
 ## Development Workflow
 
 ### Running & Testing
@@ -186,6 +206,14 @@ When adding query parameters to ETAPI endpoints (`apps/server/src/etapi/`), main
 
 **Auth note**: ETAPI uses basic auth with tokens. Internal API endpoints trust the frontend.
 
+### Adding New LLM Tools
+Tools are defined using `defineTools()` in `apps/server/src/services/llm/tools/` and automatically registered for both the LLM chat and MCP server.
+
+1. Add the tool definition in the appropriate module (`note_tools.ts`, `attribute_tools.ts`, `hierarchy_tools.ts`) or create a new module
+2. Each tool needs: `description`, `inputSchema` (Zod), `execute` function, and optionally `mutates: true` for write operations or `needsContext: true` for tools that need the current note context
+3. If creating a new module, wrap tools in `defineTools({...})` and add the registry to `allToolRegistries` in `tools/index.ts`
+4. Add a client-side friendly name in `apps/client/src/translations/en/translation.json` under `llm.tools.<tool_name>` — use **imperative tense** (e.g. "Search notes", "Create note", "Get attributes"), not present continuous
+
 ### Database Migrations
 - Add scripts in `apps/server/src/migrations/YYMMDD_HHMM__description.sql`
 - Update schema in `apps/server/src/assets/db/schema.sql`
@@ -213,6 +241,12 @@ When adding query parameters to ETAPI endpoints (`apps/server/src/etapi/`), main
 
 10. **Attribute inheritance can be complex** - When checking for labels/relations, use `note.getOwnedAttribute()` for direct attributes or `note.getAttribute()` for inherited ones. Don't assume attributes are directly on the note.
 
+## MCP Server
+- Trilium exposes an MCP (Model Context Protocol) server at `http://localhost:8080/mcp`, configured in `.mcp.json`
+- The MCP server is **only available when the Trilium server is running** (`pnpm run server:start`)
+- It provides tools for reading, searching, and modifying notes directly from the AI assistant
+- Use it to interact with actual note data when developing or debugging note-related features
+
 ## TypeScript Configuration
 
 - **Project references**: Monorepo uses TypeScript project references (`tsconfig.json`)
@@ -275,6 +309,12 @@ View types are configured via `#viewType` label (e.g., `#viewType=table`). Each
 - Register in `packages/ckeditor5/src/plugins.ts`
 - See `ckeditor5-admonition`, `ckeditor5-footnotes`, `ckeditor5-math`, `ckeditor5-mermaid` for examples
 
+### Updating PDF.js
+1. Update `pdfjs-dist` version in `packages/pdfjs-viewer/package.json`
+2. Run `npx tsx scripts/update-viewer.ts` from that directory
+3. Run `pnpm build` to verify success
+4. Commit all changes including updated viewer files
+
 ### Database Migrations
 - Add migration scripts in `apps/server/src/migrations/YYMMDD_HHMM__description.sql`
 - Update schema in `apps/server/src/assets/db/schema.sql`
@@ -299,9 +339,29 @@ Trilium provides powerful user scripting capabilities:
 - Translation files in `apps/client/src/translations/`
 - Use translation system via `t()` function
 - Automatic pluralization: Add `_other` suffix to translation keys (e.g., `item` and `item_other` for singular/plural)
+- When a translated string contains **interpolated components** (e.g. links, note references) whose order may vary across languages, use `<Trans>` from `react-i18next` instead of `t()`. This lets translators reorder components freely (e.g. `"<Note/> in <Parent/>"` vs `"in <Parent/>, <Note/>"`)
+- When adding a new locale, follow the step-by-step guide in `docs/Developer Guide/Developer Guide/Concepts/Internationalisation  Translations/Adding a new locale.md`
+
+#### Client vs Server Translation Usage
+- **Client-side**: `import { t } from "../services/i18n"` with keys in `apps/client/src/translations/en/translation.json`
+- **Server-side**: `import { t } from "i18next"` with keys in `apps/server/src/assets/translations/en/server.json`
+- **Interpolation**: Use `{{variable}}` for normal interpolation; use `{{- variable}}` (with hyphen) for **unescaped** interpolation when the value contains special characters like quotes that shouldn't be HTML-escaped
+
+### Storing User Preferences
+- **Do not use `localStorage`** for user preferences — Trilium has a synced options system that persists across devices
+- To add a new user preference:
+  1. Add the option type to `OptionDefinitions` in `packages/commons/src/lib/options_interface.ts`
+  2. Add a default value in `apps/server/src/services/options_init.ts` in the `defaultOptions` array
+  3. **Whitelist the option** in `apps/server/src/routes/api/options.ts` by adding it to `ALLOWED_OPTIONS` (required for client updates)
+  4. Use `useTriliumOption("optionName")` hook in React components to read/write the option
+- Available hooks: `useTriliumOption` (string), `useTriliumOptionBool`, `useTriliumOptionInt`, `useTriliumOptionJson`
+- See `docs/Developer Guide/Developer Guide/Concepts/Options/Creating a new option.md` for detailed documentation
 
 ## Testing Conventions
 
+- **Write concise tests**: Group related assertions together in a single test case rather than creating many one-shot tests
+- **Extract and test business logic**: When adding pure business logic (e.g., data transformations, migrations, validations), extract it as a separate function and always write unit tests for it
+
 ```typescript
 // ETAPI test pattern
 describe("etapi/feature", () => {

.github/workflows/checks.yml

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

.github/workflows/deploy-docs.yml

@@ -45,7 +45,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v4
+        uses: pnpm/action-setup@v6
 
       - name: Setup Node.js
         uses: actions/setup-node@v6
@@ -67,7 +67,7 @@ jobs:
 
       - name: Deploy
         uses: ./.github/actions/deploy-to-cloudflare-pages
-        if: github.repository == ${{ vars.REPO_MAIN }}
+        if: ${{ github.repository == vars.REPO_MAIN }}
         with:
           project_name: "trilium-docs"
           comment_body: "📚 Documentation preview is ready"

.github/workflows/dev.yml

@@ -1,9 +1,13 @@
 name: Dev
 on:
   push:
-    branches: [ main ]
+    branches:
+      - main
+      - "release/*"
   pull_request:
-    branches: [ main ]
+    branches:
+      - main
+      - "release/*"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -26,7 +30,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -37,8 +41,35 @@ jobs:
       - name: Typecheck
         run: pnpm typecheck
 
-      - name: Run the unit tests
-        run: pnpm run test:all
+      - name: Run the client-side tests
+        run: pnpm run --filter=client test
+
+      - name: Upload client test report
+        uses: actions/upload-artifact@v7
+        if: always()
+        with:
+          name: client-test-report
+          path: apps/client/test-output/vitest/html/
+          retention-days: 30
+
+      - name: Run the server-side tests
+        run: pnpm run --filter=server test
+
+      - name: Upload server test report
+        uses: actions/upload-artifact@v7
+        if: always()
+        with:
+          name: server-test-report
+          path: apps/server/test-output/vitest/html/
+          retention-days: 30
+
+      - name: Run CKEditor e2e tests
+        run: |
+          pnpm run --filter=ckeditor5-mermaid test
+          pnpm run --filter=ckeditor5-math test
+
+      - name: Run the rest of the tests
+        run: pnpm run --filter=\!client --filter=\!server --filter=\!ckeditor5-mermaid --filter=\!ckeditor5-math test
 
   build_docker:
     name: Build Docker image
@@ -47,7 +78,7 @@ jobs:
       - test_dev
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - name: Update build info
@@ -62,8 +93,8 @@ jobs:
           key: ${{ secrets.RELATIVE_CI_CLIENT_KEY }}
       - name: Trigger server build
         run: pnpm run server:build
-      - uses: docker/setup-buildx-action@v3
-      - uses: docker/build-push-action@v6
+      - uses: docker/setup-buildx-action@v4
+      - uses: docker/build-push-action@v7
         with:
           context: apps/server
           cache-from: type=gha
@@ -82,7 +113,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
@@ -97,10 +128,10 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Build and export to Docker
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}

.github/workflows/i18n.yml

@@ -0,0 +1,30 @@
+name: Internationalization
+on:
+  push:
+    branches:
+      - "weblate:*"
+  workflow_dispatch:
+  pull_request:
+    paths:
+      - "apps/client/src/translations/**"
+      - ".github/workflows/i18n.yml"
+
+permissions:
+  contents: read
+
+jobs:
+  i18n-check:
+    name: Check i18n translations
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v6
+      - name: Set up node & dependencies
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: 'pnpm'
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+      - name: Check translations
+        run: pnpm tsx scripts/translation/check-translation-coverage.ts

.github/workflows/main-docker.yml

@@ -40,9 +40,9 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -59,7 +59,7 @@ jobs:
         run: pnpm run server:build
 
       - name: Build and export to Docker
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}
@@ -86,12 +86,12 @@ jobs:
 
       - name: Upload Playwright trace
         if: failure()
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         with:
           name: Playwright trace (${{ matrix.dockerfile }})
           path: test-output/playwright/output
 
-      - uses: actions/upload-artifact@v6
+      - uses: actions/upload-artifact@v7
         if: ${{ !cancelled() }}
         with:
           name: Playwright report (${{ matrix.dockerfile }})
@@ -142,7 +142,7 @@ jobs:
 
       - name: Checkout repository
         uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -164,11 +164,9 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v5
+        uses: docker/metadata-action@v6
         with:
-          images: |
-            ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
-            ${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}
+          images: ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
             type=ref,event=branch
             type=ref,event=tag
@@ -177,28 +175,21 @@ jobs:
             latest=false
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@v4
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Login to GHCR
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ env.GHCR_REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Login to DockerHub
-        uses: docker/login-action@v3
-        with:
-          registry: ${{ env.DOCKERHUB_REGISTRY }}
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
       - name: Build and push by digest
         id: build
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}
@@ -213,7 +204,7 @@ jobs:
           touch "/tmp/digests/${digest#sha256:}"
 
       - name: Upload digest
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         with:
           name: digests-${{ env.PLATFORM_PAIR }}-${{ matrix.dockerfile }}
           path: /tmp/digests/*
@@ -227,7 +218,7 @@ jobs:
       - build
     steps:
       - name: Download digests
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v8
         with:
           path: /tmp/digests
           pattern: digests-*
@@ -237,75 +228,86 @@ jobs:
       - name: Set TEST_TAG to lowercase
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
-            ${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}
-          flavor: |
-            latest=false
+      - name: Set up crane
+        uses: imjasonh/setup-crane@v0.5
 
       - name: Login to GHCR
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ env.GHCR_REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Login to DockerHub
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: ${{ env.DOCKERHUB_REGISTRY }}
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - name: Create manifest list and push
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@v6
+        with:
+          images: ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
+          tags: |
+            type=ref,event=branch
+            type=ref,event=tag
+            type=sha
+          flavor: |
+            latest=false
+
+      - name: Verify digests exist on GHCR
         working-directory: /tmp/digests
         run: |
-          # Extract the branch or tag name from the ref
-          REF_NAME=$(echo "${GITHUB_REF}" | sed 's/refs\/heads\///' | sed 's/refs\/tags\///')
+          echo "Verifying all digests are available on GHCR..."
+          for DIGEST_FILE in *; do
+            DIGEST="sha256:${DIGEST_FILE}"
+            echo -n "  ${DIGEST}: "
+            crane manifest "${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}@${DIGEST}" > /dev/null
+            echo "OK"
+          done
 
-          # Create and push the manifest list with both the branch/tag name and the commit SHA
-          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            -t ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}:${REF_NAME} \
-            $(printf '${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}@sha256:%s ' *)
+      - name: Create and push multi-arch manifest
+        working-directory: /tmp/digests
+        run: |
+          GHCR_IMAGE="${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}"
+          DOCKERHUB_IMAGE="${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}"
 
-          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            -t ${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}:${REF_NAME} \
-            $(printf '${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}@sha256:%s ' *)
+          # Build -m flags for crane index append from digest files
+          MANIFEST_ARGS=""
+          for d in *; do
+            MANIFEST_ARGS="${MANIFEST_ARGS} -m ${GHCR_IMAGE}@sha256:${d}"
+          done
 
-          # If the ref is a tag, also tag the image as stable as this is part of a 'release'
-          # and only go in the `if` if there is NOT a `-` in the tag's name, due to tagging of `-alpha`, `-beta`, etc...
+          # Create multi-arch manifest for each tag from metadata, plus copy to DockerHub
+          while IFS= read -r TAG; do
+            echo "Creating manifest: ${TAG}"
+            crane index append ${MANIFEST_ARGS} -t "${TAG}"
+
+            SUFFIX="${TAG#*:}"
+            echo "Copying to DockerHub: ${DOCKERHUB_IMAGE}:${SUFFIX}"
+            crane copy "${TAG}" "${DOCKERHUB_IMAGE}:${SUFFIX}"
+          done <<< "${{ steps.meta.outputs.tags }}"
+
+          # For stable releases (tags without hyphens), also create stable + latest
+          REF_NAME="${GITHUB_REF#refs/tags/}"
           if [[ "${GITHUB_REF}" == refs/tags/* && ! "${REF_NAME}" =~ - ]]; then
-            # First create stable tags
-            docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-              -t ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}:stable \
-              $(printf '${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}@sha256:%s ' *)
-
-            docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-              -t ${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}:stable \
-              $(printf '${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}@sha256:%s ' *)
-
-            # Small delay to ensure stable tag is fully propagated
-            sleep 5
-
-            # Now update latest tags
-            docker buildx imagetools create \
-              -t ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}:latest \
-              ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}:stable
-
-            docker buildx imagetools create \
-              -t ${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}:latest \
-              ${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}:stable
+            echo "Creating stable tags..."
+            crane index append ${MANIFEST_ARGS} -t "${GHCR_IMAGE}:stable"
+            crane copy "${GHCR_IMAGE}:stable" "${DOCKERHUB_IMAGE}:stable"
 
+            echo "Creating latest tags..."
+            crane copy "${GHCR_IMAGE}:stable" "${GHCR_IMAGE}:latest"
+            crane copy "${GHCR_IMAGE}:latest" "${DOCKERHUB_IMAGE}:latest"
           fi
 
-      - name: Inspect image
+      - name: Inspect manifests
         run: |
-          docker buildx imagetools inspect ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}
-          docker buildx imagetools inspect ${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}
+          REF_NAME="${GITHUB_REF#refs/heads/}"
+          REF_NAME="${REF_NAME#refs/tags/}"
+          echo "=== GHCR ==="
+          crane manifest "${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}:${REF_NAME}"
+          echo ""
+          echo "=== DockerHub ==="
+          crane manifest "${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}:${REF_NAME}"

.github/workflows/nightly.yml

@@ -26,7 +26,7 @@ permissions:
 
 jobs:
   nightly-electron:
-    if: github.repository == ${{ vars.REPO_MAIN }}
+    if: ${{ github.repository == vars.REPO_MAIN }}
     name: Deploy nightly
     strategy:
       fail-fast: false
@@ -42,7 +42,7 @@ jobs:
             shell: bash
             forge_platform: linux
           - name: windows
-            image: win-signing
+            image: windows-latest
             shell: cmd
             forge_platform: win32
         # Exclude ARM64 Linux from default matrix to use native runner
@@ -61,7 +61,7 @@ jobs:
     runs-on: ${{ matrix.os.image }}
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -69,6 +69,8 @@ jobs:
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+        env:
+          npm_config_package_import_method: copy
       - name: Update nightly version
         run: pnpm run chore:ci-update-nightly-version
       - name: Run the build
@@ -86,11 +88,10 @@ jobs:
           APPLE_TEAM_ID: ${{ secrets.APPLE_TEAM_ID }}
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
-          WINDOWS_SIGN_EXECUTABLE: ${{ vars.WINDOWS_SIGN_EXECUTABLE }}
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v3.0.0
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false
@@ -102,14 +103,14 @@ jobs:
           name: Nightly Build
 
       - name: Publish artifacts
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         if: ${{ github.event_name == 'pull_request' }}
         with:
           name: TriliumNotes ${{ matrix.os.name }} ${{ matrix.arch }}
           path: apps/desktop/upload
 
   nightly-server:
-    if: github.repository == ${{ vars.REPO_MAIN }}
+    if: ${{ github.repository == vars.REPO_MAIN }}
     name: Deploy server nightly
     strategy:
       fail-fast: false
@@ -131,7 +132,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v3.0.0
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false

.github/workflows/playwright.yml

@@ -38,7 +38,7 @@ jobs:
           filter: tree:0
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - uses: actions/setup-node@v6
         with:
           node-version: 24
@@ -77,7 +77,7 @@ jobs:
 
       - name: Upload test report
         if: failure()
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         with:
           name: e2e report ${{ matrix.arch }}
           path: apps/server-e2e/test-output

.github/workflows/release.yml

@@ -11,8 +11,28 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  sanity-check:
+    name: Sanity Check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - uses: pnpm/action-setup@v6
+      - name: Set up node & dependencies
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm install --filter source --frozen-lockfile --ignore-scripts
+
+      - name: Check version consistency
+        run: pnpm tsx ${{ github.workspace }}/scripts/check-version-consistency.ts ${{ github.ref_name }}
   make-electron:
     name: Make Electron
+    needs:
+      - sanity-check
     strategy:
       fail-fast: false
       matrix:
@@ -46,7 +66,7 @@ jobs:
     runs-on: ${{ matrix.os.image }}
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -70,16 +90,19 @@ jobs:
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
           WINDOWS_SIGN_EXECUTABLE: ${{ vars.WINDOWS_SIGN_EXECUTABLE }}
+          WINDOWS_SIGN_ERROR_LOG: ${{ vars.WINDOWS_SIGN_ERROR_LOG }}
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         with:
           name: release-desktop-${{ matrix.os.name }}-${{ matrix.arch }}
           path: apps/desktop/upload/*.*
 
   build_server:
     name: Build Linux Server
+    needs:
+      - sanity-check
     strategy:
       fail-fast: false
       matrix:
@@ -100,7 +123,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v6
+        uses: actions/upload-artifact@v7
         with:
           name: release-server-linux-${{ matrix.arch }}
           path: upload/*.*
@@ -120,14 +143,14 @@ jobs:
             docs/Release Notes
 
       - name: Download all artifacts
-        uses: actions/download-artifact@v7
+        uses: actions/download-artifact@v8
         with:
           merge-multiple: true
           pattern: release-*
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v3.0.0
         with:
           draft: false
           body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md

.github/workflows/web-clipper.yml

@@ -0,0 +1,69 @@
+name: Deploy web clipper extension
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "apps/web-clipper/**"
+    tags:
+      - "web-clipper-v*"
+
+  pull_request:
+    paths:
+      - "apps/web-clipper/**"
+
+permissions:
+  contents: write
+  discussions: write
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    name: Build web clipper extension
+
+    permissions:
+      contents: read
+      deployments: write
+
+    steps:
+      - uses: actions/checkout@v6
+      - uses: pnpm/action-setup@v6
+      - name: Set up node & dependencies
+        uses: actions/setup-node@v6
+        with:
+          node-version: 24
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --filter web-clipper --frozen-lockfile --ignore-scripts
+
+      - name: Build the web clipper extension
+        run: |
+          pnpm --filter web-clipper zip
+          pnpm --filter web-clipper zip:firefox
+
+      - name: Upload build artifacts
+        uses: actions/upload-artifact@v7
+        if: ${{ !startsWith(github.ref, 'refs/tags/web-clipper-v') }}
+        with:
+          name: web-clipper-extension
+          path: apps/web-clipper/.output/*.zip
+          include-hidden-files: true
+          if-no-files-found: error
+          compression-level: 0
+
+      - name: Release web clipper extension
+        uses: softprops/action-gh-release@v3.0.0
+        if: ${{ startsWith(github.ref, 'refs/tags/web-clipper-v') }}
+        with:
+          draft: false
+          fail_on_unmatched_files: true
+          files: apps/web-clipper/.output/*.zip
+          discussion_category_name: Releases
+          make_latest: false
+          token: ${{ secrets.RELEASE_PAT }}

.github/workflows/website.yml

@@ -26,7 +26,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -34,7 +34,7 @@ jobs:
           cache: "pnpm"
 
       - name: Install dependencies
-        run: pnpm install --filter website --frozen-lockfile
+        run: pnpm install --filter website --frozen-lockfile --ignore-scripts
 
       - name: Build the website
         run: pnpm website:build

.gitignore

@@ -46,8 +46,11 @@ upload
 
 /.direnv
 /result
-.svelte-kit
 
 # docs
 site/
 apps/*/coverage
+scripts/translation/.language*.json
+
+.claude
+.pnpm-store

.mailmap

@@ -1,2 +1,116 @@
-zadam <adam.zivner@gmail.com>
-zadam <zadam.apps@gmail.com>
+# Format: Canonical Name <canonical-email> <commit-email>
+# Merges aliases so `git shortlog`, `git log --use-mailmap`, etc. group commits per person.
+
+# Core maintainers
+zadam <zadam.apps@gmail.com>
+zadam <zadam.apps@gmail.com> <adam.zivner@gmail.com>
+zadam <zadam.apps@gmail.com> <adam.zivner@gemalto.com>
+
+Elian Doran <contact@eliandoran.me>
+Elian Doran <contact@eliandoran.me> <online@eliandoran.me>
+
+Adorian Doran <adorian@esevo.ro>
+Adorian Doran <adorian@esevo.ro> <adoriandoran@gmail.com>
+
+# Contributors with multiple emails / name variants
+Panagiotis Papadopoulos <pano_90@gmx.net> <102623907+pano9000@users.noreply.github.com>
+
+Jon Fuller <jonfuller2012@gmail.com>
+
+SiriusXT <1160925501@qq.com>
+SiriusXT <1160925501@qq.com> <11609255001@qq.com>
+SiriusXT <1160925501@qq.com> <37627919+SiriusXT@users.noreply.github.com>
+
+JYC333 <22962980+JYC333@users.noreply.github.com>
+JYC333 <22962980+JYC333@users.noreply.github.com> <yuchuanjin333@gmail.com>
+
+Nriver <6752679+Nriver@users.noreply.github.com>
+
+Francis C. <normitomf@gmail.com>
+Francis C. <normitomf@gmail.com> <francistw@users.noreply.github.com>
+
+Thomas Frei <7283497+thfrei@users.noreply.github.com>
+
+hasecilu <hasecilu@tuta.io>
+
+meinzzzz <lukas.geiselhart35@gmail.com>
+
+FliegendeWurst <arne.keller@posteo.de>
+FliegendeWurst <arne.keller@posteo.de> <2012gdwu@web.de>
+FliegendeWurst <arne.keller@posteo.de> <2012gdwu+github@posteo.de>
+
+MeIchthys <github.com@meichthys.com>
+MeIchthys <github.com@meichthys.com> <10717998+meichthys@users.noreply.github.com>
+
+Marcel Wiechmann <marcel.wiechmann@gmail.com>
+Marcel Wiechmann <marcel.wiechmann@gmail.com> <github.y3y0w@sl.wiechmann.at>
+
+Tomas Adamek <ad.tomik@seznam.cz>
+Tomas Adamek <ad.tomik@seznam.cz> <50672285+Kureii@users.noreply.github.com>
+
+soulsands <407221377@qq.com>
+
+chesspro13 <chesspro13@gmail.com>
+
+sigaloid <69441971+sigaloid@users.noreply.github.com>
+
+Marek Lewandowski <m.lewandowski@cksource.com>
+Marek Lewandowski <m.lewandowski@cksource.com> <code@mlewandowski.com>
+Marek Lewandowski <m.lewandowski@cksource.com> <mlewand@users.noreply.github.com>
+
+lzinga <lucas.elzinga@outlook.com>
+lzinga <lucas.elzinga@outlook.com> <lzinga@users.noreply.github.com>
+
+Sukant Gujar <sukantgujar@yahoo.com>
+
+Matt Wilkie <maphew@gmail.com>
+Matt Wilkie <maphew@gmail.com> <matt.wilkie@yukon.ca>
+
+Andreas Haan <andreas.mobil1@googlemail.com>
+
+Potjoe-97 <42873357+Potjoe-97@users.noreply.github.com>
+Potjoe-97 <42873357+Potjoe-97@users.noreply.github.com> <giann@LAPTOPT490-GF>
+
+Alex Pietsch <54153428+alexpietsch@users.noreply.github.com>
+
+Laurent Cozic <laurent@cozic.net>
+Laurent Cozic <laurent@cozic.net> <laurent22@users.noreply.github.com>
+
+Zexin Yuan <git@yzx9.xyz>
+Zexin Yuan <git@yzx9.xyz> <yuan.zx@outlook.com>
+
+hulmgulm <hulmgulm@users.noreply.github.com>
+hulmgulm <hulmgulm@users.noreply.github.com> <12165268+hulmgulm@users.noreply.github.com>
+hulmgulm <hulmgulm@users.noreply.github.com> <github@hulmgulm.de>
+
+Jules Bertholet <jules.bertholet@gmail.com>
+
+Charles Dagenais <dagenais.charles@gmail.com>
+
+Giulia Ye <yg97.cs@gmail.com>
+
+baddate <37013819+baddate@users.noreply.github.com>
+
+DerVogel101 <128903814+DerVogel101@users.noreply.github.com>
+DerVogel101 <128903814+DerVogel101@users.noreply.github.com> <jan.irmer@outlook.de>
+
+Marcello Fuschi <marcellofuschi1@gmail.com>
+
+Jiahao Lee <lijiahao34@live.com>
+
+Dmitry Matveyev <dev@greenfork.me>
+Dmitry Matveyev <dev@greenfork.me> <info@greenfork.me>
+
+Grant Zhu <a1065135230@gmail.com>
+
+Sylvain Pasche <sylvain.pasche@gmail.com>
+Sylvain Pasche <sylvain.pasche@gmail.com> <spasche@spasche.net>
+
+mm21 <8033134+mm21@users.noreply.github.com>
+mm21 <8033134+mm21@users.noreply.github.com> <mm21.dev@gmail.com>
+
+BeatLink <git@beatlink.simplelogin.com>
+BeatLink <git@beatlink.simplelogin.com> <github@beatlink.simplelogin.com>
+
+Florian Meißner <161936+Mystler@users.noreply.github.com>
+Florian Meißner <161936+Mystler@users.noreply.github.com> <developer@mystler.eu>

.mcp.json

@@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "trilium": {
+      "type": "http",
+      "url": "http://localhost:8080/mcp"
+    }
+  }
+}

.nvmrc

@@ -1 +1 @@
-24.12.0
+24.15.0

.vscode/launch.json

@@ -0,0 +1,57 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Launch client (Chrome)",
+      "request": "launch",
+      "type": "chrome",
+      "url": "http://localhost:8080",
+      "webRoot": "${workspaceFolder}/apps/client"
+    },
+    {
+      "name": "Launch server",
+      "type": "node",
+      "request": "launch",
+      "program": "${workspaceFolder}/apps/server/src/main.ts",
+      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/tsx",
+      "env": {
+        "NODE_ENV": "development",
+        "TRILIUM_ENV": "dev",
+        "TRILIUM_DATA_DIR": "${input:trilium_data_dir}",
+        "TRILIUM_RESOURCE_DIR": "${workspaceFolder}/apps/server/src"
+      },
+      "autoAttachChildProcesses": true,
+      "cwd": "${workspaceFolder}",
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "skipFiles": ["<node_internals>/**", "${workspaceFolder}/node_modules/**"]
+    },
+    {
+      "name": "Launch Vitest with current test file",
+      "type": "node",
+      "request": "launch",
+      "autoAttachChildProcesses": true,
+      "program": "${workspaceFolder}/node_modules/vitest/vitest.mjs",
+      "args": ["run", "${relativeFile}"],
+      "smartStep": true,
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**", "**/node_modules/**"],
+      "cwd": "${workspaceFolder}"
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Launch client (Chrome) and server",
+      "configurations": ["Launch server","Launch client (Chrome)"],
+      "stopAll": true
+    }
+  ],
+  "inputs": [
+    {
+      "id": "trilium_data_dir",
+      "type": "promptString",
+      "description": "Select Trilum Notes data directory",
+      "default": "${workspaceFolder}/apps/server/data"
+    }
+  ]
+}

.vscode/settings.json

@@ -42,5 +42,8 @@
     },
     "eslint.rules.customizations": [
         { "rule": "*", "severity": "warn" }
+    ],
+    "cSpell.words": [
+      "Trilium"
     ]
-}
+}

CLAUDE.md

@@ -2,6 +2,8 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
+> **Note**: When updating this file, also update `.github/copilot-instructions.md` to keep both AI coding assistants in sync.
+
 ## Overview
 
 Trilium Notes is a hierarchical note-taking application with advanced features like synchronization, scripting, and rich text editing. It's built as a TypeScript monorepo using pnpm, with multiple applications and shared packages.
@@ -66,6 +68,24 @@ Frontend uses a widget system (`apps/client/src/widgets/`):
 - `RightPanelWidget` - Widgets displayed in the right panel
 - Type-specific widgets in `type_widgets/` directory
 
+#### Reusable Preact Components
+Common UI components are available in `apps/client/src/widgets/react/` — **always** reuse these instead of writing raw HTML elements or custom implementations:
+- `NoItems` - Empty state placeholder with icon and message (use for "no results", "too many items", error states)
+- `ActionButton` - Consistent button styling with icon support
+- `FormTextBox` - Text input with validation and controlled input handling; `FormTextBoxWithUnit` for inputs with a unit suffix (e.g. "mm", "px")
+- `FormSelect` - Dropdown/combobox taking an object array as data
+- `Slider` - Range slider with label
+- `Checkbox`, `RadioButton` - Form controls
+- `CollapsibleSection` - Expandable content sections
+
+**Do not use Bootstrap utility classes** (e.g. `form-control-sm`, `form-select-sm`, `input-group`) on these components — they manage their own styling internally. If you need to adjust sizing or layout, use props provided by the component or CSS custom properties, not Bootstrap overrides.
+
+#### Component Styling
+- **Avoid inline styles** — do not use the `style` attribute/prop on JSX elements unless absolutely necessary (e.g. a truly dynamic, computed value that cannot be expressed in CSS). Static layout, sizing, spacing, and visual properties must go in CSS.
+- **Per-component CSS files**: each component should have a matching `.css` file (e.g. `my_dialog.tsx` → `my_dialog.css`), imported at the top of the component file.
+- **CSS nesting for scoping**: since CSS modules are not available, scope styles using a root class and native CSS nesting. For example, a dialog with `className="my-dialog"` should have its styles nested under `.modal.my-dialog { … }`.
+- **Reuse existing components** instead of building custom markup — prefer `FormTextBox`, `FormTextBoxWithUnit`, `FormSelect`, `Slider`, `Button`, etc. over hand-rolled `<input>`, `<select>`, or `<button>` elements.
+
 #### API Architecture
 - **Internal API**: REST endpoints in `apps/server/src/routes/api/`
 - **ETAPI**: External API for third-party integrations (`apps/server/src/etapi/`)
@@ -108,6 +128,8 @@ Trilium supports multiple note types, each with specialized widgets:
 - Client tests can run in parallel
 - E2E tests use Playwright for both server and desktop apps
 - Build validation tests check artifact integrity
+- **Write concise tests**: Group related assertions together in a single test case rather than creating many one-shot tests
+- **Extract and test business logic**: When adding pure business logic (e.g., data transformations, migrations, validations), extract it as a separate function and always write unit tests for it
 
 ### Scripting System
 Trilium provides powerful user scripting capabilities:
@@ -118,6 +140,21 @@ Trilium provides powerful user scripting capabilities:
 ### Internationalization
 - Translation files in `apps/client/src/translations/`
 - Supported languages: English, German, Spanish, French, Romanian, Chinese
+- **Only add new translation keys to `en/translation.json`** — translations for other languages are managed via Weblate and will be contributed by the community
+- Third-party components (e.g., mind-map context menu) should use i18next `t()` for their labels, with the English strings added to `en/translation.json` under a dedicated namespace (e.g., `"mind-map"`)
+- When a translated string contains **interpolated components** (e.g. links, note references) whose order may vary across languages, use `<Trans>` from `react-i18next` instead of `t()`. This lets translators reorder components freely (e.g. `"<Note/> in <Parent/>"` vs `"in <Parent/>, <Note/>"`)
+- When adding a new locale, follow the step-by-step guide in `docs/Developer Guide/Developer Guide/Concepts/Internationalisation  Translations/Adding a new locale.md`
+- **Server-side translations** (e.g. hidden subtree titles) go in `apps/server/src/assets/translations/en/server.json`, not in the client `translation.json`
+
+#### Client vs Server Translation Usage
+- **Client-side**: `import { t } from "../services/i18n"` with keys in `apps/client/src/translations/en/translation.json`
+- **Server-side**: `import { t } from "i18next"` with keys in `apps/server/src/assets/translations/en/server.json`
+- **Interpolation**: Use `{{variable}}` for normal interpolation; use `{{- variable}}` (with hyphen) for **unescaped** interpolation when the value contains special characters like quotes that shouldn't be HTML-escaped
+
+### Electron Desktop App
+- Desktop entry point: `apps/desktop/src/main.ts`, window management: `apps/server/src/services/window.ts`
+- IPC communication: use `electron.ipcMain.on(channel, handler)` on server side, `electron.ipcRenderer.send(channel, data)` on client side
+- Electron-only features should check `isElectron()` from `apps/client/src/services/utils.ts` (client) or `utils.isElectron` (server)
 
 ### Security Considerations
 - Per-note encryption with granular protected sessions
@@ -125,6 +162,26 @@ Trilium provides powerful user scripting capabilities:
 - OpenID and TOTP authentication support
 - Sanitization of user-generated content
 
+### Client-Side API Restrictions
+- **Do not use `crypto.randomUUID()`** or other Web Crypto APIs that require secure contexts - Trilium can run over HTTP, not just HTTPS
+- Use `randomString()` from `apps/client/src/services/utils.ts` for generating IDs instead
+
+### Storing User Preferences
+- **Do not use `localStorage`** for user preferences — Trilium has a synced options system that persists across devices
+- To add a new user preference:
+  1. Add the option type to `OptionDefinitions` in `packages/commons/src/lib/options_interface.ts`
+  2. Add a default value in `apps/server/src/services/options_init.ts` in the `defaultOptions` array
+  3. **Whitelist the option** in `apps/server/src/routes/api/options.ts` by adding it to the `ALLOWED_OPTIONS` array — **without this, the API will reject changes with "Option 'X' is not allowed to be changed"**
+  4. If the option should be user-editable in the UI, add a control in the appropriate settings component (e.g., `apps/client/src/widgets/type_widgets/options/other.tsx`) and a translation key in `apps/client/src/translations/en/translation.json`
+  5. Use `useTriliumOption("optionName")` hook in React components to read/write the option
+- Available hooks: `useTriliumOption` (string), `useTriliumOptionBool`, `useTriliumOptionInt`, `useTriliumOptionJson`
+- See `docs/Developer Guide/Developer Guide/Concepts/Options/Creating a new option.md` for detailed documentation
+
+### Shared Types Policy
+- Types shared between client and server belong in `@triliumnext/commons` (`packages/commons/src/lib/`)
+- Import shared types directly from `@triliumnext/commons` - do not re-export them from app-specific modules
+- Keep app-specific types (e.g., `LlmProvider` for server, `StreamCallbacks` for client) in their respective apps
+
 ## Common Development Tasks
 
 ### Adding New Note Types
@@ -140,10 +197,51 @@ Trilium provides powerful user scripting capabilities:
 - Create new package in `packages/` following existing plugin structure
 - Register in `packages/ckeditor5/src/plugins.ts`
 
+### Adding Hidden System Notes
+The hidden subtree (`_hidden`) contains system notes with predictable IDs (prefixed with `_`). Defined in `apps/server/src/services/hidden_subtree.ts` via the `HiddenSubtreeItem` interface from `@triliumnext/commons`.
+
+1. Add the note definition to `buildHiddenSubtreeDefinition()` in `apps/server/src/services/hidden_subtree.ts`
+2. Add a translation key for the title in `apps/server/src/assets/translations/en/server.json` under `"hidden-subtree"`
+3. The note is auto-created on startup by `checkHiddenSubtree()` — uses deterministic IDs so all sync cluster instances generate the same structure
+4. Key properties: `id` (must start with `_`), `title`, `type`, `icon` (format: `bx-icon-name` without `bx ` prefix), `attributes`, `children`, `content`
+5. Use `enforceAttributes: true` to keep attributes in sync, `enforceBranches: true` for correct placement, `enforceDeleted: true` to remove deprecated notes
+6. For launcher bar entries, see `hidden_subtree_launcherbar.ts`; for templates, see `hidden_subtree_templates.ts`
+
+### Writing to Notes from Server Services
+- `note.setContent()` requires a CLS (Continuation Local Storage) context — wrap calls in `cls.init(() => { ... })` (from `apps/server/src/services/cls.ts`)
+- Operations called from Express routes already have CLS context; standalone services (schedulers, Electron IPC handlers) do not
+
+### Adding New LLM Tools
+Tools are defined using `defineTools()` in `apps/server/src/services/llm/tools/` and automatically registered for both the LLM chat and MCP server.
+
+1. Add the tool definition in the appropriate module (`note_tools.ts`, `attribute_tools.ts`, `attachment_tools.ts`, `hierarchy_tools.ts`) or create a new module
+2. Each tool needs: `description`, `inputSchema` (Zod), `execute` function, and optionally `mutates: true` for write operations
+3. If creating a new module, wrap tools in `defineTools({...})` and add the registry to `allToolRegistries` in `tools/index.ts`
+4. Add a client-side friendly name in `apps/client/src/translations/en/translation.json` under `llm.tools.<tool_name>` — use **imperative tense** (e.g. "Search notes", "Create note", "Get attributes"), not present continuous
+5. Use ETAPI (`apps/server/src/etapi/`) as inspiration for what fields to expose, but **do not import ETAPI mappers** — inline the field mappings directly in the tool so the LLM layer stays decoupled from the API layer
+
+### Updating PDF.js
+1. Update `pdfjs-dist` version in `packages/pdfjs-viewer/package.json`
+2. Run `npx tsx scripts/update-viewer.ts` from that directory
+3. Run `pnpm build` to verify success
+4. Commit all changes including updated viewer files
+
 ### Database Migrations
 - Add migration scripts in `apps/server/src/migrations/`
 - Update schema in `apps/server/src/assets/db/schema.sql`
 
+### Server-Side Static Assets
+- Static assets (templates, SQL, translations, etc.) go in `apps/server/src/assets/`
+- Access them at runtime via `RESOURCE_DIR` from `apps/server/src/services/resource_dir.ts` (e.g. `path.join(RESOURCE_DIR, "llm", "skills", "file.md")`)
+- **Do not use `import.meta.url`/`fileURLToPath`** to resolve file paths — the server is bundled into CJS for production, so `import.meta.url` will not point to the source directory
+- **Do not use `__dirname` with relative paths** from source files — after bundling, `__dirname` points to the bundle output, not the original source tree
+
+## MCP Server
+- Trilium exposes an MCP (Model Context Protocol) server at `http://localhost:8080/mcp`, configured in `.mcp.json`
+- The MCP server is **only available when the Trilium server is running** (`pnpm run server:start`)
+- It provides tools for reading, searching, and modifying notes directly from the AI assistant
+- Use it to interact with actual note data when developing or debugging note-related features
+
 ## Build System Notes
 - Uses pnpm for monorepo management
 - Vite for fast development builds

README.md

@@ -165,6 +165,17 @@ pnpm install
 pnpm edit-docs:edit-docs
 ```
 
+Alternatively, if you have Nix installed:
+```shell
+# Run directly
+nix run .#edit-docs
+
+# Or install to your profile
+nix profile install .#edit-docs
+trilium-edit-docs
+```
+
+
 ### Building the Executable
 Download the repository, install dependencies using `pnpm` and then build the desktop app for Windows:
 ```shell

SECURITY.md

@@ -2,12 +2,87 @@
 
 ## Supported Versions
 
-In the (still active) 0.X phase of the project only the latest stable minor release is getting bugfixes (including security ones).
+Only the latest stable minor release receives security fixes.
 
-So e.g. if the latest stable version is 0.42.3 and the latest beta version is 0.43.0-beta, then 0.42 line will still get security fixes but older versions (like 0.41.X) won't get any fixes.
+For example, if the latest stable version is 0.92.3 and the latest beta is 0.93.0-beta, then only the 0.92.x line will receive security patches. Older versions (like 0.91.x) will not receive fixes.
 
-Description above is a general rule and may be altered on case by case basis.
+This policy may be altered on a case-by-case basis for critical vulnerabilities.
 
 ## Reporting a Vulnerability
 
-You can report low severity vulnerabilities as GitHub issues, more severe vulnerabilities should be reported to the email [contact@eliandoran.me](mailto:contact@eliandoran.me)
+**Please report all security vulnerabilities through [GitHub Security Advisories](https://github.com/TriliumNext/Notes/security/advisories/new).**
+
+We do not accept security reports via email, public issues, or other channels. GitHub Security Advisories allows us to:
+- Discuss and triage vulnerabilities privately
+- Coordinate fixes before public disclosure
+- Credit reporters appropriately
+- Publish advisories with CVE identifiers
+
+### What to Include
+
+When reporting, please provide:
+- A clear description of the vulnerability
+- Steps to reproduce or proof-of-concept
+- Affected versions (if known)
+- Potential impact assessment
+- Any suggested mitigations or fixes
+
+### Response Timeline
+
+- **Initial response**: Within 7 days
+- **Triage decision**: Within 14 days
+- **Fix timeline**: Depends on severity and complexity
+
+## Scope
+
+### In Scope
+
+- Remote code execution
+- Authentication/authorization bypass
+- Cross-site scripting (XSS) that affects other users
+- SQL injection
+- Path traversal
+- Sensitive data exposure
+- Privilege escalation
+
+### Out of Scope (Won't Fix)
+
+The following are considered out of scope or accepted risks:
+
+#### Self-XSS / Self-Injection
+Trilium is a personal knowledge base where users have full control over their own data. Users can intentionally create notes containing scripts, HTML, or other executable content. This is by design - Trilium's scripting system allows users to extend functionality with custom JavaScript.
+
+Vulnerabilities that require a user to inject malicious content into their own notes and then view it themselves are not considered security issues.
+
+#### Electron Architecture (nodeIntegration)
+Trilium's desktop application runs with `nodeIntegration: true` to enable its powerful scripting features. This is an intentional design decision, similar to VS Code extensions having full system access. We mitigate risks by:
+- Sanitizing content at input boundaries
+- Fixing specific XSS vectors as they're discovered
+- Using Electron fuses to prevent external abuse
+
+#### Authenticated User Actions
+Actions that require valid authentication and only affect the authenticated user's own data are generally not vulnerabilities.
+
+#### Denial of Service via Resource Exhaustion
+Creating extremely large notes or performing many operations is expected user behavior in a note-taking application.
+
+#### Missing Security Headers on Non-Sensitive Endpoints
+We implement security headers where they provide meaningful protection, but may omit them on endpoints where they provide no practical benefit.
+
+## Coordinated Disclosure
+
+We follow a coordinated disclosure process:
+
+1. **Report received** - We acknowledge receipt and begin triage
+2. **Fix developed** - We develop and test a fix privately
+3. **Release prepared** - Security release is prepared with vague changelog
+4. **Users notified** - Release is published, users encouraged to upgrade
+5. **Advisory published** - After reasonable upgrade window (typically 2-4 weeks), full advisory is published
+
+We appreciate reporters allowing us time to fix issues before public disclosure. We aim to credit all reporters in published advisories unless they prefer to remain anonymous.
+
+## Security Updates
+
+Security fixes are released as patch versions (e.g., 0.92.1 → 0.92.2) to minimize upgrade friction. We recommend all users keep their installations up to date.
+
+Subscribe to GitHub releases or watch the repository to receive notifications of new releases.

apps/build-docs/package.json

@@ -1,22 +1,26 @@
 {
   "name": "build-docs",
   "version": "1.0.0",
-  "description": "",
+  "description": "Build documentation from Trilium notes",
   "main": "src/main.ts",
+  "bin": {
+    "trilium-build-docs": "dist/cli.js"
+  },
   "scripts": {
-    "start": "tsx ."
+    "start": "tsx .",
+    "cli": "tsx src/cli.ts",
+    "build": "tsx scripts/build.ts"
   },
   "keywords": [],
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.26.2",
+  "packageManager": "pnpm@10.33.2",
   "devDependencies": {
-    "@redocly/cli": "2.14.1",
+    "@redocly/cli": "2.30.0",
     "archiver": "7.0.1",
-    "fs-extra": "11.3.3",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "typedoc": "0.28.15",
-    "typedoc-plugin-missing-exports": "4.1.2"
+    "fs-extra": "11.3.4",
+    "js-yaml": "4.1.1",
+    "typedoc": "0.28.19",
+    "typedoc-plugin-missing-exports": "4.1.3"
   }
 }

apps/build-docs/scripts/build.ts

@@ -0,0 +1,23 @@
+import BuildHelper from "../../../scripts/build-utils";
+
+const build = new BuildHelper("apps/build-docs");
+
+async function main() {
+    // Build the CLI and other TypeScript files
+    await build.buildBackend([
+        "src/cli.ts",
+        "src/main.ts",
+        "src/build-docs.ts",
+        "src/swagger.ts",
+        "src/script-api.ts",
+        "src/context.ts"
+    ]);
+
+    // Copy HTML template
+    build.copy("src/index.html", "index.html");
+
+    // Copy node modules dependencies if needed
+    build.copyNodeModules([ "better-sqlite3", "bindings", "file-uri-to-path" ]);
+}
+
+main();

apps/build-docs/src/backend_script_entrypoint.ts

@@ -13,8 +13,12 @@
  * Make sure to keep in line with backend's `script_context.ts`.
  */
 
-export type { default as AbstractBeccaEntity } from "../../server/src/becca/entities/abstract_becca_entity.js";
-export type { default as BAttachment } from "../../server/src/becca/entities/battachment.js";
+export type {
+    default as AbstractBeccaEntity
+} from "../../server/src/becca/entities/abstract_becca_entity.js";
+export type {
+    default as BAttachment
+} from "../../server/src/becca/entities/battachment.js";
 export type { default as BAttribute } from "../../server/src/becca/entities/battribute.js";
 export type { default as BBranch } from "../../server/src/becca/entities/bbranch.js";
 export type { default as BEtapiToken } from "../../server/src/becca/entities/betapi_token.js";
@@ -31,6 +35,7 @@ export type { Api };
 const fakeNote = new BNote();
 
 /**
- * The `api` global variable allows access to the backend script API, which is documented in {@link Api}.
+ * The `api` global variable allows access to the backend script API,
+ * which is documented in {@link Api}.
  */
 export const api: Api = new BackendScriptApi(fakeNote, {});

apps/build-docs/src/build-docs.ts

@@ -1,19 +1,90 @@
 process.env.TRILIUM_INTEGRATION_TEST = "memory-no-store";
-process.env.TRILIUM_RESOURCE_DIR = "../server/src";
+// Only set TRILIUM_RESOURCE_DIR if not already set (e.g., by Nix wrapper)
+if (!process.env.TRILIUM_RESOURCE_DIR) {
+    process.env.TRILIUM_RESOURCE_DIR = "../server/src";
+}
 process.env.NODE_ENV = "development";
 
 import cls from "@triliumnext/server/src/services/cls.js";
-import { dirname, join, resolve } from "path";
+import archiver from "archiver";
+import { execSync } from "child_process";
+import { WriteStream } from "fs";
 import * as fs from "fs/promises";
 import * as fsExtra from "fs-extra";
-import archiver from "archiver";
-import { WriteStream } from "fs";
-import { execSync } from "child_process";
+import yaml from "js-yaml";
+import { dirname, join, resolve } from "path";
+
 import BuildContext from "./context.js";
 
+interface NoteMapping {
+    rootNoteId: string;
+    path: string;
+    format: "markdown" | "html" | "share";
+    ignoredFiles?: string[];
+    exportOnly?: boolean;
+}
+
+interface Config {
+    baseUrl: string;
+    noteMappings: NoteMapping[];
+}
+
 const DOCS_ROOT = "../../../docs";
 const OUTPUT_DIR = "../../site";
 
+// Load configuration from edit-docs-config.yaml
+async function loadConfig(configPath?: string): Promise<Config | null> {
+    const pathsToTry = configPath
+        ? [resolve(configPath)]
+        : [
+            join(process.cwd(), "edit-docs-config.yaml"),
+            join(__dirname, "../../../edit-docs-config.yaml")
+        ];
+
+    for (const path of pathsToTry) {
+        try {
+            const configContent = await fs.readFile(path, "utf-8");
+            const config = yaml.load(configContent) as Config;
+
+            // Resolve all paths relative to the config file's directory
+            const CONFIG_DIR = dirname(path);
+            config.noteMappings = config.noteMappings.map((mapping) => ({
+                ...mapping,
+                path: resolve(CONFIG_DIR, mapping.path)
+            }));
+
+            return config;
+        } catch (error) {
+            if (error.code !== "ENOENT") {
+                throw error; // rethrow unexpected errors
+            }
+        }
+    }
+
+    return null; // No config file found
+}
+
+async function exportDocs(
+    noteId: string,
+    format: "markdown" | "html" | "share",
+    outputPath: string,
+    ignoredFiles?: string[]
+) {
+    const zipFilePath = `output-${noteId}.zip`;
+    try {
+        const { exportToZipFile } = (await import("@triliumnext/server/src/services/export/zip.js"))
+            .default;
+        await exportToZipFile(noteId, format, zipFilePath, {});
+
+        const ignoredSet = ignoredFiles ? new Set(ignoredFiles) : undefined;
+        await extractZip(zipFilePath, outputPath, ignoredSet);
+    } finally {
+        if (await fsExtra.exists(zipFilePath)) {
+            await fsExtra.rm(zipFilePath);
+        }
+    }
+}
+
 async function importAndExportDocs(sourcePath: string, outputSubDir: string) {
     const note = await importData(sourcePath);
 
@@ -21,15 +92,18 @@ async function importAndExportDocs(sourcePath: string, outputSubDir: string) {
     const zipName = outputSubDir || "user-guide";
     const zipFilePath = `output-${zipName}.zip`;
     try {
-        const { exportToZip } = (await import("@triliumnext/server/src/services/export/zip.js")).default;
+        const { exportToZip } = (await import("@triliumnext/server/src/services/export/zip.js"))
+            .default;
         const branch = note.getParentBranches()[0];
-        const taskContext = new (await import("@triliumnext/server/src/services/task_context.js")).default(
-            "no-progress-reporting",
-            "export",
-            null
-        );
+        const taskContext = new (await import("@triliumnext/server/src/services/task_context.js"))
+            .default(
+                "no-progress-reporting",
+                "export",
+                null
+            );
         const fileOutputStream = fsExtra.createWriteStream(zipFilePath);
         await exportToZip(taskContext, branch, "share", fileOutputStream);
+        const { waitForStreamToFinish } = await import("@triliumnext/server/src/services/utils.js");
         await waitForStreamToFinish(fileOutputStream);
 
         // Output to root directory if outputSubDir is empty, otherwise to subdirectory
@@ -42,7 +116,7 @@ async function importAndExportDocs(sourcePath: string, outputSubDir: string) {
     }
 }
 
-async function buildDocsInner() {
+async function buildDocsInner(config?: Config) {
     const i18n = await import("@triliumnext/server/src/services/i18n.js");
     await i18n.initializeTranslations();
 
@@ -53,18 +127,49 @@ async function buildDocsInner() {
     const beccaLoader = await import("../../server/src/becca/becca_loader.js");
     await beccaLoader.beccaLoaded;
 
-    // Build User Guide
-    console.log("Building User Guide...");
-    await importAndExportDocs(join(__dirname, DOCS_ROOT, "User Guide"), "user-guide");
+    if (config) {
+        // Config-based build (reads from edit-docs-config.yaml)
+        console.log("Building documentation from config file...");
 
-    // Build Developer Guide
-    console.log("Building Developer Guide...");
-    await importAndExportDocs(join(__dirname, DOCS_ROOT, "Developer Guide"), "developer-guide");
+        // Import all non-export-only mappings
+        for (const mapping of config.noteMappings) {
+            if (!mapping.exportOnly) {
+                console.log(`Importing from ${mapping.path}...`);
+                await importData(mapping.path);
+            }
+        }
 
-    // Copy favicon.
-    await fs.copyFile("../../apps/website/src/assets/favicon.ico", join(OUTPUT_DIR, "favicon.ico"));
-    await fs.copyFile("../../apps/website/src/assets/favicon.ico", join(OUTPUT_DIR, "user-guide", "favicon.ico"));
-    await fs.copyFile("../../apps/website/src/assets/favicon.ico", join(OUTPUT_DIR, "developer-guide", "favicon.ico"));
+        // Export all mappings
+        for (const mapping of config.noteMappings) {
+            if (mapping.exportOnly) {
+                console.log(`Exporting ${mapping.format} to ${mapping.path}...`);
+                await exportDocs(
+                    mapping.rootNoteId,
+                    mapping.format,
+                    mapping.path,
+                    mapping.ignoredFiles
+                );
+            }
+        }
+    } else {
+        // Legacy hardcoded build (for backward compatibility)
+        console.log("Building User Guide...");
+        await importAndExportDocs(join(__dirname, DOCS_ROOT, "User Guide"), "user-guide");
+
+        console.log("Building Developer Guide...");
+        await importAndExportDocs(
+            join(__dirname, DOCS_ROOT, "Developer Guide"),
+            "developer-guide"
+        );
+
+        // Copy favicon.
+        await fs.copyFile("../../apps/website/src/assets/favicon.ico",
+            join(OUTPUT_DIR, "favicon.ico"));
+        await fs.copyFile("../../apps/website/src/assets/favicon.ico",
+            join(OUTPUT_DIR, "user-guide", "favicon.ico"));
+        await fs.copyFile("../../apps/website/src/assets/favicon.ico",
+            join(OUTPUT_DIR, "developer-guide", "favicon.ico"));
+    }
 
     console.log("Documentation built successfully!");
 }
@@ -91,12 +196,13 @@ async function createImportZip(path: string) {
         zlib: { level: 0 }
     });
 
-    console.log("Archive path is ", resolve(path))
+    console.log("Archive path is ", resolve(path));
     archive.directory(path, "/");
 
     const outputStream = fsExtra.createWriteStream(inputFile);
     archive.pipe(outputStream);
     archive.finalize();
+    const { waitForStreamToFinish } = await import("@triliumnext/server/src/services/utils.js");
     await waitForStreamToFinish(outputStream);
 
     try {
@@ -106,15 +212,15 @@ async function createImportZip(path: string) {
     }
 }
 
-function waitForStreamToFinish(stream: WriteStream) {
-    return new Promise<void>((res, rej) => {
-        stream.on("finish", () => res());
-        stream.on("error", (err) => rej(err));
-    });
-}
 
-export async function extractZip(zipFilePath: string, outputPath: string, ignoredFiles?: Set<string>) {
-    const { readZipFile, readContent } = (await import("@triliumnext/server/src/services/import/zip.js"));
+export async function extractZip(
+    zipFilePath: string,
+    outputPath: string,
+    ignoredFiles?: Set<string>
+) {
+    const { readZipFile, readContent } = (await import(
+        "@triliumnext/server/src/services/import/zip.js"
+    ));
     await readZipFile(await fs.readFile(zipFilePath), async (zip, entry) => {
         // We ignore directories since they can appear out of order anyway.
         if (!entry.fileName.endsWith("/") && !ignoredFiles?.has(entry.fileName)) {
@@ -129,6 +235,27 @@ export async function extractZip(zipFilePath: string, outputPath: string, ignore
     });
 }
 
+export async function buildDocsFromConfig(configPath?: string, gitRootDir?: string) {
+    const config = await loadConfig(configPath);
+
+    if (gitRootDir) {
+        // Build the share theme if we have a gitRootDir (for Trilium project)
+        execSync(`pnpm run --filter share-theme build`, {
+            stdio: "inherit",
+            cwd: gitRootDir
+        });
+    }
+
+    // Trigger the actual build.
+    await new Promise((res, rej) => {
+        cls.init(() => {
+            buildDocsInner(config ?? undefined)
+                .catch(rej)
+                .then(res);
+        });
+    });
+}
+
 export default async function buildDocs({ gitRootDir }: BuildContext) {
     // Build the share theme.
     execSync(`pnpm run --filter share-theme build`, {

apps/build-docs/src/cli.ts

@@ -0,0 +1,89 @@
+#!/usr/bin/env node
+
+import packageJson from "../package.json" with { type: "json" };
+import { buildDocsFromConfig } from "./build-docs.js";
+
+// Parse command-line arguments
+function parseArgs() {
+    const args = process.argv.slice(2);
+    let configPath: string | undefined;
+    let showHelp = false;
+    let showVersion = false;
+
+    for (let i = 0; i < args.length; i++) {
+        if (args[i] === "--config" || args[i] === "-c") {
+            configPath = args[i + 1];
+            if (!configPath) {
+                console.error("Error: --config/-c requires a path argument");
+                process.exit(1);
+            }
+            i++; // Skip the next argument as it's the value
+        } else if (args[i] === "--help" || args[i] === "-h") {
+            showHelp = true;
+        } else if (args[i] === "--version" || args[i] === "-v") {
+            showVersion = true;
+        }
+    }
+
+    return { configPath, showHelp, showVersion };
+}
+
+function getVersion(): string {
+    return packageJson.version;
+}
+
+function printHelp() {
+    const version = getVersion();
+    console.log(`
+Usage: trilium-build-docs [options]
+
+Options:
+  -c, --config <path>  Path to the configuration file
+                       (default: edit-docs-config.yaml in current directory)
+  -h, --help           Display this help message
+  -v, --version        Display version information
+
+Description:
+  Builds documentation from Trilium note structure and exports to various formats.
+  Configuration file should be in YAML format with the following structure:
+
+  baseUrl: "https://example.com"
+  noteMappings:
+    - rootNoteId: "noteId123"
+      path: "docs"
+      format: "markdown"
+    - rootNoteId: "noteId456"
+      path: "public/docs"
+      format: "share"
+      exportOnly: true
+
+Version: ${version}
+`);
+}
+
+function printVersion() {
+    const version = getVersion();
+    console.log(version);
+}
+
+async function main() {
+    const { configPath, showHelp, showVersion } = parseArgs();
+
+    if (showHelp) {
+        printHelp();
+        process.exit(0);
+    } else if (showVersion) {
+        printVersion();
+        process.exit(0);
+    }
+
+    try {
+        await buildDocsFromConfig(configPath);
+        process.exit(0);
+    } catch (error) {
+        console.error("Error building documentation:", error);
+        process.exit(1);
+    }
+}
+
+main();

apps/build-docs/src/frontend_script_entrypoint.ts

@@ -13,16 +13,19 @@
  * Make sure to keep in line with frontend's `script_context.ts`.
  */
 
-export type { default as BasicWidget } from "../../client/src/widgets/basic_widget.js";
 export type { default as FAttachment } from "../../client/src/entities/fattachment.js";
 export type { default as FAttribute } from "../../client/src/entities/fattribute.js";
 export type { default as FBranch } from "../../client/src/entities/fbranch.js";
 export type { default as FNote } from "../../client/src/entities/fnote.js";
 export type { Api } from "../../client/src/services/frontend_script_api.js";
-export type { default as NoteContextAwareWidget } from "../../client/src/widgets/note_context_aware_widget.js";
+export type { default as BasicWidget } from "../../client/src/widgets/basic_widget.js";
+export type {
+    default as NoteContextAwareWidget
+} from "../../client/src/widgets/note_context_aware_widget.js";
 export type { default as RightPanelWidget } from "../../client/src/widgets/right_panel_widget.js";
 
 import FrontendScriptApi, { type Api } from "../../client/src/services/frontend_script_api.js";
 
-//@ts-expect-error
+
+// @ts-expect-error - FrontendScriptApi is not directly exportable as Api without this simulation.
 export const api: Api = new FrontendScriptApi();

apps/build-docs/src/main.ts

@@ -1,9 +1,10 @@
-import { join } from "path";
-import BuildContext from "./context";
-import buildSwagger from "./swagger";
 import { cpSync, existsSync, mkdirSync, rmSync } from "fs";
+import { join } from "path";
+
 import buildDocs from "./build-docs";
+import BuildContext from "./context";
 import buildScriptApi from "./script-api";
+import buildSwagger from "./swagger";
 
 const context: BuildContext = {
     gitRootDir: join(__dirname, "../../../"),

apps/build-docs/src/script-api.ts

@@ -1,7 +1,8 @@
 import { execSync } from "child_process";
-import BuildContext from "./context";
 import { join } from "path";
 
+import BuildContext from "./context";
+
 export default function buildScriptApi({ baseDir, gitRootDir }: BuildContext) {
     // Generate types
     execSync(`pnpm typecheck`, { stdio: "inherit", cwd: gitRootDir });

apps/build-docs/src/swagger.ts

@@ -1,7 +1,8 @@
-import BuildContext from "./context";
-import { join } from "path";
 import { execSync } from "child_process";
 import { mkdirSync } from "fs";
+import { join } from "path";
+
+import BuildContext from "./context";
 
 interface BuildInfo {
     specPath: string;
@@ -27,6 +28,9 @@ export default function buildSwagger({ baseDir, gitRootDir }: BuildContext) {
         const absSpecPath = join(gitRootDir, specPath);
         const targetDir = join(baseDir, outDir);
         mkdirSync(targetDir, { recursive: true });
-        execSync(`pnpm redocly build-docs ${absSpecPath} -o ${targetDir}/index.html`, { stdio: "inherit" });
+        execSync(
+            `pnpm redocly build-docs ${absSpecPath} -o ${targetDir}/index.html`,
+            { stdio: "inherit" }
+        );
     }
 }

apps/build-docs/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": [],
+  "include": [
+    "scripts/**/*.ts"
+  ],
   "references": [
     {
       "path": "../server"

apps/build-docs/typedoc.backend.json

@@ -4,6 +4,7 @@
   "entryPoints": [
     "src/backend_script_entrypoint.ts"
   ],
+  "tsconfig": "tsconfig.app.json",
   "plugin": [
     "typedoc-plugin-missing-exports"
   ]

apps/build-docs/typedoc.frontend.json

@@ -4,6 +4,7 @@
   "entryPoints": [
     "src/frontend_script_entrypoint.ts"
   ],
+  "tsconfig": "tsconfig.app.json",
   "plugin": [
     "typedoc-plugin-missing-exports"
   ]

apps/client/.stylelintrc.json

@@ -0,0 +1,26 @@
+{
+  "languageOptions": {
+    "directionality": {
+      "block": "top-to-bottom",
+      "inline": "left-to-right"
+    }
+  },
+  "rules": {
+    "property-layout-mappings": ["flow-relative", {
+      "ignoreProperties": [
+        "top", "bottom",
+        "width", "height",
+        "min-width", "min-height",
+        "max-width", "max-height",
+        "margin-top", "margin-bottom",
+        "padding-top", "padding-bottom",
+        "border-top", "border-top-width", "border-top-style", "border-top-color",
+        "border-bottom", "border-bottom-width", "border-bottom-style", "border-bottom-color",
+        "scroll-margin-top", "scroll-margin-bottom",
+        "scroll-padding-top", "scroll-padding-bottom",
+        "overflow-x", "overflow-y",
+        "contain-intrinsic-width", "contain-intrinsic-height"
+      ]
+    }]
+  }
+}

apps/client/index.html

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

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.101.1",
+  "version": "0.102.2",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -13,72 +13,83 @@
     "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
     "test": "vitest",
     "coverage": "vitest --coverage",
-    "circular-deps": "dpdm -T src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
+    "circular-deps": "dpdm -T src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular",
+    "stylelint": "stylelint --allow-empty-input \"src/**/*.css\""
   },
   "dependencies": {
-    "@excalidraw/excalidraw": "0.18.0",
+    "@excalidraw/excalidraw": "0.18.1",
     "@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/rrule": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
-    "@mermaid-js/layout-elk": "0.2.0",
+    "@mermaid-js/layout-elk": "0.2.1",
     "@mind-elixir/node-menu": "5.0.1",
-    "@popperjs/core": "2.11.8",
-    "@preact/signals": "2.5.1",
+    "@preact/signals": "2.9.0",
     "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
     "@triliumnext/split.js": "workspace:*",
-    "@zumer/snapdom": "2.0.1",
+    "@univerjs/preset-sheets-conditional-formatting": "0.20.1",
+    "@univerjs/preset-sheets-core": "0.20.1",
+    "@univerjs/preset-sheets-data-validation": "0.20.1",
+    "@univerjs/preset-sheets-filter": "0.20.1",
+    "@univerjs/preset-sheets-find-replace": "0.20.1",
+    "@univerjs/preset-sheets-note": "0.20.1",
+    "@univerjs/preset-sheets-sort": "0.20.1",
+    "@univerjs/presets": "0.20.1",
+    "@zumer/snapdom": "2.9.0",
     "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",
+    "dompurify": "3.4.1",
     "draggabilly": "3.0.0",
-    "force-graph": "1.51.0",
-    "globals": "16.5.0",
-    "i18next": "25.7.3",
-    "i18next-http-backend": "3.0.2",
-    "jquery": "3.7.1",
+    "force-graph": "1.51.4",
+    "htmldiff-js": "1.0.5",
+    "i18next": "26.0.8",
+    "i18next-http-backend": "3.0.6",
+    "jquery": "4.0.0",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.27",
-    "knockout": "3.5.1",
+    "katex": "0.16.45",
     "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.3.8",
-    "normalize.css": "8.0.1",
-    "panzoom": "9.4.3",
-    "preact": "10.28.1",
-    "react-i18next": "16.5.0",
-    "reveal.js": "5.2.1",
+    "marked": "18.0.2",
+    "mermaid": "11.14.0",
+    "mind-elixir": "5.11.0",
+    "panzoom": "9.4.4",
+    "preact": "10.29.1",
+    "react-i18next": "17.0.4",
+    "react-window": "2.2.7",
+    "reveal.js": "6.0.1",
+    "rrule": "2.8.1",
     "svg-pan-zoom": "3.6.2",
-    "tabulator-tables": "6.3.1",
+    "tabulator-tables": "6.4.0",
     "vanilla-js-wheel-zoom": "9.0.4"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-inspector": "5.0.0",
-    "@preact/preset-vite": "2.10.2",
+    "@prefresh/vite": "3.0.0",
     "@types/bootstrap": "5.2.10",
-    "@types/jquery": "3.5.33",
+    "@types/jquery": "4.0.0",
     "@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",
-    "happy-dom": "20.0.11",
+    "@types/tabulator-tables": "6.3.2",
+    "copy-webpack-plugin": "14.0.0",
+    "happy-dom": "20.9.0",
+    "lightningcss": "1.32.0",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.1.4"
+    "stylelint": "17.9.0",
+    "vite-plugin-static-copy": "4.1.0"
   }
-}
+}

apps/client/src/assets/icon-classic.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve"><path d="M63.966,45.043c0.008-0.009,0.021-0.021,0.027-0.029c0.938-1.156-0.823-13.453-5.063-20.125  c-1.389-2.186-2.239-3.423-3.219-4.719c-3.907-5.166-6-6.125-6-6.125S35.732,24.78,36.149,44.315  c-1.754,0.065-11.218,7.528-14.826,14.388c-1.206,2.291-1.856,3.645-2.493,5.141c-2.539,5.957-2.33,8.25-2.33,8.25  s16.271,6.79,33.014-3.294c0.007,0.021,0.013,0.046,0.02,0.063c0.537,1.389,12.08,5.979,19.976,5.621  c2.587-0.116,4.084-0.238,5.696-0.444c6.424-0.818,8.298-2.157,8.298-2.157S81.144,54.396,63.966,45.043z M50.787,65.343  c1.059-1.183,4.648-5.853,0.995-11.315c-0.253-0.377-0.496-0.236-0.496-0.236s0.063,10.822-5.162,12.359  c-5.225,1.537-13.886,4.4-20.427,0.455C25,66.186,26.924,53.606,38.544,47.229c0.546,1.599,2.836,6.854,9.292,6.409  c0.453-0.031,0.453-0.313,0.453-0.313s-9.422-5.328-8.156-10.625s3.089-14.236,9.766-17.948c0.714-0.397,10.746,7.593,10.417,20.94  c-1.606-0.319-7.377-1.004-10.226,4.864c-0.198,0.409,0.046,0.549,0.046,0.549s9.31-5.521,13.275-1.789  c3.965,3.733,10.813,9.763,10.71,17.4C74.111,67.533,62.197,72.258,50.787,65.343z M35.613,35.145c0,0-0.991,3.241-0.603,7.524  l-13.393-7.524C21.618,35.145,27.838,30.931,35.613,35.145z M21.193,36.03l13.344,7.612c-3.872,1.872-6.142,4.388-6.142,4.388  C20.78,43.531,21.193,36.03,21.193,36.03z M72.287,49.064c0,0-2.321-2.471-6.23-4.263l13.187-7.881  C79.243,36.92,79.808,44.413,72.287,49.064z M78.687,36.113l-13.237,7.794c0.3-4.291-0.754-7.511-0.754-7.511  C72.383,32.025,78.687,36.113,78.687,36.113z M42.076,73.778c0,0,3.309-0.737,6.845-3.185l0.056,15.361  C48.977,85.955,42.244,82.621,42.076,73.778z M49.956,85.888L50,70.526c3.539,2.445,6.846,3.181,6.846,3.181  C56.686,82.551,49.956,85.888,49.956,85.888z"></path></svg>

apps/client/src/assets/icon-nightly.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 256 256" version="1.1" viewBox="0 0 256 256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+	<title>Trilium Notes</title>
+	<g>
+		<path d="m202.9 112.7c-22.5 16.1-54.5 12.8-74.9 6.3l14.8-11.8 14.1-11.3 49.1-39.3-51.2 35.9-14.3 10-14.9 10.5c0.7-21.2 7-49.9 28.6-65.4 1.8-1.3 3.9-2.6 6.1-3.8 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.4 2.8-4.9 5.4-7.4 7.8-3.4 3.5-6.8 6.4-10.1 8.8z" fill="#ab60e3"/>
+		<path d="m213.1 104c-22.2 12.6-51.4 9.3-70.3 3.2l14.1-11.3 49.1-39.3-51.2 35.9-14.3 10c0.5-18.1 4.9-42.1 19.7-58.6 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.3 2.8-4.8 5.4-7.2 7.8z" fill="#8038b8"/>
+		<path d="m220.5 96.2c-21.1 8.6-46.6 5.3-63.7-0.2l49.2-39.4-51.2 35.9c0.3-15.8 3.5-36.6 14.3-52.8 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.8 66z" fill="#560a8f"/>
+	
+		<path d="m106.7 179c-5.8-21 5.2-43.8 15.5-57.2l4.8 14.2 4.5 13.4 15.9 47-12.8-47.6-3.6-13.2-3.7-13.9c15.5 6.2 35.1 18.6 40.7 38.8 0.5 1.7 0.9 3.6 1.2 5.5 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.1-3.8-7.6-1.6-3.5-2.9-6.8-3.8-10z" fill="#bb9dd2"/>
+		<path d="m110.4 188.9c-3.4-19.8 6.9-40.5 16.6-52.9l4.5 13.4 15.9 47-12.8-47.6-3.6-13.2c13.3 5.2 29.9 15 38.1 30.4 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.2-3.8-7.7z" fill="#9a6cbc"/>
+		<path d="m114.2 196.5c-0.7-18 8.6-35.9 17.3-47.1l15.9 47-12.8-47.6c11.6 4.4 26.1 12.4 35.2 24.8 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8z" fill="#783ba5"/>
+	
+		<path d="m86.3 59.1c21.7 10.9 32.4 36.6 35.8 54.9l-15.2-6.6-14.5-6.3-50.6-22 48.8 24.9 13.6 6.9 14.3 7.3c-16.6 7.9-41.3 14.5-62.1 4.1-1.8-0.9-3.6-1.9-5.4-3.2-2.3-1.5-4.5-3.2-6.8-5.1-19.9-16.4-40.3-46.4-42.7-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.2 0.8 6.2 1.6 9.1 2.5 4 1.3 7.6 2.8 10.9 4.4z" fill="#ab60e3"/>
+		<path d="m75.4 54.8c18.9 12 28.4 35.6 31.6 52.6l-14.5-6.3-50.6-22 48.7 24.9 13.6 6.9c-14.1 6.8-34.5 13-53.3 8.2-2.3-1.5-4.5-3.2-6.8-5.1-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.1 0.8 6.2 1.6 9.1 2.6z" fill="#8038b8"/>
+		<path d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z" fill="#6f2796"/>
+	</g>
+</svg>

apps/client/src/assets/icon.svg

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 256 256" version="1.1" viewBox="0 0 256 256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+	<title>Trilium Notes</title>
+	<style type="text/css">
+		.st0{fill:#95C980;}
+		.st1{fill:#72B755;}
+		.st2{fill:#4FA52B;}
+		.st3{fill:#EE8C89;}
+		.st4{fill:#E96562;}
+		.st5{fill:#E33F3B;}
+		.st6{fill:#EFB075;}
+		.st7{fill:#E99547;}
+		.st8{fill:#E47B19;}
+	</style>
+	<g>
+		<path class="st0" d="m202.9 112.7c-22.5 16.1-54.5 12.8-74.9 6.3l14.8-11.8 14.1-11.3 49.1-39.3-51.2 35.9-14.3 10-14.9 10.5c0.7-21.2 7-49.9 28.6-65.4 1.8-1.3 3.9-2.6 6.1-3.8 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.4 2.8-4.9 5.4-7.4 7.8-3.4 3.5-6.8 6.4-10.1 8.8z"/>
+		<path class="st1" d="m213.1 104c-22.2 12.6-51.4 9.3-70.3 3.2l14.1-11.3 49.1-39.3-51.2 35.9-14.3 10c0.5-18.1 4.9-42.1 19.7-58.6 2.7-1.5 5.7-2.9 8.8-4.1 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.9 65.9-2.3 2.8-4.8 5.4-7.2 7.8z"/>
+		<path class="st2" d="m220.5 96.2c-21.1 8.6-46.6 5.3-63.7-0.2l49.2-39.4-51.2 35.9c0.3-15.8 3.5-36.6 14.3-52.8 27.1-11.1 68.5-15.3 85.2-9.5 0.1 16.2-15.9 45.4-33.8 66z"/>
+	
+		<path class="st3" d="m106.7 179c-5.8-21 5.2-43.8 15.5-57.2l4.8 14.2 4.5 13.4 15.9 47-12.8-47.6-3.6-13.2-3.7-13.9c15.5 6.2 35.1 18.6 40.7 38.8 0.5 1.7 0.9 3.6 1.2 5.5 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.1-3.8-7.6-1.6-3.5-2.9-6.8-3.8-10z"/>
+		<path class="st4" d="m110.4 188.9c-3.4-19.8 6.9-40.5 16.6-52.9l4.5 13.4 15.9 47-12.8-47.6-3.6-13.2c13.3 5.2 29.9 15 38.1 30.4 0.4 2.4 0.6 5 0.7 7.7 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8-1.4-2.6-2.7-5.2-3.8-7.7z"/>
+		<path class="st5" d="m114.2 196.5c-0.7-18 8.6-35.9 17.3-47.1l15.9 47-12.8-47.6c11.6 4.4 26.1 12.4 35.2 24.8 0.9 23.1-7.1 54.9-15.9 65.7-12-4.3-29.3-24-39.7-42.8z"/>
+
+		<path class="st6" d="m86.3 59.1c21.7 10.9 32.4 36.6 35.8 54.9l-15.2-6.6-14.5-6.3-50.6-22 48.8 24.9 13.6 6.9 14.3 7.3c-16.6 7.9-41.3 14.5-62.1 4.1-1.8-0.9-3.6-1.9-5.4-3.2-2.3-1.5-4.5-3.2-6.8-5.1-19.9-16.4-40.3-46.4-42.7-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.2 0.8 6.2 1.6 9.1 2.5 4 1.3 7.6 2.8 10.9 4.4z"/>
+		<path class="st7" d="m75.4 54.8c18.9 12 28.4 35.6 31.6 52.6l-14.5-6.3-50.6-22 48.7 24.9 13.6 6.9c-14.1 6.8-34.5 13-53.3 8.2-2.3-1.5-4.5-3.2-6.8-5.1-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3 3.1 0.8 6.2 1.6 9.1 2.6z"/>
+		<path class="st8" d="m66.3 52.2c15.3 12.8 23.3 33.6 26.1 48.9l-50.6-22 48.8 24.9c-12.2 6-29.6 11.8-46.5 10-19.8-16.4-40.2-46.4-42.6-61.5 12.4-6.5 41.5-5.8 64.8-0.3z"/>
+	</g>
+</svg>

apps/client/src/components/app_context.ts

@@ -1,12 +1,13 @@
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
 import type CodeMirror from "@triliumnext/codemirror";
-import { SqlExecuteResults } from "@triliumnext/commons";
+import { type LOCALE_IDS, SqlExecuteResponse } from "@triliumnext/commons";
 import type { NativeImage, TouchBar } from "electron";
 import { ColumnComponent } from "tabulator-tables";
 
 import type { Attribute } from "../services/attribute_parser.js";
+import bundleService from "../services/bundle.js";
 import froca from "../services/froca.js";
-import { initLocale,t } from "../services/i18n.js";
+import { initLocale, t } from "../services/i18n.js";
 import keyboardActionsService from "../services/keyboard_actions.js";
 import linkService, { type ViewScope } from "../services/link.js";
 import type LoadResults from "../services/load_results.js";
@@ -23,6 +24,7 @@ import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
 import type { InfoProps } from "../widgets/dialogs/info.jsx";
 import type { MarkdownImportOpts } from "../widgets/dialogs/markdown_import.jsx";
 import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
+import type { PrintPreviewData } from "../widgets/dialogs/print_preview.jsx";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
 import type NoteTreeWidget from "../widgets/note_tree.js";
 import Component from "./component.js";
@@ -101,8 +103,6 @@ export type CommandMappings = {
     showRevisions: CommandData & {
         noteId?: string | null;
     };
-    showLlmChat: CommandData;
-    createAiChat: CommandData;
     showOptions: CommandData & {
         section: string;
     };
@@ -154,6 +154,7 @@ export type CommandMappings = {
     };
     openInTab: ContextMenuCommandData;
     openNoteInSplit: ContextMenuCommandData;
+    openNoteInWindow: ContextMenuCommandData;
     openNoteInPopup: ContextMenuCommandData;
     toggleNoteHoisting: ContextMenuCommandData;
     insertNoteAfter: ContextMenuCommandData;
@@ -172,6 +173,7 @@ export type CommandMappings = {
     duplicateSubtree: ContextMenuCommandData;
     expandSubtree: ContextMenuCommandData;
     collapseSubtree: ContextMenuCommandData;
+    toggleArchivedNotes: CommandData;
     sortChildNotes: ContextMenuCommandData;
     copyNotePathToClipboard: ContextMenuCommandData;
     recentChangesInSubtree: ContextMenuCommandData;
@@ -280,6 +282,7 @@ export type CommandMappings = {
     backInNoteHistory: CommandData;
     forwardInNoteHistory: CommandData;
     forceSaveRevision: CommandData;
+    saveNamedRevision: CommandData;
     scrollToActiveNote: CommandData;
     quickSearch: CommandData;
     collapseTree: CommandData;
@@ -303,6 +306,7 @@ export type CommandMappings = {
     ninthTab: CommandData;
     lastTab: CommandData;
     showNoteSource: CommandData;
+    showNoteOCRText: CommandData;
     showSQLConsole: CommandData;
     showBackendLog: CommandData;
     showCheatsheet: CommandData;
@@ -329,6 +333,7 @@ export type CommandMappings = {
     toggleRightPane: CommandData;
     printActiveNote: CommandData;
     exportAsPdf: CommandData;
+    showPrintPreview: PrintPreviewData;
     openNoteExternally: CommandData;
     openNoteCustom: CommandData;
     openNoteOnServer: CommandData;
@@ -382,7 +387,8 @@ export type CommandMappings = {
     reloadTextEditor: CommandData;
     chooseNoteType: CommandData & {
         callback: ChooseNoteTypeCallback
-    }
+    };
+    customDownload: CommandData;
 };
 
 type EventMappings = {
@@ -408,7 +414,7 @@ type EventMappings = {
     addNewLabel: CommandData;
     addNewRelation: CommandData;
     sqlQueryResults: CommandData & {
-        results: SqlExecuteResults;
+        response: SqlExecuteResponse;
     };
     readOnlyTemporarilyDisabled: {
         noteContext: NoteContext;
@@ -473,6 +479,11 @@ type EventMappings = {
     noteContextRemoved: {
         ntxIds: string[];
     };
+    contextDataChanged: {
+        noteContext: NoteContext;
+        key: string;
+        value: unknown;
+    };
     exportSvg: { ntxId: string | null | undefined; };
     exportPng: { ntxId: string | null | undefined; };
     geoMapCreateChildNote: {
@@ -503,7 +514,7 @@ type EventMappings = {
     contentSafeMarginChanged: {
         top: number;
         noteContext: NoteContext;
-    }
+    };
 };
 
 export type EventListener<T extends EventNames> = {
@@ -557,7 +568,7 @@ export class AppContext extends Component {
      */
     async earlyInit() {
         await options.initializedPromise;
-        await initLocale();
+        await initLocale((options.get("locale") || "en") as LOCALE_IDS);
     }
 
     setLayout(layout: Layout) {
@@ -572,7 +583,6 @@ export class AppContext extends Component {
 
         this.tabManager.loadTabs();
 
-        const bundleService = (await import("../services/bundle.js")).default;
         setTimeout(() => bundleService.executeStartupBundles(), 2000);
     }
 

apps/client/src/components/component.ts

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

apps/client/src/components/entrypoints.ts

@@ -1,16 +1,18 @@
-import utils from "../services/utils.js";
+import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
+
+import bundleService from "../services/bundle.js";
+import dialog from "../services/dialog.js";
 import dateNoteService from "../services/date_notes.js";
+import froca from "../services/froca.js";
+import { t } from "../services/i18n.js";
+import linkService from "../services/link.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import server from "../services/server.js";
+import toastService from "../services/toast.js";
+import utils from "../services/utils.js";
+import ws from "../services/ws.js";
 import appContext, { type NoteCommandData } from "./app_context.js";
 import Component from "./component.js";
-import toastService from "../services/toast.js";
-import ws from "../services/ws.js";
-import bundleService from "../services/bundle.js";
-import froca from "../services/froca.js";
-import linkService from "../services/link.js";
-import { t } from "../services/i18n.js";
-import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
 
 export default class Entrypoints extends Component {
     constructor() {
@@ -187,13 +189,8 @@ export default class Entrypoints extends Component {
         } else if (note.mime.endsWith("env=backend")) {
             await server.post(`script/run/${note.noteId}`);
         } else if (note.mime === "text/x-sqlite;schema=trilium") {
-            const resp = await server.post<SqlExecuteResponse>(`sql/execute/${note.noteId}`);
-
-            if (!resp.success) {
-                toastService.showError(t("entrypoints.sql-error", { message: resp.error }));
-            }
-
-            await appContext.triggerEvent("sqlQueryResults", { ntxId: ntxId, results: resp.results });
+            const response = await server.post<SqlExecuteResponse>(`sql/execute/${note.noteId}`);
+            await appContext.triggerEvent("sqlQueryResults", { ntxId, response });
         }
 
         toastService.showMessage(t("entrypoints.note-executed"));
@@ -220,4 +217,21 @@ export default class Entrypoints extends Component {
 
         toastService.showMessage(t("entrypoints.note-revision-created"));
     }
+
+    async saveNamedRevisionCommand() {
+        const noteId = appContext.tabManager.getActiveContextNoteId();
+        if (!noteId) return;
+
+        const name = await dialog.prompt({
+            title: t("entrypoints.save-named-revision-title"),
+            message: t("entrypoints.save-named-revision-message"),
+            defaultValue: ""
+        });
+
+        // null means the user cancelled
+        if (name === null) return;
+
+        await server.post(`notes/${noteId}/revision`, { description: name || undefined });
+        toastService.showMessage(t("entrypoints.note-revision-created"));
+    }
 }

apps/client/src/components/main_tree_executors.ts

@@ -79,4 +79,8 @@ export default class MainTreeExecutors extends Component {
             saveSelection: false
         });
     }
+
+    async toggleArchivedNotesCommand(){
+        await this.tree?.toggleArchivedNotes();
+    }
 }

apps/client/src/components/note_context.ts

@@ -12,16 +12,57 @@ import server from "../services/server.js";
 import treeService from "../services/tree.js";
 import utils from "../services/utils.js";
 import { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import type { HeadingContext } from "../widgets/sidebar/TableOfContents.js";
 import appContext, { type EventData, type EventListener } from "./app_context.js";
 import Component from "./component.js";
 
 export interface SetNoteOpts {
     triggerSwitchEvent?: unknown;
     viewScope?: ViewScope;
+    /** If true, skip closing the currently active dialog. Used when opening a note into a stackable popup (e.g. quick-edit) that must not dismiss the dialog it was launched from. */
+    keepActiveDialog?: boolean;
 }
 
 export type GetTextEditorCallback = (editor: CKTextEditor) => void;
 
+export type SaveState = "saved" | "saving" | "unsaved" | "error";
+
+const READ_ONLY_CAPABLE_TYPES: string[] = [
+    "text",
+    "code",
+    "mermaid",
+    "canvas",
+    "mindMap",
+    "spreadsheet"
+];
+
+export interface NoteContextDataMap {
+    toc: HeadingContext;
+    pdfPages: {
+        totalPages: number;
+        currentPage: number;
+        scrollToPage(page: number): void;
+        requestThumbnail(page: number): void;
+    };
+    pdfAttachments: {
+        attachments: PdfAttachment[];
+        downloadAttachment(filename: string): void;
+    };
+    pdfLayers: {
+        layers: PdfLayer[];
+        toggleLayer(layerId: string, visible: boolean): void;
+    };
+    pdfAnnotations: {
+        annotations: PdfAnnotationInfo[];
+        scrollToAnnotation(annotationId: string, pageNumber: number): void;
+    };
+    saveState: {
+        state: SaveState;
+    };
+}
+
+type ContextDataKey = keyof NoteContextDataMap;
+
 class NoteContext extends Component implements EventListener<"entitiesReloaded"> {
     ntxId: string | null;
     hoistedNoteId: string;
@@ -32,6 +73,13 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     parentNoteId?: string | null;
     viewScope?: ViewScope;
 
+    /**
+     * Metadata storage for UI components (e.g., table of contents, PDF page list, code outline).
+     * This allows type widgets to publish data that sidebar/toolbar components can consume.
+     * Data is automatically cleared when navigating to a different note.
+     */
+    private contextData: Map<string, unknown> = new Map();
+
     constructor(ntxId: string | null = null, hoistedNoteId: string = "root", mainNtxId: string | null = null) {
         super();
 
@@ -85,12 +133,30 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
         await this.triggerEvent("beforeNoteSwitch", { noteContext: this });
 
-        closeActiveDialog();
+        if (!opts.keepActiveDialog) {
+            closeActiveDialog();
+        }
 
         this.notePath = resolvedNotePath;
         this.viewScope = opts.viewScope;
         ({ noteId: this.noteId, parentNoteId: this.parentNoteId } = treeService.getNoteIdAndParentIdFromUrl(resolvedNotePath));
 
+        // Clear context data when switching notes and notify subscribers
+        const oldKeys = Array.from(this.contextData.keys());
+        this.contextData.clear();
+        if (oldKeys.length > 0) {
+            // Notify subscribers asynchronously to avoid blocking navigation
+            window.setTimeout(() => {
+                for (const key of oldKeys) {
+                    this.triggerEvent("contextDataChanged", {
+                        noteContext: this,
+                        key,
+                        value: undefined
+                    });
+                }
+            }, 0);
+        }
+
         this.saveToRecentNotes(resolvedNotePath);
 
         protectedSessionHolder.touchProtectedSessionIfNecessary(this.note);
@@ -254,8 +320,13 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
             return false;
         }
 
-        // "readOnly" is a state valid only for text/code notes
-        if (!this.note || (this.note.type !== "text" && this.note.type !== "code")) {
+        if (!this.note) {
+            return false;
+        }
+
+        // Note types that support a read-only state (via the #readOnly label, source view, or auto-readonly).
+        const isPdf = this.note.type === "file" && this.note.mime === "application/pdf";
+        if (!isPdf && !READ_ONLY_CAPABLE_TYPES.includes(this.note.type)) {
             return false;
         }
 
@@ -271,6 +342,11 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
             return true;
         }
 
+        // Auto read-only based on content size is only configurable for text/code.
+        if (this.note.type !== "text" && this.note.type !== "code") {
+            return false;
+        }
+
         // Store the initial decision about read-only status in the viewScope
         // This will be "remembered" until the viewScope is refreshed
         if (!this.viewScope) {
@@ -332,6 +408,10 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
         // Collections must always display a note list, even if no children.
         if (note.type === "book") {
+            if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
+                return false;
+            }
+
             const viewType = note.getLabelValue("viewType") ?? "grid";
             if (!["list", "grid"].includes(viewType)) {
                 return true;
@@ -443,6 +523,52 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
         return title;
     }
+
+    /**
+     * Set metadata for this note context (e.g., table of contents, PDF pages, code outline).
+     * This data can be consumed by sidebar/toolbar components.
+     *
+     * @param key - Unique identifier for the data type (e.g., "toc", "pdfPages", "codeOutline")
+     * @param value - The data to store (will be cleared when switching notes)
+     */
+    setContextData<K extends ContextDataKey>(key: K, value: NoteContextDataMap[K]): void {
+        this.contextData.set(key, value);
+        // Trigger event so subscribers can react
+        this.triggerEvent("contextDataChanged", {
+            noteContext: this,
+            key,
+            value
+        });
+    }
+
+    /**
+     * Get metadata for this note context.
+     *
+     * @param key - The data key to retrieve
+     * @returns The stored data, or undefined if not found
+     */
+    getContextData<K extends ContextDataKey>(key: K): NoteContextDataMap[K] | undefined {
+        return this.contextData.get(key) as NoteContextDataMap[K] | undefined;
+    }
+
+    /**
+     * Check if context data exists for a given key.
+     */
+    hasContextData(key: ContextDataKey): boolean {
+        return this.contextData.has(key);
+    }
+
+    /**
+     * Clear specific context data.
+     */
+    clearContextData(key: ContextDataKey): void {
+        this.contextData.delete(key);
+        this.triggerEvent("contextDataChanged", {
+            noteContext: this,
+            key,
+            value: undefined
+        });
+    }
 }
 
 export function openInCurrentNoteContext(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, notePath: string, viewScope?: ViewScope) {

apps/client/src/components/root_command_executor.ts

@@ -1,10 +1,8 @@
 import dateNoteService from "../services/date_notes.js";
 import froca from "../services/froca.js";
-import noteCreateService from "../services/note_create.js";
 import openService from "../services/open.js";
 import options from "../services/options.js";
 import protectedSessionService from "../services/protected_session.js";
-import toastService from "../services/toast.js";
 import treeService from "../services/tree.js";
 import utils, { openInReusableSplit } from "../services/utils.js";
 import appContext, { type CommandListenerData } from "./app_context.js";
@@ -150,6 +148,19 @@ export default class RootCommandExecutor extends Component {
         }
     }
 
+    async showNoteOCRTextCommand() {
+        const notePath = appContext.tabManager.getActiveContextNotePath();
+
+        if (notePath) {
+            await appContext.tabManager.openTabWithNoteWithHoisting(notePath, {
+                activate: true,
+                viewScope: {
+                    viewMode: "ocr"
+                }
+            });
+        }
+    }
+
     async showAttachmentsCommand() {
         const notePath = appContext.tabManager.getActiveContextNotePath();
 
@@ -248,34 +259,4 @@ export default class RootCommandExecutor extends Component {
         }
     }
 
-    async createAiChatCommand() {
-        try {
-            // Create a new AI Chat note at the root level
-            const rootNoteId = "root";
-
-            const result = await noteCreateService.createNote(rootNoteId, {
-                title: "New AI Chat",
-                type: "aiChat",
-                content: JSON.stringify({
-                    messages: [],
-                    title: "New AI Chat"
-                })
-            });
-
-            if (!result.note) {
-                toastService.showError("Failed to create AI Chat note");
-                return;
-            }
-
-            await appContext.tabManager.openTabWithNoteWithHoisting(result.note.noteId, {
-                activate: true
-            });
-
-            toastService.showMessage("Created new AI Chat note");
-        }
-        catch (e) {
-            console.error("Error creating AI Chat note:", e);
-            toastService.showError(`Failed to create AI Chat note: ${(e as Error).message}`);
-        }
-    }
 }

apps/client/src/desktop.ts

@@ -1,17 +1,18 @@
-import appContext from "./components/app_context.js";
-import utils from "./services/utils.js";
-import noteTooltipService from "./services/note_tooltip.js";
-import bundleService from "./services/bundle.js";
-import toastService from "./services/toast.js";
-import noteAutocompleteService from "./services/note_autocomplete.js";
-import electronContextMenu from "./menus/electron_context_menu.js";
-import glob from "./services/glob.js";
-import { t } from "./services/i18n.js";
-import options from "./services/options.js";
+import "autocomplete.js/index_jquery.js";
+
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
-import "boxicons/css/boxicons.min.css";
-import "autocomplete.js/index_jquery.js";
+
+import appContext from "./components/app_context.js";
+import electronContextMenu from "./menus/electron_context_menu.js";
+import bundleService from "./services/bundle.js";
+import glob from "./services/glob.js";
+import { t } from "./services/i18n.js";
+import noteAutocompleteService from "./services/note_autocomplete.js";
+import noteTooltipService from "./services/note_tooltip.js";
+import options from "./services/options.js";
+import toastService from "./services/toast.js";
+import utils from "./services/utils.js";
 
 await appContext.earlyInit();
 
@@ -45,10 +46,6 @@ if (utils.isElectron()) {
     electronContextMenu.setupContextMenu();
 }
 
-if (utils.isPWA()) {
-    initPWATopbarColor();
-}
-
 function initOnElectron() {
     const electron: typeof Electron = utils.dynamicRequire("electron");
     electron.ipcRenderer.on("globalShortcut", async (event, actionName) => appContext.triggerCommand(actionName));
@@ -57,7 +54,7 @@ function initOnElectron() {
     const currentWindow = electronRemote.getCurrentWindow();
     const style = window.getComputedStyle(document.body);
 
-    initDarkOrLightMode(style);
+    initDarkOrLightMode();
     initTransparencyEffects(style, currentWindow);
     initFullScreenDetection(currentWindow);
 
@@ -98,15 +95,22 @@ function initFullScreenDetection(currentWindow: Electron.BrowserWindow) {
 }
 
 function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {
+    const material = style.getPropertyValue("--background-material").trim();
     if (window.glob.platform === "win32") {
-        const material = style.getPropertyValue("--background-material");
-        // TriliumNextTODO: find a nicer way to make TypeScript happy – unfortunately TS did not like Array.includes here
         const bgMaterialOptions = ["auto", "none", "mica", "acrylic", "tabbed"] as const;
         const foundBgMaterialOption = bgMaterialOptions.find((bgMaterialOption) => material === bgMaterialOption);
         if (foundBgMaterialOption) {
             currentWindow.setBackgroundMaterial(foundBgMaterialOption);
         }
     }
+
+    if (window.glob.platform === "darwin") {
+        const bgMaterialOptions = [ "popover", "tooltip", "titlebar", "selection", "menu", "sidebar", "header", "sheet", "window", "hud", "fullscreen-ui", "content", "under-window", "under-page" ] as const;
+        const foundBgMaterialOption = bgMaterialOptions.find((bgMaterialOption) => material === bgMaterialOption);
+        if (foundBgMaterialOption) {
+            currentWindow.setVibrancy(foundBgMaterialOption);
+        }
+    }
 }
 
 /**
@@ -115,31 +119,14 @@ function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Elec
  *
  * @param style the root CSS element to read variables from.
  */
-function initDarkOrLightMode(style: CSSStyleDeclaration) {
+function initDarkOrLightMode() {
     let themeSource: typeof nativeTheme.themeSource = "system";
 
-    const themeStyle = style.getPropertyValue("--theme-style");
-    if (style.getPropertyValue("--theme-style-auto") !== "true" && (themeStyle === "light" || themeStyle === "dark")) {
+    const themeStyle = window.glob.getThemeStyle();
+    if (themeStyle !== "auto") {
         themeSource = themeStyle;
     }
 
     const { nativeTheme } = utils.dynamicRequire("@electron/remote") as typeof ElectronRemote;
     nativeTheme.themeSource = themeSource;
 }
-
-function initPWATopbarColor() {
-    const tracker = $("#background-color-tracker");
-
-    if (tracker.length) {
-        const applyThemeColor = () => {
-            let meta = $("meta[name='theme-color']");
-            if (!meta.length) {
-                meta = $(`<meta name="theme-color">`).appendTo($("head"));
-            }
-            meta.attr("content", tracker.css("color"));
-        };
-
-        tracker.on("transitionend", applyThemeColor);
-        applyThemeColor();
-    }
-}

apps/client/src/entities/fattribute.ts

@@ -66,7 +66,15 @@ class FAttribute {
     }
 
     get isAutoLink() {
-        return this.type === "relation" && ["internalLink", "imageLink", "relationMapLink", "includeNoteLink"].includes(this.name);
+        if (this.type === "relation") {
+            return ["internalLink", "imageLink", "relationMapLink", "includeNoteLink"].includes(this.name);
+        }
+
+        if (this.type === "label") {
+            return this.name === "internalBookmark";
+        }
+
+        return false;
     }
 
     get toString() {

apps/client/src/entities/fnote.ts

@@ -1,5 +1,6 @@
-import { MIME_TYPES_DICT } from "@triliumnext/commons";
+import { getNoteIcon } from "@triliumnext/commons";
 
+import bundleService from "../services/bundle.js";
 import cssClassManager from "../services/css_class_manager.js";
 import type { Froca } from "../services/froca-interface.js";
 import noteAttributeCache from "../services/note_attribute_cache.js";
@@ -8,36 +9,17 @@ import search from "../services/search.js";
 import server from "../services/server.js";
 import utils from "../services/utils.js";
 import type FAttachment from "./fattachment.js";
-import type { AttributeType,default as FAttribute } from "./fattribute.js";
+import type { AttributeType, default as FAttribute } from "./fattribute.js";
 
 const LABEL = "label";
 const RELATION = "relation";
 
-export const NOTE_TYPE_ICONS = {
-    file: "bx bx-file",
-    image: "bx bx-image",
-    code: "bx bx-code",
-    render: "bx bx-extension",
-    search: "bx bx-file-find",
-    relationMap: "bx bxs-network-chart",
-    book: "bx bx-book",
-    noteMap: "bx bxs-network-chart",
-    mermaid: "bx bx-selection",
-    canvas: "bx bx-pen",
-    webView: "bx bx-globe-alt",
-    launcher: "bx bx-link",
-    doc: "bx bxs-file-doc",
-    contentWidget: "bx bxs-widget",
-    mindMap: "bx bx-sitemap",
-    aiChat: "bx bx-bot"
-};
-
 /**
  * There are many different Note types, some of which are entirely opaque to the
  * end user. Those types should be used only for checking against, they are
  * not for direct use.
  */
-export type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap" | "aiChat";
+export type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap" | "spreadsheet" | "llmChat";
 
 export interface NotePathRecord {
     isArchived: boolean;
@@ -254,6 +236,16 @@ export default class FNote {
         return this.hasAttribute("label", "archived");
     }
 
+    /**
+     * Returns true if the note's metadata (title, icon) should not be editable.
+     * This applies to system notes like options, help, and launch bar configuration.
+     */
+    get isMetadataReadOnly() {
+        return utils.isLaunchBarConfig(this.noteId)
+            || this.noteId.startsWith("_help_")
+            || this.noteId.startsWith("_options");
+    }
+
     getChildNoteIds() {
         return this.children;
     }
@@ -585,25 +577,15 @@ export default class FNote {
         const iconClassLabels = this.getLabels("iconClass");
         const workspaceIconClass = this.getWorkspaceIconClass();
 
-        if (iconClassLabels && iconClassLabels.length > 0) {
-            return iconClassLabels[0].value;
-        } else if (workspaceIconClass) {
-            return workspaceIconClass;
-        } else if (this.noteId === "root") {
-            return "bx bx-home-alt-2";
-        }
-        if (this.noteId === "_share") {
-            return "bx bx-share-alt";
-        } else if (this.type === "text") {
-            if (this.isFolder()) {
-                return "bx bx-folder";
-            }
-            return "bx bx-note";
-        } else if (this.type === "code") {
-            const correspondingMimeType = MIME_TYPES_DICT.find(m => m.mime === this.mime);
-            return correspondingMimeType?.icon ?? NOTE_TYPE_ICONS.code;
-        }
-        return NOTE_TYPE_ICONS[this.type];
+        const icon = getNoteIcon({
+            noteId: this.noteId,
+            type: this.type,
+            mime: this.mime,
+            iconClass: iconClassLabels.length > 0 ? iconClassLabels[0].value : undefined,
+            workspaceIconClass,
+            isFolder: this.isFolder.bind(this)
+        });
+        return `tn-icon ${icon}`;
     }
 
     getColorClass() {
@@ -612,7 +594,9 @@ export default class FNote {
     }
 
     isFolder() {
-        return this.type === "search" || this.getFilteredChildBranches().length > 0;
+        if (this.isLabelTruthy("subtreeHidden")) return false;
+        if (this.type === "search") return true;
+        return this.getFilteredChildBranches().length > 0;
     }
 
     getFilteredChildBranches() {
@@ -727,6 +711,15 @@ 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.
@@ -1032,7 +1025,6 @@ export default class FNote {
         const env = this.getScriptEnv();
 
         if (env === "frontend") {
-            const bundleService = (await import("../services/bundle.js")).default;
             return await bundleService.getAndExecuteBundle(this.noteId);
         } else if (env === "backend") {
             await server.post(`script/run/${this.noteId}`);
@@ -1077,6 +1069,10 @@ export default class FNote {
         return this.mime === "text/x-sqlite;schema=trilium";
     }
 
+    isMarkdown() {
+        return this.type === "code" && (this.mime === "text/markdown" || this.mime === "text/x-markdown" || this.mime === "text/x-gfm");
+    }
+
     isTriliumScript() {
         return this.mime.startsWith("application/javascript");
     }

apps/client/src/index.ts

@@ -0,0 +1,168 @@
+import { getThemeStyle } from "./services/theme";
+
+async function bootstrap() {
+    showSplash();
+    await setupGlob();
+    await Promise.all([
+        initJQuery(),
+        loadBootstrapCss()
+    ]);
+    loadStylesheets();
+    loadIcons();
+    setBodyAttributes();
+    await loadScripts();
+    hideSplash();
+}
+
+async function initJQuery() {
+    const $ = (await import("jquery")).default;
+    window.$ = $;
+    window.jQuery = $;
+
+    // Polyfill removed jQuery methods for autocomplete.js compatibility
+    ($ as any).isArray = Array.isArray;
+    ($ as any).isFunction = function(obj: any) { return typeof obj === 'function'; };
+    ($ as any).isPlainObject = function(obj: any) {
+        if (obj == null || typeof obj !== 'object') { return false; }
+        const proto = Object.getPrototypeOf(obj);
+        if (proto === null) { return true; }
+        const Ctor = Object.prototype.hasOwnProperty.call(proto, 'constructor') && proto.constructor;
+        return typeof Ctor === 'function' && Ctor === Object;
+    };
+}
+
+async function setupGlob() {
+    const response = await fetch(`./bootstrap${window.location.search}`);
+    const json = await response.json();
+
+    window.global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
+    window.glob = {
+        ...json,
+        activeDialog: null
+    };
+    window.glob.getThemeStyle = getThemeStyle;
+}
+
+async function loadBootstrapCss() {
+    // We have to selectively import Bootstrap CSS based on text direction.
+    if (glob.isRtl) {
+        await import("bootstrap/dist/css/bootstrap.rtl.min.css");
+    } else {
+        await import("bootstrap/dist/css/bootstrap.min.css");
+    }
+}
+
+type StylesheetRef = {
+    href: string;
+    media?: string;
+};
+
+function getConfiguredThemeStylesheets(stylesheetsPath: string, theme: string, customThemeCssUrl?: string) {
+    if (theme === "auto") {
+        return [{ href: `${stylesheetsPath}/theme-dark.css`, media: "(prefers-color-scheme: dark)" }];
+    }
+
+    if (theme === "dark") {
+        return [{ href: `${stylesheetsPath}/theme-dark.css` }];
+    }
+
+    if (theme === "next") {
+        return [
+            { href: `${stylesheetsPath}/theme-next-light.css` },
+            { href: `${stylesheetsPath}/theme-next-dark.css`, media: "(prefers-color-scheme: dark)" }
+        ];
+    }
+
+    if (theme === "next-light") {
+        return [{ href: `${stylesheetsPath}/theme-next-light.css` }];
+    }
+
+    if (theme === "next-dark") {
+        return [{ href: `${stylesheetsPath}/theme-next-dark.css` }];
+    }
+
+    if (theme !== "light" && customThemeCssUrl) {
+        return [{ href: customThemeCssUrl }];
+    }
+
+    return [];
+}
+
+function loadStylesheets() {
+    const { device, assetPath, theme, themeBase, customThemeCssUrl } = window.glob;
+    const stylesheetsPath = `${assetPath}/stylesheets`;
+
+    const cssToLoad: StylesheetRef[] = [];
+    if (device !== "print") {
+        cssToLoad.push({ href: `${stylesheetsPath}/ckeditor-theme.css` });
+        cssToLoad.push({ href: `api/fonts` });
+        cssToLoad.push({ href: `${stylesheetsPath}/theme-light.css` });
+        cssToLoad.push(...getConfiguredThemeStylesheets(stylesheetsPath, theme, customThemeCssUrl));
+        if (themeBase) {
+            cssToLoad.push(...getConfiguredThemeStylesheets(stylesheetsPath, themeBase));
+        }
+        cssToLoad.push({ href: `${stylesheetsPath}/style.css` });
+    }
+
+    for (const { href, media } of cssToLoad) {
+        const linkEl = document.createElement("link");
+        linkEl.href = href;
+        linkEl.rel = "stylesheet";
+        if (media) {
+            linkEl.media = media;
+        }
+        document.head.appendChild(linkEl);
+    }
+}
+
+function loadIcons() {
+    const styleEl = document.createElement("style");
+    styleEl.innerText = window.glob.iconPackCss;
+    document.head.appendChild(styleEl);
+}
+
+function setBodyAttributes() {
+    const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
+    const classesToSet = [
+        device,
+        `heading-style-${headingStyle}`,
+        `layout-${layoutOrientation}`,
+        `platform-${platform}`,
+        isElectron && "electron",
+        hasNativeTitleBar && "native-titlebar",
+        hasBackgroundEffects && "background-effects"
+    ].filter(Boolean) as string[];
+
+    for (const classToSet of classesToSet) {
+        document.body.classList.add(classToSet);
+    }
+
+    document.body.lang = currentLocale.id;
+    document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
+}
+
+async function loadScripts() {
+    switch (glob.device) {
+        case "mobile":
+            await import("./mobile.js");
+            break;
+        case "print":
+            await import("./print.js");
+            break;
+        case "desktop":
+        default:
+            await import("./desktop.js");
+            break;
+    }
+}
+
+function showSplash() {
+    // hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide <noscript>
+    document.body.style.display = "none";
+}
+
+function hideSplash() {
+    document.body.style.display = "block";
+}
+
+bootstrap();

apps/client/src/layouts/desktop_layout.tsx

@@ -46,8 +46,6 @@ import ScrollPadding from "../widgets/scroll_padding.js";
 import SearchResult from "../widgets/search_result.jsx";
 import SharedInfo from "../widgets/shared_info.jsx";
 import RightPanelContainer from "../widgets/sidebar/RightPanelContainer.jsx";
-import SqlResults from "../widgets/sql_result.js";
-import SqlTableSchemas from "../widgets/sql_table_schemas.js";
 import TabRowWidget from "../widgets/tab_row.js";
 import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
@@ -163,11 +161,9 @@ export default class DesktopLayout {
                                                                     .child(<SharedInfo />)
                                                                 )
                                                                 .optChild(!isNewLayout, <PromotedAttributes />)
-                                                                .child(<SqlTableSchemas />)
                                                                 .child(<NoteDetail />)
                                                                 .child(<NoteList media="screen" />)
                                                                 .child(<SearchResult />)
-                                                                .child(<SqlResults />)
                                                                 .child(<ScrollPadding />)
                                                         )
                                                         .child(<ApiLog />)

apps/client/src/layouts/layout_commons.tsx

@@ -24,6 +24,7 @@ import InfoDialog from "../widgets/dialogs/info.js";
 import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js";
 import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
 import PopupEditorDialog from "../widgets/dialogs/PopupEditor.jsx";
+import PrintPreviewDialog from "../widgets/dialogs/print_preview.jsx";
 import ToastContainer from "../widgets/Toast.jsx";
 
 export function applyModals(rootContainer: RootContainer) {
@@ -46,6 +47,7 @@ export function applyModals(rootContainer: RootContainer) {
         .child(<ProtectedSessionPasswordDialog />)
         .child(<RevisionsDialog />)
         .child(<DeleteNotesDialog />)
+        .child(<PrintPreviewDialog />)
         .child(<InfoDialog />)
         .child(<ConfirmDialog />)
         .child(<PromptDialog />)

apps/client/src/layouts/mobile_layout.css

@@ -0,0 +1,76 @@
+#background-color-tracker {
+    color: var(--main-background-color) !important;
+}
+
+span.keyboard-shortcut,
+kbd {
+    display: none;
+}
+
+.dropdown-menu {
+    font-size: larger;
+}
+
+.action-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.25em;
+    padding-inline-start: 0.5em;
+    padding-inline-end: 0.5em;
+    color: var(--main-text-color);
+}
+.quick-search {
+    margin: 0;
+}
+.quick-search .dropdown-menu {
+    max-width: 350px;
+}
+
+/* #region Tree */
+.tree-wrapper {
+    max-height: 100%;
+    margin-top: 0px;
+    overflow-y: auto;
+    contain: content;
+    padding-inline-start: 10px;
+}
+
+.fancytree-title {
+    margin-inline-start: 0.6em !important;
+}
+
+.fancytree-node {
+    padding: 5px;
+}
+
+span.fancytree-expander {
+    width: 24px !important;
+    margin-inline-end: 5px;
+}
+
+.fancytree-loading span.fancytree-expander {
+    width: 24px;
+    height: 32px;
+}
+
+.fancytree-loading  span.fancytree-expander:after {
+    width: 20px;
+    height: 20px;
+    margin-top: 4px;
+    border-width: 2px;
+    border-style: solid;
+}
+
+.tree-wrapper .collapse-tree-button,
+.tree-wrapper .scroll-to-active-note-button,
+.tree-wrapper .tree-settings-button {
+    position: fixed;
+    margin-inline-end: 16px;
+    display: none;
+}
+
+.tree-wrapper .unhoist-button {
+    font-size: 200%;
+}
+/* #endregion */

apps/client/src/layouts/mobile_layout.tsx

@@ -1,128 +1,38 @@
-import { applyModals } from "./layout_commons.js";
-import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
-import { useNoteContext } from "../widgets/react/hooks.jsx";
-import CloseZenModeButton from "../widgets/close_zen_button.js";
-import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
-import FlexContainer from "../widgets/containers/flex_container.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import "./mobile_layout.css";
+
+import type AppContext from "../components/app_context.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
-import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
+import CloseZenModeButton from "../widgets/close_zen_button.js";
 import NoteList from "../widgets/collections/NoteList.jsx";
+import FlexContainer from "../widgets/containers/flex_container.js";
+import RootContainer from "../widgets/containers/root_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import SplitNoteContainer from "../widgets/containers/split_note_container.js";
+import FindWidget from "../widgets/find.js";
+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 MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
+import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
+import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
+import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
+import NoteIconWidget from "../widgets/note_icon.jsx";
 import NoteTitleWidget from "../widgets/note_title.js";
-import ContentHeader from "../widgets/containers/content_header.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import QuickSearchWidget from "../widgets/quick_search.js";
-import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import RootContainer from "../widgets/containers/root_container.js";
-import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
-import SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
-import SearchResult from "../widgets/search_result.jsx";
-import SharedInfoWidget from "../widgets/shared_info.js";
-import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
-import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
-import TabRowWidget from "../widgets/tab_row.js";
-import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
-import type AppContext from "../components/app_context.js";
 import NoteDetail from "../widgets/NoteDetail.jsx";
+import QuickSearchWidget from "../widgets/quick_search.js";
+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 PromotedAttributes from "../widgets/PromotedAttributes.jsx";
-import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
-
-const MOBILE_CSS = `
-<style>
-span.keyboard-shortcut,
-kbd {
-    display: none;
-}
-
-.dropdown-menu {
-    font-size: larger;
-}
-
-.action-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1.25em;
-    padding-inline-start: 0.5em;
-    padding-inline-end: 0.5em;
-    color: var(--main-text-color);
-}
-.quick-search {
-    margin: 0;
-}
-.quick-search .dropdown-menu {
-    max-width: 350px;
-}
-</style>`;
-
-const FANCYTREE_CSS = `
-<style>
-.tree-wrapper {
-    max-height: 100%;
-    margin-top: 0px;
-    overflow-y: auto;
-    contain: content;
-    padding-inline-start: 10px;
-}
-
-.fancytree-custom-icon {
-    font-size: 2em;
-}
-
-.fancytree-title {
-    font-size: 1.5em;
-    margin-inline-start: 0.6em !important;
-}
-
-.fancytree-node {
-    padding: 5px;
-}
-
-.fancytree-node .fancytree-expander:before {
-    font-size: 2em !important;
-}
-
-span.fancytree-expander {
-    width: 24px !important;
-    margin-inline-end: 5px;
-}
-
-.fancytree-loading span.fancytree-expander {
-    width: 24px;
-    height: 32px;
-}
-
-.fancytree-loading  span.fancytree-expander:after {
-    width: 20px;
-    height: 20px;
-    margin-top: 4px;
-    border-width: 2px;
-    border-style: solid;
-}
-
-.tree-wrapper .collapse-tree-button,
-.tree-wrapper .scroll-to-active-note-button,
-.tree-wrapper .tree-settings-button {
-    position: fixed;
-    margin-inline-end: 16px;
-    display: none;
-}
-
-.tree-wrapper .unhoist-button {
-    font-size: 200%;
-}
-</style>`;
+import { applyModals } from "./layout_commons.js";
 
 export default class MobileLayout {
     getRootWidget(appContext: typeof AppContext) {
         const rootContainer = new RootContainer(true)
             .setParent(appContext)
             .class("horizontal-layout")
-            .cssBlock(MOBILE_CSS)
             .child(new FlexContainer("column").id("mobile-sidebar-container"))
             .child(
                 new FlexContainer("row")
@@ -136,7 +46,7 @@ export default class MobileLayout {
                             .css("padding-inline-start", "0")
                             .css("padding-inline-end", "0")
                             .css("contain", "content")
-                            .child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))
+                            .child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget()))
                     )
                     .child(
                         new ScreenContainer("detail", "row")
@@ -147,30 +57,28 @@ export default class MobileLayout {
                                     new NoteWrapperWidget()
                                         .child(
                                             new FlexContainer("row")
+                                                .class("title-row note-split-title")
                                                 .contentSized()
-                                                .css("font-size", "larger")
                                                 .css("align-items", "center")
                                                 .child(<ToggleSidebarButton />)
+                                                .child(<NoteIconWidget />)
                                                 .child(<NoteTitleWidget />)
+                                                .child(<NoteBadges />)
                                                 .child(<MobileDetailMenu />)
                                         )
-                                        .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
-                                        .child(<PromotedAttributes />)
                                         .child(
                                             new ScrollingContainer()
                                                 .filling()
                                                 .contentSized()
-                                                .child(new ContentHeader()
-                                                    .child(<ReadOnlyNoteInfoBar />)
-                                                    .child(<SharedInfoWidget />)
-                                                )
+                                                .child(<InlineTitle />)
+                                                .child(<NoteTitleActions />)
                                                 .child(<NoteDetail />)
                                                 .child(<NoteList media="screen" />)
-                                                .child(<StandaloneRibbonAdapter component={SearchDefinitionTab} />)
                                                 .child(<SearchResult />)
-                                                .child(<FilePropertiesWrapper />)
+                                                .child(<ScrollPadding />)
                                         )
                                         .child(<MobileEditorToolbar />)
+                                        .child(new FindWidget())
                                 )
                             )
                     )
@@ -179,7 +87,6 @@ export default class MobileLayout {
                 new FlexContainer("column")
                     .contentSized()
                     .id("mobile-bottom-bar")
-                    .child(new TabRowWidget().css("height", "40px"))
                     .child(new FlexContainer("row")
                         .class("horizontal")
                         .css("height", "53px")
@@ -192,13 +99,3 @@ export default class MobileLayout {
         return rootContainer;
     }
 }
-
-function FilePropertiesWrapper() {
-    const { note } = useNoteContext();
-
-    return (
-        <div>
-            {note?.type === "file" && <FilePropertiesTab note={note} />}
-        </div>
-    );
-}

apps/client/src/menus/context_menu.ts

@@ -1,8 +1,9 @@
 import { KeyboardActionNames } from "@triliumnext/commons";
+import { h, JSX, render } from "preact";
+
 import keyboardActionService, { getActionSync } from "../services/keyboard_actions.js";
 import note_tooltip from "../services/note_tooltip.js";
 import utils from "../services/utils.js";
-import { h, JSX, render } from "preact";
 
 export interface ContextMenuOptions<T> {
     x: number;
@@ -38,6 +39,7 @@ export interface MenuCommandItem<T> {
     title: string;
     command?: T;
     type?: string;
+    mime?: string;
     /**
      * The icon to display in the menu item.
      *
@@ -62,17 +64,17 @@ export type ContextMenuEvent = PointerEvent | MouseEvent | JQuery.ContextMenuEve
 
 class ContextMenu {
     private $widget: JQuery<HTMLElement>;
-    private $cover: JQuery<HTMLElement>;
+    private $cover?: JQuery<HTMLElement>;
     private options?: ContextMenuOptions<any>;
     private isMobile: boolean;
 
     constructor() {
         this.$widget = $("#context-menu-container");
-        this.$cover = $("#context-menu-cover");
         this.$widget.addClass("dropend");
         this.isMobile = utils.isMobile();
 
         if (this.isMobile) {
+            this.$cover = $("#context-menu-cover");
             this.$cover.on("click", () => this.hide());
         } else {
             $(document).on("click", (e) => this.hide());
@@ -91,7 +93,7 @@ class ContextMenu {
         }
 
         this.$widget.toggleClass("mobile-bottom-menu", !this.options.forcePositionOnMobile);
-        this.$cover.addClass("show");
+        this.$cover?.addClass("show");
         $("body").addClass("context-menu-shown");
 
         this.$widget.empty();
@@ -140,16 +142,14 @@ class ContextMenu {
             } else {
                 left = this.options.x - contextMenuWidth + CONTEXT_MENU_OFFSET;
             }
+        } else if (contextMenuWidth && this.options.x + contextMenuWidth - CONTEXT_MENU_OFFSET > clientWidth - CONTEXT_MENU_PADDING) {
+            // Overflow: right
+            left = clientWidth - contextMenuWidth - CONTEXT_MENU_PADDING;
+        } else if (this.options.x - CONTEXT_MENU_OFFSET < CONTEXT_MENU_PADDING) {
+            // Overflow: left
+            left = CONTEXT_MENU_PADDING;
         } else {
-            if (contextMenuWidth && this.options.x + contextMenuWidth - CONTEXT_MENU_OFFSET > clientWidth - CONTEXT_MENU_PADDING) {
-                // Overflow: right
-                left = clientWidth - contextMenuWidth - CONTEXT_MENU_PADDING;
-            } else if (this.options.x - CONTEXT_MENU_OFFSET < CONTEXT_MENU_PADDING) {
-                // Overflow: left
-                left = CONTEXT_MENU_PADDING;
-            } else {
-                left = this.options.x - CONTEXT_MENU_OFFSET;
-            }
+            left = this.options.x - CONTEXT_MENU_OFFSET;
         }
 
         this.$widget
@@ -249,7 +249,7 @@ class ContextMenu {
         if ("uiIcon" in item || "checked" in item) {
             const icon = (item.checked ? "bx bx-check" : item.uiIcon);
             if (icon) {
-                $icon.addClass(icon);
+                $icon.addClass([icon, "tn-icon"]);
             } else {
                 $icon.append("&nbsp;");
             }
@@ -261,7 +261,7 @@ class ContextMenu {
             .append(item.title);
 
         if ("badges" in item && item.badges) {
-            for (let badge of item.badges) {
+            for (const badge of item.badges) {
                 const badgeElement = $(`<span class="badge">`).text(badge.title);
 
                 if (badge.className) {
@@ -352,7 +352,7 @@ class ContextMenu {
     async hide() {
         this.options?.onHide?.();
         this.$widget.removeClass("show");
-        this.$cover.removeClass("show");
+        this.$cover?.removeClass("show");
         $("body").removeClass("context-menu-shown");
         this.$widget.hide();
     }

apps/client/src/menus/electron_context_menu.ts

@@ -1,10 +1,14 @@
-import utils from "../services/utils.js";
-import options from "../services/options.js";
-import zoomService from "../components/zoom.js";
-import contextMenu, { type MenuItem } from "./context_menu.js";
-import { t } from "../services/i18n.js";
 import type { BrowserWindow } from "electron";
-import type { CommandNames, AppContext } from "../components/app_context.js";
+
+import type { CommandNames } from "../components/app_context.js";
+import appContext from "../components/app_context.js";
+import zoomService from "../components/zoom.js";
+import * as clipboardExt from "../services/clipboard_ext.js";
+import { t } from "../services/i18n.js";
+import options from "../services/options.js";
+import server from "../services/server.js";
+import utils from "../services/utils.js";
+import contextMenu, { type MenuItem } from "./context_menu.js";
 
 function setupContextMenu() {
     const electron = utils.dynamicRequire("electron");
@@ -13,8 +17,6 @@ function setupContextMenu() {
     // FIXME: Remove typecast once Electron is properly integrated.
     const { webContents } = remote.getCurrentWindow() as BrowserWindow;
 
-    let appContext: AppContext;
-
     webContents.on("context-menu", (event, params) => {
         const { editFlags } = params;
         const hasText = params.selectionText.trim().length > 0;
@@ -36,7 +38,7 @@ function setupContextMenu() {
             items.push({
                 title: t("electron_context_menu.add-term-to-dictionary", { term: params.misspelledWord }),
                 uiIcon: "bx bx-plus",
-                handler: () => webContents.session.addWordToSpellCheckerDictionary(params.misspelledWord)
+                handler: () => electron.ipcRenderer.send("add-word-to-dictionary", params.misspelledWord)
             });
 
             items.push({ kind: "separator" });
@@ -60,6 +62,33 @@ function setupContextMenu() {
                 uiIcon: "bx bx-copy",
                 handler: () => webContents.copy()
             });
+
+            items.push({
+                enabled: hasText,
+                title: t("electron_context_menu.copy-as-markdown"),
+                uiIcon: "bx bx-copy-alt",
+                handler: async () => {
+                    const selection = window.getSelection();
+                    if (!selection || !selection.rangeCount) return '';
+
+                    const range = selection.getRangeAt(0);
+                    const div = document.createElement('div');
+                    div.appendChild(range.cloneContents());
+
+                    const htmlContent = div.innerHTML;
+                    if (htmlContent) {
+                        try {
+                            const { markdownContent } = await server.post<{ markdownContent: string }>(
+                                "other/to-markdown",
+                                { htmlContent }
+                            );
+                            await clipboardExt.copyTextWithToast(markdownContent);
+                        } catch (error) {
+                            console.error("Failed to copy as markdown:", error);
+                        }
+                    }
+                }
+            });
         }
 
         if (!["", "javascript:", "about:blank#blocked"].includes(params.linkURL) && params.mediaType === "none") {
@@ -112,7 +141,7 @@ function setupContextMenu() {
             }
 
             // Replace the placeholder with the real search keyword.
-            let searchUrl = searchEngineUrl.replace("{keyword}", encodeURIComponent(params.selectionText));
+            const searchUrl = searchEngineUrl.replace("{keyword}", encodeURIComponent(params.selectionText));
 
             items.push({ kind: "separator" });
 
@@ -126,10 +155,6 @@ function setupContextMenu() {
                 title: t("electron_context_menu.search_in_trilium", { term: shortenedSelection }),
                 uiIcon: "bx bx-search",
                 handler: async () => {
-                    if (!appContext) {
-                        appContext = (await import("../components/app_context.js")).default;
-                    }
-
                     await appContext.triggerCommand("searchNotes", {
                         searchString: params.selectionText
                     });

apps/client/src/menus/launcher_button_context_menu.ts

@@ -0,0 +1,101 @@
+import type { ToggleInParentResponse } from "@triliumnext/commons";
+
+import type FNote from "../entities/fnote.js";
+import branchService from "../services/branches.js";
+import { t } from "../services/i18n.js";
+import server from "../services/server.js";
+import toast from "../services/toast.js";
+import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
+
+const VISIBLE_LAUNCHER_PARENTS = ["_lbVisibleLaunchers", "_lbMobileVisibleLaunchers"];
+
+function getVisibleLauncherBranch(launcherNote: FNote) {
+    return launcherNote.getParentBranches().find((b) => VISIBLE_LAUNCHER_PARENTS.includes(b.parentNoteId));
+}
+
+function getBookmarkBranch(launcherNote: FNote) {
+    return launcherNote.getParentBranches().find((b) => b.parentNoteId === "_lbBookmarks");
+}
+
+async function removeFromLaunchBar(launcherNote: FNote) {
+    const bookmarkBranch = getBookmarkBranch(launcherNote);
+    if (bookmarkBranch) {
+        // Individual bookmarks are represented via a branch under `_lbBookmarks`; removing them
+        // from the launch bar is the same as unbookmarking the note.
+        const resp = await server.put<ToggleInParentResponse>(
+            `notes/${launcherNote.noteId}/toggle-in-parent/_lbBookmarks/false`
+        );
+        if (!resp.success && resp.message) {
+            toast.showError(resp.message);
+        }
+        return;
+    }
+
+    const launcherBranch = getVisibleLauncherBranch(launcherNote);
+    if (!launcherBranch) return;
+
+    const isMobileLauncher = launcherBranch.parentNoteId === "_lbMobileVisibleLaunchers";
+    // Branch IDs in the hidden subtree follow the `${parentNoteId}_${noteId}` convention,
+    // so the branch linking `_lb(Mobile)?Root` to the "available" launchers root is predictable.
+    const targetBranchId = isMobileLauncher
+        ? "_lbMobileRoot__lbMobileAvailableLaunchers"
+        : "_lbRoot__lbAvailableLaunchers";
+    await branchService.moveToParentNote([launcherBranch.branchId], targetBranchId);
+}
+
+export function canRemoveFromLaunchBar(launcherNote: FNote | null | undefined) {
+    if (!launcherNote) return false;
+    return !!(getVisibleLauncherBranch(launcherNote) || getBookmarkBranch(launcherNote));
+}
+
+export interface ShowLauncherContextMenuOptions<T extends string> {
+    /** Menu items specific to this launcher (e.g. "Open in new tab" for note-based launchers). They appear above the "Remove from launch bar" item. */
+    extraItems?: MenuItem<T>[];
+    /** Handler for the {@link extraItems}. The "Remove from launch bar" item is handled internally and will not be forwarded. */
+    onCommand?: (command: T | undefined) => void;
+}
+
+const REMOVE_COMMAND = "__removeFromLaunchBar__";
+
+/**
+ * Displays the launch bar icon context menu. When the launcher can be removed (i.e. it is a direct
+ * child of the visible launchers root or of `_lbBookmarks`), a "Remove from launch bar" entry is
+ * appended. Extra items can be supplied to preserve launcher-specific actions (e.g. "Open in new tab").
+ */
+export async function showLauncherContextMenu<T extends string>(
+    launcherNote: FNote | null | undefined,
+    e: ContextMenuEvent,
+    options: ShowLauncherContextMenuOptions<T> = {}
+) {
+    e.preventDefault();
+
+    const items = [...(options.extraItems ?? [])] as MenuItem<string>[];
+
+    if (canRemoveFromLaunchBar(launcherNote)) {
+        if (items.length > 0) {
+            items.push({ kind: "separator" });
+        }
+        items.push({
+            title: t("launcher_button_context_menu.remove_from_launch_bar"),
+            command: REMOVE_COMMAND,
+            uiIcon: "bx bx-x-circle"
+        });
+    }
+
+    if (items.length === 0) return;
+
+    contextMenu.show<string>({
+        x: e.pageX ?? 0,
+        y: e.pageY ?? 0,
+        items,
+        selectMenuItemHandler: ({ command }) => {
+            if (command === REMOVE_COMMAND) {
+                if (launcherNote) {
+                    void removeFromLaunchBar(launcherNote);
+                }
+                return;
+            }
+            options.onCommand?.(command as T | undefined);
+        }
+    });
+}

apps/client/src/menus/launcher_context_menu.ts

@@ -1,12 +1,12 @@
-import treeService from "../services/tree.js";
-import froca from "../services/froca.js";
-import contextMenu, { type MenuCommandItem, type MenuItem } from "./context_menu.js";
-import dialogService from "../services/dialog.js";
-import server from "../services/server.js";
-import { t } from "../services/i18n.js";
+import type { ContextMenuCommandData,FilteredCommandNames } from "../components/app_context.js";
 import type { SelectMenuItemEventListener } from "../components/events.js";
+import dialogService from "../services/dialog.js";
+import froca from "../services/froca.js";
+import { t } from "../services/i18n.js";
+import server from "../services/server.js";
+import treeService from "../services/tree.js";
 import type NoteTreeWidget from "../widgets/note_tree.js";
-import type { FilteredCommandNames, ContextMenuCommandData } from "../components/app_context.js";
+import contextMenu, { type MenuCommandItem, type MenuItem } from "./context_menu.js";
 
 type LauncherCommandNames = FilteredCommandNames<ContextMenuCommandData>;
 
@@ -32,8 +32,8 @@ export default class LauncherContextMenu implements SelectMenuItemEventListener<
         const note = this.node.data.noteId ? await froca.getNote(this.node.data.noteId) : null;
         const parentNoteId = this.node.getParent().data.noteId;
 
-        const isVisibleRoot = note?.noteId === "_lbVisibleLaunchers";
-        const isAvailableRoot = note?.noteId === "_lbAvailableLaunchers";
+        const isVisibleRoot = note?.noteId === "_lbVisibleLaunchers" || note?.noteId === "_lbMobileVisibleLaunchers";
+        const isAvailableRoot = note?.noteId === "_lbAvailableLaunchers" || note?.noteId === "_lbMobileAvailableLaunchers";
         const isVisibleItem = parentNoteId === "_lbVisibleLaunchers" || parentNoteId === "_lbMobileVisibleLaunchers";
         const isAvailableItem = parentNoteId === "_lbAvailableLaunchers" || parentNoteId === "_lbMobileAvailableLaunchers";
         const isItem = isVisibleItem || isAvailableItem;

apps/client/src/menus/tree_context_menu.ts

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

apps/client/src/mobile.ts

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

apps/client/src/print.css

@@ -2,18 +2,17 @@
 
 :root {
     --print-font-size: 11pt;
-    --ck-content-color-image-caption-background: transparent !important;
 }
 
+
 html,
 body {
+    --print-font-family: var(--detail-font-family, sans-serif);
+
     width: 100%;
     height: 100%;
     color: black;
-}
-
-@page {
-    margin: 2cm;
+    font-family: var(--print-font-family);
 }
 
 .note-list-widget.full-height,
@@ -26,6 +25,12 @@ body {
 }
 
 body[data-note-type="text"] .ck-content {
+    --ck-content-font-family: var(--print-font-family);
+    --ck-content-font-size: var(--print-font-size);
+    --ck-content-font-color: black;
+    --ck-content-line-height: 1.5;
+    --ck-content-color-image-caption-background: transparent;
+
     font-size: var(--print-font-size);
     text-align: justify;
 }
@@ -144,6 +149,23 @@ span[style] {
 }
 /* #endregion */
 
+/* #region Spreadsheet */
+.spreadsheet-table {
+    border-collapse: collapse;
+    width: 100%;
+    font-size: var(--print-font-size);
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+}
+
+.spreadsheet-table td {
+    border: 0.5pt solid #ccc;
+    padding: 2pt 4pt;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+/* #endregion */
+
 /* #region Page breaks */
 .page-break {
     page-break-after: always;
@@ -154,4 +176,4 @@ span[style] {
 .page-break::after {
     display: none !important;
 }
-/* #endregion */
+/* #endregion */

apps/client/src/print.tsx

@@ -1,9 +1,11 @@
+import { renderSpreadsheetToHtml } from "@triliumnext/commons";
 import { render } from "preact";
 import { useCallback, useLayoutEffect, useRef } from "preact/hooks";
 
 import FNote from "./entities/fnote";
 import content_renderer from "./services/content_renderer";
 import { applyInlineMermaid } from "./services/content_renderer_text";
+import froca from "./services/froca";
 import { dynamicRequire, isElectron } from "./services/utils";
 import { CustomNoteList, useNoteViewType } from "./widgets/collections/NoteList";
 
@@ -18,6 +20,10 @@ export type PrintReport = {
 } | {
     type: "collection";
     ignoredNoteIds: string[];
+} | {
+    type: "error";
+    message: string;
+    stack?: string;
 };
 
 async function main() {
@@ -26,10 +32,26 @@ async function main() {
     if (!noteId) return;
 
     await import("./print.css");
-    const froca = (await import("./services/froca")).default;
+
+    // Browser printing relies on @page margins since there's no programmatic control.
+    // Electron uses printToPDF() margins instead, so we only inject this for the browser path.
+    if (!isElectron()) {
+        const style = document.createElement("style");
+        style.textContent = "@page { margin: 2cm; }";
+        document.head.appendChild(style);
+    }
+
+    // Load the user's font preferences so that --detail-font-family is available.
+    const fontLink = document.createElement("link");
+    fontLink.rel = "stylesheet";
+    fontLink.href = "api/fonts";
+    document.head.appendChild(fontLink);
+
     const note = await froca.getNote(noteId);
 
-    render(<App note={note} noteId={noteId} />, document.body);
+    const bodyWrapper = document.createElement("div");
+    render(<App note={note} noteId={noteId} />, bodyWrapper);
+    document.body.appendChild(bodyWrapper);
 }
 
 function App({ note, noteId }: { note: FNote | null | undefined, noteId: string }) {
@@ -73,32 +95,43 @@ function SingleNoteRenderer({ note, onReady }: RendererProps) {
 
     useLayoutEffect(() => {
         async function load() {
-            if (note.type === "text") {
-                await import("@triliumnext/ckeditor5/src/theme/ck-content.css");
-            }
-            const { $renderedContent } = await content_renderer.getRenderedContent(note, { noChildrenList: true });
             const container = containerRef.current!;
-            container.replaceChildren(...$renderedContent);
 
-            // Wait for all images to load.
-            const images = Array.from(container.querySelectorAll("img"));
-            await Promise.all(
-                images.map(img => {
-                    if (img.complete) return Promise.resolve();
-                    return new Promise<void>(resolve => {
-                        img.addEventListener("load", () => resolve(), { once: true });
-                        img.addEventListener("error", () => resolve(), { once: true });
-                    });
-                })
-            );
+            if (note.type === "spreadsheet") {
+                // Render spreadsheet as HTML tables instead of an image.
+                const blob = await note.getBlob();
+                const html = renderSpreadsheetToHtml(blob?.content ?? "");
+                container.innerHTML = html;
+            } else {
+                if (note.type === "text") {
+                    await import("@triliumnext/ckeditor5/src/theme/ck-content.css");
+                }
+                const { $renderedContent } = await content_renderer.getRenderedContent(note, { noChildrenList: true });
+                container.replaceChildren(...$renderedContent);
 
-            // Initialize mermaid.
-            if (note.type === "text") {
-                await applyInlineMermaid(container);
+                // Wait for all images to load.
+                const images = Array.from(container.querySelectorAll("img"));
+                await Promise.all(
+                    images.map(img => {
+                        if (img.complete) return Promise.resolve();
+                        return new Promise<void>(resolve => {
+                            img.addEventListener("load", () => resolve(), { once: true });
+                            img.addEventListener("error", () => resolve(), { once: true });
+                        });
+                    })
+                );
+
+                // Initialize mermaid.
+                if (note.type === "text") {
+                    await applyInlineMermaid(container);
+                }
             }
 
             // Check custom CSS.
             await loadCustomCss(note);
+
+            // Wait for all fonts (including those from custom CSS) to finish loading.
+            await document.fonts.ready;
         }
 
         load().then(() => requestAnimationFrame(() => onReady({
@@ -124,6 +157,7 @@ function CollectionRenderer({ note, onReady, onProgressChanged }: RendererProps)
         media="print"
         onReady={async (data: PrintReport) => {
             await loadCustomCss(note);
+            await document.fonts.ready;
             onReady(data);
         }}
         onProgressChanged={onProgressChanged}

apps/client/src/runtime.ts

@@ -8,6 +8,17 @@ async function loadBootstrap() {
     }
 }
 
+// Polyfill removed jQuery methods for autocomplete.js compatibility
+($ as any).isArray = Array.isArray;
+($ as any).isFunction = function(obj: any) { return typeof obj === 'function'; };
+($ as any).isPlainObject = function(obj: any) {
+    if (obj == null || typeof obj !== 'object') { return false; }
+    const proto = Object.getPrototypeOf(obj);
+    if (proto === null) { return true; }
+    const Ctor = Object.prototype.hasOwnProperty.call(proto, 'constructor') && proto.constructor;
+    return typeof Ctor === 'function' && Ctor === Object;
+};
+
 (window as any).$ = $;
 (window as any).jQuery = $;
 await loadBootstrap();

apps/client/src/services/attribute_renderer.ts

@@ -7,6 +7,10 @@ async function renderAttribute(attribute: FAttribute, renderIsInheritable: boole
     const isInheritable = renderIsInheritable && attribute.isInheritable ? `(inheritable)` : "";
     const $attr = $("<span>");
 
+    if (attribute.isAutoLink) {
+        return $attr;
+    }
+
     if (attribute.type === "label") {
         $attr.append(document.createTextNode(`#${attribute.name}${isInheritable}`));
 
@@ -15,9 +19,6 @@ async function renderAttribute(attribute: FAttribute, renderIsInheritable: boole
             $attr.append(document.createTextNode(formatValue(attribute.value)));
         }
     } else if (attribute.type === "relation") {
-        if (attribute.isAutoLink) {
-            return $attr;
-        }
 
         // when the relation has just been created, then it might not have a value
         if (attribute.value) {

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

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

apps/client/src/services/attributes.ts

@@ -1,36 +1,67 @@
-import server from "./server.js";
-import froca from "./froca.js";
-import type FNote from "../entities/fnote.js";
-import type { AttributeRow } from "./load_results.js";
 import { AttributeType } from "@triliumnext/commons";
 
+import type FNote from "../entities/fnote.js";
+import froca from "./froca.js";
+import type { AttributeRow } from "./load_results.js";
+import server from "./server.js";
+
 async function addLabel(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/attribute`, {
         type: "label",
-        name: name,
-        value: value,
+        name,
+        value,
         isInheritable
     });
 }
 
-export async function setLabel(noteId: string, name: string, value: string = "", isInheritable = false) {
+export async function setLabel(noteId: string, name: string, value: string = "", isInheritable = false, componentId?: string) {
     await server.put(`notes/${noteId}/set-attribute`, {
         type: "label",
-        name: name,
-        value: value,
-        isInheritable
-    });
+        name,
+        value,
+        isInheritable,
+    }, componentId);
 }
 
 export async function setRelation(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/set-attribute`, {
         type: "relation",
-        name: name,
-        value: value,
+        name,
+        value,
         isInheritable
     });
 }
 
+/**
+ * Sets a boolean label on the given note, taking inheritance into account. If the desired value matches the inherited
+ * value, any owned label will be removed to allow the inherited value to take effect. If the desired value differs
+ * from the inherited value, an owned label will be created or updated to reflect the desired value.
+ *
+ * When checking if the boolean value is set, don't use `note.hasLabel`; instead use `note.isLabelTruthy`.
+ *
+ * @param note the note on which to set the boolean label.
+ * @param labelName the name of the label to set.
+ * @param value the boolean value to set for the label.
+ */
+export async function setBooleanWithInheritance(note: FNote, labelName: string, value: boolean) {
+    const actualValue = note.isLabelTruthy(labelName);
+    if (actualValue === value) return;
+    const hasInheritedValue = !note.hasOwnedLabel(labelName) && note.hasLabel(labelName);
+
+    if (hasInheritedValue) {
+        if (value) {
+            setLabel(note.noteId, labelName, "");
+        } else {
+            // Label is inherited - override to false.
+            setLabel(note.noteId, labelName, "false");
+        }
+    } else if (value) {
+        setLabel(note.noteId, labelName, "");
+    } else {
+        removeOwnedLabelByName(note, labelName);
+    }
+}
+
 async function removeAttributeById(noteId: string, attributeId: string) {
     await server.remove(`notes/${noteId}/attributes/${attributeId}`);
 }
@@ -86,15 +117,15 @@ function removeOwnedRelationByName(note: FNote, relationName: string) {
  * @param name the name of the attribute to set.
  * @param value the value of the attribute to set.
  */
-export async function setAttribute(note: FNote, type: "label" | "relation", name: string, value: string | null | undefined) {
+export async function setAttribute(note: FNote, type: "label" | "relation", name: string, value: string | null | undefined, componentId?: string) {
     if (value !== null && value !== undefined) {
         // Create or update the attribute.
-        await server.put(`notes/${note.noteId}/set-attribute`, { type, name, value });
+        await server.put(`notes/${note.noteId}/set-attribute`, { type, name, value }, componentId);
     } else {
         // Remove the attribute if it exists on the server but we don't define a value for it.
         const attributeId = note.getAttribute(type, name)?.attributeId;
         if (attributeId) {
-            await server.remove(`notes/${note.noteId}/attributes/${attributeId}`);
+            await server.remove(`notes/${note.noteId}/attributes/${attributeId}`, componentId);
         }
     }
 }
@@ -137,13 +168,59 @@ 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,
     setRelation,
     setAttribute,
+    setBooleanWithInheritance,
     removeAttributeById,
     removeOwnedLabelByName,
     removeOwnedRelationByName,
-    isAffecting
+    isAffecting,
+    toggleDangerousAttribute,
+    getNameWithoutDangerousPrefix
 };

apps/client/src/services/branches.ts

@@ -1,12 +1,12 @@
-import utils from "./utils.js";
-import server from "./server.js";
-import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
+import appContext from "../components/app_context.js";
+import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
 import froca from "./froca.js";
 import hoistedNoteService from "./hoisted_note.js";
-import ws from "./ws.js";
-import appContext from "../components/app_context.js";
 import { t } from "./i18n.js";
-import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
+import server from "./server.js";
+import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
+import utils from "./utils.js";
+import ws from "./ws.js";
 
 // TODO: Deduplicate type with server
 interface Response {
@@ -66,7 +66,7 @@ async function moveAfterBranch(branchIdsToMove: string[], afterBranchId: string)
     }
 }
 
-async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: string) {
+async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: string, componentId?: string) {
     const newParentBranch = froca.getBranch(newParentBranchId);
     if (!newParentBranch) {
         return;
@@ -86,7 +86,7 @@ async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: st
             continue;
         }
 
-        const resp = await server.put<Response>(`branches/${branchIdToMove}/move-to/${newParentBranchId}`);
+        const resp = await server.put<Response>(`branches/${branchIdToMove}/move-to/${newParentBranchId}`, undefined, componentId);
 
         if (!resp.success) {
             toastService.showError(resp.message);
@@ -103,7 +103,7 @@ async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: st
  * @param moveToParent whether to automatically go to the parent note path after a succesful delete. Usually makes sense if deleting the active note(s).
  * @returns promise that returns false if the operation was cancelled or there was nothing to delete, true if the operation succeeded.
  */
-async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = false, moveToParent = true) {
+async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = false, moveToParent = true, componentId?: string) {
     branchIdsToDelete = filterRootNote(branchIdsToDelete);
 
     if (branchIdsToDelete.length === 0) {
@@ -120,7 +120,7 @@ async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = f
 
     if (moveToParent) {
         try {
-            await activateParentNotePath();
+            await activateParentNotePath(branchIdsToDelete);
         } catch (e) {
             console.error(e);
         }
@@ -139,9 +139,9 @@ async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = f
         const branch = froca.getBranch(branchIdToDelete);
 
         if (deleteAllClones && branch) {
-            await server.remove(`notes/${branch.noteId}${query}`);
+            await server.remove(`notes/${branch.noteId}${query}`, componentId);
         } else {
-            await server.remove(`branches/${branchIdToDelete}${query}`);
+            await server.remove(`branches/${branchIdToDelete}${query}`, componentId);
         }
     }
 
@@ -152,13 +152,28 @@ async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = f
     return true;
 }
 
-async function activateParentNotePath() {
-    // this is not perfect, maybe we should find the next/previous sibling, but that's more complex
+async function activateParentNotePath(branchIdsToDelete: string[]) {
     const activeContext = appContext.tabManager.getActiveContext();
-    const parentNotePathArr = activeContext?.notePathArray.slice(0, -1);
+    const activeNotePath = activeContext?.notePathArray ?? [];
 
-    if (parentNotePathArr && parentNotePathArr.length > 0) {
-        activeContext?.setNote(parentNotePathArr.join("/"));
+    // Find the deleted branch that appears earliest in the active note's path
+    let earliestIndex = activeNotePath.length;
+    for (const branchId of branchIdsToDelete) {
+        const branch = froca.getBranch(branchId);
+        if (branch) {
+            const index = activeNotePath.indexOf(branch.noteId);
+            if (index !== -1 && index < earliestIndex) {
+                earliestIndex = index;
+            }
+        }
+    }
+
+    // Navigate to the parent of the highest deleted ancestor
+    if (earliestIndex < activeNotePath.length) {
+        const parentPath = activeNotePath.slice(0, earliestIndex);
+        if (parentPath.length > 0) {
+            await activeContext?.setNote(parentPath.join("/"));
+        }
     }
 }
 

apps/client/src/services/bundle.ts

@@ -2,7 +2,6 @@ import { h, VNode } from "preact";
 
 import BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
 import RightPanelWidget from "../widgets/right_panel_widget.js";
-import froca from "./froca.js";
 import type { Entity } from "./frontend_script_api.js";
 import { WidgetDefinitionWithType } from "./frontend_script_api_preact.js";
 import { t } from "./i18n.js";
@@ -27,7 +26,7 @@ type WithNoteId<T> = T & {
 };
 export type Widget = WithNoteId<(LegacyWidget | WidgetDefinitionWithType)>;
 
-async function getAndExecuteBundle(noteId: string, originEntity = null, script = null, params = null) {
+async function getAndExecuteBundle(noteId: string, originEntity: Entity | null = null, script: string | null = null, params: string | null = null) {
     const bundle = await server.post<Bundle>(`script/bundle/${noteId}`, {
         script,
         params
@@ -38,15 +37,18 @@ async function getAndExecuteBundle(noteId: string, originEntity = null, script =
 
 export type ParentName = "left-pane" | "center-pane" | "note-detail-pane" | "right-pane";
 
-export async function executeBundle(bundle: Bundle, originEntity?: Entity | null, $container?: JQuery<HTMLElement>) {
+export async function executeBundleWithoutErrorHandling(bundle: Bundle, originEntity?: Entity | null, $container?: JQuery<HTMLElement>) {
     const apiContext = await ScriptContext(bundle.noteId, bundle.allNoteIds, originEntity, $container);
+    return await function () {
+        return eval(`const apiContext = this; (async function() { ${bundle.script}\r\n})()`);
+    }.call(apiContext);
+}
 
+export async function executeBundle(bundle: Bundle, originEntity?: Entity | null, $container?: JQuery<HTMLElement>) {
     try {
-        return await function () {
-            return eval(`const apiContext = this; (async function() { ${bundle.script}\r\n})()`);
-        }.call(apiContext);
-    } catch (e: any) {
-        showErrorForScriptNote(bundle.noteId, t("toast.bundle-error.message", { message: e.message }));
+        return await executeBundleWithoutErrorHandling(bundle, originEntity, $container);
+    } catch (e: unknown) {
+        showErrorForScriptNote(bundle.noteId, t("toast.bundle-error.message", { message: getErrorMessage(e) }));
         logError("Widget initialization failed: ", e);
     }
 }

apps/client/src/services/clipboard_ext.ts

@@ -1,3 +1,6 @@
+import { t } from "./i18n.js";
+import toast from "./toast.js";
+
 export function copyText(text: string) {
     if (!text) {
         return;
@@ -6,29 +9,26 @@ export function copyText(text: string) {
         if (navigator.clipboard) {
             navigator.clipboard.writeText(text);
             return true;
-        } else {
-            // Fallback method: https://stackoverflow.com/a/72239825
-            const textArea = document.createElement("textarea");
-            textArea.value = text;
-            try {
-                document.body.appendChild(textArea);
-                textArea.focus();
-                textArea.select();
-                return document.execCommand('copy');
-            } finally {
-                document.body.removeChild(textArea);
-            }
+        } 
+        // Fallback method: https://stackoverflow.com/a/72239825
+        const textArea = document.createElement("textarea");
+        textArea.value = text;
+        try {
+            document.body.appendChild(textArea);
+            textArea.focus();
+            textArea.select();
+            return document.execCommand('copy');
+        } finally {
+            document.body.removeChild(textArea);
         }
+        
     } catch (e) {
         console.warn(e);
         return false;
     }
 }
 
-export async function copyTextWithToast(text: string) {
-    const t = (await import("./i18n.js")).t;
-    const toast = (await import("./toast.js")).default;
-
+export function copyTextWithToast(text: string) {
     if (copyText(text)) {
         toast.showMessage(t("clipboard.copy_success"));
     } else {

apps/client/src/services/content_renderer.css

@@ -0,0 +1,9 @@
+.rendered-content.no-preview > div {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    align-items: center;
+    height: 100%;
+    font-size: 500%;
+    flex-grow: 1;
+}

apps/client/src/services/content_renderer.ts

@@ -1,18 +1,24 @@
-import renderService from "./render.js";
+import "./content_renderer.css";
+
+import { normalizeMimeTypeForCKEditor, renderToHtml, type TextRepresentationResponse } from "@triliumnext/commons";
+import DOMPurify from "dompurify";
+import { h, render } from "preact";
+import WheelZoom from 'vanilla-js-wheel-zoom';
+
+import FAttachment from "../entities/fattachment.js";
+import FNote from "../entities/fnote.js";
+import imageContextMenuService from "../menus/image_context_menu.js";
+import { t } from "../services/i18n.js";
+import renderText, { postProcessRichContent, renderChildrenList } from "./content_renderer_text.js";
+import renderDoc from "./doc_renderer.js";
+import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
+import openService from "./open.js";
 import protectedSessionService from "./protected_session.js";
 import protectedSessionHolder from "./protected_session_holder.js";
-import openService from "./open.js";
-import utils from "./utils.js";
-import FNote from "../entities/fnote.js";
-import FAttachment from "../entities/fattachment.js";
-import imageContextMenuService from "../menus/image_context_menu.js";
+import renderService from "./render.js";
+import server from "./server.js";
 import { applySingleBlockSyntaxHighlight } from "./syntax_highlight.js";
-import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
-import renderDoc from "./doc_renderer.js";
-import { t } from "../services/i18n.js";
-import WheelZoom from 'vanilla-js-wheel-zoom';
-import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
-import renderText from "./content_renderer_text.js";
+import utils, { getErrorMessage } from "./utils.js";
 
 let idCounter = 1;
 
@@ -22,6 +28,13 @@ export interface RenderOptions {
     imageHasZoom?: boolean;
     /** If enabled, it will prevent the default behavior in which an empty note would display a list of children. */
     noChildrenList?: boolean;
+    /** If enabled, it will prevent rendering of included notes. */
+    noIncludedNotes?: boolean;
+    /** If enabled, it will include archived notes when rendering children list. */
+    includeArchivedNotes?: boolean;
+    /** Set of note IDs that have already been seen during rendering to prevent infinite recursion. */
+    seenNoteIds?: Set<string>;
+    showTextRepresentation?: boolean;
 }
 
 const CODE_MIME_TYPES = new Set(["application/json"]);
@@ -42,18 +55,23 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
 
     if (type === "text" || type === "book") {
         await renderText(entity, $renderedContent, options);
+    } else if (type === "markdown") {
+        await renderMarkdown(entity, $renderedContent, options);
     } else if (type === "code") {
         await renderCode(entity, $renderedContent);
-    } else if (["image", "canvas", "mindMap"].includes(type)) {
-        renderImage(entity, $renderedContent, options);
+    } else if (["image", "canvas", "mindMap", "spreadsheet"].includes(type)) {
+        await renderImage(entity, $renderedContent, options);
     } else if (!options.tooltip && ["file", "pdf", "audio", "video"].includes(type)) {
-        renderFile(entity, type, $renderedContent);
+        await renderFile(entity, type, $renderedContent, options);
     } else if (type === "mermaid") {
         await renderMermaid(entity, $renderedContent);
     } else if (type === "render" && entity instanceof FNote) {
         const $content = $("<div>");
 
-        await renderService.render(entity, $content);
+        await renderService.render(entity, $content, (e) => {
+            const $error = $("<div>").addClass("admonition caution").text(typeof e === "string" ? e : getErrorMessage(e));
+            $content.empty().append($error);
+        });
 
         $renderedContent.append($content);
     } else if (type === "doc" && "noteId" in entity) {
@@ -64,18 +82,9 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
 
         $renderedContent.append($("<div>").append("<div>This note is protected and to access it you need to enter password.</div>").append("<br/>").append($button));
     } else if (entity instanceof FNote) {
-        $renderedContent
-            .css("display", "flex")
-            .css("flex-direction", "column");
+        $renderedContent.addClass("no-preview");
         $renderedContent.append(
-            $("<div>")
-                .css("display", "flex")
-                .css("justify-content", "space-around")
-                .css("align-items", "center")
-                .css("height", "100%")
-                .css("font-size", "500%")
-                .css("flex-grow", "1")
-                .append($("<span>").addClass(entity.getIcon()))
+            $("<div>").append($("<span>").addClass(entity.getIcon()))
         );
 
         if (entity.type === "webView" && entity.hasLabel("webViewSrc")) {
@@ -113,6 +122,31 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
     };
 }
 
+/**
+ * Renders a markdown note by converting its source to CKEditor-compatible HTML,
+ * then running the same post-render pipeline as text notes (included notes,
+ * math, reference links, Mermaid, code highlight) so the preview matches what
+ * the user sees in the Markdown note type's preview pane.
+ */
+async function renderMarkdown(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: RenderOptions) {
+    const blob = await note.getBlob();
+    const source = blob?.content ?? "";
+
+    if (!source.trim()) {
+        if (note instanceof FNote && !options.noChildrenList) {
+            await renderChildrenList($renderedContent, note, options.includeArchivedNotes ?? false);
+        }
+        return;
+    }
+
+    const html = renderToHtml(source, note.title, {
+        sanitize: (dirty) => DOMPurify.sanitize(dirty),
+        wikiLink: { formatHref: (id) => `#root/${id}` }
+    });
+    $renderedContent.append($('<div class="ck-content">').html(html));
+    await postProcessRichContent(note, $renderedContent, options);
+}
+
 /**
  * Renders a code note, by displaying its content and applying syntax highlighting based on the selected MIME type.
  */
@@ -134,7 +168,7 @@ async function renderCode(note: FNote | FAttachment, $renderedContent: JQuery<HT
     await applySingleBlockSyntaxHighlight($codeBlock, normalizeMimeTypeForCKEditor(note.mime));
 }
 
-function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: RenderOptions = {}) {
+async function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: RenderOptions = {}) {
     const encodedTitle = encodeURIComponent(entity.title);
 
     let url;
@@ -142,17 +176,18 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
     if (entity instanceof FNote) {
         url = `api/images/${entity.noteId}/${encodedTitle}?${Math.random()}`;
     } else if (entity instanceof FAttachment) {
-        url = `api/attachments/${entity.attachmentId}/image/${encodedTitle}?${entity.utcDateModified}">`;
+        url = `api/attachments/${entity.attachmentId}/image/${encodedTitle}?${entity.utcDateModified}`;
     }
 
     $renderedContent // styles needed for the zoom to work well
         .css("display", "flex")
         .css("align-items", "center")
-        .css("justify-content", "center");
+        .css("justify-content", "center")
+        .css("flex-direction", "column");   // OCR text is displayed below the image.
 
     const $img = $("<img>")
         .attr("src", url || "")
-        .attr("id", "attachment-image-" + idCounter++)
+        .attr("id", `attachment-image-${idCounter++}`)
         .css("max-width", "100%");
 
     $renderedContent.append($img);
@@ -174,9 +209,35 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
     }
 
     imageContextMenuService.setupContextMenu($img);
+
+    if (entity instanceof FNote && options.showTextRepresentation) {
+        await addOCRTextIfAvailable(entity, $renderedContent);
+    }
 }
 
-function renderFile(entity: FNote | FAttachment, type: string, $renderedContent: JQuery<HTMLElement>) {
+async function addOCRTextIfAvailable(note: FNote, $content: JQuery<HTMLElement>) {
+    try {
+        const data = await server.get<TextRepresentationResponse>(`ocr/notes/${note.noteId}/text`);
+        if (data.success && data.hasOcr && data.text) {
+            const $ocrSection = $(`
+                <div class="ocr-text-section">
+                    <div class="ocr-header">
+                        <span class="bx bx-text"></span> ${t("ocr.extracted_text")}
+                    </div>
+                    <div class="ocr-content"></div>
+                </div>
+            `);
+
+            $ocrSection.find('.ocr-content').text(data.text);
+            $content.append($ocrSection);
+        }
+    } catch (error) {
+        // Silently fail if OCR API is not available
+        console.debug('Failed to fetch OCR text:', error);
+    }
+}
+
+async function renderFile(entity: FNote | FAttachment, type: string, $renderedContent: JQuery<HTMLElement>, options: RenderOptions = {}) {
     let entityType, entityId;
 
     if (entity instanceof FNote) {
@@ -189,13 +250,17 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
         throw new Error(`Can't recognize entity type of '${entity}'`);
     }
 
-    const $content = $('<div style="display: flex; flex-direction: column; height: 100%;">');
+    const $content = $('<div style="display: flex; flex-direction: column; height: 100%; justify-content: end;">');
 
     if (type === "pdf") {
-        const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
-        $pdfPreview.attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open`));
+        const url = `../../api/${entityType}/${entityId}/open`;
+        const $viewer = $(`<div style="height: 100%">`);
+        const PdfViewer = (await import("../widgets/type_widgets/file/PdfViewer")).default;
+        render(h(PdfViewer, {pdfUrl: url, editable: false, toolbar: false}), $viewer.get(0)!);
+
+        $content.append($viewer);
+
 
-        $content.append($pdfPreview);
     } else if (type === "audio") {
         const $audioPreview = $("<audio controls></audio>")
             .attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`))
@@ -212,33 +277,37 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
         $content.append($videoPreview);
     }
 
+    if (entity instanceof FNote && options.showTextRepresentation) {
+        await addOCRTextIfAvailable(entity, $content);
+    }
+
     if (entityType === "notes" && "noteId" in entity) {
         // TODO: we should make this available also for attachments, but there's a problem with "Open externally" support
         //       in attachment list
         const $downloadButton = $(`
             <button class="file-download btn btn-primary" type="button">
-                <span class="bx bx-download"></span>
+                <span class="tn-icon bx bx-download"></span>
                 ${t("file_properties.download")}
             </button>
         `);
 
         const $openButton = $(`
             <button class="file-open btn btn-primary" type="button">
-                <span class="bx bx-link-external"></span>
+                <span class="tn-icon bx bx-link-external"></span>
                 ${t("file_properties.open")}
             </button>
         `);
 
         $downloadButton.on("click", (e) => {
             e.stopPropagation();
-            openService.downloadFileNote(entity.noteId)
+            openService.downloadFileNote(entity, null, null);
         });
         $openButton.on("click", async (e) => {
             const iconEl = $openButton.find("> .bx");
             iconEl.removeClass("bx bx-link-external");
             iconEl.addClass("bx bx-loader spin");
             e.stopPropagation();
-            await openService.openNoteExternally(entity.noteId, entity.mime)
+            await openService.openNoteExternally(entity.noteId, entity.mime);
             iconEl.removeClass("bx bx-loader spin");
             iconEl.addClass("bx bx-link-external");
         });
@@ -266,7 +335,7 @@ async function renderMermaid(note: FNote | FAttachment, $renderedContent: JQuery
 
     try {
         await loadElkIfNeeded(mermaid, content);
-        const { svg } = await mermaid.mermaidAPI.render("in-mermaid-graph-" + idCounter++, content);
+        const { svg } = await mermaid.mermaidAPI.render(`in-mermaid-graph-${idCounter++}`, content);
 
         $renderedContent.append($(postprocessMermaidSvg(svg)));
     } catch (e) {
@@ -285,10 +354,13 @@ function getRenderingType(entity: FNote | FAttachment) {
     }
 
     const mime = "mime" in entity && entity.mime;
+    const isIconPack = entity instanceof FNote && entity.hasLabel("iconPack");
 
     if (type === "file" && mime === "application/pdf") {
         type = "pdf";
-    } else if ((type === "file" || type === "viewConfig") && mime && CODE_MIME_TYPES.has(mime)) {
+    } else if (type === "code" && entity instanceof FNote && entity.isMarkdown()) {
+        type = "markdown";
+    } else if ((type === "file" || type === "viewConfig") && mime && CODE_MIME_TYPES.has(mime) && !isIconPack) {
         type = "code";
     } else if (type === "file" && mime && mime.startsWith("audio/")) {
         type = "audio";

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

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

apps/client/src/services/content_renderer_text.ts

@@ -15,31 +15,48 @@ export default async function renderText(note: FNote | FAttachment, $renderedCon
 
     if (blob && !isHtmlEmpty(blob.content)) {
         $renderedContent.append($('<div class="ck-content">').html(blob.content));
-        await renderIncludedNotes($renderedContent[0]);
-
-        if ($renderedContent.find("span.math-tex").length > 0) {
-            renderMathInElement($renderedContent[0], { trust: true });
-        }
-
-        const getNoteIdFromLink = (el: HTMLElement) => tree.getNoteIdFromUrl($(el).attr("href") || "");
-        const referenceLinks = $renderedContent.find<HTMLAnchorElement>("a.reference-link");
-        const noteIdsToPrefetch = referenceLinks.map((i, el) => getNoteIdFromLink(el));
-        await froca.getNotes(noteIdsToPrefetch);
-
-        for (const el of referenceLinks) {
-            const innerSpan = document.createElement("span");
-            await link.loadReferenceLinkTitle($(innerSpan), el.href);
-            el.replaceChildren(innerSpan);
-        }
-
-        await rewriteMermaidDiagramsInContainer($renderedContent[0] as HTMLDivElement);
-        await formatCodeBlocks($renderedContent);
+        await postProcessRichContent(note, $renderedContent, options);
     } else if (note instanceof FNote && !options.noChildrenList) {
-        await renderChildrenList($renderedContent, note);
+        await renderChildrenList($renderedContent, note, options.includeArchivedNotes ?? false);
     }
 }
 
-async function renderIncludedNotes(contentEl: HTMLElement) {
+/**
+ * Apply the post-render passes that make CKEditor-compatible HTML fully
+ * interactive: expand `<section class="include-note">`, render inline math and
+ * Mermaid diagrams, rewrite reference-link titles, and highlight code blocks.
+ * Assumes the caller has already appended the HTML inside a `.ck-content` child
+ * of `$renderedContent`.
+ */
+export async function postProcessRichContent(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: RenderOptions = {}) {
+    const seenNoteIds = options.seenNoteIds ?? new Set<string>();
+    seenNoteIds.add("noteId" in note ? note.noteId : note.attachmentId);
+    if (!options.noIncludedNotes) {
+        await renderIncludedNotes($renderedContent[0], seenNoteIds);
+    } else {
+        $renderedContent.find("section.include-note").remove();
+    }
+
+    if ($renderedContent.find("span.math-tex").length > 0) {
+        renderMathInElement($renderedContent[0], { trust: true });
+    }
+
+    const getNoteIdFromLink = (el: HTMLElement) => tree.getNoteIdFromUrl($(el).attr("href") || "");
+    const referenceLinks = $renderedContent.find<HTMLAnchorElement>("a.reference-link");
+    const noteIdsToPrefetch = referenceLinks.map((i, el) => getNoteIdFromLink(el));
+    await froca.getNotes(noteIdsToPrefetch);
+
+    await Promise.all(referenceLinks.toArray().map(async (el) => {
+        const innerSpan = document.createElement("span");
+        await link.loadReferenceLinkTitle($(innerSpan), el.getAttribute("href"));
+        el.replaceChildren(innerSpan);
+    }));
+
+    await rewriteMermaidDiagramsInContainer($renderedContent[0] as HTMLDivElement);
+    await formatCodeBlocks($renderedContent);
+}
+
+async function renderIncludedNotes(contentEl: HTMLElement, seenNoteIds: Set<string>) {
     // TODO: Consider duplicating with server's share/content_renderer.ts.
     const includeNoteEls = contentEl.querySelectorAll("section.include-note");
 
@@ -66,7 +83,15 @@ async function renderIncludedNotes(contentEl: HTMLElement) {
             continue;
         }
 
-        const renderedContent = (await content_renderer.getRenderedContent(note)).$renderedContent;
+        if (seenNoteIds.has(noteId)) {
+            console.warn(`Skipping inclusion of ${noteId} to avoid circular reference.`);
+            includeNoteEl.remove();
+            continue;
+        }
+
+        const renderedContent = (await content_renderer.getRenderedContent(note, {
+            seenNoteIds
+        })).$renderedContent;
         includeNoteEl.replaceChildren(...renderedContent);
     }
 }
@@ -86,36 +111,125 @@ export async function rewriteMermaidDiagramsInContainer(container: HTMLDivElemen
     }
 }
 
+/**
+ * Per-container cache of rendered mermaid SVG keyed by diagram source text.
+ * Populated after each successful render; reused on subsequent renders to
+ * avoid flicker when the preview HTML is regenerated (e.g. live markdown
+ * editing). Entries for diagrams no longer present in the container are
+ * evicted on each run so the cache can't grow unbounded.
+ */
+const mermaidSvgCache = new WeakMap<HTMLElement, Map<string, string>>();
+
+/**
+ * Per-container, ordered snapshot of the most recently rendered SVGs. Used as
+ * a positional placeholder so edits to a diagram's source keep the previous
+ * SVG visible while the new one renders offscreen.
+ */
+const mermaidLastRenderedByPosition = new WeakMap<HTMLElement, string[]>();
+
 export async function applyInlineMermaid(container: HTMLDivElement) {
-    // Initialize mermaid
+    const nodes = Array.from(container.querySelectorAll<HTMLElement>("div.mermaid-diagram"));
+    if (!nodes.length) {
+        mermaidLastRenderedByPosition.delete(container);
+        return;
+    }
+
+    let cache = mermaidSvgCache.get(container);
+    if (!cache) {
+        cache = new Map();
+        mermaidSvgCache.set(container, cache);
+    }
+    const lastRendered = mermaidLastRenderedByPosition.get(container) ?? [];
+
+    // Decide per node: exact cache hit → paint final SVG; source changed →
+    // paint the previous SVG (by position) as a placeholder and queue an
+    // offscreen re-render. This way the user keeps seeing the old diagram
+    // until mermaid has finished producing the new one.
+    const pending: Array<{ visible: HTMLElement; source: string }> = [];
+    const seenSources = new Set<string>();
+    for (const [ index, node ] of nodes.entries()) {
+        const source = (node.textContent ?? "").trim();
+        seenSources.add(source);
+
+        const cached = cache.get(source);
+        if (cached) {
+            node.innerHTML = cached;
+            node.setAttribute("data-processed", "true");
+            continue;
+        }
+
+        pending.push({ visible: node, source });
+        const placeholder = lastRendered[index];
+        if (placeholder) {
+            node.innerHTML = placeholder;
+        }
+    }
+
+    // Evict cache entries whose source is no longer present.
+    for (const key of [ ...cache.keys() ]) {
+        if (!seenSources.has(key)) cache.delete(key);
+    }
+
+    if (!pending.length) {
+        mermaidLastRenderedByPosition.set(container, nodes.map((n) => n.innerHTML));
+        return;
+    }
+
     const mermaid = (await import("mermaid")).default;
     mermaid.initialize(getMermaidConfig());
-    const nodes = Array.from(container.querySelectorAll<HTMLElement>("div.mermaid-diagram"));
+
+    // Render clones offscreen so the visible nodes keep showing the placeholder
+    // until the new SVG is ready. Keeps mermaid away from our placeholder SVG
+    // (which would otherwise confuse its text-based parser).
+    const offscreen = document.createElement("div");
+    offscreen.style.cssText = "position:absolute;left:-9999px;top:-9999px;width:0;height:0;overflow:hidden;visibility:hidden;";
+    document.body.appendChild(offscreen);
+
+    const pairs = pending.map(({ visible, source }) => {
+        const clone = document.createElement("div");
+        clone.className = "mermaid-diagram";
+        clone.textContent = source;
+        offscreen.appendChild(clone);
+        return { visible, clone, source };
+    });
+
     try {
-        await mermaid.run({ nodes });
+        await mermaid.run({ nodes: pairs.map((p) => p.clone) });
+        for (const { visible, clone, source } of pairs) {
+            if (clone.getAttribute("data-processed") !== "true") continue;
+            const svg = clone.innerHTML;
+            visible.innerHTML = svg;
+            visible.setAttribute("data-processed", "true");
+            cache.set(source, svg);
+        }
     } catch (e) {
-        console.log(e);
+        console.error(e);
+    } finally {
+        offscreen.remove();
     }
+
+    mermaidLastRenderedByPosition.set(container, nodes.map((n) => n.innerHTML));
 }
 
-async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: FNote) {
+export async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: FNote, includeArchivedNotes: boolean) {
     let childNoteIds = note.getChildNoteIds();
 
     if (!childNoteIds.length) {
         return;
     }
 
-    $renderedContent.css("padding", "10px");
     $renderedContent.addClass("text-with-ellipsis");
 
+    // just load the first 10 child notes
     if (childNoteIds.length > 10) {
         childNoteIds = childNoteIds.slice(0, 10);
     }
 
-    // just load the first 10 child notes
     const childNotes = await froca.getNotes(childNoteIds);
 
     for (const childNote of childNotes) {
+        if (childNote.isArchived && !includeArchivedNotes) continue;
+
         $renderedContent.append(
             await link.createLink(`${note.noteId}/${childNote.noteId}`, {
                 showTooltip: false,

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

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

apps/client/src/services/css_class_manager.ts

@@ -1,21 +1,22 @@
 import clsx from "clsx";
-import {readCssVar} from "../utils/css-var";
 import Color, { ColorInstance } from "color";
 
+import {readCssVar} from "../utils/css-var";
+
 const registeredClasses = new Set<string>();
 const colorsWithHue = new Set<string>();
 
 // Read the color lightness limits defined in the theme as CSS variables
 
 const lightThemeColorMaxLightness = readCssVar(
-                                        document.documentElement,
-                                        "tree-item-light-theme-max-color-lightness"
-                                    ).asNumber(70);
+    document.documentElement,
+    "tree-item-light-theme-max-color-lightness"
+).asNumber(70);
 
 const darkThemeColorMinLightness = readCssVar(
-                                        document.documentElement,
-                                        "tree-item-dark-theme-min-color-lightness"
-                                    ).asNumber(50);
+    document.documentElement,
+    "tree-item-dark-theme-min-color-lightness"
+).asNumber(50);
 
 function createClassForColor(colorString: string | null) {
     if (!colorString?.trim()) return "";
@@ -27,7 +28,7 @@ function createClassForColor(colorString: string | null) {
 
     if (!registeredClasses.has(className)) {
         const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
-                                                   darkThemeColorMinLightness!);
+            darkThemeColorMinLightness!);
         const hue = getHue(color);
 
         $("head").append(`<style>
@@ -48,9 +49,9 @@ function createClassForColor(colorString: string | null) {
     return clsx("use-note-color", className, colorsWithHue.has(className) && "with-hue");
 }
 
-function parseColor(color: string) {
+export function parseColor(color: string) {
     try {
-        return Color(color);
+        return Color(color.toLowerCase());
     } catch (ex) {
         console.error(ex);
     }
@@ -76,7 +77,7 @@ function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: numb
 }
 
 /** Returns the hue of the specified color, or undefined if the color is grayscale. */
-function getHue(color: ColorInstance) {
+export function getHue(color: ColorInstance) {
     const hslColor = color.hsl();
     if (hslColor.saturationl() > 0) {
         return hslColor.hue();
@@ -84,8 +85,8 @@ function getHue(color: ColorInstance) {
 }
 
 export function getReadableTextColor(bgColor: string) {
-    const colorInstance = Color(bgColor);
-    return colorInstance.isLight() ? "#000" : "#fff";
+    const colorInstance = parseColor(bgColor);
+    return !colorInstance || colorInstance?.isLight() ? "#000" : "#fff";
 }
 
 export default {

apps/client/src/services/date_notes.ts

@@ -1,4 +1,5 @@
 import { dayjs } from "@triliumnext/commons";
+
 import type { FNoteRow } from "../entities/fnote.js";
 import froca from "./froca.js";
 import server from "./server.js";
@@ -14,8 +15,13 @@ async function getTodayNote() {
     return await getDayNote(dayjs().format("YYYY-MM-DD"));
 }
 
-async function getDayNote(date: string) {
-    const note = await server.get<FNoteRow>(`special-notes/days/${date}`, "date-note");
+async function getDayNote(date: string, calendarRootId?: string) {
+    let url = `special-notes/days/${date}`;
+    if (calendarRootId) {
+        url += `?calendarRootId=${calendarRootId}`;
+    }
+
+    const note = await server.get<FNoteRow>(url, "date-note");
 
     await ws.waitForMaxKnownEntityChangeId();
 
@@ -78,6 +84,55 @@ async function createSearchNote(opts = {}) {
     return await froca.getNote(note.noteId);
 }
 
+async function createLlmChat() {
+    const note = await server.post<FNoteRow>("special-notes/llm-chat");
+
+    await ws.waitForMaxKnownEntityChangeId();
+
+    return await froca.getNote(note.noteId);
+}
+
+/**
+ * Gets the most recently modified LLM chat.
+ * Returns null if no chat exists.
+ */
+async function getMostRecentLlmChat() {
+    const note = await server.get<FNoteRow | null>("special-notes/most-recent-llm-chat");
+
+    if (!note) {
+        return null;
+    }
+
+    await ws.waitForMaxKnownEntityChangeId();
+
+    return await froca.getNote(note.noteId);
+}
+
+/**
+ * Gets the most recent LLM chat, or creates a new one if none exists.
+ * Used by sidebar chat for persistent conversations across page refreshes.
+ */
+async function getOrCreateLlmChat() {
+    const note = await server.get<FNoteRow>("special-notes/get-or-create-llm-chat");
+
+    await ws.waitForMaxKnownEntityChangeId();
+
+    return await froca.getNote(note.noteId);
+}
+
+export interface RecentLlmChat {
+    noteId: string;
+    title: string;
+    dateModified: string;
+}
+
+/**
+ * Gets a list of recent LLM chats for the history popup.
+ */
+async function getRecentLlmChats(limit: number = 10): Promise<RecentLlmChat[]> {
+    return await server.get<RecentLlmChat[]>(`special-notes/recent-llm-chats?limit=${limit}`);
+}
+
 export default {
     getInboxNote,
     getTodayNote,
@@ -88,5 +143,9 @@ export default {
     getMonthNote,
     getYearNote,
     createSqlConsole,
-    createSearchNote
+    createSearchNote,
+    createLlmChat,
+    getMostRecentLlmChat,
+    getOrCreateLlmChat,
+    getRecentLlmChats
 };

apps/client/src/services/dialog.ts

@@ -1,9 +1,11 @@
 import { Modal } from "bootstrap";
+
 import appContext from "../components/app_context.js";
 import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions, MessageType } from "../widgets/dialogs/confirm.js";
+import { InfoExtraProps } from "../widgets/dialogs/info.jsx";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
 import { focusSavedElement, saveFocusedElement } from "./focus.js";
-import { InfoExtraProps } from "../widgets/dialogs/info.jsx";
+import keyboardActionsService from "./keyboard_actions.js";
 
 export async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog = true, config?: Partial<Modal.Options>) {
     if (closeActDialog) {
@@ -25,7 +27,6 @@ export async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog =
         }
     });
 
-    const keyboardActionsService = (await import("./keyboard_actions.js")).default;
     keyboardActionsService.updateDisplayedShortcuts($dialog);
 
     return $dialog;

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

@@ -0,0 +1,30 @@
+import { describe, expect, it } from "vitest";
+
+import { isValidDocName } from "./doc_renderer.js";
+
+describe("isValidDocName", () => {
+    it("accepts valid docNames", () => {
+        expect(isValidDocName("launchbar_intro")).toBe(true);
+        expect(isValidDocName("User Guide/Quick Start")).toBe(true);
+        expect(isValidDocName("User Guide/User Guide/Quick Start")).toBe(true);
+        expect(isValidDocName("Quick Start Guide")).toBe(true);
+        expect(isValidDocName("quick_start_guide")).toBe(true);
+        expect(isValidDocName("quick-start-guide")).toBe(true);
+    });
+
+    it("rejects path traversal attacks", () => {
+        expect(isValidDocName("..")).toBe(false);
+        expect(isValidDocName("../etc/passwd")).toBe(false);
+        expect(isValidDocName("foo/../bar")).toBe(false);
+        expect(isValidDocName("../../../../api/notes/_malicious/open")).toBe(false);
+        expect(isValidDocName("..\\etc\\passwd")).toBe(false);
+        expect(isValidDocName("foo\\bar")).toBe(false);
+    });
+
+    it("rejects URL manipulation attacks", () => {
+        expect(isValidDocName("../../../../api/notes/_malicious/open?x=")).toBe(false);
+        expect(isValidDocName("foo#bar")).toBe(false);
+        expect(isValidDocName("%2e%2e")).toBe(false);
+        expect(isValidDocName("%2e%2e%2f%2e%2e%2fapi")).toBe(false);
+    });
+});

apps/client/src/services/doc_renderer.ts

@@ -3,22 +3,39 @@ import { applyReferenceLinks } from "../widgets/type_widgets/text/read_only_help
 import { getCurrentLanguage } from "./i18n.js";
 import { formatCodeBlocks } from "./syntax_highlight.js";
 
+/**
+ * Validates a docName to prevent path traversal attacks.
+ * Allows forward slashes for subdirectories (e.g., "User Guide/Quick Start")
+ * but blocks traversal sequences and URL manipulation characters.
+ */
+export function isValidDocName(docName: string): boolean {
+    // Allow alphanumeric characters, spaces, underscores, hyphens, and forward slashes.
+    const validDocNameRegex = /^[a-zA-Z0-9_/\- ]+$/;
+    return validDocNameRegex.test(docName);
+}
+
 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) {
-            // find doc based on language
-            const url = getUrl(docName, getCurrentLanguage());
+        // find doc based on language
+        const url = getUrl(docName, getCurrentLanguage());
+
+        if (url) {
             $content.load(url, async (response, status) => {
                 // fallback to english doc if no translation available
                 if (status === "error") {
                     const fallbackUrl = getUrl(docName, "en");
-                    $content.load(fallbackUrl, async () => {
-                        await processContent(fallbackUrl, $content)
+
+                    if (fallbackUrl) {
+                        $content.load(fallbackUrl, async () => {
+                            await processContent(fallbackUrl, $content);
+                            resolve($content);
+                        });
+                    } else {
                         resolve($content);
-                    });
+                    }
                     return;
                 }
 
@@ -28,8 +45,6 @@ export default function renderDoc(note: FNote) {
         } else {
             resolve($content);
         }
-
-        return $content;
     });
 }
 
@@ -39,7 +54,7 @@ async function processContent(url: string, $content: JQuery<HTMLElement>) {
     // 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) => {
         const $img = $(el);
-        $img.attr("src", dir + "/" + $img.attr("src"));
+        $img.attr("src", `${dir}/${$img.attr("src")}`);
     });
 
     formatCodeBlocks($content);
@@ -48,10 +63,17 @@ async function processContent(url: string, $content: JQuery<HTMLElement>) {
     await applyReferenceLinks($content[0]);
 }
 
-function getUrl(docNameValue: string, language: string) {
+function getUrl(docNameValue: string | null, language: string) {
+    if (!docNameValue) return;
+
+    if (!isValidDocName(docNameValue)) {
+        console.error(`Invalid docName: ${docNameValue}`);
+        return null;
+    }
+
     // 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;
+    const basePath = window.glob.isDev ? `${window.glob.assetPath  }/..` : window.glob.assetPath;
     return `${basePath}/doc_notes/${language}/${docNameValue}.html`;
 }

apps/client/src/services/experimental_features.ts

@@ -1,5 +1,6 @@
 import { t } from "./i18n";
 import options from "./options";
+import { isMobile } from "./utils";
 
 export interface ExperimentalFeature {
     id: string;
@@ -12,6 +13,11 @@ export const experimentalFeatures = [
         id: "new-layout",
         name: t("experimental_features.new_layout_name"),
         description: t("experimental_features.new_layout_description"),
+    },
+    {
+        id: "llm",
+        name: t("experimental_features.llm_name"),
+        description: t("experimental_features.llm_description"),
     }
 ] as const satisfies ExperimentalFeature[];
 
@@ -21,7 +27,7 @@ let enabledFeatures: Set<ExperimentalFeatureId> | null = null;
 
 export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
     if (featureId === "new-layout") {
-        return options.is("newLayout");
+        return (isMobile() || options.is("newLayout"));
     }
 
     return getEnabledFeatures().has(featureId);
@@ -29,7 +35,7 @@ export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId):
 
 export function getEnabledExperimentalFeatureIds() {
     const values = [ ...getEnabledFeatures().values() ];
-    if (options.is("newLayout")) {
+    if (isMobile() || options.is("newLayout")) {
         values.push("new-layout");
     }
     return values;

apps/client/src/services/froca_updater.ts

@@ -1,14 +1,16 @@
-import LoadResults from "./load_results.js";
-import froca from "./froca.js";
-import utils from "./utils.js";
-import options from "./options.js";
-import noteAttributeCache from "./note_attribute_cache.js";
-import FBranch, { type FBranchRow } from "../entities/fbranch.js";
-import FAttribute, { type FAttributeRow } from "../entities/fattribute.js";
+import type { OptionNames } from "@triliumnext/commons";
+
+import appContext from "../components/app_context.js";
 import FAttachment, { type FAttachmentRow } from "../entities/fattachment.js";
+import FAttribute, { type FAttributeRow } from "../entities/fattribute.js";
+import FBranch, { type FBranchRow } from "../entities/fbranch.js";
 import type { default as FNote, FNoteRow } from "../entities/fnote.js";
 import type { EntityChange } from "../server_types.js";
-import type { OptionNames } from "@triliumnext/commons";
+import froca from "./froca.js";
+import LoadResults from "./load_results.js";
+import noteAttributeCache from "./note_attribute_cache.js";
+import options from "./options.js";
+import utils from "./utils.js";
 
 async function processEntityChanges(entityChanges: EntityChange[]) {
     const loadResults = new LoadResults(entityChanges);
@@ -63,7 +65,7 @@ async function processEntityChanges(entityChanges: EntityChange[]) {
         if (entityName === "branches" && !((entity as FBranchRow).parentNoteId in froca.notes)) {
             missingNoteIds.push((entity as FBranchRow).parentNoteId);
         } else if (entityName === "attributes") {
-            let attributeEntity = entity as FAttributeRow;
+            const attributeEntity = entity as FAttributeRow;
             if (attributeEntity.type === "relation" && (attributeEntity.name === "template" || attributeEntity.name === "inherit") && !(attributeEntity.value in froca.notes)) {
                 missingNoteIds.push(attributeEntity.value);
             }
@@ -79,7 +81,6 @@ async function processEntityChanges(entityChanges: EntityChange[]) {
             noteAttributeCache.invalidate();
         }
 
-        const appContext = (await import("../components/app_context.js")).default;
         await appContext.triggerEvent("entitiesReloaded", { loadResults });
     }
 }
@@ -110,7 +111,12 @@ function processNoteChange(loadResults: LoadResults, ec: EntityChange) {
                 }
             }
 
-            if (ec.componentId) {
+            // Only register as a content change if the protection status didn't change.
+            // When isProtected changes, the blobId change is a side effect of re-encryption,
+            // not a content edit. Registering it as content would cause the tree's content-only
+            // filter to incorrectly skip the note update (since both changes share the same
+            // componentId).
+            if (ec.componentId && note.isProtected === (ec.entity as FNoteRow).isProtected) {
                 loadResults.addNoteContent(note.noteId, ec.componentId);
             }
         }

apps/client/src/services/frontend_script_api_preact.ts

@@ -1,4 +1,4 @@
-import { Fragment, h, VNode } from "preact";
+import { createContext, Fragment, h, VNode } from "preact";
 import * as hooks from "preact/hooks";
 
 import ActionButton from "../widgets/react/ActionButton";
@@ -47,6 +47,7 @@ export const preactAPI = Object.freeze({
     // Core
     h,
     Fragment,
+    createContext,
 
     /**
      * Method that must be run for widget scripts that run on Preact, using JSX. The method just returns the same definition, reserved for future typechecking and perhaps validation purposes.

apps/client/src/services/glob.ts

@@ -75,8 +75,6 @@ function setupGlobs() {
         requireCss(`api/notes/download/${appCssNoteId}`, false);
     }
 
-    utils.initHelpButtons($(window));
-
     $("body").on("click", "a.external", function () {
         window.open($(this).attr("href"), "_blank");
 

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

@@ -1,10 +1,10 @@
-import { LOCALES } from "@triliumnext/commons";
+import { findDuplicateJsonKeys, LOCALES } from "@triliumnext/commons";
 import { readFileSync } from "fs";
 import { join } from "path";
 import { describe, expect, it } from "vitest";
 
 describe("i18n", () => {
-    it("translations are valid JSON", () => {
+    it("translations are valid JSON with no duplicate keys", () => {
         for (const locale of LOCALES) {
             if (locale.contentOnly || locale.id === "en_rtl") {
                 continue;
@@ -14,6 +14,13 @@ describe("i18n", () => {
             const translationFile = readFileSync(translationPath, { encoding: "utf-8" });
             expect(() => JSON.parse(translationFile), `JSON error while parsing locale '${locale.id}' at "${translationPath}"`)
                 .not.toThrow();
+
+            const duplicates = findDuplicateJsonKeys(translationFile);
+            expect(
+                duplicates,
+                `Duplicate keys in locale '${locale.id}' at "${translationPath}":\n${ 
+                    duplicates.map((d) => `  - "${d.key}" (line ${d.line})`).join("\n")}`
+            ).toEqual([]);
         }
     });
 });

apps/client/src/services/i18n.ts

@@ -1,21 +1,14 @@
-import options from "./options.js";
+import { LOCALE_IDS, LOCALES, setDayjsLocale } from "@triliumnext/commons";
 import i18next from "i18next";
 import i18nextHttpBackend from "i18next-http-backend";
-import server from "./server.js";
-import { LOCALE_IDS, setDayjsLocale, type Locale } from "@triliumnext/commons";
 import { initReactI18next } from "react-i18next";
 
-let locales: Locale[] | null;
-
 /**
  * A deferred promise that resolves when translations are initialized.
  */
-export let translationsInitializedPromise = $.Deferred();
+export const translationsInitializedPromise = $.Deferred();
 
-export async function initLocale() {
-    const locale = ((options.get("locale") as string) || "en") as LOCALE_IDS;
-
-    locales = await server.get<Locale[]>("options/locales");
+export async function initLocale(locale: LOCALE_IDS = "en") {
 
     i18next.use(initReactI18next);
     await i18next.use(i18nextHttpBackend).init({
@@ -32,11 +25,7 @@ export async function initLocale() {
 }
 
 export function getAvailableLocales() {
-    if (!locales) {
-        throw new Error("Tried to load list of locales, but localization is not yet initialized.")
-    }
-
-    return locales;
+    return LOCALES;
 }
 
 /**
@@ -47,7 +36,7 @@ export function getAvailableLocales() {
  */
 export function getLocaleById(localeId: string | null | undefined) {
     if (!localeId) return null;
-    return locales?.find((l) => l.id === localeId) ?? null;
+    return LOCALES.find((l) => l.id === localeId) ?? null;
 }
 
 export const t = i18next.t;

apps/client/src/services/in_app_help.ts

@@ -1,4 +1,5 @@
 import { NoteType } from "@triliumnext/commons";
+
 import FNote from "../entities/fnote";
 import { ViewTypeOptions } from "../widgets/collections/interface";
 
@@ -18,7 +19,8 @@ export const byNoteType: Record<Exclude<NoteType, "book">, string | null> = {
     search: null,
     text: null,
     webView: null,
-    aiChat: null
+    spreadsheet: null,
+    llmChat: null
 };
 
 export const byBookType: Record<ViewTypeOptions, string | null> = {
@@ -39,6 +41,6 @@ export function getHelpUrlForNote(note: FNote | null | undefined) {
     } else if (note?.hasLabel("textSnippet")) {
         return "pwc194wlRzcH";
     } else if (note && note.type === "book") {
-        return byBookType[note.getAttributeValue("label", "viewType") as ViewTypeOptions ?? ""]
+        return byBookType[note.getAttributeValue("label", "viewType") as ViewTypeOptions ?? ""];
     }
 }

apps/client/src/services/link.ts

@@ -4,6 +4,8 @@ import appContext, { type NoteCommandData } from "../components/app_context.js";
 import { openInCurrentNoteContext } from "../components/note_context.js";
 import linkContextMenuService from "../menus/link_context_menu.js";
 import froca from "./froca.js";
+import { t } from "./i18n.js";
+import { showError } from "./toast.js";
 import treeService from "./tree.js";
 import utils from "./utils.js";
 
@@ -28,7 +30,7 @@ async function getLinkIcon(noteId: string, viewMode: ViewMode | undefined) {
     return icon;
 }
 
-export type ViewMode = "default" | "source" | "attachments" | "contextual-help" | "note-map";
+export type ViewMode = "default" | "source" | "attachments" | "contextual-help" | "note-map" | "ocr";
 
 export interface ViewScope {
     /**
@@ -58,6 +60,8 @@ export interface ViewScope {
      */
     tocPreviousVisible?: boolean;
     tocCollapsedHeadings?:  Set<string>;
+    /** When set, scrolls to a bookmark anchor within the note after navigation. */
+    bookmark?: string;
 }
 
 interface CreateLinkOptions {
@@ -242,7 +246,7 @@ export function parseNavigationStateFromUrl(url: string | undefined) {
                 hoistedNoteId = value;
             } else if (name === "searchString") {
                 searchString = value; // supports triggering search from URL, e.g. #?searchString=blabla
-            } else if (["viewMode", "attachmentId"].includes(name)) {
+            } else if (["viewMode", "attachmentId", "bookmark"].includes(name)) {
                 (viewScope as any)[name] = value;
             } else if (name === "popup") {
                 openInPopup = true;
@@ -333,15 +337,30 @@ export function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDo
         if (openInNewTab || openInNewWindow || (isLeftClick && (withinEditLink || outsideOfCKEditor))) {
             if (hrefLink.toLowerCase().startsWith("http") || hrefLink.startsWith("api/")) {
                 window.open(hrefLink, "_blank");
-            } else {
+            } else if (ALLOWED_PROTOCOLS.some((protocol) => hrefLink.toLowerCase().startsWith(`${protocol}:`))) {
                 // Enable protocols supported by CKEditor 5 to be clickable.
-                if (ALLOWED_PROTOCOLS.some((protocol) => hrefLink.toLowerCase().startsWith(`${protocol}:`))) {
-                    if ( utils.isElectron()) {
-                        const electron = utils.dynamicRequire("electron");
-                        electron.shell.openExternal(hrefLink);
+                if (utils.isElectron()) {
+                    const electron = utils.dynamicRequire("electron");
+                    const reportLinkError = (e: unknown) => {
+                        const message = e instanceof Error ? e.message : String(e);
+                        logError(`Failed to open link '${hrefLink}': ${message}`);
+                        showError(t("link.failed_to_open", { href: hrefLink, message }));
+                    };
+
+                    if (hrefLink.toLowerCase().startsWith("file:")) {
+                        // shell.openExternal mishandles Unicode file:// URLs on Windows;
+                        // convert to a filesystem path and use shell.openPath instead.
+                        // Normalize file://c:/... (2 slashes — drive read as host) to file:///c:/...
+                        const normalized = hrefLink.replace(/^file:\/\/(?=[a-zA-Z]:)/i, "file:///");
+                        const { fileURLToPath } = utils.dynamicRequire("url");
+                        electron.shell.openPath(fileURLToPath(normalized)).then((err: string) => {
+                            if (err) reportLinkError(new Error(err));
+                        }).catch(reportLinkError);
                     } else {
-                        window.open(hrefLink, "_blank");
+                        electron.shell.openExternal(hrefLink).catch(reportLinkError);
                     }
+                } else {
+                    window.open(hrefLink, "_blank");
                 }
             }
         }
@@ -415,6 +434,13 @@ async function loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string | n
     const title = await getReferenceLinkTitle(href);
     $el.text(title);
 
+    if (viewScope?.bookmark) {
+        $el.append($("<small>").append(
+            $("<span>").addClass("bx bx-bookmark"),
+            document.createTextNode(viewScope.bookmark)
+        ));
+    }
+
     if (note) {
         const icon = await getLinkIcon(noteId, viewScope.viewMode);
 
@@ -440,8 +466,8 @@ async function getReferenceLinkTitle(href: string) {
 
         return attachment ? attachment.title : "[missing attachment]";
     }
-    return note.title;
 
+    return note.title;
 }
 
 function getReferenceLinkTitleSync(href: string) {
@@ -464,8 +490,12 @@ function getReferenceLinkTitleSync(href: string) {
 
         return attachment ? attachment.title : "[missing attachment]";
     }
-    return note.title;
 
+    if (viewScope?.bookmark) {
+        return `${note.title} - ${viewScope.bookmark}`;
+    }
+
+    return note.title;
 }
 
 if (glob.device !== "print") {

apps/client/src/services/llm_chat.ts

@@ -0,0 +1,116 @@
+import type { LlmChatConfig, LlmCitation, LlmMessage, LlmModelInfo,LlmUsage } from "@triliumnext/commons";
+
+import server from "./server.js";
+
+/**
+ * Fetch available models from all configured providers.
+ */
+export async function getAvailableModels(): Promise<LlmModelInfo[]> {
+    const response = await server.get<{ models?: LlmModelInfo[] }>("llm-chat/models");
+    return response.models ?? [];
+}
+
+export interface StreamCallbacks {
+    onChunk: (text: string) => void;
+    onThinking?: (text: string) => void;
+    onToolUse?: (toolName: string, input: Record<string, unknown>) => void;
+    onToolResult?: (toolName: string, result: string, isError?: boolean) => void;
+    onCitation?: (citation: LlmCitation) => void;
+    onUsage?: (usage: LlmUsage) => void;
+    onError: (error: string) => void;
+    onDone: () => void;
+}
+
+/**
+ * Stream a chat completion from the LLM API using Server-Sent Events.
+ */
+export async function streamChatCompletion(
+    messages: LlmMessage[],
+    config: LlmChatConfig,
+    callbacks: StreamCallbacks,
+    abortSignal?: AbortSignal
+): Promise<void> {
+    const headers = await server.getHeaders();
+
+    const response = await fetch(`${window.glob.baseApiUrl}llm-chat/stream`, {
+        method: "POST",
+        headers: {
+            ...headers,
+            "Content-Type": "application/json"
+        } as HeadersInit,
+        body: JSON.stringify({ messages, config }),
+        signal: abortSignal
+    });
+
+    if (!response.ok) {
+        callbacks.onError(`HTTP ${response.status}: ${response.statusText}`);
+        return;
+    }
+
+    const reader = response.body?.getReader();
+    if (!reader) {
+        callbacks.onError("No response body");
+        return;
+    }
+
+    const decoder = new TextDecoder();
+    let buffer = "";
+
+    try {
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+
+            buffer += decoder.decode(value, { stream: true });
+            const lines = buffer.split("\n");
+            buffer = lines.pop() || "";
+
+            for (const line of lines) {
+                if (line.startsWith("data: ")) {
+                    try {
+                        const data = JSON.parse(line.slice(6));
+
+                        switch (data.type) {
+                            case "text":
+                                callbacks.onChunk(data.content);
+                                break;
+                            case "thinking":
+                                callbacks.onThinking?.(data.content);
+                                break;
+                            case "tool_use":
+                                callbacks.onToolUse?.(data.toolName, data.toolInput);
+                                // Yield to force Preact to commit the pending tool call
+                                // state before we process the result.
+                                await new Promise((r) => setTimeout(r, 1));
+                                break;
+                            case "tool_result":
+                                callbacks.onToolResult?.(data.toolName, data.result, data.isError);
+                                await new Promise((r) => setTimeout(r, 1));
+                                break;
+                            case "citation":
+                                if (data.citation) {
+                                    callbacks.onCitation?.(data.citation);
+                                }
+                                break;
+                            case "usage":
+                                if (data.usage) {
+                                    callbacks.onUsage?.(data.usage);
+                                }
+                                break;
+                            case "error":
+                                callbacks.onError(data.error);
+                                break;
+                            case "done":
+                                callbacks.onDone();
+                                break;
+                        }
+                    } catch (e) {
+                        console.error("Failed to parse SSE data line:", line, e);
+                    }
+                }
+            }
+        }
+    } finally {
+        reader.releaseLock();
+    }
+}

apps/client/src/services/load_results.ts

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

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

@@ -32,4 +32,9 @@ describe("Mermaid", () => {
         `;
         expect(postprocessMermaidSvg(before)).toBe(after);
     });
+
+    it("replaces   with numeric entity for valid XML", () => {
+        expect(postprocessMermaidSvg("<text>a&nbsp;b&nbsp;&nbsp;c</text>"))
+            .toBe("<text>a&#160;b&#160;&#160;c</text>");
+    });
 });

apps/client/src/services/mermaid.ts

@@ -49,11 +49,15 @@ export async function loadElkIfNeeded(mermaid: Mermaid, mermaidContent: string)
  * Processes the output of a Mermaid SVG render before it should be delivered to the user.
  *
  * <p>
- * Currently this fixes <br> to <br/> which would otherwise cause an invalid XML.
+ * Currently this fixes <br> to <br/> and replaces named HTML entities like &nbsp; with their
+ * numeric equivalents, both of which would otherwise cause invalid XML when the SVG is saved
+ * as an attachment.
  *
  * @param svg the Mermaid SVG to process.
  * @returns the processed SVG.
  */
 export function postprocessMermaidSvg(svg: string) {
-    return svg.replaceAll(/<br\s*>/ig, "<br/>");
+    return svg
+        .replaceAll(/<br\s*>/ig, "<br/>")
+        .replaceAll(/&nbsp;/g, "&#160;");
 }

apps/client/src/services/note_autocomplete.ts

@@ -68,7 +68,8 @@ async function autocompleteSourceForCKEditor(queryText: string) {
                             name: row.notePathTitle || "",
                             link: `#${row.notePath}`,
                             notePath: row.notePath,
-                            highlightedNotePathTitle: row.highlightedNotePathTitle
+                            highlightedNotePathTitle: row.highlightedNotePathTitle,
+                            icon: row.icon
                         };
                     })
                 );

apps/client/src/services/note_create.ts

@@ -1,15 +1,17 @@
+import type { CKTextEditor } from "@triliumnext/ckeditor5";
+import { AttributeRow } from "@triliumnext/commons";
+
 import appContext from "../components/app_context.js";
+import type FBranch from "../entities/fbranch.js";
+import type FNote from "../entities/fnote.js";
+import type { ChooseNoteTypeResponse } from "../widgets/dialogs/note_type_chooser.js";
+import froca from "./froca.js";
+import { t } from "./i18n.js";
 import protectedSessionHolder from "./protected_session_holder.js";
 import server from "./server.js";
-import ws from "./ws.js";
-import froca from "./froca.js";
-import treeService from "./tree.js";
 import toastService from "./toast.js";
-import { t } from "./i18n.js";
-import type FNote from "../entities/fnote.js";
-import type FBranch from "../entities/fbranch.js";
-import type { ChooseNoteTypeResponse } from "../widgets/dialogs/note_type_chooser.js";
-import type { CKTextEditor } from "@triliumnext/ckeditor5";
+import treeService from "./tree.js";
+import ws from "./ws.js";
 
 export interface CreateNoteOpts {
     isProtected?: boolean;
@@ -24,6 +26,8 @@ export interface CreateNoteOpts {
     target?: string;
     targetBranchId?: string;
     textEditor?: CKTextEditor;
+    /** Attributes to be set on the note. These are set atomically on note creation, so entity changes are not sent for attributes defined here. */
+    attributes?: Omit<AttributeRow, "noteId" | "attributeId">[];
 }
 
 interface Response {
@@ -37,7 +41,7 @@ interface DuplicateResponse {
     note: FNote;
 }
 
-async function createNote(parentNotePath: string | undefined, options: CreateNoteOpts = {}) {
+async function createNote(parentNotePath: string | undefined, options: CreateNoteOpts = {}, componentId?: string) {
     options = Object.assign(
         {
             activate: true,
@@ -63,22 +67,15 @@ async function createNote(parentNotePath: string | undefined, options: CreateNot
 
     const parentNoteId = treeService.getNoteIdFromUrl(parentNotePath);
 
-    if (options.type === "mermaid" && !options.content && !options.templateNoteId) {
-        options.content = `graph TD;
-    A-->B;
-    A-->C;
-    B-->D;
-    C-->D;`;
-    }
-
     const { note, branch } = await server.post<Response>(`notes/${parentNoteId}/children?target=${options.target}&targetBranchId=${options.targetBranchId || ""}`, {
         title: options.title,
         content: options.content || "",
         isProtected: options.isProtected,
         type: options.type,
         mime: options.mime,
-        templateNoteId: options.templateNoteId
-    });
+        templateNoteId: options.templateNoteId,
+        attributes: options.attributes
+    }, componentId);
 
     if (options.saveSelection) {
         // we remove the selection only after it was saved to server to make sure we don't lose anything
@@ -140,9 +137,8 @@ function parseSelectedHtml(selectedHtml: string) {
         const content = selectedHtml.replace(dom[0].outerHTML, "");
 
         return [title, content];
-    } else {
-        return [null, selectedHtml];
     }
+    return [null, selectedHtml];
 }
 
 async function duplicateSubtree(noteId: string, parentNotePath: string) {

apps/client/src/services/note_tooltip.ts

@@ -1,20 +1,20 @@
-import treeService from "./tree.js";
-import linkService from "./link.js";
-import froca from "./froca.js";
-import utils from "./utils.js";
-import attributeRenderer from "./attribute_renderer.js";
-import contentRenderer from "./content_renderer.js";
 import appContext from "../components/app_context.js";
 import type FNote from "../entities/fnote.js";
+import attributeRenderer from "./attribute_renderer.js";
+import contentRenderer from "./content_renderer.js";
+import froca from "./froca.js";
 import { t } from "./i18n.js";
+import linkService from "./link.js";
+import treeService from "./tree.js";
+import utils from "./utils.js";
 
 // Track all elements that open tooltips
 let openTooltipElements: JQuery<HTMLElement>[] = [];
 let dismissTimer: ReturnType<typeof setTimeout>;
 
 function setupGlobalTooltip() {
-    $(document).on("mouseenter", "a:not(.no-tooltip-preview)", mouseEnterHandler);
-    $(document).on("mouseenter", "[data-href]:not(.no-tooltip-preview)", mouseEnterHandler);
+    $(document).on("pointerenter", "a:not(.no-tooltip-preview)", mouseEnterHandler);
+    $(document).on("pointerenter", "[data-href]:not(.no-tooltip-preview)", mouseEnterHandler);
 
     // close any note tooltip after click, this fixes the problem that sometimes tooltips remained on the screen
     $(document).on("click", (e) => {
@@ -37,10 +37,12 @@ function dismissAllTooltips() {
 }
 
 function setupElementTooltip($el: JQuery<HTMLElement>) {
-    $el.on("mouseenter", mouseEnterHandler);
+    $el.on("pointerenter", mouseEnterHandler);
 }
 
-async function mouseEnterHandler(this: HTMLElement) {
+async function mouseEnterHandler<T>(this: HTMLElement, e: JQuery.TriggeredEvent<T, undefined, T, T>) {
+    if (e.pointerType !== "mouse") return;
+
     const $link = $(this);
 
     if ($link.hasClass("no-tooltip-preview") || $link.hasClass("disabled")) {
@@ -91,7 +93,7 @@ async function mouseEnterHandler(this: HTMLElement) {
     }
 
     const html = `<div class="note-tooltip-content">${content}</div>`;
-    const tooltipClass = "tooltip-" + Math.floor(Math.random() * 999_999_999);
+    const tooltipClass = `tooltip-${  Math.floor(Math.random() * 999_999_999)}`;
 
     // we need to check if we're still hovering over the element
     // since the operation to get tooltip content was async, it is possible that
@@ -224,7 +226,7 @@ function renderFootnoteOrAnchor($link: JQuery<HTMLElement>, url: string) {
     }
 
     let footnoteContent = $targetContent.html();
-    footnoteContent = `<div class="ck-content">${footnoteContent}</div>`
+    footnoteContent = `<div class="ck-content">${footnoteContent}</div>`;
     return footnoteContent || "";
 }
 

apps/client/src/services/note_types.ts

@@ -1,9 +1,10 @@
-import { t } from "./i18n.js";
-import froca from "./froca.js";
-import server from "./server.js";
-import type { MenuCommandItem, MenuItem, MenuItemBadge, MenuSeparatorItem } from "../menus/context_menu.js";
 import type { NoteType } from "../entities/fnote.js";
+import type { MenuCommandItem, MenuItem, MenuItemBadge, MenuSeparatorItem } from "../menus/context_menu.js";
 import type { TreeCommandNames } from "../menus/tree_context_menu.js";
+import { isExperimentalFeatureEnabled } from "./experimental_features.js";
+import froca from "./froca.js";
+import { t } from "./i18n.js";
+import server from "./server.js";
 
 export interface NoteTypeMapping {
     type: NoteType;
@@ -26,6 +27,7 @@ export const NOTE_TYPES: NoteTypeMapping[] = [
 
     // The default note type (always the first item)
     { type: "text", mime: "text/html", title: t("note_types.text"), icon: "bx-note" },
+    { type: "spreadsheet", mime: "application/json", title: t("note_types.spreadsheet"), icon: "bx-table", isBeta: true, isNew: true },
 
     // Text notes group
     { type: "book", mime: "", title: t("note_types.book"), icon: "bx-book" },
@@ -40,12 +42,14 @@ export const NOTE_TYPES: NoteTypeMapping[] = [
     { type: "relationMap", mime: "application/json", title: t("note_types.relation-map"), icon: "bxs-network-chart" },
 
     // Misc note types
+    { type: "llmChat", mime: "application/json", title: t("note_types.llm-chat"), icon: "bx-message-square-dots", isBeta: true },
     { type: "render", mime: "", title: t("note_types.render-note"), icon: "bx-extension" },
     { type: "search", title: t("note_types.saved-search"), icon: "bx-file-find", static: true },
     { type: "webView", mime: "", title: t("note_types.web-view"), icon: "bx-globe-alt" },
 
     // Code notes
     { type: "code", mime: "text/plain", title: t("note_types.code"), icon: "bx-code" },
+    { type: "code", mime: "text/x-markdown", title: t("note_types.markdown"), icon: "bxl-markdown", isNew: true },
 
     // Reserved types (cannot be created by the user)
     { type: "contentWidget", mime: "", title: t("note_types.widget"), reserved: true },
@@ -53,7 +57,6 @@ export const NOTE_TYPES: NoteTypeMapping[] = [
     { type: "file", title: t("note_types.file"), reserved: true },
     { type: "image", title: t("note_types.image"), reserved: true },
     { type: "launcher", mime: "", title: t("note_types.launcher"), reserved: true },
-    { type: "aiChat", mime: "application/json", title: t("note_types.ai-chat"), reserved: true }
 ];
 
 /** The maximum age in days for a template to be marked with the "New" badge */
@@ -92,14 +95,16 @@ async function getNoteTypeItems(command?: TreeCommandNames) {
 function getBlankNoteTypes(command?: TreeCommandNames): MenuItem<TreeCommandNames>[] {
     return NOTE_TYPES
         .filter((nt) => !nt.reserved && nt.type !== "book")
+        .filter((nt) => nt.type !== "llmChat" || isExperimentalFeatureEnabled("llm"))
         .map((nt) => {
             const menuItem: MenuCommandItem<TreeCommandNames> = {
                 title: nt.title,
                 command,
                 type: nt.type,
-                uiIcon: "bx " + nt.icon,
+                mime: nt.mime,
+                uiIcon: `bx ${nt.icon}`,
                 badges: []
-            }
+            };
 
             if (nt.isNew) {
                 menuItem.badges?.push(NEW_BADGE);
@@ -131,7 +136,7 @@ async function getUserTemplates(command?: TreeCommandNames) {
         const item: MenuItem<TreeCommandNames> = {
             title: templateNote.title,
             uiIcon: templateNote.getIcon(),
-            command: command,
+            command,
             type: templateNote.type,
             templateNoteId: templateNote.noteId
         };
@@ -160,7 +165,7 @@ async function getBuiltInTemplates(title: string | null, command: TreeCommandNam
     const items: MenuItem<TreeCommandNames>[] = [];
     if (title) {
         items.push({
-            title: title,
+            title,
             kind: "header"
         });
     } else {
@@ -176,7 +181,7 @@ async function getBuiltInTemplates(title: string | null, command: TreeCommandNam
         const item: MenuItem<TreeCommandNames> = {
             title: templateNote.title,
             uiIcon: templateNote.getIcon(),
-            command: command,
+            command,
             type: templateNote.type,
             templateNoteId: templateNote.noteId
         };
@@ -194,7 +199,7 @@ async function isNewTemplate(templateNoteId) {
     if (rootCreationDate === undefined) {
         // Retrieve the root note creation date
         try {
-            let rootNoteInfo: any = await server.get("notes/root");
+            const rootNoteInfo: any = await server.get("notes/root");
             if ("dateCreated" in rootNoteInfo) {
                 rootCreationDate = new Date(rootNoteInfo.dateCreated);
             }
@@ -209,7 +214,7 @@ async function isNewTemplate(templateNoteId) {
     if (creationDate === undefined) {
         // The creation date isn't available in the cache, try to retrieve it from the server
         try {
-            const noteInfo: any = await server.get("notes/" + templateNoteId);
+            const noteInfo: any = await server.get(`notes/${templateNoteId}`);
             if ("dateCreated" in noteInfo) {
                 creationDate = new Date(noteInfo.dateCreated);
                 creationDateCache.set(templateNoteId, creationDate);
@@ -231,9 +236,8 @@ async function isNewTemplate(templateNoteId) {
         const age = (new Date().getTime() - creationDate.getTime()) / DAY_LENGTH;
         // Return true if the template is at most NEW_TEMPLATE_MAX_AGE days old
         return (age <= NEW_TEMPLATE_MAX_AGE);
-    } else {
-        return false;
     }
+    return false;
 }
 
 export default {

apps/client/src/services/open.ts

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