chore: remove extra sample and generated files

Improved the importAndExportDocs function to better handle the empty outputSubDir case:
- Use meaningful name for temporary zip file ('user-guide' instead of '')
- Explicitly handle empty outputSubDir for root directory output
- Added comments to clarify the behavior

Co-authored-by: eliandoran <21236836+eliandoran@users.noreply.github.com>

.editorconfig

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

.env

@@ -1 +0,0 @@
-NODE_OPTIONS=--max_old_space_size=4096

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

@@ -74,7 +74,7 @@ runs:
 
   - name: Update build info
     shell: ${{ inputs.shell }}
-    run: npm run chore:update-build-info
+    run: pnpm run chore:update-build-info
 
   # Critical debugging configuration
   - name: Run electron-forge build with enhanced logging
@@ -86,7 +86,8 @@ runs:
       APPLE_ID_PASSWORD: ${{ env.APPLE_ID_PASSWORD }}
       WINDOWS_SIGN_EXECUTABLE: ${{ env.WINDOWS_SIGN_EXECUTABLE }}
       TRILIUM_ARTIFACT_NAME_HINT: TriliumNotes-${{ github.ref_name }}-${{ inputs.os }}-${{ inputs.arch }}
-    run: pnpm nx --project=desktop electron-forge:make -- --arch=${{ inputs.arch }} --platform=${{ inputs.forge_platform }}
+      TARGET_ARCH: ${{ inputs.arch }}
+    run: pnpm run --filter desktop electron-forge:make --arch=${{ inputs.arch }} --platform=${{ inputs.forge_platform }}
 
   # Add DMG signing step
   - name: Sign DMG
@@ -162,3 +163,25 @@ runs:
         echo "Found ZIP: $zip_file"
         echo "Note: ZIP files are not code signed, but their contents should be"
       fi
+
+  - name: Sign the RPM
+    if: inputs.os == 'linux'
+    shell: ${{ inputs.shell }}
+    run: |
+      echo -n "$GPG_SIGNING_KEY" | base64 --decode | gpg --import
+
+      # Import the key into RPM for verification
+      gpg --export -a > pubkey
+      rpm --import pubkey
+      rm pubkey
+
+      # Sign the RPM
+      rpm_file=$(find ./apps/desktop/upload -name "*.rpm" -print -quit)
+      rpmsign --define "_gpg_name Trilium Notes Signing Key <triliumnotes@outlook.com>" --addsign "$rpm_file"
+      rpm -Kv "$rpm_file"
+
+      # Validate code signing
+      if ! rpm -K "$rpm_file" | grep -q "digests signatures OK"; then
+        echo .rpm file not signed
+        exit 1
+      fi

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

@@ -10,9 +10,9 @@ runs:
   steps:
   - uses: pnpm/action-setup@v4
   - name: Set up node & dependencies
-    uses: actions/setup-node@v4
+    uses: actions/setup-node@v6
     with:
-      node-version: 22
+      node-version: 24
       cache: "pnpm"
   - name: Install dependencies
     shell: bash
@@ -23,7 +23,7 @@ runs:
     shell: bash
     run: |
       pnpm run chore:update-build-info
-      pnpm nx --project=server package
+      pnpm run --filter server package
   - name: Prepare artifacts
     shell: bash
     run: |

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

@@ -0,0 +1,103 @@
+name: "Deploy to Cloudflare Pages"
+description: "Deploys to Cloudflare Pages on either a temporary branch with preview comment, or on the production version if on the main branch."
+inputs:
+  project_name:
+    description: "CloudFlare Pages project name"
+  comment_body:
+    description: "The message to display when deployment is ready"
+    default: "Deployment is ready."
+    required: false
+  production_url:
+    description: "The URL to mention as the production URL."
+    required: true
+  deploy_dir:
+    description: "The directory from which to deploy."
+    required: true
+  cloudflare_api_token:
+    description: "The Cloudflare API token to use for deployment."
+    required: true
+  cloudflare_account_id:
+    description: "The Cloudflare account ID to use for deployment."
+    required: true
+  github_token:
+    description: "The GitHub token to use for posting PR comments."
+    required: true
+runs:
+  using: composite
+  steps:
+    # Install wrangler globally to avoid workspace issues
+    - name: Install Wrangler
+      shell: bash
+      run: npm install -g wrangler
+
+    # Deploy using Wrangler (use pre-installed wrangler)
+    - name: Deploy to Cloudflare Pages
+      id: deploy
+      if: github.event_name == 'push' || github.event_name == 'workflow_dispatch'
+      uses: cloudflare/wrangler-action@v3
+      with:
+        apiToken: ${{ inputs.cloudflare_api_token }}
+        accountId: ${{ inputs.cloudflare_account_id }}
+        command: pages deploy ${{ inputs.deploy_dir }} --project-name=${{ inputs.project_name}} --branch=${{ github.ref_name }}
+        wranglerVersion: ''  # Use pre-installed version
+
+    # Deploy preview for PRs
+    - name: Deploy Preview to Cloudflare Pages
+      id: preview-deployment
+      if: github.event_name == 'pull_request'
+      uses: cloudflare/wrangler-action@v3
+      with:
+        apiToken: ${{ inputs.cloudflare_api_token }}
+        accountId: ${{ inputs.cloudflare_account_id }}
+        command: pages deploy ${{ inputs.deploy_dir }} --project-name=${{ inputs.project_name}} --branch=pr-${{ github.event.pull_request.number }}
+        wranglerVersion: ''  # Use pre-installed version
+
+    # Post deployment URL as PR comment
+    - name: Comment PR with Preview URL
+      if: github.event_name == 'pull_request'
+      uses: actions/github-script@v8
+      env:
+        COMMENT_BODY: ${{ inputs.comment_body }}
+        PRODUCTION_URL: ${{ inputs.production_url }}
+        PROJECT_NAME: ${{ inputs.project_name }}
+      with:
+        github-token: ${{ inputs.github_token }}
+        script: |
+          const prNumber = context.issue.number;
+          // Construct preview URL based on Cloudflare Pages pattern
+          const projectName = process.env.PROJECT_NAME;
+          const previewUrl = `https://pr-${prNumber}.${projectName}.pages.dev`;
+
+          // Check if we already commented
+          const comments = await github.rest.issues.listComments({
+            owner: context.repo.owner,
+            repo: context.repo.repo,
+            issue_number: prNumber
+          });
+
+          const customMessage = process.env.COMMENT_BODY;
+          const botComment = comments.data.find(comment =>
+            comment.user.type === 'Bot' &&
+            comment.body.includes(customMessage)
+          );
+
+          const mainUrl = process.env.PRODUCTION_URL;
+          const commentBody = `${customMessage}!\n\n🔗 Preview URL: ${previewUrl}\n📖 Production URL: ${mainUrl}\n\n✅ All checks passed\n\n_This preview will be updated automatically with new commits._`;
+
+          if (botComment) {
+            // Update existing comment
+            await github.rest.issues.updateComment({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              comment_id: botComment.id,
+              body: commentBody
+            });
+          } else {
+            // Create new comment
+            await github.rest.issues.createComment({
+              issue_number: prNumber,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: commentBody
+            });
+          }

.github/instructions/nx.instructions.md

@@ -1,40 +0,0 @@
----
-applyTo: '**'
----
-
-// This file is automatically generated by Nx Console
-
-You are in an nx workspace using Nx 21.3.9 and pnpm as the package manager.
-
-You have access to the Nx MCP server and the tools it provides. Use them. Follow these guidelines in order to best help the user:
-
-# General Guidelines
-- When answering questions, use the nx_workspace tool first to gain an understanding of the workspace architecture
-- For questions around nx configuration, best practices or if you're unsure, use the nx_docs tool to get relevant, up-to-date docs!! Always use this instead of assuming things about nx configuration
-- If the user needs help with an Nx configuration or project graph error, use the 'nx_workspace' tool to get any errors
-- To help answer questions about the workspace structure or simply help with demonstrating how tasks depend on each other, use the 'nx_visualize_graph' tool
-
-# Generation Guidelines
-If the user wants to generate something, use the following flow:
-
-- learn about the nx workspace and any specifics the user needs by using the 'nx_workspace' tool and the 'nx_project_details' tool if applicable
-- get the available generators using the 'nx_generators' tool
-- decide which generator to use. If no generators seem relevant, check the 'nx_available_plugins' tool to see if the user could install a plugin to help them
-- get generator details using the 'nx_generator_schema' tool
-- you may use the 'nx_docs' tool to learn more about a specific generator or technology if you're unsure
-- decide which options to provide in order to best complete the user's request. Don't make any assumptions and keep the options minimalistic
-- open the generator UI using the 'nx_open_generate_ui' tool
-- wait for the user to finish the generator
-- read the generator log file using the 'nx_read_generator_log' tool
-- use the information provided in the log file to answer the user's question or continue with what they were doing
-
-# Running Tasks Guidelines
-If the user wants help with tasks or commands (which include keywords like "test", "build", "lint", or other similar actions), use the following flow:
-- Use the 'nx_current_running_tasks_details' tool to get the list of tasks (this can include tasks that were completed, stopped or failed).
-- If there are any tasks, ask the user if they would like help with a specific task then use the 'nx_current_running_task_output' tool to get the terminal output for that task/command
-- Use the terminal output from 'nx_current_running_task_output' to see what's wrong and help the user fix their problem. Use the appropriate tools if necessary
-- If the user would like to rerun the task or command, always use `nx run <taskId>` to rerun in the terminal. This will ensure that the task will run in the nx context and will be run the same way it originally executed
-- If the task was marked as "continuous" do not offer to rerun the task. This task is already running and the user can see the output in the terminal. You can use 'nx_current_running_task_output' to get the output of the task to verify the output. 
-
-
-

.github/workflows/checks.yml

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

.github/workflows/codeql.yml

@@ -67,7 +67,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v3
+      uses: github/codeql-action/init@v4
       with:
         languages: ${{ matrix.language }}
         build-mode: ${{ matrix.build-mode }}
@@ -95,6 +95,6 @@ jobs:
         exit 1
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v3
+      uses: github/codeql-action/analyze@v4
       with:
         category: "/language:${{matrix.language}}"

.github/workflows/deploy-docs.yml

@@ -0,0 +1,78 @@
+name: Deploy Documentation
+
+on:
+  # Trigger on push to main branch
+  push:
+    branches:
+      - main
+      - master  # Also support master branch
+    # Only run when docs files change
+    paths:
+      - 'docs/**'
+      - 'apps/edit-docs/**'
+      - 'apps/build-docs/**'
+      - 'packages/share-theme/**'
+
+  # Allow manual triggering from Actions tab
+  workflow_dispatch:
+
+  # Run on pull requests for preview deployments
+  pull_request:
+    branches:
+      - main
+      - master
+    paths:
+      - 'docs/**'
+      - 'apps/edit-docs/**'
+      - 'apps/build-docs/**'
+      - 'packages/share-theme/**'
+
+jobs:
+  build-and-deploy:
+    name: Build and Deploy Documentation
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    # Required permissions for deployment
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write # For PR preview comments
+      id-token: write # For OIDC authentication (if needed)
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v5
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v6
+        with:
+          node-version: '24'
+          cache: 'pnpm'
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Trigger build of documentation
+        run: pnpm docs:build
+
+      - name: Validate Built Site
+        run: |
+          test -f site/index.html || (echo "ERROR: site/index.html not found" && exit 1)
+          test -f site/developer-guide/index.html || (echo "ERROR: site/developer-guide/index.html not found" && exit 1)
+          echo "✓ User Guide and Developer Guide built successfully"
+
+      - name: Deploy
+        uses: ./.github/actions/deploy-to-cloudflare-pages
+        if: github.repository == ${{ vars.REPO_MAIN }}
+        with:
+          project_name: "trilium-docs"
+          comment_body: "📚 Documentation preview is ready"
+          production_url: "https://docs.triliumnotes.org"
+          deploy_dir: "site"
+          cloudflare_api_token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          cloudflare_account_id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/dev.yml

@@ -19,45 +19,24 @@ permissions:
   pull-requests: write  # for PR comments
 
 jobs:
-  check-affected:
-    name: Check affected jobs (NX)
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v5
-        with:
-          fetch-depth: 0  # needed for https://github.com/marketplace/actions/nx-set-shas
-
-      - uses: pnpm/action-setup@v4
-      - name: Set up node & dependencies
-        uses: actions/setup-node@v4
-        with:
-          node-version: 22
-          cache: 'pnpm'
-      - name: Install dependencies
-        run: pnpm install --frozen-lockfile
-
-      - uses: nrwl/nx-set-shas@v4
-      - name: Check affected
-        run: pnpm nx affected --verbose -t typecheck build rebuild-deps test-build
-
   test_dev:
     name: Test development
     runs-on: ubuntu-latest
-    needs:
-      - check-affected
     steps:
       - name: Checkout the repository
         uses: actions/checkout@v5
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
 
+      - name: Typecheck
+        run: pnpm typecheck
+
       - name: Run the unit tests
         run: pnpm run test:all
 
@@ -66,7 +45,6 @@ jobs:
     runs-on: ubuntu-latest
     needs:
       - test_dev
-      - check-affected
     steps:
       - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
@@ -75,7 +53,7 @@ jobs:
       - name: Update build info
         run: pnpm run chore:update-build-info
       - name: Trigger client build
-        run: pnpm nx run client:build
+        run: pnpm client:build
       - name: Send client bundle stats to RelativeCI
         if: false
         uses: relative-ci/agent-action@v3
@@ -83,7 +61,7 @@ jobs:
           webpackStatsFile: ./apps/client/dist/webpack-stats.json
           key: ${{ secrets.RELATIVE_CI_CLIENT_KEY }}
       - name: Trigger server build
-        run: pnpm nx run server:build
+        run: pnpm run server:build
       - uses: docker/setup-buildx-action@v3
       - uses: docker/build-push-action@v6
         with:
@@ -95,7 +73,6 @@ jobs:
     runs-on: ubuntu-latest
     needs:
       - build_docker
-      - check-affected
     strategy:
       matrix:
         include:
@@ -112,7 +89,7 @@ jobs:
       - name: Update build info
         run: pnpm run chore:update-build-info
       - name: Trigger build
-        run: pnpm nx run server:build
+        run: pnpm server:build
 
       - name: Set IMAGE_NAME to lowercase
         run: echo "IMAGE_NAME=${IMAGE_NAME,,}" >> $GITHUB_ENV

.github/workflows/main-docker.yml

@@ -44,9 +44,9 @@ jobs:
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: "pnpm"
 
       - name: Install npm dependencies
@@ -82,16 +82,16 @@ jobs:
           require-healthy: true
 
       - name: Run Playwright tests
-        run: TRILIUM_DOCKER=1 TRILIUM_PORT=8082 pnpm exec nx run server-e2e:e2e
+        run: TRILIUM_DOCKER=1 TRILIUM_PORT=8082 pnpm --filter=server-e2e e2e
 
       - name: Upload Playwright trace
         if: failure()
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: Playwright trace (${{ matrix.dockerfile }})
           path: test-output/playwright/output
 
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v5
         if: ${{ !cancelled() }}
         with:
           name: Playwright report (${{ matrix.dockerfile }})
@@ -116,10 +116,10 @@ jobs:
           - dockerfile: Dockerfile
             platform: linux/arm64
             image: ubuntu-24.04-arm
-          - dockerfile: Dockerfile
+          - dockerfile: Dockerfile.legacy
             platform: linux/arm/v7
             image: ubuntu-24.04-arm
-          - dockerfile: Dockerfile
+          - dockerfile: Dockerfile.legacy
             platform: linux/arm/v8
             image: ubuntu-24.04-arm
     runs-on: ${{ matrix.image }}
@@ -144,20 +144,20 @@ jobs:
         uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Run the TypeScript build
-        run: pnpm run server:build
-
       - name: Update build info
         run: pnpm run chore:update-build-info
 
+      - name: Run the TypeScript build
+        run: pnpm run server:build
+
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v5
@@ -209,9 +209,9 @@ jobs:
           touch "/tmp/digests/${digest#sha256:}"
 
       - name: Upload digest
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
-          name: digests-${{ env.PLATFORM_PAIR }}
+          name: digests-${{ env.PLATFORM_PAIR }}-${{ matrix.dockerfile }}
           path: /tmp/digests/*
           if-no-files-found: error
           retention-days: 1
@@ -223,7 +223,7 @@ jobs:
       - build
     steps:
       - name: Download digests
-        uses: actions/download-artifact@v5
+        uses: actions/download-artifact@v6
         with:
           path: /tmp/digests
           pattern: digests-*

.github/workflows/nightly.yml

@@ -19,7 +19,6 @@ concurrency:
   cancel-in-progress: true
 
 env:
-  GITHUB_UPLOAD_URL: https://uploads.github.com/repos/TriliumNext/Notes/releases/179589950/assets{?name,label}
   GITHUB_RELEASE_ID: 179589950
 
 permissions:
@@ -27,7 +26,7 @@ permissions:
 
 jobs:
   nightly-electron:
-    if: github.repository == 'TriliumNext/Trilium'
+    if: github.repository == ${{ vars.REPO_MAIN }}
     name: Deploy nightly
     strategy:
       fail-fast: false
@@ -51,13 +50,12 @@ jobs:
       - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-      - uses: nrwl/nx-set-shas@v4
       - name: Update nightly version
         run: npm run chore:ci-update-nightly-version
       - name: Run the build
@@ -76,9 +74,10 @@ jobs:
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
           WINDOWS_SIGN_EXECUTABLE: ${{ vars.WINDOWS_SIGN_EXECUTABLE }}
+          GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2.4.1
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false
@@ -90,14 +89,14 @@ jobs:
           name: Nightly Build
 
       - name: Publish artifacts
-        uses: actions/upload-artifact@v4
+        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 == 'TriliumNext/Trilium'  
+    if: github.repository == ${{ vars.REPO_MAIN }}
     name: Deploy server nightly
     strategy:
       fail-fast: false
@@ -119,7 +118,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2.4.1
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false

.github/workflows/playwright.yml

@@ -4,6 +4,8 @@ on:
   push:
     branches:
       - main
+    paths-ignore:
+      - "apps/website/**"
   pull_request:
 
 permissions:
@@ -19,25 +21,21 @@ jobs:
           filter: tree:0
           fetch-depth: 0
 
-      # This enables task distribution via Nx Cloud
-      # Run this command as early as possible, before dependencies are installed
-      # Learn more at https://nx.dev/ci/reference/nx-cloud-cli#npx-nxcloud-startcirun
-      # Connect your workspace by running "nx connect" and uncomment this line to enable task distribution
-      # - run: npx nx-cloud start-ci-run --distribute-on="3 linux-medium-js" --stop-agents-after="e2e-ci"
-
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v4
+      - uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - run: pnpm exec playwright install --with-deps
-      - uses: nrwl/nx-set-shas@v4
 
-      # Prepend any command with "nx-cloud record --" to record its logs to Nx Cloud
-      # - run: npx nx-cloud record -- echo Hello World
-      # Nx Affected runs only tasks affected by the changes in this PR/commit. Learn more: https://nx.dev/ci/features/affected
-      # When you enable task distribution, run the e2e-ci task instead of e2e
-      - run: pnpm exec nx affected -t e2e --exclude desktop-e2e
+      - run: pnpm --filter server-e2e e2e
+
+      - name: Upload test report
+        if: failure()
+        uses: actions/upload-artifact@v5
+        with:
+          name: e2e report
+          path: apps/server-e2e/test-output

.github/workflows/release.yml

@@ -30,18 +30,30 @@ jobs:
             image: win-signing
             shell: cmd
             forge_platform: win32
+        # Exclude ARM64 Linux from default matrix to use native runner
+        exclude:
+          - arch: arm64
+            os:
+              name: linux
+        # Add ARM64 Linux with native ubuntu-24.04-arm runner for better-sqlite3 compatibility
+        include:
+          - arch: arm64
+            os:
+              name: linux
+              image: ubuntu-24.04-arm
+              shell: bash
+              forge_platform: linux
     runs-on: ${{ matrix.os.image }}
     steps:
       - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
-      - uses: nrwl/nx-set-shas@v4
       - name: Run the build
         uses: ./.github/actions/build-electron
         with:
@@ -58,9 +70,10 @@ jobs:
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
           WINDOWS_SIGN_EXECUTABLE: ${{ vars.WINDOWS_SIGN_EXECUTABLE }}
+          GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: release-desktop-${{ matrix.os.name }}-${{ matrix.arch }}
           path: apps/desktop/upload/*.*
@@ -87,7 +100,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: release-server-linux-${{ matrix.arch }}
           path: upload/*.*
@@ -107,14 +120,14 @@ jobs:
             docs/Release Notes
 
       - name: Download all artifacts
-        uses: actions/download-artifact@v5
+        uses: actions/download-artifact@v6
         with:
           merge-multiple: true
           pattern: release-*
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.3.2
+        uses: softprops/action-gh-release@v2.4.1
         with:
           draft: false
           body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md

.github/workflows/website.yml

@@ -0,0 +1,51 @@
+name: Deploy website
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "apps/website/**"
+
+  pull_request:
+    paths:
+      - "apps/website/**"
+
+  release:
+    types: [ released ]
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    name: Build & deploy website
+
+    permissions:
+      contents: read
+      deployments: write
+      pull-requests: write # For PR preview comments
+
+    steps:
+      - uses: actions/checkout@v5
+      - 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 website --frozen-lockfile
+
+      - name: Build the website
+        run: pnpm website:build
+
+      - name: Deploy
+        uses: ./.github/actions/deploy-to-cloudflare-pages
+        with:
+          project_name: "trilium-homepage"
+          comment_body: "📚 Website preview is ready"
+          production_url: "https://triliumnotes.org"
+          deploy_dir: "apps/website/dist"
+          cloudflare_api_token: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          cloudflare_account_id: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -1,4 +1,5 @@
 # See https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+/.cache
 
 # compiled output
 dist
@@ -32,14 +33,11 @@ testem.log
 .DS_Store
 Thumbs.db
 
-.nx/cache
-.nx/workspace-data
-
 vite.config.*.timestamp*
 vitest.config.*.timestamp*
 test-output
 
-apps/*/data
+apps/*/data*
 apps/*/out
 upload
 
@@ -47,4 +45,7 @@ upload
 *.tsbuildinfo
 
 /result
-.svelte-kit
+.svelte-kit
+
+# docs
+site/

.nvmrc

@@ -1 +1 @@
-22.18.0
+24.11.0

.vscode/extensions.json

@@ -5,7 +5,6 @@
     "lokalise.i18n-ally",
     "ms-azuretools.vscode-docker",
     "ms-playwright.playwright",
-    "nrwl.angular-console",
     "redhat.vscode-yaml",
     "tobermory.es6-string-html",
     "vitest.explorer",

.vscode/i18n-ally-custom-framework.yml

@@ -14,6 +14,7 @@ usageMatchRegex:
   # the `{key}` will be placed by a proper keypath matching regex,
   # you can ignore it and use your own matching rules as well
   - "[^\\w\\d]t\\(['\"`]({key})['\"`]"
+  - <Trans\s*i18nKey="({key})"[^>]*>
 
 # A RegEx to set a custom scope range. This scope will be used as a prefix when detecting keys
 # and works like how the i18next framework identifies the namespace scope from the

.vscode/mcp.json

@@ -1,8 +0,0 @@
-{
-  "servers": {
-    "nx-mcp": {
-      "type": "http",
-      "url": "http://localhost:9461/mcp"
-    }
-  }
-}

.vscode/settings.json

@@ -5,7 +5,8 @@
     "i18n-ally.keystyle": "nested",
     "i18n-ally.localesPaths": [
         "apps/server/src/assets/translations",
-        "apps/client/src/translations"
+        "apps/client/src/translations",
+        "apps/website/public/translations"
     ],
     "npm.exclude": [
         "**/dist",
@@ -35,6 +36,5 @@
         "docs/**/*.png": true,
         "apps/server/src/assets/doc_notes/**": true,
         "apps/edit-docs/demo/**": true
-    },
-    "nxConsole.generateAiAgentRules": true
+    }
 }

.vscode/snippets.code-snippets

@@ -20,5 +20,10 @@
         "scope": "typescript",
         "prefix": "jqf",
         "body": ["private $${1:name}!: JQuery<HTMLElement>;"]
+    },
+    "region": {
+        "scope": "css",
+        "prefix": "region",
+        "body": ["/* #region ${1:name} */\n$0\n/* #endregion */"]
     }
 }

CLAUDE.md

@@ -4,7 +4,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 
 ## Overview
 
-Trilium Notes is a hierarchical note-taking application with advanced features like synchronization, scripting, and rich text editing. It's built as a TypeScript monorepo using NX, with multiple applications and shared packages.
+Trilium Notes is a hierarchical note-taking application with advanced features like synchronization, scripting, and rich text editing. It's built as a TypeScript monorepo using pnpm, with multiple applications and shared packages.
 
 ## Development Commands
 
@@ -14,12 +14,9 @@ Trilium Notes is a hierarchical note-taking application with advanced features l
 
 ### Running Applications
 - `pnpm run server:start` - Start development server (http://localhost:8080)
-- `pnpm nx run server:serve` - Alternative server start command
-- `pnpm nx run desktop:serve` - Run desktop Electron app
 - `pnpm run server:start-prod` - Run server in production mode
 
 ### Building
-- `pnpm nx build <project>` - Build specific project (server, client, desktop, etc.)
 - `pnpm run client:build` - Build client application
 - `pnpm run server:build` - Build server application
 - `pnpm run electron:build` - Build desktop application
@@ -28,13 +25,8 @@ Trilium Notes is a hierarchical note-taking application with advanced features l
 - `pnpm test:all` - Run all tests (parallel + sequential)
 - `pnpm test:parallel` - Run tests that can run in parallel
 - `pnpm test:sequential` - Run tests that must run sequentially (server, ckeditor5-mermaid, ckeditor5-math)
-- `pnpm nx test <project>` - Run tests for specific project
 - `pnpm coverage` - Generate coverage reports
 
-### Linting & Type Checking
-- `pnpm nx run <project>:lint` - Lint specific project
-- `pnpm nx run <project>:typecheck` - Type check specific project
-
 ## Architecture Overview
 
 ### Monorepo Structure
@@ -94,7 +86,6 @@ Frontend uses a widget system (`apps/client/src/widgets/`):
    - `apps/server/src/assets/db/schema.sql` - Core database structure
 
 4. **Configuration**:
-   - `nx.json` - NX workspace configuration
    - `package.json` - Project dependencies and scripts
 
 ## Note Types and Features
@@ -154,7 +145,7 @@ Trilium provides powerful user scripting capabilities:
 - Update schema in `apps/server/src/assets/db/schema.sql`
 
 ## Build System Notes
-- Uses NX for monorepo management with build caching
+- Uses pnpm for monorepo management
 - Vite for fast development builds
 - ESBuild for production optimization
 - pnpm workspaces for dependency management

README.md

@@ -1,11 +1,22 @@
+<div align="center">
+	<sup>Special thanks to:</sup><br />
+	<a href="https://go.warp.dev/Trilium" target="_blank">		
+		<img alt="Warp sponsorship" width="400" src="https://github.com/warpdotdev/brand-assets/blob/main/Github/Sponsor/Warp-Github-LG-03.png"><br />
+		Warp, built for coding with multiple AI agents<br />
+	</a>
+  <sup>Available for macOS, Linux and Windows</sup>
+</div>
+
+<hr />
+
 # Trilium Notes
 
 ![GitHub Sponsors](https://img.shields.io/github/sponsors/eliandoran) ![LiberaPay patrons](https://img.shields.io/liberapay/patrons/ElianDoran)  
-![Docker Pulls](https://img.shields.io/docker/pulls/triliumnext/notes)
-![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/triliumnext/notes/total)  
+![Docker Pulls](https://img.shields.io/docker/pulls/triliumnext/trilium)
+![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/triliumnext/trilium/total)  
 [![RelativeCI](https://badges.relative-ci.com/badges/Di5q7dz9daNDZ9UXi0Bp?branch=develop)](https://app.relative-ci.com/projects/Di5q7dz9daNDZ9UXi0Bp) [![Translation status](https://hosted.weblate.org/widget/trilium/svg-badge.svg)](https://hosted.weblate.org/engage/trilium/)
 
-[English](./README.md) | [Chinese](./docs/README-ZH_CN.md) | [Russian](./docs/README.ru.md) | [Japanese](./docs/README.ja.md) | [Italian](./docs/README.it.md) | [Spanish](./docs/README.es.md)
+[English](./README.md) | [Chinese (Simplified)](./docs/README-ZH_CN.md) | [Chinese (Traditional)](./docs/README-ZH_TW.md) | [Russian](./docs/README-ru.md) | [Japanese](./docs/README-ja.md) | [Italian](./docs/README-it.md) | [Spanish](./docs/README-es.md)
 
 Trilium Notes is a free and open-source, cross-platform hierarchical note taking application with focus on building large personal knowledge bases.
 
@@ -13,6 +24,27 @@ See [screenshots](https://triliumnext.github.io/Docs/Wiki/screenshot-tour) for q
 
 <a href="https://triliumnext.github.io/Docs/Wiki/screenshot-tour"><img src="./docs/app.png" alt="Trilium Screenshot" width="1000"></a>
 
+## ⏬ Download
+- [Latest release](https://github.com/TriliumNext/Trilium/releases/latest) – stable version, recommended for most users.
+- [Nightly build](https://github.com/TriliumNext/Trilium/releases/tag/nightly) – unstable development version, updated daily with the latest features and fixes.
+
+## 📚 Documentation
+
+**Visit our comprehensive documentation at [docs.triliumnotes.org](https://docs.triliumnotes.org/)**
+
+Our documentation is available in multiple formats:
+- **Online Documentation**: Browse the full documentation at [docs.triliumnotes.org](https://docs.triliumnotes.org/)
+- **In-App Help**: Press `F1` within Trilium to access the same documentation directly in the application
+- **GitHub**: Navigate through the [User Guide](./docs/User%20Guide/User%20Guide/) in this repository
+
+### Quick Links
+- [Getting Started Guide](https://docs.triliumnotes.org/)
+- [Installation Instructions](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation.md)
+- [Docker Setup](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation/1.%20Installing%20the%20server/Using%20Docker.md)
+- [Upgrading TriliumNext](./docs/User%20Guide/User%20Guide/Installation%20%26%20Setup/Upgrading%20TriliumNext.md)
+- [Basic Concepts and Features](./docs/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Notes.md)
+- [Patterns of Personal Knowledge Base](https://triliumnext.github.io/Docs/Wiki/patterns-of-personal-knowledge)
+
 ## 🎁 Features
 
 * Notes can be arranged into arbitrarily deep tree. Single note can be placed into multiple places in the tree (see [cloning](https://triliumnext.github.io/Docs/Wiki/cloning-notes))
@@ -46,28 +78,15 @@ See [screenshots](https://triliumnext.github.io/Docs/Wiki/screenshot-tour) for q
 - [awesome-trilium](https://github.com/Nriver/awesome-trilium) for 3rd party themes, scripts, plugins and more.
 - [TriliumRocks!](https://trilium.rocks/) for tutorials, guides, and much more.
 
-## ⚠️ Why TriliumNext?
+## ❓Why TriliumNext?
 
-[The original Trilium project is in maintenance mode](https://github.com/zadam/trilium/issues/4620).
+The original Trilium developer ([Zadam](https://github.com/zadam)) has graciously given the Trilium repository to the community project which resides at https://github.com/TriliumNext
 
-### Migrating from Trilium?
+### ⬆️Migrating from Zadam/Trilium?
 
-There are no special migration steps to migrate from a zadam/Trilium instance to a TriliumNext/Notes instance. Simply [install TriliumNext/Notes](#-installation) as usual and it will use your existing database.
+There are no special migration steps to migrate from a zadam/Trilium instance to a TriliumNext/Trilium instance. Simply [install TriliumNext/Trilium](#-installation) as usual and it will use your existing database.
 
-Versions up to and including [v0.90.4](https://github.com/TriliumNext/Notes/releases/tag/v0.90.4) are compatible with the latest zadam/trilium version of [v0.63.7](https://github.com/zadam/trilium/releases/tag/v0.63.7). Any later versions of TriliumNext have their sync versions incremented.
-
-## 📖 Documentation
-
-We're currently in the progress of moving the documentation to in-app (hit the `F1` key within Trilium). As a result, there may be some missing parts until we've completed the migration. If you'd prefer to navigate through the documentation within GitHub, you can navigate the [User Guide](./docs/User%20Guide/User%20Guide/) documentation. 
-
-Below are some quick links for your convenience to navigate the documentation:
-- [Server installation](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation.md)
-  - [Docker installation](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation/1.%20Installing%20the%20server/Using%20Docker.md)
-- [Upgrading TriliumNext](./docs/User%20Guide/User%20Guide/Installation%20%26%20Setup/Upgrading%20TriliumNext.md)
-- [Concepts and Features - Note](./docs/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Notes.md)
-- [Patterns of personal knowledge base](https://triliumnext.github.io/Docs/Wiki/patterns-of-personal-knowledge)
-
-Until we finish reorganizing the documentation, you may also want to [browse the old documentation](https://triliumnext.github.io/Docs).
+Versions up to and including [v0.90.4](https://github.com/TriliumNext/Trilium/releases/tag/v0.90.4) are compatible with the latest zadam/trilium version of [v0.63.7](https://github.com/zadam/trilium/releases/tag/v0.63.7). Any later versions of TriliumNext/Trilium have their sync versions incremented which prevents direct migration.
 
 ## 💬 Discuss with us
 
@@ -75,8 +94,8 @@ Feel free to join our official conversations. We would love to hear what feature
 
 - [Matrix](https://matrix.to/#/#triliumnext:matrix.org) (For synchronous discussions.)
   - The `General` Matrix room is also bridged to [XMPP](xmpp:discuss@trilium.thisgreat.party?join)
-- [Github Discussions](https://github.com/TriliumNext/Notes/discussions) (For asynchronous discussions.)
-- [Github Issues](https://github.com/TriliumNext/Notes/issues) (For bug reports and feature requests.)
+- [Github Discussions](https://github.com/TriliumNext/Trilium/discussions) (For asynchronous discussions.)
+- [Github Issues](https://github.com/TriliumNext/Trilium/issues) (For bug reports and feature requests.)
 
 ## 🏗 Installation
 
@@ -104,13 +123,15 @@ Currently only the latest versions of Chrome & Firefox are supported (and tested
 
 To use TriliumNext on a mobile device, you can use a mobile web browser to access the mobile interface of a server installation (see below).
 
-If you prefer a native Android app, you can use [TriliumDroid](https://apt.izzysoft.de/fdroid/index/apk/eu.fliegendewurst.triliumdroid). Report bugs and missing features at [their repository](https://github.com/FliegendeWurst/TriliumDroid).
+See issue https://github.com/TriliumNext/Trilium/issues/4962 for more information on mobile app support.
 
-See issue https://github.com/TriliumNext/Notes/issues/72 for more information on mobile app support.
+If you prefer a native Android app, you can use [TriliumDroid](https://apt.izzysoft.de/fdroid/index/apk/eu.fliegendewurst.triliumdroid).
+Report bugs and missing features at [their repository](https://github.com/FliegendeWurst/TriliumDroid).
+Note: It is best to disable automatic updates on your server installation (see below) when using TriliumDroid since the sync version must match between Trilium and TriliumDroid.
 
 ### Server
 
-To install TriliumNext on your own server (including via Docker from [Dockerhub](https://hub.docker.com/r/triliumnext/notes)) follow [the server installation docs](https://triliumnext.github.io/Docs/Wiki/server-installation).
+To install TriliumNext on your own server (including via Docker from [Dockerhub](https://hub.docker.com/r/triliumnext/trilium)) follow [the server installation docs](https://triliumnext.github.io/Docs/Wiki/server-installation).
 
 
 ## 💻 Contribute
@@ -140,7 +161,7 @@ Download the repository, install dependencies using `pnpm` and then run the envi
 git clone https://github.com/TriliumNext/Trilium.git
 cd Trilium
 pnpm install
-pnpm nx run edit-docs:edit-docs
+pnpm edit-docs:edit-docs
 ```
 
 ### Building the Executable
@@ -149,27 +170,45 @@ Download the repository, install dependencies using `pnpm` and then build the de
 git clone https://github.com/TriliumNext/Trilium.git
 cd Trilium
 pnpm install
-pnpm nx --project=desktop electron-forge:make -- --arch=x64 --platform=win32
+pnpm run --filter desktop electron-forge:make --arch=x64 --platform=win32
 ```
 
-For more details, see the [development docs](https://github.com/TriliumNext/Notes/blob/develop/docs/Developer%20Guide/Developer%20Guide/Building%20and%20deployment/Running%20a%20development%20build.md).
+For more details, see the [development docs](https://github.com/TriliumNext/Trilium/tree/main/docs/Developer%20Guide/Developer%20Guide).
 
 ### Developer Documentation
 
-Please view the [documentation guide](./docs/Developer%20Guide/Developer%20Guide/Environment%20Setup.md) for details. If you have more questions, feel free to reach out via the links described in the "Discuss with us" section above.
+Please view the [documentation guide](https://github.com/TriliumNext/Trilium/blob/main/docs/Developer%20Guide/Developer%20Guide/Environment%20Setup.md) for details. If you have more questions, feel free to reach out via the links described in the "Discuss with us" section above.
 
 ## 👏 Shoutouts
 
-* [CKEditor 5](https://github.com/ckeditor/ckeditor5) - best WYSIWYG editor on the market, very interactive and listening team
-* [FancyTree](https://github.com/mar10/fancytree) - very feature rich tree library without real competition. Trilium Notes would not be the same without it.
-* [CodeMirror](https://github.com/codemirror/CodeMirror) - code editor with support for huge amount of languages
-* [jsPlumb](https://github.com/jsplumb/jsplumb) - visual connectivity library without competition. Used in [relation maps](https://triliumnext.github.io/Docs/Wiki/relation-map.html) and [link maps](https://triliumnext.github.io/Docs/Wiki/note-map.html#link-map)
+* [zadam](https://github.com/zadam) for the original concept and implementation of the application.
+* [Sarah Hussein](https://github.com/Sarah-Hussein) for designing the application icon.
+* [nriver](https://github.com/nriver) for his work on internationalization.
+* [Thomas Frei](https://github.com/thfrei) for his original work on the Canvas.
+* [antoniotejada](https://github.com/nriver) for the original syntax highlight widget.
+* [Dosu](https://dosu.dev/) for providing us with the automated responses to GitHub issues and discussions.
+* [Tabler Icons](https://tabler.io/icons) for the system tray icons.
+
+Trilium would not be possible without the technologies behind it:
+
+* [CKEditor 5](https://github.com/ckeditor/ckeditor5) - the visual editor behind text notes. We are grateful for being offered a set of the premium features.
+* [CodeMirror](https://github.com/codemirror/CodeMirror) - code editor with support for huge amount of languages.
+* [Excalidraw](https://github.com/excalidraw/excalidraw) - the infinite whiteboard used in Canvas notes.
+* [Mind Elixir](https://github.com/SSShooter/mind-elixir-core) - providing the mind map functionality.
+* [Leaflet](https://github.com/Leaflet/Leaflet) - for rendering geographical maps.
+* [Tabulator](https://github.com/olifolkerd/tabulator) - for the interactive table used in collections.
+* [FancyTree](https://github.com/mar10/fancytree) - feature-rich tree library without real competition. 
+* [jsPlumb](https://github.com/jsplumb/jsplumb) - visual connectivity library. Used in [relation maps](https://triliumnext.github.io/Docs/Wiki/relation-map.html) and [link maps](https://triliumnext.github.io/Docs/Wiki/note-map.html#link-map)
 
 ## 🤝 Support
 
-Support for the TriliumNext organization will be possible in the near future. For now, you can:
-- Support continued development on TriliumNext by supporting our developers: [eliandoran](https://github.com/sponsors/eliandoran) (See the [repository insights]([developers]([url](https://github.com/TriliumNext/Notes/graphs/contributors))) for a full list)
-- Show a token of gratitude to the original Trilium developer ([zadam](https://github.com/sponsors/zadam)) via [PayPal](https://paypal.me/za4am) or Bitcoin (bitcoin:bc1qv3svjn40v89mnkre5vyvs2xw6y8phaltl385d2).
+Trilium is built and maintained with [hundreds of hours of work](https://github.com/TriliumNext/Trilium/graphs/commit-activity). Your support keeps it open-source, improves features, and covers costs such as hosting.
+
+Consider supporting the main developer ([eliandoran](https://github.com/eliandoran)) of the application via:
+
+- [GitHub Sponsors](https://github.com/sponsors/eliandoran)
+- [PayPal](https://paypal.me/eliandoran)
+- [Buy Me a Coffee](https://buymeacoffee.com/eliandoran)
 
 
 ## 🔑 License

_regroup/package.json

@@ -35,22 +35,20 @@
     "chore:generate-openapi": "tsx bin/generate-openapi.js"
   },
   "devDependencies": {    
-    "@playwright/test": "1.54.2",
-    "@stylistic/eslint-plugin": "5.2.3",        
-    "@types/express": "5.0.3",    
-    "@types/node": "22.17.1",    
-    "@types/yargs": "17.0.33",
+    "@playwright/test": "1.56.1",
+    "@stylistic/eslint-plugin": "5.5.0",        
+    "@types/express": "5.0.5",    
+    "@types/node": "24.10.0",    
+    "@types/yargs": "17.0.34",
     "@vitest/coverage-v8": "3.2.4",
-    "eslint": "9.33.0",
+    "eslint": "9.39.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "esm": "3.2.25",
-    "jsdoc": "4.0.4",
+    "jsdoc": "4.0.5",
     "lorem-ipsum": "2.0.8",    
     "rcedit": "4.0.1",
-    "rimraf": "6.0.1",    
-    "tslib": "2.8.1",    
-    "typedoc": "0.28.10",
-    "typedoc-plugin-missing-exports": "4.1.0"
+    "rimraf": "6.1.0",    
+    "tslib": "2.8.1" 
   },
   "optionalDependencies": {
     "appdmg": "0.6.6"

_regroup/spec/support/etapi.ts

@@ -1,4 +1,3 @@
-import type child_process from "child_process";
 import { describe, beforeAll, afterAll } from "vitest";
 
 let etapiAuthToken: string | undefined;
@@ -12,8 +11,6 @@ type SpecDefinitionsFunc = () => void;
 
 function describeEtapi(description: string, specDefinitions: SpecDefinitionsFunc): void {
     describe(description, () => {
-        let appProcess: ReturnType<typeof child_process.spawn>;
-
         beforeAll(async () => {});
 
         afterAll(() => {});

_regroup/typedoc.json

@@ -1,15 +0,0 @@
-{
-  "entryPoints": [
-    "src/services/backend_script_entrypoint.ts",
-    "src/public/app/services/frontend_script_entrypoint.ts"
-  ],
-  "plugin": [
-    "typedoc-plugin-missing-exports"
-  ],
-  "outputs": [
-    {
-      "name": "html",
-      "path": "./docs/Script API"
-    }
-  ]
-}

apps/build-docs/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "build-docs",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/main.ts",
+  "scripts": {
+    "start": "tsx ."
+  },
+  "keywords": [],
+  "author": "Elian Doran <contact@eliandoran.me>",
+  "license": "AGPL-3.0-only",
+  "packageManager": "pnpm@10.20.0",
+  "devDependencies": {
+    "@redocly/cli": "2.10.0",
+    "archiver": "7.0.1",
+    "fs-extra": "11.3.2",
+    "react": "19.2.0",
+    "react-dom": "19.2.0",
+    "typedoc": "0.28.14",
+    "typedoc-plugin-missing-exports": "4.1.2"
+  }
+}

apps/build-docs/src/backend_script_entrypoint.ts

@@ -0,0 +1,36 @@
+/**
+ * The backend script API is accessible to code notes with the "JS (backend)" language.
+ *
+ * The entire API is exposed as a single global: {@link api}
+ *
+ * @module Backend Script API
+ */
+
+/**
+ * This file creates the entrypoint for TypeDoc that simulates the context from within a
+ * script note on the server side.
+ *
+ * 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 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";
+export type { BNote };
+export type { default as BOption } from "../../server/src/becca/entities/boption.js";
+export type { default as BRecentNote } from "../../server/src/becca/entities/brecent_note.js";
+export type { default as BRevision } from "../../server/src/becca/entities/brevision.js";
+
+import BNote from "../../server/src/becca/entities/bnote.js";
+import BackendScriptApi, { type Api } from "../../server/src/services/backend_script_api.js";
+
+export type { Api };
+
+const fakeNote = new BNote();
+
+/**
+ * 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

@@ -0,0 +1,145 @@
+process.env.TRILIUM_INTEGRATION_TEST = "memory-no-store";
+process.env.TRILIUM_RESOURCE_DIR = "../server/src";
+process.env.NODE_ENV = "development";
+
+import cls from "@triliumnext/server/src/services/cls.js";
+import { dirname, join, resolve } from "path";
+import * as fs from "fs/promises";
+import * as fsExtra from "fs-extra";
+import archiver from "archiver";
+import { WriteStream } from "fs";
+import { execSync } from "child_process";
+import BuildContext from "./context.js";
+
+const DOCS_ROOT = "../../../docs";
+const OUTPUT_DIR = "../../site";
+
+async function importAndExportDocs(sourcePath: string, outputSubDir: string) {
+    const note = await importData(sourcePath);
+
+    // Use a meaningful name for the temporary zip file
+    const zipName = outputSubDir || "user-guide";
+    const zipFilePath = `output-${zipName}.zip`;
+    try {
+        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 fileOutputStream = fsExtra.createWriteStream(zipFilePath);
+        await exportToZip(taskContext, branch, "share", fileOutputStream);
+        await waitForStreamToFinish(fileOutputStream);
+
+        // Output to root directory if outputSubDir is empty, otherwise to subdirectory
+        const outputPath = outputSubDir ? join(OUTPUT_DIR, outputSubDir) : OUTPUT_DIR;
+        await extractZip(zipFilePath, outputPath);
+    } finally {
+        if (await fsExtra.exists(zipFilePath)) {
+            await fsExtra.rm(zipFilePath);
+        }
+    }
+}
+
+async function buildDocsInner() {
+    const i18n = await import("@triliumnext/server/src/services/i18n.js");
+    await i18n.initializeTranslations();
+
+    const sqlInit = (await import("../../server/src/services/sql_init.js")).default;
+    await sqlInit.createInitialDatabase(true);
+
+    // Wait for becca to be loaded before importing data
+    const beccaLoader = await import("../../server/src/becca/becca_loader.js");
+    await beccaLoader.beccaLoaded;
+
+    // Build User Guide
+    console.log("Building User Guide...");
+    await importAndExportDocs(join(__dirname, DOCS_ROOT, "User Guide"), "");
+
+    // Build Developer 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"));
+
+    console.log("Documentation built successfully!");
+}
+
+export async function importData(path: string) {
+    const buffer = await createImportZip(path);
+    const importService = (await import("../../server/src/services/import/zip.js")).default;
+    const TaskContext = (await import("../../server/src/services/task_context.js")).default;
+    const context = new TaskContext("no-progress-reporting", "importNotes", null);
+    const becca = (await import("../../server/src/becca/becca.js")).default;
+
+    const rootNote = becca.getRoot();
+    if (!rootNote) {
+        throw new Error("Missing root note for import.");
+    }
+    return await importService.importZip(context, buffer, rootNote, {
+        preserveIds: true
+    });
+}
+
+async function createImportZip(path: string) {
+    const inputFile = "input.zip";
+    const archive = archiver("zip", {
+        zlib: { level: 0 }
+    });
+
+    console.log("Archive path is ", resolve(path))
+    archive.directory(path, "/");
+
+    const outputStream = fsExtra.createWriteStream(inputFile);
+    archive.pipe(outputStream);
+    archive.finalize();
+    await waitForStreamToFinish(outputStream);
+
+    try {
+        return await fsExtra.readFile(inputFile);
+    } finally {
+        await fsExtra.rm(inputFile);
+    }
+}
+
+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"));
+    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)) {
+            const destPath = join(outputPath, entry.fileName);
+            const fileContent = await readContent(zip, entry);
+
+            await fsExtra.mkdirs(dirname(destPath));
+            await fs.writeFile(destPath, fileContent);
+        }
+
+        zip.readEntry();
+    });
+}
+
+export default async function buildDocs({ gitRootDir }: BuildContext) {
+    // Build the share theme.
+    execSync(`pnpm run --filter share-theme build`, {
+        stdio: "inherit",
+        cwd: gitRootDir
+    });
+
+    // Trigger the actual build.
+    await new Promise((res, rej) => {
+        cls.init(() => {
+            buildDocsInner()
+                .catch(rej)
+                .then(res);
+        });
+    });
+}

apps/build-docs/src/context.ts

@@ -0,0 +1,4 @@
+export default interface BuildContext {
+    gitRootDir: string;
+    baseDir: string;
+}

apps/build-docs/src/frontend_script_entrypoint.ts

@@ -0,0 +1,28 @@
+/**
+ * The front script API is accessible to code notes with the "JS (frontend)" language.
+ *
+ * The entire API is exposed as a single global: {@link api}
+ *
+ * @module Frontend Script API
+ */
+
+/**
+ * This file creates the entrypoint for TypeDoc that simulates the context from within a
+ * script note.
+ *
+ * Make sure to keep in line with frontend's `script_context.ts`.
+ */
+
+export type { default as BasicWidget } from "../../client/src/widgets/basic_widget.js";
+export type { default as FAttachment } from "../../client/src/entities/fattachment.js";
+export type { default as FAttribute } from "../../client/src/entities/fattribute.js";
+export type { default as FBranch } from "../../client/src/entities/fbranch.js";
+export type { default as FNote } from "../../client/src/entities/fnote.js";
+export type { Api } from "../../client/src/services/frontend_script_api.js";
+export type { default as NoteContextAwareWidget } from "../../client/src/widgets/note_context_aware_widget.js";
+export type { default as RightPanelWidget } from "../../client/src/widgets/right_panel_widget.js";
+
+import FrontendScriptApi, { type Api } from "../../client/src/services/frontend_script_api.js";
+
+//@ts-expect-error
+export const api: Api = new FrontendScriptApi();

apps/build-docs/src/main.ts

@@ -0,0 +1,26 @@
+import { join } from "path";
+import BuildContext from "./context";
+import buildSwagger from "./swagger";
+import { existsSync, mkdirSync, rmSync } from "fs";
+import buildDocs from "./build-docs";
+import buildScriptApi from "./script-api";
+
+const context: BuildContext = {
+    gitRootDir: join(__dirname, "../../../"),
+    baseDir: join(__dirname, "../../../site")
+};
+
+async function main() {
+    // Clean input dir.
+    if (existsSync(context.baseDir)) {
+        rmSync(context.baseDir, { recursive: true });
+    }
+    mkdirSync(context.baseDir);
+
+    // Start building.
+    await buildDocs(context);
+    buildSwagger(context);
+    buildScriptApi(context);
+}
+
+main();

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

@@ -0,0 +1,15 @@
+import { execSync } from "child_process";
+import BuildContext from "./context";
+import { join } from "path";
+
+export default function buildScriptApi({ baseDir, gitRootDir }: BuildContext) {
+    // Generate types
+    execSync(`pnpm typecheck`, { stdio: "inherit", cwd: gitRootDir });
+
+    for (const config of [ "backend", "frontend" ]) {
+        const outDir = join(baseDir, "script-api", config);
+        execSync(`pnpm typedoc --options typedoc.${config}.json --html "${outDir}"`, {
+            stdio: "inherit"
+        });
+    }
+}

apps/build-docs/src/swagger.ts

@@ -0,0 +1,32 @@
+import BuildContext from "./context";
+import { join } from "path";
+import { execSync } from "child_process";
+import { mkdirSync } from "fs";
+
+interface BuildInfo {
+    specPath: string;
+    outDir: string;
+}
+
+const DIR_PREFIX = "rest-api";
+
+const buildInfos: BuildInfo[] = [
+    {
+        // Paths are relative to Git root.
+        specPath: "apps/server/internal.openapi.yaml",
+        outDir: `${DIR_PREFIX}/internal`
+    },
+    {
+        specPath: "apps/server/etapi.openapi.yaml",
+        outDir: `${DIR_PREFIX}/etapi`
+    }
+];
+
+export default function buildSwagger({ baseDir, gitRootDir }: BuildContext) {
+    for (const { specPath, outDir } of buildInfos) {
+        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" });
+    }
+}

apps/build-docs/tsconfig.app.json

@@ -0,0 +1,36 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "target": "ES2020",
+    "outDir": "dist",
+    "strict": false,
+    "types": [
+      "node",
+      "express"
+    ],
+    "rootDir": "src",
+    "tsBuildInfoFile": "dist/tsconfig.app.tsbuildinfo"
+  },
+  "include": [
+    "src/**/*.ts",
+    "../server/src/*.d.ts"
+  ],
+  "exclude": [
+    "eslint.config.js",
+    "eslint.config.cjs",
+    "eslint.config.mjs"
+  ],
+  "references": [
+    {
+      "path": "../server/tsconfig.app.json"
+    },
+    {
+      "path": "../desktop/tsconfig.app.json"
+    },
+    {
+      "path": "../client/tsconfig.app.json"
+    }
+  ]
+}

apps/build-docs/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": [],
+  "references": [
+    {
+      "path": "../server"
+    },
+    {
+      "path": "../client"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

apps/build-docs/typedoc.backend.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "name": "Trilium Backend API",
+  "entryPoints": [
+    "src/backend_script_entrypoint.ts"
+  ],
+  "plugin": [
+    "typedoc-plugin-missing-exports"
+  ]
+}

apps/build-docs/typedoc.frontend.json

@@ -0,0 +1,10 @@
+{
+  "$schema": "https://typedoc.org/schema.json",
+  "name": "Trilium Frontend API",
+  "entryPoints": [
+    "src/frontend_script_entrypoint.ts"
+  ],
+  "plugin": [
+    "typedoc-plugin-missing-exports"
+  ]
+}

apps/client/.env

@@ -1,5 +1,4 @@
 # The development license key for premium CKEditor features.
 # Note: This key must only be used for the Trilium Notes project.
-# Expires on: 2025-09-13
-VITE_CKEDITOR_KEY=eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3NTc3MjE1OTksImp0aSI6ImFiN2E0NjZmLWJlZGMtNDNiYy1iMzU4LTk0NGQ0YWJhY2I3ZiIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsic2giLCJkcnVwYWwiXSwid2hpdGVMYWJlbCI6dHJ1ZSwiZmVhdHVyZXMiOlsiRFJVUCIsIkNNVCIsIkRPIiwiRlAiLCJTQyIsIlRPQyIsIlRQTCIsIlBPRSIsIkNDIiwiTUYiLCJTRUUiLCJFQ0giLCJFSVMiXSwidmMiOiI1MzlkOWY5YyJ9.2rvKPql4hmukyXhEtWPZ8MLxKvzPIwzCdykO653g7IxRRZy2QJpeRszElZx9DakKYZKXekVRAwQKgHxwkgbE_w
+VITE_CKEDITOR_KEY=eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3ODcyNzA0MDAsImp0aSI6IjkyMWE1MWNlLTliNDMtNGRlMC1iOTQwLTc5ZjM2MDBkYjg1NyIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOiJ0cmlsaXVtIiwiZmVhdHVyZXMiOlsiVFJJTElVTSJdLCJ2YyI6ImU4YzRhMjBkIn0.hny77p-U4-jTkoqbwPytrEar5ylGCWBN7Ez3SlB8i6_mJCBIeCSTOlVQk_JMiOEq3AGykUMHzWXzjdMFwgniOw
 VITE_CKEDITOR_ENABLE_INSPECTOR=false

apps/client/package.json

@@ -1,16 +1,21 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.97.2",
+  "version": "0.99.3",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
   "author": {
     "name": "Trilium Notes Team",
     "email": "contact@eliandoran.me",
-    "url": "https://github.com/TriliumNext/Notes"
+    "url": "https://github.com/TriliumNext/Trilium"
+  },
+  "scripts": {
+    "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
+    "test": "vitest",
+    "circular-deps": "dpdm -T src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
   },
   "dependencies": {
-    "@eslint/js": "9.33.0",
+    "@eslint/js": "9.39.0",
     "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
@@ -19,7 +24,7 @@
     "@fullcalendar/multimonth": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
-    "@mermaid-js/layout-elk": "0.1.8",
+    "@mermaid-js/layout-elk": "0.2.0",
     "@mind-elixir/node-menu": "5.0.0",
     "@popperjs/core": "2.11.8",
     "@triliumnext/ckeditor5": "workspace:*",
@@ -27,62 +32,52 @@
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
+    "@triliumnext/split.js": "workspace:*",
     "autocomplete.js": "0.38.1",
-    "bootstrap": "5.3.7",
+    "bootstrap": "5.3.8",
     "boxicons": "2.1.4",
-    "dayjs": "1.11.13",
+    "color": "5.0.2",
+    "dayjs": "1.11.19",
     "dayjs-plugin-utc": "0.1.2",
-    "debounce": "2.2.0",
+    "debounce": "3.0.0",
     "draggabilly": "3.0.0",
-    "force-graph": "1.50.1",
-    "globals": "16.3.0",
-    "i18next": "25.3.4",
+    "force-graph": "1.51.0",
+    "globals": "16.5.0",
+    "i18next": "25.6.0",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.22",
+    "katex": "0.16.25",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "16.1.2",
-    "mermaid": "11.9.0",
-    "mind-elixir": "5.0.5",
+    "marked": "16.4.1",
+    "mermaid": "11.12.1",
+    "mind-elixir": "5.3.4",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
-    "preact": "10.27.0",
-    "split.js": "1.6.5",
+    "preact": "10.27.2",
+    "react-i18next": "16.2.3",
+    "reveal.js": "5.2.1",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
-    "vanilla-js-wheel-zoom": "9.0.4",
-    "photoswipe": "^5.4.4"
+    "vanilla-js-wheel-zoom": "9.0.4"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-inspector": "5.0.0",
     "@preact/preset-vite": "2.10.2",
     "@types/bootstrap": "5.2.10",
-    "@types/jquery": "3.5.32",
-    "@types/leaflet": "1.9.20",
-    "@types/leaflet-gpx": "1.3.7",
+    "@types/jquery": "3.5.33",
+    "@types/leaflet": "1.9.21",
+    "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
-    "@types/tabulator-tables": "6.2.10",
+    "@types/reveal.js": "5.2.1",
+    "@types/tabulator-tables": "6.3.0",
     "copy-webpack-plugin": "13.0.1",
-    "happy-dom": "18.0.1",
+    "happy-dom": "20.0.10",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.1.1"
-  },
-  "nx": {
-    "name": "client",
-    "targets": {
-      "serve": {
-        "dependsOn": [
-          "^build"
-        ]
-      },
-      "circular-deps": {
-        "command": "pnpx dpdm -T {projectRoot}/src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
-      }
-    }
+    "vite-plugin-static-copy": "3.1.4"
   }
 }

apps/client/src/assets/manifest.webmanifest

@@ -7,6 +7,9 @@
     "display": "standalone",
     "scope": "/",
     "start_url": "/",
+    "display_override": [
+        "window-controls-overlay"
+    ],
     "icons": [
         {
             "src": "icon.png",

apps/client/src/components/app_context.ts

@@ -1,6 +1,6 @@
 import froca from "../services/froca.js";
 import RootCommandExecutor from "./root_command_executor.js";
-import Entrypoints, { type SqlExecuteResults } from "./entrypoints.js";
+import Entrypoints from "./entrypoints.js";
 import options from "../services/options.js";
 import utils, { hasTouchBar } from "../services/utils.js";
 import zoomComponent from "./zoom.js";
@@ -31,16 +31,14 @@ 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";
 
 interface Layout {
-    getRootWidget: (appContext: AppContext) => RootWidget;
+    getRootWidget: (appContext: AppContext) => RootContainer;
 }
 
-interface RootWidget extends Component {
-    render: () => JQuery<HTMLElement>;
-}
-
-interface BeforeUploadListener extends Component {
+export interface BeforeUploadListener extends Component {
     beforeUnloadEvent(): boolean;
 }
 
@@ -85,7 +83,6 @@ export type CommandMappings = {
     focusTree: CommandData;
     focusOnTitle: CommandData;
     focusOnDetail: CommandData;
-    focusOnSearchDefinition: Required<CommandData>;
     searchNotes: CommandData & {
         searchString?: string;
         ancestorNoteId?: string | null;
@@ -93,6 +90,11 @@ export type CommandMappings = {
     closeTocCommand: CommandData;
     closeHlt: CommandData;
     showLaunchBarSubtree: CommandData;
+    showHiddenSubtree: CommandData;
+    showSQLConsoleHistory: CommandData;
+    logout: CommandData;
+    switchToMobileVersion: CommandData;
+    switchToDesktopVersion: CommandData;
     showRevisions: CommandData & {
         noteId?: string | null;
     };
@@ -114,7 +116,7 @@ export type CommandMappings = {
     openedFileUpdated: CommandData & {
         entityType: string;
         entityId: string;
-        lastModifiedMs: number;
+        lastModifiedMs?: number;
         filePath: string;
     };
     focusAndSelectTitle: CommandData & {
@@ -138,6 +140,7 @@ export type CommandMappings = {
     showLeftPane: CommandData;
     showAttachments: CommandData;
     showSearchHistory: CommandData;
+    showShareSubtree: CommandData;
     hoistNote: CommandData & { noteId: string };
     leaveProtectedSession: CommandData;
     enterProtectedSession: CommandData;
@@ -215,12 +218,12 @@ export type CommandMappings = {
     /** Works only in the electron context menu. */
     replaceMisspelling: CommandData;
 
-    importMarkdownInline: CommandData;
     showPasswordNotSet: CommandData;
     showProtectedSessionPasswordDialog: CommandData;
     showUploadAttachmentsDialog: CommandData & { noteId: string };
     showIncludeNoteDialog: CommandData & { textTypeWidget: EditableTextTypeWidget };
     showAddLinkDialog: CommandData & { textTypeWidget: EditableTextTypeWidget, text: string };
+    showPasteMarkdownDialog: CommandData & { textTypeWidget: EditableTextTypeWidget };
     closeProtectedSessionPasswordDialog: CommandData;
     copyImageReferenceToClipboard: CommandData;
     copyImageToClipboard: CommandData;
@@ -267,6 +270,7 @@ export type CommandMappings = {
     closeThisNoteSplit: CommandData;
     moveThisNoteSplit: CommandData & { isMovingLeft: boolean };
     jumpToNote: CommandData;
+    openTodayNote: CommandData;
     commandPalette: CommandData;
 
     // Keyboard shortcuts
@@ -323,6 +327,7 @@ export type CommandMappings = {
     printActiveNote: CommandData;
     exportAsPdf: CommandData;
     openNoteExternally: CommandData;
+    openNoteCustom: CommandData;
     renderActiveNote: CommandData;
     unhoist: CommandData;
     reloadFrontendApp: CommandData;
@@ -526,7 +531,7 @@ export type FilteredCommandNames<T extends CommandData> = keyof Pick<CommandMapp
 export class AppContext extends Component {
     isMainWindow: boolean;
     components: Component[];
-    beforeUnloadListeners: WeakRef<BeforeUploadListener>[];
+    beforeUnloadListeners: (WeakRef<BeforeUploadListener> | (() => boolean))[];
     tabManager!: TabManager;
     layout?: Layout;
     noteTreeWidget?: NoteTreeWidget;
@@ -619,7 +624,7 @@ export class AppContext extends Component {
             component.triggerCommand(commandName, { $el: $(this) });
         });
 
-        this.child(rootWidget);
+        this.child(rootWidget as Component);
 
         this.triggerEvent("initialRenderComplete", {});
     }
@@ -646,16 +651,20 @@ export class AppContext extends Component {
     }
 
     getComponentByEl(el: HTMLElement) {
-        return $(el).closest(".component").prop("component");
+        return $(el).closest("[data-component-id]").prop("component");
     }
 
-    addBeforeUnloadListener(obj: BeforeUploadListener) {
+    addBeforeUnloadListener(obj: BeforeUploadListener | (() => boolean)) {
         if (typeof WeakRef !== "function") {
             // older browsers don't support WeakRef
             return;
         }
 
-        this.beforeUnloadListeners.push(new WeakRef<BeforeUploadListener>(obj));
+        if (typeof obj === "object") {
+            this.beforeUnloadListeners.push(new WeakRef<BeforeUploadListener>(obj));
+        } else {
+            this.beforeUnloadListeners.push(obj);
+        }
     }
 }
 
@@ -665,25 +674,29 @@ const appContext = new AppContext(window.glob.isMainWindow);
 $(window).on("beforeunload", () => {
     let allSaved = true;
 
-    appContext.beforeUnloadListeners = appContext.beforeUnloadListeners.filter((wr) => !!wr.deref());
+    appContext.beforeUnloadListeners = appContext.beforeUnloadListeners.filter((wr) => typeof wr === "function" || !!wr.deref());
 
-    for (const weakRef of appContext.beforeUnloadListeners) {
-        const component = weakRef.deref();
+    for (const listener of appContext.beforeUnloadListeners) {
+        if (typeof listener === "object") {
+            const component = listener.deref();
 
-        if (!component) {
-            continue;
-        }
+            if (!component) {
+                continue;
+            }
 
-        if (!component.beforeUnloadEvent()) {
-            console.log(`Component ${component.componentId} is not finished saving its state.`);
-
-            toast.showMessage(t("app_context.please_wait_for_save"), 10000);
-
-            allSaved = false;
+            if (!component.beforeUnloadEvent()) {
+                console.log(`Component ${component.componentId} is not finished saving its state.`);
+                allSaved = false;
+            }
+        } else {
+            if (!listener()) {
+                allSaved = false;
+            }
         }
     }
 
     if (!allSaved) {
+        toast.showMessage(t("app_context.please_wait_for_save"), 10000);
         return "some string";
     }
 });

apps/client/src/components/component.ts

@@ -1,6 +1,8 @@
 import utils from "../services/utils.js";
 import type { CommandMappings, CommandNames, EventData, EventNames } from "./app_context.js";
 
+type EventHandler = ((data: any) => void);
+
 /**
  * Abstract class for all components in the Trilium's frontend.
  *
@@ -19,6 +21,7 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
     initialized: Promise<void> | null;
     parent?: TypedComponent<any>;
     _position!: number;
+    private listeners: Record<string, EventHandler[]> | null = {};
 
     constructor() {
         this.componentId = `${this.sanitizedClassName}-${utils.randomString(8)}`;
@@ -76,6 +79,14 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
     handleEventInChildren<T extends EventNames>(name: T, data: EventData<T>): Promise<unknown[] | unknown> | null {
         const promises: Promise<unknown>[] = [];
 
+        // Handle React children.
+        if (this.listeners?.[name]) {
+            for (const listener of this.listeners[name]) {
+                listener(data);
+            }
+        }
+
+        // Handle legacy children.
         for (const child of this.children) {
             const ret = child.handleEvent(name, data) as Promise<void>;
 
@@ -120,6 +131,35 @@ export class TypedComponent<ChildT extends TypedComponent<ChildT>> {
 
         return promise;
     }
+
+    registerHandler<T extends EventNames>(name: T, handler: EventHandler) {
+        if (!this.listeners) {
+            this.listeners = {};
+        }
+
+        if (!this.listeners[name]) {
+            this.listeners[name] = [];
+        }
+
+        if (this.listeners[name].includes(handler)) {
+            return;
+        }
+
+        this.listeners[name].push(handler);
+    }
+
+    removeHandler<T extends EventNames>(name: T, handler: EventHandler) {
+        if (!this.listeners?.[name]?.includes(handler)) {
+            return;
+        }
+
+        this.listeners[name] = this.listeners[name]
+            .filter(listener => listener !== handler);
+
+        if (!this.listeners[name].length) {
+            delete this.listeners[name];
+        }
+    }
 }
 
 export default class Component extends TypedComponent<Component> {}

apps/client/src/components/entrypoints.ts

@@ -10,22 +10,7 @@ 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 type FNote from "../entities/fnote.js";
-
-// TODO: Move somewhere else nicer.
-export type SqlExecuteResults = string[][][];
-
-// TODO: Deduplicate with server.
-interface SqlExecuteResponse {
-    success: boolean;
-    error?: string;
-    results: SqlExecuteResults;
-}
-
-// TODO: Deduplicate with server.
-interface CreateChildrenResponse {
-    note: FNote;
-}
+import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
 
 export default class Entrypoints extends Component {
     constructor() {
@@ -34,7 +19,7 @@ export default class Entrypoints extends Component {
 
     openDevToolsCommand() {
         if (utils.isElectron()) {
-            utils.dynamicRequire("@electron/remote").getCurrentWindow().toggleDevTools();
+            utils.dynamicRequire("@electron/remote").getCurrentWindow().webContents.toggleDevTools();
         }
     }
 
@@ -124,7 +109,7 @@ export default class Entrypoints extends Component {
         if (utils.isElectron()) {
             // standard JS version does not work completely correctly in electron
             const webContents = utils.dynamicRequire("@electron/remote").getCurrentWebContents();
-            const activeIndex = parseInt(webContents.navigationHistory.getActiveIndex());
+            const activeIndex = webContents.navigationHistory.getActiveIndex();
 
             webContents.goToIndex(activeIndex - 1);
         } else {
@@ -136,7 +121,7 @@ export default class Entrypoints extends Component {
         if (utils.isElectron()) {
             // standard JS version does not work completely correctly in electron
             const webContents = utils.dynamicRequire("@electron/remote").getCurrentWebContents();
-            const activeIndex = parseInt(webContents.navigationHistory.getActiveIndex());
+            const activeIndex = webContents.navigationHistory.getActiveIndex();
 
             webContents.goToIndex(activeIndex + 1);
         } else {
@@ -174,6 +159,16 @@ export default class Entrypoints extends Component {
         this.openInWindowCommand({ notePath: "", hoistedNoteId: "root" });
     }
 
+    async openTodayNoteCommand() {
+        const todayNote = await dateNoteService.getTodayNote();
+        if (!todayNote) {
+            console.warn("Missing today note.");
+            return;
+        }
+
+        await appContext.tabManager.openInSameTab(todayNote.noteId);
+    }
+
     async runActiveNoteCommand() {
         const noteContext = appContext.tabManager.getActiveContext();
         if (!noteContext) {

apps/client/src/components/note_context.ts

@@ -326,9 +326,11 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
         }
 
         // Collections must always display a note list, even if no children.
-        const viewType = note.getLabelValue("viewType") ?? "grid";
-        if (!["list", "grid"].includes(viewType)) {
-            return true;
+        if (note.type === "book") {
+            const viewType = note.getLabelValue("viewType") ?? "grid";
+            if (!["list", "grid"].includes(viewType)) {
+                return true;
+            }
         }
 
         if (!note.hasChildren()) {
@@ -438,4 +440,22 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     }
 }
 
+export function openInCurrentNoteContext(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, notePath: string, viewScope?: ViewScope) {
+    const ntxId = $(evt?.target as Element)
+        .closest("[data-ntx-id]")
+        .attr("data-ntx-id");
+
+    const noteContext = ntxId ? appContext.tabManager.getNoteContextById(ntxId) : appContext.tabManager.getActiveContext();
+
+    if (noteContext) {
+        noteContext.setNote(notePath, { viewScope }).then(() => {
+            if (noteContext !== appContext.tabManager.getActiveContext()) {
+                appContext.tabManager.activateNoteContext(noteContext.ntxId);
+            }
+        });
+    } else {
+        appContext.tabManager.openContextWithNote(notePath, { viewScope, activate: true });
+    }
+}
+
 export default NoteContext;

apps/client/src/components/root_command_executor.ts

@@ -43,8 +43,6 @@ export default class RootCommandExecutor extends Component {
         const noteContext = await appContext.tabManager.openTabWithNoteWithHoisting(searchNote.noteId, {
             activate: true
         });
-
-        appContext.triggerCommand("focusOnSearchDefinition", { ntxId: noteContext.ntxId });
     }
 
     async searchInSubtreeCommand({ notePath }: CommandListenerData<"searchInSubtree">) {

apps/client/src/components/tab_manager.ts

@@ -433,6 +433,9 @@ export default class TabManager extends Component {
                 $autocompleteEl.autocomplete("close");
             }
 
+            // close dangling tooltips
+            $("body > div.tooltip").remove();
+
             const noteContextsToRemove = noteContextToRemove.getSubContexts();
             const ntxIdsToRemove = noteContextsToRemove.map((nc) => nc.ntxId);
 
@@ -600,18 +603,18 @@ export default class TabManager extends Component {
     }
 
     async moveTabToNewWindowCommand({ ntxId }: { ntxId: string }) {
-        const { notePath, hoistedNoteId } = this.getNoteContextById(ntxId);
+        const { notePath, hoistedNoteId, viewScope } = this.getNoteContextById(ntxId);
 
         const removed = await this.removeNoteContext(ntxId);
 
         if (removed) {
-            this.triggerCommand("openInWindow", { notePath, hoistedNoteId });
+            this.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
         }
     }
 
     async copyTabToNewWindowCommand({ ntxId }: { ntxId: string }) {
-        const { notePath, hoistedNoteId } = this.getNoteContextById(ntxId);
-        this.triggerCommand("openInWindow", { notePath, hoistedNoteId });
+        const { notePath, hoistedNoteId, viewScope } = this.getNoteContextById(ntxId);
+        this.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
     }
 
     async reopenLastTabCommand() {

apps/client/src/components/touch_bar.ts

@@ -23,11 +23,11 @@ export default class TouchBarComponent extends Component {
         this.$widget = $("<div>");
 
         $(window).on("focusin", async (e) => {
-            const $target = $(e.target);
+            const focusedEl = e.target as unknown as HTMLElement;
+            const $target = $(focusedEl);
 
             this.$activeModal = $target.closest(".modal-dialog");
-            const parentComponentEl = $target.closest(".component");
-            this.lastFocusedComponent = appContext.getComponentByEl(parentComponentEl[0]);
+            this.lastFocusedComponent = appContext.getComponentByEl(focusedEl);
             this.#refreshTouchBar();
         });
     }

apps/client/src/desktop.ts

@@ -8,13 +8,9 @@ import electronContextMenu from "./menus/electron_context_menu.js";
 import glob from "./services/glob.js";
 import { t } from "./services/i18n.js";
 import options from "./services/options.js";
-import server from "./services/server.js";
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
-import "./stylesheets/bootstrap.scss";
 import "boxicons/css/boxicons.min.css";
-import "./stylesheets/media-viewer.css";
-import "./styles/gallery.css";
 import "autocomplete.js/index_jquery.js";
 
 await appContext.earlyInit();
@@ -48,6 +44,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));
@@ -116,3 +116,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,6 +1,5 @@
 import server from "../services/server.js";
 import noteAttributeCache from "../services/note_attribute_cache.js";
-import ws from "../services/ws.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import cssClassManager from "../services/css_class_manager.js";
 import type { Froca } from "../services/froca-interface.js";
@@ -64,7 +63,7 @@ export interface NoteMetaData {
 /**
  * Note is the main node and concept in Trilium.
  */
-class FNote {
+export default class FNote {
     private froca: Froca;
 
     noteId!: string;
@@ -256,18 +255,20 @@ class FNote {
         return this.children;
     }
 
-    async getSubtreeNoteIds() {
+    async getSubtreeNoteIds(includeArchived = false) {
         let noteIds: (string | string[])[] = [];
         for (const child of await this.getChildNotes()) {
+            if (child.isArchived && !includeArchived) continue;
+
             noteIds.push(child.noteId);
-            noteIds.push(await child.getSubtreeNoteIds());
+            noteIds.push(await child.getSubtreeNoteIds(includeArchived));
         }
         return noteIds.flat();
     }
 
     async getSubtreeNotes() {
         const noteIds = await this.getSubtreeNoteIds();
-        return this.froca.getNotes(noteIds);
+        return (await this.froca.getNotes(noteIds));
     }
 
     async getChildNotes() {
@@ -416,7 +417,7 @@ class FNote {
         return notePaths;
     }
 
-    getSortedNotePathRecords(hoistedNoteId = "root"): NotePathRecord[] {
+    getSortedNotePathRecords(hoistedNoteId = "root", activeNotePath: string | null = null): NotePathRecord[] {
         const isHoistedRoot = hoistedNoteId === "root";
 
         const notePaths: NotePathRecord[] = this.getAllNotePaths().map((path) => ({
@@ -427,7 +428,23 @@ class FNote {
             isHidden: path.includes("_hidden")
         }));
 
+        // Calculate the length of the prefix match between two arrays
+        const prefixMatchLength = (path: string[], target: string[]) => {
+            const diffIndex = path.findIndex((seg, i) => seg !== target[i]);
+            return diffIndex === -1 ? Math.min(path.length, target.length) : diffIndex;
+        };
+
         notePaths.sort((a, b) => {
+            if (activeNotePath) {
+                const activeSegments = activeNotePath.split('/');
+                const aOverlap = prefixMatchLength(a.notePath, activeSegments);
+                const bOverlap = prefixMatchLength(b.notePath, activeSegments);
+                // Paths with more matching prefix segments are prioritized
+                // when the match count is equal, other criteria are used for sorting
+                if (bOverlap !== aOverlap) {
+                    return bOverlap - aOverlap;
+                }
+            }
             if (a.isInHoistedSubTree !== b.isInHoistedSubTree) {
                 return a.isInHoistedSubTree ? -1 : 1;
             } else if (a.isArchived !== b.isArchived) {
@@ -448,10 +465,11 @@ class FNote {
      * Returns the note path considered to be the "best"
      *
      * @param {string} [hoistedNoteId='root']
+     * @param {string|null} [activeNotePath=null]
      * @return {string[]} array of noteIds constituting the particular note path
      */
-    getBestNotePath(hoistedNoteId = "root") {
-        return this.getSortedNotePathRecords(hoistedNoteId)[0]?.notePath;
+    getBestNotePath(hoistedNoteId = "root", activeNotePath: string | null = null) {
+        return this.getSortedNotePathRecords(hoistedNoteId, activeNotePath)[0]?.notePath;
     }
 
     /**
@@ -584,7 +602,7 @@ class FNote {
         let childBranches = this.getChildBranches();
 
         if (!childBranches) {
-            ws.logError(`No children for '${this.noteId}'. This shouldn't happen.`);
+            console.error(`No children for '${this.noteId}'. This shouldn't happen.`);
             return [];
         }
 
@@ -905,8 +923,8 @@ class FNote {
         return this.getBlob();
     }
 
-    async getBlob() {
-        return await this.froca.getBlob("notes", this.noteId);
+    getBlob() {
+        return this.froca.getBlob("notes", this.noteId);
     }
 
     toString() {
@@ -1020,6 +1038,14 @@ class FNote {
         return this.noteId.startsWith("_options");
     }
 
+    isTriliumSqlite() {
+        return this.mime === "text/x-sqlite;schema=trilium";
+    }
+
+    isTriliumScript() {
+        return this.mime.startsWith("application/javascript");
+    }
+
     /**
      * Provides note's date metadata.
      */
@@ -1027,5 +1053,3 @@ class FNote {
         return await server.get<NoteMetaData>(`notes/${this.noteId}/metadata`);
     }
 }
-
-export default FNote;

apps/client/src/layouts/desktop_layout.tsx

@@ -1,78 +1,47 @@
 import FlexContainer from "../widgets/containers/flex_container.js";
-import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import TabRowWidget from "../widgets/tab_row.js";
-import TitleBarButtonsWidget from "../widgets/title_bar_buttons.js";
 import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteTitleWidget from "../widgets/note_title.js";
-import OwnedAttributeListWidget from "../widgets/ribbon_widgets/owned_attribute_list.js";
-import NoteActionsWidget from "../widgets/buttons/note_actions.js";
+import NoteTitleWidget from "../widgets/note_title.jsx";
 import NoteDetailWidget from "../widgets/note_detail.js";
-import RibbonContainer from "../widgets/containers/ribbon_container.js";
-import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
-import InheritedAttributesWidget from "../widgets/ribbon_widgets/inherited_attribute_list.js";
-import NoteListWidget from "../widgets/note_list.js";
-import SearchDefinitionWidget from "../widgets/ribbon_widgets/search_definition.js";
-import SqlResultWidget from "../widgets/sql_result.js";
-import SqlTableSchemasWidget from "../widgets/sql_table_schemas.js";
-import FilePropertiesWidget from "../widgets/ribbon_widgets/file_properties.js";
-import ImagePropertiesWidget from "../widgets/ribbon_widgets/image_properties.js";
-import NotePropertiesWidget from "../widgets/ribbon_widgets/note_properties.js";
-import NoteIconWidget from "../widgets/note_icon.js";
-import SearchResultWidget from "../widgets/search_result.js";
+import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
+import NoteIconWidget from "../widgets/note_icon.jsx";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
 import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
 import SpacerWidget from "../widgets/spacer.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import LeftPaneToggleWidget from "../widgets/buttons/left_pane_toggle.js";
 import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
 import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
-import BasicPropertiesWidget from "../widgets/ribbon_widgets/basic_properties.js";
-import NoteInfoWidget from "../widgets/ribbon_widgets/note_info_widget.js";
-import BookPropertiesWidget from "../widgets/ribbon_widgets/book_properties.js";
-import NoteMapRibbonWidget from "../widgets/ribbon_widgets/note_map.js";
-import NotePathsWidget from "../widgets/ribbon_widgets/note_paths.js";
-import SimilarNotesWidget from "../widgets/ribbon_widgets/similar_notes.js";
 import RightPaneContainer from "../widgets/containers/right_pane_container.js";
-import EditButton from "../widgets/floating_buttons/edit_button.js";
-import EditedNotesWidget from "../widgets/ribbon_widgets/edited_notes.js";
-import ShowTocWidgetButton from "../widgets/buttons/show_toc_widget_button.js";
-import ShowHighlightsListWidgetButton from "../widgets/buttons/show_highlights_list_widget_button.js";
 import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
-import SharedInfoWidget from "../widgets/shared_info.js";
 import FindWidget from "../widgets/find.js";
 import TocWidget from "../widgets/toc.js";
 import HighlightsListWidget from "../widgets/highlights_list.js";
 import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
-import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js";
-import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js";
-import SvgExportButton from "../widgets/floating_buttons/svg_export_button.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
-import RevisionsButton from "../widgets/buttons/revisions_button.js";
-import CodeButtonsWidget from "../widgets/floating_buttons/code_buttons.js";
-import ApiLogWidget from "../widgets/api_log.js";
-import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
-import ScriptExecutorWidget from "../widgets/ribbon_widgets/script_executor.js";
 import MovePaneButton from "../widgets/buttons/move_pane_button.js";
 import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
-import CopyImageReferenceButton from "../widgets/floating_buttons/copy_image_reference_button.js";
-import ScrollPaddingWidget from "../widgets/scroll_padding.js";
-import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";
+import ScrollPadding from "../widgets/scroll_padding.js";
 import options from "../services/options.js";
 import utils from "../services/utils.js";
-import GeoMapButtons from "../widgets/floating_buttons/geo_map_button.js";
-import ContextualHelpButton from "../widgets/floating_buttons/help_button.js";
-import CloseZenButton from "../widgets/close_zen_button.js";
 import type { AppContext } from "../components/app_context.js";
 import type { WidgetsByParent } from "../services/bundle.js";
-import SwitchSplitOrientationButton from "../widgets/floating_buttons/switch_layout_button.js";
-import ToggleReadOnlyButton from "../widgets/floating_buttons/toggle_read_only_button.js";
-import PngExportButton from "../widgets/floating_buttons/png_export_button.js";
-import RefreshButton from "../widgets/floating_buttons/refresh_button.js";
 import { applyModals } from "./layout_commons.js";
+import Ribbon from "../widgets/ribbon/Ribbon.jsx";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import SearchResult from "../widgets/search_result.jsx";
+import GlobalMenu from "../widgets/buttons/global_menu.jsx";
+import SqlResults from "../widgets/sql_result.js";
+import SqlTableSchemas from "../widgets/sql_table_schemas.js";
+import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
+import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
+import ApiLog from "../widgets/api_log.jsx";
+import CloseZenModeButton from "../widgets/close_zen_button.jsx";
+import SharedInfo from "../widgets/shared_info.jsx";
+import NoteList from "../widgets/collections/NoteList.jsx";
 
 export default class DesktopLayout {
 
@@ -107,9 +76,9 @@ export default class DesktopLayout {
                 new FlexContainer("row")
                     .class("tab-row-container")
                     .child(new FlexContainer("row").id("tab-row-left-spacer"))
-                    .optChild(launcherPaneIsHorizontal, new LeftPaneToggleWidget(true))
+                    .optChild(launcherPaneIsHorizontal, <LeftPaneToggle isHorizontalLayout={true} />)
                     .child(new TabRowWidget().class("full-width"))
-                    .optChild(customTitleBarButtons, new TitleBarButtonsWidget())
+                    .optChild(customTitleBarButtons, <TitleBarButtons />)
                     .css("height", "40px")
                     .css("background-color", "var(--launcher-pane-background-color)")
                     .setParent(appContext)
@@ -130,7 +99,7 @@ export default class DesktopLayout {
                         new FlexContainer("column")
                             .id("rest-pane")
                             .css("flex-grow", "1")
-                            .optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, new TitleBarButtonsWidget()).css("height", "40px"))
+                            .optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, <TitleBarButtons />).css("height", "40px"))
                             .child(
                                 new FlexContainer("row")
                                     .filling()
@@ -151,69 +120,30 @@ export default class DesktopLayout {
                                                                 .css("min-height", "50px")
                                                                 .css("align-items", "center")
                                                                 .cssBlock(".title-row > * { margin: 5px; }")
-                                                                .child(new NoteIconWidget())
-                                                                .child(new NoteTitleWidget())
+                                                                .child(<NoteIconWidget />)
+                                                                .child(<NoteTitleWidget />)
                                                                 .child(new SpacerWidget(0, 1))
-                                                                .child(new MovePaneButton(true))
-                                                                .child(new MovePaneButton(false))
-                                                                .child(new ClosePaneButton())
-                                                                .child(new CreatePaneButton())
+                                                                .child(<MovePaneButton direction="left" />)
+                                                                .child(<MovePaneButton direction="right" />)
+                                                                .child(<ClosePaneButton />)
+                                                                .child(<CreatePaneButton />)
                                                         )
-                                                        .child(
-                                                            new RibbonContainer()
-                                                                // the order of the widgets matter. Some of these want to "activate" themselves
-                                                                // when visible. When this happens to multiple of them, the first one "wins".
-                                                                // promoted attributes should always win.
-                                                                .ribbon(new ClassicEditorToolbar())
-                                                                .ribbon(new ScriptExecutorWidget())
-                                                                .ribbon(new SearchDefinitionWidget())
-                                                                .ribbon(new EditedNotesWidget())
-                                                                .ribbon(new BookPropertiesWidget())
-                                                                .ribbon(new NotePropertiesWidget())
-                                                                .ribbon(new FilePropertiesWidget())
-                                                                .ribbon(new ImagePropertiesWidget())
-                                                                .ribbon(new BasicPropertiesWidget())
-                                                                .ribbon(new OwnedAttributeListWidget())
-                                                                .ribbon(new InheritedAttributesWidget())
-                                                                .ribbon(new NotePathsWidget())
-                                                                .ribbon(new NoteMapRibbonWidget())
-                                                                .ribbon(new SimilarNotesWidget())
-                                                                .ribbon(new NoteInfoWidget())
-                                                                .button(new RevisionsButton())
-                                                                .button(new NoteActionsWidget())
-                                                        )
-                                                        .child(new SharedInfoWidget())
+                                                        .child(<Ribbon />)
+                                                        .child(<SharedInfo />)
                                                         .child(new WatchedFileUpdateStatusWidget())
-                                                        .child(
-                                                            new FloatingButtons()
-                                                                .child(new RefreshButton())
-                                                                .child(new SwitchSplitOrientationButton())
-                                                                .child(new ToggleReadOnlyButton())
-                                                                .child(new EditButton())
-                                                                .child(new ShowTocWidgetButton())
-                                                                .child(new ShowHighlightsListWidgetButton())
-                                                                .child(new CodeButtonsWidget())
-                                                                .child(new RelationMapButtons())
-                                                                .child(new GeoMapButtons())
-                                                                .child(new CopyImageReferenceButton())
-                                                                .child(new SvgExportButton())
-                                                                .child(new PngExportButton())
-                                                                .child(new BacklinksWidget())
-                                                                .child(new ContextualHelpButton())
-                                                                .child(new HideFloatingButtonsButton())
-                                                        )
+                                                        .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
                                                         .child(
                                                             new ScrollingContainer()
                                                                 .filling()
                                                                 .child(new PromotedAttributesWidget())
-                                                                .child(new SqlTableSchemasWidget())
+                                                                .child(<SqlTableSchemas />)
                                                                 .child(new NoteDetailWidget())
-                                                                .child(new NoteListWidget(false))
-                                                                .child(new SearchResultWidget())
-                                                                .child(new SqlResultWidget())
-                                                                .child(new ScrollPaddingWidget())
+                                                                .child(<NoteList media="screen" />)
+                                                                .child(<SearchResult />)
+                                                                .child(<SqlResults />)
+                                                                .child(<ScrollPadding />)
                                                         )
-                                                        .child(new ApiLogWidget())
+                                                        .child(<ApiLog />)
                                                         .child(new FindWidget())
                                                         .child(
                                                             ...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC
@@ -232,11 +162,11 @@ export default class DesktopLayout {
                             )
                     )
             )
-            .child(new CloseZenButton())
+            .child(<CloseZenModeButton />)
 
             // Desktop-specific dialogs.
-            .child(new PasswordNoteSetDialog())
-            .child(new UploadAttachmentsDialog());
+            .child(<PasswordNoteSetDialog />)
+            .child(<UploadAttachmentsDialog />);
 
         applyModals(rootContainer);
         return rootContainer;
@@ -246,14 +176,18 @@ export default class DesktopLayout {
         let launcherPane;
 
         if (isHorizontal) {
-            launcherPane = new FlexContainer("row").css("height", "53px").class("horizontal").child(new LauncherContainer(true)).child(new GlobalMenuWidget(true));
+            launcherPane = new FlexContainer("row")
+                .css("height", "53px")
+                .class("horizontal")
+                .child(new LauncherContainer(true))
+                .child(<GlobalMenu isHorizontalLayout={true} />);
         } else {
             launcherPane = new FlexContainer("column")
                 .css("width", "53px")
                 .class("vertical")
-                .child(new GlobalMenuWidget(false))
+                .child(<GlobalMenu isHorizontalLayout={false} />)
                 .child(new LauncherContainer(false))
-                .child(new LeftPaneToggleWidget(false));
+                .child(<LeftPaneToggle isHorizontalLayout={false} />);
         }
 
         launcherPane.id("launcher-pane");

apps/client/src/layouts/layout_commons.tsx

@@ -24,48 +24,49 @@ import InfoDialog from "../widgets/dialogs/info.js";
 import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js";
 import PopupEditorDialog from "../widgets/dialogs/popup_editor.js";
 import FlexContainer from "../widgets/containers/flex_container.js";
-import NoteIconWidget from "../widgets/note_icon.js";
-import NoteTitleWidget from "../widgets/note_title.js";
-import ClassicEditorToolbar from "../widgets/ribbon_widgets/classic_editor_toolbar.js";
-import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
+import NoteIconWidget from "../widgets/note_icon";
+import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
-import NoteListWidget from "../widgets/note_list.js";
-import { CallToActionDialog } from "../widgets/dialogs/call_to_action.jsx";
+import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
+import NoteTitleWidget from "../widgets/note_title.jsx";
+import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.js";
+import NoteList from "../widgets/collections/NoteList.jsx";
+import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
 
 export function applyModals(rootContainer: RootContainer) {
     rootContainer
-        .child(new BulkActionsDialog())
-        .child(new AboutDialog())
-        .child(new HelpDialog())
-        .child(new RecentChangesDialog())
-        .child(new BranchPrefixDialog())
-        .child(new SortChildNotesDialog())
-        .child(new IncludeNoteDialog())
-        .child(new NoteTypeChooserDialog())
-        .child(new JumpToNoteDialog())
-        .child(new AddLinkDialog())
-        .child(new CloneToDialog())
-        .child(new MoveToDialog())
-        .child(new ImportDialog())
-        .child(new ExportDialog())
-        .child(new MarkdownImportDialog())
-        .child(new ProtectedSessionPasswordDialog())
-        .child(new RevisionsDialog())
-        .child(new DeleteNotesDialog())
-        .child(new InfoDialog())
-        .child(new ConfirmDialog())
-        .child(new PromptDialog())
-        .child(new IncorrectCpuArchDialog())
+        .child(<BulkActionsDialog />)
+        .child(<AboutDialog />)
+        .child(<HelpDialog />)
+        .child(<RecentChangesDialog />)
+        .child(<BranchPrefixDialog />)
+        .child(<SortChildNotesDialog />)
+        .child(<IncludeNoteDialog />)
+        .child(<NoteTypeChooserDialog />)
+        .child(<JumpToNoteDialog />)
+        .child(<AddLinkDialog />)
+        .child(<CloneToDialog />)
+        .child(<MoveToDialog />)
+        .child(<ImportDialog />)
+        .child(<ExportDialog />)
+        .child(<MarkdownImportDialog />)
+        .child(<ProtectedSessionPasswordDialog />)
+        .child(<RevisionsDialog />)
+        .child(<DeleteNotesDialog />)
+        .child(<InfoDialog />)
+        .child(<ConfirmDialog />)
+        .child(<PromptDialog />)
+        .child(<IncorrectCpuArchDialog />)
         .child(new PopupEditorDialog()
                 .child(new FlexContainer("row")
                     .class("title-row")
                     .css("align-items", "center")
                     .cssBlock(".title-row > * { margin: 5px; }")
-                    .child(new NoteIconWidget())
-                    .child(new NoteTitleWidget()))
-                .child(new ClassicEditorToolbar())
+                    .child(<NoteIconWidget />)
+                    .child(<NoteTitleWidget />))
+                .child(<StandaloneRibbonAdapter component={FormattingToolbar} />)
                 .child(new PromotedAttributesWidget())
                 .child(new NoteDetailWidget())
-                .child(new NoteListWidget(true)))
-        .child(new CallToActionDialog());
+                .child(<NoteList media="screen" displayOnlyCollections />))
+        .child(<CallToActionDialog />);
 }

apps/client/src/layouts/mobile_layout.tsx

@@ -3,30 +3,30 @@ import NoteTitleWidget from "../widgets/note_title.js";
 import NoteDetailWidget from "../widgets/note_detail.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import ToggleSidebarButtonWidget from "../widgets/mobile_widgets/toggle_sidebar_button.js";
-import MobileDetailMenuWidget from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
-import FilePropertiesWidget from "../widgets/ribbon_widgets/file_properties.js";
-import FloatingButtons from "../widgets/floating_buttons/floating_buttons.js";
-import EditButton from "../widgets/floating_buttons/edit_button.js";
-import RelationMapButtons from "../widgets/floating_buttons/relation_map_buttons.js";
-import SvgExportButton from "../widgets/floating_buttons/svg_export_button.js";
-import BacklinksWidget from "../widgets/floating_buttons/zpetne_odkazy.js";
-import HideFloatingButtonsButton from "../widgets/floating_buttons/hide_floating_buttons_button.js";
-import NoteListWidget from "../widgets/note_list.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
 import SharedInfoWidget from "../widgets/shared_info.js";
-import PromotedAttributesWidget from "../widgets/ribbon_widgets/promoted_attributes.js";
+import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
 import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
 import type AppContext from "../components/app_context.js";
 import TabRowWidget from "../widgets/tab_row.js";
-import RefreshButton from "../widgets/floating_buttons/refresh_button.js";
-import MobileEditorToolbar from "../widgets/ribbon_widgets/mobile_editor_toolbar.js";
+import MobileEditorToolbar from "../widgets/type_widgets/ckeditor/mobile_editor_toolbar.js";
 import { applyModals } from "./layout_commons.js";
-import CloseZenButton from "../widgets/close_zen_button.js";
+import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
+import { useNoteContext } from "../widgets/react/hooks.jsx";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
+import CloseZenModeButton from "../widgets/close_zen_button.js";
+import NoteWrapperWidget from "../widgets/note_wrapper.js";
+import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
+import NoteList from "../widgets/collections/NoteList.jsx";
+import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
+import SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
+import SearchResult from "../widgets/search_result.jsx";
 
 const MOBILE_CSS = `
 <style>
@@ -43,8 +43,8 @@ kbd {
     border: none;
     cursor: pointer;
     font-size: 1.25em;
-    padding-left: 0.5em;
-    padding-right: 0.5em;
+    padding-inline-start: 0.5em;
+    padding-inline-end: 0.5em;
     color: var(--main-text-color);
 }
 .quick-search {
@@ -62,7 +62,7 @@ const FANCYTREE_CSS = `
     margin-top: 0px;
     overflow-y: auto;
     contain: content;
-    padding-left: 10px;
+    padding-inline-start: 10px;
 }
 
 .fancytree-custom-icon {
@@ -71,7 +71,7 @@ const FANCYTREE_CSS = `
 
 .fancytree-title {
     font-size: 1.5em;
-    margin-left: 0.6em !important;
+    margin-inline-start: 0.6em !important;
 }
 
 .fancytree-node {
@@ -84,7 +84,7 @@ const FANCYTREE_CSS = `
 
 span.fancytree-expander {
     width: 24px !important;
-    margin-right: 5px;
+    margin-inline-end: 5px;
 }
 
 .fancytree-loading span.fancytree-expander {
@@ -104,7 +104,7 @@ span.fancytree-expander {
 .tree-wrapper .scroll-to-active-note-button,
 .tree-wrapper .tree-settings-button {
     position: fixed;
-    margin-right: 16px;
+    margin-inline-end: 16px;
     display: none;
 }
 
@@ -129,44 +129,41 @@ export default class MobileLayout {
                             .class("d-md-flex d-lg-flex d-xl-flex col-12 col-sm-5 col-md-4 col-lg-3 col-xl-3")
                             .id("mobile-sidebar-wrapper")
                             .css("max-height", "100%")
-                            .css("padding-left", "0")
-                            .css("padding-right", "0")
+                            .css("padding-inline-start", "0")
+                            .css("padding-inline-end", "0")
                             .css("contain", "content")
                             .child(new FlexContainer("column").filling().id("mobile-sidebar-wrapper").child(new QuickSearchWidget()).child(new NoteTreeWidget().cssBlock(FANCYTREE_CSS)))
                     )
                     .child(
-                        new ScreenContainer("detail", "column")
+                        new ScreenContainer("detail", "row")
                             .id("detail-container")
                             .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-9")
                             .child(
-                                new FlexContainer("row")
-                                    .contentSized()
-                                    .css("font-size", "larger")
-                                    .css("align-items", "center")
-                                    .child(new ToggleSidebarButtonWidget().contentSized())
-                                    .child(new NoteTitleWidget().contentSized().css("position", "relative").css("padding-left", "0.5em"))
-                                    .child(new MobileDetailMenuWidget(true).contentSized())
+                                new NoteWrapperWidget()
+                                    .child(
+                                        new FlexContainer("row")
+                                            .contentSized()
+                                            .css("font-size", "larger")
+                                            .css("align-items", "center")
+                                            .child(<ToggleSidebarButton />)
+                                            .child(<NoteTitleWidget />)
+                                            .child(<MobileDetailMenu />)
+                                    )
+                                    .child(<SharedInfoWidget />)
+                                    .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
+                                    .child(new PromotedAttributesWidget())
+                                    .child(
+                                        new ScrollingContainer()
+                                            .filling()
+                                            .contentSized()
+                                            .child(new NoteDetailWidget())
+                                            .child(<NoteList media="screen" />)
+                                            .child(<StandaloneRibbonAdapter component={SearchDefinitionTab} />)
+                                            .child(<SearchResult />)
+                                            .child(<FilePropertiesWrapper />)
+                                    )
+                                    .child(<MobileEditorToolbar />)
                             )
-                            .child(new SharedInfoWidget())
-                            .child(
-                                new FloatingButtons()
-                                    .child(new RefreshButton())
-                                    .child(new EditButton())
-                                    .child(new RelationMapButtons())
-                                    .child(new SvgExportButton())
-                                    .child(new BacklinksWidget())
-                                    .child(new HideFloatingButtonsButton())
-                            )
-                            .child(new PromotedAttributesWidget())
-                            .child(
-                                new ScrollingContainer()
-                                    .filling()
-                                    .contentSized()
-                                    .child(new NoteDetailWidget())
-                                    .child(new NoteListWidget(false))
-                                    .child(new FilePropertiesWidget().css("font-size", "smaller"))
-                            )
-                            .child(new MobileEditorToolbar())
                     )
             )
             .child(
@@ -174,10 +171,25 @@ export default class MobileLayout {
                     .contentSized()
                     .id("mobile-bottom-bar")
                     .child(new TabRowWidget().css("height", "40px"))
-                    .child(new FlexContainer("row").class("horizontal").css("height", "53px").child(new LauncherContainer(true)).child(new GlobalMenuWidget(true)).id("launcher-pane"))
+                    .child(new FlexContainer("row")
+                        .class("horizontal")
+                        .css("height", "53px")
+                        .child(new LauncherContainer(true))
+                        .child(<GlobalMenuWidget isHorizontalLayout />)
+                        .id("launcher-pane"))
             )
-            .child(new CloseZenButton());
+            .child(<CloseZenModeButton />);
         applyModals(rootContainer);
         return rootContainer;
     }
 }
+
+function FilePropertiesWrapper() {
+    const { note } = useNoteContext();
+
+    return (
+        <div>
+            {note?.type === "file" && <FilePropertiesTab note={note} />}
+        </div>
+    );
+}

apps/client/src/login.ts

@@ -1,5 +1,3 @@
-import "./stylesheets/bootstrap.scss";
-
 // @ts-ignore - module = undefined
 // Required for correct loading of scripts in Electron
 if (typeof module === 'object') {window.module = module; module = undefined;}

apps/client/src/menus/context_menu.ts

@@ -1,6 +1,8 @@
-import keyboardActionService from "../services/keyboard_actions.js";
+import { KeyboardActionNames } from "@triliumnext/commons";
+import keyboardActionService, { getActionSync } from "../services/keyboard_actions.js";
 import note_tooltip from "../services/note_tooltip.js";
 import utils from "../services/utils.js";
+import { should } from "vitest";
 
 export interface ContextMenuOptions<T> {
     x: number;
@@ -13,8 +15,13 @@ export interface ContextMenuOptions<T> {
     onHide?: () => void;
 }
 
-interface MenuSeparatorItem {
-    title: "----";
+export interface MenuSeparatorItem {
+    kind: "separator";
+}
+
+export interface MenuHeader {
+    title: string;
+    kind: "header";
 }
 
 export interface MenuItemBadge {
@@ -38,12 +45,13 @@ export interface MenuCommandItem<T> {
     handler?: MenuHandler<T>;
     items?: MenuItem<T>[] | null;
     shortcut?: string;
+    keyboardShortcut?: KeyboardActionNames;
     spellingSuggestion?: string;
     checked?: boolean;
     columns?: number;
 }
 
-export type MenuItem<T> = MenuCommandItem<T> | MenuSeparatorItem;
+export type MenuItem<T> = MenuCommandItem<T> | MenuSeparatorItem | MenuHeader;
 export type MenuHandler<T> = (item: MenuCommandItem<T>, e: JQuery.MouseDownEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => void;
 export type ContextMenuEvent = PointerEvent | MouseEvent | JQuery.ContextMenuEvent;
 
@@ -142,20 +150,57 @@ class ContextMenu {
         this.$widget
             .css({
                 display: "block",
-                top: top,
-                left: left
+                top,
+                left
             })
             .addClass("show");
     }
 
-    addItems($parent: JQuery<HTMLElement>, items: MenuItem<any>[]) {
-        for (const item of items) {
+    addItems($parent: JQuery<HTMLElement>, items: MenuItem<any>[], multicolumn = false) {
+        let $group = $parent; // The current group or parent element to which items are being appended
+        let shouldStartNewGroup = false; // If true, the next item will start a new group
+        let shouldResetGroup = false; // If true, the next item will be the last one from the group
+
+        for (let index = 0; index < items.length; index++) {
+            const item = items[index];
             if (!item) {
                 continue;
             }
 
-            if (item.title === "----") {
-                $parent.append($("<div>").addClass("dropdown-divider"));
+            // If the current item is a header, start a new group. This group will contain the
+            // header and the next item that follows the header.
+            if ("kind" in item && item.kind === "header") {
+                if (multicolumn && !shouldResetGroup) {
+                    shouldStartNewGroup = true;
+                }
+            }
+
+            // If the next item is a separator, start a new group. This group will contain the
+            // current item, the separator, and the next item after the separator.
+            const nextItem = (index < items.length - 1) ? items[index + 1] : null;
+            if (multicolumn && nextItem && "kind" in nextItem && nextItem.kind === "separator") {
+                if (!shouldResetGroup) {
+                    shouldStartNewGroup = true;
+                } else {
+                    shouldResetGroup = true; // Continue the current group
+                }
+            }
+
+            // Create a new group to avoid column breaks before and after the seaparator / header.
+            // This is a workaround for Firefox not supporting break-before / break-after: avoid
+            // for columns.
+            if (shouldStartNewGroup) {
+                $group = $("<div class='dropdown-no-break'>");
+                $parent.append($group);
+                shouldStartNewGroup = false;
+            }
+
+            if ("kind" in item && item.kind === "separator") {
+                $group.append($("<div>").addClass("dropdown-divider"));
+                shouldResetGroup = true; // End the group after the next item
+            } else if ("kind" in item && item.kind === "header") {
+                $group.append($("<h6>").addClass("dropdown-header").text(item.title));
+                shouldResetGroup = true;
             } else {
                 const $icon = $("<span>");
 
@@ -185,7 +230,23 @@ class ContextMenu {
                     }
                 }
 
-                if ("shortcut" in item && item.shortcut) {
+                if ("keyboardShortcut" in item && item.keyboardShortcut) {
+                    const shortcuts = getActionSync(item.keyboardShortcut).effectiveShortcuts;
+                    if (shortcuts) {
+                        const allShortcuts: string[] = [];
+                        for (const effectiveShortcut of shortcuts) {
+                            allShortcuts.push(effectiveShortcut.split("+")
+                                .map(key => `<kbd>${key}</kbd>`)
+                                .join("+"));
+                        }
+
+                        if (allShortcuts.length) {
+                            const container = $("<span>").addClass("keyboard-shortcut");
+                            container.append($(allShortcuts.join(",")));
+                            $link.append(container);
+                        }
+                    }
+                } else if ("shortcut" in item && item.shortcut) {
                     $link.append($("<kbd>").text(item.shortcut));
                 }
 
@@ -241,16 +302,24 @@ class ContextMenu {
                     $link.addClass("dropdown-toggle");
 
                     const $subMenu = $("<ul>").addClass("dropdown-menu");
-                    if (!this.isMobile && item.columns) {
-                        $subMenu.css("column-count", item.columns);
+                    const hasColumns = !!item.columns && item.columns > 1;
+                    if (!this.isMobile && hasColumns) {
+                        $subMenu.css("column-count", item.columns!);
                     }
 
-                    this.addItems($subMenu, item.items);
+                    this.addItems($subMenu, item.items, hasColumns);
 
                     $item.append($subMenu);
                 }
 
-                $parent.append($item);
+                $group.append($item);
+
+                // After adding a menu item, if the previous item was a separator or header,
+                // reset the group so that the next item will be appended directly to the parent.
+                if (shouldResetGroup) {
+                    $group = $parent;
+                    shouldResetGroup = false;
+                };
             }
         }
     }

apps/client/src/menus/electron_context_menu.ts

@@ -37,7 +37,7 @@ function setupContextMenu() {
                 handler: () => webContents.session.addWordToSpellCheckerDictionary(params.misspelledWord)
             });
 
-            items.push({ title: `----` });
+            items.push({ kind: "separator" });
         }
 
         if (params.isEditable) {
@@ -112,7 +112,7 @@ function setupContextMenu() {
             // Replace the placeholder with the real search keyword.
             let searchUrl = searchEngineUrl.replace("{keyword}", encodeURIComponent(params.selectionText));
 
-            items.push({ title: "----" });
+            items.push({ kind: "separator" });
 
             items.push({
                 title: t("electron_context_menu.search_online", { term: shortenedSelection, searchEngine: searchEngineName }),

apps/client/src/menus/image_context_menu.ts

@@ -2,8 +2,6 @@ import { t } from "../services/i18n.js";
 import utils from "../services/utils.js";
 import contextMenu from "./context_menu.js";
 import imageService from "../services/image.js";
-import mediaViewer from "../services/media_viewer.js";
-import type { MediaItem } from "../services/media_viewer.js";
 
 const PROP_NAME = "imageContextMenuInstalled";
 
@@ -20,12 +18,6 @@ function setupContextMenu($image: JQuery<HTMLElement>) {
             x: e.pageX,
             y: e.pageY,
             items: [
-                {
-                    title: "View in Lightbox",
-                    command: "viewInLightbox",
-                    uiIcon: "bx bx-expand",
-                    enabled: true
-                },
                 {
                     title: t("image_context_menu.copy_reference_to_clipboard"),
                     command: "copyImageReferenceToClipboard",
@@ -38,48 +30,7 @@ function setupContextMenu($image: JQuery<HTMLElement>) {
                 }
             ],
             selectMenuItemHandler: async ({ command }) => {
-                if (command === "viewInLightbox") {
-                    const src = $image.attr("src");
-                    const alt = $image.attr("alt");
-                    const title = $image.attr("title");
-                    
-                    if (!src) {
-                        console.error("Missing image source");
-                        return;
-                    }
-                    
-                    const item: MediaItem = {
-                        src: src,
-                        alt: alt || "Image",
-                        title: title || alt,
-                        element: $image[0] as HTMLElement
-                    };
-                    
-                    // Try to get actual dimensions
-                    const imgElement = $image[0] as HTMLImageElement;
-                    if (imgElement.naturalWidth && imgElement.naturalHeight) {
-                        item.width = imgElement.naturalWidth;
-                        item.height = imgElement.naturalHeight;
-                    }
-                    
-                    mediaViewer.openSingle(item, {
-                        bgOpacity: 0.95,
-                        showHideOpacity: true,
-                        pinchToClose: true,
-                        closeOnScroll: false,
-                        closeOnVerticalDrag: true,
-                        wheelToZoom: true,
-                        getThumbBoundsFn: () => {
-                            // Get position for zoom animation
-                            const rect = imgElement.getBoundingClientRect();
-                            return {
-                                x: rect.left,
-                                y: rect.top,
-                                w: rect.width
-                            };
-                        }
-                    });
-                } else if (command === "copyImageReferenceToClipboard") {
+                if (command === "copyImageReferenceToClipboard") {
                     imageService.copyImageReferenceToClipboard($image);
                 } else if (command === "copyImageToClipboard") {
                     try {

apps/client/src/menus/launcher_context_menu.ts

@@ -45,16 +45,16 @@ export default class LauncherContextMenu implements SelectMenuItemEventListener<
             isVisibleRoot || isAvailableRoot ? { title: t("launcher_context_menu.add-script-launcher"), command: "addScriptLauncher", uiIcon: "bx bx-code-curly" } : null,
             isVisibleRoot || isAvailableRoot ? { title: t("launcher_context_menu.add-custom-widget"), command: "addWidgetLauncher", uiIcon: "bx bx-customize" } : null,
             isVisibleRoot || isAvailableRoot ? { title: t("launcher_context_menu.add-spacer"), command: "addSpacerLauncher", uiIcon: "bx bx-dots-horizontal" } : null,
-            isVisibleRoot || isAvailableRoot ? { title: "----" } : null,
+            isVisibleRoot || isAvailableRoot ? { kind: "separator" } : null,
 
             isAvailableItem ? { title: t("launcher_context_menu.move-to-visible-launchers"), command: "moveLauncherToVisible", uiIcon: "bx bx-show", enabled: true } : null,
             isVisibleItem ? { title: t("launcher_context_menu.move-to-available-launchers"), command: "moveLauncherToAvailable", uiIcon: "bx bx-hide", enabled: true } : null,
-            isVisibleItem || isAvailableItem ? { title: "----" } : null,
+            isVisibleItem || isAvailableItem ? { kind: "separator" } : null,
 
             { title: `${t("launcher_context_menu.duplicate-launcher")}`, command: "duplicateSubtree", uiIcon: "bx bx-outline", enabled: isItem },
             { title: `${t("launcher_context_menu.delete")}`, command: "deleteNotes", uiIcon: "bx bx-trash destructive-action-icon", enabled: canBeDeleted },
 
-            { title: "----" },
+            { kind: "separator" },
 
             { title: t("launcher_context_menu.reset"), command: "resetLauncher", uiIcon: "bx bx-reset destructive-action-icon", enabled: canBeReset }
         ];

apps/client/src/menus/tree_context_menu.ts

@@ -13,6 +13,8 @@ import type NoteTreeWidget from "../widgets/note_tree.js";
 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 {
@@ -61,6 +63,11 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
         // the only exception is when the only selected note is the one that was right-clicked, then
         // it's clear what the user meant to do.
         const selNodes = this.treeWidget.getSelectedNodes();
+        const selectedNotes = await froca.getNotes(selNodes.map(node => node.data.noteId));
+        if (note && !selectedNotes.includes(note)) selectedNotes.push(note);
+        const isArchived = selectedNotes.every(note => note.isArchived);
+        const canToggleArchived = !selectedNotes.some(note => note.isArchived !== isArchived);
+
         const noSelectedNotes = selNodes.length === 0 || (selNodes.length === 1 && selNodes[0] === this.node);
 
         const notSearch = note?.type !== "search";
@@ -69,27 +76,29 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
         const insertNoteAfterEnabled = isNotRoot && !isHoisted && parentNotSearch;
 
         const items: (MenuItem<TreeCommandNames> | null)[] = [
-            { title: `${t("tree-context-menu.open-in-a-new-tab")}`, command: "openInTab", uiIcon: "bx bx-link-external", enabled: noSelectedNotes },
+            { 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-popup"), command: "openNoteInPopup", uiIcon: "bx bx-edit", enabled: noSelectedNotes },
 
             isHoisted
                 ? null
                 : {
-                      title: `${t("tree-context-menu.hoist-note")} <kbd data-command="toggleNoteHoisting"></kbd>`,
+                      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")} <kbd data-command="toggleNoteHoisting"></kbd>`, command: "toggleNoteHoisting", uiIcon: "bx bx-door-open" },
+                : { title: t("tree-context-menu.unhoist-note"), command: "toggleNoteHoisting", keyboardShortcut: "toggleNoteHoisting", uiIcon: "bx bx-door-open" },
 
-            { title: "----" },
+            { kind: "separator" },
 
             {
-                title: `${t("tree-context-menu.insert-note-after")}<kbd data-command="createNoteAfter"></kbd>`,
+                title: t("tree-context-menu.insert-note-after"),
                 command: "insertNoteAfter",
+                keyboardShortcut: "createNoteAfter",
                 uiIcon: "bx bx-plus",
                 items: insertNoteAfterEnabled ? await noteTypesService.getNoteTypeItems("insertNoteAfter") : null,
                 enabled: insertNoteAfterEnabled && noSelectedNotes && notOptionsOrHelp,
@@ -97,21 +106,22 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
             },
 
             {
-                title: `${t("tree-context-menu.insert-child-note")}<kbd data-command="createNoteInto"></kbd>`,
+                title: t("tree-context-menu.insert-child-note"),
                 command: "insertChildNote",
+                keyboardShortcut: "createNoteInto",
                 uiIcon: "bx bx-plus",
                 items: notSearch ? await noteTypesService.getNoteTypeItems("insertChildNote") : null,
                 enabled: notSearch && noSelectedNotes && notOptionsOrHelp,
                 columns: 2
             },
 
-            { title: "----" },
+            { kind: "separator" },
 
             { title: t("tree-context-menu.protect-subtree"), command: "protectSubtree", uiIcon: "bx bx-check-shield", enabled: noSelectedNotes },
 
             { title: t("tree-context-menu.unprotect-subtree"), command: "unprotectSubtree", uiIcon: "bx bx-shield", enabled: noSelectedNotes },
 
-            { title: "----" },
+            { kind: "separator" },
 
             {
                 title: t("tree-context-menu.advanced"),
@@ -120,48 +130,52 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
                 items: [
                     { title: t("tree-context-menu.apply-bulk-actions"), command: "openBulkActionsDialog", uiIcon: "bx bx-list-plus", enabled: true },
 
-                    { title: "----" },
+                    { kind: "separator" },
 
                     {
-                        title: `${t("tree-context-menu.edit-branch-prefix")} <kbd data-command="editBranchPrefix"></kbd>`,
+                        title: t("tree-context-menu.edit-branch-prefix"),
                         command: "editBranchPrefix",
+                        keyboardShortcut: "editBranchPrefix",
                         uiIcon: "bx bx-rename",
                         enabled: isNotRoot && parentNotSearch && noSelectedNotes && notOptionsOrHelp
                     },
                     { title: t("tree-context-menu.convert-to-attachment"), command: "convertNoteToAttachment", uiIcon: "bx bx-paperclip", enabled: isNotRoot && !isHoisted && notOptionsOrHelp },
 
-                    { title: "----" },
+                    { kind: "separator" },
 
-                    { title: `${t("tree-context-menu.expand-subtree")} <kbd data-command="expandSubtree"></kbd>`, command: "expandSubtree", uiIcon: "bx bx-expand", enabled: noSelectedNotes },
-                    { title: `${t("tree-context-menu.collapse-subtree")} <kbd data-command="collapseSubtree"></kbd>`, command: "collapseSubtree", uiIcon: "bx bx-collapse", enabled: noSelectedNotes },
+                    { 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")} <kbd data-command="sortChildNotes"></kbd>`,
+                        title: t("tree-context-menu.sort-by"),
                         command: "sortChildNotes",
+                        keyboardShortcut: "sortChildNotes",
                         uiIcon: "bx bx-sort-down",
                         enabled: noSelectedNotes && notSearch
                     },
 
-                    { title: "----" },
+                    { kind: "separator" },
 
                     { 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 }
                 ]
             },
 
-            { title: "----" },
+            { kind: "separator" },
 
             {
-                title: `${t("tree-context-menu.cut")} <kbd data-command="cutNotesToClipboard"></kbd>`,
+                title: t("tree-context-menu.cut"),
                 command: "cutNotesToClipboard",
+                keyboardShortcut: "cutNotesToClipboard",
                 uiIcon: "bx bx-cut",
                 enabled: isNotRoot && !isHoisted && parentNotSearch
             },
 
-            { title: `${t("tree-context-menu.copy-clone")} <kbd data-command="copyNotesToClipboard"></kbd>`, command: "copyNotesToClipboard", uiIcon: "bx bx-copy", enabled: isNotRoot && !isHoisted },
+            { title: t("tree-context-menu.copy-clone"), command: "copyNotesToClipboard", keyboardShortcut: "copyNotesToClipboard", uiIcon: "bx bx-copy", enabled: isNotRoot && !isHoisted },
 
             {
-                title: `${t("tree-context-menu.paste-into")} <kbd data-command="pasteNotesFromClipboard"></kbd>`,
+                title: t("tree-context-menu.paste-into"),
                 command: "pasteNotesFromClipboard",
+                keyboardShortcut: "pasteNotesFromClipboard",
                 uiIcon: "bx bx-paste",
                 enabled: !clipboard.isClipboardEmpty() && notSearch && noSelectedNotes
             },
@@ -174,39 +188,71 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
             },
 
             {
-                title: `${t("tree-context-menu.move-to")} <kbd data-command="moveNotesTo"></kbd>`,
+                title: t("tree-context-menu.move-to"),
                 command: "moveNotesTo",
+                keyboardShortcut: "moveNotesTo",
                 uiIcon: "bx bx-transfer",
                 enabled: isNotRoot && !isHoisted && parentNotSearch
             },
 
-            { title: `${t("tree-context-menu.clone-to")} <kbd data-command="cloneNotesTo"></kbd>`, command: "cloneNotesTo", uiIcon: "bx bx-duplicate", enabled: isNotRoot && !isHoisted },
+            { title: t("tree-context-menu.clone-to"), command: "cloneNotesTo", keyboardShortcut: "cloneNotesTo", uiIcon: "bx bx-duplicate", enabled: isNotRoot && !isHoisted },
 
             {
-                title: `${t("tree-context-menu.duplicate")} <kbd data-command="duplicateSubtree">`,
+                title: t("tree-context-menu.duplicate"),
                 command: "duplicateSubtree",
+                keyboardShortcut: "duplicateSubtree",
                 uiIcon: "bx bx-outline",
                 enabled: parentNotSearch && isNotRoot && !isHoisted && notOptionsOrHelp
             },
 
             {
-                title: `${t("tree-context-menu.delete")} <kbd data-command="deleteNotes"></kbd>`,
+                title: !isArchived ? t("tree-context-menu.archive") : t("tree-context-menu.unarchive"),
+                uiIcon: !isArchived ? "bx bx-archive" : "bx bx-archive-out",
+                enabled: canToggleArchived,
+                handler: () => {
+                    if (!selectedNotes.length) return;
+
+                    if (selectedNotes.length == 1) {
+                        const note = selectedNotes[0];
+                        if (!isArchived) {
+                            attributes.addLabel(note.noteId, "archived");
+                        } else {
+                            attributes.removeOwnedLabelByName(note, "archived");
+                        }
+                    } else {
+                        const noteIds = selectedNotes.map(note => note.noteId);
+                        if (!isArchived) {
+                            executeBulkActions(noteIds, [{
+                                name: "addLabel", labelName: "archived"
+                            }]);
+                        } else {
+                            executeBulkActions(noteIds, [{
+                                name: "deleteLabel", labelName: "archived"
+                            }]);
+                        }
+                    }
+                }
+            },
+            {
+                title: t("tree-context-menu.delete"),
                 command: "deleteNotes",
+                keyboardShortcut: "deleteNotes",
                 uiIcon: "bx bx-trash destructive-action-icon",
                 enabled: isNotRoot && !isHoisted && parentNotSearch && notOptionsOrHelp
             },
 
-            { title: "----" },
+            { kind: "separator" },
 
             { title: t("tree-context-menu.import-into-note"), command: "importIntoNote", uiIcon: "bx bx-import", enabled: notSearch && noSelectedNotes && notOptionsOrHelp },
 
             { title: t("tree-context-menu.export"), command: "exportNote", uiIcon: "bx bx-export", enabled: notSearch && noSelectedNotes && notOptionsOrHelp },
 
-            { title: "----" },
+            { kind: "separator" },
 
             {
-                title: `${t("tree-context-menu.search-in-subtree")} <kbd data-command="searchInSubtree"></kbd>`,
+                title: t("tree-context-menu.search-in-subtree"),
                 command: "searchInSubtree",
+                keyboardShortcut: "searchInSubtree",
                 uiIcon: "bx bx-search",
                 enabled: notSearch && noSelectedNotes
             }

apps/client/src/mobile.ts

@@ -1,9 +1,7 @@
 import appContext from "./components/app_context.js";
 import noteAutocompleteService from "./services/note_autocomplete.js";
 import glob from "./services/glob.js";
-import "./stylesheets/bootstrap.scss";
 import "boxicons/css/boxicons.min.css";
-import "./stylesheets/media-viewer.css";
 import "autocomplete.js/index_jquery.js";
 
 glob.setupGlobs();

apps/client/src/print.css

@@ -0,0 +1,155 @@
+:root {
+    --print-font-size: 11pt;
+    --ck-content-color-image-caption-background: transparent !important;
+}
+
+html,
+body {
+    width: 100%;
+    height: 100%;
+    color: black;
+}
+
+@page {
+    margin: 2cm;
+}
+
+.note-list-widget.full-height,
+.note-list-widget.full-height .note-list-widget-content {
+    height: unset !important;
+}
+
+.component {
+    contain: none !important;
+}
+
+body[data-note-type="text"] .ck-content {
+    font-size: var(--print-font-size);
+    text-align: justify;
+}
+
+.ck-content figcaption {
+    font-style: italic;
+}
+
+.ck-content a {
+    text-decoration: none;
+}
+
+.ck-content a:not([href^="#root/"]) {
+    text-decoration: underline;
+    color: #374a75;
+}
+
+.ck-content .todo-list__label * {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+}
+
+@supports selector(.todo-list__label__description:has(*)) and (height: 1lh) {
+    .ck-content .todo-list__label__description {
+        /* The percentage of the line height that the check box occupies */
+        --box-ratio: 0.75;
+        /* The size of the gap between the check box and the caption */
+        --box-text-gap: 0.25em;
+
+        --box-size: calc(1lh * var(--box-ratio));
+        --box-vert-offset: calc((1lh - var(--box-size)) / 2);
+
+        display: inline-block;
+        padding-inline-start: calc(var(--box-size) + var(--box-text-gap));
+        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e");
+        background-position: 0 var(--box-vert-offset);
+        background-size: var(--box-size);
+        background-repeat: no-repeat;
+    }
+
+    .ck-content .todo-list__label:has(input[type="checkbox"]:checked) .todo-list__label__description {
+        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-outline/ */
+        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5A2%2c2 0 0%2c0 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5A2%2c2 0 0%2c0 19%2c3M19%2c5V19H5V5H19M10%2c17L6%2c13L7.41%2c11.58L10%2c14.17L16.59%2c7.58L18%2c9' /%3e%3c/svg%3e");
+    }
+
+    .ck-content .todo-list__label input[type="checkbox"] {
+        display: none !important;
+    }
+}
+
+/* #region Footnotes */
+.footnote-reference a,
+.footnote-back-link a {
+    text-decoration: none !important;
+}
+
+li.footnote-item {
+    position: relative;
+    width: fit-content;
+}
+
+.ck-content .footnote-back-link {
+    margin-right: 0.25em;
+}
+
+.ck-content .footnote-content {
+    display: inline-block;
+    width: unset;
+}
+/* #endregion */
+
+/* #region Widows and orphans */
+p,
+blockquote {
+    widows: 4;
+    orphans: 4;
+}
+
+pre > code {
+    widows: 6;
+    orphans: 6;
+    overflow: auto;
+    white-space: pre-wrap !important;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    page-break-after: avoid;
+    break-after: avoid;
+}
+/* #endregion */
+
+/* #region Tables */
+.table thead th,
+.table td,
+.table th {
+    /* Fix center vertical alignment of table cells */
+    vertical-align: middle;
+}
+
+pre {
+    box-shadow: unset !important;
+    border: 0.75pt solid gray !important;
+    border-radius: 2pt !important;
+}
+
+th,
+span[style] {
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+}
+/* #endregion */
+
+/* #region Page breaks */
+.page-break {
+    page-break-after: always;
+    break-after: always;
+}
+
+.page-break > *,
+.page-break::after {
+    display: none !important;
+}
+/* #endregion */

apps/client/src/print.tsx

@@ -0,0 +1,105 @@
+import FNote from "./entities/fnote";
+import { render } from "preact";
+import { CustomNoteList } from "./widgets/collections/NoteList";
+import { useCallback, useLayoutEffect, useRef } from "preact/hooks";
+import content_renderer from "./services/content_renderer";
+
+interface RendererProps {
+    note: FNote;
+    onReady: () => void;
+}
+
+async function main() {
+    const notePath = window.location.hash.substring(1);
+    const noteId = notePath.split("/").at(-1);
+    if (!noteId) return;
+
+    await import("./print.css");
+    const froca = (await import("./services/froca")).default;
+    const note = await froca.getNote(noteId);
+
+    render(<App note={note} noteId={noteId} />, document.body);
+}
+
+function App({ note, noteId }: { note: FNote | null | undefined, noteId: string }) {
+    const sentReadyEvent = useRef(false);
+    const onReady = useCallback(() => {
+        if (sentReadyEvent.current) return;
+        window.dispatchEvent(new Event("note-ready"));
+        window._noteReady = true;
+        sentReadyEvent.current = true;
+    }, []);
+    const props: RendererProps | undefined | null = note && { note, onReady };
+
+    if (!note || !props) return <Error404 noteId={noteId} />
+
+    useLayoutEffect(() => {
+        document.body.dataset.noteType = note.type;
+    }, [ note ]);
+
+    return (
+        <>
+            {note.type === "book"
+            ? <CollectionRenderer {...props} />
+            : <SingleNoteRenderer {...props} />
+            }
+        </>
+    );
+}
+
+function SingleNoteRenderer({ note, onReady }: RendererProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        async function load() {
+            if (note.type === "text") {
+                await import("@triliumnext/ckeditor5/src/theme/ck-content.css");
+            }
+            const { $renderedContent } = await content_renderer.getRenderedContent(note, { noChildrenList: true });
+            const container = containerRef.current!;
+            container.replaceChildren(...$renderedContent);
+
+            // Wait for all images to load.
+            const images = Array.from(container.querySelectorAll("img"));
+            await Promise.all(
+                images.map(img => {
+                    if (img.complete) return Promise.resolve();
+                    return new Promise<void>(resolve => {
+                        img.addEventListener("load", () => resolve(), { once: true });
+                        img.addEventListener("error", () => resolve(), { once: true });
+                    });
+                })
+            );
+        }
+
+        load().then(() => requestAnimationFrame(onReady))
+    }, [ note ]);
+
+    return <>
+        <h1>{note.title}</h1>
+        <main ref={containerRef} />
+    </>;
+}
+
+function CollectionRenderer({ note, onReady }: RendererProps) {
+    return <CustomNoteList
+        isEnabled
+        note={note}
+        notePath={note.getBestNotePath().join("/")}
+        ntxId="print"
+        highlightedTokens={null}
+        media="print"
+        onReady={onReady}
+    />;
+}
+
+function Error404({ noteId }: { noteId: string }) {
+    return (
+        <main>
+            <p>The note you are trying to print could not be found.</p>
+            <small>{noteId}</small>
+        </main>
+    )
+}
+
+main();

apps/client/src/runtime.ts

@@ -1,5 +1,15 @@
 import $ from "jquery";
+
+async function loadBootstrap() {
+    if (document.body.dir === "rtl") {
+        await import("bootstrap/dist/css/bootstrap.rtl.min.css");
+    } else {
+        await import("bootstrap/dist/css/bootstrap.min.css");
+    }
+}
+
 (window as any).$ = $;
 (window as any).jQuery = $;
+await loadBootstrap();
 
 $("body").show();

apps/client/src/services/attributes.ts

@@ -2,6 +2,7 @@ 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`, {
@@ -25,6 +26,14 @@ async function removeAttributeById(noteId: string, attributeId: string) {
     await server.remove(`notes/${noteId}/attributes/${attributeId}`);
 }
 
+export async function removeOwnedAttributesByNameOrType(note: FNote, type: AttributeType, name: string) {
+    for (const attr of note.getOwnedAttributes()) {
+        if (attr.type === type && attr.name === name) {
+            await server.remove(`notes/${note.noteId}/attributes/${attr.attributeId}`);
+        }
+    }
+}
+
 /**
  * Removes a label identified by its name from the given note, if it exists. Note that the label must be owned, i.e.
  * it will not remove inherited attributes.
@@ -52,7 +61,7 @@ function removeOwnedLabelByName(note: FNote, labelName: string) {
  * @param value the value of the attribute to set.
  */
 export async function setAttribute(note: FNote, type: "label" | "relation", name: string, value: string | null | undefined) {
-    if (value) {
+    if (value !== null && value !== undefined) {
         // Create or update the attribute.
         await server.put(`notes/${note.noteId}/set-attribute`, { type, name, value });
     } else {

apps/client/src/services/branches.ts

@@ -210,7 +210,7 @@ function makeToast(id: string, message: string): ToastOptions {
 }
 
 ws.subscribeToMessages(async (message) => {
-    if (message.taskType !== "deleteNotes") {
+    if (!("taskType" in message) || message.taskType !== "deleteNotes") {
         return;
     }
 
@@ -228,7 +228,7 @@ ws.subscribeToMessages(async (message) => {
 });
 
 ws.subscribeToMessages(async (message) => {
-    if (message.taskType !== "undeleteNotes") {
+    if (!("taskType" in message) || message.taskType !== "undeleteNotes") {
         return;
     }
 

apps/client/src/services/bulk_action.ts

@@ -18,7 +18,7 @@ import type FNote from "../entities/fnote.js";
 import toast from "./toast.js";
 import { BulkAction } from "@triliumnext/commons";
 
-const ACTION_GROUPS = [
+export const ACTION_GROUPS = [
     {
         title: t("bulk_actions.labels"),
         actions: [AddLabelBulkAction, UpdateLabelValueBulkAction, RenameLabelBulkAction, DeleteLabelBulkAction]

apps/client/src/services/ckeditor_photoswipe_integration.ts

@@ -1,521 +0,0 @@
-/**
- * CKEditor PhotoSwipe Integration
- * Handles click-to-lightbox functionality for images in CKEditor content
- */
-
-import mediaViewer from './media_viewer.js';
-import galleryManager from './gallery_manager.js';
-import appContext from '../components/app_context.js';
-import type { MediaItem } from './media_viewer.js';
-import type { GalleryItem } from './gallery_manager.js';
-
-/**
- * Configuration for CKEditor PhotoSwipe integration
- */
-interface CKEditorPhotoSwipeConfig {
-    enableGalleryMode?: boolean;
-    showHints?: boolean;
-    hintDelay?: number;
-    excludeSelector?: string;
-}
-
-/**
- * Integration manager for CKEditor and PhotoSwipe
- */
-class CKEditorPhotoSwipeIntegration {
-    private static instance: CKEditorPhotoSwipeIntegration;
-    private config: Required<CKEditorPhotoSwipeConfig>;
-    private observers: Map<HTMLElement, MutationObserver> = new Map();
-    private processedImages: WeakSet<HTMLImageElement> = new WeakSet();
-    private containerGalleries: Map<HTMLElement, GalleryItem[]> = new Map();
-    private hintPool: HTMLElement[] = [];
-    private activeHints: Map<string, HTMLElement> = new Map();
-    private hintTimeouts: Map<string, number> = new Map();
-    
-    private constructor() {
-        this.config = {
-            enableGalleryMode: true,
-            showHints: true,
-            hintDelay: 2000,
-            excludeSelector: '.no-lightbox, .cke_widget_element'
-        };
-    }
-    
-    /**
-     * Get singleton instance
-     */
-    static getInstance(): CKEditorPhotoSwipeIntegration {
-        if (!CKEditorPhotoSwipeIntegration.instance) {
-            CKEditorPhotoSwipeIntegration.instance = new CKEditorPhotoSwipeIntegration();
-        }
-        return CKEditorPhotoSwipeIntegration.instance;
-    }
-    
-    /**
-     * Setup integration for a CKEditor content container
-     */
-    setupContainer(container: HTMLElement | JQuery<HTMLElement>, config?: Partial<CKEditorPhotoSwipeConfig>): void {
-        const element = container instanceof $ ? container[0] : container;
-        if (!element) return;
-        
-        // Merge configuration
-        if (config) {
-            this.config = { ...this.config, ...config };
-        }
-        
-        // Process existing images
-        this.processImages(element);
-        
-        // Setup mutation observer for dynamically added images
-        this.observeContainer(element);
-        
-        // Setup gallery if enabled
-        if (this.config.enableGalleryMode) {
-            this.setupGalleryMode(element);
-        }
-    }
-    
-    /**
-     * Process all images in a container
-     */
-    private processImages(container: HTMLElement): void {
-        const images = container.querySelectorAll<HTMLImageElement>(`img:not(${this.config.excludeSelector})`);
-        
-        images.forEach(img => {
-            if (!this.processedImages.has(img)) {
-                this.setupImageLightbox(img);
-                this.processedImages.add(img);
-            }
-        });
-    }
-    
-    /**
-     * Setup lightbox for a single image
-     */
-    private setupImageLightbox(img: HTMLImageElement): void {
-        // Skip if already processed or is a CKEditor widget element
-        if (img.closest('.cke_widget_element') || img.closest('.ck-widget')) {
-            return;
-        }
-        
-        // Make image clickable and mark it as PhotoSwipe-enabled
-        img.style.cursor = 'zoom-in';
-        img.style.transition = 'opacity 0.2s';
-        img.classList.add('photoswipe-enabled');
-        img.setAttribute('data-photoswipe', 'true');
-        
-        // Store event handlers for cleanup
-        const mouseEnterHandler = () => {
-            img.style.opacity = '0.9';
-            if (this.config.showHints) {
-                this.showHint(img);
-            }
-        };
-        
-        const mouseLeaveHandler = () => {
-            img.style.opacity = '1';
-            this.hideHint(img);
-        };
-        
-        // Add hover effect with cleanup tracking
-        img.addEventListener('mouseenter', mouseEnterHandler);
-        img.addEventListener('mouseleave', mouseLeaveHandler);
-        
-        // Store handlers for cleanup
-        (img as any)._photoswipeHandlers = { mouseEnterHandler, mouseLeaveHandler };
-        
-        // Add double-click handler to prevent default navigation behavior
-        const dblClickHandler = (e: MouseEvent) => {
-            // Only prevent double-click in specific contexts to avoid breaking other features
-            if (img.closest('.attachment-detail-wrapper') || 
-                img.closest('.note-detail-editable-text') ||
-                img.closest('.note-detail-readonly-text')) {
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-                
-                // Trigger the same behavior as single click (open lightbox)
-                img.click();
-            }
-        };
-        
-        img.addEventListener('dblclick', dblClickHandler, true); // Use capture phase to ensure we get it first
-        (img as any)._photoswipeHandlers.dblClickHandler = dblClickHandler;
-        
-        // Add click handler
-        img.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            
-            // Check if we should open as gallery
-            const container = img.closest('.note-detail-editable-text, .note-detail-readonly-text');
-            if (container && this.config.enableGalleryMode) {
-                const gallery = this.containerGalleries.get(container as HTMLElement);
-                if (gallery && gallery.length > 1) {
-                    // Find index of clicked image
-                    const index = gallery.findIndex(item => {
-                        const itemElement = document.querySelector(`img[src="${item.src}"]`);
-                        return itemElement === img;
-                    });
-                    
-                    galleryManager.openGallery(gallery, index >= 0 ? index : 0, {
-                        showThumbnails: true,
-                        showCounter: true,
-                        enableKeyboardNav: true,
-                        loop: true
-                    });
-                    return;
-                }
-            }
-            
-            // Open single image
-            this.openSingleImage(img);
-        });
-        
-        // Add keyboard support
-        img.setAttribute('tabindex', '0');
-        img.setAttribute('role', 'button');
-        img.setAttribute('aria-label', 'Click to view in lightbox');
-        
-        img.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                img.click();
-            }
-        });
-    }
-    
-    /**
-     * Open a single image in lightbox
-     */
-    private openSingleImage(img: HTMLImageElement): void {
-        const item: MediaItem = {
-            src: img.src,
-            alt: img.alt || 'Image',
-            title: img.title || img.alt,
-            element: img,
-            width: img.naturalWidth || undefined,
-            height: img.naturalHeight || undefined
-        };
-        
-        mediaViewer.openSingle(item, {
-            bgOpacity: 0.95,
-            showHideOpacity: true,
-            pinchToClose: true,
-            closeOnScroll: false,
-            closeOnVerticalDrag: true,
-            wheelToZoom: true,
-            getThumbBoundsFn: () => {
-                const rect = img.getBoundingClientRect();
-                return {
-                    x: rect.left,
-                    y: rect.top,
-                    w: rect.width
-                };
-            }
-        }, {
-            onClose: () => {
-                // Check if we're in attachment detail view and need to reset viewScope
-                const activeContext = appContext.tabManager.getActiveContext();
-                if (activeContext?.viewScope?.viewMode === 'attachments') {
-                    // Get the note ID from the image source
-                    const attachmentMatch = img.src.match(/\/api\/attachments\/([A-Za-z0-9_]+)\/image\//);
-                    if (attachmentMatch) {
-                        const currentAttachmentId = activeContext.viewScope.attachmentId;
-                        if (currentAttachmentId === attachmentMatch[1]) {
-                            // Actually reset the viewScope instead of just logging
-                            try {
-                                if (activeContext.note) {
-                                    activeContext.setNote(activeContext.note.noteId, { 
-                                        viewScope: { viewMode: 'default' } 
-                                    });
-                                }
-                            } catch (error) {
-                                console.error('Failed to reset viewScope after PhotoSwipe close:', error);
-                            }
-                        }
-                    }
-                }
-                // Restore focus to the image
-                img.focus();
-            }
-        });
-    }
-    
-    /**
-     * Setup gallery mode for a container
-     */
-    private setupGalleryMode(container: HTMLElement): void {
-        const images = container.querySelectorAll<HTMLImageElement>(`img:not(${this.config.excludeSelector})`);
-        if (images.length <= 1) return;
-        
-        const galleryItems: GalleryItem[] = [];
-        
-        images.forEach((img, index) => {
-            // Skip CKEditor widget elements
-            if (img.closest('.cke_widget_element') || img.closest('.ck-widget')) {
-                return;
-            }
-            
-            const item: GalleryItem = {
-                src: img.src,
-                alt: img.alt || `Image ${index + 1}`,
-                title: img.title || img.alt,
-                element: img,
-                index: index,
-                width: img.naturalWidth || undefined,
-                height: img.naturalHeight || undefined
-            };
-            
-            // Check for caption
-            const figure = img.closest('figure');
-            if (figure) {
-                const caption = figure.querySelector('figcaption');
-                if (caption) {
-                    item.caption = caption.textContent || undefined;
-                }
-            }
-            
-            galleryItems.push(item);
-        });
-        
-        if (galleryItems.length > 0) {
-            this.containerGalleries.set(container, galleryItems);
-        }
-    }
-    
-    /**
-     * Observe container for dynamic changes
-     */
-    private observeContainer(container: HTMLElement): void {
-        // Disconnect existing observer if any
-        const existingObserver = this.observers.get(container);
-        if (existingObserver) {
-            existingObserver.disconnect();
-        }
-        
-        const observer = new MutationObserver((mutations) => {
-            let hasNewImages = false;
-            
-            mutations.forEach(mutation => {
-                if (mutation.type === 'childList') {
-                    mutation.addedNodes.forEach(node => {
-                        if (node.nodeType === Node.ELEMENT_NODE) {
-                            const element = node as HTMLElement;
-                            if (element.tagName === 'IMG') {
-                                hasNewImages = true;
-                            } else if (element.querySelector('img')) {
-                                hasNewImages = true;
-                            }
-                        }
-                    });
-                }
-            });
-            
-            if (hasNewImages) {
-                // Process new images
-                this.processImages(container);
-                
-                // Update gallery if enabled
-                if (this.config.enableGalleryMode) {
-                    this.setupGalleryMode(container);
-                }
-            }
-        });
-        
-        observer.observe(container, {
-            childList: true,
-            subtree: true
-        });
-        
-        this.observers.set(container, observer);
-    }
-    
-    /**
-     * Get or create a hint element from the pool
-     */
-    private getHintFromPool(): HTMLElement {
-        let hint = this.hintPool.pop();
-        if (!hint) {
-            hint = document.createElement('div');
-            hint.className = 'ckeditor-image-hint';
-            hint.textContent = 'Click to view in lightbox';
-            hint.style.cssText = `
-                position: absolute;
-                background: rgba(0, 0, 0, 0.8);
-                color: white;
-                padding: 4px 8px;
-                border-radius: 4px;
-                font-size: 12px;
-                z-index: 1000;
-                pointer-events: none;
-                opacity: 0;
-                transition: opacity 0.3s;
-                display: none;
-            `;
-        }
-        return hint;
-    }
-    
-    /**
-     * Return hint to pool
-     */
-    private returnHintToPool(hint: HTMLElement): void {
-        hint.style.opacity = '0';
-        hint.style.display = 'none';
-        if (this.hintPool.length < 10) { // Keep max 10 hints in pool
-            this.hintPool.push(hint);
-        } else {
-            hint.remove();
-        }
-    }
-    
-    /**
-     * Show hint for an image
-     */
-    private showHint(img: HTMLImageElement): void {
-        // Check if hint already exists
-        const imgId = img.dataset.imgId || `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        if (!img.dataset.imgId) {
-            img.dataset.imgId = imgId;
-        }
-        
-        // Clear any existing timeout
-        const existingTimeout = this.hintTimeouts.get(imgId);
-        if (existingTimeout) {
-            clearTimeout(existingTimeout);
-            this.hintTimeouts.delete(imgId);
-        }
-        
-        let hint = this.activeHints.get(imgId);
-        if (hint) {
-            hint.style.opacity = '1';
-            return;
-        }
-        
-        // Get hint from pool
-        hint = this.getHintFromPool();
-        this.activeHints.set(imgId, hint);
-        
-        // Position and show hint
-        if (!hint.parentElement) {
-            document.body.appendChild(hint);
-        }
-        
-        const imgRect = img.getBoundingClientRect();
-        hint.style.display = 'block';
-        hint.style.left = `${imgRect.left + (imgRect.width - hint.offsetWidth) / 2}px`;
-        hint.style.top = `${imgRect.top - hint.offsetHeight - 5}px`;
-        
-        // Show hint
-        requestAnimationFrame(() => {
-            hint.style.opacity = '1';
-        });
-        
-        // Auto-hide after delay
-        const timeout = window.setTimeout(() => {
-            this.hideHint(img);
-        }, this.config.hintDelay);
-        this.hintTimeouts.set(imgId, timeout);
-    }
-    
-    /**
-     * Hide hint for an image
-     */
-    private hideHint(img: HTMLImageElement): void {
-        const imgId = img.dataset.imgId;
-        if (!imgId) return;
-        
-        // Clear timeout
-        const timeout = this.hintTimeouts.get(imgId);
-        if (timeout) {
-            clearTimeout(timeout);
-            this.hintTimeouts.delete(imgId);
-        }
-        
-        const hint = this.activeHints.get(imgId);
-        if (hint) {
-            hint.style.opacity = '0';
-            this.activeHints.delete(imgId);
-            
-            setTimeout(() => {
-                this.returnHintToPool(hint);
-            }, 300);
-        }
-    }
-    
-    /**
-     * Cleanup integration for a container
-     */
-    cleanupContainer(container: HTMLElement | JQuery<HTMLElement>): void {
-        const element = container instanceof $ ? container[0] : container;
-        if (!element) return;
-        
-        // Disconnect observer
-        const observer = this.observers.get(element);
-        if (observer) {
-            observer.disconnect();
-            this.observers.delete(element);
-        }
-        
-        // Clear gallery
-        this.containerGalleries.delete(element);
-        
-        // Remove event handlers and hints
-        const images = element.querySelectorAll<HTMLImageElement>('img');
-        images.forEach(img => {
-            this.hideHint(img);
-            
-            // Remove event handlers
-            const handlers = (img as any)._photoswipeHandlers;
-            if (handlers) {
-                img.removeEventListener('mouseenter', handlers.mouseEnterHandler);
-                img.removeEventListener('mouseleave', handlers.mouseLeaveHandler);
-                if (handlers.dblClickHandler) {
-                    img.removeEventListener('dblclick', handlers.dblClickHandler, true);
-                }
-                delete (img as any)._photoswipeHandlers;
-            }
-            
-            // Mark as unprocessed
-            this.processedImages.delete(img);
-        });
-    }
-    
-    /**
-     * Update configuration
-     */
-    updateConfig(config: Partial<CKEditorPhotoSwipeConfig>): void {
-        this.config = { ...this.config, ...config };
-    }
-    
-    /**
-     * Cleanup all integrations
-     */
-    cleanup(): void {
-        // Disconnect all observers
-        this.observers.forEach(observer => observer.disconnect());
-        this.observers.clear();
-        
-        // Clear all galleries
-        this.containerGalleries.clear();
-        
-        // Clear all hints
-        this.activeHints.forEach(hint => hint.remove());
-        this.activeHints.clear();
-        
-        // Clear all timeouts
-        this.hintTimeouts.forEach(timeout => clearTimeout(timeout));
-        this.hintTimeouts.clear();
-        
-        // Clear hint pool
-        this.hintPool.forEach(hint => hint.remove());
-        this.hintPool = [];
-        
-        // Clear processed images
-        this.processedImages = new WeakSet();
-    }
-}
-
-// Export singleton instance
-export default CKEditorPhotoSwipeIntegration.getInstance();

apps/client/src/services/content_renderer.ts

@@ -23,11 +23,13 @@ interface Options {
     tooltip?: boolean;
     trim?: boolean;
     imageHasZoom?: boolean;
+    /** If enabled, it will prevent the default behavior in which an empty note would display a list of children. */
+    noChildrenList?: boolean;
 }
 
 const CODE_MIME_TYPES = new Set(["application/json"]);
 
-async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: Options = {}) {
+export async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: Options = {}) {
 
     options = Object.assign(
         {
@@ -42,7 +44,7 @@ async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FA
     const $renderedContent = $('<div class="rendered-content">');
 
     if (type === "text" || type === "book") {
-        await renderText(entity, $renderedContent);
+        await renderText(entity, $renderedContent, options);
     } else if (type === "code") {
         await renderCode(entity, $renderedContent);
     } else if (["image", "canvas", "mindMap"].includes(type)) {
@@ -114,7 +116,7 @@ async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FA
     };
 }
 
-async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>) {
+async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: Options = {}) {
     // entity must be FNote
     const blob = await note.getBlob();
 
@@ -135,7 +137,7 @@ async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HT
         }
 
         await formatCodeBlocks($renderedContent);
-    } else if (note instanceof FNote) {
+    } else if (note instanceof FNote && !options.noChildrenList) {
         await renderChildrenList($renderedContent, note);
     }
 }
@@ -256,8 +258,19 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
             </button>
         `);
 
-        $downloadButton.on("click", () => openService.downloadFileNote(entity.noteId));
-        $openButton.on("click", () => openService.openNoteExternally(entity.noteId, entity.mime));
+        $downloadButton.on("click", (e) => {
+            e.stopPropagation();
+            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)
+            iconEl.removeClass("bx bx-loader spin");
+            iconEl.addClass("bx bx-link-external");
+        });
         // open doesn't work for protected notes since it works through a browser which isn't in protected session
         $openButton.toggle(!entity.isProtected);
 

apps/client/src/services/css_class_manager.ts

@@ -1,21 +1,39 @@
+import {readCssVar} from "../utils/css-var";
+import Color, { ColorInstance } from "color";
+
 const registeredClasses = new Set<string>();
 
-function createClassForColor(color: string | null) {
-    if (!color?.trim()) {
-        return "";
-    }
+// Read the color lightness limits defined in the theme as CSS variables
 
-    const normalizedColorName = color.replace(/[^a-z0-9]/gi, "");
+const lightThemeColorMaxLightness = readCssVar(
+                                        document.documentElement,
+                                        "tree-item-light-theme-max-color-lightness"
+                                    ).asNumber(70);
 
-    if (!normalizedColorName.trim()) {
-        return "";
-    }
+const darkThemeColorMinLightness = readCssVar(
+                                        document.documentElement,
+                                        "tree-item-dark-theme-min-color-lightness"
+                                    ).asNumber(50);
 
-    const className = `color-${normalizedColorName}`;
+function createClassForColor(colorString: string | null) {
+    if (!colorString?.trim()) return "";
+
+    const color = parseColor(colorString);
+    if (!color) return "";
+
+    const className = `color-${color.hex().substring(1)}`;
 
     if (!registeredClasses.has(className)) {
-        // make the active fancytree selector more specific than the normal color setting
-        $("head").append(`<style>.${className}, span.fancytree-active.${className} { color: ${color} !important; }</style>`);
+        const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
+                                                   darkThemeColorMinLightness!);
+
+        $("head").append(`<style>
+            .${className}, span.fancytree-active.${className} {
+                --light-theme-custom-color: ${adjustedColor.lightThemeColor};
+                --dark-theme-custom-color: ${adjustedColor.darkThemeColor};
+                --custom-color-hue: ${getHue(color) ?? 'unset'};
+            }
+        </style>`);
 
         registeredClasses.add(className);
     }
@@ -23,6 +41,41 @@ function createClassForColor(color: string | null) {
     return className;
 }
 
+function parseColor(color: string) {
+    try {
+        return Color(color);
+    } catch (ex) {
+        console.error(ex);
+    }
+}
+
+/**
+ * Returns a pair of colors — one optimized for light themes and the other for dark themes, derived
+ * from the specified color to maintain sufficient contrast with each theme.
+ * The adjustment is performed by limiting the color’s lightness in the CIELAB color space,
+ * according to the lightThemeMaxLightness and darkThemeMinLightness parameters.
+ */
+function adjustColorLightness(color: ColorInstance, lightThemeMaxLightness: number, darkThemeMinLightness: number) {
+    const labColor = color.lab();
+    const lightness = labColor.l();
+
+    // For the light theme, limit the maximum lightness
+    const lightThemeColor = labColor.l(Math.min(lightness, lightThemeMaxLightness)).hex();
+
+    // For the dark theme, limit the minimum lightness
+    const darkThemeColor = labColor.l(Math.max(lightness, darkThemeMinLightness)).hex();
+
+    return {lightThemeColor, darkThemeColor};
+}
+
+/** Returns the hue of the specified color, or undefined if the color is grayscale. */
+function getHue(color: ColorInstance) {
+    const hslColor = color.hsl();
+    if (hslColor.saturationl() > 0) {
+        return hslColor.hue();
+    }
+}
+
 export default {
     createClassForColor
 };

apps/client/src/services/dialog.ts

@@ -60,7 +60,7 @@ async function confirmDeleteNoteBoxWithNote(title: string) {
     return new Promise<ConfirmDialogResult | undefined>((res) => appContext.triggerCommand("showConfirmDeleteNoteBoxWithNoteDialog", { title, callback: res }));
 }
 
-async function prompt(props: PromptDialogOptions) {
+export async function prompt(props: PromptDialogOptions) {
     return new Promise<string | null>((res) => appContext.triggerCommand("showPromptDialog", { ...props, callback: res }));
 }
 

apps/client/src/services/doc_renderer.ts

@@ -48,6 +48,6 @@ function getUrl(docNameValue: string, language: string) {
     // Cannot have spaces in the URL due to how JQuery.load works.
     docNameValue = docNameValue.replaceAll(" ", "%20");
 
-    const basePath = window.glob.isDev ? new URL(window.glob.assetPath).pathname : window.glob.assetPath;
+    const basePath = window.glob.isDev ? window.glob.assetPath + "/.." : window.glob.assetPath;
     return `${basePath}/doc_notes/${language}/${docNameValue}.html`;
 }

apps/client/src/services/file_watcher.ts

@@ -1,16 +1,8 @@
 import ws from "./ws.js";
 import appContext from "../components/app_context.js";
+import { OpenedFileUpdateStatus } from "@triliumnext/commons";
 
-// TODO: Deduplicate
-interface Message {
-    type: string;
-    entityType: string;
-    entityId: string;
-    lastModifiedMs: number;
-    filePath: string;
-}
-
-const fileModificationStatus: Record<string, Record<string, Message>> = {
+const fileModificationStatus: Record<string, Record<string, OpenedFileUpdateStatus>> = {
     notes: {},
     attachments: {}
 };
@@ -39,7 +31,7 @@ function ignoreModification(entityType: string, entityId: string) {
     delete fileModificationStatus[entityType][entityId];
 }
 
-ws.subscribeToMessages(async (message: Message) => {
+ws.subscribeToMessages(async message => {
     if (message.type !== "openedFileUpdated") {
         return;
     }

apps/client/src/services/froca.ts

@@ -40,20 +40,23 @@ class FrocaImpl implements Froca {
 
     constructor() {
         this.initializedPromise = this.loadInitialTree();
+        this.#clear();
     }
 
     async loadInitialTree() {
         const resp = await server.get<SubtreeResponse>("tree");
 
         // clear the cache only directly before adding new content which is important for e.g., switching to protected session
+        this.#clear();
+        this.addResp(resp);
+    }
 
+    #clear() {
         this.notes = {};
         this.branches = {};
         this.attributes = {};
         this.attachments = {};
         this.blobPromises = {};
-
-        this.addResp(resp);
     }
 
     async loadSubTree(subTreeNoteId: string) {

apps/client/src/services/froca_updater.ts

@@ -8,6 +8,7 @@ import FAttribute, { type FAttributeRow } from "../entities/fattribute.js";
 import FAttachment, { type FAttachmentRow } from "../entities/fattachment.js";
 import type { default as FNote, FNoteRow } from "../entities/fnote.js";
 import type { EntityChange } from "../server_types.js";
+import type { OptionNames } from "@triliumnext/commons";
 
 async function processEntityChanges(entityChanges: EntityChange[]) {
     const loadResults = new LoadResults(entityChanges);
@@ -30,13 +31,14 @@ async function processEntityChanges(entityChanges: EntityChange[]) {
                     continue; // only noise
                 }
 
-                options.set(attributeEntity.name, attributeEntity.value);
-
-                loadResults.addOption(attributeEntity.name);
+                options.set(attributeEntity.name as OptionNames, attributeEntity.value);
+                loadResults.addOption(attributeEntity.name as OptionNames);
             } else if (ec.entityName === "attachments") {
                 processAttachment(loadResults, ec);
-            } else if (ec.entityName === "blobs" || ec.entityName === "etapi_tokens") {
+            } else if (ec.entityName === "blobs") {
                 // NOOP - these entities are handled at the backend level and don't require frontend processing
+            } else if (ec.entityName === "etapi_tokens") {
+                loadResults.hasEtapiTokenChanges = true;
             } else {
                 throw new Error(`Unknown entityName '${ec.entityName}'`);
             }
@@ -77,9 +79,7 @@ async function processEntityChanges(entityChanges: EntityChange[]) {
             noteAttributeCache.invalidate();
         }
 
-        // TODO: Remove after porting the file
-        // @ts-ignore
-        const appContext = (await import("../components/app_context.js")).default as any;
+        const appContext = (await import("../components/app_context.js")).default;
         await appContext.triggerEvent("entitiesReloaded", { loadResults });
     }
 }

apps/client/src/services/frontend_script_api.ts

@@ -21,6 +21,7 @@ import dayjs from "dayjs";
 import type NoteContext from "../components/note_context.js";
 import type NoteDetailWidget from "../widgets/note_detail.js";
 import type Component from "../components/component.js";
+import { formatLogMessage } from "@triliumnext/commons";
 
 /**
  * A whole number
@@ -455,7 +456,7 @@ export interface Api {
     /**
      * Log given message to the log pane in UI
      */
-    log(message: string): void;
+    log(message: string | object): void;
 }
 
 /**
@@ -696,7 +697,7 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
     this.log = (message) => {
         const { noteId } = this.startNote;
 
-        message = `${utils.now()}: ${message}`;
+        message = `${utils.now()}: ${formatLogMessage(message)}`;
 
         console.log(`Script ${noteId}: ${message}`);
 

apps/client/src/services/frontend_script_entrypoint.ts

@@ -1,28 +0,0 @@
-/**
- * The front script API is accessible to code notes with the "JS (frontend)" language.
- *
- * The entire API is exposed as a single global: {@link api}
- *
- * @module Frontend Script API
- */
-
-/**
- * This file creates the entrypoint for TypeDoc that simulates the context from within a
- * script note.
- *
- * Make sure to keep in line with frontend's `script_context.ts`.
- */
-
-export type { default as BasicWidget } from "../widgets/basic_widget.js";
-export type { default as FAttachment } from "../entities/fattachment.js";
-export type { default as FAttribute } from "../entities/fattribute.js";
-export type { default as FBranch } from "../entities/fbranch.js";
-export type { default as FNote } from "../entities/fnote.js";
-export type { Api } from "./frontend_script_api.js";
-export type { default as NoteContextAwareWidget } from "../widgets/note_context_aware_widget.js";
-export type { default as RightPanelWidget } from "../widgets/right_panel_widget.js";
-
-import FrontendScriptApi, { type Api } from "./frontend_script_api.js";
-
-//@ts-expect-error
-export const api: Api = new FrontendScriptApi();

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

@@ -1,387 +0,0 @@
-/**
- * Tests for Gallery Manager
- */
-
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import galleryManager from './gallery_manager';
-import mediaViewer from './media_viewer';
-import type { GalleryItem, GalleryConfig } from './gallery_manager';
-import type { MediaViewerCallbacks } from './media_viewer';
-
-// Mock media viewer
-vi.mock('./media_viewer', () => ({
-    default: {
-        open: vi.fn(),
-        openSingle: vi.fn(),
-        close: vi.fn(),
-        next: vi.fn(),
-        prev: vi.fn(),
-        goTo: vi.fn(),
-        getCurrentIndex: vi.fn(() => 0),
-        isOpen: vi.fn(() => false),
-        getImageDimensions: vi.fn(() => Promise.resolve({ width: 800, height: 600 }))
-    }
-}));
-
-// Mock froca
-vi.mock('./froca', () => ({
-    default: {
-        getNoteComplement: vi.fn()
-    }
-}));
-
-// Mock utils
-vi.mock('./utils', () => ({
-    default: {
-        createImageSrcUrl: vi.fn((note: any) => `/api/images/${note.noteId}`),
-        randomString: vi.fn(() => 'test123')
-    }
-}));
-
-describe('GalleryManager', () => {
-    let mockItems: GalleryItem[];
-    
-    beforeEach(() => {
-        // Reset mocks
-        vi.clearAllMocks();
-        
-        // Create mock gallery items
-        mockItems = [
-            {
-                src: '/api/images/note1/image1.jpg',
-                alt: 'Image 1',
-                title: 'First Image',
-                noteId: 'note1',
-                index: 0,
-                width: 800,
-                height: 600
-            },
-            {
-                src: '/api/images/note1/image2.jpg',
-                alt: 'Image 2',
-                title: 'Second Image',
-                noteId: 'note1',
-                index: 1,
-                width: 1024,
-                height: 768
-            },
-            {
-                src: '/api/images/note1/image3.jpg',
-                alt: 'Image 3',
-                title: 'Third Image',
-                noteId: 'note1',
-                index: 2,
-                width: 1920,
-                height: 1080
-            }
-        ];
-        
-        // Setup DOM
-        document.body.innerHTML = '';
-    });
-    
-    afterEach(() => {
-        // Cleanup
-        galleryManager.cleanup();
-        document.body.innerHTML = '';
-    });
-    
-    describe('Gallery Creation', () => {
-        it('should create gallery from container with images', async () => {
-            // Create container with images
-            const container = document.createElement('div');
-            container.innerHTML = `
-                <img src="/api/images/note1/image1.jpg" alt="Image 1" />
-                <img src="/api/images/note1/image2.jpg" alt="Image 2" />
-                <img src="/api/images/note1/image3.jpg" alt="Image 3" />
-            `;
-            document.body.appendChild(container);
-            
-            // Create gallery from container
-            const items = await galleryManager.createGalleryFromContainer(container);
-            
-            expect(items).toHaveLength(3);
-            expect(items[0].src).toBe('/api/images/note1/image1.jpg');
-            expect(items[0].alt).toBe('Image 1');
-            expect(items[0].index).toBe(0);
-        });
-        
-        it('should extract captions from figure elements', async () => {
-            const container = document.createElement('div');
-            container.innerHTML = `
-                <figure>
-                    <img src="/api/images/note1/image1.jpg" alt="Image 1" />
-                    <figcaption>This is a caption</figcaption>
-                </figure>
-            `;
-            document.body.appendChild(container);
-            
-            const items = await galleryManager.createGalleryFromContainer(container);
-            
-            expect(items).toHaveLength(1);
-            expect(items[0].caption).toBe('This is a caption');
-        });
-        
-        it('should handle images without dimensions', async () => {
-            const container = document.createElement('div');
-            container.innerHTML = `<img src="/api/images/note1/image1.jpg" alt="Image 1" />`;
-            document.body.appendChild(container);
-            
-            const items = await galleryManager.createGalleryFromContainer(container);
-            
-            expect(items).toHaveLength(1);
-            expect(items[0].width).toBe(800); // From mocked getImageDimensions
-            expect(items[0].height).toBe(600);
-            expect(mediaViewer.getImageDimensions).toHaveBeenCalledWith('/api/images/note1/image1.jpg');
-        });
-    });
-    
-    describe('Gallery Opening', () => {
-        it('should open gallery with multiple items', () => {
-            const callbacks: MediaViewerCallbacks = {
-                onOpen: vi.fn(),
-                onClose: vi.fn(),
-                onChange: vi.fn()
-            };
-            
-            galleryManager.openGallery(mockItems, 0, {}, callbacks);
-            
-            expect(mediaViewer.open).toHaveBeenCalledWith(
-                mockItems,
-                0,
-                expect.objectContaining({
-                    loop: true,
-                    allowPanToNext: true,
-                    preload: [2, 2]
-                }),
-                expect.objectContaining({
-                    onOpen: expect.any(Function),
-                    onClose: expect.any(Function),
-                    onChange: expect.any(Function)
-                })
-            );
-        });
-        
-        it('should handle empty items array', () => {
-            galleryManager.openGallery([], 0);
-            expect(mediaViewer.open).not.toHaveBeenCalled();
-        });
-        
-        it('should apply custom configuration', () => {
-            const config: GalleryConfig = {
-                showThumbnails: false,
-                autoPlay: true,
-                slideInterval: 5000,
-                loop: false
-            };
-            
-            galleryManager.openGallery(mockItems, 0, config);
-            
-            expect(mediaViewer.open).toHaveBeenCalledWith(
-                mockItems,
-                0,
-                expect.objectContaining({
-                    loop: false
-                }),
-                expect.any(Object)
-            );
-        });
-    });
-    
-    describe('Gallery Navigation', () => {
-        beforeEach(() => {
-            // Open a gallery first
-            galleryManager.openGallery(mockItems, 0);
-        });
-        
-        it('should navigate to next slide', () => {
-            galleryManager.nextSlide();
-            expect(mediaViewer.next).toHaveBeenCalled();
-        });
-        
-        it('should navigate to previous slide', () => {
-            galleryManager.previousSlide();
-            expect(mediaViewer.prev).toHaveBeenCalled();
-        });
-        
-        it('should go to specific slide', () => {
-            galleryManager.goToSlide(2);
-            expect(mediaViewer.goTo).toHaveBeenCalledWith(2);
-        });
-        
-        it('should not navigate to invalid slide index', () => {
-            const state = galleryManager.getGalleryState();
-            if (state) {
-                // Try to go to invalid index
-                galleryManager.goToSlide(-1);
-                expect(mediaViewer.goTo).not.toHaveBeenCalled();
-                
-                galleryManager.goToSlide(10);
-                expect(mediaViewer.goTo).not.toHaveBeenCalled();
-            }
-        });
-    });
-    
-    describe('Slideshow Functionality', () => {
-        beforeEach(() => {
-            vi.useFakeTimers();
-            galleryManager.openGallery(mockItems, 0, { autoPlay: false });
-        });
-        
-        afterEach(() => {
-            vi.useRealTimers();
-        });
-        
-        it('should start slideshow', () => {
-            const state = galleryManager.getGalleryState();
-            expect(state?.isPlaying).toBe(false);
-            
-            galleryManager.startSlideshow();
-            
-            const updatedState = galleryManager.getGalleryState();
-            expect(updatedState?.isPlaying).toBe(true);
-        });
-        
-        it('should stop slideshow', () => {
-            galleryManager.startSlideshow();
-            galleryManager.stopSlideshow();
-            
-            const state = galleryManager.getGalleryState();
-            expect(state?.isPlaying).toBe(false);
-        });
-        
-        it('should toggle slideshow', () => {
-            const initialState = galleryManager.getGalleryState();
-            expect(initialState?.isPlaying).toBe(false);
-            
-            galleryManager.toggleSlideshow();
-            expect(galleryManager.getGalleryState()?.isPlaying).toBe(true);
-            
-            galleryManager.toggleSlideshow();
-            expect(galleryManager.getGalleryState()?.isPlaying).toBe(false);
-        });
-        
-        it('should advance slides automatically in slideshow', () => {
-            galleryManager.startSlideshow();
-            
-            // Fast-forward time
-            vi.advanceTimersByTime(4000); // Default interval
-            
-            expect(mediaViewer.goTo).toHaveBeenCalledWith(1);
-        });
-        
-        it('should update slideshow interval', () => {
-            galleryManager.startSlideshow();
-            galleryManager.updateSlideshowInterval(5000);
-            
-            const state = galleryManager.getGalleryState();
-            expect(state?.config.slideInterval).toBe(5000);
-        });
-    });
-    
-    describe('Gallery State', () => {
-        it('should track gallery state', () => {
-            expect(galleryManager.getGalleryState()).toBeNull();
-            
-            galleryManager.openGallery(mockItems, 1);
-            
-            const state = galleryManager.getGalleryState();
-            expect(state).not.toBeNull();
-            expect(state?.items).toEqual(mockItems);
-            expect(state?.currentIndex).toBe(1);
-        });
-        
-        it('should check if gallery is open', () => {
-            expect(galleryManager.isGalleryOpen()).toBe(false);
-            
-            vi.mocked(mediaViewer.isOpen).mockReturnValue(true);
-            galleryManager.openGallery(mockItems, 0);
-            
-            expect(galleryManager.isGalleryOpen()).toBe(true);
-        });
-    });
-    
-    describe('Gallery Cleanup', () => {
-        it('should close gallery on cleanup', () => {
-            galleryManager.openGallery(mockItems, 0);
-            galleryManager.cleanup();
-            
-            expect(mediaViewer.close).toHaveBeenCalled();
-            expect(galleryManager.getGalleryState()).toBeNull();
-        });
-        
-        it('should stop slideshow on close', () => {
-            galleryManager.openGallery(mockItems, 0, { autoPlay: true });
-            
-            const state = galleryManager.getGalleryState();
-            expect(state?.isPlaying).toBe(true);
-            
-            galleryManager.closeGallery();
-            expect(mediaViewer.close).toHaveBeenCalled();
-        });
-    });
-    
-    describe('UI Enhancements', () => {
-        beforeEach(() => {
-            // Create PhotoSwipe container mock
-            const pswpElement = document.createElement('div');
-            pswpElement.className = 'pswp';
-            document.body.appendChild(pswpElement);
-        });
-        
-        it('should add thumbnail strip when enabled', (done) => {
-            galleryManager.openGallery(mockItems, 0, { showThumbnails: true });
-            
-            // Wait for UI setup
-            setTimeout(() => {
-                const thumbnailStrip = document.querySelector('.gallery-thumbnail-strip');
-                expect(thumbnailStrip).toBeTruthy();
-                
-                const thumbnails = document.querySelectorAll('.gallery-thumbnail');
-                expect(thumbnails).toHaveLength(3);
-                
-                done();
-            }, 150);
-        });
-        
-        it('should add slideshow controls', (done) => {
-            galleryManager.openGallery(mockItems, 0);
-            
-            setTimeout(() => {
-                const controls = document.querySelector('.gallery-slideshow-controls');
-                expect(controls).toBeTruthy();
-                
-                const playPauseBtn = document.querySelector('.slideshow-play-pause');
-                expect(playPauseBtn).toBeTruthy();
-                
-                done();
-            }, 150);
-        });
-        
-        it('should add image counter when enabled', (done) => {
-            galleryManager.openGallery(mockItems, 0, { showCounter: true });
-            
-            setTimeout(() => {
-                const counter = document.querySelector('.gallery-counter');
-                expect(counter).toBeTruthy();
-                expect(counter?.textContent).toContain('1');
-                expect(counter?.textContent).toContain('3');
-                
-                done();
-            }, 150);
-        });
-        
-        it('should add keyboard hints', (done) => {
-            galleryManager.openGallery(mockItems, 0);
-            
-            setTimeout(() => {
-                const hints = document.querySelector('.gallery-keyboard-hints');
-                expect(hints).toBeTruthy();
-                expect(hints?.textContent).toContain('Navigate');
-                expect(hints?.textContent).toContain('ESC');
-                
-                done();
-            }, 150);
-        });
-    });
-});

apps/client/src/services/gallery_manager.ts

@@ -1,987 +0,0 @@
-/**
- * Gallery Manager for PhotoSwipe integration in Trilium Notes
- * Handles multi-image galleries, slideshow mode, and navigation features
- */
-
-import mediaViewer, { MediaItem, MediaViewerCallbacks, MediaViewerConfig } from './media_viewer.js';
-import utils from './utils.js';
-import froca from './froca.js';
-import type FNote from '../entities/fnote.js';
-
-/**
- * Gallery configuration options
- */
-export interface GalleryConfig {
-    showThumbnails?: boolean;
-    thumbnailHeight?: number;
-    autoPlay?: boolean;
-    slideInterval?: number; // in milliseconds
-    showCounter?: boolean;
-    enableKeyboardNav?: boolean;
-    enableSwipeGestures?: boolean;
-    preloadCount?: number;
-    loop?: boolean;
-}
-
-/**
- * Gallery item with additional metadata
- */
-export interface GalleryItem extends MediaItem {
-    noteId?: string;
-    attachmentId?: string;
-    caption?: string;
-    description?: string;
-    index?: number;
-}
-
-/**
- * Gallery state management
- */
-interface GalleryState {
-    items: GalleryItem[];
-    currentIndex: number;
-    isPlaying: boolean;
-    slideshowTimer?: number;
-    config: Required<GalleryConfig>;
-}
-
-/**
- * GalleryManager handles multi-image galleries with slideshow and navigation features
- */
-class GalleryManager {
-    private static instance: GalleryManager;
-    private currentGallery: GalleryState | null = null;
-    private defaultConfig: Required<GalleryConfig> = {
-        showThumbnails: true,
-        thumbnailHeight: 80,
-        autoPlay: false,
-        slideInterval: 4000,
-        showCounter: true,
-        enableKeyboardNav: true,
-        enableSwipeGestures: true,
-        preloadCount: 2,
-        loop: true
-    };
-    
-    private slideshowCallbacks: Set<() => void> = new Set();
-    private $thumbnailStrip?: JQuery<HTMLElement>;
-    private $slideshowControls?: JQuery<HTMLElement>;
-    
-    // Track all dynamically created elements for proper cleanup
-    private createdElements: Map<string, HTMLElement | JQuery<HTMLElement>> = new Map();
-    private setupTimeout?: number;
-
-    private constructor() {
-        // Cleanup on window unload
-        window.addEventListener('beforeunload', () => this.cleanup());
-    }
-
-    /**
-     * Get singleton instance
-     */
-    static getInstance(): GalleryManager {
-        if (!GalleryManager.instance) {
-            GalleryManager.instance = new GalleryManager();
-        }
-        return GalleryManager.instance;
-    }
-
-    /**
-     * Create gallery from images in a note's content
-     */
-    async createGalleryFromNote(note: FNote, config?: GalleryConfig): Promise<GalleryItem[]> {
-        const items: GalleryItem[] = [];
-        
-        try {
-            // Parse note content to find images
-            const parser = new DOMParser();
-            const content = await note.getContent();
-            const doc = parser.parseFromString(content || '', 'text/html');
-            const images = doc.querySelectorAll('img');
-            
-            for (let i = 0; i < images.length; i++) {
-                const img = images[i];
-                const src = img.getAttribute('src');
-                
-                if (!src) continue;
-                
-                // Convert relative URLs to absolute
-                const absoluteSrc = this.resolveImageSrc(src, note.noteId);
-                
-                const item: GalleryItem = {
-                    src: absoluteSrc,
-                    alt: img.getAttribute('alt') || `Image ${i + 1} from ${note.title}`,
-                    title: img.getAttribute('title') || img.getAttribute('alt') || undefined,
-                    caption: img.getAttribute('data-caption') || undefined,
-                    noteId: note.noteId,
-                    index: i,
-                    width: parseInt(img.getAttribute('width') || '0') || undefined,
-                    height: parseInt(img.getAttribute('height') || '0') || undefined
-                };
-                
-                // Try to get thumbnail from data attribute or create one
-                const thumbnailSrc = img.getAttribute('data-thumbnail');
-                if (thumbnailSrc) {
-                    item.msrc = this.resolveImageSrc(thumbnailSrc, note.noteId);
-                }
-                
-                items.push(item);
-            }
-            
-            // Also check for image attachments
-            const attachmentItems = await this.getAttachmentImages(note);
-            items.push(...attachmentItems);
-            
-        } catch (error) {
-            console.error('Failed to create gallery from note:', error);
-        }
-        
-        return items;
-    }
-
-    /**
-     * Get image attachments from a note
-     */
-    private async getAttachmentImages(note: FNote): Promise<GalleryItem[]> {
-        const items: GalleryItem[] = [];
-        
-        try {
-            // Get child notes that are images
-            const childNotes = await note.getChildNotes();
-            
-            for (const childNote of childNotes) {
-                if (childNote.type === 'image') {
-                    const item: GalleryItem = {
-                        src: utils.createImageSrcUrl(childNote),
-                        alt: childNote.title,
-                        title: childNote.title,
-                        noteId: childNote.noteId,
-                        index: items.length
-                    };
-                    
-                    items.push(item);
-                }
-            }
-        } catch (error) {
-            console.error('Failed to get attachment images:', error);
-        }
-        
-        return items;
-    }
-
-    /**
-     * Create gallery from a container element with images
-     */
-    async createGalleryFromContainer(
-        container: HTMLElement | JQuery<HTMLElement>, 
-        selector: string = 'img',
-        config?: GalleryConfig
-    ): Promise<GalleryItem[]> {
-        const $container = $(container);
-        const images = $container.find(selector);
-        const items: GalleryItem[] = [];
-        
-        for (let i = 0; i < images.length; i++) {
-            const img = images[i] as HTMLImageElement;
-            
-            const item: GalleryItem = {
-                src: img.src,
-                alt: img.alt || `Image ${i + 1}`,
-                title: img.title || img.alt || undefined,
-                element: img,
-                index: i,
-                width: img.naturalWidth || undefined,
-                height: img.naturalHeight || undefined
-            };
-            
-            // Try to extract caption from nearby elements
-            const $img = $(img);
-            const $figure = $img.closest('figure');
-            if ($figure.length) {
-                const $caption = $figure.find('figcaption');
-                if ($caption.length) {
-                    item.caption = $caption.text();
-                }
-            }
-            
-            // Check for data attributes
-            item.noteId = $img.data('note-id');
-            item.attachmentId = $img.data('attachment-id');
-            
-            items.push(item);
-        }
-        
-        return items;
-    }
-
-    /**
-     * Open gallery with specified items
-     */
-    openGallery(
-        items: GalleryItem[], 
-        startIndex: number = 0, 
-        config?: GalleryConfig,
-        callbacks?: MediaViewerCallbacks
-    ): void {
-        if (!items || items.length === 0) {
-            console.warn('No items provided to gallery');
-            return;
-        }
-        
-        // Close any existing gallery
-        this.closeGallery();
-        
-        // Merge configuration
-        const finalConfig = { ...this.defaultConfig, ...config };
-        
-        // Initialize gallery state
-        this.currentGallery = {
-            items,
-            currentIndex: startIndex,
-            isPlaying: finalConfig.autoPlay,
-            config: finalConfig
-        };
-        
-        // Enhanced PhotoSwipe configuration for gallery
-        const photoSwipeConfig: Partial<MediaViewerConfig> = {
-            bgOpacity: 0.95,
-            showHideOpacity: true,
-            allowPanToNext: true,
-            spacing: 0.12,
-            loop: finalConfig.loop,
-            arrowKeys: finalConfig.enableKeyboardNav,
-            pinchToClose: finalConfig.enableSwipeGestures,
-            closeOnVerticalDrag: finalConfig.enableSwipeGestures,
-            preload: [finalConfig.preloadCount, finalConfig.preloadCount],
-            wheelToZoom: true,
-            // Enable mobile and accessibility enhancements
-            mobileA11y: {
-                touch: {
-                    hapticFeedback: true,
-                    multiTouchEnabled: true
-                },
-                a11y: {
-                    enableKeyboardNav: finalConfig.enableKeyboardNav,
-                    enableScreenReaderAnnouncements: true,
-                    keyboardShortcutsEnabled: true
-                },
-                mobileUI: {
-                    bottomSheetEnabled: true,
-                    adaptiveToolbar: true,
-                    swipeIndicators: true,
-                    gestureHints: true
-                },
-                performance: {
-                    adaptiveQuality: true,
-                    batteryOptimization: true
-                }
-            }
-        };
-        
-        // Enhanced callbacks
-        const enhancedCallbacks: MediaViewerCallbacks = {
-            onOpen: () => {
-                this.onGalleryOpen();
-                callbacks?.onOpen?.();
-            },
-            onClose: () => {
-                this.onGalleryClose();
-                callbacks?.onClose?.();
-            },
-            onChange: (index) => {
-                this.onSlideChange(index);
-                callbacks?.onChange?.(index);
-            },
-            onImageLoad: callbacks?.onImageLoad,
-            onImageError: callbacks?.onImageError
-        };
-        
-        // Open with media viewer
-        mediaViewer.open(items, startIndex, photoSwipeConfig, enhancedCallbacks);
-        
-        // Setup gallery UI enhancements
-        this.setupGalleryUI();
-        
-        // Start slideshow if configured
-        if (finalConfig.autoPlay) {
-            this.startSlideshow();
-        }
-    }
-
-    /**
-     * Setup gallery UI enhancements
-     */
-    private setupGalleryUI(): void {
-        if (!this.currentGallery) return;
-        
-        // Clear any existing timeout
-        if (this.setupTimeout) {
-            clearTimeout(this.setupTimeout);
-        }
-        
-        // Add gallery-specific UI elements to PhotoSwipe
-        this.setupTimeout = window.setTimeout(() => {
-            // Validate gallery is still open before manipulating DOM
-            if (!this.currentGallery || !this.isGalleryOpen()) {
-                return;
-            }
-            
-            // PhotoSwipe needs a moment to initialize
-            const pswpElement = document.querySelector('.pswp');
-            if (!pswpElement) return;
-            
-            // Add thumbnail strip if enabled
-            if (this.currentGallery.config.showThumbnails) {
-                this.addThumbnailStrip(pswpElement);
-            }
-            
-            // Add slideshow controls
-            this.addSlideshowControls(pswpElement);
-            
-            // Add image counter if enabled
-            if (this.currentGallery.config.showCounter) {
-                this.addImageCounter(pswpElement);
-            }
-            
-            // Add keyboard hints
-            this.addKeyboardHints(pswpElement);
-        }, 100);
-    }
-
-    /**
-     * Add thumbnail strip navigation
-     */
-    private addThumbnailStrip(container: Element): void {
-        if (!this.currentGallery) return;
-        
-        // Create thumbnail strip container safely using DOM APIs
-        const stripDiv = document.createElement('div');
-        stripDiv.className = 'gallery-thumbnail-strip';
-        stripDiv.setAttribute('style', `
-            position: absolute;
-            bottom: 60px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            gap: 8px;
-            padding: 10px;
-            background: rgba(0, 0, 0, 0.7);
-            border-radius: 8px;
-            max-width: 90%;
-            overflow-x: auto;
-            z-index: 100;
-        `);
-        
-        // Create thumbnails safely
-        this.currentGallery.items.forEach((item, index) => {
-            const thumbDiv = document.createElement('div');
-            thumbDiv.className = 'gallery-thumbnail';
-            thumbDiv.dataset.index = index.toString();
-            thumbDiv.setAttribute('style', `
-                width: ${this.currentGallery!.config.thumbnailHeight}px;
-                height: ${this.currentGallery!.config.thumbnailHeight}px;
-                cursor: pointer;
-                border: 2px solid ${index === this.currentGallery!.currentIndex ? '#fff' : 'transparent'};
-                border-radius: 4px;
-                overflow: hidden;
-                flex-shrink: 0;
-                opacity: ${index === this.currentGallery!.currentIndex ? '1' : '0.6'};
-                transition: all 0.2s;
-            `);
-            
-            const img = document.createElement('img');
-            // Sanitize src URLs
-            const src = this.sanitizeUrl(item.msrc || item.src);
-            img.src = src;
-            // Use textContent for safe text insertion
-            img.alt = this.sanitizeText(item.alt || '');
-            img.setAttribute('style', `
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            `);
-            
-            thumbDiv.appendChild(img);
-            stripDiv.appendChild(thumbDiv);
-        });
-        
-        this.$thumbnailStrip = $(stripDiv);
-        $(container).append(this.$thumbnailStrip);
-        this.createdElements.set('thumbnailStrip', this.$thumbnailStrip);
-        
-        // Handle thumbnail clicks
-        this.$thumbnailStrip.on('click', '.gallery-thumbnail', (e) => {
-            const index = parseInt($(e.currentTarget).data('index'));
-            this.goToSlide(index);
-        });
-        
-        // Handle hover effect
-        this.$thumbnailStrip.on('mouseenter', '.gallery-thumbnail', (e) => {
-            if (!$(e.currentTarget).hasClass('active')) {
-                $(e.currentTarget).css('opacity', '0.8');
-            }
-        });
-        
-        this.$thumbnailStrip.on('mouseleave', '.gallery-thumbnail', (e) => {
-            if (!$(e.currentTarget).hasClass('active')) {
-                $(e.currentTarget).css('opacity', '0.6');
-            }
-        });
-    }
-
-    /**
-     * Sanitize text content to prevent XSS
-     */
-    private sanitizeText(text: string): string {
-        // Remove any HTML tags and entities
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-    
-    /**
-     * Sanitize URL to prevent XSS
-     */
-    private sanitizeUrl(url: string): string {
-        // Only allow safe protocols
-        const allowedProtocols = ['http:', 'https:', 'data:'];
-        try {
-            const urlObj = new URL(url, window.location.href);
-            
-            // Special validation for data URLs
-            if (urlObj.protocol === 'data:') {
-                // Only allow image MIME types for data URLs
-                const allowedImageTypes = [
-                    'data:image/jpeg',
-                    'data:image/jpg',
-                    'data:image/png',
-                    'data:image/gif',
-                    'data:image/webp',
-                    'data:image/svg+xml',
-                    'data:image/bmp'
-                ];
-                
-                // Check if data URL starts with an allowed image type
-                const isAllowedImage = allowedImageTypes.some(type => 
-                    url.toLowerCase().startsWith(type)
-                );
-                
-                if (!isAllowedImage) {
-                    console.warn('Rejected non-image data URL:', url.substring(0, 50));
-                    return '';
-                }
-                
-                // Additional check for base64 encoding
-                if (!url.includes(';base64,') && !url.includes(';charset=')) {
-                    console.warn('Rejected data URL with invalid encoding');
-                    return '';
-                }
-            } else if (!allowedProtocols.includes(urlObj.protocol)) {
-                return '';
-            }
-            
-            return urlObj.href;
-        } catch {
-            // If URL parsing fails, check if it's a relative path
-            if (url.startsWith('/') || url.startsWith('api/')) {
-                return url;
-            }
-            return '';
-        }
-    }
-    
-    /**
-     * Add slideshow controls
-     */
-    private addSlideshowControls(container: Element): void {
-        if (!this.currentGallery) return;
-        
-        const controlsHtml = `
-            <div class="gallery-slideshow-controls" style="
-                position: absolute;
-                top: 20px;
-                right: 20px;
-                display: flex;
-                gap: 10px;
-                z-index: 100;
-            ">
-                <button class="slideshow-play-pause" style="
-                    background: rgba(255, 255, 255, 0.9);
-                    border: none;
-                    border-radius: 4px;
-                    width: 44px;
-                    height: 44px;
-                    cursor: pointer;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 20px;
-                " aria-label="${this.currentGallery.isPlaying ? 'Pause slideshow' : 'Play slideshow'}">
-                    <i class="bx ${this.currentGallery.isPlaying ? 'bx-pause' : 'bx-play'}"></i>
-                </button>
-                
-                <button class="slideshow-settings" style="
-                    background: rgba(255, 255, 255, 0.9);
-                    border: none;
-                    border-radius: 4px;
-                    width: 44px;
-                    height: 44px;
-                    cursor: pointer;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 20px;
-                " aria-label="Slideshow settings">
-                    <i class="bx bx-cog"></i>
-                </button>
-            </div>
-            
-            <div class="slideshow-interval-selector" style="
-                position: absolute;
-                top: 80px;
-                right: 20px;
-                background: rgba(0, 0, 0, 0.8);
-                color: white;
-                padding: 10px;
-                border-radius: 4px;
-                display: none;
-                z-index: 101;
-            ">
-                <label style="display: block; margin-bottom: 5px;">Slide interval:</label>
-                <select class="interval-select" style="
-                    background: rgba(255, 255, 255, 0.1);
-                    color: white;
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    padding: 4px;
-                    border-radius: 3px;
-                ">
-                    <option value="3000">3 seconds</option>
-                    <option value="4000" selected>4 seconds</option>
-                    <option value="5000">5 seconds</option>
-                    <option value="7000">7 seconds</option>
-                    <option value="10000">10 seconds</option>
-                </select>
-            </div>
-        `;
-        
-        this.$slideshowControls = $(controlsHtml);
-        $(container).append(this.$slideshowControls);
-        this.createdElements.set('slideshowControls', this.$slideshowControls);
-        
-        // Handle play/pause button
-        this.$slideshowControls.find('.slideshow-play-pause').on('click', () => {
-            this.toggleSlideshow();
-        });
-        
-        // Handle settings button
-        this.$slideshowControls.find('.slideshow-settings').on('click', () => {
-            const $selector = this.$slideshowControls?.find('.slideshow-interval-selector');
-            $selector?.toggle();
-        });
-        
-        // Handle interval change
-        this.$slideshowControls.find('.interval-select').on('change', (e) => {
-            const interval = parseInt($(e.target).val() as string);
-            this.updateSlideshowInterval(interval);
-        });
-    }
-
-    /**
-     * Add image counter
-     */
-    private addImageCounter(container: Element): void {
-        if (!this.currentGallery) return;
-        
-        // Create counter element safely
-        const counterDiv = document.createElement('div');
-        counterDiv.className = 'gallery-counter';
-        counterDiv.setAttribute('style', `
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-size: 14px;
-            z-index: 100;
-        `);
-        
-        const currentSpan = document.createElement('span');
-        currentSpan.className = 'current-index';
-        currentSpan.textContent = String(this.currentGallery.currentIndex + 1);
-        
-        const separatorSpan = document.createElement('span');
-        separatorSpan.textContent = ' / ';
-        
-        const totalSpan = document.createElement('span');
-        totalSpan.className = 'total-count';
-        totalSpan.textContent = String(this.currentGallery.items.length);
-        
-        counterDiv.appendChild(currentSpan);
-        counterDiv.appendChild(separatorSpan);
-        counterDiv.appendChild(totalSpan);
-        
-        container.appendChild(counterDiv);
-        this.createdElements.set('counter', counterDiv);
-    }
-
-    /**
-     * Add keyboard hints overlay
-     */
-    private addKeyboardHints(container: Element): void {
-        // Create hints element safely
-        const hintsDiv = document.createElement('div');
-        hintsDiv.className = 'gallery-keyboard-hints';
-        hintsDiv.setAttribute('style', `
-            position: absolute;
-            bottom: 20px;
-            left: 20px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-size: 12px;
-            opacity: 0;
-            transition: opacity 0.3s;
-            z-index: 100;
-        `);
-        
-        // Create hint items
-        const hints = [
-            { key: '←/→', action: 'Navigate' },
-            { key: 'Space', action: 'Play/Pause' },
-            { key: 'ESC', action: 'Close' }
-        ];
-        
-        hints.forEach(hint => {
-            const hintItem = document.createElement('div');
-            const kbd = document.createElement('kbd');
-            kbd.style.cssText = 'background: rgba(255,255,255,0.2); padding: 2px 4px; border-radius: 2px;';
-            kbd.textContent = hint.key;
-            hintItem.appendChild(kbd);
-            hintItem.appendChild(document.createTextNode(' ' + hint.action));
-            hintsDiv.appendChild(hintItem);
-        });
-        
-        container.appendChild(hintsDiv);
-        this.createdElements.set('keyboardHints', hintsDiv);
-        
-        const $hints = $(hintsDiv);
-        
-        // Show hints on hover with scoped selector
-        const handleMouseEnter = () => {
-            if (this.currentGallery) {
-                $hints.css('opacity', '0.6');
-            }
-        };
-        
-        const handleMouseLeave = () => {
-            $hints.css('opacity', '0');
-        };
-        
-        $(container).on('mouseenter.galleryHints', handleMouseEnter);
-        $(container).on('mouseleave.galleryHints', handleMouseLeave);
-        
-        // Track cleanup callback
-        this.slideshowCallbacks.add(() => {
-            $(container).off('.galleryHints');
-        });
-    }
-
-    /**
-     * Handle gallery open event
-     */
-    private onGalleryOpen(): void {
-        // Add keyboard listener for slideshow control
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === ' ') {
-                e.preventDefault();
-                this.toggleSlideshow();
-            }
-        };
-        
-        document.addEventListener('keydown', handleKeyDown);
-        this.slideshowCallbacks.add(() => {
-            document.removeEventListener('keydown', handleKeyDown);
-        });
-    }
-
-    /**
-     * Handle gallery close event
-     */
-    private onGalleryClose(): void {
-        this.stopSlideshow();
-        
-        // Clear setup timeout if exists
-        if (this.setupTimeout) {
-            clearTimeout(this.setupTimeout);
-            this.setupTimeout = undefined;
-        }
-        
-        // Cleanup event listeners
-        this.slideshowCallbacks.forEach(callback => callback());
-        this.slideshowCallbacks.clear();
-        
-        // Remove all tracked UI elements
-        this.createdElements.forEach((element, key) => {
-            if (element instanceof HTMLElement) {
-                element.remove();
-            } else if (element instanceof $) {
-                element.remove();
-            }
-        });
-        this.createdElements.clear();
-        
-        // Clear jQuery references
-        this.$thumbnailStrip = undefined;
-        this.$slideshowControls = undefined;
-        
-        // Clear state
-        this.currentGallery = null;
-    }
-
-    /**
-     * Handle slide change event
-     */
-    private onSlideChange(index: number): void {
-        if (!this.currentGallery) return;
-        
-        this.currentGallery.currentIndex = index;
-        
-        // Update thumbnail highlighting
-        if (this.$thumbnailStrip) {
-            this.$thumbnailStrip.find('.gallery-thumbnail').each((i, el) => {
-                const $thumb = $(el);
-                if (i === index) {
-                    $thumb.css({
-                        'border-color': '#fff',
-                        'opacity': '1'
-                    });
-                    
-                    // Scroll thumbnail into view
-                    const thumbLeft = $thumb.position().left;
-                    const thumbWidth = $thumb.outerWidth() || 0;
-                    const stripWidth = this.$thumbnailStrip!.width() || 0;
-                    const scrollLeft = this.$thumbnailStrip!.scrollLeft() || 0;
-                    
-                    if (thumbLeft < 0) {
-                        this.$thumbnailStrip!.scrollLeft(scrollLeft + thumbLeft - 10);
-                    } else if (thumbLeft + thumbWidth > stripWidth) {
-                        this.$thumbnailStrip!.scrollLeft(scrollLeft + (thumbLeft + thumbWidth - stripWidth) + 10);
-                    }
-                } else {
-                    $thumb.css({
-                        'border-color': 'transparent',
-                        'opacity': '0.6'
-                    });
-                }
-            });
-        }
-        
-        // Update counter using tracked element
-        const counterElement = this.createdElements.get('counter');
-        if (counterElement instanceof HTMLElement) {
-            const currentIndexElement = counterElement.querySelector('.current-index');
-            if (currentIndexElement) {
-                currentIndexElement.textContent = String(index + 1);
-            }
-        }
-    }
-
-    /**
-     * Start slideshow
-     */
-    startSlideshow(): void {
-        if (!this.currentGallery || this.currentGallery.isPlaying) return;
-        
-        // Validate gallery state before starting slideshow
-        if (!this.isGalleryOpen() || this.currentGallery.items.length === 0) {
-            console.warn('Cannot start slideshow: gallery not ready');
-            return;
-        }
-        
-        // Ensure PhotoSwipe is ready
-        if (!mediaViewer.isOpen()) {
-            console.warn('Cannot start slideshow: PhotoSwipe not ready');
-            return;
-        }
-        
-        this.currentGallery.isPlaying = true;
-        
-        // Update button icon
-        this.$slideshowControls?.find('.slideshow-play-pause i')
-            .removeClass('bx-play')
-            .addClass('bx-pause');
-        
-        // Start timer
-        this.scheduleNextSlide();
-    }
-
-    /**
-     * Stop slideshow
-     */
-    stopSlideshow(): void {
-        if (!this.currentGallery) return;
-        
-        this.currentGallery.isPlaying = false;
-        
-        // Clear timer
-        if (this.currentGallery.slideshowTimer) {
-            clearTimeout(this.currentGallery.slideshowTimer);
-            this.currentGallery.slideshowTimer = undefined;
-        }
-        
-        // Update button icon
-        this.$slideshowControls?.find('.slideshow-play-pause i')
-            .removeClass('bx-pause')
-            .addClass('bx-play');
-    }
-
-    /**
-     * Toggle slideshow play/pause
-     */
-    toggleSlideshow(): void {
-        if (!this.currentGallery) return;
-        
-        if (this.currentGallery.isPlaying) {
-            this.stopSlideshow();
-        } else {
-            this.startSlideshow();
-        }
-    }
-
-    /**
-     * Schedule next slide in slideshow
-     */
-    private scheduleNextSlide(): void {
-        if (!this.currentGallery || !this.currentGallery.isPlaying) return;
-        
-        // Clear any existing timer
-        if (this.currentGallery.slideshowTimer) {
-            clearTimeout(this.currentGallery.slideshowTimer);
-        }
-        
-        this.currentGallery.slideshowTimer = window.setTimeout(() => {
-            if (!this.currentGallery || !this.currentGallery.isPlaying) return;
-            
-            // Go to next slide
-            const nextIndex = (this.currentGallery.currentIndex + 1) % this.currentGallery.items.length;
-            this.goToSlide(nextIndex);
-            
-            // Schedule next transition
-            this.scheduleNextSlide();
-        }, this.currentGallery.config.slideInterval);
-    }
-
-    /**
-     * Update slideshow interval
-     */
-    updateSlideshowInterval(interval: number): void {
-        if (!this.currentGallery) return;
-        
-        this.currentGallery.config.slideInterval = interval;
-        
-        // Restart slideshow with new interval if playing
-        if (this.currentGallery.isPlaying) {
-            this.stopSlideshow();
-            this.startSlideshow();
-        }
-    }
-
-    /**
-     * Go to specific slide
-     */
-    goToSlide(index: number): void {
-        if (!this.currentGallery) return;
-        
-        if (index >= 0 && index < this.currentGallery.items.length) {
-            mediaViewer.goTo(index);
-        }
-    }
-
-    /**
-     * Navigate to next slide
-     */
-    nextSlide(): void {
-        mediaViewer.next();
-    }
-
-    /**
-     * Navigate to previous slide
-     */
-    previousSlide(): void {
-        mediaViewer.prev();
-    }
-
-    /**
-     * Close gallery
-     */
-    closeGallery(): void {
-        mediaViewer.close();
-    }
-
-    /**
-     * Check if gallery is open
-     */
-    isGalleryOpen(): boolean {
-        return this.currentGallery !== null && mediaViewer.isOpen();
-    }
-
-    /**
-     * Get current gallery state
-     */
-    getGalleryState(): GalleryState | null {
-        return this.currentGallery;
-    }
-
-    /**
-     * Resolve image source URL
-     */
-    private resolveImageSrc(src: string, noteId: string): string {
-        // Handle different image source formats
-        if (src.startsWith('http://') || src.startsWith('https://')) {
-            return src;
-        }
-        
-        if (src.startsWith('api/images/')) {
-            return `/${src}`;
-        }
-        
-        if (src.startsWith('/')) {
-            return src;
-        }
-        
-        // Assume it's a note ID or attachment reference
-        return `/api/images/${noteId}/${src}`;
-    }
-
-    /**
-     * Cleanup resources
-     */
-    cleanup(): void {
-        // Clear any pending timeouts
-        if (this.setupTimeout) {
-            clearTimeout(this.setupTimeout);
-            this.setupTimeout = undefined;
-        }
-        
-        this.closeGallery();
-        
-        // Ensure all elements are removed
-        this.createdElements.forEach((element) => {
-            if (element instanceof HTMLElement) {
-                element.remove();
-            } else if (element instanceof $) {
-                element.remove();
-            }
-        });
-        this.createdElements.clear();
-        
-        this.slideshowCallbacks.clear();
-        this.currentGallery = null;
-    }
-}
-
-// Export singleton instance
-export default GalleryManager.getInstance();

apps/client/src/services/glob.ts

@@ -20,9 +20,6 @@ function setupGlobs() {
     window.glob.froca = froca;
     window.glob.treeCache = froca; // compatibility for CKEditor builds for a while
 
-    // for CKEditor integration (button on block toolbar)
-    window.glob.importMarkdownInline = async () => appContext.triggerCommand("importMarkdownInline");
-
     window.onerror = function (msg, url, lineNo, columnNo, error) {
         const string = String(msg).toLowerCase();
 

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

@@ -6,7 +6,7 @@ import { describe, expect, it } from "vitest";
 describe("i18n", () => {
     it("translations are valid JSON", () => {
         for (const locale of LOCALES) {
-            if (locale.contentOnly) {
+            if (locale.contentOnly || locale.id === "en_rtl") {
                 continue;
             }
 

apps/client/src/services/i18n.ts

@@ -3,6 +3,7 @@ import i18next from "i18next";
 import i18nextHttpBackend from "i18next-http-backend";
 import server from "./server.js";
 import type { Locale } from "@triliumnext/commons";
+import { initReactI18next } from "react-i18next";
 
 let locales: Locale[] | null;
 
@@ -16,6 +17,7 @@ export async function initLocale() {
 
     locales = await server.get<Locale[]>("options/locales");
 
+    i18next.use(initReactI18next);
     await i18next.use(i18nextHttpBackend).init({
         lng: locale,
         fallbackLng: "en",

apps/client/src/services/image.ts

@@ -1,7 +1,7 @@
 import { t } from "./i18n.js";
 import toastService, { showError } from "./toast.js";
 
-function copyImageReferenceToClipboard($imageWrapper: JQuery<HTMLElement>) {
+export function copyImageReferenceToClipboard($imageWrapper: JQuery<HTMLElement>) {
     try {
         $imageWrapper.attr("contenteditable", "true");
         selectImage($imageWrapper.get(0));

apps/client/src/services/image_annotations.ts

@@ -1,597 +0,0 @@
-/**
- * Image Annotations Module for PhotoSwipe
- * Provides ability to add, display, and manage annotations on images
- */
-
-import froca from './froca.js';
-import server from './server.js';
-import type FNote from '../entities/fnote.js';
-import type FAttribute from '../entities/fattribute.js';
-import { ImageValidator, withErrorBoundary, ImageError, ImageErrorType } from './image_error_handler.js';
-
-/**
- * Annotation position and data
- */
-export interface ImageAnnotation {
-    id: string;
-    noteId: string;
-    x: number; // Percentage from left (0-100)
-    y: number; // Percentage from top (0-100)
-    text: string;
-    author?: string;
-    created: Date;
-    modified?: Date;
-    color?: string;
-    icon?: string;
-    type?: 'comment' | 'marker' | 'region';
-    width?: number; // For region type
-    height?: number; // For region type
-}
-
-/**
- * Annotation configuration
- */
-export interface AnnotationConfig {
-    enableAnnotations: boolean;
-    showByDefault: boolean;
-    allowEditing: boolean;
-    defaultColor: string;
-    defaultIcon: string;
-}
-
-/**
- * ImageAnnotationsService manages image annotations using Trilium's attribute system
- */
-class ImageAnnotationsService {
-    private static instance: ImageAnnotationsService;
-    private activeAnnotations: Map<string, ImageAnnotation[]> = new Map();
-    private annotationElements: Map<string, HTMLElement> = new Map();
-    private isEditMode: boolean = false;
-    private selectedAnnotation: ImageAnnotation | null = null;
-    
-    private config: AnnotationConfig = {
-        enableAnnotations: true,
-        showByDefault: true,
-        allowEditing: true,
-        defaultColor: '#ffeb3b',
-        defaultIcon: 'bx-comment'
-    };
-    
-    // Annotation attribute prefix in Trilium
-    private readonly ANNOTATION_PREFIX = 'imageAnnotation';
-
-    private constructor() {}
-
-    static getInstance(): ImageAnnotationsService {
-        if (!ImageAnnotationsService.instance) {
-            ImageAnnotationsService.instance = new ImageAnnotationsService();
-        }
-        return ImageAnnotationsService.instance;
-    }
-
-    /**
-     * Load annotations for an image note
-     */
-    async loadAnnotations(noteId: string): Promise<ImageAnnotation[]> {
-        return await withErrorBoundary(async () => {
-            // Validate note ID
-            if (!noteId || typeof noteId !== 'string') {
-                throw new ImageError(
-                    ImageErrorType.INVALID_INPUT,
-                    'Invalid note ID provided'
-                );
-            }
-            const note = await froca.getNote(noteId);
-            if (!note) return [];
-
-            const attributes = note.getAttributes();
-            const annotations: ImageAnnotation[] = [];
-
-            // Parse annotation attributes
-            for (const attr of attributes) {
-                if (attr.name.startsWith(this.ANNOTATION_PREFIX)) {
-                    try {
-                        const annotationData = JSON.parse(attr.value);
-                        annotations.push({
-                            ...annotationData,
-                            id: attr.attributeId,
-                            noteId: noteId,
-                            created: new Date(annotationData.created),
-                            modified: annotationData.modified ? new Date(annotationData.modified) : undefined
-                        });
-                    } catch (error) {
-                        console.error('Failed to parse annotation:', error);
-                    }
-                }
-            }
-
-            // Sort by creation date
-            annotations.sort((a, b) => a.created.getTime() - b.created.getTime());
-            
-            this.activeAnnotations.set(noteId, annotations);
-            return annotations;
-        }) || [];
-    }
-
-    /**
-     * Save a new annotation
-     */
-    async saveAnnotation(annotation: Omit<ImageAnnotation, 'id' | 'created'>): Promise<ImageAnnotation> {
-        return await withErrorBoundary(async () => {
-            // Validate annotation data
-            if (!annotation.text || !annotation.noteId) {
-                throw new ImageError(
-                    ImageErrorType.INVALID_INPUT,
-                    'Invalid annotation data'
-                );
-            }
-            
-            // Sanitize text
-            annotation.text = this.sanitizeText(annotation.text);
-            const note = await froca.getNote(annotation.noteId);
-            if (!note) {
-                throw new Error('Note not found');
-            }
-
-            const newAnnotation: ImageAnnotation = {
-                ...annotation,
-                id: this.generateId(),
-                created: new Date()
-            };
-
-            // Save as note attribute
-            const attributeName = `${this.ANNOTATION_PREFIX}_${newAnnotation.id}`;
-            const attributeValue = JSON.stringify({
-                x: newAnnotation.x,
-                y: newAnnotation.y,
-                text: newAnnotation.text,
-                author: newAnnotation.author,
-                created: newAnnotation.created.toISOString(),
-                color: newAnnotation.color,
-                icon: newAnnotation.icon,
-                type: newAnnotation.type,
-                width: newAnnotation.width,
-                height: newAnnotation.height
-            });
-
-            await server.put(`notes/${annotation.noteId}/attributes`, {
-                attributes: [{
-                    type: 'label',
-                    name: attributeName,
-                    value: attributeValue
-                }]
-            });
-
-            // Update cache
-            const annotations = this.activeAnnotations.get(annotation.noteId) || [];
-            annotations.push(newAnnotation);
-            this.activeAnnotations.set(annotation.noteId, annotations);
-
-            return newAnnotation;
-        }) as Promise<ImageAnnotation>;
-    }
-
-    /**
-     * Update an existing annotation
-     */
-    async updateAnnotation(annotation: ImageAnnotation): Promise<void> {
-        try {
-            const note = await froca.getNote(annotation.noteId);
-            if (!note) {
-                throw new Error('Note not found');
-            }
-
-            annotation.modified = new Date();
-
-            // Update attribute
-            const attributeName = `${this.ANNOTATION_PREFIX}_${annotation.id}`;
-            const attributeValue = JSON.stringify({
-                x: annotation.x,
-                y: annotation.y,
-                text: annotation.text,
-                author: annotation.author,
-                created: annotation.created.toISOString(),
-                modified: annotation.modified.toISOString(),
-                color: annotation.color,
-                icon: annotation.icon,
-                type: annotation.type,
-                width: annotation.width,
-                height: annotation.height
-            });
-
-            // Find and update the attribute
-            const attributes = note.getAttributes();
-            const attr = attributes.find(a => a.name === attributeName);
-            
-            if (attr) {
-                await server.put(`notes/${annotation.noteId}/attributes/${attr.attributeId}`, {
-                    value: attributeValue
-                });
-            }
-
-            // Update cache
-            const annotations = this.activeAnnotations.get(annotation.noteId) || [];
-            const index = annotations.findIndex(a => a.id === annotation.id);
-            if (index !== -1) {
-                annotations[index] = annotation;
-                this.activeAnnotations.set(annotation.noteId, annotations);
-            }
-        } catch (error) {
-            console.error('Failed to update annotation:', error);
-            throw error;
-        }
-    }
-
-    /**
-     * Delete an annotation
-     */
-    async deleteAnnotation(noteId: string, annotationId: string): Promise<void> {
-        try {
-            const note = await froca.getNote(noteId);
-            if (!note) return;
-
-            const attributeName = `${this.ANNOTATION_PREFIX}_${annotationId}`;
-            const attributes = note.getAttributes();
-            const attr = attributes.find(a => a.name === attributeName);
-            
-            if (attr) {
-                await server.remove(`notes/${noteId}/attributes/${attr.attributeId}`);
-            }
-
-            // Update cache
-            const annotations = this.activeAnnotations.get(noteId) || [];
-            const filtered = annotations.filter(a => a.id !== annotationId);
-            this.activeAnnotations.set(noteId, filtered);
-
-            // Remove element if exists
-            const element = this.annotationElements.get(annotationId);
-            if (element) {
-                element.remove();
-                this.annotationElements.delete(annotationId);
-            }
-        } catch (error) {
-            console.error('Failed to delete annotation:', error);
-            throw error;
-        }
-    }
-
-    /**
-     * Render annotations on an image container
-     */
-    renderAnnotations(container: HTMLElement, noteId: string, imageElement: HTMLImageElement): void {
-        const annotations = this.activeAnnotations.get(noteId) || [];
-        
-        // Clear existing annotation elements
-        this.clearAnnotationElements();
-
-        // Create annotation overlay container
-        const overlay = this.createOverlayContainer(container, imageElement);
-
-        // Render each annotation
-        annotations.forEach(annotation => {
-            const element = this.createAnnotationElement(annotation, overlay);
-            this.annotationElements.set(annotation.id, element);
-        });
-
-        // Add click handler for creating new annotations
-        if (this.config.allowEditing && this.isEditMode) {
-            this.setupAnnotationCreation(overlay, noteId);
-        }
-        
-        // Add ARIA attributes for accessibility
-        overlay.setAttribute('role', 'img');
-        overlay.setAttribute('aria-label', 'Image with annotations');
-    }
-
-    /**
-     * Create overlay container for annotations
-     */
-    private createOverlayContainer(container: HTMLElement, imageElement: HTMLImageElement): HTMLElement {
-        let overlay = container.querySelector('.annotation-overlay') as HTMLElement;
-        
-        if (!overlay) {
-            overlay = document.createElement('div');
-            overlay.className = 'annotation-overlay';
-            overlay.style.cssText = `
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                pointer-events: ${this.isEditMode ? 'auto' : 'none'};
-                z-index: 10;
-            `;
-            
-            // Position overlay over the image
-            const rect = imageElement.getBoundingClientRect();
-            const containerRect = container.getBoundingClientRect();
-            overlay.style.top = `${rect.top - containerRect.top}px`;
-            overlay.style.left = `${rect.left - containerRect.left}px`;
-            overlay.style.width = `${rect.width}px`;
-            overlay.style.height = `${rect.height}px`;
-            
-            container.appendChild(overlay);
-        }
-
-        return overlay;
-    }
-
-    /**
-     * Create annotation element
-     */
-    private createAnnotationElement(annotation: ImageAnnotation, container: HTMLElement): HTMLElement {
-        const element = document.createElement('div');
-        element.className = `annotation-marker annotation-${annotation.type || 'comment'}`;
-        element.dataset.annotationId = annotation.id;
-        
-        // Position based on percentage
-        element.style.cssText = `
-            position: absolute;
-            left: ${annotation.x}%;
-            top: ${annotation.y}%;
-            transform: translate(-50%, -50%);
-            cursor: pointer;
-            z-index: 20;
-            pointer-events: auto;
-        `;
-
-        // Create marker based on type
-        if (annotation.type === 'region') {
-            // Region annotation
-            element.style.cssText += `
-                width: ${annotation.width || 20}%;
-                height: ${annotation.height || 20}%;
-                border: 2px solid ${annotation.color || this.config.defaultColor};
-                background: ${annotation.color || this.config.defaultColor}33;
-                border-radius: 4px;
-            `;
-        } else {
-            // Point annotation
-            const marker = document.createElement('div');
-            marker.style.cssText = `
-                width: 24px;
-                height: 24px;
-                background: ${annotation.color || this.config.defaultColor};
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-            `;
-            
-            const icon = document.createElement('i');
-            icon.className = `bx ${annotation.icon || this.config.defaultIcon}`;
-            icon.style.cssText = `
-                color: #333;
-                font-size: 14px;
-            `;
-            
-            marker.appendChild(icon);
-            element.appendChild(marker);
-            
-            // Add ARIA attributes for accessibility
-            element.setAttribute('role', 'button');
-            element.setAttribute('aria-label', `Annotation: ${this.sanitizeText(annotation.text)}`);
-            element.setAttribute('tabindex', '0');
-        }
-
-        // Add tooltip
-        const tooltip = document.createElement('div');
-        tooltip.className = 'annotation-tooltip';
-        tooltip.style.cssText = `
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0,0,0,0.9);
-            color: white;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-size: 12px;
-            white-space: nowrap;
-            max-width: 200px;
-            pointer-events: none;
-            opacity: 0;
-            transition: opacity 0.2s;
-            margin-bottom: 8px;
-        `;
-        // Use textContent to prevent XSS
-        tooltip.textContent = this.sanitizeText(annotation.text);
-        element.appendChild(tooltip);
-
-        // Show tooltip on hover
-        element.addEventListener('mouseenter', () => {
-            tooltip.style.opacity = '1';
-        });
-        
-        element.addEventListener('mouseleave', () => {
-            tooltip.style.opacity = '0';
-        });
-
-        // Handle click for editing
-        element.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.selectAnnotation(annotation);
-        });
-
-        container.appendChild(element);
-        return element;
-    }
-
-    /**
-     * Setup annotation creation on click
-     */
-    private setupAnnotationCreation(overlay: HTMLElement, noteId: string): void {
-        overlay.addEventListener('click', async (e) => {
-            if (!this.isEditMode) return;
-            
-            const rect = overlay.getBoundingClientRect();
-            const x = ((e.clientX - rect.left) / rect.width) * 100;
-            const y = ((e.clientY - rect.top) / rect.height) * 100;
-            
-            // Show annotation creation dialog
-            const text = prompt('Enter annotation text:');
-            if (text) {
-                await this.saveAnnotation({
-                    noteId,
-                    x,
-                    y,
-                    text,
-                    author: 'current_user', // TODO: Get from session
-                    type: 'comment'
-                });
-                
-                // Reload annotations
-                await this.loadAnnotations(noteId);
-                
-                // Re-render
-                const imageElement = overlay.parentElement?.querySelector('img') as HTMLImageElement;
-                if (imageElement && overlay.parentElement) {
-                    this.renderAnnotations(overlay.parentElement, noteId, imageElement);
-                }
-            }
-        });
-    }
-
-    /**
-     * Select an annotation for editing
-     */
-    private selectAnnotation(annotation: ImageAnnotation): void {
-        this.selectedAnnotation = annotation;
-        
-        // Highlight selected annotation
-        this.annotationElements.forEach((element, id) => {
-            if (id === annotation.id) {
-                element.classList.add('selected');
-                element.style.outline = '2px solid #2196F3';
-            } else {
-                element.classList.remove('selected');
-                element.style.outline = 'none';
-            }
-        });
-        
-        // Show edit options
-        if (this.isEditMode) {
-            this.showEditDialog(annotation);
-        }
-    }
-
-    /**
-     * Show edit dialog for annotation
-     */
-    private showEditDialog(annotation: ImageAnnotation): void {
-        // Simple implementation - could be replaced with a proper modal
-        const newText = prompt('Edit annotation:', annotation.text);
-        if (newText !== null) {
-            annotation.text = newText;
-            this.updateAnnotation(annotation);
-            
-            // Update tooltip with sanitized text
-            const element = this.annotationElements.get(annotation.id);
-            if (element) {
-                const tooltip = element.querySelector('.annotation-tooltip');
-                if (tooltip) {
-                    // Use textContent to prevent XSS
-                    tooltip.textContent = this.sanitizeText(newText);
-                }
-            }
-        }
-    }
-
-    /**
-     * Toggle edit mode
-     */
-    toggleEditMode(): void {
-        this.isEditMode = !this.isEditMode;
-        
-        // Update overlay pointer events
-        document.querySelectorAll('.annotation-overlay').forEach(overlay => {
-            (overlay as HTMLElement).style.pointerEvents = this.isEditMode ? 'auto' : 'none';
-        });
-    }
-
-    /**
-     * Clear all annotation elements
-     */
-    private clearAnnotationElements(): void {
-        this.annotationElements.forEach(element => element.remove());
-        this.annotationElements.clear();
-    }
-
-    /**
-     * Generate unique ID
-     */
-    private generateId(): string {
-        return `ann_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    }
-
-    /**
-     * Export annotations as JSON
-     */
-    exportAnnotations(noteId: string): string {
-        const annotations = this.activeAnnotations.get(noteId) || [];
-        return JSON.stringify(annotations, null, 2);
-    }
-
-    /**
-     * Import annotations from JSON
-     */
-    async importAnnotations(noteId: string, json: string): Promise<void> {
-        try {
-            const annotations = JSON.parse(json) as ImageAnnotation[];
-            
-            for (const annotation of annotations) {
-                await this.saveAnnotation({
-                    noteId,
-                    x: annotation.x,
-                    y: annotation.y,
-                    text: annotation.text,
-                    author: annotation.author,
-                    color: annotation.color,
-                    icon: annotation.icon,
-                    type: annotation.type,
-                    width: annotation.width,
-                    height: annotation.height
-                });
-            }
-            
-            await this.loadAnnotations(noteId);
-        } catch (error) {
-            console.error('Failed to import annotations:', error);
-            throw error;
-        }
-    }
-
-    /**
-     * Sanitize text to prevent XSS
-     */
-    private sanitizeText(text: string): string {
-        if (!text) return '';
-        
-        // Remove any HTML tags and dangerous characters
-        const div = document.createElement('div');
-        div.textContent = text;
-        
-        // Additional validation
-        const sanitized = div.textContent || '';
-        
-        // Remove any remaining special characters that could be dangerous
-        return sanitized
-            .replace(/<script[^>]*>.*?<\/script>/gi, '')
-            .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
-            .replace(/javascript:/gi, '')
-            .replace(/on\w+\s*=/gi, '');
-    }
-    
-    /**
-     * Cleanup resources
-     */
-    cleanup(): void {
-        this.clearAnnotationElements();
-        this.activeAnnotations.clear();
-        this.selectedAnnotation = null;
-        this.isEditMode = false;
-    }
-}
-
-export default ImageAnnotationsService.getInstance();

apps/client/src/services/image_comparison.ts

@@ -1,877 +0,0 @@
-/**
- * Image Comparison Module for Trilium Notes
- * Provides side-by-side and overlay comparison modes for images
- */
-
-import mediaViewer from './media_viewer.js';
-import utils from './utils.js';
-
-/**
- * Comparison mode types
- */
-export type ComparisonMode = 'side-by-side' | 'overlay' | 'swipe' | 'difference';
-
-/**
- * Image comparison configuration
- */
-export interface ComparisonConfig {
-    mode: ComparisonMode;
-    syncZoom: boolean;
-    syncPan: boolean;
-    showLabels: boolean;
-    swipePosition?: number; // For swipe mode (0-100)
-    opacity?: number; // For overlay mode (0-1)
-    highlightDifferences?: boolean; // For difference mode
-}
-
-/**
- * Comparison state
- */
-interface ComparisonState {
-    leftImage: ComparisonImage;
-    rightImage: ComparisonImage;
-    config: ComparisonConfig;
-    container?: HTMLElement;
-    isActive: boolean;
-}
-
-/**
- * Image data for comparison
- */
-export interface ComparisonImage {
-    src: string;
-    title?: string;
-    noteId?: string;
-    width?: number;
-    height?: number;
-}
-
-/**
- * ImageComparisonService provides various comparison modes for images
- */
-class ImageComparisonService {
-    private static instance: ImageComparisonService;
-    private currentComparison: ComparisonState | null = null;
-    private comparisonContainer?: HTMLElement;
-    private leftCanvas?: HTMLCanvasElement;
-    private rightCanvas?: HTMLCanvasElement;
-    private leftContext?: CanvasRenderingContext2D;
-    private rightContext?: CanvasRenderingContext2D;
-    private swipeHandle?: HTMLElement;
-    private isDraggingSwipe: boolean = false;
-    private currentZoom: number = 1;
-    private panX: number = 0;
-    private panY: number = 0;
-    
-    private defaultConfig: ComparisonConfig = {
-        mode: 'side-by-side',
-        syncZoom: true,
-        syncPan: true,
-        showLabels: true,
-        swipePosition: 50,
-        opacity: 0.5,
-        highlightDifferences: false
-    };
-
-    private constructor() {}
-
-    static getInstance(): ImageComparisonService {
-        if (!ImageComparisonService.instance) {
-            ImageComparisonService.instance = new ImageComparisonService();
-        }
-        return ImageComparisonService.instance;
-    }
-
-    /**
-     * Start image comparison
-     */
-    async startComparison(
-        leftImage: ComparisonImage,
-        rightImage: ComparisonImage,
-        container: HTMLElement,
-        config?: Partial<ComparisonConfig>
-    ): Promise<void> {
-        try {
-            // Close any existing comparison
-            this.closeComparison();
-
-            // Merge configuration
-            const finalConfig = { ...this.defaultConfig, ...config };
-
-            // Initialize state
-            this.currentComparison = {
-                leftImage,
-                rightImage,
-                config: finalConfig,
-                container,
-                isActive: true
-            };
-
-            // Load images
-            await this.loadImages(leftImage, rightImage);
-
-            // Create comparison UI based on mode
-            switch (finalConfig.mode) {
-                case 'side-by-side':
-                    await this.createSideBySideComparison(container);
-                    break;
-                case 'overlay':
-                    await this.createOverlayComparison(container);
-                    break;
-                case 'swipe':
-                    await this.createSwipeComparison(container);
-                    break;
-                case 'difference':
-                    await this.createDifferenceComparison(container);
-                    break;
-            }
-
-            // Add controls
-            this.addComparisonControls(container);
-        } catch (error) {
-            console.error('Failed to start image comparison:', error);
-            this.closeComparison();
-            throw error;
-        }
-    }
-
-    /**
-     * Load images and get dimensions
-     */
-    private async loadImages(leftImage: ComparisonImage, rightImage: ComparisonImage): Promise<void> {
-        const loadImage = (src: string): Promise<HTMLImageElement> => {
-            return new Promise((resolve, reject) => {
-                const img = new Image();
-                img.onload = () => resolve(img);
-                img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
-                img.src = src;
-            });
-        };
-
-        const [leftImg, rightImg] = await Promise.all([
-            loadImage(leftImage.src),
-            loadImage(rightImage.src)
-        ]);
-
-        // Update dimensions
-        leftImage.width = leftImg.naturalWidth;
-        leftImage.height = leftImg.naturalHeight;
-        rightImage.width = rightImg.naturalWidth;
-        rightImage.height = rightImg.naturalHeight;
-    }
-
-    /**
-     * Create side-by-side comparison
-     */
-    private async createSideBySideComparison(container: HTMLElement): Promise<void> {
-        if (!this.currentComparison) return;
-
-        // Clear container
-        container.innerHTML = '';
-        container.style.cssText = `
-            display: flex;
-            width: 100%;
-            height: 100%;
-            position: relative;
-            background: #1a1a1a;
-        `;
-
-        // Create left panel
-        const leftPanel = document.createElement('div');
-        leftPanel.className = 'comparison-panel comparison-left';
-        leftPanel.style.cssText = `
-            flex: 1;
-            position: relative;
-            overflow: hidden;
-            border-right: 2px solid #333;
-        `;
-
-        // Create right panel
-        const rightPanel = document.createElement('div');
-        rightPanel.className = 'comparison-panel comparison-right';
-        rightPanel.style.cssText = `
-            flex: 1;
-            position: relative;
-            overflow: hidden;
-        `;
-
-        // Add images
-        const leftImg = await this.createImageElement(this.currentComparison.leftImage);
-        const rightImg = await this.createImageElement(this.currentComparison.rightImage);
-        
-        leftPanel.appendChild(leftImg);
-        rightPanel.appendChild(rightImg);
-
-        // Add labels if enabled
-        if (this.currentComparison.config.showLabels) {
-            this.addImageLabel(leftPanel, this.currentComparison.leftImage.title || 'Image 1');
-            this.addImageLabel(rightPanel, this.currentComparison.rightImage.title || 'Image 2');
-        }
-
-        container.appendChild(leftPanel);
-        container.appendChild(rightPanel);
-
-        // Setup synchronized zoom and pan if enabled
-        if (this.currentComparison.config.syncZoom || this.currentComparison.config.syncPan) {
-            this.setupSynchronizedControls(leftPanel, rightPanel);
-        }
-    }
-
-    /**
-     * Create overlay comparison
-     */
-    private async createOverlayComparison(container: HTMLElement): Promise<void> {
-        if (!this.currentComparison) return;
-
-        container.innerHTML = '';
-        container.style.cssText = `
-            position: relative;
-            width: 100%;
-            height: 100%;
-            background: #1a1a1a;
-            overflow: hidden;
-        `;
-
-        // Create base image
-        const baseImg = await this.createImageElement(this.currentComparison.leftImage);
-        baseImg.style.position = 'absolute';
-        baseImg.style.zIndex = '1';
-        
-        // Create overlay image
-        const overlayImg = await this.createImageElement(this.currentComparison.rightImage);
-        overlayImg.style.position = 'absolute';
-        overlayImg.style.zIndex = '2';
-        overlayImg.style.opacity = String(this.currentComparison.config.opacity || 0.5);
-        
-        container.appendChild(baseImg);
-        container.appendChild(overlayImg);
-
-        // Add opacity slider
-        this.addOpacityControl(container, overlayImg);
-
-        // Add labels
-        if (this.currentComparison.config.showLabels) {
-            const labelContainer = document.createElement('div');
-            labelContainer.style.cssText = `
-                position: absolute;
-                top: 10px;
-                left: 10px;
-                z-index: 10;
-                display: flex;
-                gap: 10px;
-            `;
-            
-            const baseLabel = this.createLabel(this.currentComparison.leftImage.title || 'Base', '#4CAF50');
-            const overlayLabel = this.createLabel(this.currentComparison.rightImage.title || 'Overlay', '#2196F3');
-            
-            labelContainer.appendChild(baseLabel);
-            labelContainer.appendChild(overlayLabel);
-            container.appendChild(labelContainer);
-        }
-    }
-
-    /**
-     * Create swipe comparison
-     */
-    private async createSwipeComparison(container: HTMLElement): Promise<void> {
-        if (!this.currentComparison) return;
-
-        container.innerHTML = '';
-        container.style.cssText = `
-            position: relative;
-            width: 100%;
-            height: 100%;
-            background: #1a1a1a;
-            overflow: hidden;
-            cursor: ew-resize;
-        `;
-
-        // Create images
-        const leftImg = await this.createImageElement(this.currentComparison.leftImage);
-        const rightImg = await this.createImageElement(this.currentComparison.rightImage);
-        
-        leftImg.style.position = 'absolute';
-        leftImg.style.zIndex = '1';
-        
-        // Create clipping container for right image
-        const clipContainer = document.createElement('div');
-        clipContainer.className = 'swipe-clip-container';
-        clipContainer.style.cssText = `
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: ${this.currentComparison.config.swipePosition}%;
-            height: 100%;
-            overflow: hidden;
-            z-index: 2;
-        `;
-        
-        rightImg.style.position = 'absolute';
-        clipContainer.appendChild(rightImg);
-        
-        // Create swipe handle
-        this.swipeHandle = document.createElement('div');
-        this.swipeHandle.className = 'swipe-handle';
-        this.swipeHandle.style.cssText = `
-            position: absolute;
-            top: 0;
-            left: ${this.currentComparison.config.swipePosition}%;
-            width: 4px;
-            height: 100%;
-            background: white;
-            cursor: ew-resize;
-            z-index: 3;
-            transform: translateX(-50%);
-            box-shadow: 0 0 10px rgba(0,0,0,0.5);
-        `;
-
-        // Add handle icon
-        const handleIcon = document.createElement('div');
-        handleIcon.style.cssText = `
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 40px;
-            height: 40px;
-            background: white;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-        `;
-        handleIcon.innerHTML = '<i class="bx bx-move-horizontal" style="font-size: 24px; color: #333;"></i>';
-        this.swipeHandle.appendChild(handleIcon);
-
-        container.appendChild(leftImg);
-        container.appendChild(clipContainer);
-        container.appendChild(this.swipeHandle);
-
-        // Setup swipe interaction
-        this.setupSwipeInteraction(container, clipContainer);
-
-        // Add labels
-        if (this.currentComparison.config.showLabels) {
-            this.addSwipeLabels(container);
-        }
-    }
-
-    /**
-     * Create difference comparison using canvas
-     */
-    private async createDifferenceComparison(container: HTMLElement): Promise<void> {
-        if (!this.currentComparison) return;
-
-        container.innerHTML = '';
-        container.style.cssText = `
-            position: relative;
-            width: 100%;
-            height: 100%;
-            background: #1a1a1a;
-            overflow: hidden;
-        `;
-
-        // Create canvas for difference visualization
-        const canvas = document.createElement('canvas');
-        canvas.className = 'difference-canvas';
-        const ctx = canvas.getContext('2d');
-        
-        if (!ctx) {
-            throw new Error('Failed to get canvas context');
-        }
-
-        // Load images
-        const leftImg = new Image();
-        const rightImg = new Image();
-        
-        await Promise.all([
-            new Promise((resolve) => {
-                leftImg.onload = resolve;
-                leftImg.src = this.currentComparison!.leftImage.src;
-            }),
-            new Promise((resolve) => {
-                rightImg.onload = resolve;
-                rightImg.src = this.currentComparison!.rightImage.src;
-            })
-        ]);
-
-        // Set canvas size
-        const maxWidth = Math.max(leftImg.width, rightImg.width);
-        const maxHeight = Math.max(leftImg.height, rightImg.height);
-        canvas.width = maxWidth;
-        canvas.height = maxHeight;
-
-        // Calculate difference
-        this.calculateImageDifference(ctx, leftImg, rightImg, maxWidth, maxHeight);
-
-        // Style canvas
-        canvas.style.cssText = `
-            max-width: 100%;
-            max-height: 100%;
-            object-fit: contain;
-        `;
-
-        container.appendChild(canvas);
-
-        // Add difference statistics
-        this.addDifferenceStatistics(container, ctx, maxWidth, maxHeight);
-    }
-
-    /**
-     * Calculate and visualize image difference
-     */
-    private calculateImageDifference(
-        ctx: CanvasRenderingContext2D,
-        leftImg: HTMLImageElement,
-        rightImg: HTMLImageElement,
-        width: number,
-        height: number
-    ): void {
-        // Draw left image
-        ctx.drawImage(leftImg, 0, 0, width, height);
-        const leftData = ctx.getImageData(0, 0, width, height);
-
-        // Draw right image
-        ctx.clearRect(0, 0, width, height);
-        ctx.drawImage(rightImg, 0, 0, width, height);
-        const rightData = ctx.getImageData(0, 0, width, height);
-
-        // Calculate difference
-        const diffData = ctx.createImageData(width, height);
-        let totalDiff = 0;
-
-        for (let i = 0; i < leftData.data.length; i += 4) {
-            const rDiff = Math.abs(leftData.data[i] - rightData.data[i]);
-            const gDiff = Math.abs(leftData.data[i + 1] - rightData.data[i + 1]);
-            const bDiff = Math.abs(leftData.data[i + 2] - rightData.data[i + 2]);
-            
-            const avgDiff = (rDiff + gDiff + bDiff) / 3;
-            totalDiff += avgDiff;
-
-            if (this.currentComparison?.config.highlightDifferences && avgDiff > 30) {
-                // Highlight differences in red
-                diffData.data[i] = 255; // Red
-                diffData.data[i + 1] = 0; // Green
-                diffData.data[i + 2] = 0; // Blue
-                diffData.data[i + 3] = Math.min(255, avgDiff * 2); // Alpha based on difference
-            } else {
-                // Show original image with reduced opacity for non-different areas
-                diffData.data[i] = leftData.data[i];
-                diffData.data[i + 1] = leftData.data[i + 1];
-                diffData.data[i + 2] = leftData.data[i + 2];
-                diffData.data[i + 3] = avgDiff > 10 ? 255 : 128;
-            }
-        }
-
-        ctx.putImageData(diffData, 0, 0);
-    }
-
-    /**
-     * Add difference statistics overlay
-     */
-    private addDifferenceStatistics(
-        container: HTMLElement,
-        ctx: CanvasRenderingContext2D,
-        width: number,
-        height: number
-    ): void {
-        const imageData = ctx.getImageData(0, 0, width, height);
-        let changedPixels = 0;
-        const threshold = 30;
-
-        for (let i = 0; i < imageData.data.length; i += 4) {
-            const r = imageData.data[i];
-            const g = imageData.data[i + 1];
-            const b = imageData.data[i + 2];
-            
-            if (r > threshold || g > threshold || b > threshold) {
-                changedPixels++;
-            }
-        }
-
-        const totalPixels = width * height;
-        const changePercentage = ((changedPixels / totalPixels) * 100).toFixed(2);
-
-        const statsDiv = document.createElement('div');
-        statsDiv.className = 'difference-stats';
-        statsDiv.style.cssText = `
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
-            padding: 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-        `;
-        
-        statsDiv.innerHTML = `
-            <div><strong>Difference Analysis</strong></div>
-            <div>Changed pixels: ${changedPixels.toLocaleString()}</div>
-            <div>Total pixels: ${totalPixels.toLocaleString()}</div>
-            <div>Difference: ${changePercentage}%</div>
-        `;
-        
-        container.appendChild(statsDiv);
-    }
-
-    /**
-     * Create image element
-     */
-    private async createImageElement(image: ComparisonImage): Promise<HTMLImageElement> {
-        const img = document.createElement('img');
-        img.src = image.src;
-        img.alt = image.title || 'Comparison image';
-        img.style.cssText = `
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        `;
-        
-        await new Promise((resolve, reject) => {
-            img.onload = resolve;
-            img.onerror = reject;
-        });
-        
-        return img;
-    }
-
-    /**
-     * Add image label
-     */
-    private addImageLabel(container: HTMLElement, text: string): void {
-        const label = document.createElement('div');
-        label.className = 'image-label';
-        label.style.cssText = `
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 6px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-        `;
-        label.textContent = text;
-        container.appendChild(label);
-    }
-
-    /**
-     * Create label element
-     */
-    private createLabel(text: string, color: string): HTMLElement {
-        const label = document.createElement('div');
-        label.style.cssText = `
-            background: ${color};
-            color: white;
-            padding: 4px 8px;
-            border-radius: 3px;
-            font-size: 12px;
-        `;
-        label.textContent = text;
-        return label;
-    }
-
-    /**
-     * Add swipe labels
-     */
-    private addSwipeLabels(container: HTMLElement): void {
-        if (!this.currentComparison) return;
-
-        const leftLabel = document.createElement('div');
-        leftLabel.style.cssText = `
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background: rgba(76, 175, 80, 0.9);
-            color: white;
-            padding: 6px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-        `;
-        leftLabel.textContent = this.currentComparison.leftImage.title || 'Left';
-
-        const rightLabel = document.createElement('div');
-        rightLabel.style.cssText = `
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(33, 150, 243, 0.9);
-            color: white;
-            padding: 6px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-        `;
-        rightLabel.textContent = this.currentComparison.rightImage.title || 'Right';
-
-        container.appendChild(leftLabel);
-        container.appendChild(rightLabel);
-    }
-
-    /**
-     * Setup swipe interaction
-     */
-    private setupSwipeInteraction(container: HTMLElement, clipContainer: HTMLElement): void {
-        if (!this.swipeHandle) return;
-
-        let startX = 0;
-        let startPosition = this.currentComparison?.config.swipePosition || 50;
-
-        const handleMouseMove = (e: MouseEvent) => {
-            if (!this.isDraggingSwipe) return;
-            
-            const rect = container.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
-            
-            clipContainer.style.width = `${percentage}%`;
-            if (this.swipeHandle) {
-                this.swipeHandle.style.left = `${percentage}%`;
-            }
-            
-            if (this.currentComparison) {
-                this.currentComparison.config.swipePosition = percentage;
-            }
-        };
-
-        const handleMouseUp = () => {
-            this.isDraggingSwipe = false;
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-            container.style.cursor = 'default';
-        };
-
-        this.swipeHandle.addEventListener('mousedown', (e) => {
-            this.isDraggingSwipe = true;
-            startX = e.clientX;
-            startPosition = this.currentComparison?.config.swipePosition || 50;
-            container.style.cursor = 'ew-resize';
-            
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
-        });
-
-        // Also allow dragging anywhere in the container
-        container.addEventListener('mousedown', (e) => {
-            if (e.target === this.swipeHandle || (e.target as HTMLElement).parentElement === this.swipeHandle) {
-                return;
-            }
-            
-            const rect = container.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const percentage = (x / rect.width) * 100;
-            
-            clipContainer.style.width = `${percentage}%`;
-            if (this.swipeHandle) {
-                this.swipeHandle.style.left = `${percentage}%`;
-            }
-            
-            if (this.currentComparison) {
-                this.currentComparison.config.swipePosition = percentage;
-            }
-        });
-    }
-
-    /**
-     * Add opacity control for overlay mode
-     */
-    private addOpacityControl(container: HTMLElement, overlayImg: HTMLImageElement): void {
-        const control = document.createElement('div');
-        control.className = 'opacity-control';
-        control.style.cssText = `
-            position: absolute;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0, 0, 0, 0.8);
-            padding: 10px 20px;
-            border-radius: 4px;
-            z-index: 10;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        `;
-
-        const label = document.createElement('label');
-        label.textContent = 'Opacity:';
-        label.style.color = 'white';
-        label.style.fontSize = '12px';
-
-        const slider = document.createElement('input');
-        slider.type = 'range';
-        slider.min = '0';
-        slider.max = '100';
-        slider.value = String((this.currentComparison?.config.opacity || 0.5) * 100);
-        slider.style.width = '150px';
-
-        const value = document.createElement('span');
-        value.textContent = `${slider.value}%`;
-        value.style.color = 'white';
-        value.style.fontSize = '12px';
-        value.style.minWidth = '35px';
-
-        slider.addEventListener('input', () => {
-            const opacity = parseInt(slider.value) / 100;
-            overlayImg.style.opacity = String(opacity);
-            value.textContent = `${slider.value}%`;
-            
-            if (this.currentComparison) {
-                this.currentComparison.config.opacity = opacity;
-            }
-        });
-
-        control.appendChild(label);
-        control.appendChild(slider);
-        control.appendChild(value);
-        container.appendChild(control);
-    }
-
-    /**
-     * Setup synchronized controls for side-by-side mode
-     */
-    private setupSynchronizedControls(leftPanel: HTMLElement, rightPanel: HTMLElement): void {
-        const leftImg = leftPanel.querySelector('img') as HTMLImageElement;
-        const rightImg = rightPanel.querySelector('img') as HTMLImageElement;
-        
-        if (!leftImg || !rightImg) return;
-
-        // Synchronize scroll
-        if (this.currentComparison?.config.syncPan) {
-            leftPanel.addEventListener('scroll', () => {
-                rightPanel.scrollLeft = leftPanel.scrollLeft;
-                rightPanel.scrollTop = leftPanel.scrollTop;
-            });
-            
-            rightPanel.addEventListener('scroll', () => {
-                leftPanel.scrollLeft = rightPanel.scrollLeft;
-                leftPanel.scrollTop = rightPanel.scrollTop;
-            });
-        }
-
-        // Synchronize zoom with wheel events
-        if (this.currentComparison?.config.syncZoom) {
-            const handleWheel = (e: WheelEvent) => {
-                e.preventDefault();
-                
-                const delta = e.deltaY < 0 ? 1.1 : 0.9;
-                this.currentZoom = Math.max(0.5, Math.min(5, this.currentZoom * delta));
-                
-                leftImg.style.transform = `scale(${this.currentZoom})`;
-                rightImg.style.transform = `scale(${this.currentZoom})`;
-            };
-            
-            leftPanel.addEventListener('wheel', handleWheel);
-            rightPanel.addEventListener('wheel', handleWheel);
-        }
-    }
-
-    /**
-     * Add comparison controls toolbar
-     */
-    private addComparisonControls(container: HTMLElement): void {
-        const toolbar = document.createElement('div');
-        toolbar.className = 'comparison-toolbar';
-        toolbar.style.cssText = `
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(0, 0, 0, 0.8);
-            border-radius: 4px;
-            padding: 8px;
-            display: flex;
-            gap: 8px;
-            z-index: 100;
-        `;
-
-        // Mode switcher
-        const modes: ComparisonMode[] = ['side-by-side', 'overlay', 'swipe', 'difference'];
-        modes.forEach(mode => {
-            const btn = document.createElement('button');
-            btn.className = `mode-btn mode-${mode}`;
-            btn.style.cssText = `
-                background: ${this.currentComparison?.config.mode === mode ? '#2196F3' : 'rgba(255,255,255,0.1)'};
-                color: white;
-                border: none;
-                padding: 6px 10px;
-                border-radius: 3px;
-                cursor: pointer;
-                font-size: 12px;
-            `;
-            btn.textContent = mode.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase());
-            
-            btn.addEventListener('click', async () => {
-                if (this.currentComparison && this.currentComparison.container) {
-                    this.currentComparison.config.mode = mode;
-                    await this.startComparison(
-                        this.currentComparison.leftImage,
-                        this.currentComparison.rightImage,
-                        this.currentComparison.container,
-                        this.currentComparison.config
-                    );
-                }
-            });
-            
-            toolbar.appendChild(btn);
-        });
-
-        // Close button
-        const closeBtn = document.createElement('button');
-        closeBtn.style.cssText = `
-            background: rgba(255,0,0,0.5);
-            color: white;
-            border: none;
-            padding: 6px 10px;
-            border-radius: 3px;
-            cursor: pointer;
-            font-size: 12px;
-            margin-left: 10px;
-        `;
-        closeBtn.textContent = 'Close';
-        closeBtn.addEventListener('click', () => this.closeComparison());
-        
-        toolbar.appendChild(closeBtn);
-        container.appendChild(toolbar);
-    }
-
-    /**
-     * Close comparison
-     */
-    closeComparison(): void {
-        if (this.currentComparison?.container) {
-            this.currentComparison.container.innerHTML = '';
-        }
-        
-        this.currentComparison = null;
-        this.comparisonContainer = undefined;
-        this.leftCanvas = undefined;
-        this.rightCanvas = undefined;
-        this.leftContext = undefined;
-        this.rightContext = undefined;
-        this.swipeHandle = undefined;
-        this.isDraggingSwipe = false;
-        this.currentZoom = 1;
-        this.panX = 0;
-        this.panY = 0;
-    }
-
-    /**
-     * Check if comparison is active
-     */
-    isComparisonActive(): boolean {
-        return this.currentComparison?.isActive || false;
-    }
-
-    /**
-     * Get current comparison state
-     */
-    getComparisonState(): ComparisonState | null {
-        return this.currentComparison;
-    }
-}
-
-export default ImageComparisonService.getInstance();

apps/client/src/services/image_editor.ts

@@ -1,874 +0,0 @@
-/**
- * Basic Image Editor Module for Trilium Notes
- * Provides non-destructive image editing capabilities
- */
-
-import server from './server.js';
-import toastService from './toast.js';
-import { ImageValidator, withErrorBoundary, MemoryMonitor, ImageError, ImageErrorType } from './image_error_handler.js';
-
-/**
- * Edit operation types
- */
-export type EditOperation = 
-    | 'rotate'
-    | 'crop'
-    | 'brightness'
-    | 'contrast'
-    | 'saturation'
-    | 'blur'
-    | 'sharpen';
-
-/**
- * Edit history entry
- */
-export interface EditHistoryEntry {
-    operation: EditOperation;
-    params: any;
-    timestamp: Date;
-}
-
-/**
- * Crop area definition
- */
-export interface CropArea {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-
-/**
- * Editor state
- */
-interface EditorState {
-    originalImage: HTMLImageElement | null;
-    currentImage: HTMLImageElement | null;
-    canvas: HTMLCanvasElement;
-    context: CanvasRenderingContext2D;
-    history: EditHistoryEntry[];
-    historyIndex: number;
-    isEditing: boolean;
-}
-
-/**
- * Filter parameters
- */
-export interface FilterParams {
-    brightness?: number; // -100 to 100
-    contrast?: number; // -100 to 100
-    saturation?: number; // -100 to 100
-    blur?: number; // 0 to 20
-    sharpen?: number; // 0 to 100
-}
-
-/**
- * ImageEditorService provides basic image editing capabilities
- */
-class ImageEditorService {
-    private static instance: ImageEditorService;
-    private editorState: EditorState;
-    private tempCanvas: HTMLCanvasElement;
-    private tempContext: CanvasRenderingContext2D;
-    private cropOverlay?: HTMLElement;
-    private cropHandles?: HTMLElement[];
-    private cropArea: CropArea | null = null;
-    private isDraggingCrop: boolean = false;
-    private dragStartX: number = 0;
-    private dragStartY: number = 0;
-    private currentFilters: FilterParams = {};
-    
-    // Canvas size limits for security and memory management
-    private readonly MAX_CANVAS_SIZE = 8192; // Maximum width/height
-    private readonly MAX_CANVAS_AREA = 50000000; // 50 megapixels
-
-    private constructor() {
-        // Initialize canvases
-        this.editorState = {
-            originalImage: null,
-            currentImage: null,
-            canvas: document.createElement('canvas'),
-            context: null as any,
-            history: [],
-            historyIndex: -1,
-            isEditing: false
-        };
-        
-        const ctx = this.editorState.canvas.getContext('2d');
-        if (!ctx) {
-            throw new Error('Failed to get canvas context');
-        }
-        this.editorState.context = ctx;
-        
-        this.tempCanvas = document.createElement('canvas');
-        const tempCtx = this.tempCanvas.getContext('2d');
-        if (!tempCtx) {
-            throw new Error('Failed to get temp canvas context');
-        }
-        this.tempContext = tempCtx;
-    }
-
-    static getInstance(): ImageEditorService {
-        if (!ImageEditorService.instance) {
-            ImageEditorService.instance = new ImageEditorService();
-        }
-        return ImageEditorService.instance;
-    }
-
-    /**
-     * Start editing an image
-     */
-    async startEditing(src: string | HTMLImageElement): Promise<HTMLCanvasElement> {
-        return await withErrorBoundary(async () => {
-            // Validate input
-            if (typeof src === 'string') {
-                ImageValidator.validateUrl(src);
-            }
-            // Load image
-            let img: HTMLImageElement;
-            if (typeof src === 'string') {
-                img = await this.loadImage(src);
-            } else {
-                img = src;
-            }
-            
-            // Validate image dimensions
-            ImageValidator.validateDimensions(img.naturalWidth, img.naturalHeight);
-            
-            // Check memory availability
-            const estimatedMemory = MemoryMonitor.estimateImageMemory(img.naturalWidth, img.naturalHeight);
-            if (!MemoryMonitor.checkMemoryAvailable(estimatedMemory)) {
-                throw new ImageError(
-                    ImageErrorType.MEMORY_ERROR,
-                    'Insufficient memory to process image',
-                    { estimatedMemory }
-                );
-            }
-            
-            if (img.naturalWidth > this.MAX_CANVAS_SIZE || 
-                img.naturalHeight > this.MAX_CANVAS_SIZE ||
-                img.naturalWidth * img.naturalHeight > this.MAX_CANVAS_AREA) {
-                
-                // Scale down if too large
-                const scale = Math.min(
-                    this.MAX_CANVAS_SIZE / Math.max(img.naturalWidth, img.naturalHeight),
-                    Math.sqrt(this.MAX_CANVAS_AREA / (img.naturalWidth * img.naturalHeight))
-                );
-                
-                const scaledWidth = Math.floor(img.naturalWidth * scale);
-                const scaledHeight = Math.floor(img.naturalHeight * scale);
-                
-                console.warn(`Image too large (${img.naturalWidth}x${img.naturalHeight}), scaling to ${scaledWidth}x${scaledHeight}`);
-                
-                // Create scaled image
-                const scaledCanvas = document.createElement('canvas');
-                scaledCanvas.width = scaledWidth;
-                scaledCanvas.height = scaledHeight;
-                const scaledCtx = scaledCanvas.getContext('2d');
-                if (!scaledCtx) throw new Error('Failed to get scaled canvas context');
-                
-                scaledCtx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
-                
-                // Create new image from scaled canvas
-                const scaledImg = new Image();
-                scaledImg.src = scaledCanvas.toDataURL();
-                await new Promise(resolve => scaledImg.onload = resolve);
-                img = scaledImg;
-                
-                // Clean up scaled canvas
-                scaledCanvas.width = 0;
-                scaledCanvas.height = 0;
-            }
-            
-            // Store original
-            this.editorState.originalImage = img;
-            this.editorState.currentImage = img;
-            this.editorState.isEditing = true;
-            this.editorState.history = [];
-            this.editorState.historyIndex = -1;
-            this.currentFilters = {};
-            
-            // Setup canvas with validated dimensions
-            this.editorState.canvas.width = img.naturalWidth;
-            this.editorState.canvas.height = img.naturalHeight;
-            this.editorState.context.drawImage(img, 0, 0);
-            
-            return this.editorState.canvas;
-        }, (error) => {
-            this.stopEditing();
-            throw error;
-        }) || this.editorState.canvas;
-    }
-
-    /**
-     * Rotate image by degrees (90, 180, 270)
-     */
-    rotate(degrees: 90 | 180 | 270 | -90): void {
-        if (!this.editorState.isEditing) return;
-        
-        const { canvas, context } = this.editorState;
-        const { width, height } = canvas;
-        
-        // Setup temp canvas
-        if (degrees === 90 || degrees === -90 || degrees === 270) {
-            this.tempCanvas.width = height;
-            this.tempCanvas.height = width;
-        } else {
-            this.tempCanvas.width = width;
-            this.tempCanvas.height = height;
-        }
-        
-        // Clear temp canvas
-        this.tempContext.clearRect(0, 0, this.tempCanvas.width, this.tempCanvas.height);
-        
-        // Rotate
-        this.tempContext.save();
-        
-        if (degrees === 90) {
-            this.tempContext.translate(height, 0);
-            this.tempContext.rotate(Math.PI / 2);
-        } else if (degrees === 180) {
-            this.tempContext.translate(width, height);
-            this.tempContext.rotate(Math.PI);
-        } else if (degrees === 270 || degrees === -90) {
-            this.tempContext.translate(0, width);
-            this.tempContext.rotate(-Math.PI / 2);
-        }
-        
-        this.tempContext.drawImage(canvas, 0, 0);
-        this.tempContext.restore();
-        
-        // Copy back to main canvas
-        canvas.width = this.tempCanvas.width;
-        canvas.height = this.tempCanvas.height;
-        context.drawImage(this.tempCanvas, 0, 0);
-        
-        // Add to history
-        this.addToHistory('rotate', { degrees });
-    }
-
-    /**
-     * Start crop selection
-     */
-    startCrop(container: HTMLElement): void {
-        if (!this.editorState.isEditing) return;
-        
-        // Create crop overlay
-        this.cropOverlay = document.createElement('div');
-        this.cropOverlay.className = 'crop-overlay';
-        this.cropOverlay.style.cssText = `
-            position: absolute;
-            border: 2px dashed #fff;
-            background: rgba(0, 0, 0, 0.3);
-            cursor: move;
-            z-index: 1000;
-        `;
-        
-        // Create resize handles
-        this.cropHandles = [];
-        const handlePositions = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
-        
-        handlePositions.forEach(pos => {
-            const handle = document.createElement('div');
-            handle.className = `crop-handle crop-handle-${pos}`;
-            handle.dataset.position = pos;
-            handle.style.cssText = `
-                position: absolute;
-                width: 10px;
-                height: 10px;
-                background: white;
-                border: 1px solid #333;
-                z-index: 1001;
-            `;
-            
-            // Position handles
-            switch (pos) {
-                case 'nw':
-                    handle.style.top = '-5px';
-                    handle.style.left = '-5px';
-                    handle.style.cursor = 'nw-resize';
-                    break;
-                case 'n':
-                    handle.style.top = '-5px';
-                    handle.style.left = '50%';
-                    handle.style.transform = 'translateX(-50%)';
-                    handle.style.cursor = 'n-resize';
-                    break;
-                case 'ne':
-                    handle.style.top = '-5px';
-                    handle.style.right = '-5px';
-                    handle.style.cursor = 'ne-resize';
-                    break;
-                case 'e':
-                    handle.style.top = '50%';
-                    handle.style.right = '-5px';
-                    handle.style.transform = 'translateY(-50%)';
-                    handle.style.cursor = 'e-resize';
-                    break;
-                case 'se':
-                    handle.style.bottom = '-5px';
-                    handle.style.right = '-5px';
-                    handle.style.cursor = 'se-resize';
-                    break;
-                case 's':
-                    handle.style.bottom = '-5px';
-                    handle.style.left = '50%';
-                    handle.style.transform = 'translateX(-50%)';
-                    handle.style.cursor = 's-resize';
-                    break;
-                case 'sw':
-                    handle.style.bottom = '-5px';
-                    handle.style.left = '-5px';
-                    handle.style.cursor = 'sw-resize';
-                    break;
-                case 'w':
-                    handle.style.top = '50%';
-                    handle.style.left = '-5px';
-                    handle.style.transform = 'translateY(-50%)';
-                    handle.style.cursor = 'w-resize';
-                    break;
-            }
-            
-            this.cropOverlay.appendChild(handle);
-            this.cropHandles!.push(handle);
-        });
-        
-        // Set initial crop area (80% of image)
-        const canvasRect = this.editorState.canvas.getBoundingClientRect();
-        const initialSize = Math.min(canvasRect.width, canvasRect.height) * 0.8;
-        const initialX = (canvasRect.width - initialSize) / 2;
-        const initialY = (canvasRect.height - initialSize) / 2;
-        
-        this.cropArea = {
-            x: initialX,
-            y: initialY,
-            width: initialSize,
-            height: initialSize
-        };
-        
-        this.updateCropOverlay();
-        container.appendChild(this.cropOverlay);
-        
-        // Setup drag handlers
-        this.setupCropHandlers();
-    }
-
-    /**
-     * Setup crop interaction handlers
-     */
-    private setupCropHandlers(): void {
-        if (!this.cropOverlay) return;
-        
-        // Drag to move
-        this.cropOverlay.addEventListener('mousedown', (e) => {
-            if ((e.target as HTMLElement).classList.contains('crop-handle')) return;
-            
-            this.isDraggingCrop = true;
-            this.dragStartX = e.clientX;
-            this.dragStartY = e.clientY;
-            
-            const handleMove = (e: MouseEvent) => {
-                if (!this.isDraggingCrop || !this.cropArea) return;
-                
-                const deltaX = e.clientX - this.dragStartX;
-                const deltaY = e.clientY - this.dragStartY;
-                
-                this.cropArea.x += deltaX;
-                this.cropArea.y += deltaY;
-                
-                this.dragStartX = e.clientX;
-                this.dragStartY = e.clientY;
-                
-                this.updateCropOverlay();
-            };
-            
-            const handleUp = () => {
-                this.isDraggingCrop = false;
-                document.removeEventListener('mousemove', handleMove);
-                document.removeEventListener('mouseup', handleUp);
-            };
-            
-            document.addEventListener('mousemove', handleMove);
-            document.addEventListener('mouseup', handleUp);
-        });
-        
-        // Resize handles
-        this.cropHandles?.forEach(handle => {
-            handle.addEventListener('mousedown', (e) => {
-                e.stopPropagation();
-                
-                const position = handle.dataset.position!;
-                const startX = e.clientX;
-                const startY = e.clientY;
-                const startCrop = { ...this.cropArea! };
-                
-                const handleResize = (e: MouseEvent) => {
-                    if (!this.cropArea) return;
-                    
-                    const deltaX = e.clientX - startX;
-                    const deltaY = e.clientY - startY;
-                    
-                    switch (position) {
-                        case 'nw':
-                            this.cropArea.x = startCrop.x + deltaX;
-                            this.cropArea.y = startCrop.y + deltaY;
-                            this.cropArea.width = startCrop.width - deltaX;
-                            this.cropArea.height = startCrop.height - deltaY;
-                            break;
-                        case 'n':
-                            this.cropArea.y = startCrop.y + deltaY;
-                            this.cropArea.height = startCrop.height - deltaY;
-                            break;
-                        case 'ne':
-                            this.cropArea.y = startCrop.y + deltaY;
-                            this.cropArea.width = startCrop.width + deltaX;
-                            this.cropArea.height = startCrop.height - deltaY;
-                            break;
-                        case 'e':
-                            this.cropArea.width = startCrop.width + deltaX;
-                            break;
-                        case 'se':
-                            this.cropArea.width = startCrop.width + deltaX;
-                            this.cropArea.height = startCrop.height + deltaY;
-                            break;
-                        case 's':
-                            this.cropArea.height = startCrop.height + deltaY;
-                            break;
-                        case 'sw':
-                            this.cropArea.x = startCrop.x + deltaX;
-                            this.cropArea.width = startCrop.width - deltaX;
-                            this.cropArea.height = startCrop.height + deltaY;
-                            break;
-                        case 'w':
-                            this.cropArea.x = startCrop.x + deltaX;
-                            this.cropArea.width = startCrop.width - deltaX;
-                            break;
-                    }
-                    
-                    // Ensure minimum size
-                    this.cropArea.width = Math.max(50, this.cropArea.width);
-                    this.cropArea.height = Math.max(50, this.cropArea.height);
-                    
-                    this.updateCropOverlay();
-                };
-                
-                const handleUp = () => {
-                    document.removeEventListener('mousemove', handleResize);
-                    document.removeEventListener('mouseup', handleUp);
-                };
-                
-                document.addEventListener('mousemove', handleResize);
-                document.addEventListener('mouseup', handleUp);
-            });
-        });
-    }
-
-    /**
-     * Update crop overlay position
-     */
-    private updateCropOverlay(): void {
-        if (!this.cropOverlay || !this.cropArea) return;
-        
-        this.cropOverlay.style.left = `${this.cropArea.x}px`;
-        this.cropOverlay.style.top = `${this.cropArea.y}px`;
-        this.cropOverlay.style.width = `${this.cropArea.width}px`;
-        this.cropOverlay.style.height = `${this.cropArea.height}px`;
-    }
-
-    /**
-     * Apply crop
-     */
-    applyCrop(): void {
-        if (!this.editorState.isEditing || !this.cropArea) return;
-        
-        const { canvas, context } = this.editorState;
-        const canvasRect = canvas.getBoundingClientRect();
-        
-        // Convert crop area from screen to canvas coordinates
-        const scaleX = canvas.width / canvasRect.width;
-        const scaleY = canvas.height / canvasRect.height;
-        
-        const cropX = this.cropArea.x * scaleX;
-        const cropY = this.cropArea.y * scaleY;
-        const cropWidth = this.cropArea.width * scaleX;
-        const cropHeight = this.cropArea.height * scaleY;
-        
-        // Get cropped image data
-        const imageData = context.getImageData(cropX, cropY, cropWidth, cropHeight);
-        
-        // Resize canvas and put cropped image
-        canvas.width = cropWidth;
-        canvas.height = cropHeight;
-        context.putImageData(imageData, 0, 0);
-        
-        // Clean up crop overlay
-        this.cancelCrop();
-        
-        // Add to history
-        this.addToHistory('crop', {
-            x: cropX,
-            y: cropY,
-            width: cropWidth,
-            height: cropHeight
-        });
-    }
-
-    /**
-     * Cancel crop
-     */
-    cancelCrop(): void {
-        if (this.cropOverlay) {
-            this.cropOverlay.remove();
-            this.cropOverlay = undefined;
-        }
-        this.cropHandles = undefined;
-        this.cropArea = null;
-    }
-
-    /**
-     * Apply brightness adjustment
-     */
-    applyBrightness(value: number): void {
-        if (!this.editorState.isEditing) return;
-        
-        this.currentFilters.brightness = value;
-        this.applyFilters();
-    }
-
-    /**
-     * Apply contrast adjustment
-     */
-    applyContrast(value: number): void {
-        if (!this.editorState.isEditing) return;
-        
-        this.currentFilters.contrast = value;
-        this.applyFilters();
-    }
-
-    /**
-     * Apply saturation adjustment
-     */
-    applySaturation(value: number): void {
-        if (!this.editorState.isEditing) return;
-        
-        this.currentFilters.saturation = value;
-        this.applyFilters();
-    }
-
-    /**
-     * Apply all filters
-     */
-    private applyFilters(): void {
-        const { canvas, context, originalImage } = this.editorState;
-        
-        if (!originalImage) return;
-        
-        // Clear canvas and redraw original
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        context.drawImage(originalImage, 0, 0, canvas.width, canvas.height);
-        
-        // Get image data
-        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-        const data = imageData.data;
-        
-        // Apply brightness
-        if (this.currentFilters.brightness) {
-            const brightness = this.currentFilters.brightness * 2.55; // Convert to 0-255 range
-            for (let i = 0; i < data.length; i += 4) {
-                data[i] = Math.min(255, Math.max(0, data[i] + brightness));
-                data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + brightness));
-                data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + brightness));
-            }
-        }
-        
-        // Apply contrast
-        if (this.currentFilters.contrast) {
-            const factor = (259 * (this.currentFilters.contrast + 255)) / (255 * (259 - this.currentFilters.contrast));
-            for (let i = 0; i < data.length; i += 4) {
-                data[i] = Math.min(255, Math.max(0, factor * (data[i] - 128) + 128));
-                data[i + 1] = Math.min(255, Math.max(0, factor * (data[i + 1] - 128) + 128));
-                data[i + 2] = Math.min(255, Math.max(0, factor * (data[i + 2] - 128) + 128));
-            }
-        }
-        
-        // Apply saturation
-        if (this.currentFilters.saturation) {
-            const saturation = this.currentFilters.saturation / 100;
-            for (let i = 0; i < data.length; i += 4) {
-                const gray = 0.2989 * data[i] + 0.5870 * data[i + 1] + 0.1140 * data[i + 2];
-                data[i] = Math.min(255, Math.max(0, gray + saturation * (data[i] - gray)));
-                data[i + 1] = Math.min(255, Math.max(0, gray + saturation * (data[i + 1] - gray)));
-                data[i + 2] = Math.min(255, Math.max(0, gray + saturation * (data[i + 2] - gray)));
-            }
-        }
-        
-        // Put modified image data back
-        context.putImageData(imageData, 0, 0);
-    }
-
-    /**
-     * Apply blur effect
-     */
-    applyBlur(radius: number): void {
-        if (!this.editorState.isEditing) return;
-        
-        const { canvas, context } = this.editorState;
-        
-        // Use CSS filter for performance
-        context.filter = `blur(${radius}px)`;
-        context.drawImage(canvas, 0, 0);
-        context.filter = 'none';
-        
-        this.addToHistory('blur', { radius });
-    }
-
-    /**
-     * Apply sharpen effect
-     */
-    applySharpen(amount: number): void {
-        if (!this.editorState.isEditing) return;
-        
-        const { canvas, context } = this.editorState;
-        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-        const data = imageData.data;
-        const width = canvas.width;
-        const height = canvas.height;
-        
-        // Create copy of original data
-        const original = new Uint8ClampedArray(data);
-        
-        // Sharpen kernel
-        const kernel = [
-            0, -1, 0,
-            -1, 5 + amount / 25, -1,
-            0, -1, 0
-        ];
-        
-        // Apply convolution
-        for (let y = 1; y < height - 1; y++) {
-            for (let x = 1; x < width - 1; x++) {
-                const idx = (y * width + x) * 4;
-                
-                for (let c = 0; c < 3; c++) {
-                    let sum = 0;
-                    for (let ky = -1; ky <= 1; ky++) {
-                        for (let kx = -1; kx <= 1; kx++) {
-                            const kidx = ((y + ky) * width + (x + kx)) * 4;
-                            sum += original[kidx + c] * kernel[(ky + 1) * 3 + (kx + 1)];
-                        }
-                    }
-                    data[idx + c] = Math.min(255, Math.max(0, sum));
-                }
-            }
-        }
-        
-        context.putImageData(imageData, 0, 0);
-        this.addToHistory('sharpen', { amount });
-    }
-
-    /**
-     * Undo last operation
-     */
-    undo(): void {
-        if (!this.editorState.isEditing || this.editorState.historyIndex <= 0) return;
-        
-        this.editorState.historyIndex--;
-        this.replayHistory();
-    }
-
-    /**
-     * Redo operation
-     */
-    redo(): void {
-        if (!this.editorState.isEditing || 
-            this.editorState.historyIndex >= this.editorState.history.length - 1) return;
-        
-        this.editorState.historyIndex++;
-        this.replayHistory();
-    }
-
-    /**
-     * Replay history up to current index
-     */
-    private replayHistory(): void {
-        const { canvas, context, originalImage, history, historyIndex } = this.editorState;
-        
-        if (!originalImage) return;
-        
-        // Reset to original
-        canvas.width = originalImage.naturalWidth;
-        canvas.height = originalImage.naturalHeight;
-        context.drawImage(originalImage, 0, 0);
-        
-        // Replay operations
-        for (let i = 0; i <= historyIndex; i++) {
-            const entry = history[i];
-            // Apply operation based on entry
-            // Note: This is simplified - actual implementation would need to store and replay exact operations
-        }
-    }
-
-    /**
-     * Add operation to history
-     */
-    private addToHistory(operation: EditOperation, params: any): void {
-        // Remove any operations after current index
-        this.editorState.history = this.editorState.history.slice(0, this.editorState.historyIndex + 1);
-        
-        // Add new operation
-        this.editorState.history.push({
-            operation,
-            params,
-            timestamp: new Date()
-        });
-        
-        this.editorState.historyIndex++;
-        
-        // Limit history size
-        if (this.editorState.history.length > 50) {
-            this.editorState.history.shift();
-            this.editorState.historyIndex--;
-        }
-    }
-
-    /**
-     * Save edited image
-     */
-    async saveImage(noteId?: string): Promise<Blob> {
-        if (!this.editorState.isEditing) {
-            throw new ImageError(
-                ImageErrorType.INVALID_INPUT,
-                'No image being edited'
-            );
-        }
-        
-        return new Promise((resolve, reject) => {
-            this.editorState.canvas.toBlob((blob) => {
-                if (blob) {
-                    resolve(blob);
-                    
-                    if (noteId) {
-                        // Optionally save to server
-                        this.saveToServer(noteId, blob);
-                    }
-                } else {
-                    reject(new Error('Failed to create blob'));
-                }
-            }, 'image/png');
-        });
-    }
-
-    /**
-     * Save edited image to server
-     */
-    private async saveToServer(noteId: string, blob: Blob): Promise<void> {
-        try {
-            const formData = new FormData();
-            formData.append('image', blob, 'edited.png');
-            
-            await server.upload(`notes/${noteId}/image`, formData);
-            toastService.showMessage('Image saved successfully');
-        } catch (error) {
-            console.error('Failed to save image:', error);
-            toastService.showError('Failed to save image');
-        }
-    }
-
-    /**
-     * Reset to original image
-     */
-    reset(): void {
-        if (!this.editorState.isEditing || !this.editorState.originalImage) return;
-        
-        const { canvas, context, originalImage } = this.editorState;
-        
-        canvas.width = originalImage.naturalWidth;
-        canvas.height = originalImage.naturalHeight;
-        context.drawImage(originalImage, 0, 0);
-        
-        this.currentFilters = {};
-        this.editorState.history = [];
-        this.editorState.historyIndex = -1;
-    }
-
-    /**
-     * Stop editing and clean up resources
-     */
-    stopEditing(): void {
-        this.cancelCrop();
-        
-        // Request garbage collection after cleanup
-        MemoryMonitor.requestGarbageCollection();
-        
-        // Clean up canvas memory
-        if (this.editorState.canvas) {
-            this.editorState.context.clearRect(0, 0, this.editorState.canvas.width, this.editorState.canvas.height);
-            this.editorState.canvas.width = 0;
-            this.editorState.canvas.height = 0;
-        }
-        
-        if (this.tempCanvas) {
-            this.tempContext.clearRect(0, 0, this.tempCanvas.width, this.tempCanvas.height);
-            this.tempCanvas.width = 0;
-            this.tempCanvas.height = 0;
-        }
-        
-        // Release image references
-        if (this.editorState.originalImage) {
-            this.editorState.originalImage.src = '';
-        }
-        if (this.editorState.currentImage) {
-            this.editorState.currentImage.src = '';
-        }
-        
-        this.editorState.isEditing = false;
-        this.editorState.originalImage = null;
-        this.editorState.currentImage = null;
-        this.editorState.history = [];
-        this.editorState.historyIndex = -1;
-        this.currentFilters = {};
-    }
-
-    /**
-     * Load image from URL
-     */
-    private loadImage(src: string): Promise<HTMLImageElement> {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.crossOrigin = 'anonymous';
-            img.onload = () => resolve(img);
-            img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
-            img.src = src;
-        });
-    }
-
-    /**
-     * Check if can undo
-     */
-    canUndo(): boolean {
-        return this.editorState.historyIndex > 0;
-    }
-
-    /**
-     * Check if can redo
-     */
-    canRedo(): boolean {
-        return this.editorState.historyIndex < this.editorState.history.length - 1;
-    }
-
-    /**
-     * Get current canvas
-     */
-    getCanvas(): HTMLCanvasElement {
-        return this.editorState.canvas;
-    }
-
-    /**
-     * Check if editing
-     */
-    isEditing(): boolean {
-        return this.editorState.isEditing;
-    }
-}
-
-export default ImageEditorService.getInstance();

apps/client/src/services/image_error_handler.ts

@@ -1,369 +0,0 @@
-/**
- * Error Handler for Image Processing Operations
- * Provides error boundaries and validation for image-related operations
- */
-
-import toastService from './toast.js';
-
-/**
- * Error types for image operations
- */
-export enum ImageErrorType {
-    INVALID_INPUT = 'INVALID_INPUT',
-    SIZE_LIMIT_EXCEEDED = 'SIZE_LIMIT_EXCEEDED',
-    MEMORY_ERROR = 'MEMORY_ERROR',
-    PROCESSING_ERROR = 'PROCESSING_ERROR',
-    NETWORK_ERROR = 'NETWORK_ERROR',
-    SECURITY_ERROR = 'SECURITY_ERROR'
-}
-
-/**
- * Custom error class for image operations
- */
-export class ImageError extends Error {
-    constructor(
-        public type: ImageErrorType,
-        message: string,
-        public details?: any
-    ) {
-        super(message);
-        this.name = 'ImageError';
-    }
-}
-
-/**
- * Input validation utilities
- */
-export class ImageValidator {
-    private static readonly MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
-    private static readonly ALLOWED_MIME_TYPES = [
-        'image/jpeg',
-        'image/jpg',
-        'image/png',
-        'image/gif',
-        'image/webp',
-        'image/svg+xml',
-        'image/bmp'
-    ];
-    private static readonly MAX_DIMENSION = 16384;
-    private static readonly MAX_AREA = 100000000; // 100 megapixels
-
-    /**
-     * Validate file input
-     */
-    static validateFile(file: File): void {
-        // Check file size
-        if (file.size > this.MAX_FILE_SIZE) {
-            throw new ImageError(
-                ImageErrorType.SIZE_LIMIT_EXCEEDED,
-                `File size exceeds maximum allowed size of ${this.MAX_FILE_SIZE / 1024 / 1024}MB`,
-                { fileSize: file.size, maxSize: this.MAX_FILE_SIZE }
-            );
-        }
-
-        // Check MIME type
-        if (!this.ALLOWED_MIME_TYPES.includes(file.type)) {
-            throw new ImageError(
-                ImageErrorType.INVALID_INPUT,
-                `File type ${file.type} is not supported`,
-                { fileType: file.type, allowedTypes: this.ALLOWED_MIME_TYPES }
-            );
-        }
-    }
-
-    /**
-     * Validate image dimensions
-     */
-    static validateDimensions(width: number, height: number): void {
-        if (width <= 0 || height <= 0) {
-            throw new ImageError(
-                ImageErrorType.INVALID_INPUT,
-                'Invalid image dimensions',
-                { width, height }
-            );
-        }
-
-        if (width > this.MAX_DIMENSION || height > this.MAX_DIMENSION) {
-            throw new ImageError(
-                ImageErrorType.SIZE_LIMIT_EXCEEDED,
-                `Image dimensions exceed maximum allowed size of ${this.MAX_DIMENSION}px`,
-                { width, height, maxDimension: this.MAX_DIMENSION }
-            );
-        }
-
-        if (width * height > this.MAX_AREA) {
-            throw new ImageError(
-                ImageErrorType.SIZE_LIMIT_EXCEEDED,
-                `Image area exceeds maximum allowed area of ${this.MAX_AREA / 1000000} megapixels`,
-                { area: width * height, maxArea: this.MAX_AREA }
-            );
-        }
-    }
-
-    /**
-     * Validate URL
-     */
-    static validateUrl(url: string): void {
-        try {
-            const parsedUrl = new URL(url);
-            
-            // Check protocol
-            if (!['http:', 'https:', 'data:', 'blob:'].includes(parsedUrl.protocol)) {
-                throw new ImageError(
-                    ImageErrorType.SECURITY_ERROR,
-                    `Unsupported protocol: ${parsedUrl.protocol}`,
-                    { url, protocol: parsedUrl.protocol }
-                );
-            }
-
-            // Additional security checks for data URLs
-            if (parsedUrl.protocol === 'data:') {
-                const [header] = url.split(',');
-                if (!header.includes('image/')) {
-                    throw new ImageError(
-                        ImageErrorType.INVALID_INPUT,
-                        'Data URL does not contain image data',
-                        { url: url.substring(0, 100) }
-                    );
-                }
-            }
-        } catch (error) {
-            if (error instanceof ImageError) {
-                throw error;
-            }
-            throw new ImageError(
-                ImageErrorType.INVALID_INPUT,
-                'Invalid URL format',
-                { url, originalError: error }
-            );
-        }
-    }
-
-    /**
-     * Sanitize filename
-     */
-    static sanitizeFilename(filename: string): string {
-        // Remove path traversal attempts
-        filename = filename.replace(/\.\./g, '');
-        filename = filename.replace(/[\/\\]/g, '_');
-        
-        // Remove special characters except dots and dashes
-        filename = filename.replace(/[^a-zA-Z0-9._-]/g, '_');
-        
-        // Limit length
-        if (filename.length > 255) {
-            const ext = filename.split('.').pop();
-            filename = filename.substring(0, 250) + '.' + ext;
-        }
-        
-        return filename;
-    }
-}
-
-/**
- * Error boundary wrapper for async operations
- */
-export async function withErrorBoundary<T>(
-    operation: () => Promise<T>,
-    errorHandler?: (error: Error) => void
-): Promise<T | null> {
-    try {
-        return await operation();
-    } catch (error) {
-        const imageError = error instanceof ImageError 
-            ? error 
-            : new ImageError(
-                ImageErrorType.PROCESSING_ERROR,
-                error instanceof Error ? error.message : 'Unknown error occurred',
-                { originalError: error }
-            );
-
-        // Log error
-        console.error('[Image Error]', imageError.type, imageError.message, imageError.details);
-
-        // Show user-friendly message
-        switch (imageError.type) {
-            case ImageErrorType.SIZE_LIMIT_EXCEEDED:
-                toastService.showError('Image is too large to process');
-                break;
-            case ImageErrorType.INVALID_INPUT:
-                toastService.showError('Invalid image or input provided');
-                break;
-            case ImageErrorType.MEMORY_ERROR:
-                toastService.showError('Not enough memory to process image');
-                break;
-            case ImageErrorType.SECURITY_ERROR:
-                toastService.showError('Security violation detected');
-                break;
-            case ImageErrorType.NETWORK_ERROR:
-                toastService.showError('Network error occurred');
-                break;
-            default:
-                toastService.showError('Failed to process image');
-        }
-
-        // Call custom error handler if provided
-        if (errorHandler) {
-            errorHandler(imageError);
-        }
-
-        return null;
-    }
-}
-
-/**
- * Memory monitoring utilities
- */
-export class MemoryMonitor {
-    private static readonly WARNING_THRESHOLD = 0.8; // 80% of available memory
-    
-    /**
-     * Check if memory is available for operation
-     */
-    static checkMemoryAvailable(estimatedBytes: number): boolean {
-        if ('memory' in performance && (performance as any).memory) {
-            const memory = (performance as any).memory;
-            const used = memory.usedJSHeapSize;
-            const limit = memory.jsHeapSizeLimit;
-            const available = limit - used;
-            
-            if (estimatedBytes > available * this.WARNING_THRESHOLD) {
-                console.warn(`Memory warning: Estimated ${estimatedBytes} bytes needed, ${available} bytes available`);
-                return false;
-            }
-        }
-        return true;
-    }
-
-    /**
-     * Estimate memory needed for image
-     */
-    static estimateImageMemory(width: number, height: number, channels: number = 4): number {
-        // Each pixel uses 4 bytes (RGBA) or specified channels
-        return width * height * channels;
-    }
-
-    /**
-     * Force garbage collection if available
-     */
-    static requestGarbageCollection(): void {
-        if (typeof (globalThis as any).gc === 'function') {
-            (globalThis as any).gc();
-        }
-    }
-}
-
-/**
- * Web Worker support for heavy operations
- */
-export class ImageWorkerPool {
-    private workers: Worker[] = [];
-    private taskQueue: Array<{
-        data: any;
-        resolve: (value: any) => void;
-        reject: (error: any) => void;
-    }> = [];
-    private busyWorkers = new Set<Worker>();
-
-    constructor(
-        private workerScript: string,
-        private poolSize: number = navigator.hardwareConcurrency || 4
-    ) {
-        this.initializeWorkers();
-    }
-
-    private initializeWorkers(): void {
-        for (let i = 0; i < this.poolSize; i++) {
-            try {
-                const worker = new Worker(this.workerScript);
-                worker.addEventListener('message', (e) => this.handleWorkerMessage(worker, e));
-                worker.addEventListener('error', (e) => this.handleWorkerError(worker, e));
-                this.workers.push(worker);
-            } catch (error) {
-                console.error('Failed to create worker:', error);
-            }
-        }
-    }
-
-    private handleWorkerMessage(worker: Worker, event: MessageEvent): void {
-        this.busyWorkers.delete(worker);
-        
-        // Process next task if available
-        if (this.taskQueue.length > 0) {
-            const task = this.taskQueue.shift()!;
-            this.executeTask(worker, task);
-        }
-    }
-
-    private handleWorkerError(worker: Worker, event: ErrorEvent): void {
-        this.busyWorkers.delete(worker);
-        console.error('Worker error:', event);
-    }
-
-    private executeTask(
-        worker: Worker,
-        task: { data: any; resolve: (value: any) => void; reject: (error: any) => void }
-    ): void {
-        this.busyWorkers.add(worker);
-        
-        const messageHandler = (e: MessageEvent) => {
-            worker.removeEventListener('message', messageHandler);
-            worker.removeEventListener('error', errorHandler);
-            this.busyWorkers.delete(worker);
-            task.resolve(e.data);
-            
-            // Process next task
-            if (this.taskQueue.length > 0) {
-                const nextTask = this.taskQueue.shift()!;
-                this.executeTask(worker, nextTask);
-            }
-        };
-        
-        const errorHandler = (e: ErrorEvent) => {
-            worker.removeEventListener('message', messageHandler);
-            worker.removeEventListener('error', errorHandler);
-            this.busyWorkers.delete(worker);
-            task.reject(e);
-            
-            // Process next task
-            if (this.taskQueue.length > 0) {
-                const nextTask = this.taskQueue.shift()!;
-                this.executeTask(worker, nextTask);
-            }
-        };
-        
-        worker.addEventListener('message', messageHandler);
-        worker.addEventListener('error', errorHandler);
-        worker.postMessage(task.data);
-    }
-
-    async process(data: any): Promise<any> {
-        return new Promise((resolve, reject) => {
-            // Find available worker
-            const availableWorker = this.workers.find(w => !this.busyWorkers.has(w));
-            
-            if (availableWorker) {
-                this.executeTask(availableWorker, { data, resolve, reject });
-            } else {
-                // Queue task
-                this.taskQueue.push({ data, resolve, reject });
-            }
-        });
-    }
-
-    terminate(): void {
-        this.workers.forEach(worker => worker.terminate());
-        this.workers = [];
-        this.taskQueue = [];
-        this.busyWorkers.clear();
-    }
-}
-
-export default {
-    ImageError,
-    ImageErrorType,
-    ImageValidator,
-    MemoryMonitor,
-    ImageWorkerPool,
-    withErrorBoundary
-};

apps/client/src/services/image_exif.ts

@@ -1,839 +0,0 @@
-/**
- * EXIF Data Viewer Module for Trilium Notes
- * Extracts and displays EXIF metadata from images
- */
-
-/**
- * EXIF data structure
- */
-export interface ExifData {
-    // Image information
-    make?: string;
-    model?: string;
-    software?: string;
-    dateTime?: Date;
-    dateTimeOriginal?: Date;
-    dateTimeDigitized?: Date;
-    
-    // Camera settings
-    exposureTime?: string;
-    fNumber?: number;
-    exposureProgram?: string;
-    iso?: number;
-    shutterSpeedValue?: string;
-    apertureValue?: number;
-    brightnessValue?: number;
-    exposureBiasValue?: number;
-    maxApertureValue?: number;
-    meteringMode?: string;
-    flash?: string;
-    focalLength?: number;
-    focalLengthIn35mm?: number;
-    
-    // Image properties
-    imageWidth?: number;
-    imageHeight?: number;
-    orientation?: number;
-    xResolution?: number;
-    yResolution?: number;
-    resolutionUnit?: string;
-    colorSpace?: string;
-    whiteBalance?: string;
-    
-    // GPS information
-    gpsLatitude?: number;
-    gpsLongitude?: number;
-    gpsAltitude?: number;
-    gpsTimestamp?: Date;
-    gpsSpeed?: number;
-    gpsDirection?: number;
-    
-    // Other metadata
-    artist?: string;
-    copyright?: string;
-    userComment?: string;
-    imageDescription?: string;
-    lensModel?: string;
-    lensMake?: string;
-    
-    // Raw data
-    raw?: Record<string, any>;
-}
-
-/**
- * EXIF tag definitions
- */
-const EXIF_TAGS: Record<number, string> = {
-    0x010F: 'make',
-    0x0110: 'model',
-    0x0131: 'software',
-    0x0132: 'dateTime',
-    0x829A: 'exposureTime',
-    0x829D: 'fNumber',
-    0x8822: 'exposureProgram',
-    0x8827: 'iso',
-    0x9003: 'dateTimeOriginal',
-    0x9004: 'dateTimeDigitized',
-    0x9201: 'shutterSpeedValue',
-    0x9202: 'apertureValue',
-    0x9203: 'brightnessValue',
-    0x9204: 'exposureBiasValue',
-    0x9205: 'maxApertureValue',
-    0x9207: 'meteringMode',
-    0x9209: 'flash',
-    0x920A: 'focalLength',
-    0xA002: 'imageWidth',
-    0xA003: 'imageHeight',
-    0x0112: 'orientation',
-    0x011A: 'xResolution',
-    0x011B: 'yResolution',
-    0x0128: 'resolutionUnit',
-    0xA001: 'colorSpace',
-    0xA403: 'whiteBalance',
-    0x8298: 'copyright',
-    0x013B: 'artist',
-    0x9286: 'userComment',
-    0x010E: 'imageDescription',
-    0xA434: 'lensModel',
-    0xA433: 'lensMake',
-    0xA432: 'focalLengthIn35mm'
-};
-
-/**
- * GPS tag definitions
- */
-const GPS_TAGS: Record<number, string> = {
-    0x0001: 'gpsLatitudeRef',
-    0x0002: 'gpsLatitude',
-    0x0003: 'gpsLongitudeRef',
-    0x0004: 'gpsLongitude',
-    0x0005: 'gpsAltitudeRef',
-    0x0006: 'gpsAltitude',
-    0x0007: 'gpsTimestamp',
-    0x000D: 'gpsSpeed',
-    0x0010: 'gpsDirection'
-};
-
-/**
- * ImageExifService extracts and manages EXIF metadata from images
- */
-class ImageExifService {
-    private static instance: ImageExifService;
-    private exifCache: Map<string, ExifData> = new Map();
-    private cacheOrder: string[] = []; // Track cache insertion order for LRU
-    private readonly MAX_CACHE_SIZE = 50; // Maximum number of cached entries
-    private readonly MAX_BUFFER_SIZE = 100 * 1024 * 1024; // 100MB max buffer size
-
-    private constructor() {}
-
-    static getInstance(): ImageExifService {
-        if (!ImageExifService.instance) {
-            ImageExifService.instance = new ImageExifService();
-        }
-        return ImageExifService.instance;
-    }
-
-    /**
-     * Extract EXIF data from image URL or file
-     */
-    async extractExifData(source: string | File | Blob): Promise<ExifData | null> {
-        try {
-            // Check cache if URL
-            if (typeof source === 'string' && this.exifCache.has(source)) {
-                // Move to end for LRU
-                this.updateCacheOrder(source);
-                return this.exifCache.get(source)!;
-            }
-
-            // Get array buffer with size validation
-            const buffer = await this.getArrayBuffer(source);
-            
-            // Validate buffer size
-            if (buffer.byteLength > this.MAX_BUFFER_SIZE) {
-                console.error('Buffer size exceeds maximum allowed size');
-                return null;
-            }
-            
-            // Parse EXIF data
-            const exifData = this.parseExifData(buffer);
-            
-            // Cache if URL with LRU eviction
-            if (typeof source === 'string' && exifData) {
-                this.addToCache(source, exifData);
-            }
-            
-            return exifData;
-        } catch (error) {
-            console.error('Failed to extract EXIF data:', error);
-            return null;
-        }
-    }
-
-    /**
-     * Get array buffer from various sources
-     */
-    private async getArrayBuffer(source: string | File | Blob): Promise<ArrayBuffer> {
-        if (source instanceof File || source instanceof Blob) {
-            return source.arrayBuffer();
-        } else {
-            const response = await fetch(source);
-            return response.arrayBuffer();
-        }
-    }
-
-    /**
-     * Parse EXIF data from array buffer
-     */
-    private parseExifData(buffer: ArrayBuffer): ExifData | null {
-        const dataView = new DataView(buffer);
-        
-        // Check for JPEG SOI marker
-        if (dataView.getUint16(0) !== 0xFFD8) {
-            return null; // Not a JPEG
-        }
-
-        // Find APP1 marker (EXIF)
-        let offset = 2;
-        let marker;
-        
-        while (offset < dataView.byteLength) {
-            marker = dataView.getUint16(offset);
-            
-            if (marker === 0xFFE1) {
-                // Found EXIF marker
-                return this.parseExifSegment(dataView, offset + 2);
-            }
-            
-            if ((marker & 0xFF00) !== 0xFF00) {
-                break; // Invalid marker
-            }
-            
-            offset += 2 + dataView.getUint16(offset + 2);
-        }
-        
-        return null;
-    }
-
-    /**
-     * Parse EXIF segment with bounds checking
-     */
-    private parseExifSegment(dataView: DataView, offset: number): ExifData | null {
-        // Bounds check
-        if (offset + 2 > dataView.byteLength) {
-            console.error('Invalid offset for EXIF segment');
-            return null;
-        }
-        
-        const length = dataView.getUint16(offset);
-        
-        // Validate segment length
-        if (offset + length > dataView.byteLength) {
-            console.error('EXIF segment length exceeds buffer size');
-            return null;
-        }
-        
-        // Check for "Exif\0\0" identifier with bounds check
-        if (offset + 6 > dataView.byteLength) {
-            console.error('Invalid EXIF header offset');
-            return null;
-        }
-        
-        const exifHeader = String.fromCharCode(
-            dataView.getUint8(offset + 2),
-            dataView.getUint8(offset + 3),
-            dataView.getUint8(offset + 4),
-            dataView.getUint8(offset + 5)
-        );
-        
-        if (exifHeader !== 'Exif') {
-            return null;
-        }
-        
-        // TIFF header offset
-        const tiffOffset = offset + 8;
-        
-        // Check byte order
-        const byteOrder = dataView.getUint16(tiffOffset);
-        const littleEndian = byteOrder === 0x4949; // 'II' for Intel
-        
-        if (byteOrder !== 0x4949 && byteOrder !== 0x4D4D) {
-            return null; // Invalid byte order
-        }
-        
-        // Parse IFD
-        const ifdOffset = this.getUint32(dataView, tiffOffset + 4, littleEndian);
-        const exifData = this.parseIFD(dataView, tiffOffset, tiffOffset + ifdOffset, littleEndian);
-        
-        // Parse GPS data if available
-        if (exifData.raw?.gpsIFDPointer) {
-            const gpsData = this.parseGPSIFD(
-                dataView,
-                tiffOffset,
-                tiffOffset + exifData.raw.gpsIFDPointer,
-                littleEndian
-            );
-            Object.assign(exifData, gpsData);
-        }
-        
-        return this.formatExifData(exifData);
-    }
-
-    /**
-     * Parse IFD (Image File Directory) with bounds checking
-     */
-    private parseIFD(
-        dataView: DataView,
-        tiffOffset: number,
-        ifdOffset: number,
-        littleEndian: boolean
-    ): ExifData {
-        // Bounds check for IFD offset
-        if (ifdOffset + 2 > dataView.byteLength) {
-            console.error('Invalid IFD offset');
-            return { raw: {} };
-        }
-        
-        const numEntries = this.getUint16(dataView, ifdOffset, littleEndian);
-        
-        // Validate number of entries
-        if (numEntries > 1000) { // Reasonable limit
-            console.error('Too many IFD entries');
-            return { raw: {} };
-        }
-        
-        const data: ExifData = { raw: {} };
-        
-        for (let i = 0; i < numEntries; i++) {
-            const entryOffset = ifdOffset + 2 + (i * 12);
-            
-            // Bounds check for entry
-            if (entryOffset + 12 > dataView.byteLength) {
-                console.warn('IFD entry exceeds buffer bounds');
-                break;
-            }
-            
-            const tag = this.getUint16(dataView, entryOffset, littleEndian);
-            const type = this.getUint16(dataView, entryOffset + 2, littleEndian);
-            const count = this.getUint32(dataView, entryOffset + 4, littleEndian);
-            const valueOffset = entryOffset + 8;
-            
-            const value = this.getTagValue(
-                dataView,
-                tiffOffset,
-                type,
-                count,
-                valueOffset,
-                littleEndian
-            );
-            
-            const tagName = EXIF_TAGS[tag];
-            if (tagName) {
-                (data as any)[tagName] = value;
-            }
-            
-            // Store raw value
-            data.raw![tag] = value;
-            
-            // Check for EXIF IFD pointer
-            if (tag === 0x8769) {
-                const exifIFDOffset = tiffOffset + value;
-                const exifData = this.parseIFD(dataView, tiffOffset, exifIFDOffset, littleEndian);
-                Object.assign(data, exifData);
-            }
-            
-            // Store GPS IFD pointer
-            if (tag === 0x8825) {
-                data.raw!.gpsIFDPointer = value;
-            }
-        }
-        
-        return data;
-    }
-
-    /**
-     * Parse GPS IFD
-     */
-    private parseGPSIFD(
-        dataView: DataView,
-        tiffOffset: number,
-        ifdOffset: number,
-        littleEndian: boolean
-    ): Partial<ExifData> {
-        const numEntries = this.getUint16(dataView, ifdOffset, littleEndian);
-        const gpsData: any = {};
-        
-        for (let i = 0; i < numEntries; i++) {
-            const entryOffset = ifdOffset + 2 + (i * 12);
-            
-            // Bounds check for entry
-            if (entryOffset + 12 > dataView.byteLength) {
-                console.warn('IFD entry exceeds buffer bounds');
-                break;
-            }
-            
-            const tag = this.getUint16(dataView, entryOffset, littleEndian);
-            const type = this.getUint16(dataView, entryOffset + 2, littleEndian);
-            const count = this.getUint32(dataView, entryOffset + 4, littleEndian);
-            const valueOffset = entryOffset + 8;
-            
-            const value = this.getTagValue(
-                dataView,
-                tiffOffset,
-                type,
-                count,
-                valueOffset,
-                littleEndian
-            );
-            
-            const tagName = GPS_TAGS[tag];
-            if (tagName) {
-                gpsData[tagName] = value;
-            }
-        }
-        
-        // Convert GPS coordinates
-        const result: Partial<ExifData> = {};
-        
-        if (gpsData.gpsLatitude && gpsData.gpsLatitudeRef) {
-            result.gpsLatitude = this.convertGPSCoordinate(
-                gpsData.gpsLatitude,
-                gpsData.gpsLatitudeRef
-            );
-        }
-        
-        if (gpsData.gpsLongitude && gpsData.gpsLongitudeRef) {
-            result.gpsLongitude = this.convertGPSCoordinate(
-                gpsData.gpsLongitude,
-                gpsData.gpsLongitudeRef
-            );
-        }
-        
-        if (gpsData.gpsAltitude) {
-            result.gpsAltitude = gpsData.gpsAltitude;
-        }
-        
-        return result;
-    }
-
-    /**
-     * Get tag value based on type
-     */
-    private getTagValue(
-        dataView: DataView,
-        tiffOffset: number,
-        type: number,
-        count: number,
-        offset: number,
-        littleEndian: boolean
-    ): any {
-        switch (type) {
-            case 1: // BYTE
-            case 7: // UNDEFINED
-                if (count === 1) {
-                    return dataView.getUint8(offset);
-                }
-                const bytes = [];
-                for (let i = 0; i < count; i++) {
-                    bytes.push(dataView.getUint8(offset + i));
-                }
-                return bytes;
-                
-            case 2: // ASCII
-                const stringOffset = count > 4 
-                    ? tiffOffset + this.getUint32(dataView, offset, littleEndian)
-                    : offset;
-                let str = '';
-                for (let i = 0; i < count - 1; i++) {
-                    const char = dataView.getUint8(stringOffset + i);
-                    if (char === 0) break;
-                    str += String.fromCharCode(char);
-                }
-                return str;
-                
-            case 3: // SHORT
-                if (count === 1) {
-                    return this.getUint16(dataView, offset, littleEndian);
-                }
-                const shorts = [];
-                const shortOffset = count > 2
-                    ? tiffOffset + this.getUint32(dataView, offset, littleEndian)
-                    : offset;
-                for (let i = 0; i < count; i++) {
-                    shorts.push(this.getUint16(dataView, shortOffset + i * 2, littleEndian));
-                }
-                return shorts;
-                
-            case 4: // LONG
-                if (count === 1) {
-                    return this.getUint32(dataView, offset, littleEndian);
-                }
-                const longs = [];
-                const longOffset = tiffOffset + this.getUint32(dataView, offset, littleEndian);
-                for (let i = 0; i < count; i++) {
-                    longs.push(this.getUint32(dataView, longOffset + i * 4, littleEndian));
-                }
-                return longs;
-                
-            case 5: // RATIONAL
-                const ratOffset = tiffOffset + this.getUint32(dataView, offset, littleEndian);
-                if (count === 1) {
-                    const num = this.getUint32(dataView, ratOffset, littleEndian);
-                    const den = this.getUint32(dataView, ratOffset + 4, littleEndian);
-                    return den === 0 ? 0 : num / den;
-                }
-                const rationals = [];
-                for (let i = 0; i < count; i++) {
-                    const num = this.getUint32(dataView, ratOffset + i * 8, littleEndian);
-                    const den = this.getUint32(dataView, ratOffset + i * 8 + 4, littleEndian);
-                    rationals.push(den === 0 ? 0 : num / den);
-                }
-                return rationals;
-                
-            default:
-                return null;
-        }
-    }
-
-    /**
-     * Convert GPS coordinate to decimal degrees
-     */
-    private convertGPSCoordinate(coord: number[], ref: string): number {
-        if (!coord || coord.length !== 3) return 0;
-        
-        const degrees = coord[0];
-        const minutes = coord[1];
-        const seconds = coord[2];
-        
-        let decimal = degrees + minutes / 60 + seconds / 3600;
-        
-        if (ref === 'S' || ref === 'W') {
-            decimal = -decimal;
-        }
-        
-        return decimal;
-    }
-
-    /**
-     * Format EXIF data for display
-     */
-    private formatExifData(data: ExifData): ExifData {
-        const formatted: ExifData = { ...data };
-        
-        // Format dates
-        if (formatted.dateTime) {
-            formatted.dateTime = this.parseExifDate(formatted.dateTime as any);
-        }
-        if (formatted.dateTimeOriginal) {
-            formatted.dateTimeOriginal = this.parseExifDate(formatted.dateTimeOriginal as any);
-        }
-        if (formatted.dateTimeDigitized) {
-            formatted.dateTimeDigitized = this.parseExifDate(formatted.dateTimeDigitized as any);
-        }
-        
-        // Format exposure time
-        if (formatted.exposureTime) {
-            const time = formatted.exposureTime as any;
-            if (typeof time === 'number') {
-                if (time < 1) {
-                    formatted.exposureTime = `1/${Math.round(1 / time)}`;
-                } else {
-                    formatted.exposureTime = `${time}s`;
-                }
-            }
-        }
-        
-        // Format exposure program
-        if (formatted.exposureProgram) {
-            const programs = [
-                'Not defined',
-                'Manual',
-                'Normal program',
-                'Aperture priority',
-                'Shutter priority',
-                'Creative program',
-                'Action program',
-                'Portrait mode',
-                'Landscape mode'
-            ];
-            const index = formatted.exposureProgram as any;
-            formatted.exposureProgram = programs[index] || 'Unknown';
-        }
-        
-        // Format metering mode
-        if (formatted.meteringMode) {
-            const modes = [
-                'Unknown',
-                'Average',
-                'Center-weighted average',
-                'Spot',
-                'Multi-spot',
-                'Pattern',
-                'Partial'
-            ];
-            const index = formatted.meteringMode as any;
-            formatted.meteringMode = modes[index] || 'Unknown';
-        }
-        
-        // Format flash
-        if (formatted.flash !== undefined) {
-            const flash = formatted.flash as any;
-            formatted.flash = (flash & 1) ? 'Flash fired' : 'Flash did not fire';
-        }
-        
-        return formatted;
-    }
-
-    /**
-     * Parse EXIF date string
-     */
-    private parseExifDate(dateStr: string): Date {
-        // EXIF date format: "YYYY:MM:DD HH:MM:SS"
-        const parts = dateStr.split(' ');
-        if (parts.length !== 2) return new Date(dateStr);
-        
-        const dateParts = parts[0].split(':');
-        const timeParts = parts[1].split(':');
-        
-        if (dateParts.length !== 3 || timeParts.length !== 3) {
-            return new Date(dateStr);
-        }
-        
-        return new Date(
-            parseInt(dateParts[0]),
-            parseInt(dateParts[1]) - 1,
-            parseInt(dateParts[2]),
-            parseInt(timeParts[0]),
-            parseInt(timeParts[1]),
-            parseInt(timeParts[2])
-        );
-    }
-
-    /**
-     * Get uint16 with endianness and bounds checking
-     */
-    private getUint16(dataView: DataView, offset: number, littleEndian: boolean): number {
-        if (offset + 2 > dataView.byteLength) {
-            console.error('Uint16 read exceeds buffer bounds');
-            return 0;
-        }
-        return dataView.getUint16(offset, littleEndian);
-    }
-
-    /**
-     * Get uint32 with endianness and bounds checking
-     */
-    private getUint32(dataView: DataView, offset: number, littleEndian: boolean): number {
-        if (offset + 4 > dataView.byteLength) {
-            console.error('Uint32 read exceeds buffer bounds');
-            return 0;
-        }
-        return dataView.getUint32(offset, littleEndian);
-    }
-
-    /**
-     * Create EXIF display panel
-     */
-    createExifPanel(exifData: ExifData): HTMLElement {
-        const panel = document.createElement('div');
-        panel.className = 'exif-panel';
-        panel.style.cssText = `
-            background: rgba(0, 0, 0, 0.9);
-            color: white;
-            padding: 15px;
-            border-radius: 8px;
-            max-width: 400px;
-            max-height: 500px;
-            overflow-y: auto;
-            font-size: 12px;
-        `;
-
-        const sections = [
-            {
-                title: 'Camera',
-                fields: ['make', 'model', 'lensModel']
-            },
-            {
-                title: 'Settings',
-                fields: ['exposureTime', 'fNumber', 'iso', 'focalLength', 'exposureProgram', 'meteringMode', 'flash']
-            },
-            {
-                title: 'Image',
-                fields: ['imageWidth', 'imageHeight', 'orientation', 'colorSpace', 'whiteBalance']
-            },
-            {
-                title: 'Date/Time',
-                fields: ['dateTimeOriginal', 'dateTime']
-            },
-            {
-                title: 'Location',
-                fields: ['gpsLatitude', 'gpsLongitude', 'gpsAltitude']
-            },
-            {
-                title: 'Other',
-                fields: ['software', 'artist', 'copyright', 'imageDescription']
-            }
-        ];
-
-        sections.forEach(section => {
-            const hasData = section.fields.some(field => (exifData as any)[field]);
-            if (!hasData) return;
-
-            const sectionDiv = document.createElement('div');
-            sectionDiv.style.marginBottom = '15px';
-            
-            const title = document.createElement('h4');
-            // Use textContent for safe title insertion
-            title.textContent = section.title;
-            title.style.cssText = 'margin: 0 0 8px 0; color: #4CAF50;';
-            title.setAttribute('aria-label', `Section: ${section.title}`);
-            sectionDiv.appendChild(title);
-
-            section.fields.forEach(field => {
-                const value = (exifData as any)[field];
-                if (!value) return;
-
-                const row = document.createElement('div');
-                row.style.cssText = 'display: flex; justify-content: space-between; margin: 4px 0;';
-                
-                const label = document.createElement('span');
-                // Use textContent for safe text insertion
-                label.textContent = this.formatFieldName(field) + ':';
-                label.style.color = '#aaa';
-                
-                const val = document.createElement('span');
-                // Use textContent for safe value insertion  
-                val.textContent = this.formatFieldValue(field, value);
-                val.style.textAlign = 'right';
-                
-                row.appendChild(label);
-                row.appendChild(val);
-                sectionDiv.appendChild(row);
-            });
-
-            panel.appendChild(sectionDiv);
-        });
-
-        // Add GPS map link if coordinates available
-        if (exifData.gpsLatitude && exifData.gpsLongitude) {
-            const mapLink = document.createElement('a');
-            mapLink.href = `https://www.google.com/maps?q=${exifData.gpsLatitude},${exifData.gpsLongitude}`;
-            mapLink.target = '_blank';
-            mapLink.textContent = 'View on Map';
-            mapLink.style.cssText = `
-                display: inline-block;
-                margin-top: 10px;
-                padding: 8px 12px;
-                background: #4CAF50;
-                color: white;
-                text-decoration: none;
-                border-radius: 4px;
-            `;
-            panel.appendChild(mapLink);
-        }
-
-        return panel;
-    }
-
-    /**
-     * Format field name for display
-     */
-    private formatFieldName(field: string): string {
-        const names: Record<string, string> = {
-            make: 'Camera Make',
-            model: 'Camera Model',
-            lensModel: 'Lens',
-            exposureTime: 'Shutter Speed',
-            fNumber: 'Aperture',
-            iso: 'ISO',
-            focalLength: 'Focal Length',
-            exposureProgram: 'Mode',
-            meteringMode: 'Metering',
-            flash: 'Flash',
-            imageWidth: 'Width',
-            imageHeight: 'Height',
-            orientation: 'Orientation',
-            colorSpace: 'Color Space',
-            whiteBalance: 'White Balance',
-            dateTimeOriginal: 'Date Taken',
-            dateTime: 'Date Modified',
-            gpsLatitude: 'Latitude',
-            gpsLongitude: 'Longitude',
-            gpsAltitude: 'Altitude',
-            software: 'Software',
-            artist: 'Artist',
-            copyright: 'Copyright',
-            imageDescription: 'Description'
-        };
-        return names[field] || field;
-    }
-
-    /**
-     * Format field value for display
-     */
-    private formatFieldValue(field: string, value: any): string {
-        if (value instanceof Date) {
-            return value.toLocaleString();
-        }
-        
-        switch (field) {
-            case 'fNumber':
-                return `f/${value}`;
-            case 'focalLength':
-                return `${value}mm`;
-            case 'gpsLatitude':
-            case 'gpsLongitude':
-                return value.toFixed(6) + '°';
-            case 'gpsAltitude':
-                return `${value.toFixed(1)}m`;
-            case 'imageWidth':
-            case 'imageHeight':
-                return `${value}px`;
-            default:
-                return String(value);
-        }
-    }
-
-    /**
-     * Add to cache with LRU eviction
-     */
-    private addToCache(key: string, data: ExifData): void {
-        // Remove from order if exists
-        const existingIndex = this.cacheOrder.indexOf(key);
-        if (existingIndex !== -1) {
-            this.cacheOrder.splice(existingIndex, 1);
-        }
-        
-        // Add to end
-        this.cacheOrder.push(key);
-        this.exifCache.set(key, data);
-        
-        // Evict oldest if over limit
-        while (this.cacheOrder.length > this.MAX_CACHE_SIZE) {
-            const oldestKey = this.cacheOrder.shift();
-            if (oldestKey) {
-                this.exifCache.delete(oldestKey);
-            }
-        }
-    }
-    
-    /**
-     * Update cache order for LRU
-     */
-    private updateCacheOrder(key: string): void {
-        const index = this.cacheOrder.indexOf(key);
-        if (index !== -1) {
-            this.cacheOrder.splice(index, 1);
-            this.cacheOrder.push(key);
-        }
-    }
-    
-    /**
-     * Clear EXIF cache
-     */
-    clearCache(): void {
-        this.exifCache.clear();
-        this.cacheOrder = [];
-    }
-}
-
-export default ImageExifService.getInstance();

apps/client/src/services/image_sharing.ts

@@ -1,681 +0,0 @@
-/**
- * Image Sharing and Export Module for Trilium Notes
- * Provides functionality for sharing, downloading, and exporting images
- */
-
-import server from './server.js';
-import utils from './utils.js';
-import toastService from './toast.js';
-import type FNote from '../entities/fnote.js';
-import { ImageValidator, withErrorBoundary, MemoryMonitor, ImageError, ImageErrorType } from './image_error_handler.js';
-
-/**
- * Export format options
- */
-export type ExportFormat = 'original' | 'jpeg' | 'png' | 'webp';
-
-/**
- * Export size presets
- */
-export type SizePreset = 'original' | 'thumbnail' | 'small' | 'medium' | 'large' | 'custom';
-
-/**
- * Export configuration
- */
-export interface ExportConfig {
-    format: ExportFormat;
-    quality: number; // 0-100 for JPEG/WebP
-    size: SizePreset;
-    customWidth?: number;
-    customHeight?: number;
-    maintainAspectRatio: boolean;
-    addWatermark: boolean;
-    watermarkText?: string;
-    watermarkPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
-    watermarkOpacity?: number;
-}
-
-/**
- * Share options
- */
-export interface ShareOptions {
-    method: 'link' | 'email' | 'social';
-    expiresIn?: number; // Hours
-    password?: string;
-    allowDownload: boolean;
-    trackViews: boolean;
-}
-
-/**
- * Share link data
- */
-export interface ShareLink {
-    url: string;
-    shortUrl?: string;
-    expiresAt?: Date;
-    password?: string;
-    views: number;
-    maxViews?: number;
-    created: Date;
-}
-
-/**
- * Size presets in pixels
- */
-const SIZE_PRESETS = {
-    thumbnail: { width: 150, height: 150 },
-    small: { width: 400, height: 400 },
-    medium: { width: 800, height: 800 },
-    large: { width: 1600, height: 1600 }
-};
-
-/**
- * ImageSharingService handles image sharing, downloading, and exporting
- */
-class ImageSharingService {
-    private static instance: ImageSharingService;
-    private activeShares: Map<string, ShareLink> = new Map();
-    private downloadCanvas?: HTMLCanvasElement;
-    private downloadContext?: CanvasRenderingContext2D;
-    
-    // Canvas size limits for security and memory management
-    private readonly MAX_CANVAS_SIZE = 8192; // Maximum width/height
-    private readonly MAX_CANVAS_AREA = 50000000; // 50 megapixels
-
-    private defaultExportConfig: ExportConfig = {
-        format: 'original',
-        quality: 90,
-        size: 'original',
-        maintainAspectRatio: true,
-        addWatermark: false,
-        watermarkPosition: 'bottom-right',
-        watermarkOpacity: 0.5
-    };
-
-    private constructor() {
-        // Initialize download canvas
-        this.downloadCanvas = document.createElement('canvas');
-        this.downloadContext = this.downloadCanvas.getContext('2d') || undefined;
-    }
-
-    static getInstance(): ImageSharingService {
-        if (!ImageSharingService.instance) {
-            ImageSharingService.instance = new ImageSharingService();
-        }
-        return ImageSharingService.instance;
-    }
-
-    /**
-     * Download image with options
-     */
-    async downloadImage(
-        src: string,
-        filename: string,
-        config?: Partial<ExportConfig>
-    ): Promise<void> {
-        await withErrorBoundary(async () => {
-            // Validate inputs
-            ImageValidator.validateUrl(src);
-            const sanitizedFilename = ImageValidator.sanitizeFilename(filename);
-            const finalConfig = { ...this.defaultExportConfig, ...config };
-            
-            // Load image
-            const img = await this.loadImage(src);
-            
-            // Process image based on config
-            const processedBlob = await this.processImage(img, finalConfig);
-            
-            // Create download link
-            const url = URL.createObjectURL(processedBlob);
-            const link = document.createElement('a');
-            link.href = url;
-            
-            // Determine filename with extension
-            const extension = finalConfig.format === 'original' 
-                ? this.getOriginalExtension(sanitizedFilename) 
-                : finalConfig.format;
-            const finalFilename = this.ensureExtension(sanitizedFilename, extension);
-            
-            link.download = finalFilename;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            
-            // Cleanup
-            URL.revokeObjectURL(url);
-            
-            toastService.showMessage(`Downloaded ${finalFilename}`);
-        });
-    }
-
-    /**
-     * Process image according to export configuration
-     */
-    private async processImage(img: HTMLImageElement, config: ExportConfig): Promise<Blob> {
-        if (!this.downloadCanvas || !this.downloadContext) {
-            throw new Error('Canvas not initialized');
-        }
-
-        // Calculate dimensions
-        const { width, height } = this.calculateDimensions(
-            img.naturalWidth,
-            img.naturalHeight,
-            config
-        );
-
-        // Validate canvas dimensions
-        ImageValidator.validateDimensions(width, height);
-        
-        // Check memory availability
-        const estimatedMemory = MemoryMonitor.estimateImageMemory(width, height);
-        if (!MemoryMonitor.checkMemoryAvailable(estimatedMemory)) {
-            throw new ImageError(
-                ImageErrorType.MEMORY_ERROR,
-                'Insufficient memory to process image',
-                { width, height, estimatedMemory }
-            );
-        }
-        
-        // Set canvas size
-        this.downloadCanvas.width = width;
-        this.downloadCanvas.height = height;
-
-        // Clear canvas
-        this.downloadContext.fillStyle = 'white';
-        this.downloadContext.fillRect(0, 0, width, height);
-
-        // Draw image
-        this.downloadContext.drawImage(img, 0, 0, width, height);
-
-        // Add watermark if enabled
-        if (config.addWatermark && config.watermarkText) {
-            this.addWatermark(this.downloadContext, width, height, config);
-        }
-
-        // Convert to blob
-        return new Promise((resolve, reject) => {
-            const mimeType = this.getMimeType(config.format);
-            const quality = config.quality / 100;
-            
-            this.downloadCanvas!.toBlob(
-                (blob) => {
-                    if (blob) {
-                        resolve(blob);
-                    } else {
-                        reject(new Error('Failed to create blob'));
-                    }
-                },
-                mimeType,
-                quality
-            );
-        });
-    }
-
-    /**
-     * Calculate dimensions based on size preset
-     */
-    private calculateDimensions(
-        originalWidth: number,
-        originalHeight: number,
-        config: ExportConfig
-    ): { width: number; height: number } {
-        if (config.size === 'original') {
-            return { width: originalWidth, height: originalHeight };
-        }
-
-        if (config.size === 'custom' && config.customWidth && config.customHeight) {
-            if (config.maintainAspectRatio) {
-                const aspectRatio = originalWidth / originalHeight;
-                const targetRatio = config.customWidth / config.customHeight;
-                
-                if (aspectRatio > targetRatio) {
-                    return {
-                        width: config.customWidth,
-                        height: Math.round(config.customWidth / aspectRatio)
-                    };
-                } else {
-                    return {
-                        width: Math.round(config.customHeight * aspectRatio),
-                        height: config.customHeight
-                    };
-                }
-            }
-            return { width: config.customWidth, height: config.customHeight };
-        }
-
-        // Use preset
-        const preset = SIZE_PRESETS[config.size as keyof typeof SIZE_PRESETS];
-        if (!preset) {
-            return { width: originalWidth, height: originalHeight };
-        }
-
-        if (config.maintainAspectRatio) {
-            const aspectRatio = originalWidth / originalHeight;
-            const maxWidth = preset.width;
-            const maxHeight = preset.height;
-            
-            let width = originalWidth;
-            let height = originalHeight;
-            
-            if (width > maxWidth) {
-                width = maxWidth;
-                height = Math.round(width / aspectRatio);
-            }
-            
-            if (height > maxHeight) {
-                height = maxHeight;
-                width = Math.round(height * aspectRatio);
-            }
-            
-            return { width, height };
-        }
-
-        return preset;
-    }
-
-    /**
-     * Add watermark to canvas
-     */
-    private addWatermark(
-        ctx: CanvasRenderingContext2D,
-        width: number,
-        height: number,
-        config: ExportConfig
-    ): void {
-        if (!config.watermarkText) return;
-
-        ctx.save();
-        
-        // Set watermark style
-        ctx.globalAlpha = config.watermarkOpacity || 0.5;
-        ctx.fillStyle = 'white';
-        ctx.strokeStyle = 'black';
-        ctx.lineWidth = 2;
-        ctx.font = `${Math.min(width, height) * 0.05}px Arial`;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-
-        // Calculate position
-        let x = width / 2;
-        let y = height / 2;
-        
-        switch (config.watermarkPosition) {
-            case 'top-left':
-                x = width * 0.1;
-                y = height * 0.1;
-                ctx.textAlign = 'left';
-                break;
-            case 'top-right':
-                x = width * 0.9;
-                y = height * 0.1;
-                ctx.textAlign = 'right';
-                break;
-            case 'bottom-left':
-                x = width * 0.1;
-                y = height * 0.9;
-                ctx.textAlign = 'left';
-                break;
-            case 'bottom-right':
-                x = width * 0.9;
-                y = height * 0.9;
-                ctx.textAlign = 'right';
-                break;
-        }
-
-        // Draw watermark with outline
-        ctx.strokeText(config.watermarkText, x, y);
-        ctx.fillText(config.watermarkText, x, y);
-        
-        ctx.restore();
-    }
-
-    /**
-     * Generate shareable link for image
-     */
-    async generateShareLink(
-        noteId: string,
-        options?: Partial<ShareOptions>
-    ): Promise<ShareLink> {
-        try {
-            const finalOptions = {
-                method: 'link' as const,
-                allowDownload: true,
-                trackViews: false,
-                ...options
-            };
-
-            // Create share token on server
-            const response = await server.post(`notes/${noteId}/share`, {
-                type: 'image',
-                expiresIn: finalOptions.expiresIn,
-                password: finalOptions.password,
-                allowDownload: finalOptions.allowDownload,
-                trackViews: finalOptions.trackViews
-            });
-
-            const shareLink: ShareLink = {
-                url: `${window.location.origin}/share/${response.token}`,
-                shortUrl: response.shortUrl,
-                expiresAt: response.expiresAt ? new Date(response.expiresAt) : undefined,
-                password: finalOptions.password,
-                views: 0,
-                maxViews: response.maxViews,
-                created: new Date()
-            };
-
-            // Store in active shares
-            this.activeShares.set(response.token, shareLink);
-
-            return shareLink;
-        } catch (error) {
-            console.error('Failed to generate share link:', error);
-            throw error;
-        }
-    }
-
-    /**
-     * Copy image or link to clipboard
-     */
-    async copyToClipboard(
-        src: string,
-        type: 'image' | 'link' = 'link'
-    ): Promise<void> {
-        await withErrorBoundary(async () => {
-            // Validate URL
-            ImageValidator.validateUrl(src);
-            if (type === 'link') {
-                // Copy URL to clipboard
-                await navigator.clipboard.writeText(src);
-                toastService.showMessage('Link copied to clipboard');
-            } else {
-                // Copy image data to clipboard
-                const img = await this.loadImage(src);
-                
-                if (!this.downloadCanvas || !this.downloadContext) {
-                    throw new Error('Canvas not initialized');
-                }
-                
-                // Validate dimensions before setting
-                ImageValidator.validateDimensions(img.naturalWidth, img.naturalHeight);
-                
-                this.downloadCanvas.width = img.naturalWidth;
-                this.downloadCanvas.height = img.naturalHeight;
-                this.downloadContext.drawImage(img, 0, 0);
-                
-                this.downloadCanvas.toBlob(async (blob) => {
-                    if (blob) {
-                        try {
-                            const item = new ClipboardItem({ 'image/png': blob });
-                            await navigator.clipboard.write([item]);
-                            toastService.showMessage('Image copied to clipboard');
-                        } catch (error) {
-                            console.error('Failed to copy image to clipboard:', error);
-                            // Fallback to copying link
-                            await navigator.clipboard.writeText(src);
-                            toastService.showMessage('Image link copied to clipboard');
-                        }
-                    }
-                });
-            }
-        });
-    }
-
-    /**
-     * Share via native share API (mobile)
-     */
-    async shareNative(
-        src: string,
-        title: string,
-        text?: string
-    ): Promise<void> {
-        if (!navigator.share) {
-            throw new Error('Native share not supported');
-        }
-
-        try {
-            // Try to share with file
-            const img = await this.loadImage(src);
-            const blob = await this.processImage(img, this.defaultExportConfig);
-            const file = new File([blob], `${title}.${this.defaultExportConfig.format}`, {
-                type: this.getMimeType(this.defaultExportConfig.format)
-            });
-
-            await navigator.share({
-                title,
-                text: text || `Check out this image: ${title}`,
-                files: [file]
-            });
-        } catch (error) {
-            // Fallback to sharing URL
-            try {
-                await navigator.share({
-                    title,
-                    text: text || `Check out this image: ${title}`,
-                    url: src
-                });
-            } catch (shareError) {
-                console.error('Failed to share:', shareError);
-                throw shareError;
-            }
-        }
-    }
-
-    /**
-     * Export multiple images as ZIP
-     */
-    async exportBatch(
-        images: Array<{ src: string; filename: string }>,
-        config?: Partial<ExportConfig>
-    ): Promise<void> {
-        try {
-            // Dynamic import of JSZip
-            const JSZip = (await import('jszip')).default;
-            const zip = new JSZip();
-            
-            const finalConfig = { ...this.defaultExportConfig, ...config };
-            
-            // Process each image
-            for (const { src, filename } of images) {
-                try {
-                    const img = await this.loadImage(src);
-                    const blob = await this.processImage(img, finalConfig);
-                    const extension = finalConfig.format === 'original' 
-                        ? this.getOriginalExtension(filename) 
-                        : finalConfig.format;
-                    const finalFilename = this.ensureExtension(filename, extension);
-                    
-                    zip.file(finalFilename, blob);
-                } catch (error) {
-                    console.error(`Failed to process image ${filename}:`, error);
-                }
-            }
-            
-            // Generate and download ZIP
-            const zipBlob = await zip.generateAsync({ type: 'blob' });
-            const url = URL.createObjectURL(zipBlob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = `images_${Date.now()}.zip`;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(url);
-            
-            toastService.showMessage(`Exported ${images.length} images`);
-        } catch (error) {
-            console.error('Failed to export images:', error);
-            toastService.showError('Failed to export images');
-            throw error;
-        }
-    }
-
-    /**
-     * Open share dialog
-     */
-    openShareDialog(
-        src: string,
-        title: string,
-        noteId?: string
-    ): void {
-        // Create modal dialog
-        const dialog = document.createElement('div');
-        dialog.className = 'share-dialog-overlay';
-        dialog.style.cssText = `
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.5);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 10000;
-        `;
-
-        const content = document.createElement('div');
-        content.className = 'share-dialog';
-        content.style.cssText = `
-            background: white;
-            border-radius: 8px;
-            padding: 20px;
-            width: 400px;
-            max-width: 90%;
-        `;
-
-        content.innerHTML = `
-            <h3 style="margin: 0 0 15px 0;">Share Image</h3>
-            <div class="share-options" style="display: flex; flex-direction: column; gap: 10px;">
-                <button class="share-copy-link" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">
-                    <i class="bx bx-link"></i> Copy Link
-                </button>
-                <button class="share-copy-image" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">
-                    <i class="bx bx-copy"></i> Copy Image
-                </button>
-                <button class="share-download" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">
-                    <i class="bx bx-download"></i> Download
-                </button>
-                ${navigator.share ? `
-                    <button class="share-native" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">
-                        <i class="bx bx-share"></i> Share...
-                    </button>
-                ` : ''}
-                ${noteId ? `
-                    <button class="share-generate-link" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">
-                        <i class="bx bx-link-external"></i> Generate Share Link
-                    </button>
-                ` : ''}
-            </div>
-            <button class="close-dialog" style="margin-top: 15px; padding: 8px 16px; background: #f0f0f0; border: none; border-radius: 4px; cursor: pointer;">
-                Close
-            </button>
-        `;
-
-        // Add event handlers
-        content.querySelector('.share-copy-link')?.addEventListener('click', () => {
-            this.copyToClipboard(src, 'link');
-            dialog.remove();
-        });
-
-        content.querySelector('.share-copy-image')?.addEventListener('click', () => {
-            this.copyToClipboard(src, 'image');
-            dialog.remove();
-        });
-
-        content.querySelector('.share-download')?.addEventListener('click', () => {
-            this.downloadImage(src, title);
-            dialog.remove();
-        });
-
-        content.querySelector('.share-native')?.addEventListener('click', () => {
-            this.shareNative(src, title);
-            dialog.remove();
-        });
-
-        content.querySelector('.share-generate-link')?.addEventListener('click', async () => {
-            if (noteId) {
-                const link = await this.generateShareLink(noteId);
-                await this.copyToClipboard(link.url, 'link');
-                dialog.remove();
-            }
-        });
-
-        content.querySelector('.close-dialog')?.addEventListener('click', () => {
-            dialog.remove();
-        });
-
-        dialog.appendChild(content);
-        document.body.appendChild(dialog);
-    }
-
-    /**
-     * Load image from URL
-     */
-    private loadImage(src: string): Promise<HTMLImageElement> {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.crossOrigin = 'anonymous';
-            img.onload = () => resolve(img);
-            img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
-            img.src = src;
-        });
-    }
-
-    /**
-     * Get MIME type for format
-     */
-    private getMimeType(format: ExportFormat): string {
-        switch (format) {
-            case 'jpeg':
-                return 'image/jpeg';
-            case 'png':
-                return 'image/png';
-            case 'webp':
-                return 'image/webp';
-            default:
-                return 'image/png';
-        }
-    }
-
-    /**
-     * Get original extension from filename
-     */
-    private getOriginalExtension(filename: string): string {
-        const parts = filename.split('.');
-        if (parts.length > 1) {
-            return parts[parts.length - 1].toLowerCase();
-        }
-        return 'png';
-    }
-
-    /**
-     * Ensure filename has correct extension
-     */
-    private ensureExtension(filename: string, extension: string): string {
-        const parts = filename.split('.');
-        if (parts.length > 1) {
-            parts[parts.length - 1] = extension;
-            return parts.join('.');
-        }
-        return `${filename}.${extension}`;
-    }
-
-    /**
-     * Cleanup resources
-     */
-    cleanup(): void {
-        this.activeShares.clear();
-        
-        // Clean up canvas memory
-        if (this.downloadCanvas && this.downloadContext) {
-            this.downloadContext.clearRect(0, 0, this.downloadCanvas.width, this.downloadCanvas.height);
-            this.downloadCanvas.width = 0;
-            this.downloadCanvas.height = 0;
-        }
-        
-        this.downloadCanvas = undefined;
-        this.downloadContext = undefined;
-    }
-}
-
-export default ImageSharingService.getInstance();

apps/client/src/services/import.ts

@@ -4,6 +4,7 @@ import ws from "./ws.js";
 import utils from "./utils.js";
 import appContext from "../components/app_context.js";
 import { t } from "./i18n.js";
+import { WebSocketMessage } from "@triliumnext/commons";
 
 type BooleanLike = boolean | "true" | "false";
 
@@ -66,7 +67,7 @@ function makeToast(id: string, message: string): ToastOptions {
 }
 
 ws.subscribeToMessages(async (message) => {
-    if (message.taskType !== "importNotes") {
+    if (!("taskType" in message) || message.taskType !== "importNotes") {
         return;
     }
 
@@ -87,8 +88,8 @@ ws.subscribeToMessages(async (message) => {
     }
 });
 
-ws.subscribeToMessages(async (message) => {
-    if (message.taskType !== "importAttachments") {
+ws.subscribeToMessages(async (message: WebSocketMessage) => {
+    if (!("taskType" in message) || message.taskType !== "importAttachments") {
         return;
     }
 

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

@@ -1,5 +1,5 @@
 import { describe, expect, it } from "vitest";
-import { byBookType, byNoteType } from "./help_button.js";
+import { byBookType, byNoteType } from "./in_app_help.js";
 import fs from "fs";
 import type { HiddenSubtreeItem } from "@triliumnext/commons";
 import path from "path";
@@ -25,7 +25,7 @@ describe("Help button", () => {
             ...Object.values(byBookType)
         ].filter((noteId) => noteId) as string[];
 
-        const metaPath = path.resolve(path.join(__dirname, "../../../../server/src/assets/doc_notes/en/User Guide/!!!meta.json"));
+        const metaPath = path.resolve(path.join(__dirname, "../../../server/src/assets/doc_notes/en/User Guide/!!!meta.json"));
         const meta: HiddenSubtreeItem[] = JSON.parse(fs.readFileSync(metaPath, "utf-8"));
         const allNoteIds = new Set(getNoteIds(meta));
 

apps/client/src/services/in_app_help.ts

@@ -0,0 +1,44 @@
+import { NoteType } from "@triliumnext/commons";
+import FNote from "../entities/fnote";
+import { ViewTypeOptions } from "../widgets/collections/interface";
+
+export const byNoteType: Record<Exclude<NoteType, "book">, string | null> = {
+    canvas: null,
+    code: null,
+    contentWidget: null,
+    doc: null,
+    file: null,
+    image: null,
+    launcher: null,
+    mermaid: "s1aBHPd79XYj",
+    mindMap: null,
+    noteMap: null,
+    relationMap: null,
+    render: null,
+    search: null,
+    text: null,
+    webView: null,
+    aiChat: null
+};
+
+export const byBookType: Record<ViewTypeOptions, string | null> = {
+    list: "mULW0Q3VojwY",
+    grid: "8QqnMzx393bx",
+    calendar: "xWbu3jpNWapp",
+    table: "2FvYrpmOXm29",
+    geoMap: "81SGnPGMk7Xc",
+    board: "CtBQqbwXDx1w",
+    presentation: null
+};
+
+export function getHelpUrlForNote(note: FNote | null | undefined) {
+    if (note && note.type !== "book" && byNoteType[note.type]) {
+        return byNoteType[note.type];
+    } else if (note?.hasLabel("calendarRoot")) {
+        return "l0tKav7yLHGF";
+    } else if (note?.hasLabel("textSnippet")) {
+        return "pwc194wlRzcH";
+    } else if (note && note.type === "book") {
+        return byBookType[note.getAttributeValue("label", "viewType") as ViewTypeOptions ?? ""]
+    }
+}

apps/client/src/services/keyboard_actions.ts

@@ -62,6 +62,10 @@ async function getAction(actionName: string, silent = false) {
     return action;
 }
 
+export function getActionSync(actionName: string) {
+    return keyboardActionRepo[actionName];
+}
+
 function updateDisplayedShortcuts($container: JQuery<HTMLElement>) {
     //@ts-ignore
     //TODO: each() does not support async callbacks.

apps/client/src/services/link.ts

@@ -3,16 +3,8 @@ 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";
-
-// Be consistent with `allowedSchemes` in `src\services\html_sanitizer.ts`
-// TODO: Deduplicate with server once we can.
-export const ALLOWED_PROTOCOLS = [
-    'http', 'https', 'ftp', 'ftps', 'mailto', 'data', 'evernote', 'file', 'facetime', 'gemini', 'git',
-    'gopher', 'imap', 'irc', 'irc6', 'jabber', 'jar', 'lastfm', 'ldap', 'ldaps', 'magnet', 'message',
-    'mumble', 'nfs', 'onenote', 'pop', 'rmi', 's3', 'sftp', 'skype', 'sms', 'spotify', 'steam', 'svn', 'udp',
-    'view-source', 'vlc', 'vnc', 'ws', 'wss', 'xmpp', 'jdbc', 'slack', 'tel', 'smb', 'zotero', 'geo',
-    'mid'
-];
+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);
@@ -35,8 +27,7 @@ async function getLinkIcon(noteId: string, viewMode: ViewMode | undefined) {
     return icon;
 }
 
-// TODO: Remove `string` once all the view modes have been mapped.
-type ViewMode = "default" | "source" | "attachments" | "contextual-help" | string;
+export type ViewMode = "default" | "source" | "attachments" | "contextual-help";
 
 export interface ViewScope {
     /**
@@ -326,21 +317,7 @@ function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent
                 viewScope
             });
         } else if (isLeftClick) {
-            const ntxId = $(evt?.target as any)
-                .closest("[data-ntx-id]")
-                .attr("data-ntx-id");
-
-            const noteContext = ntxId ? appContext.tabManager.getNoteContextById(ntxId) : appContext.tabManager.getActiveContext();
-
-            if (noteContext) {
-                noteContext.setNote(notePath, { viewScope }).then(() => {
-                    if (noteContext !== appContext.tabManager.getActiveContext()) {
-                        appContext.tabManager.activateNoteContext(noteContext.ntxId);
-                    }
-                });
-            } else {
-                appContext.tabManager.openContextWithNote(notePath, { viewScope, activate: true });
-            }
+            openInCurrentNoteContext(evt, notePath, viewScope);
         }
     } else if (hrefLink) {
         const withinEditLink = $link?.hasClass("ck-link-actions__preview");

apps/client/src/services/load_results.ts

@@ -1,4 +1,4 @@
-import type { AttachmentRow } from "@triliumnext/commons";
+import type { AttachmentRow, EtapiTokenRow, OptionNames } from "@triliumnext/commons";
 import type { AttributeType } from "../entities/fattribute.js";
 import type { EntityChange } from "../server_types.js";
 
@@ -53,6 +53,7 @@ type EntityRowMappings = {
     options: OptionRow;
     revisions: RevisionRow;
     note_reordering: NoteReorderingRow;
+    etapi_tokens: EtapiTokenRow;
 };
 
 export type EntityRowNames = keyof EntityRowMappings;
@@ -66,8 +67,9 @@ export default class LoadResults {
     private revisionRows: RevisionRow[];
     private noteReorderings: string[];
     private contentNoteIdToComponentId: ContentNoteIdToComponentIdRow[];
-    private optionNames: string[];
+    private optionNames: OptionNames[];
     private attachmentRows: AttachmentRow[];
+    public hasEtapiTokenChanges: boolean = false;
 
     constructor(entityChanges: EntityChange[]) {
         const entities: Record<string, Record<string, any>> = {};
@@ -178,11 +180,11 @@ export default class LoadResults {
         return this.contentNoteIdToComponentId.find((l) => l.noteId === noteId && l.componentId !== componentId);
     }
 
-    addOption(name: string) {
+    addOption(name: OptionNames) {
         this.optionNames.push(name);
     }
 
-    isOptionReloaded(name: string) {
+    isOptionReloaded(name: OptionNames) {
         return this.optionNames.includes(name);
     }
 
@@ -215,7 +217,8 @@ export default class LoadResults {
             this.revisionRows.length === 0 &&
             this.contentNoteIdToComponentId.length === 0 &&
             this.optionNames.length === 0 &&
-            this.attachmentRows.length === 0
+            this.attachmentRows.length === 0 &&
+            !this.hasEtapiTokenChanges
         );
     }
 

apps/client/src/services/media_viewer.ts

@@ -1,552 +0,0 @@
-import PhotoSwipe from 'photoswipe';
-import type PhotoSwipeOptions from 'photoswipe';
-import type { DataSource, SlideData } from 'photoswipe';
-import 'photoswipe/style.css';
-import '../styles/photoswipe-mobile-a11y.css';
-import mobileA11yService, { type MobileA11yConfig } from './photoswipe_mobile_a11y.js';
-
-// Define Content type locally since it's not exported by PhotoSwipe
-interface Content {
-    width?: number;
-    height?: number;
-    [key: string]: any;
-}
-
-// Define AugmentedEvent type locally
-interface AugmentedEvent<T extends string> {
-    content: Content;
-    slide?: any;
-    preventDefault?: () => void;
-    [key: string]: any;
-}
-
-/**
- * Media item interface for PhotoSwipe gallery
- */
-export interface MediaItem {
-    src: string;
-    width?: number;
-    height?: number;
-    alt?: string;
-    title?: string;
-    noteId?: string;
-    element?: HTMLElement;
-    msrc?: string; // Thumbnail source
-}
-
-/**
- * Configuration options for the media viewer
- */
-export interface MediaViewerConfig {
-    bgOpacity?: number;
-    showHideOpacity?: boolean;
-    showAnimationDuration?: number;
-    hideAnimationDuration?: number;
-    allowPanToNext?: boolean;
-    spacing?: number;
-    maxSpreadZoom?: number;
-    getThumbBoundsFn?: (index: number) => { x: number; y: number; w: number } | undefined;
-    pinchToClose?: boolean;
-    closeOnScroll?: boolean;
-    closeOnVerticalDrag?: boolean;
-    mouseMovePan?: boolean;
-    arrowKeys?: boolean;
-    returnFocus?: boolean;
-    escKey?: boolean;
-    errorMsg?: string;
-    preloadFirstSlide?: boolean;
-    preload?: [number, number];
-    loop?: boolean;
-    wheelToZoom?: boolean;
-    mobileA11y?: MobileA11yConfig; // Mobile and accessibility configuration
-}
-
-/**
- * Event callbacks for media viewer
- */
-export interface MediaViewerCallbacks {
-    onOpen?: () => void;
-    onClose?: () => void;
-    onChange?: (index: number) => void;
-    onImageLoad?: (index: number, item: MediaItem) => void;
-    onImageError?: (index: number, item: MediaItem, error?: Error) => void;
-}
-
-/**
- * PhotoSwipe data item with original item reference
- */
-interface PhotoSwipeDataItem extends SlideData {
-    _originalItem?: MediaItem;
-}
-
-/**
- * Error handler for media viewer operations
- */
-class MediaViewerError extends Error {
-    constructor(message: string, public readonly cause?: unknown) {
-        super(message);
-        this.name = 'MediaViewerError';
-    }
-}
-
-/**
- * MediaViewerService manages the PhotoSwipe lightbox for viewing images and media
- * in Trilium Notes. Implements singleton pattern for global access.
- */
-class MediaViewerService {
-    private static instance: MediaViewerService;
-    private photoSwipe: PhotoSwipe | null = null;
-    private defaultConfig: MediaViewerConfig;
-    private currentItems: MediaItem[] = [];
-    private callbacks: MediaViewerCallbacks = {};
-    private cleanupHandlers: Array<() => void> = [];
-
-    private constructor() {
-        // Default configuration optimized for Trilium
-        this.defaultConfig = {
-            bgOpacity: 0.95,
-            showHideOpacity: true,
-            showAnimationDuration: 250,
-            hideAnimationDuration: 250,
-            allowPanToNext: true,
-            spacing: 0.12,
-            maxSpreadZoom: 4,
-            pinchToClose: true,
-            closeOnScroll: false,
-            closeOnVerticalDrag: true,
-            mouseMovePan: true,
-            arrowKeys: true,
-            returnFocus: true,
-            escKey: true,
-            errorMsg: 'The image could not be loaded',
-            preloadFirstSlide: true,
-            preload: [1, 2],
-            loop: true,
-            wheelToZoom: true
-        };
-
-        // Setup global cleanup on window unload
-        window.addEventListener('beforeunload', () => this.destroy());
-    }
-
-    /**
-     * Get singleton instance of MediaViewerService
-     */
-    static getInstance(): MediaViewerService {
-        if (!MediaViewerService.instance) {
-            MediaViewerService.instance = new MediaViewerService();
-        }
-        return MediaViewerService.instance;
-    }
-
-    /**
-     * Open the media viewer with specified items
-     */
-    open(items: MediaItem[], startIndex: number = 0, config?: Partial<MediaViewerConfig>, callbacks?: MediaViewerCallbacks): void {
-        try {
-            // Validate inputs
-            if (!items || items.length === 0) {
-                throw new MediaViewerError('No items provided to media viewer');
-            }
-            
-            if (startIndex < 0 || startIndex >= items.length) {
-                console.warn(`Invalid start index ${startIndex}, using 0`);
-                startIndex = 0;
-            }
-
-            // Close any existing viewer
-            this.close();
-
-            this.currentItems = items;
-            this.callbacks = callbacks || {};
-
-            // Prepare data source for PhotoSwipe with error handling
-            const dataSource: DataSource = items.map((item, index) => {
-                try {
-                    return this.prepareItem(item);
-                } catch (error) {
-                    console.error(`Failed to prepare item at index ${index}:`, error);
-                    // Return a minimal valid item as fallback
-                    return {
-                        src: item.src,
-                        width: 800,
-                        height: 600,
-                        alt: item.alt || 'Error loading image'
-                    } as PhotoSwipeDataItem;
-                }
-            });
-
-            // Merge configurations
-            const finalConfig = {
-                ...this.defaultConfig,
-                ...config,
-                dataSource,
-                index: startIndex,
-                errorMsg: config?.errorMsg || 'The image could not be loaded. Please try again.'
-            };
-
-            // Create and initialize PhotoSwipe
-            this.photoSwipe = new PhotoSwipe(finalConfig);
-
-            // Setup event handlers
-            this.setupEventHandlers();
-            
-            // Apply mobile and accessibility enhancements
-            if (config?.mobileA11y || this.shouldAutoEnhance()) {
-                mobileA11yService.enhancePhotoSwipe(this.photoSwipe, config?.mobileA11y);
-            }
-
-            // Initialize the viewer
-            this.photoSwipe.init();
-        } catch (error) {
-            console.error('Failed to open media viewer:', error);
-            // Cleanup on error
-            this.close();
-            // Re-throw as MediaViewerError
-            throw error instanceof MediaViewerError ? error : new MediaViewerError('Failed to open media viewer', error);
-        }
-    }
-
-    /**
-     * Open a single image in the viewer
-     */
-    openSingle(item: MediaItem, config?: Partial<MediaViewerConfig>, callbacks?: MediaViewerCallbacks): void {
-        this.open([item], 0, config, callbacks);
-    }
-
-    /**
-     * Close the media viewer
-     */
-    close(): void {
-        if (this.photoSwipe) {
-            this.photoSwipe.destroy();
-            this.photoSwipe = null;
-            this.cleanupEventHandlers();
-        }
-    }
-
-    /**
-     * Navigate to next item
-     */
-    next(): void {
-        if (this.photoSwipe) {
-            this.photoSwipe.next();
-        }
-    }
-
-    /**
-     * Navigate to previous item
-     */
-    prev(): void {
-        if (this.photoSwipe) {
-            this.photoSwipe.prev();
-        }
-    }
-
-    /**
-     * Go to specific slide by index
-     */
-    goTo(index: number): void {
-        if (this.photoSwipe && index >= 0 && index < this.currentItems.length) {
-            this.photoSwipe.goTo(index);
-        }
-    }
-
-    /**
-     * Get current slide index
-     */
-    getCurrentIndex(): number {
-        return this.photoSwipe ? this.photoSwipe.currIndex : -1;
-    }
-
-    /**
-     * Check if viewer is open
-     */
-    isOpen(): boolean {
-        return this.photoSwipe !== null;
-    }
-
-    /**
-     * Update configuration dynamically
-     */
-    updateConfig(config: Partial<MediaViewerConfig>): void {
-        this.defaultConfig = {
-            ...this.defaultConfig,
-            ...config
-        };
-    }
-
-    /**
-     * Prepare item for PhotoSwipe
-     */
-    private prepareItem(item: MediaItem): PhotoSwipeDataItem {
-        const prepared: PhotoSwipeDataItem = {
-            src: item.src,
-            alt: item.alt || '',
-            title: item.title
-        };
-
-        // If dimensions are provided, use them
-        if (item.width && item.height) {
-            prepared.width = item.width;
-            prepared.height = item.height;
-        } else {
-            // Default dimensions - will be updated when image loads
-            prepared.width = 0;
-            prepared.height = 0;
-        }
-
-        // Add thumbnail if provided
-        if (item.msrc) {
-            prepared.msrc = item.msrc;
-        }
-
-        // Store original item reference
-        prepared._originalItem = item;
-
-        return prepared;
-    }
-
-    /**
-     * Setup event handlers for PhotoSwipe
-     */
-    private setupEventHandlers(): void {
-        if (!this.photoSwipe) return;
-
-        // Opening event
-        const openHandler = () => {
-            if (this.callbacks.onOpen) {
-                this.callbacks.onOpen();
-            }
-        };
-        this.photoSwipe.on('openingAnimationEnd', openHandler);
-        this.cleanupHandlers.push(() => this.photoSwipe?.off('openingAnimationEnd', openHandler));
-
-        // Closing event
-        const closeHandler = () => {
-            if (this.callbacks.onClose) {
-                this.callbacks.onClose();
-            }
-        };
-        this.photoSwipe.on('close', closeHandler);
-        this.cleanupHandlers.push(() => this.photoSwipe?.off('close', closeHandler));
-
-        // Change event
-        const changeHandler = () => {
-            if (this.callbacks.onChange && this.photoSwipe) {
-                this.callbacks.onChange(this.photoSwipe.currIndex);
-            }
-        };
-        this.photoSwipe.on('change', changeHandler);
-        this.cleanupHandlers.push(() => this.photoSwipe?.off('change', changeHandler));
-
-        // Image load event - also update dimensions if needed
-        const loadCompleteHandler = (e: any) => {
-            try {
-                const { content } = e;
-                const extContent = content as Content & { type?: string; data?: HTMLImageElement; index?: number; _originalItem?: MediaItem };
-                
-                if (extContent.type === 'image' && extContent.data) {
-                    // Update dimensions if they were not provided
-                    if (content.width === 0 || content.height === 0) {
-                        const img = extContent.data;
-                        content.width = img.naturalWidth;
-                        content.height = img.naturalHeight;
-                        if (typeof extContent.index === 'number') {
-                            this.photoSwipe?.refreshSlideContent(extContent.index);
-                        }
-                    }
-
-                    if (this.callbacks.onImageLoad && typeof extContent.index === 'number' && extContent._originalItem) {
-                        this.callbacks.onImageLoad(extContent.index, extContent._originalItem);
-                    }
-                }
-            } catch (error) {
-                console.error('Error in loadComplete handler:', error);
-            }
-        };
-        this.photoSwipe.on('loadComplete', loadCompleteHandler);
-        this.cleanupHandlers.push(() => this.photoSwipe?.off('loadComplete', loadCompleteHandler));
-
-        // Image error event
-        const errorHandler = (e: any) => {
-            try {
-                const { content } = e;
-                const extContent = content as Content & { index?: number; _originalItem?: MediaItem };
-                
-                if (this.callbacks.onImageError && typeof extContent.index === 'number' && extContent._originalItem) {
-                    const error = new MediaViewerError(`Failed to load image at index ${extContent.index}`);
-                    this.callbacks.onImageError(extContent.index, extContent._originalItem, error);
-                }
-            } catch (error) {
-                console.error('Error in errorHandler:', error);
-            }
-        };
-        this.photoSwipe.on('loadError', errorHandler);
-        this.cleanupHandlers.push(() => this.photoSwipe?.off('loadError', errorHandler));
-    }
-
-    /**
-     * Cleanup event handlers
-     */
-    private cleanupEventHandlers(): void {
-        this.cleanupHandlers.forEach(handler => handler());
-        this.cleanupHandlers = [];
-    }
-
-    /**
-     * Destroy the service and cleanup resources
-     */
-    destroy(): void {
-        this.close();
-        this.currentItems = [];
-        this.callbacks = {};
-        
-        // Cleanup mobile and accessibility enhancements
-        mobileA11yService.cleanup();
-    }
-
-    /**
-     * Get dimensions from image element or URL with proper resource cleanup
-     */
-    async getImageDimensions(src: string): Promise<{ width: number; height: number }> {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            let resolved = false;
-            
-            const cleanup = () => {
-                img.onload = null;
-                img.onerror = null;
-                // Clear the src to help with garbage collection
-                if (!resolved) {
-                    img.src = '';
-                }
-            };
-            
-            img.onload = () => {
-                resolved = true;
-                const dimensions = {
-                    width: img.naturalWidth,
-                    height: img.naturalHeight
-                };
-                cleanup();
-                resolve(dimensions);
-            };
-            
-            img.onerror = () => {
-                const error = new MediaViewerError(`Failed to load image: ${src}`);
-                cleanup();
-                reject(error);
-            };
-            
-            // Set a timeout for image loading
-            const timeoutId = setTimeout(() => {
-                if (!resolved) {
-                    cleanup();
-                    reject(new MediaViewerError(`Image loading timeout: ${src}`));
-                }
-            }, 30000); // 30 second timeout
-            
-            img.src = src;
-            
-            // Clear timeout on success or error
-            // Store the original handlers with timeout cleanup
-            const originalOnload = img.onload;
-            const originalOnerror = img.onerror;
-            
-            img.onload = function(ev: Event) {
-                clearTimeout(timeoutId);
-                if (originalOnload) {
-                    originalOnload.call(img, ev);
-                }
-            };
-            
-            img.onerror = function(ev: Event | string) {
-                clearTimeout(timeoutId);
-                if (originalOnerror) {
-                    originalOnerror.call(img, ev);
-                }
-            };
-        });
-    }
-
-    /**
-     * Create items from image elements in a container with error isolation
-     */
-    async createItemsFromContainer(container: HTMLElement, selector: string = 'img'): Promise<MediaItem[]> {
-        const images = container.querySelectorAll<HTMLImageElement>(selector);
-        const items: MediaItem[] = [];
-
-        // Process each image with isolated error handling
-        const promises = Array.from(images).map(async (img) => {
-            try {
-                const item: MediaItem = {
-                    src: img.src,
-                    alt: img.alt || `Image ${items.length + 1}`,
-                    title: img.title || img.alt || `Image ${items.length + 1}`,
-                    element: img,
-                    width: img.naturalWidth || undefined,
-                    height: img.naturalHeight || undefined
-                };
-
-                // Try to get dimensions if not available
-                if (!item.width || !item.height) {
-                    try {
-                        const dimensions = await this.getImageDimensions(img.src);
-                        item.width = dimensions.width;
-                        item.height = dimensions.height;
-                    } catch (error) {
-                        // Log but don't fail - image will still be viewable
-                        console.warn(`Failed to get dimensions for image: ${img.src}`, error);
-                        // Set default dimensions as fallback
-                        item.width = 800;
-                        item.height = 600;
-                    }
-                }
-
-                return item;
-            } catch (error) {
-                // Log error but continue processing other images
-                console.error(`Failed to process image: ${img.src}`, error);
-                return null;
-            }
-        });
-
-        // Wait for all promises and filter out nulls
-        const results = await Promise.allSettled(promises);
-        for (const result of results) {
-            if (result.status === 'fulfilled' && result.value !== null) {
-                items.push(result.value);
-            }
-        }
-
-        return items;
-    }
-
-    /**
-     * Apply theme-specific styles
-     */
-    applyTheme(isDarkTheme: boolean): void {
-        // This will be expanded to modify PhotoSwipe's appearance based on Trilium's theme
-        const opacity = isDarkTheme ? 0.95 : 0.9;
-        this.updateConfig({ bgOpacity: opacity });
-    }
-    
-    /**
-     * Check if mobile/accessibility enhancements should be auto-enabled
-     */
-    private shouldAutoEnhance(): boolean {
-        // Auto-enable for touch devices
-        const isTouchDevice = 'ontouchstart' in window || 
-                             navigator.maxTouchPoints > 0;
-        
-        // Auto-enable if user has accessibility preferences
-        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-        const prefersHighContrast = window.matchMedia('(prefers-contrast: high)').matches;
-        
-        return isTouchDevice || prefersReducedMotion || prefersHighContrast;
-    }
-}
-
-// Export singleton instance
-export default MediaViewerService.getInstance();

apps/client/src/services/note_autocomplete.ts

@@ -36,6 +36,8 @@ export interface Suggestion {
     commandId?: string;
     commandDescription?: string;
     commandShortcut?: string;
+    attributeSnippet?: string;
+    highlightedAttributeSnippet?: string;
 }
 
 export interface Options {
@@ -323,7 +325,33 @@ function initNoteAutocomplete($el: JQuery<HTMLElement>, options?: Options) {
                             html += '</div>';
                             return html;
                         }
-                        return `<span class="${suggestion.icon ?? "bx bx-note"}"></span> ${suggestion.highlightedNotePathTitle}`;
+                        // Add special class for search-notes action
+                        const actionClass = suggestion.action === "search-notes" ? "search-notes-action" : "";
+
+                        // Choose appropriate icon based on action
+                        let iconClass = suggestion.icon ?? "bx bx-note";
+                        if (suggestion.action === "search-notes") {
+                            iconClass = "bx bx-search";
+                        } else if (suggestion.action === "create-note") {
+                            iconClass = "bx bx-plus";
+                        } else if (suggestion.action === "external-link") {
+                            iconClass = "bx bx-link-external";
+                        }
+
+                        // Simplified HTML structure without nested divs
+                        let html = `<div class="note-suggestion ${actionClass}">`;
+                        html += `<span class="icon ${iconClass}"></span>`;
+                        html += `<span class="text">`;
+                        html += `<span class="search-result-title">${suggestion.highlightedNotePathTitle}</span>`;
+
+                        // Add attribute snippet inline if available
+                        if (suggestion.highlightedAttributeSnippet) {
+                            html += `<span class="search-result-attributes">${suggestion.highlightedAttributeSnippet}</span>`;
+                        }
+
+                        html += `</span>`;
+                        html += `</div>`;
+                        return html;
                     }
                 },
                 // we can't cache identical searches because notes can be created / renamed, new recent notes can be added

apps/client/src/services/note_list_renderer.ts

@@ -1,71 +0,0 @@
-import type FNote from "../entities/fnote.js";
-import BoardView from "../widgets/view_widgets/board_view/index.js";
-import CalendarView from "../widgets/view_widgets/calendar_view.js";
-import GeoView from "../widgets/view_widgets/geo_view/index.js";
-import ListOrGridView from "../widgets/view_widgets/list_or_grid_view.js";
-import TableView from "../widgets/view_widgets/table_view/index.js";
-import type { ViewModeArgs } from "../widgets/view_widgets/view_mode.js";
-import type ViewMode from "../widgets/view_widgets/view_mode.js";
-
-const allViewTypes = ["list", "grid", "calendar", "table", "geoMap", "board"] as const;
-export type ArgsWithoutNoteId = Omit<ViewModeArgs, "noteIds">;
-export type ViewTypeOptions = typeof allViewTypes[number];
-
-export default class NoteListRenderer {
-
-    private viewType: ViewTypeOptions;
-    private args: ArgsWithoutNoteId;
-    public viewMode?: ViewMode<any>;
-
-    constructor(args: ArgsWithoutNoteId) {
-        this.args = args;
-        this.viewType = this.#getViewType(args.parentNote);
-    }
-
-    #getViewType(parentNote: FNote): ViewTypeOptions {
-        const viewType = parentNote.getLabelValue("viewType");
-
-        if (!(allViewTypes as readonly string[]).includes(viewType || "")) {
-            // when not explicitly set, decide based on the note type
-            return parentNote.type === "search" ? "list" : "grid";
-        } else {
-            return viewType as ViewTypeOptions;
-        }
-    }
-
-    get isFullHeight() {
-        switch (this.viewType) {
-            case "list":
-            case "grid":
-                return false;
-            default:
-                return true;
-        }
-    }
-
-    async renderList() {
-        const args = this.args;
-        const viewMode = this.#buildViewMode(args);
-        this.viewMode = viewMode;
-        await viewMode.beforeRender();
-        return await viewMode.renderList();
-    }
-
-    #buildViewMode(args: ViewModeArgs) {
-        switch (this.viewType) {
-            case "calendar":
-                return new CalendarView(args);
-            case "table":
-                return new TableView(args);
-            case "geoMap":
-                return new GeoView(args);
-            case "board":
-                return new BoardView(args);
-            case "list":
-            case "grid":
-            default:
-                return new ListOrGridView(this.viewType, args);
-        }
-    }
-
-}

apps/client/src/services/note_types.ts

@@ -1,7 +1,7 @@
 import { t } from "./i18n.js";
 import froca from "./froca.js";
 import server from "./server.js";
-import type { MenuCommandItem, MenuItem, MenuItemBadge } from "../menus/context_menu.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";
 
@@ -73,7 +73,7 @@ const BETA_BADGE = {
     title: t("note_types.beta-feature")
 };
 
-const SEPARATOR = { title: "----" };
+const SEPARATOR: MenuSeparatorItem = { kind: "separator" };
 
 const creationDateCache = new Map<string, Date>();
 let rootCreationDate: Date | undefined;
@@ -81,8 +81,8 @@ let rootCreationDate: Date | undefined;
 async function getNoteTypeItems(command?: TreeCommandNames) {
     const items: MenuItem<TreeCommandNames>[] = [
         ...getBlankNoteTypes(command),
-        ...await getBuiltInTemplates(t("note_types.collections"), command, true),
         ...await getBuiltInTemplates(null, command, false),
+        ...await getBuiltInTemplates(t("note_types.collections"), command, true),
         ...await getUserTemplates(command)
     ];
 
@@ -121,7 +121,10 @@ async function getUserTemplates(command?: TreeCommandNames) {
     }
 
     const items: MenuItem<TreeCommandNames>[] = [
-        SEPARATOR
+        {
+            title: t("note_type_chooser.templates"),
+            kind: "header"
+        }
     ];
 
     for (const templateNote of templateNotes) {
@@ -158,15 +161,15 @@ async function getBuiltInTemplates(title: string | null, command: TreeCommandNam
     if (title) {
         items.push({
             title: title,
-            enabled: false,
-            uiIcon: "bx bx-empty"
+            kind: "header"
         });
     } else {
         items.push(SEPARATOR);
     }
 
     for (const templateNote of childNotes) {
-        if (templateNote.hasLabel("collection") !== filterCollections) {
+        if (templateNote.hasLabel("collection") !== filterCollections ||
+            !templateNote.hasLabel("template")) {
             continue;
         }
 

apps/client/src/services/open.ts

@@ -35,7 +35,7 @@ function download(url: string) {
     }
 }
 
-function downloadFileNote(noteId: string) {
+export function downloadFileNote(noteId: string) {
     const url = `${getFileUrl("notes", noteId)}?${Date.now()}`; // don't use cache
 
     download(url);
@@ -163,7 +163,7 @@ async function openExternally(type: string, entityId: string, mime: string) {
     }
 }
 
-const openNoteExternally = async (noteId: string, mime: string) => await openExternally("notes", noteId, mime);
+export const openNoteExternally = async (noteId: string, mime: string) => await openExternally("notes", noteId, mime);
 const openAttachmentExternally = async (attachmentId: string, mime: string) => await openExternally("attachments", attachmentId, mime);
 
 function getHost() {