docs(user): integrate server installation docs

.editorconfig

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

.envrc

@@ -1,3 +0,0 @@
-if has nix; then
-    use flake
-fi

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

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

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

@@ -37,35 +37,8 @@ jobs:
       - name: Typecheck
         run: pnpm typecheck
 
-      - 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
+      - name: Run the unit tests
+        run: pnpm run test:all
 
   build_docker:
     name: Build Docker image
@@ -90,7 +63,7 @@ jobs:
       - name: Trigger server build
         run: pnpm run server:build
       - uses: docker/setup-buildx-action@v3
-      - uses: docker/build-push-action@v7
+      - uses: docker/build-push-action@v6
         with:
           context: apps/server
           cache-from: type=gha
@@ -127,7 +100,7 @@ jobs:
         uses: docker/setup-buildx-action@v3
 
       - name: Build and export to Docker
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}

.github/workflows/i18n.yml

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

.github/workflows/main-docker.yml

@@ -59,7 +59,7 @@ jobs:
         run: pnpm run server:build
 
       - name: Build and export to Docker
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}
@@ -86,12 +86,12 @@ jobs:
 
       - name: Upload Playwright trace
         if: failure()
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v5
         with:
           name: Playwright trace (${{ matrix.dockerfile }})
           path: test-output/playwright/output
 
-      - uses: actions/upload-artifact@v7
+      - uses: actions/upload-artifact@v5
         if: ${{ !cancelled() }}
         with:
           name: Playwright report (${{ matrix.dockerfile }})
@@ -164,9 +164,11 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
         with:
-          images: ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
+          images: |
+            ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
+            ${{ env.DOCKERHUB_REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
             type=ref,event=branch
             type=ref,event=tag
@@ -175,21 +177,28 @@ jobs:
             latest=false
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v4
+        uses: docker/setup-qemu-action@v3
 
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
       - name: Login to GHCR
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         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@v7
+        uses: docker/build-push-action@v6
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}
@@ -204,7 +213,7 @@ jobs:
           touch "/tmp/digests/${digest#sha256:}"
 
       - name: Upload digest
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v5
         with:
           name: digests-${{ env.PLATFORM_PAIR }}-${{ matrix.dockerfile }}
           path: /tmp/digests/*
@@ -218,7 +227,7 @@ jobs:
       - build
     steps:
       - name: Download digests
-        uses: actions/download-artifact@v8
+        uses: actions/download-artifact@v6
         with:
           path: /tmp/digests
           pattern: digests-*
@@ -228,86 +237,75 @@ jobs:
       - name: Set TEST_TAG to lowercase
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
-      - name: Set up crane
-        uses: imjasonh/setup-crane@v0.5
+      - 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: Login to GHCR
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.GHCR_REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Login to DockerHub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.DOCKERHUB_REGISTRY }}
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - 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
+      - name: Create manifest list and push
         working-directory: /tmp/digests
         run: |
-          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
+          # Extract the branch or tag name from the ref
+          REF_NAME=$(echo "${GITHUB_REF}" | sed 's/refs\/heads\///' | sed 's/refs\/tags\///')
 
-      - 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 }}"
+          # 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 ' *)
 
-          # 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
+          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 ' *)
 
-          # 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 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...
           if [[ "${GITHUB_REF}" == refs/tags/* && ! "${REF_NAME}" =~ - ]]; then
-            echo "Creating stable tags..."
-            crane index append ${MANIFEST_ARGS} -t "${GHCR_IMAGE}:stable"
-            crane copy "${GHCR_IMAGE}:stable" "${DOCKERHUB_IMAGE}:stable"
+            # 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 latest tags..."
-            crane copy "${GHCR_IMAGE}:stable" "${GHCR_IMAGE}:latest"
-            crane copy "${GHCR_IMAGE}:latest" "${DOCKERHUB_IMAGE}:latest"
           fi
 
-      - name: Inspect manifests
+      - name: Inspect image
         run: |
-          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}"
+          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 }}

.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
@@ -87,7 +87,6 @@ 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
@@ -103,14 +102,14 @@ jobs:
           name: Nightly Build
 
       - name: Publish artifacts
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v5
         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

.github/workflows/playwright.yml

@@ -77,7 +77,7 @@ jobs:
 
       - name: Upload test report
         if: failure()
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v5
         with:
           name: e2e report ${{ matrix.arch }}
           path: apps/server-e2e/test-output

.github/workflows/release.yml

@@ -11,28 +11,8 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
-  sanity-check:
-    name: Sanity Check
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v6
-
-      - uses: pnpm/action-setup@v4
-      - 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:
@@ -90,19 +70,16 @@ 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@v7
+        uses: actions/upload-artifact@v5
         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:
@@ -123,7 +100,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v7
+        uses: actions/upload-artifact@v5
         with:
           name: release-server-linux-${{ matrix.arch }}
           path: upload/*.*
@@ -143,7 +120,7 @@ jobs:
             docs/Release Notes
 
       - name: Download all artifacts
-        uses: actions/download-artifact@v8
+        uses: actions/download-artifact@v6
         with:
           merge-multiple: true
           pattern: release-*

.github/workflows/web-clipper.yml

@@ -1,69 +0,0 @@
-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@v4
-      - 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.5.0
-        if: ${{ startsWith(github.ref, 'refs/tags/web-clipper-v') }}
-        with:
-          draft: false
-          fail_on_unmatched_files: true
-          files: apps/web-clipper/.output/*.zip
-          discussion_category_name: Releases
-          make_latest: false
-          token: ${{ secrets.RELEASE_PAT }}

.github/workflows/website.yml

@@ -34,7 +34,7 @@ jobs:
           cache: "pnpm"
 
       - name: Install dependencies
-        run: pnpm install --filter website --frozen-lockfile --ignore-scripts
+        run: pnpm install --filter website --frozen-lockfile
 
       - name: Build the website
         run: pnpm website:build

.gitignore

@@ -44,11 +44,9 @@ upload
 .rollup.cache
 *.tsbuildinfo
 
-/.direnv
 /result
 .svelte-kit
 
 # docs
 site/
-apps/*/coverage
-scripts/translation/.language*.json
+apps/*/coverage

.nvmrc

@@ -1 +1 @@
-24.14.0
+24.11.1

.vscode/launch.json

@@ -1,57 +0,0 @@
-{
-  "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

@@ -37,13 +37,7 @@
         "apps/server/src/assets/doc_notes/**": true,
         "apps/edit-docs/demo/**": true
     },
-    "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": "explicit"
-    },
     "eslint.rules.customizations": [
         { "rule": "*", "severity": "warn" }
-    ],
-    "cSpell.words": [
-      "Trilium"
     ]
-}
+}

README.md

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

SECURITY.md

@@ -10,5 +10,4 @@ Description above is a general rule and may be altered on case by case basis.
 
 ## Reporting a Vulnerability
 
-* For low severity vulnerabilities, they can be reported as GitHub issues.
-* For severe vulnerabilities, please report it using [GitHub Security Advisories](https://github.com/TriliumNext/Trilium/security/advisories).
+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)

apps/build-docs/package.json

@@ -1,28 +1,22 @@
 {
   "name": "build-docs",
   "version": "1.0.0",
-  "description": "Build documentation from Trilium notes",
+  "description": "",
   "main": "src/main.ts",
-  "bin": {
-    "trilium-build-docs": "dist/cli.js"
-  },
   "scripts": {
-    "start": "tsx .",
-    "cli": "tsx src/cli.ts",
-    "build": "tsx scripts/build.ts"
+    "start": "tsx ."
   },
   "keywords": [],
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.32.0",
+  "packageManager": "pnpm@10.24.0",
   "devDependencies": {
-    "@redocly/cli": "2.20.2",
+    "@redocly/cli": "2.12.3",
     "archiver": "7.0.1",
-    "fs-extra": "11.3.4",
-    "js-yaml": "4.1.1",
-    "react": "19.2.4",
-    "react-dom": "19.2.4",
-    "typedoc": "0.28.17",
+    "fs-extra": "11.3.2",
+    "react": "19.2.1",
+    "react-dom": "19.2.1",
+    "typedoc": "0.28.15",
     "typedoc-plugin-missing-exports": "4.1.2"
   }
 }

apps/build-docs/scripts/build.ts

@@ -1,23 +0,0 @@
-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,12 +13,8 @@
  * 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";
@@ -35,7 +31,6 @@ 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,90 +1,19 @@
 process.env.TRILIUM_INTEGRATION_TEST = "memory-no-store";
-// 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.TRILIUM_RESOURCE_DIR = "../server/src";
 process.env.NODE_ENV = "development";
 
 import cls from "@triliumnext/server/src/services/cls.js";
-import archiver from "archiver";
-import { execSync } from "child_process";
-import { WriteStream } from "fs";
+import { dirname, join, resolve } from "path";
 import * as fs from "fs/promises";
 import * as fsExtra from "fs-extra";
-import yaml from "js-yaml";
-import { dirname, join, resolve } from "path";
-
+import archiver from "archiver";
+import { WriteStream } from "fs";
+import { execSync } from "child_process";
 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);
 
@@ -92,18 +21,15 @@ 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
@@ -116,7 +42,7 @@ async function importAndExportDocs(sourcePath: string, outputSubDir: string) {
     }
 }
 
-async function buildDocsInner(config?: Config) {
+async function buildDocsInner() {
     const i18n = await import("@triliumnext/server/src/services/i18n.js");
     await i18n.initializeTranslations();
 
@@ -127,49 +53,18 @@ async function buildDocsInner(config?: Config) {
     const beccaLoader = await import("../../server/src/becca/becca_loader.js");
     await beccaLoader.beccaLoaded;
 
-    if (config) {
-        // Config-based build (reads from edit-docs-config.yaml)
-        console.log("Building documentation from config file...");
+    // Build User Guide
+    console.log("Building User Guide...");
+    await importAndExportDocs(join(__dirname, DOCS_ROOT, "User Guide"), "user-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);
-            }
-        }
+    // Build Developer Guide
+    console.log("Building Developer Guide...");
+    await importAndExportDocs(join(__dirname, DOCS_ROOT, "Developer Guide"), "developer-guide");
 
-        // 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"));
-    }
+    // 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!");
 }
@@ -196,13 +91,12 @@ 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 {
@@ -212,15 +106,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)) {
@@ -235,27 +129,6 @@ export async function extractZip(
     });
 }
 
-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

@@ -1,89 +0,0 @@
-#!/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,19 +13,16 @@
  * 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 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 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 - FrontendScriptApi is not directly exportable as Api without this simulation.
+//@ts-expect-error
 export const api: Api = new FrontendScriptApi();

apps/build-docs/src/main.ts

@@ -1,10 +1,9 @@
-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";
+import { cpSync, existsSync, mkdirSync, rmSync } from "fs";
+import buildDocs from "./build-docs";
+import buildScriptApi from "./script-api";
 
 const context: BuildContext = {
     gitRootDir: join(__dirname, "../../../"),

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

@@ -1,7 +1,6 @@
 import { execSync } from "child_process";
-import { join } from "path";
-
 import BuildContext from "./context";
+import { join } from "path";
 
 export default function buildScriptApi({ baseDir, gitRootDir }: BuildContext) {
     // Generate types

apps/build-docs/src/swagger.ts

@@ -1,8 +1,7 @@
+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;
@@ -28,9 +27,6 @@ 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,8 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
-  "include": [
-    "scripts/**/*.ts"
-  ],
+  "include": [],
   "references": [
     {
       "path": "../server"

apps/build-docs/typedoc.backend.json

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

apps/build-docs/typedoc.frontend.json

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

apps/client/index.html

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

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.102.1",
+  "version": "0.100.0",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -17,33 +17,24 @@
   },
   "dependencies": {
     "@excalidraw/excalidraw": "0.18.0",
-    "@fullcalendar/core": "6.1.20",
-    "@fullcalendar/daygrid": "6.1.20",
-    "@fullcalendar/interaction": "6.1.20",
-    "@fullcalendar/list": "6.1.20",
-    "@fullcalendar/multimonth": "6.1.20",
-    "@fullcalendar/rrule": "6.1.20",
-    "@fullcalendar/timegrid": "6.1.20",
+    "@fullcalendar/core": "6.1.19",
+    "@fullcalendar/daygrid": "6.1.19",
+    "@fullcalendar/interaction": "6.1.19",
+    "@fullcalendar/list": "6.1.19",
+    "@fullcalendar/multimonth": "6.1.19",
+    "@fullcalendar/timegrid": "6.1.19",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
-    "@mermaid-js/layout-elk": "0.2.1",
+    "@mermaid-js/layout-elk": "0.2.0",
     "@mind-elixir/node-menu": "5.0.1",
     "@popperjs/core": "2.11.8",
-    "@preact/signals": "2.8.2",
+    "@preact/signals": "2.5.1",
     "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
     "@triliumnext/split.js": "workspace:*",
-    "@univerjs/preset-sheets-conditional-formatting": "0.16.1",
-    "@univerjs/preset-sheets-core": "0.16.1",
-    "@univerjs/preset-sheets-data-validation": "0.16.1",
-    "@univerjs/preset-sheets-filter": "0.16.1",
-    "@univerjs/preset-sheets-find-replace": "0.16.1",
-    "@univerjs/preset-sheets-note": "0.16.1",
-    "@univerjs/preset-sheets-sort": "0.16.1",
-    "@univerjs/presets": "0.16.1",
-    "@zumer/snapdom": "2.1.0",
+    "@zumer/snapdom": "2.0.1",
     "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.8",
     "boxicons": "2.1.4",
@@ -51,46 +42,43 @@
     "color": "5.0.3",
     "debounce": "3.0.0",
     "draggabilly": "3.0.0",
-    "force-graph": "1.51.1",
-    "globals": "17.4.0",
-    "i18next": "25.8.17",
+    "force-graph": "1.51.0",
+    "globals": "16.5.0",
+    "i18next": "25.7.1",
     "i18next-http-backend": "3.0.2",
-    "jquery": "4.0.0",
+    "jquery": "3.7.1",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.38",
+    "katex": "0.16.27",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "17.0.4",
-    "mermaid": "11.12.3",
-    "mind-elixir": "5.9.3",
+    "marked": "17.0.1",
+    "mermaid": "11.12.2",
+    "mind-elixir": "5.3.7",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
-    "preact": "10.29.0",
-    "react-i18next": "16.5.6",
-    "react-window": "2.2.7",
+    "preact": "10.28.0",
+    "react-i18next": "16.4.0",
     "reveal.js": "5.2.1",
-    "rrule": "2.8.1",
     "svg-pan-zoom": "3.6.2",
-    "tabulator-tables": "6.4.0",
+    "tabulator-tables": "6.3.1",
     "vanilla-js-wheel-zoom": "9.0.4"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-inspector": "5.0.0",
-    "@prefresh/vite": "2.4.12",
+    "@preact/preset-vite": "2.10.2",
     "@types/bootstrap": "5.2.10",
-    "@types/jquery": "4.0.0",
+    "@types/jquery": "3.5.33",
     "@types/leaflet": "1.9.21",
     "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
     "@types/reveal.js": "5.2.2",
-    "@types/tabulator-tables": "6.3.1",
-    "copy-webpack-plugin": "14.0.0",
-    "happy-dom": "20.8.3",
-    "lightningcss": "1.32.0",
+    "@types/tabulator-tables": "6.3.0",
+    "copy-webpack-plugin": "13.0.1",
+    "happy-dom": "20.0.11",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.2.0"
+    "vite-plugin-static-copy": "3.1.4"
   }
 }

apps/client/src/components/app_context.ts

@@ -1,41 +1,40 @@
-import type { CKTextEditor } from "@triliumnext/ckeditor5";
-import type CodeMirror from "@triliumnext/codemirror";
-import { SqlExecuteResponse } from "@triliumnext/commons";
-import type { NativeImage, TouchBar } from "electron";
-import { ColumnComponent } from "tabulator-tables";
-
-import type { Attribute } from "../services/attribute_parser.js";
 import froca from "../services/froca.js";
-import { initLocale, t } from "../services/i18n.js";
+import RootCommandExecutor from "./root_command_executor.js";
+import Entrypoints from "./entrypoints.js";
+import options from "../services/options.js";
+import utils, { hasTouchBar } from "../services/utils.js";
+import zoomComponent from "./zoom.js";
+import TabManager from "./tab_manager.js";
+import Component from "./component.js";
 import keyboardActionsService from "../services/keyboard_actions.js";
 import linkService, { type ViewScope } from "../services/link.js";
-import type LoadResults from "../services/load_results.js";
-import type { CreateNoteOpts } from "../services/note_create.js";
-import options from "../services/options.js";
-import toast from "../services/toast.js";
-import utils, { hasTouchBar } from "../services/utils.js";
-import { ReactWrappedWidget } from "../widgets/basic_widget.js";
-import type RootContainer from "../widgets/containers/root_container.js";
-import { AddLinkOpts } from "../widgets/dialogs/add_link.jsx";
-import type { ConfirmWithMessageOptions, ConfirmWithTitleOptions } from "../widgets/dialogs/confirm.js";
-import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
-import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
-import type { InfoProps } from "../widgets/dialogs/info.jsx";
-import type { MarkdownImportOpts } from "../widgets/dialogs/markdown_import.jsx";
-import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
-import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
-import type NoteTreeWidget from "../widgets/note_tree.js";
-import Component from "./component.js";
-import Entrypoints from "./entrypoints.js";
-import MainTreeExecutors from "./main_tree_executors.js";
 import MobileScreenSwitcherExecutor, { type Screen } from "./mobile_screen_switcher.js";
-import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
-import RootCommandExecutor from "./root_command_executor.js";
+import MainTreeExecutors from "./main_tree_executors.js";
+import toast from "../services/toast.js";
 import ShortcutComponent from "./shortcut_component.js";
-import { StartupChecks } from "./startup_checks.js";
-import TabManager from "./tab_manager.js";
+import { t, initLocale } from "../services/i18n.js";
+import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
+import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
+import type { ConfirmWithMessageOptions, ConfirmWithTitleOptions } from "../widgets/dialogs/confirm.js";
+import type LoadResults from "../services/load_results.js";
+import type { Attribute } from "../services/attribute_parser.js";
+import type NoteTreeWidget from "../widgets/note_tree.js";
+import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
+import type { NativeImage, TouchBar } from "electron";
 import TouchBarComponent from "./touch_bar.js";
-import zoomComponent from "./zoom.js";
+import type { CKTextEditor } from "@triliumnext/ckeditor5";
+import type CodeMirror from "@triliumnext/codemirror";
+import { StartupChecks } from "./startup_checks.js";
+import type { CreateNoteOpts } from "../services/note_create.js";
+import { ColumnComponent } from "tabulator-tables";
+import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
+import type RootContainer from "../widgets/containers/root_container.js";
+import { SqlExecuteResults } from "@triliumnext/commons";
+import { AddLinkOpts } from "../widgets/dialogs/add_link.jsx";
+import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
+import { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import type { MarkdownImportOpts } from "../widgets/dialogs/markdown_import.jsx";
+import type { InfoProps } from "../widgets/dialogs/info.jsx";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootContainer;
@@ -101,6 +100,8 @@ export type CommandMappings = {
     showRevisions: CommandData & {
         noteId?: string | null;
     };
+    showLlmChat: CommandData;
+    createAiChat: CommandData;
     showOptions: CommandData & {
         section: string;
     };
@@ -152,7 +153,6 @@ export type CommandMappings = {
     };
     openInTab: ContextMenuCommandData;
     openNoteInSplit: ContextMenuCommandData;
-    openNoteInWindow: ContextMenuCommandData;
     openNoteInPopup: ContextMenuCommandData;
     toggleNoteHoisting: ContextMenuCommandData;
     insertNoteAfter: ContextMenuCommandData;
@@ -265,7 +265,7 @@ export type CommandMappings = {
 
     reEvaluateRightPaneVisibility: CommandData;
     runActiveNote: CommandData;
-    scrollContainerTo: CommandData & {
+    scrollContainerToCommand: CommandData & {
         position: number;
     };
     scrollToEnd: CommandData;
@@ -381,8 +381,7 @@ export type CommandMappings = {
     reloadTextEditor: CommandData;
     chooseNoteType: CommandData & {
         callback: ChooseNoteTypeCallback
-    };
-    customDownload: CommandData;
+    }
 };
 
 type EventMappings = {
@@ -408,7 +407,7 @@ type EventMappings = {
     addNewLabel: CommandData;
     addNewRelation: CommandData;
     sqlQueryResults: CommandData & {
-        response: SqlExecuteResponse;
+        results: SqlExecuteResults;
     };
     readOnlyTemporarilyDisabled: {
         noteContext: NoteContext;
@@ -448,7 +447,6 @@ type EventMappings = {
     };
     searchRefreshed: { ntxId?: string | null };
     textEditorRefreshed: { ntxId?: string | null, editor: CKTextEditor };
-    contentElRefreshed: { ntxId?: string | null, contentEl: HTMLElement };
     hoistedNoteChanged: {
         noteId: string;
         ntxId: string | null;
@@ -473,11 +471,6 @@ type EventMappings = {
     noteContextRemoved: {
         ntxIds: string[];
     };
-    contextDataChanged: {
-        noteContext: NoteContext;
-        key: string;
-        value: unknown;
-    };
     exportSvg: { ntxId: string | null | undefined; };
     exportPng: { ntxId: string | null | undefined; };
     geoMapCreateChildNote: {
@@ -505,10 +498,6 @@ type EventMappings = {
         noteIds: string[];
     };
     refreshData: { ntxId: string | null | undefined };
-    contentSafeMarginChanged: {
-        top: number;
-        noteContext: NoteContext;
-    }
 };
 
 export type EventListener<T extends EventNames> = {
@@ -702,8 +691,10 @@ $(window).on("beforeunload", () => {
                 console.log(`Component ${component.componentId} is not finished saving its state.`);
                 allSaved = false;
             }
-        } else if (!listener()) {
-            allSaved = false;
+        } else {
+            if (!listener()) {
+                allSaved = false;
+            }
         }
     }
 
@@ -713,7 +704,7 @@ $(window).on("beforeunload", () => {
     }
 });
 
-$(window).on("hashchange", () => {
+$(window).on("hashchange", function () {
     const { notePath, ntxId, viewScope, searchString } = linkService.parseNavigationStateFromUrl(window.location.href);
 
     if (notePath || ntxId) {

apps/client/src/components/component.ts

@@ -57,18 +57,6 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
         return this;
     }
 
-    /**
-     * Removes a child component from this component's children array.
-     * This is used for cleanup when a widget is unmounted to prevent event listener accumulation.
-     */
-    removeChild(component: ChildT) {
-        const index = this.children.indexOf(component);
-        if (index !== -1) {
-            this.children.splice(index, 1);
-            component.parent = undefined;
-        }
-    }
-
     handleEvent<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null | undefined {
         try {
             const callMethodPromise = this.initialized ? this.initialized.then(() => this.callMethod((this as any)[`${name}Event`], data)) : this.callMethod((this as any)[`${name}Event`], data);
@@ -77,8 +65,8 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
 
             // don't create promises if not needed (optimization)
             return callMethodPromise && childrenPromise ? Promise.all([callMethodPromise, childrenPromise]) : callMethodPromise || childrenPromise;
-        } catch (e: unknown) {
-            console.error(`Handling of event '${name}' failed in ${this.constructor.name} with error`, e);
+        } catch (e: any) {
+            console.error(`Handling of event '${name}' failed in ${this.constructor.name} with error ${e.message} ${e.stack}`);
 
             return null;
         }

apps/client/src/components/entrypoints.ts

@@ -1,17 +1,16 @@
-import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
-
-import bundleService from "../services/bundle.js";
+import utils from "../services/utils.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() {
@@ -188,8 +187,13 @@ 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 response = await server.post<SqlExecuteResponse>(`sql/execute/${note.noteId}`);
-            await appContext.triggerEvent("sqlQueryResults", { ntxId, response });
+            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 });
         }
 
         toastService.showMessage(t("entrypoints.note-executed"));

apps/client/src/components/note_context.ts

@@ -1,20 +1,18 @@
-import type { CKTextEditor } from "@triliumnext/ckeditor5";
-import type CodeMirror from "@triliumnext/codemirror";
-
-import type FNote from "../entities/fnote.js";
-import { closeActiveDialog } from "../services/dialog.js";
-import froca from "../services/froca.js";
-import hoistedNoteService from "../services/hoisted_note.js";
-import type { ViewScope } from "../services/link.js";
-import options from "../services/options.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import server from "../services/server.js";
-import treeService from "../services/tree.js";
 import utils from "../services/utils.js";
-import { ReactWrappedWidget } from "../widgets/basic_widget.js";
-import type { HeadingContext } from "../widgets/sidebar/TableOfContents.js";
 import appContext, { type EventData, type EventListener } from "./app_context.js";
+import treeService from "../services/tree.js";
 import Component from "./component.js";
+import froca from "../services/froca.js";
+import hoistedNoteService from "../services/hoisted_note.js";
+import options from "../services/options.js";
+import type { ViewScope } from "../services/link.js";
+import type FNote from "../entities/fnote.js";
+import type { CKTextEditor } from "@triliumnext/ckeditor5";
+import type CodeMirror from "@triliumnext/codemirror";
+import { closeActiveDialog } from "../services/dialog.js";
+import { ReactWrappedWidget } from "../widgets/basic_widget.js";
 
 export interface SetNoteOpts {
     triggerSwitchEvent?: unknown;
@@ -23,31 +21,6 @@ export interface SetNoteOpts {
 
 export type GetTextEditorCallback = (editor: CKTextEditor) => void;
 
-export type SaveState = "saved" | "saving" | "unsaved" | "error";
-
-export interface NoteContextDataMap {
-    toc: HeadingContext;
-    pdfPages: {
-        totalPages: number;
-        currentPage: number;
-        scrollToPage(page: number): void;
-        requestThumbnail(page: number): void;
-    };
-    pdfAttachments: {
-        attachments: PdfAttachment[];
-        downloadAttachment(filename: string): void;
-    };
-    pdfLayers: {
-        layers: PdfLayer[];
-        toggleLayer(layerId: string, visible: boolean): void;
-    };
-    saveState: {
-        state: SaveState;
-    };
-}
-
-type ContextDataKey = keyof NoteContextDataMap;
-
 class NoteContext extends Component implements EventListener<"entitiesReloaded"> {
     ntxId: string | null;
     hoistedNoteId: string;
@@ -58,13 +31,6 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     parentNoteId?: string | null;
     viewScope?: ViewScope;
 
-    /**
-     * Metadata storage for UI components (e.g., table of contents, PDF page list, code outline).
-     * This allows type widgets to publish data that sidebar/toolbar components can consume.
-     * Data is automatically cleared when navigating to a different note.
-     */
-    private contextData: Map<string, unknown> = new Map();
-
     constructor(ntxId: string | null = null, hoistedNoteId: string = "root", mainNtxId: string | null = null) {
         super();
 
@@ -124,22 +90,6 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
         this.viewScope = opts.viewScope;
         ({ noteId: this.noteId, parentNoteId: this.parentNoteId } = treeService.getNoteIdAndParentIdFromUrl(resolvedNotePath));
 
-        // Clear context data when switching notes and notify subscribers
-        const oldKeys = Array.from(this.contextData.keys());
-        this.contextData.clear();
-        if (oldKeys.length > 0) {
-            // Notify subscribers asynchronously to avoid blocking navigation
-            window.setTimeout(() => {
-                for (const key of oldKeys) {
-                    this.triggerEvent("contextDataChanged", {
-                        noteContext: this,
-                        key,
-                        value: undefined
-                    });
-                }
-            }, 0);
-        }
-
         this.saveToRecentNotes(resolvedNotePath);
 
         protectedSessionHolder.touchProtectedSessionIfNecessary(this.note);
@@ -439,7 +389,7 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
      * If no content could be determined `null` is returned instead.
      */
     async getContentElement() {
-        return this.timeout<JQuery<HTMLElement> | null>(
+        return this.timeout<JQuery<HTMLElement>>(
             new Promise((resolve) =>
                 appContext.triggerCommand("executeWithContentElement", {
                     resolve,
@@ -492,52 +442,6 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
         return title;
     }
-
-    /**
-     * Set metadata for this note context (e.g., table of contents, PDF pages, code outline).
-     * This data can be consumed by sidebar/toolbar components.
-     *
-     * @param key - Unique identifier for the data type (e.g., "toc", "pdfPages", "codeOutline")
-     * @param value - The data to store (will be cleared when switching notes)
-     */
-    setContextData<K extends ContextDataKey>(key: K, value: NoteContextDataMap[K]): void {
-        this.contextData.set(key, value);
-        // Trigger event so subscribers can react
-        this.triggerEvent("contextDataChanged", {
-            noteContext: this,
-            key,
-            value
-        });
-    }
-
-    /**
-     * Get metadata for this note context.
-     *
-     * @param key - The data key to retrieve
-     * @returns The stored data, or undefined if not found
-     */
-    getContextData<K extends ContextDataKey>(key: K): NoteContextDataMap[K] | undefined {
-        return this.contextData.get(key) as NoteContextDataMap[K] | undefined;
-    }
-
-    /**
-     * Check if context data exists for a given key.
-     */
-    hasContextData(key: ContextDataKey): boolean {
-        return this.contextData.has(key);
-    }
-
-    /**
-     * Clear specific context data.
-     */
-    clearContextData(key: ContextDataKey): void {
-        this.contextData.delete(key);
-        this.triggerEvent("contextDataChanged", {
-            noteContext: this,
-            key,
-            value: undefined
-        });
-    }
 }
 
 export function openInCurrentNoteContext(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, notePath: string, viewScope?: ViewScope) {

apps/client/src/components/root_command_executor.ts

@@ -1,12 +1,14 @@
-import dateNoteService from "../services/date_notes.js";
-import froca from "../services/froca.js";
-import openService from "../services/open.js";
-import options from "../services/options.js";
-import protectedSessionService from "../services/protected_session.js";
-import treeService from "../services/tree.js";
-import utils, { openInReusableSplit } from "../services/utils.js";
-import appContext, { type CommandListenerData } from "./app_context.js";
 import Component from "./component.js";
+import appContext, { type CommandData, type CommandListenerData } from "./app_context.js";
+import dateNoteService from "../services/date_notes.js";
+import treeService from "../services/tree.js";
+import openService from "../services/open.js";
+import protectedSessionService from "../services/protected_session.js";
+import options from "../services/options.js";
+import froca from "../services/froca.js";
+import utils from "../services/utils.js";
+import toastService from "../services/toast.js";
+import noteCreateService from "../services/note_create.js";
 
 export default class RootCommandExecutor extends Component {
     editReadOnlyNoteCommand() {
@@ -191,19 +193,6 @@ export default class RootCommandExecutor extends Component {
         appContext.triggerEvent("zenModeChanged", { isEnabled });
     }
 
-    async toggleRibbonTabNoteMapCommand(data: CommandListenerData<"toggleRibbonTabNoteMap">) {
-        const { isExperimentalFeatureEnabled } = await import("../services/experimental_features.js");
-        const isNewLayout = isExperimentalFeatureEnabled("new-layout");
-        if (!isNewLayout) {
-            this.triggerEvent("toggleRibbonTabNoteMap", data);
-            return;
-        }
-
-        const activeContext = appContext.tabManager.getActiveContext();
-        if (!activeContext?.notePath) return;
-        openInReusableSplit(activeContext.notePath, "note-map");
-    }
-
     firstTabCommand() {
         this.#goToTab(1);
     }
@@ -246,4 +235,34 @@ export default class RootCommandExecutor extends Component {
         }
     }
 
+    async createAiChatCommand() {
+        try {
+            // Create a new AI Chat note at the root level
+            const rootNoteId = "root";
+
+            const result = await noteCreateService.createNote(rootNoteId, {
+                title: "New AI Chat",
+                type: "aiChat",
+                content: JSON.stringify({
+                    messages: [],
+                    title: "New AI Chat"
+                })
+            });
+
+            if (!result.note) {
+                toastService.showError("Failed to create AI Chat note");
+                return;
+            }
+
+            await appContext.tabManager.openTabWithNoteWithHoisting(result.note.noteId, {
+                activate: true
+            });
+
+            toastService.showMessage("Created new AI Chat note");
+        }
+        catch (e) {
+            console.error("Error creating AI Chat note:", e);
+            toastService.showError("Failed to create AI Chat note: " + (e as Error).message);
+        }
+    }
 }

apps/client/src/desktop.ts

@@ -1,18 +1,17 @@
-import "autocomplete.js/index_jquery.js";
-
-import type ElectronRemote from "@electron/remote";
-import type Electron from "electron";
-
 import appContext from "./components/app_context.js";
-import electronContextMenu from "./menus/electron_context_menu.js";
+import utils from "./services/utils.js";
+import noteTooltipService from "./services/note_tooltip.js";
 import bundleService from "./services/bundle.js";
+import toastService from "./services/toast.js";
+import noteAutocompleteService from "./services/note_autocomplete.js";
+import electronContextMenu from "./menus/electron_context_menu.js";
 import glob from "./services/glob.js";
 import { t } from "./services/i18n.js";
-import noteAutocompleteService from "./services/note_autocomplete.js";
-import noteTooltipService from "./services/note_tooltip.js";
 import options from "./services/options.js";
-import toastService from "./services/toast.js";
-import utils from "./services/utils.js";
+import type ElectronRemote from "@electron/remote";
+import type Electron from "electron";
+import "boxicons/css/boxicons.min.css";
+import "autocomplete.js/index_jquery.js";
 
 await appContext.earlyInit();
 
@@ -46,6 +45,10 @@ 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));
@@ -95,22 +98,15 @@ 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);
-        }
-    }
 }
 
 /**
@@ -130,3 +126,20 @@ 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,24 +1,41 @@
-import { getNoteIcon } from "@triliumnext/commons";
-
-import cssClassManager from "../services/css_class_manager.js";
-import type { Froca } from "../services/froca-interface.js";
+import server from "../services/server.js";
 import noteAttributeCache from "../services/note_attribute_cache.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
-import search from "../services/search.js";
-import server from "../services/server.js";
-import utils from "../services/utils.js";
+import cssClassManager from "../services/css_class_manager.js";
+import type { Froca } from "../services/froca-interface.js";
 import type FAttachment from "./fattachment.js";
-import type { AttributeType, default as FAttribute } from "./fattribute.js";
+import type { default as FAttribute, AttributeType } from "./fattribute.js";
+import utils from "../services/utils.js";
+import search from "../services/search.js";
 
 const LABEL = "label";
 const RELATION = "relation";
 
+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" | "spreadsheet";
+export type NoteType = "file" | "image" | "search" | "noteMap" | "launcher" | "doc" | "contentWidget" | "text" | "relationMap" | "render" | "canvas" | "mermaid" | "book" | "webView" | "code" | "mindMap" | "aiChat";
 
 export interface NotePathRecord {
     isArchived: boolean;
@@ -251,12 +268,13 @@ export default class FNote {
                 }
             }
             return results;
+        } else {
+            return this.children;
         }
-        return this.children;
     }
 
     async getSubtreeNoteIds(includeArchived = false) {
-        const noteIds: (string | string[])[] = [];
+        let noteIds: (string | string[])[] = [];
         for (const child of await this.getChildNotes()) {
             if (child.isArchived && !includeArchived) continue;
 
@@ -453,8 +471,9 @@ export default class FNote {
                 return a.isHidden ? 1 : -1;
             } else if (a.isSearch !== b.isSearch) {
                 return a.isSearch ? 1 : -1;
+            } else {
+                return a.notePath.length - b.notePath.length;
             }
-            return a.notePath.length - b.notePath.length;
         });
 
         return notePaths;
@@ -566,15 +585,26 @@ export default class FNote {
         const iconClassLabels = this.getLabels("iconClass");
         const workspaceIconClass = this.getWorkspaceIconClass();
 
-        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}`;
+        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";
+            } else {
+                return "bx bx-note";
+            }
+        } else if (this.type === "code" && this.mime.startsWith("text/x-sql")) {
+            return "bx bx-data";
+        } else {
+            return NOTE_TYPE_ICONS[this.type];
+        }
     }
 
     getColorClass() {
@@ -583,13 +613,11 @@ export default class FNote {
     }
 
     isFolder() {
-        if (this.isLabelTruthy("subtreeHidden")) return false;
-        if (this.type === "search") return true;
-        return this.getFilteredChildBranches().length > 0;
+        return this.type === "search" || this.getFilteredChildBranches().length > 0;
     }
 
     getFilteredChildBranches() {
-        const childBranches = this.getChildBranches();
+        let childBranches = this.getChildBranches();
 
         if (!childBranches) {
             console.error(`No children for '${this.noteId}'. This shouldn't happen.`);
@@ -700,15 +728,6 @@ export default class FNote {
         return this.hasAttribute(LABEL, name);
     }
 
-    /**
-     * Returns `true` if the note has a label with the given name (same as {@link hasOwnedLabel}), or it has a label with the `disabled:` prefix (for example due to a safe import).
-     * @param name the name of the label to look for.
-     * @returns `true` if the label exists, or its version with the `disabled:` prefix.
-     */
-    hasLabelOrDisabled(name: string) {
-        return this.hasLabel(name) || this.hasLabel(`disabled:${name}`);
-    }
-
     /**
      * @param name - label name
      * @returns true if label exists (including inherited) and does not have "false" value.
@@ -792,9 +811,9 @@ export default class FNote {
             return this.getLabelValue(nameWithPrefix.substring(1));
         } else if (nameWithPrefix.startsWith("~")) {
             return this.getRelationValue(nameWithPrefix.substring(1));
+        } else {
+            return this.getLabelValue(nameWithPrefix);
         }
-        return this.getLabelValue(nameWithPrefix);
-
     }
 
     /**
@@ -859,10 +878,10 @@ export default class FNote {
         promotedAttrs.sort((a, b) => {
             if (a.noteId === b.noteId) {
                 return a.position < b.position ? -1 : 1;
+            } else {
+                // inherited promoted attributes should stay grouped: https://github.com/zadam/trilium/issues/3761
+                return a.noteId < b.noteId ? -1 : 1;
             }
-            // inherited promoted attributes should stay grouped: https://github.com/zadam/trilium/issues/3761
-            return a.noteId < b.noteId ? -1 : 1;
-
         });
 
         return promotedAttrs;
@@ -974,10 +993,6 @@ export default class FNote {
         );
     }
 
-    isJsx() {
-        return (this.type === "code" && this.mime === "text/jsx");
-    }
-
     /** @returns true if this note is HTML */
     isHtml() {
         return (this.type === "code" || this.type === "file" || this.type === "render") && this.mime === "text/html";
@@ -985,7 +1000,7 @@ export default class FNote {
 
     /** @returns JS script environment - either "frontend" or "backend" */
     getScriptEnv() {
-        if (this.isHtml() || (this.isJavaScript() && this.mime.endsWith("env=frontend")) || this.isJsx()) {
+        if (this.isHtml() || (this.isJavaScript() && this.mime.endsWith("env=frontend"))) {
             return "frontend";
         }
 
@@ -1007,7 +1022,7 @@ export default class FNote {
      * @returns a promise that resolves when the script has been run. Additionally, for front-end notes, the promise will contain the value that is returned by the script.
      */
     async executeScript() {
-        if (!(this.isJavaScript() || this.isJsx())) {
+        if (!this.isJavaScript()) {
             throw new Error(`Note ${this.noteId} is of type ${this.type} and mime ${this.mime} and thus cannot be executed`);
         }
 

apps/client/src/index.ts

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

apps/client/src/layouts/desktop_layout.tsx

@@ -1,57 +1,51 @@
-import type { AppContext } from "../components/app_context.js";
-import type { WidgetsByParent } from "../services/bundle.js";
-import { isExperimentalFeatureEnabled } from "../services/experimental_features.js";
-import options from "../services/options.js";
-import utils from "../services/utils.js";
+import { applyModals } from "./layout_commons.js";
+import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
 import ApiLog from "../widgets/api_log.jsx";
 import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
+import CloseZenModeButton from "../widgets/close_zen_button.jsx";
+import ContentHeader from "../widgets/containers/content_header.js";
 import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
+import FindWidget from "../widgets/find.js";
+import FlexContainer from "../widgets/containers/flex_container.js";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
 import GlobalMenu from "../widgets/buttons/global_menu.jsx";
+import HighlightsListWidget from "../widgets/highlights_list.js";
+import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
 import MovePaneButton from "../widgets/buttons/move_pane_button.js";
-import RightPaneToggle from "../widgets/buttons/right_pane_toggle.jsx";
-import CloseZenModeButton from "../widgets/close_zen_button.jsx";
-import NoteList from "../widgets/collections/NoteList.jsx";
-import ContentHeader from "../widgets/containers/content_header.js";
-import FlexContainer from "../widgets/containers/flex_container.js";
-import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
-import RightPaneContainer from "../widgets/containers/right_pane_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 PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
-import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
-import FindWidget from "../widgets/find.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
-import HighlightsListWidget from "../widgets/highlights_list.js";
-import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
-import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
-import InlineTitle from "../widgets/layout/InlineTitle.jsx";
-import NoteBadges from "../widgets/layout/NoteBadges.jsx";
-import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
-import StatusBar from "../widgets/layout/StatusBar.jsx";
 import NoteIconWidget from "../widgets/note_icon.jsx";
+import NoteList from "../widgets/collections/NoteList.jsx";
 import NoteTitleWidget from "../widgets/note_title.jsx";
 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 options from "../services/options.js";
+import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import { FixedFormattingToolbar } from "../widgets/ribbon/FormattingToolbar.jsx";
-import NoteActions from "../widgets/ribbon/NoteActions.jsx";
 import Ribbon from "../widgets/ribbon/Ribbon.jsx";
+import RightPaneContainer from "../widgets/containers/right_pane_container.js";
+import RootContainer from "../widgets/containers/root_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 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 SplitNoteContainer from "../widgets/containers/split_note_container.js";
+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";
 import TocWidget from "../widgets/toc.js";
+import type { AppContext } from "../components/app_context.js";
+import type { WidgetsByParent } from "../services/bundle.js";
+import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
+import utils from "../services/utils.js";
 import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
-import { applyModals } from "./layout_commons.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
+import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
+import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
+import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import Breadcrumb from "../widgets/Breadcrumb.jsx";
+import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 
 export default class DesktopLayout {
 
@@ -77,11 +71,10 @@ export default class DesktopLayout {
          */
         const fullWidthTabBar = launcherPaneIsHorizontal || (isElectron && !hasNativeTitleBar && isMac);
         const customTitleBarButtons = !hasNativeTitleBar && !isMac && !isWindows;
-        const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
         const rootContainer = new RootContainer(true)
             .setParent(appContext)
-            .class(`${launcherPaneIsHorizontal ? "horizontal" : "vertical"  }-layout`)
+            .class((launcherPaneIsHorizontal ? "horizontal" : "vertical") + "-layout")
             .optChild(
                 fullWidthTabBar,
                 new FlexContainer("row")
@@ -90,7 +83,6 @@ export default class DesktopLayout {
                     .optChild(launcherPaneIsHorizontal, <LeftPaneToggle isHorizontalLayout={true} />)
                     .child(<TabHistoryNavigationButtons />)
                     .child(new TabRowWidget().class("full-width"))
-                    .optChild(isNewLayout, <RightPaneToggle />)
                     .optChild(customTitleBarButtons, <TitleBarButtons />)
                     .css("height", "40px")
                     .css("background-color", "var(--launcher-pane-background-color)")
@@ -114,15 +106,10 @@ export default class DesktopLayout {
                             .css("flex-grow", "1")
                             .optChild(!fullWidthTabBar,
                                 new FlexContainer("row")
-                                    .class("tab-row-container")
                                     .child(<TabHistoryNavigationButtons />)
                                     .child(new TabRowWidget())
-                                    .optChild(isNewLayout, <RightPaneToggle />)
                                     .optChild(customTitleBarButtons, <TitleBarButtons />)
-                                    .css("height", "40px")
-                                    .css("align-items", "center")
-                            )
-                            .optChild(isNewLayout, <FixedFormattingToolbar />)
+                                    .css("height", "40px"))
                             .child(
                                 new FlexContainer("row")
                                     .filling()
@@ -136,56 +123,63 @@ export default class DesktopLayout {
                                             .child(
                                                 new SplitNoteContainer(() =>
                                                     new NoteWrapperWidget()
-                                                        .child(new FlexContainer("row")
-                                                            .class("title-row note-split-title")
-                                                            .cssBlock(".title-row > * { margin: 5px; }")
-                                                            .child(<NoteIconWidget />)
-                                                            .child(<NoteTitleWidget />)
-                                                            .optChild(isNewLayout, <NoteBadges />)
-                                                            .child(<SpacerWidget baseSize={0} growthFactor={1} />)
-                                                            .optChild(!isNewLayout, <MovePaneButton direction="left" />)
-                                                            .optChild(!isNewLayout, <MovePaneButton direction="right" />)
-                                                            .optChild(!isNewLayout, <ClosePaneButton />)
-                                                            .optChild(!isNewLayout, <CreatePaneButton />)
-                                                            .optChild(isNewLayout, <NoteActions />))
-                                                        .optChild(!isNewLayout, <Ribbon />)
+                                                        .child(
+                                                            new FlexContainer("row")
+                                                                .class("breadcrumb-row")
+                                                                .css("height", "30px")
+                                                                .css("min-height", "30px")
+                                                                .css("align-items", "center")
+                                                                .css("padding", "10px")
+                                                                .cssBlock(".breadcrumb-row > * { margin: 5px; }")
+                                                                .child(<Breadcrumb />)
+                                                                .child(<SpacerWidget baseSize={0} growthFactor={1} />)
+                                                                .child(<MovePaneButton direction="left" />)
+                                                                .child(<MovePaneButton direction="right" />)
+                                                                .child(<ClosePaneButton />)
+                                                                .child(<CreatePaneButton />)
+                                                        )
                                                         .child(new WatchedFileUpdateStatusWidget())
-                                                        .optChild(!isNewLayout, <FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
+                                                        .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
                                                         .child(
                                                             new ScrollingContainer()
                                                                 .filling()
-                                                                .optChild(isNewLayout, <InlineTitle />)
-                                                                .optChild(isNewLayout, <NoteTitleActions />)
-                                                                .optChild(!isNewLayout, new ContentHeader()
+                                                                .child(new ContentHeader()
+                                                                    .child(new FlexContainer("row")
+                                                                        .class("title-row")
+                                                                        .child(<NoteIconWidget />)
+                                                                        .child(<NoteTitleWidget />)
+                                                                    )
                                                                     .child(<ReadOnlyNoteInfoBar />)
                                                                     .child(<SharedInfo />)
                                                                 )
-                                                                .optChild(!isNewLayout, <PromotedAttributes />)
+                                                                .child(<Ribbon />)
+                                                                .child(<PromotedAttributes />)
+                                                                .child(<SqlTableSchemas />)
                                                                 .child(<NoteDetail />)
                                                                 .child(<NoteList media="screen" />)
                                                                 .child(<SearchResult />)
+                                                                .child(<SqlResults />)
                                                                 .child(<ScrollPadding />)
                                                         )
                                                         .child(<ApiLog />)
                                                         .child(new FindWidget())
-                                                        .child(...this.customWidgets.get("note-detail-pane"))
+                                                        .child(
+                                                            ...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC
+                                                            ...this.customWidgets.get("note-detail-pane")
+                                                        )
                                                 )
                                             )
                                             .child(...this.customWidgets.get("center-pane"))
-
                                     )
-                                    .optChild(!isNewLayout,
+                                    .child(
                                         new RightPaneContainer()
                                             .child(new TocWidget())
                                             .child(new HighlightsListWidget())
                                             .child(...this.customWidgets.get("right-pane"))
                                     )
-                                    .optChild(isNewLayout, <RightPanelContainer widgetsByParent={this.customWidgets} />)
                             )
-                            .optChild(!launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
                     )
             )
-            .optChild(launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
             .child(<CloseZenModeButton />)
 
             // Desktop-specific dialogs.

apps/client/src/layouts/layout_commons.tsx

@@ -52,5 +52,5 @@ export function applyModals(rootContainer: RootContainer) {
         .child(<IncorrectCpuArchDialog />)
         .child(<PopupEditorDialog />)
         .child(<CallToActionDialog />)
-        .child(<ToastContainer />);
+        .child(<ToastContainer />)
 }

apps/client/src/layouts/mobile_layout.css

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

apps/client/src/menus/context_menu.ts

@@ -1,9 +1,8 @@
 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;
@@ -63,17 +62,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());
@@ -92,7 +91,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();
@@ -141,14 +140,16 @@ 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 {
-            left = this.options.x - CONTEXT_MENU_OFFSET;
+            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;
+            }
         }
 
         this.$widget
@@ -248,7 +249,7 @@ class ContextMenu {
         if ("uiIcon" in item || "checked" in item) {
             const icon = (item.checked ? "bx bx-check" : item.uiIcon);
             if (icon) {
-                $icon.addClass([icon, "tn-icon"]);
+                $icon.addClass(icon);
             } else {
                 $icon.append("&nbsp;");
             }
@@ -260,7 +261,7 @@ class ContextMenu {
             .append(item.title);
 
         if ("badges" in item && item.badges) {
-            for (const badge of item.badges) {
+            for (let badge of item.badges) {
                 const badgeElement = $(`<span class="badge">`).text(badge.title);
 
                 if (badge.className) {
@@ -351,7 +352,7 @@ class ContextMenu {
     async hide() {
         this.options?.onHide?.();
         this.$widget.removeClass("show");
-        this.$cover?.removeClass("show");
+        this.$cover.removeClass("show");
         $("body").removeClass("context-menu-shown");
         this.$widget.hide();
     }

apps/client/src/menus/electron_context_menu.ts

@@ -3,8 +3,6 @@ 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";
 
@@ -62,33 +60,6 @@ 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 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 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 { SelectMenuItemEventListener } from "../components/events.js";
+import type NoteTreeWidget from "../widgets/note_tree.js";
+import type { FilteredCommandNames, ContextMenuCommandData } from "../components/app_context.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" || note?.noteId === "_lbMobileVisibleLaunchers";
-        const isAvailableRoot = note?.noteId === "_lbAvailableLaunchers" || note?.noteId === "_lbMobileAvailableLaunchers";
+        const isVisibleRoot = note?.noteId === "_lbVisibleLaunchers";
+        const isAvailableRoot = note?.noteId === "_lbAvailableLaunchers";
         const isVisibleItem = parentNoteId === "_lbVisibleLaunchers" || parentNoteId === "_lbMobileVisibleLaunchers";
         const isAvailableItem = parentNoteId === "_lbAvailableLaunchers" || parentNoteId === "_lbMobileAvailableLaunchers";
         const isItem = isVisibleItem || isAvailableItem;

apps/client/src/menus/link_context_menu.ts

@@ -1,11 +1,10 @@
-import type { LeafletMouseEvent } from "leaflet";
-
-import appContext, { type CommandNames } from "../components/app_context.js";
 import { t } from "../services/i18n.js";
+import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
+import appContext, { type CommandNames } from "../components/app_context.js";
 import type { ViewScope } from "../services/link.js";
 import utils, { isMobile } from "../services/utils.js";
 import { getClosestNtxId } from "../widgets/widget_utils.js";
-import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
+import type { LeafletMouseEvent } from "leaflet";
 
 function openContextMenu(notePath: string, e: ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
     contextMenu.show({
@@ -35,21 +34,15 @@ function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEv
 
     if (command === "openNoteInNewTab") {
         appContext.tabManager.openContextWithNote(notePath, { hoistedNoteId, viewScope });
-        return true;
     } else if (command === "openNoteInNewSplit") {
         const ntxId = getNtxId(e);
-        if (!ntxId) return false;
+        if (!ntxId) return;
         appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath, hoistedNoteId, viewScope });
-        return true;
     } else if (command === "openNoteInNewWindow") {
         appContext.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
-        return true;
     } else if (command === "openNoteInPopup") {
-        appContext.triggerCommand("openInPopup", { noteIdOrPath: notePath });
-        return true;
+        appContext.triggerCommand("openInPopup", { noteIdOrPath: notePath })
     }
-
-    return false;
 }
 
 function getNtxId(e: ContextMenuEvent | LeafletMouseEvent) {
@@ -59,9 +52,9 @@ function getNtxId(e: ContextMenuEvent | LeafletMouseEvent) {
         return subContexts[subContexts.length - 1].ntxId;
     } else if (e.target instanceof HTMLElement) {
         return getClosestNtxId(e.target);
+    } else {
+        return null;
     }
-    return null;
-
 }
 
 export default {

apps/client/src/menus/tree_context_menu.ts

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

apps/client/src/mobile.ts

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

apps/client/src/print.tsx

@@ -1,29 +1,17 @@
-import { render } from "preact";
-import { useCallback, useLayoutEffect, useRef } from "preact/hooks";
-
 import FNote from "./entities/fnote";
-import content_renderer from "./services/content_renderer";
-import { applyInlineMermaid } from "./services/content_renderer_text";
-import { dynamicRequire, isElectron } from "./services/utils";
+import { render } from "preact";
 import { CustomNoteList, useNoteViewType } from "./widgets/collections/NoteList";
+import { useCallback, useLayoutEffect, useRef } from "preact/hooks";
+import content_renderer from "./services/content_renderer";
+import { dynamicRequire, isElectron } from "./services/utils";
+import { applyInlineMermaid } from "./services/content_renderer_text";
 
 interface RendererProps {
     note: FNote;
-    onReady: (data: PrintReport) => void;
+    onReady: () => void;
     onProgressChanged?: (progress: number) => void;
 }
 
-export type PrintReport = {
-    type: "single-note";
-} | {
-    type: "collection";
-    ignoredNoteIds: string[];
-} | {
-    type: "error";
-    message: string;
-    stack?: string;
-};
-
 async function main() {
     const notePath = window.location.hash.substring(1);
     const noteId = notePath.split("/").at(-1);
@@ -33,9 +21,7 @@ async function main() {
     const froca = (await import("./services/froca")).default;
     const note = await froca.getNote(noteId);
 
-    const bodyWrapper = document.createElement("div");
-    render(<App note={note} noteId={noteId} />, bodyWrapper);
-    document.body.appendChild(bodyWrapper);
+    render(<App note={note} noteId={noteId} />, document.body);
 }
 
 function App({ note, noteId }: { note: FNote | null | undefined, noteId: string }) {
@@ -48,17 +34,15 @@ function App({ note, noteId }: { note: FNote | null | undefined, noteId: string
             window.dispatchEvent(new CustomEvent("note-load-progress", { detail: { progress } }));
         }
     }, []);
-    const onReady = useCallback((printReport: PrintReport) => {
+    const onReady = useCallback(() => {
         if (sentReadyEvent.current) return;
-        window.dispatchEvent(new CustomEvent("note-ready", {
-            detail: printReport
-        }));
-        window._noteReady = printReport;
+        window.dispatchEvent(new Event("note-ready"));
+        window._noteReady = true;
         sentReadyEvent.current = true;
     }, []);
     const props: RendererProps | undefined | null = note && { note, onReady, onProgressChanged };
 
-    if (!note || !props) return <Error404 noteId={noteId} />;
+    if (!note || !props) return <Error404 noteId={noteId} />
 
     useLayoutEffect(() => {
         document.body.dataset.noteType = note.type;
@@ -67,8 +51,8 @@ function App({ note, noteId }: { note: FNote | null | undefined, noteId: string
     return (
         <>
             {note.type === "book"
-                ? <CollectionRenderer {...props} />
-                : <SingleNoteRenderer {...props} />
+            ? <CollectionRenderer {...props} />
+            : <SingleNoteRenderer {...props} />
             }
         </>
     );
@@ -107,9 +91,7 @@ function SingleNoteRenderer({ note, onReady }: RendererProps) {
             await loadCustomCss(note);
         }
 
-        load().then(() => requestAnimationFrame(() => onReady({
-            type: "single-note"
-        })));
+        load().then(() => requestAnimationFrame(onReady))
     }, [ note ]);
 
     return <>
@@ -128,9 +110,9 @@ function CollectionRenderer({ note, onReady, onProgressChanged }: RendererProps)
         ntxId="print"
         highlightedTokens={null}
         media="print"
-        onReady={async (data: PrintReport) => {
+        onReady={async () => {
             await loadCustomCss(note);
-            onReady(data);
+            onReady();
         }}
         onProgressChanged={onProgressChanged}
     />;
@@ -142,12 +124,12 @@ function Error404({ noteId }: { noteId: string }) {
             <p>The note you are trying to print could not be found.</p>
             <small>{noteId}</small>
         </main>
-    );
+    )
 }
 
 async function loadCustomCss(note: FNote) {
     const printCssNotes = await note.getRelationTargets("printCss");
-    const loadPromises: JQueryPromise<void>[] = [];
+    let loadPromises: JQueryPromise<void>[] = [];
 
     for (const printCssNote of printCssNotes) {
         if (!printCssNote || (printCssNote.type !== "code" && printCssNote.mime !== "text/css")) continue;

apps/client/src/runtime.ts

@@ -8,17 +8,6 @@ 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

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

apps/client/src/services/attributes.ts

@@ -1,67 +1,36 @@
-import { AttributeType } from "@triliumnext/commons";
-
-import type FNote from "../entities/fnote.js";
-import froca from "./froca.js";
-import type { AttributeRow } from "./load_results.js";
 import server from "./server.js";
+import froca from "./froca.js";
+import type FNote from "../entities/fnote.js";
+import type { AttributeRow } from "./load_results.js";
+import { AttributeType } from "@triliumnext/commons";
 
 async function addLabel(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/attribute`, {
         type: "label",
-        name,
-        value,
+        name: name,
+        value: value,
         isInheritable
     });
 }
 
-export async function setLabel(noteId: string, name: string, value: string = "", isInheritable = false, componentId?: string) {
+export async function setLabel(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/set-attribute`, {
         type: "label",
-        name,
-        value,
-        isInheritable,
-    }, componentId);
+        name: name,
+        value: value,
+        isInheritable
+    });
 }
 
 export async function setRelation(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/set-attribute`, {
         type: "relation",
-        name,
-        value,
+        name: name,
+        value: value,
         isInheritable
     });
 }
 
-/**
- * Sets a boolean label on the given note, taking inheritance into account. If the desired value matches the inherited
- * value, any owned label will be removed to allow the inherited value to take effect. If the desired value differs
- * from the inherited value, an owned label will be created or updated to reflect the desired value.
- *
- * When checking if the boolean value is set, don't use `note.hasLabel`; instead use `note.isLabelTruthy`.
- *
- * @param note the note on which to set the boolean label.
- * @param labelName the name of the label to set.
- * @param value the boolean value to set for the label.
- */
-export async function setBooleanWithInheritance(note: FNote, labelName: string, value: boolean) {
-    const actualValue = note.isLabelTruthy(labelName);
-    if (actualValue === value) return;
-    const hasInheritedValue = !note.hasOwnedLabel(labelName) && note.hasLabel(labelName);
-
-    if (hasInheritedValue) {
-        if (value) {
-            setLabel(note.noteId, labelName, "");
-        } else {
-            // Label is inherited - override to false.
-            setLabel(note.noteId, labelName, "false");
-        }
-    } else if (value) {
-        setLabel(note.noteId, labelName, "");
-    } else {
-        removeOwnedLabelByName(note, labelName);
-    }
-}
-
 async function removeAttributeById(noteId: string, attributeId: string) {
     await server.remove(`notes/${noteId}/attributes/${attributeId}`);
 }
@@ -117,15 +86,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, componentId?: string) {
+export async function setAttribute(note: FNote, type: "label" | "relation", name: string, value: string | null | undefined) {
     if (value !== null && value !== undefined) {
         // Create or update the attribute.
-        await server.put(`notes/${note.noteId}/set-attribute`, { type, name, value }, componentId);
+        await server.put(`notes/${note.noteId}/set-attribute`, { type, name, value });
     } 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}`, componentId);
+            await server.remove(`notes/${note.noteId}/attributes/${attributeId}`);
         }
     }
 }
@@ -168,59 +137,13 @@ function isAffecting(attrRow: AttributeRow, affectedNote: FNote | null | undefin
     return false;
 }
 
-/**
- * Toggles whether a dangerous attribute is enabled or not. When an attribute is disabled, its name is prefixed with `disabled:`.
- *
- * Note that this work for non-dangerous attributes as well.
- *
- * If there are multiple attributes with the same name, all of them will be toggled at the same time.
- *
- * @param note the note whose attribute to change.
- * @param type the type of dangerous attribute (label or relation).
- * @param name the name of the dangerous attribute.
- * @param willEnable whether to enable or disable the attribute.
- * @returns a promise that will resolve when the request to the server completes.
- */
-async function toggleDangerousAttribute(note: FNote, type: "label" | "relation", name: string, willEnable: boolean) {
-    const attrs = [
-        ...note.getOwnedAttributes(type, name),
-        ...note.getOwnedAttributes(type, `disabled:${name}`)
-    ];
-
-    for (const attr of attrs) {
-        const baseName = getNameWithoutDangerousPrefix(attr.name);
-        const newName = willEnable ? baseName : `disabled:${baseName}`;
-        if (newName === attr.name) continue;
-
-        // We are adding and removing afterwards to avoid a flicker (because for a moment there would be no active content attribute anymore) because the operations are done in sequence and not atomically.
-        if (attr.type === "label") {
-            await setLabel(note.noteId, newName, attr.value);
-        } else {
-            await setRelation(note.noteId, newName, attr.value);
-        }
-        await removeAttributeById(note.noteId, attr.attributeId);
-    }
-}
-
-/**
- * Returns the name of an attribute without the `disabled:` prefix, or the same name if it's not disabled.
- * @param name the name of an attribute.
- * @returns the name without the `disabled:` prefix.
- */
-function getNameWithoutDangerousPrefix(name: string) {
-    return name.startsWith("disabled:") ? name.substring(9) : name;
-}
-
 export default {
     addLabel,
     setLabel,
     setRelation,
     setAttribute,
-    setBooleanWithInheritance,
     removeAttributeById,
     removeOwnedLabelByName,
     removeOwnedRelationByName,
-    isAffecting,
-    toggleDangerousAttribute,
-    getNameWithoutDangerousPrefix
+    isAffecting
 };

apps/client/src/services/branches.ts

@@ -1,12 +1,12 @@
-import appContext from "../components/app_context.js";
-import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
-import froca from "./froca.js";
-import hoistedNoteService from "./hoisted_note.js";
-import { t } from "./i18n.js";
+import utils from "./utils.js";
 import server from "./server.js";
 import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
-import utils from "./utils.js";
+import froca from "./froca.js";
+import hoistedNoteService from "./hoisted_note.js";
 import ws from "./ws.js";
+import appContext from "../components/app_context.js";
+import { t } from "./i18n.js";
+import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
 
 // TODO: Deduplicate type with server
 interface Response {
@@ -66,7 +66,7 @@ async function moveAfterBranch(branchIdsToMove: string[], afterBranchId: string)
     }
 }
 
-async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: string, componentId?: string) {
+async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: string) {
     const newParentBranch = froca.getBranch(newParentBranchId);
     if (!newParentBranch) {
         return;
@@ -86,7 +86,7 @@ async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: st
             continue;
         }
 
-        const resp = await server.put<Response>(`branches/${branchIdToMove}/move-to/${newParentBranchId}`, undefined, componentId);
+        const resp = await server.put<Response>(`branches/${branchIdToMove}/move-to/${newParentBranchId}`);
 
         if (!resp.success) {
             toastService.showError(resp.message);
@@ -103,7 +103,7 @@ async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: st
  * @param moveToParent whether to automatically go to the parent note path after a succesful delete. Usually makes sense if deleting the active note(s).
  * @returns promise that returns false if the operation was cancelled or there was nothing to delete, true if the operation succeeded.
  */
-async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = false, moveToParent = true, componentId?: string) {
+async function deleteNotes(branchIdsToDelete: string[], forceDeleteAllClones = false, moveToParent = true) {
     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}`, componentId);
+            await server.remove(`notes/${branch.noteId}${query}`);
         } else {
-            await server.remove(`branches/${branchIdToDelete}${query}`, componentId);
+            await server.remove(`branches/${branchIdToDelete}${query}`);
         }
     }
 

apps/client/src/services/bundle.ts

@@ -1,14 +1,10 @@
-import { h, VNode } from "preact";
-
-import BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
-import RightPanelWidget from "../widgets/right_panel_widget.js";
-import type { Entity } from "./frontend_script_api.js";
-import { WidgetDefinitionWithType } from "./frontend_script_api_preact.js";
-import { t } from "./i18n.js";
 import ScriptContext from "./script_context.js";
 import server from "./server.js";
-import toastService, { showErrorForScriptNote } from "./toast.js";
-import utils, { getErrorMessage } from "./utils.js";
+import toastService, { showError } from "./toast.js";
+import froca from "./froca.js";
+import utils from "./utils.js";
+import { t } from "./i18n.js";
+import type { Entity } from "./frontend_script_api.js";
 
 // TODO: Deduplicate with server.
 export interface Bundle {
@@ -18,13 +14,9 @@ export interface Bundle {
     allNoteIds: string[];
 }
 
-type LegacyWidget = (BasicWidget | RightPanelWidget) & {
+interface Widget {
     parentWidget?: string;
-};
-type WithNoteId<T> = T & {
-    _noteId: string;
-};
-export type Widget = WithNoteId<(LegacyWidget | WidgetDefinitionWithType)>;
+}
 
 async function getAndExecuteBundle(noteId: string, originEntity = null, script = null, params = null) {
     const bundle = await server.post<Bundle>(`script/bundle/${noteId}`, {
@@ -35,27 +27,32 @@ async function getAndExecuteBundle(noteId: string, originEntity = null, script =
     return await executeBundle(bundle, originEntity);
 }
 
-export type ParentName = "left-pane" | "center-pane" | "note-detail-pane" | "right-pane";
-
-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>) {
+    const apiContext = await ScriptContext(bundle.noteId, bundle.allNoteIds, originEntity, $container);
+
     try {
-        return await executeBundleWithoutErrorHandling(bundle, originEntity, $container);
-    } catch (e: unknown) {
-        showErrorForScriptNote(bundle.noteId, t("toast.bundle-error.message", { message: getErrorMessage(e) }));
+        return await function () {
+            return eval(`const apiContext = this; (async function() { ${bundle.script}\r\n})()`);
+        }.call(apiContext);
+    } catch (e: any) {
+        const note = await froca.getNote(bundle.noteId);
+        toastService.showPersistent({
+            id: `custom-script-failure-${note?.noteId}`,
+            title: t("toast.bundle-error.title"),
+            icon: "bx bx-error-circle",
+            message: t("toast.bundle-error.message", {
+                id: note?.noteId,
+                title: note?.title,
+                message: e.message
+            })
+        });
         logError("Widget initialization failed: ", e);
     }
 }
 
 async function executeStartupBundles() {
     const isMobile = utils.isMobile();
-    const scriptBundles = await server.get<Bundle[]>(`script/startup${  isMobile ? "?mobile=true" : ""}`);
+    const scriptBundles = await server.get<Bundle[]>("script/startup" + (isMobile ? "?mobile=true" : ""));
 
     for (const bundle of scriptBundles) {
         await executeBundle(bundle);
@@ -63,99 +60,68 @@ async function executeStartupBundles() {
 }
 
 export class WidgetsByParent {
-    private legacyWidgets: Record<string, WithNoteId<LegacyWidget>[]>;
-    private preactWidgets: Record<string, WithNoteId<WidgetDefinitionWithType>[]>;
+    private byParent: Record<string, Widget[]>;
 
     constructor() {
-        this.legacyWidgets = {};
-        this.preactWidgets = {};
+        this.byParent = {};
     }
 
     add(widget: Widget) {
-        let hasParentWidget = false;
-        let isPreact = false;
-        if ("type" in widget && widget.type === "preact-widget") {
-            // React-based script.
-            const reactWidget = widget as WithNoteId<WidgetDefinitionWithType>;
-            this.preactWidgets[reactWidget.parent] = this.preactWidgets[reactWidget.parent] || [];
-            this.preactWidgets[reactWidget.parent].push(reactWidget);
-            isPreact = true;
-            hasParentWidget = !!reactWidget.parent;
-        } else if ("parentWidget" in widget && widget.parentWidget) {
-            this.legacyWidgets[widget.parentWidget] = this.legacyWidgets[widget.parentWidget] || [];
-            this.legacyWidgets[widget.parentWidget].push(widget);
-            hasParentWidget = !!widget.parentWidget;
+        if (!widget.parentWidget) {
+            console.log(`Custom widget does not have mandatory 'parentWidget' property defined`);
+            return;
         }
 
-        if (!hasParentWidget) {
-            showErrorForScriptNote(widget._noteId, t("toast.widget-missing-parent", {
-                property: isPreact ? "parent" : "parentWidget"
-            }));
-        }
+        this.byParent[widget.parentWidget] = this.byParent[widget.parentWidget] || [];
+        this.byParent[widget.parentWidget].push(widget);
     }
 
-    get(parentName: ParentName) {
-        const widgets: (BasicWidget | VNode)[] = this.getLegacyWidgets(parentName);
-        for (const preactWidget of this.getPreactWidgets(parentName)) {
-            const el = h(preactWidget.render, {});
-            const widget = new ReactWrappedWidget(el);
-            widget.contentSized();
-            if (preactWidget.position) {
-                widget.position = preactWidget.position;
-            }
-            widgets.push(widget);
+    get(parentName: string) {
+        if (!this.byParent[parentName]) {
+            return [];
         }
 
-        return widgets;
-    }
-
-    getLegacyWidgets(parentName: ParentName): (BasicWidget | RightPanelWidget)[] {
-        if (!this.legacyWidgets[parentName]) return [];
-
         return (
-            this.legacyWidgets[parentName]
+            this.byParent[parentName]
                 // previously, custom widgets were provided as a single instance, but that has the disadvantage
                 // for splits where we actually need multiple instaces and thus having a class to instantiate is better
                 // https://github.com/zadam/trilium/issues/4274
                 .map((w: any) => (w.prototype ? new w() : w))
         );
     }
-
-    getPreactWidgets(parentName: ParentName) {
-        return this.preactWidgets[parentName] ?? [];
-    }
 }
 
 async function getWidgetBundlesByParent() {
+    const scriptBundles = await server.get<Bundle[]>("script/widgets");
+
     const widgetsByParent = new WidgetsByParent();
 
-    try {
-        const scriptBundles = await server.get<Bundle[]>("script/widgets");
+    for (const bundle of scriptBundles) {
+        let widget;
 
-        for (const bundle of scriptBundles) {
-            let widget;
-
-            try {
-                widget = await executeBundle(bundle);
-                if (widget) {
-                    widget._noteId = bundle.noteId;
-                    widgetsByParent.add(widget);
-                }
-            } catch (e: any) {
-                const noteId = bundle.noteId;
-                showErrorForScriptNote(noteId, t("toast.bundle-error.message", { message: e.message }));
-
-                logError("Widget initialization failed: ", e);
-                continue;
+        try {
+            widget = await executeBundle(bundle);
+            if (widget) {
+                widget._noteId = bundle.noteId;
+                widgetsByParent.add(widget);
             }
+        } catch (e: any) {
+            const noteId = bundle.noteId;
+            const note = await froca.getNote(noteId);
+            toastService.showPersistent({
+                id: `custom-script-failure-${noteId}`,
+                title: t("toast.bundle-error.title"),
+                icon: "bx bx-error-circle",
+                message: t("toast.bundle-error.message", {
+                    id: noteId,
+                    title: note?.title,
+                    message: e.message
+                })
+            });
+
+            logError("Widget initialization failed: ", e);
+            continue;
         }
-    } catch (e) {
-        toastService.showPersistent({
-            id: `custom-widget-list-failure`,
-            title: t("toast.widget-list-error.title"),
-            message: getErrorMessage(e),
-            icon: "bx bx-error-circle"
-        });
     }
 
     return widgetsByParent;

apps/client/src/services/content_renderer.css

@@ -1,9 +0,0 @@
-.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,22 +1,18 @@
-import "./content_renderer.css";
-
-import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
-import { h, render } from "preact";
-import WheelZoom from 'vanilla-js-wheel-zoom';
-
-import FAttachment from "../entities/fattachment.js";
-import FNote from "../entities/fnote.js";
-import imageContextMenuService from "../menus/image_context_menu.js";
-import { t } from "../services/i18n.js";
-import renderText from "./content_renderer_text.js";
-import renderDoc from "./doc_renderer.js";
-import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
-import openService from "./open.js";
+import renderService from "./render.js";
 import protectedSessionService from "./protected_session.js";
 import protectedSessionHolder from "./protected_session_holder.js";
-import renderService from "./render.js";
+import openService from "./open.js";
+import utils from "./utils.js";
+import FNote from "../entities/fnote.js";
+import FAttachment from "../entities/fattachment.js";
+import imageContextMenuService from "../menus/image_context_menu.js";
 import { applySingleBlockSyntaxHighlight } from "./syntax_highlight.js";
-import utils, { getErrorMessage } from "./utils.js";
+import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
+import renderDoc from "./doc_renderer.js";
+import { t } from "../services/i18n.js";
+import WheelZoom from 'vanilla-js-wheel-zoom';
+import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
+import renderText from "./content_renderer_text.js";
 
 let idCounter = 1;
 
@@ -26,12 +22,6 @@ export interface RenderOptions {
     imageHasZoom?: boolean;
     /** If enabled, it will prevent the default behavior in which an empty note would display a list of children. */
     noChildrenList?: boolean;
-    /** If enabled, it will prevent rendering of included notes. */
-    noIncludedNotes?: boolean;
-    /** If enabled, it will include archived notes when rendering children list. */
-    includeArchivedNotes?: boolean;
-    /** Set of note IDs that have already been seen during rendering to prevent infinite recursion. */
-    seenNoteIds?: Set<string>;
 }
 
 const CODE_MIME_TYPES = new Set(["application/json"]);
@@ -54,19 +44,16 @@ 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", "spreadsheet"].includes(type)) {
+    } else if (["image", "canvas", "mindMap"].includes(type)) {
         renderImage(entity, $renderedContent, options);
     } else if (!options.tooltip && ["file", "pdf", "audio", "video"].includes(type)) {
-        await renderFile(entity, type, $renderedContent);
+        renderFile(entity, type, $renderedContent);
     } else if (type === "mermaid") {
         await renderMermaid(entity, $renderedContent);
     } else if (type === "render" && entity instanceof FNote) {
         const $content = $("<div>");
 
-        await renderService.render(entity, $content, (e) => {
-            const $error = $("<div>").addClass("admonition caution").text(typeof e === "string" ? e : getErrorMessage(e));
-            $content.empty().append($error);
-        });
+        await renderService.render(entity, $content);
 
         $renderedContent.append($content);
     } else if (type === "doc" && "noteId" in entity) {
@@ -77,9 +64,18 @@ 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.addClass("no-preview");
+        $renderedContent
+            .css("display", "flex")
+            .css("flex-direction", "column");
         $renderedContent.append(
-            $("<div>").append($("<span>").addClass(entity.getIcon()))
+            $("<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()))
         );
 
         if (entity.type === "webView" && entity.hasLabel("webViewSrc")) {
@@ -156,7 +152,7 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
 
     const $img = $("<img>")
         .attr("src", url || "")
-        .attr("id", `attachment-image-${idCounter++}`)
+        .attr("id", "attachment-image-" + idCounter++)
         .css("max-width", "100%");
 
     $renderedContent.append($img);
@@ -180,7 +176,7 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
     imageContextMenuService.setupContextMenu($img);
 }
 
-async function renderFile(entity: FNote | FAttachment, type: string, $renderedContent: JQuery<HTMLElement>) {
+function renderFile(entity: FNote | FAttachment, type: string, $renderedContent: JQuery<HTMLElement>) {
     let entityType, entityId;
 
     if (entity instanceof FNote) {
@@ -193,17 +189,13 @@ async function renderFile(entity: FNote | FAttachment, type: string, $renderedCo
         throw new Error(`Can't recognize entity type of '${entity}'`);
     }
 
-    const $content = $('<div style="display: flex; flex-direction: column; height: 100%; justify-content: end;">');
+    const $content = $('<div style="display: flex; flex-direction: column; height: 100%;">');
 
     if (type === "pdf") {
-        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);
-
+        const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
+        $pdfPreview.attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open`));
 
+        $content.append($pdfPreview);
     } else if (type === "audio") {
         const $audioPreview = $("<audio controls></audio>")
             .attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open-partial`))
@@ -225,28 +217,28 @@ async function renderFile(entity: FNote | FAttachment, type: string, $renderedCo
         //       in attachment list
         const $downloadButton = $(`
             <button class="file-download btn btn-primary" type="button">
-                <span class="tn-icon bx bx-download"></span>
+                <span class="bx bx-download"></span>
                 ${t("file_properties.download")}
             </button>
         `);
 
         const $openButton = $(`
             <button class="file-open btn btn-primary" type="button">
-                <span class="tn-icon bx bx-link-external"></span>
+                <span class="bx bx-link-external"></span>
                 ${t("file_properties.open")}
             </button>
         `);
 
         $downloadButton.on("click", (e) => {
             e.stopPropagation();
-            openService.downloadFileNote(entity, null, null);
+            openService.downloadFileNote(entity.noteId)
         });
         $openButton.on("click", async (e) => {
             const iconEl = $openButton.find("> .bx");
             iconEl.removeClass("bx bx-link-external");
             iconEl.addClass("bx bx-loader spin");
             e.stopPropagation();
-            await openService.openNoteExternally(entity.noteId, entity.mime);
+            await openService.openNoteExternally(entity.noteId, entity.mime)
             iconEl.removeClass("bx bx-loader spin");
             iconEl.addClass("bx bx-link-external");
         });
@@ -274,7 +266,7 @@ async function renderMermaid(note: FNote | FAttachment, $renderedContent: JQuery
 
     try {
         await loadElkIfNeeded(mermaid, content);
-        const { svg } = await mermaid.mermaidAPI.render(`in-mermaid-graph-${idCounter++}`, content);
+        const { svg } = await mermaid.mermaidAPI.render("in-mermaid-graph-" + idCounter++, content);
 
         $renderedContent.append($(postprocessMermaidSvg(svg)));
     } catch (e) {
@@ -293,11 +285,10 @@ 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) && !isIconPack) {
+    } else if ((type === "file" || type === "viewConfig") && mime && CODE_MIME_TYPES.has(mime)) {
         type = "code";
     } else if (type === "file" && mime && mime.startsWith("audio/")) {
         type = "audio";

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

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

apps/client/src/services/content_renderer_text.ts

@@ -1,13 +1,13 @@
-import FAttachment from "../entities/fattachment.js";
+import { formatCodeBlocks } from "./syntax_highlight.js";
+import { getMermaidConfig } from "./mermaid.js";
+import { renderMathInElement } from "./math.js";
 import FNote from "../entities/fnote.js";
-import { default as content_renderer, type RenderOptions } from "./content_renderer.js";
+import FAttachment from "../entities/fattachment.js";
+import tree from "./tree.js";
 import froca from "./froca.js";
 import link from "./link.js";
-import { renderMathInElement } from "./math.js";
-import { getMermaidConfig } from "./mermaid.js";
-import { formatCodeBlocks } from "./syntax_highlight.js";
-import tree from "./tree.js";
 import { isHtmlEmpty } from "./utils.js";
+import { default as content_renderer, type RenderOptions } from "./content_renderer.js";
 
 export default async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: RenderOptions = {}) {
     // entity must be FNote
@@ -15,38 +15,29 @@ export default async function renderText(note: FNote | FAttachment, $renderedCon
 
     if (blob && !isHtmlEmpty(blob.content)) {
         $renderedContent.append($('<div class="ck-content">').html(blob.content));
-
-        const seenNoteIds = options.seenNoteIds ?? new Set<string>();
-        seenNoteIds.add("noteId" in note ? note.noteId : note.attachmentId);
-        if (!options.noIncludedNotes) {
-            await renderIncludedNotes($renderedContent[0], seenNoteIds);
-        } else {
-            $renderedContent.find("section.include-note").remove();
-        }
+        await renderIncludedNotes($renderedContent[0]);
 
         if ($renderedContent.find("span.math-tex").length > 0) {
             renderMathInElement($renderedContent[0], { trust: true });
         }
 
         const getNoteIdFromLink = (el: HTMLElement) => tree.getNoteIdFromUrl($(el).attr("href") || "");
-        const referenceLinks = $renderedContent.find<HTMLAnchorElement>("a.reference-link");
+        const referenceLinks = $renderedContent.find("a.reference-link");
         const noteIdsToPrefetch = referenceLinks.map((i, el) => getNoteIdFromLink(el));
         await froca.getNotes(noteIdsToPrefetch);
 
         for (const el of referenceLinks) {
-            const innerSpan = document.createElement("span");
-            await link.loadReferenceLinkTitle($(innerSpan), el.href);
-            el.replaceChildren(innerSpan);
+            await link.loadReferenceLinkTitle($(el));
         }
 
         await rewriteMermaidDiagramsInContainer($renderedContent[0] as HTMLDivElement);
         await formatCodeBlocks($renderedContent);
     } else if (note instanceof FNote && !options.noChildrenList) {
-        await renderChildrenList($renderedContent, note, options.includeArchivedNotes ?? false);
+        await renderChildrenList($renderedContent, note);
     }
 }
 
-async function renderIncludedNotes(contentEl: HTMLElement, seenNoteIds: Set<string>) {
+async function renderIncludedNotes(contentEl: HTMLElement) {
     // TODO: Consider duplicating with server's share/content_renderer.ts.
     const includeNoteEls = contentEl.querySelectorAll("section.include-note");
 
@@ -73,15 +64,7 @@ async function renderIncludedNotes(contentEl: HTMLElement, seenNoteIds: Set<stri
             continue;
         }
 
-        if (seenNoteIds.has(noteId)) {
-            console.warn(`Skipping inclusion of ${noteId} to avoid circular reference.`);
-            includeNoteEl.remove();
-            continue;
-        }
-
-        const renderedContent = (await content_renderer.getRenderedContent(note, {
-            seenNoteIds
-        })).$renderedContent;
+        const renderedContent = (await content_renderer.getRenderedContent(note)).$renderedContent;
         includeNoteEl.replaceChildren(...renderedContent);
     }
 }
@@ -113,25 +96,24 @@ export async function applyInlineMermaid(container: HTMLDivElement) {
     }
 }
 
-async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: FNote, includeArchivedNotes: boolean) {
+async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: FNote) {
     let childNoteIds = note.getChildNoteIds();
 
     if (!childNoteIds.length) {
         return;
     }
 
+    $renderedContent.css("padding", "10px");
     $renderedContent.addClass("text-with-ellipsis");
 
-    // just load the first 10 child notes
     if (childNoteIds.length > 10) {
         childNoteIds = childNoteIds.slice(0, 10);
     }
 
+    // just load the first 10 child notes
     const childNotes = await froca.getNotes(childNoteIds);
 
     for (const childNote of childNotes) {
-        if (childNote.isArchived && !includeArchivedNotes) continue;
-
         $renderedContent.append(
             await link.createLink(`${note.noteId}/${childNote.noteId}`, {
                 showTooltip: false,

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

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

apps/client/src/services/css_class_manager.ts

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

apps/client/src/services/date_notes.ts

@@ -1,5 +1,4 @@
 import { dayjs } from "@triliumnext/commons";
-
 import type { FNoteRow } from "../entities/fnote.js";
 import froca from "./froca.js";
 import server from "./server.js";
@@ -15,13 +14,8 @@ async function getTodayNote() {
     return await getDayNote(dayjs().format("YYYY-MM-DD"));
 }
 
-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");
+async function getDayNote(date: string) {
+    const note = await server.get<FNoteRow>(`special-notes/days/${date}`, "date-note");
 
     await ws.waitForMaxKnownEntityChangeId();
 

apps/client/src/services/experimental_features.ts

@@ -1,61 +0,0 @@
-import { t } from "./i18n";
-import options from "./options";
-import { isMobile } from "./utils";
-
-export interface ExperimentalFeature {
-    id: string;
-    name: string;
-    description: string;
-}
-
-export const experimentalFeatures = [
-    {
-        id: "new-layout",
-        name: t("experimental_features.new_layout_name"),
-        description: t("experimental_features.new_layout_description"),
-    }
-] as const satisfies ExperimentalFeature[];
-
-export type ExperimentalFeatureId = typeof experimentalFeatures[number]["id"];
-
-let enabledFeatures: Set<ExperimentalFeatureId> | null = null;
-
-export function isExperimentalFeatureEnabled(featureId: ExperimentalFeatureId): boolean {
-    if (featureId === "new-layout") {
-        return (isMobile() || options.is("newLayout"));
-    }
-
-    return getEnabledFeatures().has(featureId);
-}
-
-export function getEnabledExperimentalFeatureIds() {
-    const values = [ ...getEnabledFeatures().values() ];
-    if (isMobile() || options.is("newLayout")) {
-        values.push("new-layout");
-    }
-    return values;
-}
-
-export async function toggleExperimentalFeature(featureId: ExperimentalFeatureId, enable: boolean) {
-    const features = new Set(getEnabledFeatures());
-    if (enable) {
-        features.add(featureId);
-    } else {
-        features.delete(featureId);
-    }
-    await options.save("experimentalFeatures", JSON.stringify(Array.from(features)));
-}
-
-function getEnabledFeatures() {
-    if (!enabledFeatures) {
-        let features: ExperimentalFeatureId[] = [];
-        try {
-            features = JSON.parse(options.get("experimentalFeatures")) as ExperimentalFeatureId[];
-        } catch (e) {
-            console.warn("Failed to parse experimental features from options:", e);
-        }
-        enabledFeatures = new Set(features);
-        enabledFeatures.delete("new-layout"); // handled separately.
-    }
-    return enabledFeatures;
-}

apps/client/src/services/frontend_script_api.ts

@@ -1,27 +1,26 @@
-import { dayjs, formatLogMessage } from "@triliumnext/commons";
-
-import appContext from "../components/app_context.js";
-import type Component from "../components/component.js";
-import type NoteContext from "../components/note_context.js";
-import type FNote from "../entities/fnote.js";
-import BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
-import NoteContextAwareWidget from "../widgets/note_context_aware_widget.js";
-import RightPanelWidget from "../widgets/right_panel_widget.js";
-import dateNotesService from "./date_notes.js";
-import dialogService from "./dialog.js";
-import froca from "./froca.js";
-import { preactAPI } from "./frontend_script_api_preact.js";
-import { t } from "./i18n.js";
+import server from "./server.js";
+import utils from "./utils.js";
+import toastService from "./toast.js";
 import linkService from "./link.js";
+import froca from "./froca.js";
 import noteTooltipService from "./note_tooltip.js";
 import protectedSessionService from "./protected_session.js";
+import dateNotesService from "./date_notes.js";
 import searchService from "./search.js";
-import server from "./server.js";
-import shortcutService from "./shortcuts.js";
-import SpacedUpdate from "./spaced_update.js";
-import toastService from "./toast.js";
-import utils from "./utils.js";
+import RightPanelWidget from "../widgets/right_panel_widget.js";
 import ws from "./ws.js";
+import appContext from "../components/app_context.js";
+import NoteContextAwareWidget from "../widgets/note_context_aware_widget.js";
+import BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import SpacedUpdate from "./spaced_update.js";
+import shortcutService from "./shortcuts.js";
+import dialogService from "./dialog.js";
+import type FNote from "../entities/fnote.js";
+import { t } from "./i18n.js";
+import { dayjs } from "@triliumnext/commons";
+import type NoteContext from "../components/note_context.js";
+import type Component from "../components/component.js";
+import { formatLogMessage } from "@triliumnext/commons";
 
 /**
  * A whole number
@@ -465,8 +464,6 @@ export interface Api {
      * Log given message to the log pane in UI
      */
     log(message: string | object): void;
-
-    preact: typeof preactAPI;
 }
 
 /**
@@ -536,8 +533,9 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
         return params.map((p) => {
             if (typeof p === "function") {
                 return `!@#Function: ${p.toString()}`;
+            } else {
+                return p;
             }
-            return p;
         });
     }
 
@@ -564,8 +562,9 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
             await ws.waitForMaxKnownEntityChangeId();
 
             return ret.executionResult;
+        } else {
+            throw new Error(`server error: ${ret.error}`);
         }
-        throw new Error(`server error: ${ret.error}`);
     };
 
     this.runOnBackend = async (func, params = []) => {
@@ -722,8 +721,6 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
         this.logMessages[noteId].push(message);
         this.logSpacedUpdates[noteId].scheduleUpdate();
     };
-
-    this.preact = preactAPI;
 }
 
 export default FrontendScriptApi as any as {

apps/client/src/services/frontend_script_api_preact.ts

@@ -1,101 +0,0 @@
-import { Fragment, h, VNode } from "preact";
-import * as hooks from "preact/hooks";
-
-import ActionButton from "../widgets/react/ActionButton";
-import Admonition from "../widgets/react/Admonition";
-import Button from "../widgets/react/Button";
-import CKEditor from "../widgets/react/CKEditor";
-import Collapsible from "../widgets/react/Collapsible";
-import Dropdown from "../widgets/react/Dropdown";
-import FormCheckbox from "../widgets/react/FormCheckbox";
-import FormDropdownList from "../widgets/react/FormDropdownList";
-import { FormFileUploadActionButton, FormFileUploadButton } from "../widgets/react/FormFileUpload";
-import FormGroup from "../widgets/react/FormGroup";
-import { FormDropdownDivider, FormDropdownSubmenu, FormListItem } from "../widgets/react/FormList";
-import FormRadioGroup from "../widgets/react/FormRadioGroup";
-import FormText from "../widgets/react/FormText";
-import FormTextArea from "../widgets/react/FormTextArea";
-import FormTextBox from "../widgets/react/FormTextBox";
-import FormToggle from "../widgets/react/FormToggle";
-import * as triliumHooks from "../widgets/react/hooks";
-import Icon from "../widgets/react/Icon";
-import LinkButton from "../widgets/react/LinkButton";
-import LoadingSpinner from "../widgets/react/LoadingSpinner";
-import Modal from "../widgets/react/Modal";
-import NoteAutocomplete from "../widgets/react/NoteAutocomplete";
-import NoteLink from "../widgets/react/NoteLink";
-import RawHtml from "../widgets/react/RawHtml";
-import Slider from "../widgets/react/Slider";
-import RightPanelWidget from "../widgets/sidebar/RightPanelWidget";
-
-export interface WidgetDefinition {
-    parent: "right-pane",
-    render: () => VNode,
-    position?: number,
-}
-
-export interface WidgetDefinitionWithType extends WidgetDefinition {
-    type: "preact-widget"
-}
-
-export interface LauncherWidgetDefinitionWithType {
-    type: "preact-launcher-widget"
-    render: () => VNode
-}
-
-export const preactAPI = Object.freeze({
-    // Core
-    h,
-    Fragment,
-
-    /**
-     * Method that must be run for widget scripts that run on Preact, using JSX. The method just returns the same definition, reserved for future typechecking and perhaps validation purposes.
-     *
-     * @param definition the widget definition.
-     */
-    defineWidget(definition: WidgetDefinition) {
-        return {
-            type: "preact-widget",
-            ...definition
-        };
-    },
-
-    defineLauncherWidget(definition: Omit<LauncherWidgetDefinitionWithType, "type">) {
-        return {
-            type: "preact-launcher-widget",
-            ...definition
-        };
-    },
-
-    // Basic widgets
-    ActionButton,
-    Admonition,
-    Button,
-    CKEditor,
-    Collapsible,
-    Dropdown,
-    FormCheckbox,
-    FormDropdownList,
-    FormFileUploadButton, FormFileUploadActionButton,
-    FormGroup,
-    FormListItem, FormDropdownDivider, FormDropdownSubmenu,
-    FormRadioGroup,
-    FormText,
-    FormTextArea,
-    FormTextBox,
-    FormToggle,
-    Icon,
-    LinkButton,
-    LoadingSpinner,
-    Modal,
-    NoteAutocomplete,
-    NoteLink,
-    RawHtml,
-    Slider,
-
-    // Specialized widgets
-    RightPanelWidget,
-
-    ...hooks,
-    ...triliumHooks
-});

apps/client/src/services/i18n.ts

@@ -24,8 +24,7 @@ export async function initLocale() {
         backend: {
             loadPath: `${window.glob.assetPath}/translations/{{lng}}/{{ns}}.json`
         },
-        returnEmptyString: false,
-        showSupportNotice: false
+        returnEmptyString: false
     });
 
     await setDayjsLocale(locale);

apps/client/src/services/in_app_help.ts

@@ -1,5 +1,4 @@
 import { NoteType } from "@triliumnext/commons";
-
 import FNote from "../entities/fnote";
 import { ViewTypeOptions } from "../widgets/collections/interface";
 
@@ -19,7 +18,7 @@ export const byNoteType: Record<Exclude<NoteType, "book">, string | null> = {
     search: null,
     text: null,
     webView: null,
-    spreadsheet: null
+    aiChat: null
 };
 
 export const byBookType: Record<ViewTypeOptions, string | null> = {
@@ -40,6 +39,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

@@ -1,11 +1,10 @@
-import { ALLOWED_PROTOCOLS } from "@triliumnext/commons";
-
-import appContext, { type NoteCommandData } from "../components/app_context.js";
-import { openInCurrentNoteContext } from "../components/note_context.js";
-import linkContextMenuService from "../menus/link_context_menu.js";
-import froca from "./froca.js";
 import treeService from "./tree.js";
+import linkContextMenuService from "../menus/link_context_menu.js";
+import appContext, { type NoteCommandData } from "../components/app_context.js";
+import froca from "./froca.js";
 import utils from "./utils.js";
+import { ALLOWED_PROTOCOLS } from "@triliumnext/commons";
+import { openInCurrentNoteContext } from "../components/note_context.js";
 
 function getNotePathFromUrl(url: string) {
     const notePathMatch = /#(root[A-Za-z0-9_/]*)$/.exec(url);
@@ -28,7 +27,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";
 
 export interface ViewScope {
     /**
@@ -123,7 +122,7 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
     const $container = $("<span>");
 
     if (showNoteIcon) {
-        const icon = await getLinkIcon(noteId, viewMode);
+        let icon = await getLinkIcon(noteId, viewMode);
 
         if (icon) {
             $container.append($("<span>").addClass(`bx ${icon}`)).append(" ");
@@ -132,7 +131,7 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
 
     const hash = calculateHash({
         notePath,
-        viewScope
+        viewScope: viewScope
     });
 
     const $noteLink = $("<a>", {
@@ -172,11 +171,11 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
     return $container;
 }
 
-export function calculateHash({ notePath, ntxId, hoistedNoteId, viewScope = {} }: NoteCommandData) {
+function calculateHash({ notePath, ntxId, hoistedNoteId, viewScope = {} }: NoteCommandData) {
     notePath = notePath || "";
     const params = [
-        ntxId ? { ntxId } : null,
-        hoistedNoteId && hoistedNoteId !== "root" ? { hoistedNoteId } : null,
+        ntxId ? { ntxId: ntxId } : null,
+        hoistedNoteId && hoistedNoteId !== "root" ? { hoistedNoteId: hoistedNoteId } : null,
         viewScope.viewMode && viewScope.viewMode !== "default" ? { viewMode: viewScope.viewMode } : null,
         viewScope.attachmentId ? { attachmentId: viewScope.attachmentId } : null
     ].filter((p) => !!p);
@@ -220,7 +219,7 @@ export function parseNavigationStateFromUrl(url: string | undefined) {
     }
 
     const hash = url.substr(hashIdx + 1); // strip also the initial '#'
-    const [notePath, paramString] = hash.split("?");
+    let [notePath, paramString] = hash.split("?");
 
     const viewScope: ViewScope = {
         viewMode: "default"
@@ -253,7 +252,7 @@ export function parseNavigationStateFromUrl(url: string | undefined) {
     }
 
     if (searchString) {
-        return { searchString };
+        return { searchString }
     }
 
     if (!notePath.match(/^[_a-z0-9]{4,}(\/[_a-z0-9]{4,})*$/i)) {
@@ -335,7 +334,7 @@ export function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDo
                 window.open(hrefLink, "_blank");
             } else {
                 // Enable protocols supported by CKEditor 5 to be clickable.
-                if (ALLOWED_PROTOCOLS.some((protocol) => hrefLink.toLowerCase().startsWith(`${protocol}:`))) {
+                if (ALLOWED_PROTOCOLS.some((protocol) => hrefLink.toLowerCase().startsWith(protocol + ":"))) {
                     if ( utils.isElectron()) {
                         const electron = utils.dynamicRequire("electron");
                         electron.shell.openExternal(hrefLink);
@@ -396,7 +395,7 @@ async function loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string | n
 
     href = href || $link.attr("href");
     if (!href) {
-        console.warn(`Empty URL for parsing: ${$el[0].outerHTML}`);
+        console.warn("Empty URL for parsing: " + $el[0].outerHTML);
         return;
     }
 
@@ -439,9 +438,9 @@ async function getReferenceLinkTitle(href: string) {
         const attachment = await note.getAttachmentById(viewScope.attachmentId);
 
         return attachment ? attachment.title : "[missing attachment]";
+    } else {
+        return note.title;
     }
-    return note.title;
-
 }
 
 function getReferenceLinkTitleSync(href: string) {
@@ -463,9 +462,9 @@ function getReferenceLinkTitleSync(href: string) {
         const attachment = note.attachments.find((att) => att.attachmentId === viewScope.attachmentId);
 
         return attachment ? attachment.title : "[missing attachment]";
+    } else {
+        return note.title;
     }
-    return note.title;
-
 }
 
 if (glob.device !== "print") {

apps/client/src/services/load_results.ts

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

apps/client/src/services/note_tooltip.ts

@@ -1,20 +1,20 @@
-import appContext from "../components/app_context.js";
-import type FNote from "../entities/fnote.js";
+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 froca from "./froca.js";
+import appContext from "../components/app_context.js";
+import type FNote from "../entities/fnote.js";
 import { t } from "./i18n.js";
-import linkService from "./link.js";
-import treeService from "./tree.js";
-import utils from "./utils.js";
 
 // Track all elements that open tooltips
 let openTooltipElements: JQuery<HTMLElement>[] = [];
 let dismissTimer: ReturnType<typeof setTimeout>;
 
 function setupGlobalTooltip() {
-    $(document).on("pointerenter", "a:not(.no-tooltip-preview)", mouseEnterHandler);
-    $(document).on("pointerenter", "[data-href]:not(.no-tooltip-preview)", mouseEnterHandler);
+    $(document).on("mouseenter", "a:not(.no-tooltip-preview)", mouseEnterHandler);
+    $(document).on("mouseenter", "[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,12 +37,10 @@ function dismissAllTooltips() {
 }
 
 function setupElementTooltip($el: JQuery<HTMLElement>) {
-    $el.on("pointerenter", mouseEnterHandler);
+    $el.on("mouseenter", mouseEnterHandler);
 }
 
-async function mouseEnterHandler<T>(this: HTMLElement, e: JQuery.TriggeredEvent<T, undefined, T, T>) {
-    if (e.pointerType !== "mouse") return;
-
+async function mouseEnterHandler(this: HTMLElement) {
     const $link = $(this);
 
     if ($link.hasClass("no-tooltip-preview") || $link.hasClass("disabled")) {
@@ -93,7 +91,7 @@ async function mouseEnterHandler<T>(this: HTMLElement, e: JQuery.TriggeredEvent<
     }
 
     const html = `<div class="note-tooltip-content">${content}</div>`;
-    const tooltipClass = `tooltip-${  Math.floor(Math.random() * 999_999_999)}`;
+    const tooltipClass = "tooltip-" + Math.floor(Math.random() * 999_999_999);
 
     // we need to check if we're still hovering over the element
     // since the operation to get tooltip content was async, it is possible that
@@ -226,7 +224,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,9 @@
-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 froca from "./froca.js";
 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 { TreeCommandNames } from "../menus/tree_context_menu.js";
 
 export interface NoteTypeMapping {
     type: NoteType;
@@ -26,7 +26,6 @@ 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" },
@@ -54,6 +53,7 @@ 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 */
@@ -97,9 +97,9 @@ function getBlankNoteTypes(command?: TreeCommandNames): MenuItem<TreeCommandName
                 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 +131,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 +160,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 +176,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 +194,7 @@ async function isNewTemplate(templateNoteId) {
     if (rootCreationDate === undefined) {
         // Retrieve the root note creation date
         try {
-            const rootNoteInfo: any = await server.get("notes/root");
+            let rootNoteInfo: any = await server.get("notes/root");
             if ("dateCreated" in rootNoteInfo) {
                 rootCreationDate = new Date(rootNoteInfo.dateCreated);
             }
@@ -209,7 +209,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,8 +231,9 @@ async function isNewTemplate(templateNoteId) {
         const age = (new Date().getTime() - creationDate.getTime()) / DAY_LENGTH;
         // Return true if the template is at most NEW_TEMPLATE_MAX_AGE days old
         return (age <= NEW_TEMPLATE_MAX_AGE);
+    } else {
+        return false;
     }
-    return false;
 }
 
 export default {

apps/client/src/services/open.ts

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

apps/client/src/services/render.ts

@@ -0,0 +1,28 @@
+import server from "./server.js";
+import bundleService, { type Bundle } from "./bundle.js";
+import type FNote from "../entities/fnote.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);
+    }
+
+    return renderNoteIds.length > 0;
+}
+
+export default {
+    render
+};

apps/client/src/services/render.tsx

@@ -1,86 +0,0 @@
-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/server.ts

@@ -73,10 +73,6 @@ 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 });
 }
@@ -89,17 +85,15 @@ async function remove<T>(url: string, componentId?: string) {
     return await call<T>("DELETE", url, componentId);
 }
 
-async function upload(url: string, fileToUpload: File, componentId?: string, method = "PUT") {
+async function upload(url: string, fileToUpload: File) {
     const formData = new FormData();
     formData.append("upload", fileToUpload);
 
     return await $.ajax({
         url: window.glob.baseApiUrl + url,
-        headers: await getHeaders(componentId ? {
-            "trilium-component-id": componentId
-        } : undefined),
+        headers: await getHeaders(),
         data: formData,
-        type: method,
+        type: "PUT",
         timeout: 60 * 60 * 1000,
         contentType: false, // NEEDED, DON'T REMOVE THIS
         processData: false // NEEDED, DON'T REMOVE THIS
@@ -115,7 +109,6 @@ let maxKnownEntityChangeId = 0;
 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;
 }
@@ -140,15 +133,15 @@ async function call<T>(method: string, url: string, componentId?: string, option
             };
 
             ipc.send("server-request", {
-                requestId,
-                headers,
-                method,
+                requestId: requestId,
+                headers: headers,
+                method: method,
                 url: `/${window.glob.baseApiUrl}${url}`,
-                data
+                data: data
             });
         })) as any;
     } else {
-        resp = await ajax(url, method, data, headers, options);
+        resp = await ajax(url, method, data, headers, !!options.silentNotFound, options.raw);
     }
 
     const maxEntityChangeIdStr = resp.headers["trilium-max-entity-change-id"];
@@ -160,12 +153,15 @@ async function call<T>(method: string, url: string, componentId?: string, option
     return resp.body as T;
 }
 
-function ajax(url: string, method: string, data: unknown, headers: Headers, opts: CallOptions): Promise<Response> {
+/**
+ * @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> {
     return new Promise((res, rej) => {
         const options: JQueryAjaxSettings = {
             url: window.glob.baseApiUrl + url,
             type: method,
-            headers,
+            headers: headers,
             timeout: 60000,
             success: (body, textStatus, jqXhr) => {
                 const respHeaders: Headers = {};
@@ -192,9 +188,7 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, opts
                     // 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 (opts.silentNotFound && jqXhr.status === 404) {
-                    // report nothing
-                } else if (opts.silentInternalServerError && jqXhr.status === 500) {
+                } else if (silentNotFound && jqXhr.status === 404) {
                     // report nothing
                 } else {
                     await reportError(method, url, jqXhr.status, jqXhr.responseText);
@@ -204,7 +198,7 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, opts
             }
         };
 
-        if (opts.raw) {
+        if (raw) {
             options.dataType = "text";
         }
 
@@ -294,8 +288,8 @@ async function reportError(method: string, url: string, statusCode: number, resp
                 t("server.unknown_http_error_content", { statusCode, method, url, message: messageStr }),
                 15_000);
         }
-        const { logError } = await import("./ws.js");
-        logError(`${statusCode} ${method} ${url} - ${message}`);
+        const { throwError } = await import("./ws.js");
+        throwError(`${statusCode} ${method} ${url} - ${message}`);
     }
 }
 
@@ -303,7 +297,6 @@ export default {
     get,
     getWithSilentNotFound,
     post,
-    postWithSilentInternalServerError,
     put,
     patch,
     remove,

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

@@ -1,6 +1,5 @@
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-import shortcuts, { isIMEComposing, keyMatches, matchesShortcut } from "./shortcuts.js";
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import shortcuts, { keyMatches, matchesShortcut, isIMEComposing } from "./shortcuts.js";
 
 // Mock utils module
 vi.mock("./utils.js", () => ({
@@ -62,10 +61,9 @@ describe("shortcuts", () => {
     });
 
     describe("keyMatches", () => {
-        const createKeyboardEvent = (key: string, code?: string, extraProps: Partial<KeyboardEvent> = {}) => ({
+        const createKeyboardEvent = (key: string, code?: string) => ({
             key,
-            code: code || `Key${key.toUpperCase()}`,
-            ...extraProps
+            code: code || `Key${key.toUpperCase()}`
         } as KeyboardEvent);
 
         it("should match regular letter keys using key code", () => {
@@ -102,26 +100,6 @@ describe("shortcuts", () => {
             expect(consoleSpy).toHaveBeenCalled();
             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", { altKey: true });
-            expect(keyMatches(macOSAltAEvent, "a")).toBe(true);
-
-            // Option + H produces '˙'
-            const macOSAltHEvent = createKeyboardEvent("˙", "KeyH", { altKey: true });
-            expect(keyMatches(macOSAltHEvent, "h")).toBe(true);
-
-            // Option + S produces 'ß'
-            const macOSAltSEvent = createKeyboardEvent("ß", "KeyS", { altKey: true });
-            expect(keyMatches(macOSAltSEvent, "s")).toBe(true);
-        });
     });
 
     describe("matchesShortcut", () => {
@@ -222,42 +200,6 @@ describe("shortcuts", () => {
             expect(consoleSpy).toHaveBeenCalled();
             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({
-                key: "å",
-                code: "KeyA",
-                altKey: true
-            });
-            expect(matchesShortcut(macOSAltAEvent, "alt+a")).toBe(true);
-
-            // Option/Alt + H produces '˙'
-            const macOSAltHEvent = createKeyboardEvent({
-                key: "˙",
-                code: "KeyH",
-                altKey: true
-            });
-            expect(matchesShortcut(macOSAltHEvent, "alt+h")).toBe(true);
-
-            // Combined with Ctrl: Ctrl+Alt+S where Alt produces 'ß'
-            const macOSCtrlAltSEvent = createKeyboardEvent({
-                key: "ß",
-                code: "KeyS",
-                ctrlKey: true,
-                altKey: true
-            });
-            expect(matchesShortcut(macOSCtrlAltSEvent, "ctrl+alt+s")).toBe(true);
-        });
     });
 
     describe("bindGlobalShortcut", () => {

apps/client/src/services/shortcuts.ts

@@ -213,13 +213,7 @@ 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') {
-        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();
     }
 

apps/client/src/services/spaced_update.ts

@@ -1,31 +1,22 @@
-import type { SaveState } from "../components/note_context";
-import { getErrorMessage } from "./utils";
-
 type Callback = () => Promise<void> | void;
 
-export type StateCallback = (state: SaveState) => void;
-
 export default class SpacedUpdate {
     private updater: Callback;
     private lastUpdated: number;
     private changed: boolean;
     private updateInterval: number;
     private changeForbidden?: boolean;
-    private stateCallback?: StateCallback;
-    private lastState: SaveState = "saved";
 
-    constructor(updater: Callback, updateInterval = 1000, stateCallback?: StateCallback) {
+    constructor(updater: Callback, updateInterval = 1000) {
         this.updater = updater;
         this.lastUpdated = Date.now();
         this.changed = false;
         this.updateInterval = updateInterval;
-        this.stateCallback = stateCallback;
     }
 
     scheduleUpdate() {
         if (!this.changeForbidden) {
             this.changed = true;
-            this.onStateChanged("unsaved");
             setTimeout(() => this.triggerUpdate());
         }
     }
@@ -35,13 +26,10 @@ export default class SpacedUpdate {
             this.changed = false; // optimistic...
 
             try {
-                this.onStateChanged("saving");
                 await this.updater();
-                this.onStateChanged("saved");
             } catch (e) {
                 this.changed = true;
-                this.onStateChanged("error");
-                logError(getErrorMessage(e));
+
                 throw e;
             }
         }
@@ -71,35 +59,21 @@ export default class SpacedUpdate {
         this.updateInterval = interval;
     }
 
-    async triggerUpdate() {
+    triggerUpdate() {
         if (!this.changed) {
             return;
         }
 
         if (Date.now() - this.lastUpdated > this.updateInterval) {
-            this.onStateChanged("saving");
-            try {
-                await this.updater();
-                this.onStateChanged("saved");
-                this.changed = false;
-            } catch (e) {
-                this.onStateChanged("error");
-                logError(getErrorMessage(e));
-            }
+            this.updater();
             this.lastUpdated = Date.now();
+            this.changed = false;
         } else {
             // update isn't triggered but changes are still pending, so we need to schedule another check
             this.scheduleUpdate();
         }
     }
 
-    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,11 +1,10 @@
-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 { ensureMimeTypes, highlight, highlightAuto, loadTheme, Themes, type AutoHighlightResult, type HighlightResult, type Theme } from "@triliumnext/highlightjs";
 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;
 
@@ -77,15 +76,13 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
 }
 
 export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
-    if (!mimeTypeHint && highlightingLoaded) {
+    if (highlightingLoaded) {
         return;
     }
 
     // Load theme.
-    if (!highlightingLoaded) {
-        const currentThemeName = String(options.get("codeBlockTheme"));
-        await loadHighlightingTheme(currentThemeName);
-    }
+    const currentThemeName = String(options.get("codeBlockTheme"));
+    await loadHighlightingTheme(currentThemeName);
 
     // Load mime types.
     let mimeTypes: MimeType[];
@@ -97,7 +94,7 @@ export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
                 enabled: true,
                 mime: mimeTypeHint.replace("-", "/")
             }
-        ];
+        ]
     } else {
         mimeTypes = mime_types.getMimeTypes();
     }
@@ -127,9 +124,9 @@ export function isSyntaxHighlightEnabled() {
     if (!isShare) {
         const theme = options.get("codeBlockTheme");
         return !!theme && theme !== "none";
+    } else {
+        return true;
     }
-    return true;
-
 }
 
 /**

apps/client/src/services/toast.ts

@@ -1,9 +1,6 @@
 import { signal } from "@preact/signals";
 
-import appContext from "../components/app_context.js";
-import froca from "./froca.js";
-import { t } from "./i18n.js";
-import utils, { randomString } from "./utils.js";
+import utils from "./utils.js";
 
 export interface ToastOptions {
     id?: string;
@@ -64,29 +61,11 @@ function showErrorTitleAndMessage(title: string, message: string, timeout = 1000
     });
 }
 
-export async function showErrorForScriptNote(noteId: string, message: string) {
-    const note = await froca.getNote(noteId, true);
-
-    showPersistent({
-        id: `custom-widget-failure-${noteId}`,
-        title: t("toast.scripting-error", { title: note?.title ?? "" }),
-        icon: note?.getIcon() ?? "bx bx-error-circle",
-        message,
-        timeout: 15_000,
-        buttons: [
-            {
-                text: t("toast.open-script-note"),
-                onClick: () => appContext.tabManager.openInNewTab(noteId, null, true)
-            }
-        ]
-    });
-}
-
 //#region Toast store
 export const toasts = signal<ToastOptionsWithRequiredId[]>([]);
 
 function addToast(opts: ToastOptions) {
-    const id = opts.id ?? randomString();
+    const id = opts.id ?? crypto.randomUUID();
     const toast = { ...opts, id };
     toasts.value = [ ...toasts.value, toast ];
     return id;
@@ -95,7 +74,7 @@ function addToast(opts: ToastOptions) {
 function updateToast(id: string, partial: Partial<ToastOptions>) {
     toasts.value = toasts.value.map(toast => {
         if (toast.id === id) {
-            return { ...toast, ...partial };
+            return { ...toast, ...partial }
         }
         return toast;
     });

apps/client/src/services/utils.ts

@@ -1,8 +1,7 @@
 import { dayjs } from "@triliumnext/commons";
-import { snapdom } from "@zumer/snapdom";
-
+import type { ViewScope } from "./link.js";
 import FNote from "../entities/fnote";
-import type { ViewMode, ViewScope } from "./link.js";
+import { snapdom } from "@zumer/snapdom";
 
 const SVG_MIME = "image/svg+xml";
 
@@ -14,9 +13,7 @@ export function reloadFrontendApp(reason?: string) {
     }
 
     if (isElectron()) {
-        for (const window of dynamicRequire("@electron/remote").BrowserWindow.getAllWindows()) {
-            window.reload();
-        }
+        dynamicRequire("@electron/remote").BrowserWindow.getFocusedWindow()?.reload();
     } else {
         window.location.reload();
     }
@@ -116,8 +113,9 @@ function formatDateISO(date: Date) {
 export function formatDateTime(date: Date, userSuppliedFormat?: string): string {
     if (userSuppliedFormat?.trim()) {
         return dayjs(date).format(userSuppliedFormat);
+    } else {
+        return `${formatDate(date)} ${formatTime(date)}`;
     }
-    return `${formatDate(date)} ${formatTime(date)}`;
 }
 
 function localNowDateTime() {
@@ -189,15 +187,13 @@ export function formatSize(size: number | null | undefined) {
         return "";
     }
 
-    if (size === 0) {
-        return "0 B";
+    size = Math.max(Math.round(size / 1024), 1);
+
+    if (size < 1024) {
+        return `${size} KiB`;
+    } else {
+        return `${Math.round(size / 102.4) / 10} MiB`;
     }
-
-    const k = 1024;
-    const sizes = ["B", "KiB", "MiB", "GiB"];
-    const i = Math.floor(Math.log(size) / Math.log(k));
-
-    return `${Math.round((size / Math.pow(k, i)) * 100) / 100} ${sizes[i]}`;
 }
 
 function toObject<T, R>(array: T[], fn: (arg0: T) => [key: string, value: R]) {
@@ -212,7 +208,7 @@ function toObject<T, R>(array: T[], fn: (arg0: T) => [key: string, value: R]) {
     return obj;
 }
 
-export function randomString(len: number = 16) {
+export function randomString(len: number) {
     let text = "";
     const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
@@ -301,18 +297,18 @@ function formatHtml(html: string) {
     let indent = "\n";
     const tab = "\t";
     let i = 0;
-    const pre: { indent: string; tag: string }[] = [];
+    let pre: { indent: string; tag: string }[] = [];
 
     html = html
-        .replace(new RegExp("<pre>([\\s\\S]+?)?</pre>"), (x) => {
+        .replace(new RegExp("<pre>([\\s\\S]+?)?</pre>"), function (x) {
             pre.push({ indent: "", tag: x });
-            return `<--TEMPPRE${i++}/-->`;
+            return "<--TEMPPRE" + i++ + "/-->";
         })
-        .replace(new RegExp("<[^<>]+>[^<]?", "g"), (x) => {
+        .replace(new RegExp("<[^<>]+>[^<]?", "g"), function (x) {
             let ret;
             const tagRegEx = /<\/?([^\s/>]+)/.exec(x);
-            const tag = tagRegEx ? tagRegEx[1] : "";
-            const p = new RegExp("<--TEMPPRE(\\d+)/-->").exec(x);
+            let tag = tagRegEx ? tagRegEx[1] : "";
+            let p = new RegExp("<--TEMPPRE(\\d+)/-->").exec(x);
 
             if (p) {
                 const pInd = parseInt(p[1]);
@@ -322,22 +318,24 @@ function formatHtml(html: string) {
             if (["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "menuitem", "meta", "param", "source", "track", "wbr"].indexOf(tag) >= 0) {
                 // self closing tag
                 ret = indent + x;
-            } else if (x.indexOf("</") < 0) {
-                //open tag
-                if (x.charAt(x.length - 1) !== ">") ret = indent + x.substr(0, x.length - 1) + indent + tab + x.substr(x.length - 1, x.length);
-                else ret = indent + x;
-                !p && (indent += tab);
             } else {
-                //close tag
-                indent = indent.substr(0, indent.length - 1);
-                if (x.charAt(x.length - 1) !== ">") ret = indent + x.substr(0, x.length - 1) + indent + x.substr(x.length - 1, x.length);
-                else ret = indent + x;
+                if (x.indexOf("</") < 0) {
+                    //open tag
+                    if (x.charAt(x.length - 1) !== ">") ret = indent + x.substr(0, x.length - 1) + indent + tab + x.substr(x.length - 1, x.length);
+                    else ret = indent + x;
+                    !p && (indent += tab);
+                } else {
+                    //close tag
+                    indent = indent.substr(0, indent.length - 1);
+                    if (x.charAt(x.length - 1) !== ">") ret = indent + x.substr(0, x.length - 1) + indent + x.substr(x.length - 1, x.length);
+                    else ret = indent + x;
+                }
             }
             return ret;
         });
 
     for (i = pre.length; i--;) {
-        html = html.replace(`<--TEMPPRE${i}/-->`, pre[i].tag.replace("<pre>", "<pre>\n").replace("</pre>", `${pre[i].indent}</pre>`));
+        html = html.replace("<--TEMPPRE" + i + "/-->", pre[i].tag.replace("<pre>", "<pre>\n").replace("</pre>", pre[i].indent + "</pre>"));
     }
 
     return html.charAt(0) === "\n" ? html.substr(1, html.length - 1) : html;
@@ -366,11 +364,11 @@ type dynamicRequireMappings = {
 export function dynamicRequire<T extends keyof dynamicRequireMappings>(moduleName: T): Awaited<dynamicRequireMappings[T]>{
     if (typeof __non_webpack_require__ !== "undefined") {
         return __non_webpack_require__(moduleName);
+    } else {
+        // explicitly pass as string and not as expression to suppress webpack warning
+        // 'Critical dependency: the request of a dependency is an expression'
+        return require(`${moduleName}`);
     }
-    // explicitly pass as string and not as expression to suppress webpack warning
-    // 'Critical dependency: the request of a dependency is an expression'
-    return require(`${moduleName}`);
-
 }
 
 function timeLimit<T>(promise: Promise<T>, limitMs: number, errorMessage?: string) {
@@ -441,20 +439,7 @@ async function openInAppHelp($button: JQuery<HTMLElement>) {
  * @param inAppHelpPage the ID of the help note (excluding the `_help_` prefix).
  * @returns a promise that resolves once the help has been opened.
  */
-export function openInAppHelpFromUrl(inAppHelpPage: string) {
-    return openInReusableSplit(`_help_${inAppHelpPage}`, "contextual-help");
-}
-
-/**
- * Similar to opening a new note in a split, but re-uses an existing split if there is already one open with the same view mode.
- *
- * @param targetNoteId the note ID to open in the split.
- * @param targetViewMode the view mode of the split to open the note in.
- * @param openOpts additional options for opening the note.
- */
-export async function openInReusableSplit(targetNoteId: string, targetViewMode: ViewMode, openOpts: {
-    hoistedNoteId?: string;
-} = {}) {
+export async function openInAppHelpFromUrl(inAppHelpPage: string) {
     // Dynamic import to avoid import issues in tests.
     const appContext = (await import("../components/app_context.js")).default;
     const activeContext = appContext.tabManager.getActiveContext();
@@ -462,20 +447,23 @@ export async function openInReusableSplit(targetNoteId: string, targetViewMode:
         return;
     }
     const subContexts = activeContext.getSubContexts();
-    const existingSubcontext = subContexts.find((s) => s.viewScope?.viewMode === targetViewMode);
-    const viewScope: ViewScope = { viewMode: targetViewMode };
-    if (!existingSubcontext) {
-        // The target split is not already open, open a new split with it.
+    const targetNote = `_help_${inAppHelpPage}`;
+    const helpSubcontext = subContexts.find((s) => s.viewScope?.viewMode === "contextual-help");
+    const viewScope: ViewScope = {
+        viewMode: "contextual-help",
+    };
+    if (!helpSubcontext) {
+        // The help is not already open, open a new split with it.
         const { ntxId } = subContexts[subContexts.length - 1];
         appContext.triggerCommand("openNewNoteSplit", {
             ntxId,
-            notePath: targetNoteId,
-            hoistedNoteId: openOpts.hoistedNoteId,
+            notePath: targetNote,
+            hoistedNoteId: "_help",
             viewScope
-        });
+        })
     } else {
-        // There is already a target split open, make sure it opens on the right note.
-        existingSubcontext.setNote(targetNoteId, { viewScope });
+        // There is already a help window open, make sure it opens on the right note.
+        helpSubcontext.setNote(targetNote, { viewScope });
     }
 }
 
@@ -511,8 +499,8 @@ export function escapeRegExp(str: string) {
 function areObjectsEqual(...args: unknown[]) {
     let i;
     let l;
-    let leftChain: object[];
-    let rightChain: object[];
+    let leftChain: Object[];
+    let rightChain: Object[];
 
     function compare2Objects(x: unknown, y: unknown) {
         let p;
@@ -697,9 +685,9 @@ async function downloadAsSvg(nameWithoutExtension: string, svgSource: string | S
 
     try {
         const result = await snapdom(element, {
-            backgroundColor: "transparent",
-            scale: 2
-        });
+                backgroundColor: "transparent",
+                scale: 2
+            });
         triggerDownload(`${nameWithoutExtension}.svg`, result.url);
     } finally {
         cleanup();
@@ -735,9 +723,9 @@ async function downloadAsPng(nameWithoutExtension: string, svgSource: string | S
 
     try {
         const result = await snapdom(element, {
-            backgroundColor: "transparent",
-            scale: 2
-        });
+                backgroundColor: "transparent",
+                scale: 2
+            });
         const pngImg = await result.toPng();
         await triggerDownload(`${nameWithoutExtension}.png`, pngImg.src);
     } finally {
@@ -765,11 +753,11 @@ export function getSizeFromSvg(svgContent: string) {
         return {
             width: parseFloat(width),
             height: parseFloat(height)
-        };
+        }
+    } else {
+        console.warn("SVG export error", svgDocument.documentElement);
+        return null;
     }
-    console.warn("SVG export error", svgDocument.documentElement);
-    return null;
-
 }
 
 /**
@@ -898,9 +886,9 @@ export function mapToKeyValueArray<K extends string | number | symbol, V>(map: R
 export function getErrorMessage(e: unknown) {
     if (e && typeof e === "object" && "message" in e && typeof e.message === "string") {
         return e.message;
+    } else {
+        return "Unknown error";
     }
-    return "Unknown error";
-
 }
 
 /**

apps/client/src/services/ws.ts

@@ -133,6 +133,49 @@ 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/stylesheets/boxicons-compat.css

@@ -1,498 +0,0 @@
-.bx-ul
-{
-    margin-left: 2em;
-    padding-left: 0;
-
-    list-style: none;
-}
-.bx-ul > li
-{
-    position: relative;
-}
-.bx-ul .bx
-{
-    font-size: inherit;
-    line-height: inherit;
-
-    position: absolute;
-    left: -2em;
-
-    width: 2em;
-
-    text-align: center;
-}
-@-webkit-keyframes spin
-{
-    0%
-    {
-        -webkit-transform: rotate(0);
-                transform: rotate(0);
-    }
-    100%
-    {
-        -webkit-transform: rotate(359deg);
-                transform: rotate(359deg);
-    }
-}
-@keyframes spin
-{
-    0%
-    {
-        -webkit-transform: rotate(0);
-                transform: rotate(0);
-    }
-    100%
-    {
-        -webkit-transform: rotate(359deg);
-                transform: rotate(359deg);
-    }
-}
-@-webkit-keyframes burst
-{
-    0%
-    {
-        -webkit-transform: scale(1);
-                transform: scale(1);
-
-        opacity: 1;
-    }
-    90%
-    {
-        -webkit-transform: scale(1.5);
-                transform: scale(1.5);
-
-        opacity: 0;
-    }
-}
-@keyframes burst
-{
-    0%
-    {
-        -webkit-transform: scale(1);
-                transform: scale(1);
-
-        opacity: 1;
-    }
-    90%
-    {
-        -webkit-transform: scale(1.5);
-                transform: scale(1.5);
-
-        opacity: 0;
-    }
-}
-@-webkit-keyframes flashing
-{
-    0%
-    {
-        opacity: 1;
-    }
-    45%
-    {
-        opacity: 0;
-    }
-    90%
-    {
-        opacity: 1;
-    }
-}
-@keyframes flashing
-{
-    0%
-    {
-        opacity: 1;
-    }
-    45%
-    {
-        opacity: 0;
-    }
-    90%
-    {
-        opacity: 1;
-    }
-}
-@-webkit-keyframes fade-left
-{
-    0%
-    {
-        -webkit-transform: translateX(0);
-                transform: translateX(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateX(-20px);
-                transform: translateX(-20px);
-
-        opacity: 0;
-    }
-}
-@keyframes fade-left
-{
-    0%
-    {
-        -webkit-transform: translateX(0);
-                transform: translateX(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateX(-20px);
-                transform: translateX(-20px);
-
-        opacity: 0;
-    }
-}
-@-webkit-keyframes fade-right
-{
-    0%
-    {
-        -webkit-transform: translateX(0);
-                transform: translateX(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateX(20px);
-                transform: translateX(20px);
-
-        opacity: 0;
-    }
-}
-@keyframes fade-right
-{
-    0%
-    {
-        -webkit-transform: translateX(0);
-                transform: translateX(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateX(20px);
-                transform: translateX(20px);
-
-        opacity: 0;
-    }
-}
-@-webkit-keyframes fade-up
-{
-    0%
-    {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateY(-20px);
-                transform: translateY(-20px);
-
-        opacity: 0;
-    }
-}
-@keyframes fade-up
-{
-    0%
-    {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateY(-20px);
-                transform: translateY(-20px);
-
-        opacity: 0;
-    }
-}
-@-webkit-keyframes fade-down
-{
-    0%
-    {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateY(20px);
-                transform: translateY(20px);
-
-        opacity: 0;
-    }
-}
-@keyframes fade-down
-{
-    0%
-    {
-        -webkit-transform: translateY(0);
-                transform: translateY(0);
-
-        opacity: 1;
-    }
-    75%
-    {
-        -webkit-transform: translateY(20px);
-                transform: translateY(20px);
-
-        opacity: 0;
-    }
-}
-@-webkit-keyframes tada
-{
-    from
-    {
-        -webkit-transform: scale3d(1, 1, 1);
-                transform: scale3d(1, 1, 1);
-    }
-
-    10%,
-    20%
-    {
-        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
-                transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
-    }
-
-    30%,
-    50%,
-    70%,
-    90%
-    {
-        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
-                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
-    }
-
-    40%,
-    60%,
-    80%
-    {
-        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
-                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -10deg);
-    }
-
-    to
-    {
-        -webkit-transform: scale3d(1, 1, 1);
-                transform: scale3d(1, 1, 1);
-    }
-}
-
-@keyframes tada
-{
-    from
-    {
-        -webkit-transform: scale3d(1, 1, 1);
-                transform: scale3d(1, 1, 1);
-    }
-
-    10%,
-    20%
-    {
-        -webkit-transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
-                transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -10deg);
-    }
-
-    30%,
-    50%,
-    70%,
-    90%
-    {
-        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
-                transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 10deg);
-    }
-
-    40%,
-    60%,
-    80%
-    {
-        -webkit-transform: rotate3d(0, 0, 1, -10deg);
-                transform: rotate3d(0, 0, 1, -10deg);
-    }
-
-    to
-    {
-        -webkit-transform: scale3d(1, 1, 1);
-                transform: scale3d(1, 1, 1);
-    }
-}
-.bx-spin
-{
-    -webkit-animation: spin 2s linear infinite;
-            animation: spin 2s linear infinite;
-}
-.bx-spin-hover:hover
-{
-    -webkit-animation: spin 2s linear infinite;
-            animation: spin 2s linear infinite;
-}
-
-.bx-tada
-{
-    -webkit-animation: tada 1.5s ease infinite;
-            animation: tada 1.5s ease infinite;
-}
-.bx-tada-hover:hover
-{
-    -webkit-animation: tada 1.5s ease infinite;
-            animation: tada 1.5s ease infinite;
-}
-
-.bx-flashing
-{
-    -webkit-animation: flashing 1.5s infinite linear;
-            animation: flashing 1.5s infinite linear;
-}
-.bx-flashing-hover:hover
-{
-    -webkit-animation: flashing 1.5s infinite linear;
-            animation: flashing 1.5s infinite linear;
-}
-
-.bx-burst
-{
-    -webkit-animation: burst 1.5s infinite linear;
-            animation: burst 1.5s infinite linear;
-}
-.bx-burst-hover:hover
-{
-    -webkit-animation: burst 1.5s infinite linear;
-            animation: burst 1.5s infinite linear;
-}
-.bx-fade-up
-{
-    -webkit-animation: fade-up 1.5s infinite linear;
-            animation: fade-up 1.5s infinite linear;
-}
-.bx-fade-up-hover:hover
-{
-    -webkit-animation: fade-up 1.5s infinite linear;
-            animation: fade-up 1.5s infinite linear;
-}
-.bx-fade-down
-{
-    -webkit-animation: fade-down 1.5s infinite linear;
-            animation: fade-down 1.5s infinite linear;
-}
-.bx-fade-down-hover:hover
-{
-    -webkit-animation: fade-down 1.5s infinite linear;
-            animation: fade-down 1.5s infinite linear;
-}
-.bx-fade-left
-{
-    -webkit-animation: fade-left 1.5s infinite linear;
-            animation: fade-left 1.5s infinite linear;
-}
-.bx-fade-left-hover:hover
-{
-    -webkit-animation: fade-left 1.5s infinite linear;
-            animation: fade-left 1.5s infinite linear;
-}
-.bx-fade-right
-{
-    -webkit-animation: fade-right 1.5s infinite linear;
-            animation: fade-right 1.5s infinite linear;
-}
-.bx-fade-right-hover:hover
-{
-    -webkit-animation: fade-right 1.5s infinite linear;
-            animation: fade-right 1.5s infinite linear;
-}
-.bx-xs
-{
-    font-size: 1rem!important;
-}
-.bx-sm
-{
-    font-size: 1.55rem!important;
-}
-.bx-md
-{
-    font-size: 2.25rem!important;
-}
-.bx-lg
-{
-    font-size: 3.0rem!important;
-}
-.bx-fw
-{
-    font-size: 1.2857142857em;
-    line-height: .8em;
-
-    width: 1.2857142857em;
-    height: .8em;
-    margin-top: -.2em!important;
-
-    vertical-align: middle;
-}
-.bx-pull-left
-{
-    float: left;
-
-    margin-right: .3em!important;
-}
-.bx-pull-right
-{
-    float: right;
-
-    margin-left: .3em!important;
-}
-.bx-rotate-90
-{
-    transform: rotate(90deg);
-
-    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
-}
-.bx-rotate-180
-{
-    transform: rotate(180deg);
-
-    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
-}
-.bx-rotate-270
-{
-    transform: rotate(270deg);
-
-    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
-}
-.bx-flip-horizontal
-{
-    transform: scaleX(-1);
-
-    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)';
-}
-.bx-flip-vertical
-{
-    transform: scaleY(-1);
-
-    -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)';
-}
-.bx-border
-{
-    padding: .25em;
-
-    border: .07em solid rgba(0,0,0,.1);
-    border-radius: .25em;
-}
-.bx-border-circle
-{
-    padding: .25em;
-
-    border: .07em solid rgba(0,0,0,.1);
-    border-radius: 50%;
-}
-
-/** Custom icon **/
-.bx-empty {
-    width: 1em;
-    display: inline-block;
-}

apps/client/src/stylesheets/llm_chat.css

@@ -0,0 +1,450 @@
+/* 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

@@ -1,5 +1,3 @@
-@import "./boxicons-compat.css";
-
 @font-face {
     font-family: Montserrat;
     src: url(../fonts/Montserrat-Light.ttf);
@@ -28,7 +26,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: 90svh;
+    --tn-modal-max-height: 90vh;
 
     --tree-item-light-theme-max-color-lightness: 50;
     --tree-item-dark-theme-min-color-lightness: 75;
@@ -111,7 +109,6 @@ 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);
 }
 
@@ -153,11 +150,6 @@ textarea,
     background: var(--input-background-color);
 }
 
-.form-control:disabled {
-    background-color: var(--input-background-color);
-    opacity: 0.6;
-}
-
 .form-control:focus {
     color: var(--input-text-color);
     background: var(--input-background-color);
@@ -230,6 +222,10 @@ 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;
 }
@@ -415,7 +411,6 @@ body.desktop .tabulator-popup-container,
 
 .dropdown-menu.static {
     box-shadow: unset;
-    backdrop-filter: unset !important;
 }
 
 .dropend .dropdown-toggle::after {
@@ -428,19 +423,20 @@ body.desktop .tabulator-popup-container,
     pointer-events: none;
 }
 
-.dropdown-menu .disabled .contextual-help {
+.dropdown-menu .disabled .disabled-tooltip {
     pointer-events: all;
     margin-inline-start: 8px;
     font-size: 0.75rem;
-    color: var(--contextual-help-icon-color);
+    color: var(--disabled-tooltip-icon-color);
     cursor: help;
     opacity: 0.75;
 }
 
-.dropdown-menu .disabled .contextual-help:hover {
+.dropdown-menu .disabled .disabled-tooltip:hover {
     opacity: 1;
 }
 
+.dropdown-menu a:hover:not(.disabled),
 .dropdown-item:hover:not(.disabled, .dropdown-container-item),
 .tabulator-menu-item:hover,
 :root .excalidraw .context-menu .context-menu-item:hover {
@@ -461,23 +457,13 @@ body.desktop .tabulator-popup-container,
     visibility: hidden;
 }
 
-.dropdown-menu:not(#context-menu-container) .dropdown-item,
-body.desktop .dropdown-menu .dropdown-toggle,
+body.desktop .dropdown-menu:not(#context-menu-container) .dropdown-item,
 body #context-menu-container .dropdown-item > span,
 body.mobile .dropdown .dropdown-submenu > span {
     display: flex;
     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;
@@ -535,7 +521,9 @@ body.mobile .dropdown .dropdown-submenu {
 .cm-editor {
     height: 100%;
     outline: none !important;
+    border-radius: 6px;
     overflow: hidden;
+    margin: 4px;
     font-size: var(--monospace-font-size);
 }
 
@@ -641,11 +629,6 @@ pre:not(.hljs) {
     padding: var(--padding-size);
 }
 
-pre:has(> .cm-editor) {
-    padding: 0;
-    margin: 0;
-}
-
 pre > button.copy-button {
     position: absolute;
     top: var(--copy-button-margin-size);
@@ -737,10 +720,6 @@ table.promoted-attributes-in-tooltip th {
     z-index: 32767 !important;
 }
 
-.pre-wrap-text {
-    white-space: pre-wrap;
-}
-
 .bs-tooltip-bottom .tooltip-arrow::before {
     border-bottom-color: var(--main-border-color) !important;
 }
@@ -947,7 +926,6 @@ table.promoted-attributes-in-tooltip th {
     color: var(--muted-text-color);
     opacity: 0.6;
     line-height: 1;
-    word-wrap: break-word;
 }
 
 .aa-dropdown-menu .aa-suggestion p {
@@ -1143,6 +1121,11 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     border-color: var(--main-border-color) !important;
 }
 
+.bx-empty {
+    width: 1em;
+    display: inline-block;
+}
+
 .modal-header {
     padding: 0.5rem 1rem 0.5rem 1rem !important; /* make modal header padding slightly smaller */
 }
@@ -1268,7 +1251,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: 2500;
+    z-index: 1000;
     background: rgba(0, 0, 0, 0.1);
 }
 
@@ -1332,20 +1315,14 @@ body.desktop li.dropdown-submenu:hover > ul.dropdown-menu {
     top: 0;
     inset-inline-start: calc(100% - 2px); /* -2px, otherwise there's a small gap between menu and submenu where the hover can disappear */
     margin-top: -10px;
+    min-width: 15rem;
     /* to make submenu scrollable https://github.com/zadam/trilium/issues/3136 */
     max-height: 600px;
     overflow: auto;
 }
 
-body.desktop .dropdown-submenu > .dropdown-menu {
-    min-width: max-content;
-    max-width: 300px;
-}
-
-.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);
+    inset-inline-start: calc(-100% + 10px);
 }
 
 .right-dropdown-widget {
@@ -1544,8 +1521,7 @@ 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 .dropdown-menu.mobile-bottom-menu.show {
+    body.mobile #launcher-container .dropdown > .dropdown-menu.show {
         --dropdown-bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size));
         position: fixed !important;
         bottom: var(--dropdown-bottom) !important;
@@ -1557,16 +1533,6 @@ 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;
@@ -1587,7 +1553,7 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         position: absolute;
         top: 0;
         inset-inline-start: 0;
-        height: 100dvh;
+        bottom: 0;
         width: 85vw;
         padding-top: env(safe-area-inset-top);
         transition: transform 250ms ease-in-out;
@@ -1635,7 +1601,6 @@ 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 {
@@ -1651,27 +1616,13 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         word-break: break-all;
     }
 
-    body.mobile .jump-to-note-dialog {
-        .modal-header {
-            padding-bottom: 0.75rem !important;
-        }
+    body.mobile .jump-to-note-dialog .modal-content {
+        overflow-y: 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 .jump-to-note-dialog .modal-dialog .aa-dropdown-menu {
+        max-height: unset;
+        overflow: auto;
     }
 
     body.mobile .modal-dialog .dropdown-menu {
@@ -1705,16 +1656,39 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     #detail-container {
         background: var(--main-background-color);
     }
+}
 
-    body.mobile {
-        .modal-dialog {
-            margin: var(--bs-modal-margin);
-            max-width: 80%;
-        }
+@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);
+    }
 
-        .modal-content {
-            height: 100%;
-        }
+    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;
     }
 }
 
@@ -1809,7 +1783,7 @@ button.close:hover {
     display: none;
 }
 
-.reference-link .tn-icon {
+.reference-link .bx {
     position: relative;
     top: 1px;
     margin-inline-end: 3px;
@@ -1961,10 +1935,6 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
     padding-inline-start: 1em;
 }
 
-.tab-row-widget {
-    contain: inline-size;
-}
-
 #tab-row-left-spacer {
     width: env(titlebar-area-x);
     -webkit-app-region: drag;
@@ -1974,7 +1944,7 @@ body.electron.platform-darwin:not(.native-titlebar):not(.full-screen) #tab-row-l
     width: 80px;
 }
 
-body.electron:not(.platform-darwin) .tab-row-container {
+.tab-row-widget {
     padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw));
 }
 
@@ -2025,10 +1995,8 @@ body.zen .shared-info-widget,
 body.zen .ribbon-container:not(:has(.classic-toolbar-widget)),
 body.zen .ribbon-container:has(.classic-toolbar-widget) .ribbon-top-row,
 body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget)),
+body.zen .note-icon-widget,
 body.zen .title-row .icon-action,
-body.zen .note-badges > *:not(.read-only-badge),
-body.zen .ribbon-button-container,
-body.zen .inline-title,
 body.zen .promoted-attributes-widget,
 body.zen .floating-buttons-children > *:not(.bx-edit-alt),
 body.zen .action-button,
@@ -2051,11 +2019,11 @@ body.zen #launcher-pane {
 }
 
 body.zen .title-row {
+    display: block !important;
     height: unset !important;
     -webkit-app-region: drag;
     padding-inline-start: env(titlebar-area-x);
     padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw) + 2.5em);
-    border-bottom: none !important;
 }
 
 body.zen .floating-buttons {
@@ -2075,6 +2043,8 @@ body.zen .floating-buttons-children .button-widget {
 body.zen .note-title-widget,
 body.zen .note-title-widget input {
     font-size: 1rem !important;
+    background: transparent !important;
+    pointer-events: none;
 }
 
 body.zen #detail-container {
@@ -2134,107 +2104,58 @@ body.zen:not(.backdrop-effects-disabled) .note-split.type-text .scrolling-contai
 
 /* Fixed formatting toolbar */
 
-body.zen:not(.experimental-feature-new-layout) {
-    .note-split .ribbon-container {
-        position: fixed;
-        left: 0;
-        bottom: 20px;
-        width: 100%;
-        z-index: 1000;
-        opacity: 0; /* Hidden unless the current note split is focused */
-        pointer-events: none;
-        transition: opacity 100ms linear;
-    }
-
-    .note-split:focus-within .ribbon-container {
-        opacity: 1; /* Show when the note split is focused */
-    }
-
-    .note-split .ribbon-container .ribbon-body {
-        border: 0;
-    }
-
-    .note-split .ribbon-container .classic-toolbar-widget {
-        margin: auto;
-        width: fit-content;
-        box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
-        border-radius: 8px;
-        border: 1px solid var(--main-border-color);
-        padding: 4px;
-        background: var(--menu-background-color);
-    }
-
-    .note-split .ribbon-container .classic-toolbar-widget:not(:has(> .ck-toolbar)) {
-        /* Hide the toolbar wrapper if the toolbar is missing */
-        display: none;
-    }
-
-    .note-split:focus-within .ribbon-container .classic-toolbar-widget {
-        pointer-events: all;
-    }
-
-    @media (max-width: 1300px) {
-        .note-split .ribbon-container .classic-toolbar-widget {
-            /* Set the toolbar to full with */
-            width: 100%;
-        }
-
-        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
-        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
-        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
-        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
-        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
-            /* Force toolbar items overflow dropdowns open upwards */
-            top: auto;
-            bottom: 100%;
-        }
-    }
+body.zen .note-split .ribbon-container {
+    position: fixed;
+    left: 0;
+    bottom: 20px;
+    width: 100%;
+    z-index: 1000;
+    opacity: 0; /* Hidden unless the current note split is focused */
+    pointer-events: none;
+    transition: opacity 100ms linear;
 }
 
-body.zen.experimental-feature-new-layout {
-    .status-bar {
-        display: none;
+body.zen .note-split:focus-within .ribbon-container {
+    opacity: 1; /* Show when the note split is focused */
+}
+
+body.zen .note-split .ribbon-container .ribbon-body {
+    border: 0;
+}
+
+body.zen .note-split .ribbon-container .classic-toolbar-widget {
+    margin: auto;
+    width: fit-content;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
+    border-radius: 8px;
+    border: 1px solid var(--main-border-color);
+    padding: 4px;
+    background: var(--menu-background-color);
+}
+
+body.zen .note-split .ribbon-container .classic-toolbar-widget:not(:has(> .ck-toolbar)) {
+    /* Hide the toolbar wrapper if the toolbar is missing */
+    display: none;
+}
+
+body.zen .note-split:focus-within .ribbon-container .classic-toolbar-widget {
+    pointer-events: all;
+}
+
+@media (max-width: 1300px) {
+    body.zen .note-split .ribbon-container .classic-toolbar-widget {
+        /* Set the toolbar to full with */
+        width: 100%;
     }
 
-    .classic-toolbar-widget {
-        position: fixed;
-        left: 50%;
-        bottom: 20px;
-        z-index: 1000;
-        opacity: 0; /* Hidden unless the current note split is focused */
-        pointer-events: none;
-        transition: opacity 100ms linear;
-        width: fit-content;
-        box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
-        border-radius: 8px;
-        border: 1px solid var(--main-border-color);
-        padding: 4px;
-        background: var(--menu-background-color) !important;
-        transform: translateX(-50%);
-        backdrop-filter: blur(6px);
-    }
-
-    #root-widget:has(.note-split.type-text:focus-within) .classic-toolbar-widget,
-    .classic-toolbar-widget:focus-within {
-        opacity: 1; /* Show when the note split is focused */
-        pointer-events: all;
-    }
-
-    @media (max-width: 1300px) {
-        .classic-toolbar-widget {
-            /* Set the toolbar to full with */
-            width: 100%;
-        }
-
-        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
-        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
-        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
-        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
-        .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
-            /* Force toolbar items overflow dropdowns open upwards */
-            top: auto;
-            bottom: 100%;
-        }
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
+        /* Force toolbar items overflow dropdowns open upwards */
+        top: auto;
+        bottom: 100%;
     }
 }
 
@@ -2428,7 +2349,7 @@ footer.webview-footer button {
     gap: 5px;
 }
 
-.right-pane-tab .tab-title .tn-icon {
+.right-pane-tab .tab-title .bx {
     font-size: 1.1em;
 }
 
@@ -2541,11 +2462,6 @@ footer.webview-footer button {
     inset-inline-start: 10px;
 }
 
-.content-floating-buttons.top-right {
-    top: 10px;
-    inset-inline-end: 10px;
-}
-
 .content-floating-buttons.bottom-left {
     bottom: 10px;
     inset-inline-start: 10px;
@@ -2556,11 +2472,18 @@ footer.webview-footer button {
     inset-inline-end: 10px;
 }
 
-.content-floating-buttons button.tn-icon {
+.content-floating-buttons button.bx {
     font-size: 130%;
     padding: 1px 10px 1px 10px;
 }
 
+/* Customized icons */
+
+.bx-tn-toc::before {
+    content: "\ec24";
+    transform: rotate(180deg);
+}
+
 /* CK Editor */
 
 /* Insert text snippet: limit the width of the listed items to avoid overly long names */
@@ -2630,14 +2553,14 @@ iframe.print-iframe {
             }
         }
 
-        body:not(.ios) #root-widget.virtual-keyboard-opened .note-split:not(.active) {
+        #root-widget.virtual-keyboard-opened .note-split:not(:focus-within) {
             max-height: 80px;
             opacity: 0.4;
         }
     }
 }
 
-.title-row {
+body.desktop .title-row {
     height: 50px;
     min-height: 50px;
     align-items: center;

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,42 +40,10 @@
     border-bottom: var(--col-header-bottom-border);
     background: var(--col-header-background-color);
     color: var(--col-header-text-color);
-    font-weight: normal;
+}
 
-    .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;
-            }
-        }
-    }
+.tabulator .tabulator-col-content {
+    padding: 8px 4px !important;
 }
 
 @media (hover: hover) and (pointer: fine) {
@@ -112,6 +80,7 @@
 
 .tabulator-tableholder {
     padding-top: 10px;
+    height: unset !important; /* Don't extend on the full height */
 }
 
 /* Rows */
@@ -130,14 +99,6 @@
     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 {
@@ -159,14 +120,11 @@
     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);
 }
@@ -216,6 +174,10 @@
     margin: 0;
 }
 
+.tabulator .tabulator-footer {
+    color: var(--main-text-color);
+}
+
 /* Context menus */
 
 .tabulator-popup-container {
@@ -230,27 +192,8 @@
 }
 
 /* Footer */
+
 :root .tabulator .tabulator-footer {
-    background: transparent;
-    color: var(--main-text-color);
-    border-top: 1px solid var(--main-border-color);
+    border-top: unset;
     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-dark.css

@@ -19,7 +19,7 @@
     --dropdown-border-color: #555;
     --dropdown-shadow-opacity: 0.4;
     --dropdown-item-icon-destructive-color: #de6e5b;
-    --contextual-help-icon-color: #7fd2ef;
+    --disabled-tooltip-icon-color: #7fd2ef;
 
     --accented-background-color: #555;
     --more-accented-background-color: #777;
@@ -114,8 +114,4 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 
 .use-note-color {
     --custom-color: var(--dark-theme-custom-color);
-}
-
-span.fancytree-active {
-    color: var(--dark-theme-custom-color, var(--active-item-text-color));
-}
+}

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

@@ -23,7 +23,7 @@ html {
     --dropdown-border-color: #ccc;
     --dropdown-shadow-opacity: 0.2;
     --dropdown-item-icon-destructive-color: #ec5138;
-    --contextual-help-icon-color: #004382;
+    --disabled-tooltip-icon-color: #004382;
 
     --accented-background-color: #f5f5f5;
     --more-accented-background-color: #ddd;
@@ -89,17 +89,13 @@ html {
     --custom-color: var(--light-theme-custom-color);
 }
 
-:root .reference-link.use-note-color,
-:root .reference-link.use-note-color:hover,
-.ck-content a.reference-link.use-note-color > span,
-.board-note.use-note-color {
+:root .reference-link,
+:root .reference-link:hover,
+.ck-content a.reference-link > span,
+.board-note {
     color: var(--light-theme-custom-color, inherit);
 }
 
 .use-note-color {
     --custom-color: var(--light-theme-custom-color);
-}
-
-span.fancytree-active {
-    color: var(--light-theme-custom-color, var(--active-item-text-color));
-}
+}

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

@@ -6,7 +6,7 @@
  */
 :root {
 
-    /*
+    /* 
      * ⚠️ NOTICE: This theme is currently in the beta stage of development.
      * The names and purposes of these CSS variables are subject to frequent changes.
      */
@@ -21,8 +21,8 @@
     --subtle-border-color: #313131;
     --dropdown-border-color: #404040;
     --dropdown-shadow-opacity: 0.6;
-    --dropdown-item-icon-destructive-color: #d58477;
-    --contextual-help-icon-color: #7fd2ef;
+    --dropdown-item-icon-destructive-color: #de6e5b;
+    --disabled-tooltip-icon-color: #7fd2ef;
 
     --accented-background-color: #555;
 
@@ -74,13 +74,11 @@
     --select-arrow-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
     --select-group-heading-text-color: gray;
 
-    --link-color: #95c3d9;
-    --link-hover-background: #75c2e324;
-    --link-hover-color: var(--link-color);
-    --link-selection-outline-color: #75c2e385;
+    --link-hover-background: #ffffff26;
+    --link-hover-color: white;
 
     --hover-item-text-color: #efefef;
-    --hover-item-background-color: #ffffff16;
+    --hover-item-background-color: #ffffff24;
     --hover-item-border-color: transparent;
 
     --active-item-text-color: var(--left-pane-text-color);
@@ -134,7 +132,6 @@
     --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;
@@ -173,9 +170,6 @@
     --protected-session-active-icon-color: #8edd8e;
     --sync-status-error-pulse-color: #f47871;
 
-    --classic-toolbar-vert-layout-background-color: #ffffff0d;
-    --classic-toolbar-horiz-layout-background-color: var(--main-background-color);
-
     --center-pane-vert-layout-background-color-bgfx: #0c0c0c69;
     --center-pane-horiz-layout-background-color-bgfx: #1e1e1ec7;
 
@@ -188,7 +182,7 @@
 
     --tab-close-button-hover-background: #a45353;
     --tab-close-button-hover-color: white;
-
+    
     --active-tab-background-color: #ffffff1c;
     --active-tab-hover-background-color: var(--active-tab-background-color);
     --active-tab-icon-color: #a9a9a9;
@@ -205,20 +199,9 @@
     --badge-background-color: #ffffff1a;
     --badge-text-color: var(--muted-text-color);
 
-    --badge-temporaraily-editable-background-color: #297331;
-    --badge-read-only-background-color: #af4340;
-    --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;
-    --note-icon-hover-background-color: #555555;
-
     --promoted-attribute-card-background-color: #ffffff21;
     --promoted-attribute-card-shadow: none;
-
+    
     --floating-button-shadow-color: #00000080;
     --floating-button-background-color: #494949d2;
     --floating-button-color: var(--button-text-color);
@@ -237,17 +220,14 @@
     --right-pane-item-hover-background: #ffffff26;
     --right-pane-item-hover-color: white;
 
-    --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;
     --scrollbar-border-color: unset; /* Deprecated */
 
     --selection-background-color: #3399FF70;
+    
+    --link-color: lightskyblue;
 
     --mermaid-theme: dark;
 
@@ -291,15 +271,6 @@
     --ck-editor-toolbar-button-on-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
     --ck-editor-toolbar-dropdown-button-open-background: #ffffff14;
 
-    --note-list-view-icon-color: var(--left-pane-icon-color);
-    --note-list-view-large-icon-background: var(--note-icon-background-color);
-    --note-list-view-large-icon-color: var(--note-icon-color);
-    --note-list-view-search-result-highlight-background: transparent;
-    --note-list-view-search-result-highlight-color: var(--quick-search-result-highlight-color);
-    --note-list-view-content-background: rgba(0, 0, 0, .2);
-    --note-list-view-content-search-result-highlight-background: var(--quick-search-result-highlight-color);
-    --note-list-view-content-search-result-highlight-color: black;
-
     --calendar-coll-event-background-saturation: 25%;
     --calendar-coll-event-background-lightness: 20%;
     --calendar-coll-event-background-color: #3c3c3c;
@@ -313,9 +284,7 @@
  * Dark color scheme tweaks
  */
 
-#left-pane .fancytree-node.tinted,
-.nested-note-list-item.use-note-color,
-.note-book-card .note-book-header.use-note-color {
+#left-pane .fancytree-node.tinted {
     --custom-color: var(--dark-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -324,10 +293,10 @@
     --custom-bg-color: hsl(var(--custom-color-hue), 20%, 33%, 0.4);
 }
 
-:root .reference-link.use-note-color,
-:root .reference-link.use-note-color:hover,
-.ck-content a.reference-link.use-note-color > span,
-.board-note.use-note-color {
+:root .reference-link,
+:root .reference-link:hover,
+.ck-content a.reference-link > span,
+.board-note {
     color: var(--dark-theme-custom-color, inherit);
 }
 
@@ -349,36 +318,6 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%);
 }
 
-.modal.tab-bar-modal .tabs .tab-card.with-hue {
-    background-color: hsl(var(--bg-hue), 8.8%, 11.2%);
-    border-color: hsl(var(--bg-hue), 9.4%, 25.1%);
-}
-
-.modal.tab-bar-modal .tabs .tab-card.active.with-hue {
-    background-color: hsl(var(--bg-hue), 8.8%, 16.2%);
-    border-color: hsl(var(--bg-hue), 9.4%, 25.1%);
-}
-
-
 .use-note-color {
     --custom-color: var(--dark-theme-custom-color);
-}
-
-.note-split.with-hue,
-.quick-edit-dialog-wrapper.with-hue,
-.nested-note-list-item.with-hue,
-.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%);
-}
-
-.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

@@ -6,7 +6,7 @@
  */
 :root {
 
-    /*
+    /* 
      * ⚠️ NOTICE: This theme is currently in the beta stage of development.
      * The names and purposes of these CSS variables are subject to frequent changes.
      */
@@ -21,8 +21,8 @@
     --subtle-border-color: rgba(0, 0, 0, 0.1);
     --dropdown-border-color: #ccc;
     --dropdown-shadow-opacity: 0.2;
-    --dropdown-item-icon-destructive-color: #de4027;
-    --contextual-help-icon-color: #004382;
+    --dropdown-item-icon-destructive-color: #ec5138;
+    --disabled-tooltip-icon-color: #004382;
 
     --accented-background-color: #f5f5f5;
 
@@ -74,10 +74,8 @@
     --select-arrow-svg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='transparent' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>");
     --select-group-heading-text-color: gray;
 
-    --link-color: #0076af;
-    --link-hover-background: #3c7fa017;
-    --link-hover-color: var(--link-color);
-    --link-selection-outline-color: #95c3d9db;
+    --link-hover-background: #00000012;
+    --link-hover-color: black;
 
     --hover-item-text-color: black;
     --hover-item-background-color: #0000001a;
@@ -127,7 +125,6 @@
     --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;
@@ -141,7 +138,7 @@
     /* Deprecated: now local variables in #launcher, with the values dependent on the current layout. */
     --launcher-pane-background-color: unset;
     --launcher-pane-text-color: unset;
-
+    
     --launcher-pane-vert-background-color: #e8e8e8;
     --launcher-pane-vert-text-color: #000000bd;
     --launcher-pane-vert-button-hover-color: black;
@@ -165,9 +162,6 @@
     --protected-session-active-icon-color: #16b516;
     --sync-status-error-pulse-color: #ff5528;
 
-    --classic-toolbar-vert-layout-background-color: #ffffffa1;
-    --classic-toolbar-horiz-layout-background-color: var(--main-background-color);
-
     --center-pane-vert-layout-background-color-bgfx: #ffffff75;
     --center-pane-horiz-layout-background-color-bgfx: #ffffffd6;
 
@@ -180,7 +174,7 @@
 
     --tab-close-button-hover-background: #c95a5a;
     --tab-close-button-hover-color: white;
-
+    
     --active-tab-background-color: white;
     --active-tab-hover-background-color: var(--active-tab-background-color);
     --active-tab-icon-color: gray;
@@ -197,17 +191,6 @@
     --badge-background-color: #00000011;
     --badge-text-color: var(--muted-text-color);
 
-    --badge-temporaraily-editable-background-color: #35a64c;
-    --badge-read-only-background-color: #c8302c;
-    --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;
-    --note-icon-hover-background-color: #737373;
-
     --promoted-attribute-card-background-color: #00000014;
     --promoted-attribute-card-shadow: none;
 
@@ -235,11 +218,6 @@
     --right-pane-item-hover-background: #00000013;
     --right-pane-item-hover-color: inherit;
 
-    --bottom-panel-background-color: #ffffff8c;
-    --bottom-panel-title-bar-background-color: #94949414;
-
-    --status-bar-border-color: #0000003a;
-
     --scrollbar-thumb-color: #0000005c;
     --scrollbar-thumb-hover-color: #00000066;
     --scrollbar-background-color: transparent;
@@ -247,6 +225,8 @@
 
     --selection-background-color: #3399FF70;
 
+    --link-color: blue;
+
     --mermaid-theme: default;
 
     --code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
@@ -289,15 +269,6 @@
     --ck-editor-toolbar-button-on-shadow: none;
     --ck-editor-toolbar-dropdown-button-open-background: #0000000f;
 
-    --note-list-view-icon-color: var(--left-pane-icon-color);
-    --note-list-view-large-icon-background: var(--note-icon-background-color);
-    --note-list-view-large-icon-color: var(--note-icon-color);
-    --note-list-view-search-result-highlight-background: transparent;
-    --note-list-view-search-result-highlight-color: var(--quick-search-result-highlight-color);
-    --note-list-view-content-background: #b1b1b133;
-    --note-list-view-content-search-result-highlight-background: var(--quick-search-result-highlight-color);
-    --note-list-view-content-search-result-highlight-color: white;
-
     --calendar-coll-event-background-lightness: 95%;
     --calendar-coll-event-background-saturation: 80%;
     --calendar-coll-event-background-color: #eaeaea;
@@ -307,9 +278,7 @@
     --calendar-coll-today-background-color: #00000006;
 }
 
-#left-pane .fancytree-node.tinted,
-.nested-note-list-item.use-note-color,
-.note-book-card .note-book-header.use-note-color {
+#left-pane .fancytree-node.tinted {
     --custom-color: var(--light-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -322,33 +291,4 @@
     --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%);
     --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%);
     --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
-}
-
-.modal.tab-bar-modal .tabs .tab-card.with-hue {
-    background-color: hsl(var(--bg-hue), 56%, 96%);
-    border-color: hsl(var(--bg-hue), 33%, 41%);
-}
-
-.modal.tab-bar-modal .tabs .tab-card.active.with-hue {
-    background-color: hsl(var(--bg-hue), 86%, 96%);
-    border-color: hsl(var(--bg-hue), 33%, 41%);
-}
-
-.note-split.with-hue,
-.quick-edit-dialog-wrapper.with-hue,
-.nested-note-list-item.with-hue,
-.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%);
-}
-
-.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

@@ -17,8 +17,6 @@
  */
 
 :root {
-    color-scheme: var(--theme-style);
-
     --main-font-family: "Inter", sans-serif;
 
     --main-font-size: normal;
@@ -52,7 +50,7 @@
 
     --tab-bar-height: 50px;
     --tab-height: 36px;
-    --tab-first-item-horiz-offset: 0;
+    --tab-first-item-horiz-offset: 1px;
     --new-tab-button-size: 24px;
 
     --center-pane-border-radius: 10px;
@@ -91,13 +89,13 @@
      * the color is adjusted based on the current color scheme (light or dark). The lightness
      * component of the color represented in the CIELAB color space, will be
      * constrained to a certain percentage defined below.
-     *
+     * 
      * Note: the tree background may vary when background effects are enabled, so it is recommended
      * to maintain a higher contrast margin than on the usual note tree solid background. */
 
     /* The maximum perceptual lightness for the custom color in the light theme (%): */
     --tree-item-light-theme-max-color-lightness: 60;
-
+    
     /* The minimum perceptual lightness for the custom color in the dark theme (%): */
     --tree-item-dark-theme-min-color-lightness: 65;
 }
@@ -130,22 +128,6 @@ body.backdrop-effects-disabled {
     font-size: 0.9rem !important;
 }
 
-/* Use this class for non-legacy menus */
-.dropdown-menu.tn-dropdown-menu {
-    --menu-item-icon-vert-offset: 0;
-    white-space-collapse: discard;
-}
-
-.dropdown-menu.tn-dropdown-menu .dropdown-item .tn-icon {
-    margin-inline-end: 6px;
-}
-
-.dropdown-menu.tn-dropdown-menu-scrollable {
-    /* Note: scrollable dropdowns does not support submenus */
-    max-height: 90vh;
-    overflow-y: auto;
-}
-
 body.desktop .dropdown-menu::before,
 :root .ck.ck-dropdown__panel::before,
 :root .excalidraw .popover::before,
@@ -165,14 +147,14 @@ body.desktop .dropdown-menu.tn-dropdown-list {
     backdrop-filter: var(--dropdown-backdrop-filter);
 }
 
-body.desktop .dropdown-submenu .dropdown-menu::before {
-    content: unset;
-}
-
 body.desktop .dropdown-menu.tn-dropdown-list::before {
     display: none;
 }
 
+body.desktop .dropdown-submenu .dropdown-menu::before {
+    content: unset;
+}
+
 body.desktop .dropdown-submenu .dropdown-menu {
     backdrop-filter: var(--dropdown-backdrop-filter);
     background: transparent;
@@ -183,33 +165,15 @@ body.desktop .dropdown-submenu .dropdown-menu {
     --menu-item-start-padding: 8px;
     --menu-item-end-padding: 22px;
     --menu-item-vertical-padding: 2px;
-
-    /* Note: the right padding should also accommodate the submenu arrow. */
-    border-radius: 6px;
-    cursor: default !important;
-}
-
-.dropdown-item:not(.dropdown-submenu),
-body.desktop .dropdown-item.dropdown-submenu .dropdown-toggle,
-.excalidraw .context-menu .context-menu-item {
+    
     padding-top: var(--menu-item-vertical-padding) !important;
     padding-bottom: var(--menu-item-vertical-padding) !important;
     padding-inline-start: var(--menu-item-start-padding) !important;
     padding-inline-end: var(--menu-item-end-padding) !important;
-}
 
-.dropdown-item.dropdown-submenu {
-    padding: 0 !important;
-
-    .dropdown-toggle {
-        flex-grow: 1;
-    }
-}
-
-body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item:not(.dropdown-submenu),
-body.desktop .dropdown-menu:has(> .dropdown-submenu.dropstart) > .dropdown-item.dropdown-submenu .dropdown-toggle {
-    padding-inline-end: var(--menu-item-start-padding) !important;
-    padding-inline-start: var(--menu-item-end-padding) !important;
+    /* Note: the right padding should also accommodate the submenu arrow. */
+    border-radius: 6px;
+    cursor: default !important;
 }
 
 :root .dropdown-item:focus-visible {
@@ -236,10 +200,6 @@ html body .dropdown-item[disabled] {
     opacity: var(--menu-item-disabled-opacity);
 }
 
-.dropdown-item:not(.disabled) .destructive-action-icon,
-.dropdown-item:not(.disabled) .bx-trash {
-    --menu-item-icon-color: var(--dropdown-item-icon-destructive-color);
-}
 /* Badges */
 :root .badge {
     --bs-badge-color: var(--badge-text-color);
@@ -251,7 +211,7 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item icon */
-.dropdown-item .tn-icon {
+.dropdown-item .bx {
     translate: 0 var(--menu-item-icon-vert-offset);
     color: var(--menu-item-icon-color) !important;
     font-size: 1.1em;
@@ -289,8 +249,7 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item arrow */
-body.mobile .dropdown-submenu .dropdown-toggle::after,
-body.desktop .dropdown-submenu:not(.dropstart) .dropdown-toggle::after {
+.dropdown-menu .dropdown-toggle::after {
     content: "\ed3b" !important;
     position: absolute;
     display: flex !important;
@@ -306,26 +265,6 @@ body.desktop .dropdown-submenu:not(.dropstart) .dropdown-toggle::after {
     color: var(--menu-item-arrow-color) !important;
 }
 
-body.mobile .dropdown-submenu.dropstart .dropdown-toggle::before {
-    content: unset;
-}
-
-body.desktop .dropdown-submenu.dropstart .dropdown-toggle::before {
-    content: "\ea4d" !important;
-    position: absolute;
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-    top: 0;
-    inset-inline-start: 0;
-    margin: unset !important;
-    border: unset !important;
-    padding: 0 4px;
-    font-family: boxicons;
-    font-size: 1.2em;
-    color: var(--menu-item-arrow-color) !important;
-}
-
 body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdown-toggle::after {
     content: "\ea4d" !important;
 }
@@ -400,7 +339,7 @@ body.mobile .dropdown-menu {
     font-size: 1em !important;
     backdrop-filter: var(--dropdown-backdrop-filter);
     position: relative;
-
+    
     .dropdown-toggle::after {
         top: 0.5em;
         right: var(--dropdown-menu-padding-horizontal);
@@ -417,7 +356,7 @@ body.mobile .dropdown-menu {
         padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horizontal) !important;
         background: var(--card-background-color);
         border-bottom: 1px solid var(--menu-item-delimiter-color) !important;
-        border-radius: 0;
+        border-radius: 0;        
     }
 
     .dropdown-item:first-of-type,
@@ -428,9 +367,9 @@ body.mobile .dropdown-menu {
         border-top-right-radius: 6px;
     }
 
-    .dropdown-item:last-of-type,
+    .dropdown-item:last-of-type,    
     .dropdown-item:has(+ .dropdown-divider),
-    .dropdown-custom-item:last-of-type,
+    .dropdown-custom-item:last-of-type,    
     .dropdown-custom-item:has(+ .dropdown-divider) {
         border-bottom-left-radius: 6px;
         border-bottom-right-radius: 6px;
@@ -453,10 +392,10 @@ body.mobile .dropdown-menu {
             --menu-background-color: --menu-submenu-mobile-background-color;
             --bs-dropdown-divider-margin-y: 0.25rem;
             border-radius: 0;
-            max-height: 0;
+            max-height: 0;            
             transition: max-height 100ms ease-in;
-            display: block !important;
-
+            display: block !important;            
+            
             &.show {
                 max-height: 1000px;
                 padding: 0.5rem 0.75rem !important;
@@ -466,7 +405,7 @@ body.mobile .dropdown-menu {
         &.submenu-open {
             .dropdown-toggle {
                 padding-bottom: var(--dropdown-menu-padding-vertical);
-            }
+            }            
         }
     }
 
@@ -498,7 +437,7 @@ li.dropdown-item a.dropdown-item-button {
     border: unset;
 }
 
-li.dropdown-item a.dropdown-item-button.tn-icon {
+li.dropdown-item a.dropdown-item-button.bx {
     color: var(--menu-text-color) !important;
 }
 
@@ -559,13 +498,13 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     padding-top: 0;
 }
 
-#toast-container .toast:not(.no-title) .tn-icon {
+#toast-container .toast:not(.no-title) .bx {
     margin-inline-end: 0.5em;
     font-size: 1.1em;
     opacity: 0.85;
 }
 
-#toast-container .toast.no-title .tn-icon {
+#toast-container .toast.no-title .bx {
     margin-inline-end: 0;
     font-size: 1.3em;
 }
@@ -643,6 +582,144 @@ 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 .bx {
+    color: var(--left-pane-icon-color) !important;
+}
+
+.note-list.grid-view .note-book-card:hover {
+    filter: contrast(105%);
+}
+
+.note-list.grid-view .note-book-card img {
+    object-fit: cover !important;
+    width: 100%;
+}
+
+.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
  */
@@ -666,19 +743,4 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
 .note-detail-empty .aa-suggestions div.aa-cursor {
     background: var(--hover-item-background-color);
     color: var(--hover-item-text-color);
-}
-
-/*
- * Alert bars
- */
-
-div.alert {
-    margin-bottom: 8px;
-    background: var(--alert-bar-background) !important;
-    border-radius: 8px;
-    font-size: .85em;
-}
-
-div.alert p + p {
-    margin-block: 1em 0;
 }

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

@@ -423,6 +423,6 @@ div.tn-tool-dialog {
     font-size: unset;
 }
 
-.note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.tn-icon {
+.note-type-chooser-dialog div.note-type-dropdown .dropdown-item span.bx {
     margin-inline-end: .25em;
-}
+}

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

@@ -56,16 +56,15 @@ button.btn.btn-primary:focus-visible,
 button.btn.btn-secondary:focus-visible,
 button.btn.btn-sm:not(.select-button):focus-visible,
 button.btn.btn-success:focus-visible,
-button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text:not(.ck-disabled):focus-visible,
-.tn-focusable-button:focus-visible {
+button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .ck-button-replaceall, .ck-button-replace).ck-button_with-text:not(.ck-disabled):focus-visible {
     outline: 2px solid var(--input-focus-outline-color);
 }
 
 /* Button's icon */
-button.btn.btn-primary span.tn-icon,
-button.btn.btn-secondary span.tn-icon,
-button.btn.btn-sm span.tn-icon,
-button.btn.btn-success span.tn-icon {
+button.btn.btn-primary span.bx,
+button.btn.btn-secondary span.bx,
+button.btn.btn-sm span.bx,
+button.btn.btn-success span.bx {
     color: var(--cmd-button-icon-color);
     padding-inline-end: 0.35em;
     font-size: 1.2em;
@@ -84,22 +83,6 @@ button.btn.btn-success kbd {
     letter-spacing: 0.5pt;
 }
 
-/*
- * Low profile buttons
- */
-
-button.tn-low-profile {
-    appearance: none;
-    background: transparent;
-    border: 0;
-    border-radius: 8px;
-    color: inherit;
-}
-
-button.tn-low-profile:hover {
-    background-color: var(--icon-button-hover-background);
-}
-
 /*
  * Icon buttons
  */
@@ -145,10 +128,6 @@ button.tn-low-profile:hover {
     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,
@@ -175,7 +154,7 @@ button.tn-low-profile:hover {
     color: var(--button-group-active-button-text-color);
 }
 
-/*
+/* 
  * Input boxes
  */
 
@@ -373,11 +352,6 @@ label.input-group.tn-number-unit-pair input {
     padding-inline-end: 0;
 }
 
-:root .input-group > pre[aria-hidden="true"] {
-    margin: 0;
-    padding: 0;
-}
-
 /* Combo box-like dropdown buttons */
 
 .select-button.dropdown-toggle::after {
@@ -425,8 +399,7 @@ button.select-button.dropdown-toggle.btn:active {
 select:focus,
 select.form-select:focus,
 select.form-control:focus,
-.select-button.dropdown-toggle.btn:focus,
-.select-button.focus-outline:focus {
+.select-button.dropdown-toggle.btn:focus {
     box-shadow: unset;
     outline: 3px solid var(--input-focus-outline-color);
     outline-offset: 0;
@@ -449,7 +422,7 @@ optgroup {
     line-height: 40px;
 }
 
-/*
+/* 
  * File input
  *
  * <label class="tn-file-input tn-input-field">
@@ -662,8 +635,8 @@ body a.tn-link:visited,
     border-radius: 4px;
     background: var(--background);
     color: var(--link-color);
-    font-weight: 500;
-    text-decoration: none;
+    font-weight: normal;
+    text-decoration: underline;
 
     transition:
         background-color 200ms ease-out,
@@ -678,12 +651,10 @@ body a.tn-link:focus-visible,
 }
 
 body a.tn-link:hover,
-.use-tn-links a:hover,
-.use-tn-links a.ck-widget_selected {
+.use-tn-links a:hover {
     box-shadow: 0 0 0 4px var(--link-hover-background);
     --background: var(--link-hover-background);
     color: var(--link-hover-color);
-    text-decoration: underline;
 
     transition:
         background-color 100ms ease-in,
@@ -813,36 +784,4 @@ input[type="range"] {
         scrollbar-color: unset;
         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

@@ -0,0 +1,122 @@
+/* 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

@@ -22,7 +22,7 @@
     --ck-color-button-on-background: transparent;
     --ck-color-button-on-hover-background: var(--hover-item-background-color);
     --ck-color-button-default-active-background: var(--hover-item-background-color);
-
+    
     --ck-color-split-button-hover-background: var(--ck-editor-toolbar-dropdown-button-open-background);
 
     --ck-focus-ring: 1px solid transparent;
@@ -47,14 +47,9 @@
 }
 
 /* The toolbar show / hide button for the current text block */
-:root .ck.ck-block-toolbar-button {
-    --ck-color-block-toolbar-button: var(--muted-text-color);
+.ck.ck-block-toolbar-button {
     --ck-color-button-on-background: transparent;
-    --ck-color-button-on-color: var(--ck-editor-toolbar-button-on-color);
-    translate: -40% 0;
-    min-width: 0;
-    padding: 0;
-    z-index: 1600;
+    --ck-color-button-on-color: currentColor;
 }
 
 :root .ck.ck-toolbar .ck-button:not(.ck-disabled):active,
@@ -82,7 +77,7 @@
     visibility: collapse;
 }
 
-/*
+/* 
  * Dropdowns
  */
 
@@ -90,7 +85,7 @@
 :root .ck.ck-dropdown__panel,
 :root .ck-balloon-panel {
     --ck-editor-popup-padding: 4px;
-
+    
     --ck-color-panel-background: var(--menu-background-color);
     --ck-color-panel-border: var(--ck-editor-popup-border-color);
 
@@ -492,7 +487,7 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck
 .ck.ck-labeled-field-view > .ck.ck-labeled-field-view__input-wrapper > label.ck.ck-label {
     /* Move the label above the text box regardless of the text box state */
     transform: translate(0, calc(-.2em - var(--ck-input-label-height))) !important;
-
+    
     padding-inline-start: 0 !important;
     background: transparent;
     font-size: .85em;
@@ -522,12 +517,8 @@ 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
+ * Code Blocks 
  */
 
 .attachment-content-wrapper pre,
@@ -535,14 +526,10 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck
 .ck-mermaid__editing-view {
     border: 0;
     border-radius: 6px;
-    box-shadow: var(--code-block-box-shadow);
+    box-shadow: var(--code-block-box-shadow);    
     margin-top: 2px !important;
 }
 
-.attachment-content-wrapper pre {
-    border-radius: var(--dropdown-border-radius);
-}
-
 :root .ck-content pre:has(> code) {
     padding: 0;
 }
@@ -555,7 +542,7 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel).ck
      * for single-line code blocks */
 
     --copy-button-margin-size: calc((1em    * 1.5   + var(--padding-size) * 2 - var(--icon-button-size)) / 2);
-
+    
     /* Where:                        │        └ Line height
      *                               └───────── Font size
      */
@@ -643,14 +630,10 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
     font-weight: 300;
 }
 
-.ck-content strong {
-    font-weight: 600;
-}
-
-:root .ck-content hr {
-    margin-block: 5px;
-    height: 0;
-    border: thin solid var(--main-border-color);
+.ck-content hr {
+    margin: 5px 0;
+    height: 1px;
+    background-color: var(--main-border-color);
     opacity: 1;
 }
 
@@ -683,33 +666,16 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
     color: var(--main-text-color);
 }
 
-/* Links */
-
-.ck-content a.ck-widget {
-    outline: none;
-}
-
-.ck-content a.ck-widget.ck-widget_selected,
-.ck-content a.ck-link_selected {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--link-selection-outline-color);
-    background: var(--link-hover-background);
-} 
-
 /* Reference link */
 
 .ck-content a.reference-link,
 .ck-content a.reference-link:hover {
     /* Apply underline only to the span inside the link so it can follow the
      * target note's user defined color */
-     text-decoration: none;
+    text-decoration: none;
 }
 
-.ck-content a.reference-link > span.use-note-color {
-    color: var(--custom-color, inherit);
-}
-
-.ck-content a.reference-link:hover > span {
+.ck-content a.reference-link > span {
     text-decoration: underline;
 }
 
@@ -724,4 +690,4 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
 
 .note-list-widget {
     outline: 0 !important;
-}
+}

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

@@ -57,12 +57,12 @@
     height: 18px;
 }
 
-/*
+/* 
  * SEARCH PAGE
  */
 
  /* Button bar */
- .search-definition-widget .search-setting-table .search-actions-container {
+ .search-definition-widget .search-setting-table tbody:last-child div {
     justify-content: flex-end;
     gap: 8px;
  }
@@ -143,7 +143,7 @@
 /*
  * OPTIONS PAGES
  */
-
+ 
  :root {
     --options-card-min-width: 500px;
     --options-card-max-width: 900px;
@@ -151,15 +151,6 @@
     --options-title-font-size: .75rem;
     --options-title-offset: 13px;
 }
-
-.note-split.options {
-    --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);
@@ -181,10 +172,6 @@
     height: 0;
 }
 
-body.experimental-feature-new-layout .note-detail-content-widget-content.options {
-    padding-inline: 25px;
-}
-
 .options-section:not(.tn-no-card) {
     margin-bottom: calc(var(--options-title-offset) + 26px) !important;
     box-shadow: var(--card-box-shadow);
@@ -194,6 +181,10 @@ body.experimental-feature-new-layout .note-detail-content-widget-content.options
     padding: var(--options-card-padding);
 }
 
+body.prefers-centered-content .options-section:not(.tn-no-card) {
+    margin-inline: auto;
+}
+
 body.desktop .options-section:not(.tn-no-card) {
     min-width: var(--options-card-min-width);
     max-width: var(--options-card-max-width);
@@ -265,6 +256,13 @@ body.desktop .options-section:not(.tn-no-card) {
     margin-bottom: 6px;
 }
 
+.options-section .alert {
+    margin-bottom: 8px;
+    background: var(--alert-bar-background) !important;
+    border-radius: 8px;
+    font-size: .85em;
+}
+
 nav.options-section-tabs {
     min-width: var(--options-card-min-width);
     max-width: var(--options-card-max-width);
@@ -328,4 +326,4 @@ nav.options-section-tabs + .options-section {
 
 .etapi-options-section div {
     height: auto !important;
-}
+}

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

@@ -168,7 +168,25 @@ ul.editability-dropdown li.dropdown-item > div {
  * Note info
  */
 
+:root .note-info-widget-table button.calculate-button {
+    min-width: 0;
+    padding: 4px 10px !important;
+    font-size: 0.8em;
+}
+
 /* Narrow width layout */
 .note-info-widget {
     container: info-section / inline-size;
 }
+
+/*
+ * Styling as a floating toolbar
+ */
+.ribbon-container {
+    position: sticky;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: var(--main-background-color);
+    z-index: 997;
+}