feat(client): implement photoswipe at different points

.editorconfig

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

.env

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

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

@@ -21,7 +21,7 @@ runs:
   # Certificate setup
   - name: Import Apple certificates
     if: inputs.os == 'macos'
-    uses: apple-actions/import-codesign-certs@v6
+    uses: apple-actions/import-codesign-certs@v5
     with:
       p12-file-base64: ${{ env.APPLE_APP_CERTIFICATE_BASE64 }}
       p12-password: ${{ env.APPLE_APP_CERTIFICATE_PASSWORD }}
@@ -30,7 +30,7 @@ runs:
 
   - name: Install Installer certificate
     if: inputs.os == 'macos'
-    uses: apple-actions/import-codesign-certs@v6
+    uses: apple-actions/import-codesign-certs@v5
     with:
       p12-file-base64: ${{ env.APPLE_INSTALLER_CERTIFICATE_BASE64 }}
       p12-password: ${{ env.APPLE_INSTALLER_CERTIFICATE_PASSWORD }}
@@ -74,7 +74,7 @@ runs:
 
   - name: Update build info
     shell: ${{ inputs.shell }}
-    run: pnpm run chore:update-build-info
+    run: npm run chore:update-build-info
 
   # Critical debugging configuration
   - name: Run electron-forge build with enhanced logging
@@ -86,8 +86,7 @@ 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 }}
-      TARGET_ARCH: ${{ inputs.arch }}
-    run: pnpm run --filter desktop electron-forge:make --arch=${{ inputs.arch }} --platform=${{ inputs.forge_platform }}
+    run: pnpm nx --project=desktop electron-forge:make -- --arch=${{ inputs.arch }} --platform=${{ inputs.forge_platform }}
 
   # Add DMG signing step
   - name: Sign DMG
@@ -163,25 +162,3 @@ 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@v6
+    uses: actions/setup-node@v4
     with:
-      node-version: 24
+      node-version: 22
       cache: "pnpm"
   - name: Install dependencies
     shell: bash
@@ -23,7 +23,7 @@ runs:
     shell: bash
     run: |
       pnpm run chore:update-build-info
-      pnpm run --filter server package
+      pnpm nx --project=server package
   - name: Prepare artifacts
     shell: bash
     run: |

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

@@ -1,103 +0,0 @@
-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/actions/report-size/action.yml

@@ -44,7 +44,7 @@ runs:
   steps:
     # Checkout branch to compare to [required]
     - name: Checkout base branch
-      uses: actions/checkout@v6
+      uses: actions/checkout@v5
       with:
         ref: ${{ inputs.branch }}
         path: br-base

.github/copilot-instructions.md

@@ -1,334 +0,0 @@
-# Trilium Notes - AI Coding Agent Instructions
-
-## Project Overview
-
-Trilium Notes is a hierarchical note-taking application with advanced features like synchronization, scripting, and rich text editing. Built as a TypeScript monorepo using pnpm, it implements a three-layer caching architecture (Becca/Froca/Shaca) with a widget-based UI system and supports extensive user scripting capabilities.
-
-## Essential Architecture Patterns
-
-### Three-Layer Cache System (Critical to Understand)
-- **Becca** (`apps/server/src/becca/`): Server-side entity cache, primary data source
-- **Froca** (`apps/client/src/services/froca.ts`): Client-side mirror synchronized via WebSocket
-- **Shaca** (`apps/server/src/share/`): Optimized cache for public/shared notes
-
-**Key insight**: Never bypass these caches with direct DB queries. Always use `becca.notes[noteId]`, `froca.getNote()`, or equivalent cache methods.
-
-### Entity Relationship Model
-Notes use a **multi-parent tree** via branches:
-- `BNote` - The note content and metadata
-- `BBranch` - Tree relationships (one note can have multiple parents via cloning)
-- `BAttribute` - Key-value metadata attached to notes (labels and relations)
-
-### Entity Change System & Sync
-Every entity modification (notes, branches, attributes) creates an `EntityChange` record that drives synchronization:
-
-```typescript
-// Entity changes are automatically tracked
-note.title = "New Title";
-note.save();  // Creates EntityChange record with changeId
-
-// Sync protocol via WebSocket
-ws.sendMessage({ type: 'sync-pull-in-progress', ... });
-```
-
-**Critical**: This is why you must use Becca/Froca methods instead of direct DB writes - they create the change tracking records needed for sync.
-
-### Entity Lifecycle & Events
-The event system (`apps/server/src/services/events.ts`) broadcasts entity lifecycle events:
-
-```typescript
-// Subscribe to events in widgets or services
-eventService.subscribe('noteChanged', ({ noteId }) => {
-    // React to note changes
-});
-
-// Common events: noteChanged, branchChanged, attributeChanged, noteDeleted
-// Widget method: entitiesReloadedEvent({loadResults}) for handling reloads
-```
-
-**Becca loader priorities**: Events are emitted in order (notes → branches → attributes) during initial load to ensure referential integrity.
-
-### TaskContext for Long Operations
-Use `TaskContext` for operations with progress reporting (imports, exports, bulk operations):
-
-```typescript
-const taskContext = new TaskContext("task-id", "import", "Import Notes");
-taskContext.increaseProgressCount();
-
-// WebSocket messages: { type: 'taskProgressCount', taskId, taskType, data, progressCount }
-
-**Pattern**: All long-running operations (delete note trees, export, import) use TaskContext to send WebSocket updates to the frontend.
-
-### Protected Session Handling
-Protected notes require an active encryption session:
-
-```typescript
-// Always check before accessing protected content
-if (note.isContentAvailable()) {
-    const content = note.getContent();  // Safe
-} else {
-    const title = note.getTitleOrProtected();  // Returns "[protected]"
-}
-
-// Protected session management
-protectedSessionService.isProtectedSessionAvailable()  // Check session
-protectedSessionService.startProtectedSession()  // After password entry
-```
-
-**Session timeout**: Protected sessions expire after inactivity. The encryption key is kept in memory only.
-
-### Attribute Inheritance Patterns
-Attributes can be inherited through three mechanisms:
-
-```typescript
-// 1. Standard inheritance (#hidePromotedAttributes ~hidePromotedAttributes)
-note.getInheritableAttributes()  // Walks up parent tree
-
-// 2. Child prefix inheritance (child:label copies to children)
-parentNote.setLabel("child:icon", "book")  // All children inherit this
-
-// 3. Template relation inheritance (#template=templateNoteId)
-note.setRelation("template", templateNoteId)
-note.getInheritedAttributes()  // Includes template's inheritable attributes
-```
-
-**Cycle prevention**: Inheritance tracking prevents infinite loops when notes reference each other.
-
-### Widget-Based UI Architecture
-All UI components extend from widget base classes (`apps/client/src/widgets/`):
-
-```typescript
-// Right panel widget (sidebar)
-class MyWidget extends RightPanelWidget {
-    get position() { return 100; }  // Order in panel
-    get parentWidget() { return 'right-pane'; }
-    isEnabled() { return this.note && this.note.hasLabel('myLabel'); }
-    async refreshWithNote(note) { /* Update UI */ }
-}
-
-// Note-aware widget (responds to note changes)
-class MyNoteWidget extends NoteContextAwareWidget {
-    async refreshWithNote(note) { /* Refresh when note changes */ }
-    async entitiesReloadedEvent({loadResults}) { /* Handle entity updates */ }
-}
-```
-
-**Important**: Widgets use jQuery (`this.$widget`) for DOM manipulation. Don't mix React patterns here.
-
-## Development Workflow
-
-### Running & Testing
-```bash
-# From root directory
-pnpm install                                    # Install dependencies
-corepack enable                                 # Enable pnpm if not available
-pnpm server:start                               # Dev server (http://localhost:8080)
-pnpm server:start-prod                          # Production mode server
-pnpm desktop:start                              # Desktop app development
-pnpm server:test spec/etapi/search.spec.ts     # Run specific test
-pnpm test:parallel                              # Client tests (can run parallel)
-pnpm test:sequential                            # Server tests (sequential due to shared DB)
-pnpm test:all                                   # All tests (parallel + sequential)
-pnpm coverage                                   # Generate coverage reports
-pnpm typecheck                                  # Type check all projects
-```
-
-### Building
-```bash
-pnpm client:build                               # Build client application
-pnpm server:build                               # Build server application
-pnpm desktop:build                              # Build desktop application
-```
-
-### Test Organization
-- **Server tests** (`apps/server/spec/`): Must run sequentially (shared database state)
-- **Client tests** (`apps/client/src/`): Can run in parallel
-- **E2E tests** (`apps/server-e2e/`): Use Playwright for integration testing
-- **ETAPI tests** (`apps/server/spec/etapi/`): External API contract tests
-
-**Pattern**: When adding new API endpoints, add tests in `spec/etapi/` following existing patterns (see `search.spec.ts`).
-
-### Monorepo Navigation
-```
-apps/
-  client/          # Frontend (shared by server & desktop)
-  server/          # Node.js backend with REST API
-  desktop/         # Electron wrapper
-  web-clipper/     # Browser extension for saving web content
-  db-compare/      # Database comparison tool
-  dump-db/         # Database export utility
-  edit-docs/       # Documentation editing tools
-packages/
-  commons/         # Shared types and utilities
-  ckeditor5/       # Custom rich text editor with Trilium-specific plugins
-  codemirror/      # Code editor integration
-  highlightjs/     # Syntax highlighting
-  share-theme/     # Theme for shared/published notes
-  ckeditor5-admonition/  # Admonition blocks plugin
-  ckeditor5-footnotes/   # Footnotes plugin
-  ckeditor5-math/        # Math equations plugin
-  ckeditor5-mermaid/     # Mermaid diagrams plugin
-```
-
-**Filter commands**: Use `pnpm --filter server test` to run commands in specific packages.
-
-## Critical Code Patterns
-
-### ETAPI Backwards Compatibility
-When adding query parameters to ETAPI endpoints (`apps/server/src/etapi/`), maintain backwards compatibility by checking if new params exist before changing response format.
-
-**Pattern**: ETAPI consumers expect specific response shapes. Always check for breaking changes.
-
-### Frontend-Backend Communication
-- **REST API**: `apps/server/src/routes/api/` - Internal endpoints (no auth required when `noAuthentication=true`)
-- **ETAPI**: `apps/server/src/etapi/` - External API with authentication
-- **WebSocket**: Real-time sync via `apps/server/src/services/ws.ts`
-
-**Auth note**: ETAPI uses basic auth with tokens. Internal API endpoints trust the frontend.
-
-### Database Migrations
-- Add scripts in `apps/server/src/migrations/YYMMDD_HHMM__description.sql`
-- Update schema in `apps/server/src/assets/db/schema.sql`
-- Never bypass Becca cache after migrations
-
-## Common Pitfalls
-
-1. **Never bypass the cache layers** - Always use `becca.notes[noteId]`, `froca.getNote()`, or equivalent cache methods. Direct database queries will cause sync issues between Becca/Froca/Shaca and won't create EntityChange records needed for synchronization.
-
-2. **Protected notes require session check** - Before accessing `note.title` or `note.getContent()` on protected notes, check `note.isContentAvailable()` or use `note.getTitleOrProtected()` which handles this automatically.
-
-3. **Widget lifecycle matters** - Override `refreshWithNote()` for note changes, `doRenderBody()` for initial render, `entitiesReloadedEvent()` for entity updates. Widgets use jQuery (`this.$widget`) - don't mix React patterns.
-
-4. **Tests run differently** - Server tests must run sequentially (shared database state), client tests can run in parallel. Use `pnpm test:sequential` for backend, `pnpm test:parallel` for frontend.
-
-5. **ETAPI requires authentication** - ETAPI endpoints use basic auth with tokens. Internal API endpoints (`apps/server/src/routes/api/`) trust the frontend when `noAuthentication=true`.
-
-6. **Search expressions are evaluated in memory** - The search service loads all matching notes, scores them in JavaScript, then sorts. You cannot add SQL-level LIMIT/OFFSET without losing scoring functionality.
-
-7. **Documentation edits have rules** - `docs/Script API/` is auto-generated (never edit directly). `docs/User Guide/` should be edited via `pnpm edit-docs:edit-docs`, not manually. Only `docs/Developer Guide/` and `docs/Release Notes/` are safe for direct Markdown editing.
-
-8. **pnpm workspace filtering** - Use `pnpm --filter server <command>` or shorthand `pnpm server:test` defined in root `package.json`. Note the `--filter` syntax, not `-F` or other shortcuts.
-
-9. **Event subscription cleanup** - When subscribing to events in widgets, unsubscribe in `cleanup()` or `doDestroy()` to prevent memory leaks.
-
-10. **Attribute inheritance can be complex** - When checking for labels/relations, use `note.getOwnedAttribute()` for direct attributes or `note.getAttribute()` for inherited ones. Don't assume attributes are directly on the note.
-
-## TypeScript Configuration
-
-- **Project references**: Monorepo uses TypeScript project references (`tsconfig.json`)
-- **Path mapping**: Use relative imports, not path aliases
-- **Build order**: `pnpm typecheck` builds all projects in dependency order
-- **Build system**: Uses Vite for fast development, ESBuild for production optimization
-- **Patches**: Custom patches in `patches/` directory for CKEditor and other dependencies
-
-## Key Files for Context
-
-- `apps/server/src/becca/entities/bnote.ts` - Note entity methods
-- `apps/client/src/services/froca.ts` - Frontend cache API
-- `apps/server/src/services/search/services/search.ts` - Search implementation
-- `apps/server/src/routes/routes.ts` - API route registration
-- `apps/client/src/widgets/basic_widget.ts` - Widget base class
-- `apps/server/src/main.ts` - Server startup entry point
-- `apps/client/src/desktop.ts` - Client initialization
-- `apps/server/src/services/backend_script_api.ts` - Scripting API
-- `apps/server/src/assets/db/schema.sql` - Database schema
-
-## Note Types and Features
-
-Trilium supports multiple note types with specialized widgets in `apps/client/src/widgets/type_widgets/`:
-- **Text**: Rich text with CKEditor5 (markdown import/export)
-- **Code**: Syntax-highlighted code editing with CodeMirror
-- **File**: Binary file attachments
-- **Image**: Image display with editing capabilities
-- **Canvas**: Drawing/diagramming with Excalidraw
-- **Mermaid**: Diagram generation
-- **Relation Map**: Visual note relationship mapping
-- **Web View**: Embedded web pages
-- **Doc/Book**: Hierarchical documentation structure
-
-### Collections
-Notes can be marked with the `#collection` label to enable collection view modes. Collections support multiple view types:
-- **List**: Standard list view
-- **Grid**: Card/grid layout
-- **Calendar**: Calendar-based view
-- **Table**: Tabular data view
-- **GeoMap**: Geographic map view
-- **Board**: Kanban-style board
-- **Presentation**: Slideshow presentation mode
-
-View types are configured via `#viewType` label (e.g., `#viewType=table`). Each view mode stores its configuration in a separate attachment (e.g., `table.json`). Collections are organized separately from regular note type templates in the note creation menu.
-
-## Common Development Tasks
-
-### Adding New Note Types
-1. Create widget in `apps/client/src/widgets/type_widgets/`
-2. Register in `apps/client/src/services/note_types.ts`
-3. Add backend handling in `apps/server/src/services/notes.ts`
-
-### Extending Search
-- Search expressions handled in `apps/server/src/services/search/`
-- Add new search operators in search context files
-- Remember: scoring happens in-memory, not at database level
-
-### Custom CKEditor Plugins
-- Create new package in `packages/` following existing plugin structure
-- Register in `packages/ckeditor5/src/plugins.ts`
-- See `ckeditor5-admonition`, `ckeditor5-footnotes`, `ckeditor5-math`, `ckeditor5-mermaid` for examples
-
-### Database Migrations
-- Add migration scripts in `apps/server/src/migrations/YYMMDD_HHMM__description.sql`
-- Update schema in `apps/server/src/assets/db/schema.sql`
-- Never bypass Becca cache after migrations
-
-## Security & Features
-
-### Security Considerations
-- Per-note encryption with granular protected sessions
-- CSRF protection for API endpoints
-- OpenID and TOTP authentication support
-- Sanitization of user-generated content
-
-### Scripting System
-Trilium provides powerful user scripting capabilities:
-- **Frontend scripts**: Run in browser context with UI access
-- **Backend scripts**: Run in Node.js context with full API access
-- Script API documentation in `docs/Script API/`
-- Backend API available via `api` object in script context
-
-### Internationalization
-- Translation files in `apps/client/src/translations/`
-- Use translation system via `t()` function
-- Automatic pluralization: Add `_other` suffix to translation keys (e.g., `item` and `item_other` for singular/plural)
-
-## Testing Conventions
-
-```typescript
-// ETAPI test pattern
-describe("etapi/feature", () => {
-    beforeAll(async () => {
-        config.General.noAuthentication = false;
-        app = await buildApp();
-        token = await login(app);
-    });
-
-    it("should test feature", async () => {
-        const response = await supertest(app)
-            .get("/etapi/notes?search=test")
-            .auth(USER, token, { type: "basic" })
-            .expect(200);
-        
-        expect(response.body.results).toBeDefined();
-    });
-});
-```
-
-## Questions to Verify Understanding
-
-Before implementing significant changes, confirm:
-- Is this touching the cache layer? (Becca/Froca/Shaca must stay in sync via EntityChange records)
-- Does this change API response shape? (Check backwards compatibility for ETAPI)
-- Are you adding search features? (Understand expression-based architecture and in-memory scoring first)
-- Is this a new widget? (Know which base class and lifecycle methods to use)
-- Does this involve protected notes? (Check `isContentAvailable()` before accessing content)
-- Is this a long-running operation? (Use TaskContext for progress reporting)
-- Are you working with attributes? (Understand inheritance patterns: direct, child-prefix, template)

.github/instructions/nx.instructions.md

@@ -0,0 +1,40 @@
+---
+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,7 +12,6 @@ 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

@@ -57,7 +57,7 @@ jobs:
         # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v6
+      uses: actions/checkout@v5
 
     # Add any setup steps before running the `github/codeql-action/init` action.
     # This includes steps like installing compilers or runtimes (`actions/setup-node`
@@ -67,7 +67,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v4
+      uses: github/codeql-action/init@v3
       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@v4
+      uses: github/codeql-action/analyze@v3
       with:
         category: "/language:${{matrix.language}}"

.github/workflows/deploy-docs.yml

@@ -1,78 +0,0 @@
-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@v6
-
-      - name: Setup pnpm
-        uses: pnpm/action-setup@v4
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v6
-        with:
-          node-version: '24'
-          cache: 'pnpm'
-
-      - name: Install Dependencies
-        run: pnpm install --frozen-lockfile
-
-      - name: Trigger build of 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,24 +19,45 @@ permissions:
   pull-requests: write  # for PR comments
 
 jobs:
-  test_dev:
-    name: Test development
+  check-affected:
+    name: Check affected jobs (NX)
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v6
+        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@v6
+        uses: actions/setup-node@v4
         with:
-          node-version: 24
+          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
+        with:
+          node-version: 22
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
 
-      - name: Typecheck
-        run: pnpm typecheck
-
       - name: Run the unit tests
         run: pnpm run test:all
 
@@ -45,15 +66,16 @@ jobs:
     runs-on: ubuntu-latest
     needs:
       - test_dev
+      - check-affected
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - name: Update build info
         run: pnpm run chore:update-build-info
       - name: Trigger client build
-        run: pnpm client:build
+        run: pnpm nx run client:build
       - name: Send client bundle stats to RelativeCI
         if: false
         uses: relative-ci/agent-action@v3
@@ -61,7 +83,7 @@ jobs:
           webpackStatsFile: ./apps/client/dist/webpack-stats.json
           key: ${{ secrets.RELATIVE_CI_CLIENT_KEY }}
       - name: Trigger server build
-        run: pnpm run server:build
+        run: pnpm nx run server:build
       - uses: docker/setup-buildx-action@v3
       - uses: docker/build-push-action@v6
         with:
@@ -73,6 +95,7 @@ jobs:
     runs-on: ubuntu-latest
     needs:
       - build_docker
+      - check-affected
     strategy:
       matrix:
         include:
@@ -80,7 +103,7 @@ jobs:
           - dockerfile: Dockerfile
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - uses: pnpm/action-setup@v4
       - name: Install dependencies
@@ -89,7 +112,7 @@ jobs:
       - name: Update build info
         run: pnpm run chore:update-build-info
       - name: Trigger build
-        run: pnpm server:build
+        run: pnpm nx run server:build
 
       - name: Set IMAGE_NAME to lowercase
         run: echo "IMAGE_NAME=${IMAGE_NAME,,}" >> $GITHUB_ENV

.github/workflows/main-docker.yml

@@ -32,7 +32,7 @@ jobs:
           - dockerfile: Dockerfile
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
 
       - name: Set IMAGE_NAME to lowercase
         run: echo "IMAGE_NAME=${IMAGE_NAME,,}" >> $GITHUB_ENV
@@ -44,9 +44,9 @@ jobs:
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 22
           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 --filter=server-e2e e2e
+        run: TRILIUM_DOCKER=1 TRILIUM_PORT=8082 pnpm exec nx run server-e2e:e2e
 
       - name: Upload Playwright trace
         if: failure()
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v4
         with:
           name: Playwright trace (${{ matrix.dockerfile }})
           path: test-output/playwright/output
 
-      - uses: actions/upload-artifact@v5
+      - uses: actions/upload-artifact@v4
         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.legacy
+          - dockerfile: Dockerfile
             platform: linux/arm/v7
             image: ubuntu-24.04-arm
-          - dockerfile: Dockerfile.legacy
+          - dockerfile: Dockerfile
             platform: linux/arm/v8
             image: ubuntu-24.04-arm
     runs-on: ${{ matrix.image }}
@@ -141,27 +141,23 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 22
           cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
-      - name: Update build info
-        run: pnpm run chore:update-build-info
-
-      - name: Update nightly version
-        if: ${{ !startsWith(github.ref, 'refs/tags/v') }}
-        run: pnpm run chore:ci-update-nightly-version
-
       - name: Run the TypeScript build
         run: pnpm run server:build
 
+      - name: Update build info
+        run: pnpm run chore:update-build-info
+
       - name: Docker meta
         id: meta
         uses: docker/metadata-action@v5
@@ -213,9 +209,9 @@ jobs:
           touch "/tmp/digests/${digest#sha256:}"
 
       - name: Upload digest
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v4
         with:
-          name: digests-${{ env.PLATFORM_PAIR }}-${{ matrix.dockerfile }}
+          name: digests-${{ env.PLATFORM_PAIR }}
           path: /tmp/digests/*
           if-no-files-found: error
           retention-days: 1
@@ -227,7 +223,7 @@ jobs:
       - build
     steps:
       - name: Download digests
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@v5
         with:
           path: /tmp/digests
           pattern: digests-*

.github/workflows/nightly.yml

@@ -19,6 +19,7 @@ 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:
@@ -26,7 +27,7 @@ permissions:
 
 jobs:
   nightly-electron:
-    if: github.repository == ${{ vars.REPO_MAIN }}
+    if: github.repository == 'TriliumNext/Trilium'
     name: Deploy nightly
     strategy:
       fail-fast: false
@@ -45,32 +46,20 @@ 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@v6
+      - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 22
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+      - uses: nrwl/nx-set-shas@v4
       - name: Update nightly version
-        run: pnpm run chore:ci-update-nightly-version
+        run: npm run chore:ci-update-nightly-version
       - name: Run the build
         uses: ./.github/actions/build-electron
         with:
@@ -87,10 +76,9 @@ 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.5.0
+        uses: softprops/action-gh-release@v2.3.2
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false
@@ -102,14 +90,14 @@ jobs:
           name: Nightly Build
 
       - name: Publish artifacts
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v4
         if: ${{ github.event_name == 'pull_request' }}
         with:
           name: TriliumNotes ${{ matrix.os.name }} ${{ matrix.arch }}
           path: apps/desktop/upload
 
   nightly-server:
-    if: github.repository == ${{ vars.REPO_MAIN }}
+    if: github.repository == 'TriliumNext/Trilium'  
     name: Deploy server nightly
     strategy:
       fail-fast: false
@@ -122,7 +110,7 @@ jobs:
             runs-on: ubuntu-24.04-arm
     runs-on: ${{ matrix.runs-on }}
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
       - name: Run the build
         uses: ./.github/actions/build-server
@@ -131,7 +119,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v2.3.2
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false

.github/workflows/playwright.yml

@@ -4,9 +4,6 @@ on:
   push:
     branches:
       - main
-      - hotfix
-    paths-ignore:
-      - "apps/website/**"
   pull_request:
 
 permissions:
@@ -14,74 +11,33 @@ permissions:
   contents: read
 
 jobs:
-  e2e:
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - name: linux-x64
-            os: ubuntu-22.04
-            arch: x64
-          - name: linux-arm64
-            os: ubuntu-24.04-arm
-            arch: arm64
-    runs-on: ${{ matrix.os }}
-    name: E2E tests on ${{ matrix.name }}
-    env:
-      TRILIUM_DOCKER: 1
-      TRILIUM_PORT: 8082
-      TRILIUM_DATA_DIR: "${{ github.workspace }}/apps/server/spec/db"
-      TRILIUM_INTEGRATION_TEST: memory
+  main:
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
         with:
           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@v6
+      - uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 22
           cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install --with-deps
+      - uses: nrwl/nx-set-shas@v4
 
-      - name: Install Playwright browsers
-        run: pnpm exec playwright install --with-deps
-
-      - name: Build the server
-        uses: ./.github/actions/build-server
-        with:
-          os: linux
-          arch: ${{ matrix.arch }}
-
-      - name: Unpack and start the server
-        run: |
-          version=$(node --eval "console.log(require('./package.json').version)")
-          file=$(find ./upload -name '*.tar.xz' -print -quit)
-          name=$(basename "$file" .tar.xz)
-          mkdir -p ./server-dist
-          tar -xvf "$file" -C ./server-dist
-          server_dir="./server-dist/TriliumNotes-Server-$version-linux-${{ matrix.arch }}"
-          if [ ! -d "$server_dir" ]; then
-            echo Missing dir.
-            exit 1
-          fi
-          cd "$server_dir"
-          "./trilium.sh" &
-          sleep 10
-
-      - name: Server end-to-end tests
-        run: pnpm --filter server-e2e e2e
-
-      - name: Upload test report
-        if: failure()
-        uses: actions/upload-artifact@v5
-        with:
-          name: e2e report ${{ matrix.arch }}
-          path: apps/server-e2e/test-output
-
-      - name: Kill the server
-        if: always()
-        run: pkill -f trilium || true
+      # 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

.github/workflows/release.yml

@@ -30,30 +30,18 @@ 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@v6
+      - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v4
         with:
-          node-version: 24
+          node-version: 22
           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:
@@ -70,10 +58,9 @@ 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@v5
+        uses: actions/upload-artifact@v4
         with:
           name: release-desktop-${{ matrix.os.name }}-${{ matrix.arch }}
           path: apps/desktop/upload/*.*
@@ -91,7 +78,7 @@ jobs:
             runs-on: ubuntu-24.04-arm
     runs-on: ${{ matrix.runs-on }}
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
 
       - name: Run the build
         uses: ./.github/actions/build-server
@@ -100,7 +87,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v4
         with:
           name: release-server-linux-${{ matrix.arch }}
           path: upload/*.*
@@ -114,20 +101,20 @@ jobs:
     steps:
       - run: mkdir upload
 
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
         with:
           sparse-checkout: |
             docs/Release Notes
 
       - name: Download all artifacts
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@v5
         with:
           merge-multiple: true
           pattern: release-*
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.5.0
+        uses: softprops/action-gh-release@v2.3.2
         with:
           draft: false
           body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md

.github/workflows/website.yml

@@ -1,51 +0,0 @@
-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@v6
-      - uses: pnpm/action-setup@v4
-      - name: Set up node & dependencies
-        uses: actions/setup-node@v6
-        with:
-          node-version: 24
-          cache: "pnpm"
-
-      - name: Install dependencies
-        run: pnpm install --filter 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,5 +1,4 @@
 # See https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
-/.cache
 
 # compiled output
 dist
@@ -33,11 +32,14 @@ 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
 
@@ -45,8 +47,4 @@ upload
 *.tsbuildinfo
 
 /result
-.svelte-kit
-
-# docs
-site/
-apps/*/coverage
+.svelte-kit

.nvmrc

@@ -1 +1 @@
-24.11.1
+22.18.0

.vscode/extensions.json

@@ -5,10 +5,12 @@
     "lokalise.i18n-ally",
     "ms-azuretools.vscode-docker",
     "ms-playwright.playwright",
+    "nrwl.angular-console",
     "redhat.vscode-yaml",
     "tobermory.es6-string-html",
     "vitest.explorer",
     "yzhang.markdown-all-in-one",
-    "usernamehw.errorlens"
+    "svelte.svelte-vscode",
+    "bradlc.vscode-tailwindcss"
   ]
 }

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

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

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

.vscode/settings.json

@@ -5,8 +5,7 @@
     "i18n-ally.keystyle": "nested",
     "i18n-ally.localesPaths": [
         "apps/server/src/assets/translations",
-        "apps/client/src/translations",
-        "apps/website/public/translations"
+        "apps/client/src/translations"
     ],
     "npm.exclude": [
         "**/dist",
@@ -37,7 +36,5 @@
         "apps/server/src/assets/doc_notes/**": true,
         "apps/edit-docs/demo/**": true
     },
-    "eslint.rules.customizations": [
-        { "rule": "*", "severity": "warn" }
-    ]
+    "nxConsole.generateAiAgentRules": true
 }

.vscode/snippets.code-snippets

@@ -20,10 +20,5 @@
         "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 pnpm, 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 NX, with multiple applications and shared packages.
 
 ## Development Commands
 
@@ -14,9 +14,12 @@ 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
@@ -25,8 +28,13 @@ 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
@@ -86,6 +94,7 @@ 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
@@ -145,7 +154,7 @@ Trilium provides powerful user scripting capabilities:
 - Update schema in `apps/server/src/assets/db/schema.sql`
 
 ## Build System Notes
-- Uses pnpm for monorepo management
+- Uses NX for monorepo management with build caching
 - Vite for fast development builds
 - ESBuild for production optimization
 - pnpm workspaces for dependency management

README.md

@@ -1,93 +1,73 @@
-<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/trilium)
-![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/triliumnext/trilium/total)  
+![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)  
 [![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/)
 
-<!-- translate:off -->
-<!-- LANGUAGE SWITCHER -->
-[Chinese (Simplified Han script)](./docs/README-ZH_CN.md) | [Chinese (Traditional Han script)](./docs/README-ZH_TW.md) | [English](./docs/README.md) | [French](./docs/README-fr.md) | [German](./docs/README-de.md) | [Greek](./docs/README-el.md) | [Italian](./docs/README-it.md) | [Japanese](./docs/README-ja.md) | [Romanian](./docs/README-ro.md) | [Spanish](./docs/README-es.md)
-<!-- translate:on -->
+[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)
 
 Trilium Notes is a free and open-source, cross-platform hierarchical note taking application with focus on building large personal knowledge bases.
 
-<img src="./docs/app.png" alt="Trilium Screenshot" width="1000">
+See [screenshots](https://triliumnext.github.io/Docs/Wiki/screenshot-tour) for quick overview:
 
-## ⏬ 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](https://docs.triliumnotes.org/user-guide/setup)
-- [Docker Setup](https://docs.triliumnotes.org/user-guide/setup/server/installation/docker)
-- [Upgrading TriliumNext](https://docs.triliumnotes.org/user-guide/setup/upgrading)
-- [Basic Concepts and Features](https://docs.triliumnotes.org/user-guide/concepts/notes)
-- [Patterns of Personal Knowledge Base](https://docs.triliumnotes.org/user-guide/misc/patterns-of-personal-knowledge)
+<a href="https://triliumnext.github.io/Docs/Wiki/screenshot-tour"><img src="./docs/app.png" alt="Trilium Screenshot" width="1000"></a>
 
 ## 🎁 Features
 
-* Notes can be arranged into arbitrarily deep tree. Single note can be placed into multiple places in the tree (see [cloning](https://docs.triliumnotes.org/user-guide/concepts/notes/cloning))
-* Rich WYSIWYG note editor including e.g. tables, images and [math](https://docs.triliumnotes.org/user-guide/note-types/text) with markdown [autoformat](https://docs.triliumnotes.org/user-guide/note-types/text/markdown-formatting)
-* Support for editing [notes with source code](https://docs.triliumnotes.org/user-guide/note-types/code), including syntax highlighting
-* Fast and easy [navigation between notes](https://docs.triliumnotes.org/user-guide/concepts/navigation/note-navigation), full text search and [note hoisting](https://docs.triliumnotes.org/user-guide/concepts/navigation/note-hoisting)
-* Seamless [note versioning](https://docs.triliumnotes.org/user-guide/concepts/notes/note-revisions)
-* Note [attributes](https://docs.triliumnotes.org/user-guide/advanced-usage/attributes) can be used for note organization, querying and advanced [scripting](https://docs.triliumnotes.org/user-guide/scripts)
+* 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))
+* Rich WYSIWYG note editor including e.g. tables, images and [math](https://triliumnext.github.io/Docs/Wiki/text-notes) with markdown [autoformat](https://triliumnext.github.io/Docs/Wiki/text-notes#autoformat)
+* Support for editing [notes with source code](https://triliumnext.github.io/Docs/Wiki/code-notes), including syntax highlighting
+* Fast and easy [navigation between notes](https://triliumnext.github.io/Docs/Wiki/note-navigation), full text search and [note hoisting](https://triliumnext.github.io/Docs/Wiki/note-hoisting)
+* Seamless [note versioning](https://triliumnext.github.io/Docs/Wiki/note-revisions)
+* Note [attributes](https://triliumnext.github.io/Docs/Wiki/attributes) can be used for note organization, querying and advanced [scripting](https://triliumnext.github.io/Docs/Wiki/scripts)
 * UI available in English, German, Spanish, French, Romanian, and Chinese (simplified and traditional)
-* Direct [OpenID and TOTP integration](https://docs.triliumnotes.org/user-guide/setup/server/mfa) for more secure login
-* [Synchronization](https://docs.triliumnotes.org/user-guide/setup/synchronization) with self-hosted sync server
-  * there are [3rd party services for hosting synchronisation server](https://docs.triliumnotes.org/user-guide/setup/server/cloud-hosting)
-* [Sharing](https://docs.triliumnotes.org/user-guide/advanced-usage/sharing) (publishing) notes to public internet
-* Strong [note encryption](https://docs.triliumnotes.org/user-guide/concepts/notes/protected-notes) with per-note granularity
+* Direct [OpenID and TOTP integration](./docs/User%20Guide/User%20Guide/Installation%20%26%20Setup/Server%20Installation/Multi-Factor%20Authentication.md) for more secure login
+* [Synchronization](https://triliumnext.github.io/Docs/Wiki/synchronization) with self-hosted sync server
+  * there's a [3rd party service for hosting synchronisation server](https://trilium.cc/paid-hosting)
+* [Sharing](https://triliumnext.github.io/Docs/Wiki/sharing) (publishing) notes to public internet
+* Strong [note encryption](https://triliumnext.github.io/Docs/Wiki/protected-notes) with per-note granularity
 * Sketching diagrams, based on [Excalidraw](https://excalidraw.com/) (note type "canvas")
-* [Relation maps](https://docs.triliumnotes.org/user-guide/note-types/relation-map) and [note/link maps](https://docs.triliumnotes.org/user-guide/note-types/note-map) for visualizing notes and their relations
+* [Relation maps](https://triliumnext.github.io/Docs/Wiki/relation-map) and [link maps](https://triliumnext.github.io/Docs/Wiki/link-map) for visualizing notes and their relations
 * Mind maps, based on [Mind Elixir](https://docs.mind-elixir.com/)
-* [Geo maps](https://docs.triliumnotes.org/user-guide/collections/geomap) with location pins and GPX tracks
-* [Scripting](https://docs.triliumnotes.org/user-guide/scripts) - see [Advanced showcases](https://docs.triliumnotes.org/user-guide/advanced-usage/advanced-showcases)
-* [REST API](https://docs.triliumnotes.org/user-guide/advanced-usage/etapi) for automation
+* [Geo maps](./docs/User%20Guide/User%20Guide/Note%20Types/Geo%20Map.md) with location pins and GPX tracks
+* [Scripting](https://triliumnext.github.io/Docs/Wiki/scripts) - see [Advanced showcases](https://triliumnext.github.io/Docs/Wiki/advanced-showcases)
+* [REST API](https://triliumnext.github.io/Docs/Wiki/etapi) for automation
 * Scales well in both usability and performance upwards of 100 000 notes
-* Touch optimized [mobile frontend](https://docs.triliumnotes.org/user-guide/setup/mobile-frontend) for smartphones and tablets
-* Built-in [dark theme](https://docs.triliumnotes.org/user-guide/concepts/themes), support for user themes
-* [Evernote](https://docs.triliumnotes.org/user-guide/concepts/import-export/evernote) and [Markdown import & export](https://docs.triliumnotes.org/user-guide/concepts/import-export/markdown)
-* [Web Clipper](https://docs.triliumnotes.org/user-guide/setup/web-clipper) for easy saving of web content
+* Touch optimized [mobile frontend](https://triliumnext.github.io/Docs/Wiki/mobile-frontend) for smartphones and tablets
+* Built-in [dark theme](https://triliumnext.github.io/Docs/Wiki/themes), support for user themes
+* [Evernote](https://triliumnext.github.io/Docs/Wiki/evernote-import) and [Markdown import & export](https://triliumnext.github.io/Docs/Wiki/markdown)
+* [Web Clipper](https://triliumnext.github.io/Docs/Wiki/web-clipper) for easy saving of web content
 * Customizable UI (sidebar buttons, user-defined widgets, ...)
-* [Metrics](https://docs.triliumnotes.org/user-guide/advanced-usage/metrics), along with a Grafana Dashboard.
+* [Metrics](./docs/User%20Guide/User%20Guide/Advanced%20Usage/Metrics.md), along with a [Grafana Dashboard](./docs/User%20Guide/User%20Guide/Advanced%20Usage/Metrics/grafana-dashboard.json)
 
 ✨ Check out the following third-party resources/communities for more TriliumNext related goodies:
 
 - [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 developer ([Zadam](https://github.com/zadam)) has graciously given the Trilium repository to the community project which resides at https://github.com/TriliumNext
+[The original Trilium project is in maintenance mode](https://github.com/zadam/trilium/issues/4620).
 
-### ⬆️Migrating from Zadam/Trilium?
+### Migrating from Trilium?
 
-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.
+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.
 
-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.
+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).
 
 ## 💬 Discuss with us
 
@@ -95,8 +75,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/Trilium/discussions) (For asynchronous discussions.)
-- [Github Issues](https://github.com/TriliumNext/Trilium/issues) (For bug reports and feature requests.)
+- [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.)
 
 ## 🏗 Installation
 
@@ -124,15 +104,13 @@ 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).
 
-See issue https://github.com/TriliumNext/Trilium/issues/4962 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).
 
-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.
+See issue https://github.com/TriliumNext/Notes/issues/72 for more information on mobile app support.
 
 ### Server
 
-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://docs.triliumnotes.org/user-guide/setup/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).
 
 
 ## 💻 Contribute
@@ -162,7 +140,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 edit-docs:edit-docs
+pnpm nx run edit-docs:edit-docs
 ```
 
 ### Building the Executable
@@ -171,45 +149,27 @@ 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 run --filter desktop electron-forge:make --arch=x64 --platform=win32
+pnpm nx --project=desktop electron-forge:make -- --arch=x64 --platform=win32
 ```
 
-For more details, see the [development docs](https://github.com/TriliumNext/Trilium/tree/main/docs/Developer%20Guide/Developer%20Guide).
+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).
 
 ### Developer Documentation
 
-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.
+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.
 
 ## 👏 Shoutouts
 
-* [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://docs.triliumnotes.org/user-guide/note-types/relation-map) and [link maps](https://docs.triliumnotes.org/user-guide/advanced-usage/note-map#link-map)
+* [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)
 
 ## 🤝 Support
 
-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)
+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).
 
 
 ## 🔑 License

_regroup/bin/create-anonymization-script.ts

@@ -0,0 +1,7 @@
+#!/usr/bin/env node
+
+import anonymizationService from "../src/services/anonymization.js";
+import fs from "fs";
+import path from "path";
+
+fs.writeFileSync(path.resolve(__dirname, "tpl", "anonymize-database.sql"), anonymizationService.getFullAnonymizationScript());

_regroup/bin/export-schema.sh

@@ -0,0 +1,7 @@
+#!/usr/bin/env bash
+
+SCHEMA_FILE_PATH=db/schema.sql
+
+sqlite3 ./data/document.db .schema | grep -v "sqlite_sequence" > "$SCHEMA_FILE_PATH"
+
+echo "DB schema exported to $SCHEMA_FILE_PATH"

_regroup/bin/generate_document.ts

@@ -6,11 +6,10 @@
 import sqlInit from "../src/services/sql_init.js";
 import noteService from "../src/services/notes.js";
 import attributeService from "../src/services/attributes.js";
-import cloningService from "../src/services/cloning.js";
-import { loremIpsum } from "lorem-ipsum";
-import "../src/becca/entity_constructor.js";
-import { initializeTranslations } from "../src/services/i18n.js";
 import cls from "../src/services/cls.js";
+import cloningService from "../src/services/cloning.js";
+import loremIpsum from "lorem-ipsum";
+import "../src/becca/entity_constructor.js";
 
 const noteCount = parseInt(process.argv[2]);
 
@@ -28,18 +27,8 @@ function getRandomNoteId() {
 }
 
 async function start() {
-    if (!sqlInit.isDbInitialized()) {
-        console.error("Database not initialized.");
-        process.exit(1);
-    }
-
-    await initializeTranslations();
-
-    sqlInit.initializeDb();
-    await sqlInit.dbReady;
-
     for (let i = 0; i < noteCount; i++) {
-        const title = loremIpsum({
+        const title = loremIpsum.loremIpsum({
             count: 1,
             units: "sentences",
             sentenceLowerBound: 1,
@@ -47,7 +36,7 @@ async function start() {
         });
 
         const paragraphCount = Math.floor(Math.random() * Math.random() * 100);
-        const content = loremIpsum({
+        const content = loremIpsum.loremIpsum({
             count: paragraphCount,
             units: "paragraphs",
             sentenceLowerBound: 1,
@@ -71,13 +60,13 @@ async function start() {
             const parentNoteId = getRandomNoteId();
             const prefix = Math.random() > 0.8 ? "prefix" : "";
 
-            const result = cloningService.cloneNoteToBranch(noteIdToClone, parentNoteId, prefix);
+            const result = await cloningService.cloneNoteToBranch(noteIdToClone, parentNoteId, prefix);
 
             console.log(`Cloning ${i}:`, result.success ? "succeeded" : "FAILED");
         }
 
         // does not have to be for the current note
-        attributeService.createAttribute({
+        await attributeService.createAttribute({
             noteId: getRandomNoteId(),
             type: "label",
             name: "label",
@@ -85,7 +74,7 @@ async function start() {
             isInheritable: Math.random() > 0.1 // 10% are inheritable
         });
 
-        attributeService.createAttribute({
+        await attributeService.createAttribute({
             noteId: getRandomNoteId(),
             type: "relation",
             name: "relation",
@@ -101,4 +90,6 @@ async function start() {
     process.exit(0);
 }
 
-cls.init(() => start());
+// @TriliumNextTODO sqlInit.dbReady never seems to resolve so program hangs
+// see https://github.com/TriliumNext/Trilium/issues/1020
+sqlInit.dbReady.then(cls.wrap(start)).catch((err) => console.error(err));

_regroup/bin/push-docker-image.sh

@@ -0,0 +1,16 @@
+#!/usr/bin/env bash
+
+if [[ $# -eq 0 ]] ; then
+    echo "Missing argument of new version"
+    exit 1
+fi
+
+VERSION=$1
+SERIES=${VERSION:0:4}-latest
+
+docker push zadam/trilium:$VERSION
+docker push zadam/trilium:$SERIES
+
+if [[ $1 != *"beta"* ]]; then
+  docker push zadam/trilium:latest
+fi

_regroup/bin/release-flatpack.sh

@@ -0,0 +1,57 @@
+#!/usr/bin/env bash
+
+if [[ $# -eq 0 ]] ; then
+    echo "Missing argument of new version"
+    exit 1
+fi
+
+VERSION=$1
+
+if ! [[ ${VERSION} =~ ^[0-9]{1,2}\.[0-9]{1,2}\.[0-9]{1,2}(-.+)?$ ]] ;
+then
+    echo "Version ${VERSION} isn't in format X.Y.Z"
+    exit 1
+fi
+
+VERSION_DATE=$(git log -1 --format=%aI "v${VERSION}" | cut -c -10)
+VERSION_COMMIT=$(git rev-list -n 1 "v${VERSION}")
+
+# expecting the directory at a specific path
+cd ~/trilium-flathub || exit
+
+if ! git diff-index --quiet HEAD --; then
+    echo "There are uncommitted changes"
+    exit 1
+fi
+
+BASE_BRANCH=main
+
+if [[ "$VERSION" == *"beta"* ]]; then
+    BASE_BRANCH=beta
+fi
+
+git switch "${BASE_BRANCH}"
+git pull
+
+BRANCH=b${VERSION}
+
+git branch "${BRANCH}"
+git switch "${BRANCH}"
+
+echo "Updating files with version ${VERSION}, date ${VERSION_DATE} and commit ${VERSION_COMMIT}"
+
+flatpak-node-generator npm ../trilium/package-lock.json
+
+xmlstarlet ed --inplace --update "/component/releases/release/@version" --value "${VERSION}" --update "/component/releases/release/@date" --value "${VERSION_DATE}" ./com.github.zadam.trilium.metainfo.xml
+
+yq --inplace "(.modules[0].sources[0].tag = \"v${VERSION}\") | (.modules[0].sources[0].commit = \"${VERSION_COMMIT}\")" ./com.github.zadam.trilium.yml
+
+git add ./generated-sources.json
+git add ./com.github.zadam.trilium.metainfo.xml
+git add ./com.github.zadam.trilium.yml
+
+git commit -m "release $VERSION"
+git push --set-upstream origin "${BRANCH}"
+
+gh pr create --fill -B "${BASE_BRANCH}"
+gh pr merge --auto --merge --delete-branch

_regroup/bin/release.sh

@@ -0,0 +1,49 @@
+#!/usr/bin/env bash
+
+set -e
+
+if [[ $# -eq 0 ]] ; then
+    echo "Missing argument of new version"
+    exit 1
+fi
+
+if ! command -v jq &> /dev/null; then
+  echo "Missing command: jq"
+  exit 1
+fi
+
+VERSION=$1
+
+if ! [[ ${VERSION} =~ ^[0-9]{1,2}\.[0-9]{1,2}\.[0-9]{1,2}(-.+)?$ ]] ;
+then
+    echo "Version ${VERSION} isn't in format X.Y.Z"
+    exit 1
+fi
+
+if ! git diff-index --quiet HEAD --; then
+    echo "There are uncommitted changes"
+    exit 1
+fi
+
+echo "Releasing Trilium $VERSION"
+
+jq '.version = "'$VERSION'"' package.json > package.json.tmp
+mv package.json.tmp package.json
+
+git add package.json
+
+npm run chore:update-build-info
+
+git add src/services/build.ts
+
+TAG=v$VERSION
+
+echo "Committing package.json version change"
+
+git commit -m "chore(release): $VERSION"
+git push
+
+echo "Tagging commit with $TAG"
+
+git tag $TAG
+git push origin $TAG

_regroup/entitlements.plist

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.files.user-selected.read-write</key>
+    <true/>
+  </dict>
+</plist>

_regroup/eslint.config.js

@@ -0,0 +1,51 @@
+import eslint from "@eslint/js";
+import tseslint from "typescript-eslint";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+
+export default tseslint.config(
+    eslint.configs.recommended,
+    tseslint.configs.recommended,
+    // consider using rules below, once we have a full TS codebase and can be more strict
+    // tseslint.configs.strictTypeChecked,
+    // tseslint.configs.stylisticTypeChecked,
+    // tseslint.configs.recommendedTypeChecked,
+    {
+        languageOptions: {
+            parserOptions: {
+                projectService: true,
+                tsconfigRootDir: import.meta.dirname
+            }
+        }
+    },
+    {
+        plugins: {
+            "simple-import-sort": simpleImportSort
+        }
+    },
+    {
+        rules: {
+            // add rule overrides here
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "@typescript-eslint/no-unused-vars": [
+                "error",
+                {
+                    argsIgnorePattern: "^_",
+                    varsIgnorePattern: "^_"
+                }
+            ],
+            "simple-import-sort/imports": "error",
+            "simple-import-sort/exports": "error"
+        }
+    },
+    {
+        ignores: [
+            "build/*",
+            "dist/*",
+            "docs/*",
+            "demo/*",
+            "src/public/app-dist/*",
+            "src/public/app/doc_notes/*"
+        ]
+    }
+);

_regroup/eslint.format.config.js

@@ -0,0 +1,47 @@
+import stylistic from "@stylistic/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+
+// eslint config just for formatting rules
+// potentially to be merged with the linting rules into one single config,
+// once we have fixed the majority of lint errors
+
+// Go to https://eslint.style/rules/default/${rule_without_prefix} to check the rule details
+export const stylisticRules = {
+    "@stylistic/indent": [ "error", 4 ],
+    "@stylistic/quotes": [ "error", "double", { avoidEscape: true, allowTemplateLiterals: "always" } ],
+    "@stylistic/semi": [ "error", "always" ],
+    "@stylistic/quote-props": [ "error", "consistent-as-needed" ],
+    "@stylistic/max-len": [ "error", { code: 100 } ],
+    "@stylistic/comma-dangle": [ "error", "never" ],
+    "@stylistic/linebreak-style": [ "error", "unix" ],
+    "@stylistic/array-bracket-spacing": [ "error", "always" ],
+    "@stylistic/object-curly-spacing": [ "error", "always" ],
+    "@stylistic/padded-blocks": [ "error", { classes: "always" } ]
+};
+
+export default [
+    {
+        files: [ "**/*.{js,ts,mjs,cjs}" ],
+        languageOptions: {
+            parser: tsParser
+        },
+        plugins: {
+            "@stylistic": stylistic
+        },
+        rules: {
+            ...stylisticRules
+        }
+    },
+    {
+        ignores: [
+            "build/*",
+            "dist/*",
+            "docs/*",
+            "demo/*",
+            // TriliumNextTODO: check if we want to format packages here as well - for now skipping it
+            "packages/*",
+            "src/public/app-dist/*",
+            "src/public/app/doc_notes/*"
+        ]
+    }
+];

_regroup/integration-tests/auth.setup.ts

@@ -0,0 +1,17 @@
+import { test as setup, expect } from "@playwright/test";
+
+const authFile = "playwright/.auth/user.json";
+
+const ROOT_URL = "http://localhost:8082";
+const LOGIN_PASSWORD = "demo1234";
+
+// Reference: https://playwright.dev/docs/auth#basic-shared-account-in-all-tests
+
+setup("authenticate", async ({ page }) => {
+    await page.goto(ROOT_URL);
+    await expect(page).toHaveURL(`${ROOT_URL}/login`);
+
+    await page.getByRole("textbox", { name: "Password" }).fill(LOGIN_PASSWORD);
+    await page.getByRole("button", { name: "Login" }).click();
+    await page.context().storageState({ path: authFile });
+});

_regroup/integration-tests/duplicate.spec.ts

@@ -0,0 +1,9 @@
+import { test, expect } from "@playwright/test";
+
+test("Can duplicate note with broken links", async ({ page }) => {
+    await page.goto(`http://localhost:8082/#2VammGGdG6Ie`);
+    await page.locator(".tree-wrapper .fancytree-active").getByText("Note map").click({ button: "right" });
+    await page.getByText("Duplicate subtree").click();
+    await expect(page.locator(".toast-body")).toBeHidden();
+    await expect(page.locator(".tree-wrapper").getByText("Note map (dup)")).toBeVisible();
+});

_regroup/integration-tests/example.disabled.ts

@@ -0,0 +1,18 @@
+import { test, expect } from "@playwright/test";
+
+test("has title", async ({ page }) => {
+    await page.goto("https://playwright.dev/");
+
+    // Expect a title "to contain" a substring.
+    await expect(page).toHaveTitle(/Playwright/);
+});
+
+test("get started link", async ({ page }) => {
+    await page.goto("https://playwright.dev/");
+
+    // Click the get started link.
+    await page.getByRole("link", { name: "Get started" }).click();
+
+    // Expects page to have a heading with the name of Installation.
+    await expect(page.getByRole("heading", { name: "Installation" })).toBeVisible();
+});

_regroup/integration-tests/settings.spec.ts

@@ -0,0 +1,21 @@
+import test, { expect } from "@playwright/test";
+
+test("Native Title Bar not displayed on web", async ({ page }) => {
+    await page.goto("http://localhost:8082/#root/_hidden/_options/_optionsAppearance");
+    await expect(page.getByRole("heading", { name: "Theme" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Native Title Bar (requires" })).toBeHidden();
+});
+
+test("Tray settings not displayed on web", async ({ page }) => {
+    await page.goto("http://localhost:8082/#root/_hidden/_options/_optionsOther");
+    await expect(page.getByRole("heading", { name: "Note Erasure Timeout" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Tray" })).toBeHidden();
+});
+
+test("Spellcheck settings not displayed on web", async ({ page }) => {
+    await page.goto("http://localhost:8082/#root/_hidden/_options/_optionsSpellcheck");
+    await expect(page.getByRole("heading", { name: "Spell Check" })).toBeVisible();
+    await expect(page.getByRole("heading", { name: "Tray" })).toBeHidden();
+    await expect(page.getByText("These options apply only for desktop builds")).toBeVisible();
+    await expect(page.getByText("Enable spellcheck")).toBeHidden();
+});

_regroup/integration-tests/tree.spec.ts

@@ -0,0 +1,18 @@
+import test, { expect } from "@playwright/test";
+
+test("Renders on desktop", async ({ page, context }) => {
+    await page.goto("http://localhost:8082");
+    await expect(page.locator(".tree")).toContainText("Trilium Integration Test");
+});
+
+test("Renders on mobile", async ({ page, context }) => {
+    await context.addCookies([
+        {
+            url: "http://localhost:8082",
+            name: "trilium-device",
+            value: "mobile"
+        }
+    ]);
+    await page.goto("http://localhost:8082");
+    await expect(page.locator(".tree")).toContainText("Trilium Integration Test");
+});

_regroup/integration-tests/update_check.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from "@playwright/test";
+
+const expectedVersion = "0.90.3";
+
+test("Displays update badge when there is a version available", async ({ page }) => {
+    await page.goto("http://localhost:8080");
+    await page.getByRole("button", { name: "" }).click();
+    await page.getByText(`Version ${expectedVersion} is available,`).click();
+
+    const page1 = await page.waitForEvent("popup");
+    expect(page1.url()).toBe(`https://github.com/TriliumNext/Trilium/releases/tag/v${expectedVersion}`);
+});

_regroup/package.json

@@ -0,0 +1,58 @@
+{
+  "main": "./electron-main.js",
+  "bin": {
+    "trilium": "src/main.js"
+  },
+  "type": "module",
+  "scripts": {    
+    "server:start-safe": "cross-env TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev nodemon src/main.ts",
+    "server:start-no-dir": "cross-env TRILIUM_ENV=dev nodemon src/main.ts",
+    "server:start-test": "npm run server:switch && rimraf ./data-test && cross-env TRILIUM_DATA_DIR=./data-test TRILIUM_ENV=dev TRILIUM_PORT=9999 nodemon src/main.ts",
+    "server:qstart": "npm run server:switch && npm run server:start",
+    "server:switch": "rimraf ./node_modules/better-sqlite3 && npm install",
+    "electron:start-no-dir": "cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_ENV=dev TRILIUM_PORT=37742 electron --inspect=5858 .",
+    "electron:start-nix": "electron-rebuild --version 33.3.1 && cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./electron-main.ts --inspect=5858 .\"",
+    "electron:start-nix-no-dir": "electron-rebuild --version 33.3.1 && cross-env NODE_OPTIONS=\"--import tsx\" TRILIUM_ENV=dev TRILIUM_PORT=37742 nix-shell -p electron_33 --run \"electron ./electron-main.ts --inspect=5858 .\"",    
+    "electron:start-prod-no-dir": "npm run build:prepare-dist && cross-env TRILIUM_ENV=prod electron --inspect=5858 .",
+    "electron:start-prod-nix": "electron-rebuild --version 33.3.1 && npm run build:prepare-dist && cross-env TRILIUM_DATA_DIR=./data TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./dist/electron-main.js --inspect=5858 .\"",
+    "electron:start-prod-nix-no-dir": "electron-rebuild --version 33.3.1 && npm run build:prepare-dist && cross-env TRILIUM_ENV=dev nix-shell -p electron_33 --run \"electron ./dist/electron-main.js --inspect=5858 .\"",
+    "electron:qstart": "npm run electron:switch && npm run electron:start",
+    "electron:switch": "electron-rebuild",    
+    "docs:build": "typedoc",        
+    "test": "npm run client:test && npm run server:test",    
+    "client:test": "cross-env TRILIUM_ENV=dev TRILIUM_DATA_DIR=./integration-tests/db TRILIUM_INTEGRATION_TEST=memory vitest --root src/public/app",
+    "client:coverage": "cross-env TRILIUM_ENV=dev TRILIUM_DATA_DIR=./integration-tests/db TRILIUM_INTEGRATION_TEST=memory vitest --root src/public/app --coverage",
+    "test:playwright": "playwright test --workers 1",
+    "test:integration-edit-db": "cross-env TRILIUM_INTEGRATION_TEST=edit TRILIUM_PORT=8081 TRILIUM_ENV=dev TRILIUM_DATA_DIR=./integration-tests/db nodemon src/main.ts",
+    "test:integration-mem-db": "cross-env    nodemon src/main.ts",
+    "test:integration-mem-db-dev": "cross-env TRILIUM_INTEGRATION_TEST=memory TRILIUM_PORT=8082 TRILIUM_ENV=dev TRILIUM_DATA_DIR=./integration-tests/db nodemon src/main.ts",
+    "dev:watch-dist": "tsx ./bin/watch-dist.ts",
+    "dev:format-check": "eslint -c eslint.format.config.js .",
+    "dev:format-fix": "eslint -c eslint.format.config.js . --fix",
+    "dev:linter-check": "eslint .",
+    "dev:linter-fix": "eslint . --fix",    
+    "chore:generate-document": "cross-env nodemon ./bin/generate_document.ts 1000",
+    "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",
+    "@vitest/coverage-v8": "3.2.4",
+    "eslint": "9.33.0",
+    "eslint-plugin-simple-import-sort": "12.1.1",
+    "esm": "3.2.25",
+    "jsdoc": "4.0.4",
+    "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"
+  },
+  "optionalDependencies": {
+    "appdmg": "0.6.6"
+  }
+}

_regroup/spec/etapi/app_info.ts

@@ -0,0 +1,9 @@
+import etapi from "../support/etapi.js";
+/* TriliumNextTODO: port to Vitest 
+etapi.describeEtapi("app_info", () => {
+    it("get", async () => {
+        const appInfo = await etapi.getEtapi("app-info");
+        expect(appInfo.clipperProtocolVersion).toEqual("1.0");
+    });
+});
+*/

_regroup/spec/etapi/backup.ts

@@ -0,0 +1,10 @@
+import etapi from "../support/etapi.js";
+
+/* TriliumNextTODO: port to Vitest
+etapi.describeEtapi("backup", () => {
+    it("create", async () => {
+        const response = await etapi.putEtapiContent("backup/etapi_test");
+        expect(response.status).toEqual(204);
+    });
+});
+*/

_regroup/spec/etapi/import.ts

@@ -0,0 +1,26 @@
+import etapi from "../support/etapi.js";
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+/* TriliumNextTODO: port to Vitest 
+etapi.describeEtapi("import", () => {
+    // temporarily skip this test since test-export.zip is missing
+    xit("import", async () => {
+        const scriptDir = path.dirname(fileURLToPath(import.meta.url));
+
+        const zipFileBuffer = fs.readFileSync(path.resolve(scriptDir, "test-export.zip"));
+
+        const response = await etapi.postEtapiContent("notes/root/import", zipFileBuffer);
+        expect(response.status).toEqual(201);
+
+        const { note, branch } = await response.json();
+
+        expect(note.title).toEqual("test-export");
+        expect(branch.parentNoteId).toEqual("root");
+
+        const content = await (await etapi.getEtapiContent(`notes/${note.noteId}/content`)).text();
+        expect(content).toContain("test export content");
+    });
+});
+*/

_regroup/spec/etapi/notes.ts

@@ -0,0 +1,103 @@
+import crypto from "crypto";
+import etapi from "../support/etapi.js";
+
+/* TriliumNextTODO: port to Vitest
+etapi.describeEtapi("notes", () => {
+    it("create", async () => {
+        const { note, branch } = await etapi.postEtapi("create-note", {
+            parentNoteId: "root",
+            type: "text",
+            title: "Hello World!",
+            content: "Content",
+            prefix: "Custom prefix"
+        });
+
+        expect(note.title).toEqual("Hello World!");
+        expect(branch.parentNoteId).toEqual("root");
+        expect(branch.prefix).toEqual("Custom prefix");
+
+        const rNote = await etapi.getEtapi(`notes/${note.noteId}`);
+        expect(rNote.title).toEqual("Hello World!");
+
+        const rContent = await (await etapi.getEtapiContent(`notes/${note.noteId}/content`)).text();
+        expect(rContent).toEqual("Content");
+
+        const rBranch = await etapi.getEtapi(`branches/${branch.branchId}`);
+        expect(rBranch.parentNoteId).toEqual("root");
+        expect(rBranch.prefix).toEqual("Custom prefix");
+    });
+
+    it("patch", async () => {
+        const { note } = await etapi.postEtapi("create-note", {
+            parentNoteId: "root",
+            type: "text",
+            title: "Hello World!",
+            content: "Content"
+        });
+
+        await etapi.patchEtapi(`notes/${note.noteId}`, {
+            title: "new title",
+            type: "code",
+            mime: "text/apl",
+            dateCreated: "2000-01-01 12:34:56.999+0200",
+            utcDateCreated: "2000-01-01 10:34:56.999Z"
+        });
+
+        const rNote = await etapi.getEtapi(`notes/${note.noteId}`);
+        expect(rNote.title).toEqual("new title");
+        expect(rNote.type).toEqual("code");
+        expect(rNote.mime).toEqual("text/apl");
+        expect(rNote.dateCreated).toEqual("2000-01-01 12:34:56.999+0200");
+        expect(rNote.utcDateCreated).toEqual("2000-01-01 10:34:56.999Z");
+    });
+
+    it("update content", async () => {
+        const { note } = await etapi.postEtapi("create-note", {
+            parentNoteId: "root",
+            type: "text",
+            title: "Hello World!",
+            content: "Content"
+        });
+
+        await etapi.putEtapiContent(`notes/${note.noteId}/content`, "new content");
+
+        const rContent = await (await etapi.getEtapiContent(`notes/${note.noteId}/content`)).text();
+        expect(rContent).toEqual("new content");
+    });
+
+    it("create / update binary content", async () => {
+        const { note } = await etapi.postEtapi("create-note", {
+            parentNoteId: "root",
+            type: "file",
+            title: "Hello World!",
+            content: "ZZZ"
+        });
+
+        const updatedContent = crypto.randomBytes(16);
+
+        await etapi.putEtapiContent(`notes/${note.noteId}/content`, updatedContent);
+
+        const rContent = await (await etapi.getEtapiContent(`notes/${note.noteId}/content`)).arrayBuffer();
+        expect(Buffer.from(new Uint8Array(rContent))).toEqual(updatedContent);
+    });
+
+    it("delete note", async () => {
+        const { note } = await etapi.postEtapi("create-note", {
+            parentNoteId: "root",
+            type: "text",
+            title: "Hello World!",
+            content: "Content"
+        });
+
+        await etapi.deleteEtapi(`notes/${note.noteId}`);
+
+        const resp = await etapi.getEtapiResponse(`notes/${note.noteId}`);
+        expect(resp.status).toEqual(404);
+
+        const error = await resp.json();
+        expect(error.status).toEqual(404);
+        expect(error.code).toEqual("NOTE_NOT_FOUND");
+        expect(error.message).toEqual(`Note '${note.noteId}' not found.`);
+    });
+});
+*/

_regroup/spec/support/etapi.ts

@@ -0,0 +1,155 @@
+import type child_process from "child_process";
+import { describe, beforeAll, afterAll } from "vitest";
+
+let etapiAuthToken: string | undefined;
+
+const getEtapiAuthorizationHeader = (): string => "Basic " + Buffer.from(`etapi:${etapiAuthToken}`).toString("base64");
+
+const PORT: string = "9999";
+const HOST: string = "http://localhost:" + PORT;
+
+type SpecDefinitionsFunc = () => void;
+
+function describeEtapi(description: string, specDefinitions: SpecDefinitionsFunc): void {
+    describe(description, () => {
+        let appProcess: ReturnType<typeof child_process.spawn>;
+
+        beforeAll(async () => {});
+
+        afterAll(() => {});
+
+        specDefinitions();
+    });
+}
+
+async function getEtapiResponse(url: string): Promise<Response> {
+    return await fetch(`${HOST}/etapi/${url}`, {
+        method: "GET",
+        headers: {
+            Authorization: getEtapiAuthorizationHeader()
+        }
+    });
+}
+
+async function getEtapi(url: string): Promise<any> {
+    const response = await getEtapiResponse(url);
+    return await processEtapiResponse(response);
+}
+
+async function getEtapiContent(url: string): Promise<Response> {
+    const response = await fetch(`${HOST}/etapi/${url}`, {
+        method: "GET",
+        headers: {
+            Authorization: getEtapiAuthorizationHeader()
+        }
+    });
+
+    checkStatus(response);
+
+    return response;
+}
+
+async function postEtapi(url: string, data: Record<string, unknown> = {}): Promise<any> {
+    const response = await fetch(`${HOST}/etapi/${url}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: getEtapiAuthorizationHeader()
+        },
+        body: JSON.stringify(data)
+    });
+    return await processEtapiResponse(response);
+}
+
+async function postEtapiContent(url: string, data: BodyInit): Promise<Response> {
+    const response = await fetch(`${HOST}/etapi/${url}`, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/octet-stream",
+            Authorization: getEtapiAuthorizationHeader()
+        },
+        body: data
+    });
+
+    checkStatus(response);
+
+    return response;
+}
+
+async function putEtapi(url: string, data: Record<string, unknown> = {}): Promise<any> {
+    const response = await fetch(`${HOST}/etapi/${url}`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: getEtapiAuthorizationHeader()
+        },
+        body: JSON.stringify(data)
+    });
+    return await processEtapiResponse(response);
+}
+
+async function putEtapiContent(url: string, data?: BodyInit): Promise<Response> {
+    const response = await fetch(`${HOST}/etapi/${url}`, {
+        method: "PUT",
+        headers: {
+            "Content-Type": "application/octet-stream",
+            Authorization: getEtapiAuthorizationHeader()
+        },
+        body: data
+    });
+
+    checkStatus(response);
+
+    return response;
+}
+
+async function patchEtapi(url: string, data: Record<string, unknown> = {}): Promise<any> {
+    const response = await fetch(`${HOST}/etapi/${url}`, {
+        method: "PATCH",
+        headers: {
+            "Content-Type": "application/json",
+            Authorization: getEtapiAuthorizationHeader()
+        },
+        body: JSON.stringify(data)
+    });
+    return await processEtapiResponse(response);
+}
+
+async function deleteEtapi(url: string): Promise<any> {
+    const response = await fetch(`${HOST}/etapi/${url}`, {
+        method: "DELETE",
+        headers: {
+            Authorization: getEtapiAuthorizationHeader()
+        }
+    });
+    return await processEtapiResponse(response);
+}
+
+async function processEtapiResponse(response: Response): Promise<any> {
+    const text = await response.text();
+
+    if (response.status < 200 || response.status >= 300) {
+        throw new Error(`ETAPI error ${response.status}: ${text}`);
+    }
+
+    return text?.trim() ? JSON.parse(text) : null;
+}
+
+function checkStatus(response: Response): void {
+    if (response.status < 200 || response.status >= 300) {
+        throw new Error(`ETAPI error ${response.status}`);
+    }
+}
+
+export default {
+    describeEtapi,
+    getEtapi,
+    getEtapiResponse,
+    getEtapiContent,
+    postEtapi,
+    postEtapiContent,
+    putEtapi,
+    putEtapiContent,
+    patchEtapi,
+    deleteEtapi
+};

_regroup/tsconfig.webpack.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "module": "NodeNext",
+    "declaration": false,
+    "sourceMap": true,
+    "outDir": "./build",
+    "strict": true,
+    "noImplicitAny": true,
+    "resolveJsonModule": true,
+    "lib": ["ES2023"],
+    "downlevelIteration": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowJs": true
+  },
+  "include": ["./src/public/app/**/*"],
+  "files": [
+    "./src/public/app/types.d.ts",
+    "./src/public/app/types-lib.d.ts",
+    "./src/types.d.ts"
+  ]
+}

_regroup/typedoc.json

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

@@ -1,22 +0,0 @@
-{
-  "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.24.0",
-  "devDependencies": {
-    "@redocly/cli": "2.12.3",
-    "archiver": "7.0.1",
-    "fs-extra": "11.3.2",
-    "react": "19.2.1",
-    "react-dom": "19.2.1",
-    "typedoc": "0.28.15",
-    "typedoc-plugin-missing-exports": "4.1.2"
-  }
-}

apps/build-docs/src/backend_script_entrypoint.ts

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

@@ -1,147 +0,0 @@
-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"), "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"));
-    await fs.copyFile("../../apps/website/src/assets/favicon.ico", join(OUTPUT_DIR, "user-guide", "favicon.ico"));
-    await fs.copyFile("../../apps/website/src/assets/favicon.ico", join(OUTPUT_DIR, "developer-guide", "favicon.ico"));
-
-    console.log("Documentation built successfully!");
-}
-
-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

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

apps/build-docs/src/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 "../../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/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta http-equiv="refresh" content="0; url=/user-guide">
-    <title>Redirecting...</title>
-</head>
-<body>
-    <p>If you are not redirected automatically, <a href="/user-guide">click here</a>.</p>
-</body>
-</html>

apps/build-docs/src/main.ts

@@ -1,30 +0,0 @@
-import { join } from "path";
-import BuildContext from "./context";
-import buildSwagger from "./swagger";
-import { cpSync, existsSync, mkdirSync, rmSync } from "fs";
-import buildDocs from "./build-docs";
-import buildScriptApi from "./script-api";
-
-const context: BuildContext = {
-    gitRootDir: join(__dirname, "../../../"),
-    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);
-
-    // Copy index and 404 files.
-    cpSync(join(__dirname, "index.html"), join(context.baseDir, "index.html"));
-    cpSync(join(context.baseDir, "user-guide/404.html"), join(context.baseDir, "404.html"));
-}
-
-main();

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

@@ -1,15 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

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

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

apps/build-docs/typedoc.backend.json

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

@@ -1,10 +0,0 @@
-{
-  "$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,4 +1,5 @@
 # The development license key for premium CKEditor features.
 # Note: This key must only be used for the Trilium Notes project.
-VITE_CKEDITOR_KEY=eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3ODcyNzA0MDAsImp0aSI6IjkyMWE1MWNlLTliNDMtNGRlMC1iOTQwLTc5ZjM2MDBkYjg1NyIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOiJ0cmlsaXVtIiwiZmVhdHVyZXMiOlsiVFJJTElVTSJdLCJ2YyI6ImU4YzRhMjBkIn0.hny77p-U4-jTkoqbwPytrEar5ylGCWBN7Ez3SlB8i6_mJCBIeCSTOlVQk_JMiOEq3AGykUMHzWXzjdMFwgniOw
+# Expires on: 2025-09-13
+VITE_CKEDITOR_KEY=eyJhbGciOiJFUzI1NiJ9.eyJleHAiOjE3NTc3MjE1OTksImp0aSI6ImFiN2E0NjZmLWJlZGMtNDNiYy1iMzU4LTk0NGQ0YWJhY2I3ZiIsImRpc3RyaWJ1dGlvbkNoYW5uZWwiOlsic2giLCJkcnVwYWwiXSwid2hpdGVMYWJlbCI6dHJ1ZSwiZmVhdHVyZXMiOlsiRFJVUCIsIkNNVCIsIkRPIiwiRlAiLCJTQyIsIlRPQyIsIlRQTCIsIlBPRSIsIkNDIiwiTUYiLCJTRUUiLCJFQ0giLCJFSVMiXSwidmMiOiI1MzlkOWY5YyJ9.2rvKPql4hmukyXhEtWPZ8MLxKvzPIwzCdykO653g7IxRRZy2QJpeRszElZx9DakKYZKXekVRAwQKgHxwkgbE_w
 VITE_CKEDITOR_ENABLE_INSPECTOR=false

apps/client/eslint.config.mjs

@@ -0,0 +1,5 @@
+import baseConfig from "../../eslint.config.mjs";
+
+export default [
+    ...baseConfig
+];

apps/client/package.json

@@ -1,21 +1,16 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.100.0",
+  "version": "0.97.2",
   "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/Trilium"
-  },
-  "scripts": {
-    "build": "cross-env NODE_OPTIONS=--max-old-space-size=4096 vite build",
-    "test": "vitest",
-    "coverage": "vitest --coverage",
-    "circular-deps": "dpdm -T src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
+    "url": "https://github.com/TriliumNext/Notes"
   },
   "dependencies": {
+    "@eslint/js": "9.33.0",
     "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
@@ -24,61 +19,70 @@
     "@fullcalendar/multimonth": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
-    "@mermaid-js/layout-elk": "0.2.0",
-    "@mind-elixir/node-menu": "5.0.1",
+    "@mermaid-js/layout-elk": "0.1.8",
+    "@mind-elixir/node-menu": "5.0.0",
     "@popperjs/core": "2.11.8",
-    "@preact/signals": "2.5.1",
     "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
-    "@triliumnext/split.js": "workspace:*",
-    "@zumer/snapdom": "2.0.1",
     "autocomplete.js": "0.38.1",
-    "bootstrap": "5.3.8",
+    "bootstrap": "5.3.7",
     "boxicons": "2.1.4",
-    "clsx": "2.1.1",
-    "color": "5.0.3",
-    "debounce": "3.0.0",
+    "dayjs": "1.11.13",
+    "dayjs-plugin-utc": "0.1.2",
+    "debounce": "2.2.0",
     "draggabilly": "3.0.0",
-    "force-graph": "1.51.0",
-    "globals": "16.5.0",
-    "i18next": "25.7.1",
+    "force-graph": "1.50.1",
+    "globals": "16.3.0",
+    "i18next": "25.3.4",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.27",
+    "katex": "0.16.22",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "17.0.1",
-    "mermaid": "11.12.2",
-    "mind-elixir": "5.3.7",
+    "marked": "16.1.2",
+    "mermaid": "11.9.0",
+    "mind-elixir": "5.0.5",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
-    "preact": "10.28.0",
-    "react-i18next": "16.4.0",
-    "reveal.js": "5.2.1",
+    "preact": "10.27.0",
+    "split.js": "1.6.5",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
-    "vanilla-js-wheel-zoom": "9.0.4"
+    "vanilla-js-wheel-zoom": "9.0.4",
+    "photoswipe": "^5.4.4"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-inspector": "5.0.0",
     "@preact/preset-vite": "2.10.2",
     "@types/bootstrap": "5.2.10",
-    "@types/jquery": "3.5.33",
-    "@types/leaflet": "1.9.21",
-    "@types/leaflet-gpx": "1.3.8",
+    "@types/jquery": "3.5.32",
+    "@types/leaflet": "1.9.20",
+    "@types/leaflet-gpx": "1.3.7",
     "@types/mark.js": "8.11.12",
-    "@types/reveal.js": "5.2.2",
-    "@types/tabulator-tables": "6.3.0",
+    "@types/tabulator-tables": "6.2.10",
     "copy-webpack-plugin": "13.0.1",
-    "happy-dom": "20.0.11",
+    "happy-dom": "18.0.1",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.1.4"
+    "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"
+      }
+    }
   }
 }

apps/client/src/assets/manifest.webmanifest

@@ -7,9 +7,6 @@
     "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 from "./entrypoints.js";
+import Entrypoints, { type SqlExecuteResults } from "./entrypoints.js";
 import options from "../services/options.js";
 import utils, { hasTouchBar } from "../services/utils.js";
 import zoomComponent from "./zoom.js";
@@ -13,6 +13,7 @@ import MainTreeExecutors from "./main_tree_executors.js";
 import toast from "../services/toast.js";
 import ShortcutComponent from "./shortcut_component.js";
 import { t, initLocale } from "../services/i18n.js";
+import type NoteDetailWidget from "../widgets/note_detail.js";
 import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
 import type { ConfirmWithMessageOptions, ConfirmWithTitleOptions } from "../widgets/dialogs/confirm.js";
@@ -20,6 +21,8 @@ import type LoadResults from "../services/load_results.js";
 import type { Attribute } from "../services/attribute_parser.js";
 import type NoteTreeWidget from "../widgets/note_tree.js";
 import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
+import type TypeWidget from "../widgets/type_widgets/type_widget.js";
+import type EditableTextTypeWidget from "../widgets/type_widgets/editable_text.js";
 import type { NativeImage, TouchBar } from "electron";
 import TouchBarComponent from "./touch_bar.js";
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
@@ -28,19 +31,16 @@ import { StartupChecks } from "./startup_checks.js";
 import type { CreateNoteOpts } from "../services/note_create.js";
 import { ColumnComponent } from "tabulator-tables";
 import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
-import type RootContainer from "../widgets/containers/root_container.js";
-import { SqlExecuteResults } from "@triliumnext/commons";
-import { AddLinkOpts } from "../widgets/dialogs/add_link.jsx";
-import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
-import { ReactWrappedWidget } from "../widgets/basic_widget.js";
-import type { MarkdownImportOpts } from "../widgets/dialogs/markdown_import.jsx";
-import type { InfoProps } from "../widgets/dialogs/info.jsx";
 
 interface Layout {
-    getRootWidget: (appContext: AppContext) => RootContainer;
+    getRootWidget: (appContext: AppContext) => RootWidget;
 }
 
-export interface BeforeUploadListener extends Component {
+interface RootWidget extends Component {
+    render: () => JQuery<HTMLElement>;
+}
+
+interface BeforeUploadListener extends Component {
     beforeUnloadEvent(): boolean;
 }
 
@@ -85,6 +85,7 @@ export type CommandMappings = {
     focusTree: CommandData;
     focusOnTitle: CommandData;
     focusOnDetail: CommandData;
+    focusOnSearchDefinition: Required<CommandData>;
     searchNotes: CommandData & {
         searchString?: string;
         ancestorNoteId?: string | null;
@@ -92,11 +93,6 @@ export type CommandMappings = {
     closeTocCommand: CommandData;
     closeHlt: CommandData;
     showLaunchBarSubtree: CommandData;
-    showHiddenSubtree: CommandData;
-    showSQLConsoleHistory: CommandData;
-    logout: CommandData;
-    switchToMobileVersion: CommandData;
-    switchToDesktopVersion: CommandData;
     showRevisions: CommandData & {
         noteId?: string | null;
     };
@@ -118,14 +114,14 @@ export type CommandMappings = {
     openedFileUpdated: CommandData & {
         entityType: string;
         entityId: string;
-        lastModifiedMs?: number;
+        lastModifiedMs: number;
         filePath: string;
     };
     focusAndSelectTitle: CommandData & {
         isNewNote?: boolean;
     };
     showPromptDialog: PromptDialogOptions;
-    showInfoDialog: InfoProps;
+    showInfoDialog: ConfirmWithMessageOptions;
     showConfirmDialog: ConfirmWithMessageOptions;
     showRecentChanges: CommandData & { ancestorNoteId: string };
     showImportDialog: CommandData & { noteId: string };
@@ -142,7 +138,6 @@ export type CommandMappings = {
     showLeftPane: CommandData;
     showAttachments: CommandData;
     showSearchHistory: CommandData;
-    showShareSubtree: CommandData;
     hoistNote: CommandData & { noteId: string };
     leaveProtectedSession: CommandData;
     enterProtectedSession: CommandData;
@@ -201,7 +196,7 @@ export type CommandMappings = {
     resetLauncher: ContextMenuCommandData;
 
     executeInActiveNoteDetailWidget: CommandData & {
-        callback: (value: ReactWrappedWidget) => void;
+        callback: (value: NoteDetailWidget | PromiseLike<NoteDetailWidget>) => void;
     };
     executeWithTextEditor: CommandData &
     ExecuteCommandData<CKTextEditor> & {
@@ -213,19 +208,19 @@ export type CommandMappings = {
      * Generally should not be invoked manually, as it is used by {@link NoteContext.getContentElement}.
      */
     executeWithContentElement: CommandData & ExecuteCommandData<JQuery<HTMLElement>>;
-    executeWithTypeWidget: CommandData & ExecuteCommandData<ReactWrappedWidget | null>;
+    executeWithTypeWidget: CommandData & ExecuteCommandData<TypeWidget | null>;
     addTextToActiveEditor: CommandData & {
         text: string;
     };
     /** Works only in the electron context menu. */
     replaceMisspelling: CommandData;
 
+    importMarkdownInline: CommandData;
     showPasswordNotSet: CommandData;
     showProtectedSessionPasswordDialog: CommandData;
     showUploadAttachmentsDialog: CommandData & { noteId: string };
-    showIncludeNoteDialog: CommandData & IncludeNoteOpts;
-    showAddLinkDialog: CommandData & AddLinkOpts;
-    showPasteMarkdownDialog: CommandData & MarkdownImportOpts;
+    showIncludeNoteDialog: CommandData & { textTypeWidget: EditableTextTypeWidget };
+    showAddLinkDialog: CommandData & { textTypeWidget: EditableTextTypeWidget, text: string };
     closeProtectedSessionPasswordDialog: CommandData;
     copyImageReferenceToClipboard: CommandData;
     copyImageToClipboard: CommandData;
@@ -272,7 +267,6 @@ export type CommandMappings = {
     closeThisNoteSplit: CommandData;
     moveThisNoteSplit: CommandData & { isMovingLeft: boolean };
     jumpToNote: CommandData;
-    openTodayNote: CommandData;
     commandPalette: CommandData;
 
     // Keyboard shortcuts
@@ -329,8 +323,6 @@ export type CommandMappings = {
     printActiveNote: CommandData;
     exportAsPdf: CommandData;
     openNoteExternally: CommandData;
-    openNoteCustom: CommandData;
-    openNoteOnServer: CommandData;
     renderActiveNote: CommandData;
     unhoist: CommandData;
     reloadFrontendApp: CommandData;
@@ -446,7 +438,6 @@ type EventMappings = {
         error: string;
     };
     searchRefreshed: { ntxId?: string | null };
-    textEditorRefreshed: { ntxId?: string | null, editor: CKTextEditor };
     hoistedNoteChanged: {
         noteId: string;
         ntxId: string | null;
@@ -488,9 +479,14 @@ type EventMappings = {
     relationMapResetPanZoom: { ntxId: string | null | undefined };
     relationMapResetZoomIn: { ntxId: string | null | undefined };
     relationMapResetZoomOut: { ntxId: string | null | undefined };
-    activeNoteChanged: {ntxId: string | null | undefined};
-    showAddLinkDialog: AddLinkOpts;
-    showIncludeDialog: IncludeNoteOpts;
+    activeNoteChanged: {};
+    showAddLinkDialog: {
+        textTypeWidget: EditableTextTypeWidget;
+        text: string;
+    };
+    showIncludeDialog: {
+        textTypeWidget: EditableTextTypeWidget;
+    };
     openBulkActionsDialog: {
         selectedOrActiveNoteIds: string[];
     };
@@ -498,10 +494,6 @@ type EventMappings = {
         noteIds: string[];
     };
     refreshData: { ntxId: string | null | undefined };
-    contentSafeMarginChanged: {
-        top: number;
-        noteContext: NoteContext;
-    }
 };
 
 export type EventListener<T extends EventNames> = {
@@ -534,7 +526,7 @@ export type FilteredCommandNames<T extends CommandData> = keyof Pick<CommandMapp
 export class AppContext extends Component {
     isMainWindow: boolean;
     components: Component[];
-    beforeUnloadListeners: (WeakRef<BeforeUploadListener> | (() => boolean))[];
+    beforeUnloadListeners: WeakRef<BeforeUploadListener>[];
     tabManager!: TabManager;
     layout?: Layout;
     noteTreeWidget?: NoteTreeWidget;
@@ -627,7 +619,7 @@ export class AppContext extends Component {
             component.triggerCommand(commandName, { $el: $(this) });
         });
 
-        this.child(rootWidget as Component);
+        this.child(rootWidget);
 
         this.triggerEvent("initialRenderComplete", {});
     }
@@ -654,24 +646,16 @@ export class AppContext extends Component {
     }
 
     getComponentByEl(el: HTMLElement) {
-        return $(el).closest("[data-component-id]").prop("component");
+        return $(el).closest(".component").prop("component");
     }
 
-    addBeforeUnloadListener(obj: BeforeUploadListener | (() => boolean)) {
+    addBeforeUnloadListener(obj: BeforeUploadListener) {
         if (typeof WeakRef !== "function") {
             // older browsers don't support WeakRef
             return;
         }
 
-        if (typeof obj === "object") {
-            this.beforeUnloadListeners.push(new WeakRef<BeforeUploadListener>(obj));
-        } else {
-            this.beforeUnloadListeners.push(obj);
-        }
-    }
-
-    removeBeforeUnloadListener(listener: (() => boolean)) {
-        this.beforeUnloadListeners = this.beforeUnloadListeners.filter(l => l !== listener);
+        this.beforeUnloadListeners.push(new WeakRef<BeforeUploadListener>(obj));
     }
 }
 
@@ -681,29 +665,25 @@ const appContext = new AppContext(window.glob.isMainWindow);
 $(window).on("beforeunload", () => {
     let allSaved = true;
 
-    appContext.beforeUnloadListeners = appContext.beforeUnloadListeners.filter((wr) => typeof wr === "function" || !!wr.deref());
+    appContext.beforeUnloadListeners = appContext.beforeUnloadListeners.filter((wr) => !!wr.deref());
 
-    for (const listener of appContext.beforeUnloadListeners) {
-        if (typeof listener === "object") {
-            const component = listener.deref();
+    for (const weakRef of appContext.beforeUnloadListeners) {
+        const component = weakRef.deref();
 
-            if (!component) {
-                continue;
-            }
+        if (!component) {
+            continue;
+        }
 
-            if (!component.beforeUnloadEvent()) {
-                console.log(`Component ${component.componentId} is not finished saving its state.`);
-                allSaved = false;
-            }
-        } else {
-            if (!listener()) {
-                allSaved = false;
-            }
+        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 (!allSaved) {
-        toast.showMessage(t("app_context.please_wait_for_save"), 10000);
         return "some string";
     }
 });

apps/client/src/components/component.ts

@@ -1,8 +1,6 @@
 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.
  *
@@ -21,7 +19,6 @@ 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)}`;
@@ -79,14 +76,6 @@ 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>;
 
@@ -131,35 +120,6 @@ 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,7 +10,22 @@ import bundleService from "../services/bundle.js";
 import froca from "../services/froca.js";
 import linkService from "../services/link.js";
 import { t } from "../services/i18n.js";
-import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
+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;
+}
 
 export default class Entrypoints extends Component {
     constructor() {
@@ -19,7 +34,7 @@ export default class Entrypoints extends Component {
 
     openDevToolsCommand() {
         if (utils.isElectron()) {
-            utils.dynamicRequire("@electron/remote").getCurrentWindow().webContents.toggleDevTools();
+            utils.dynamicRequire("@electron/remote").getCurrentWindow().toggleDevTools();
         }
     }
 
@@ -109,7 +124,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 = webContents.navigationHistory.getActiveIndex();
+            const activeIndex = parseInt(webContents.navigationHistory.getActiveIndex());
 
             webContents.goToIndex(activeIndex - 1);
         } else {
@@ -121,7 +136,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 = webContents.navigationHistory.getActiveIndex();
+            const activeIndex = parseInt(webContents.navigationHistory.getActiveIndex());
 
             webContents.goToIndex(activeIndex + 1);
         } else {
@@ -159,16 +174,6 @@ 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

@@ -9,10 +9,10 @@ import hoistedNoteService from "../services/hoisted_note.js";
 import options from "../services/options.js";
 import type { ViewScope } from "../services/link.js";
 import type FNote from "../entities/fnote.js";
+import type TypeWidget from "../widgets/type_widgets/type_widget.js";
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
 import type CodeMirror from "@triliumnext/codemirror";
 import { closeActiveDialog } from "../services/dialog.js";
-import { ReactWrappedWidget } from "../widgets/basic_widget.js";
 
 export interface SetNoteOpts {
     triggerSwitchEvent?: unknown;
@@ -321,20 +321,14 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
             return false;
         }
 
-        if (note.type === "search") {
-            return false;
-        }
-
         if (!["default", "contextual-help"].includes(this.viewScope?.viewMode ?? "")) {
             return false;
         }
 
         // Collections must always display a note list, even if no children.
-        if (note.type === "book") {
-            const viewType = note.getLabelValue("viewType") ?? "grid";
-            if (!["list", "grid"].includes(viewType)) {
-                return true;
-            }
+        const viewType = note.getLabelValue("viewType") ?? "grid";
+        if (!["list", "grid"].includes(viewType)) {
+            return true;
         }
 
         if (!note.hasChildren()) {
@@ -401,7 +395,7 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
     async getTypeWidget() {
         return this.timeout(
-            new Promise<ReactWrappedWidget | null>((resolve) =>
+            new Promise<TypeWidget | null>((resolve) =>
                 appContext.triggerCommand("executeWithTypeWidget", {
                     resolve,
                     ntxId: this.ntxId
@@ -444,22 +438,4 @@ 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

@@ -7,6 +7,7 @@ import protectedSessionService from "../services/protected_session.js";
 import options from "../services/options.js";
 import froca from "../services/froca.js";
 import utils from "../services/utils.js";
+import LlmChatPanel from "../widgets/llm_chat_panel.js";
 import toastService from "../services/toast.js";
 import noteCreateService from "../services/note_create.js";
 
@@ -42,6 +43,8 @@ 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">) {
@@ -66,13 +69,6 @@ export default class RootCommandExecutor extends Component {
         }
     }
 
-    openNoteOnServerCommand() {
-        const noteId = appContext.tabManager.getActiveContextNoteId();
-        if (noteId) {
-            openService.openNoteOnServer(noteId);
-        }
-    }
-
     enterProtectedSessionCommand() {
         protectedSessionService.enterProtectedSession();
     }
@@ -177,8 +173,7 @@ export default class RootCommandExecutor extends Component {
     }
 
     toggleTrayCommand() {
-        if (!utils.isElectron() || options.is("disableTray")) return;
-
+        if (!utils.isElectron()) return;
         const { BrowserWindow } = utils.dynamicRequire("@electron/remote");
         const windows = BrowserWindow.getAllWindows() as Electron.BaseWindow[];
         const isVisible = windows.every((w) => w.isVisible());

apps/client/src/components/tab_manager.ts

@@ -165,7 +165,7 @@ export default class TabManager extends Component {
         const activeNoteContext = this.getActiveContext();
         this.updateDocumentTitle(activeNoteContext);
 
-        this.triggerEvent("activeNoteChanged", {ntxId:activeNoteContext?.ntxId}); // trigger this even in on popstate event
+        this.triggerEvent("activeNoteChanged", {}); // trigger this even in on popstate event
     }
 
     calculateHash(): string {
@@ -265,7 +265,6 @@ export default class TabManager extends Component {
         mainNtxId: string | null = null
     ): Promise<NoteContext> {
         const noteContext = new NoteContext(ntxId, hoistedNoteId, mainNtxId);
-        noteContext.setEmpty();
 
         const existingNoteContext = this.children.find((nc) => nc.ntxId === noteContext.ntxId);
 
@@ -434,9 +433,6 @@ 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);
 
@@ -604,18 +600,18 @@ export default class TabManager extends Component {
     }
 
     async moveTabToNewWindowCommand({ ntxId }: { ntxId: string }) {
-        const { notePath, hoistedNoteId, viewScope } = this.getNoteContextById(ntxId);
+        const { notePath, hoistedNoteId } = this.getNoteContextById(ntxId);
 
         const removed = await this.removeNoteContext(ntxId);
 
         if (removed) {
-            this.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
+            this.triggerCommand("openInWindow", { notePath, hoistedNoteId });
         }
     }
 
     async copyTabToNewWindowCommand({ ntxId }: { ntxId: string }) {
-        const { notePath, hoistedNoteId, viewScope } = this.getNoteContextById(ntxId);
-        this.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
+        const { notePath, hoistedNoteId } = this.getNoteContextById(ntxId);
+        this.triggerCommand("openInWindow", { notePath, hoistedNoteId });
     }
 
     async reopenLastTabCommand() {
@@ -647,32 +643,7 @@ export default class TabManager extends Component {
                 ...this.noteContexts.slice(-noteContexts.length),
                 ...this.noteContexts.slice(lastClosedTab.position, -noteContexts.length)
             ];
-
-            // Update mainNtxId if the restored pane is the main pane in the split pane
-            const { oldMainNtxId, newMainNtxId } = (() => {
-                if (noteContexts.length !== 1) {
-                    return { oldMainNtxId: undefined, newMainNtxId: undefined };
-                }
-
-                const mainNtxId = noteContexts[0]?.mainNtxId;
-                const index = this.noteContexts.findIndex(c => c.ntxId === mainNtxId);
-
-                // No need to update if the restored position is after mainNtxId
-                if (index === -1 || lastClosedTab.position > index) {
-                    return { oldMainNtxId: undefined, newMainNtxId: undefined };
-                }
-
-                return {
-                    oldMainNtxId: this.noteContexts[index].ntxId ?? undefined,
-                    newMainNtxId: noteContexts[0]?.ntxId ?? undefined
-                };
-            })();
-
-            this.triggerCommand("noteContextReorder", {
-                ntxIdsInOrder: ntxsInOrder.map((nc) => nc.ntxId).filter((id) => id !== null),
-                oldMainNtxId,
-                newMainNtxId
-            });
+            this.noteContextReorderEvent({ ntxIdsInOrder: ntxsInOrder.map((nc) => nc.ntxId).filter((id) => id !== null) });
 
             let mainNtx = noteContexts.find((nc) => nc.isMainContext());
             if (mainNtx) {

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 focusedEl = e.target as unknown as HTMLElement;
-            const $target = $(focusedEl);
+            const $target = $(e.target);
 
             this.$activeModal = $target.closest(".modal-dialog");
-            this.lastFocusedComponent = appContext.getComponentByEl(focusedEl);
+            const parentComponentEl = $target.closest(".component");
+            this.lastFocusedComponent = appContext.getComponentByEl(parentComponentEl[0]);
             this.#refreshTouchBar();
         });
     }

apps/client/src/desktop.ts

@@ -8,9 +8,13 @@ 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();
@@ -22,7 +26,6 @@ bundleService.getWidgetBundlesByParent().then(async (widgetBundles) => {
     appContext.setLayout(new DesktopLayout(widgetBundles));
     appContext.start().catch((e) => {
         toastService.showPersistent({
-            id: "critical-error",
             title: t("toast.critical-error.title"),
             icon: "alert",
             message: t("toast.critical-error.message", { message: e.message })
@@ -45,10 +48,6 @@ if (utils.isElectron()) {
     electronContextMenu.setupContextMenu();
 }
 
-if (utils.isPWA()) {
-    initPWATopbarColor();
-}
-
 function initOnElectron() {
     const electron: typeof Electron = utils.dynamicRequire("electron");
     electron.ipcRenderer.on("globalShortcut", async (event, actionName) => appContext.triggerCommand(actionName));
@@ -59,7 +58,6 @@ function initOnElectron() {
 
     initDarkOrLightMode(style);
     initTransparencyEffects(style, currentWindow);
-    initFullScreenDetection(currentWindow);
 
     if (options.get("nativeTitleBarVisible") !== "true") {
         initTitleBarButtons(style, currentWindow);
@@ -89,11 +87,6 @@ function initTitleBarButtons(style: CSSStyleDeclaration, currentWindow: Electron
     }
 }
 
-function initFullScreenDetection(currentWindow: Electron.BrowserWindow) {
-    currentWindow.on("enter-full-screen", () => document.body.classList.add("full-screen"));
-    currentWindow.on("leave-full-screen", () => document.body.classList.remove("full-screen"));
-}
-
 function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {
     if (window.glob.platform === "win32") {
         const material = style.getPropertyValue("--background-material");
@@ -123,20 +116,3 @@ function initDarkOrLightMode(style: CSSStyleDeclaration) {
     const { nativeTheme } = utils.dynamicRequire("@electron/remote") as typeof ElectronRemote;
     nativeTheme.themeSource = themeSource;
 }
-
-function initPWATopbarColor() {
-    const tracker = $("#background-color-tracker");
-
-    if (tracker.length) {
-        const applyThemeColor = () => {
-            let meta = $("meta[name='theme-color']");
-            if (!meta.length) {
-                meta = $(`<meta name="theme-color">`).appendTo($("head"));
-            }
-            meta.attr("content", tracker.css("color"));
-        };
-
-        tracker.on("transitionend", applyThemeColor);
-        applyThemeColor();
-    }
-}

apps/client/src/entities/fnote.ts

@@ -1,12 +1,12 @@
 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";
 import type FAttachment from "./fattachment.js";
 import type { default as FAttribute, AttributeType } from "./fattribute.js";
 import utils from "../services/utils.js";
-import search from "../services/search.js";
 
 const LABEL = "label";
 const RELATION = "relation";
@@ -64,7 +64,7 @@ export interface NoteMetaData {
 /**
  * Note is the main node and concept in Trilium.
  */
-export default class FNote {
+class FNote {
     private froca: Froca;
 
     noteId!: string;
@@ -240,7 +240,7 @@ export default class FNote {
 
             const aNote = this.froca.getNoteFromCache(aNoteId);
 
-            if (!aNote || aNote.isArchived || aNote.isHiddenCompletely()) {
+            if (aNote.isArchived || aNote.isHiddenCompletely()) {
                 return 1;
             }
 
@@ -256,37 +256,18 @@ export default class FNote {
         return this.children;
     }
 
-    async getChildNoteIdsWithArchiveFiltering(includeArchived = false) {
-        const isHiddenNote = this.noteId.startsWith("_");
-        const isSearchNote = this.type === "search";
-        if (!includeArchived && !isHiddenNote && !isSearchNote) {
-            const unorderedIds = new Set(await search.searchForNoteIds(`note.parents.noteId="${this.noteId}" #!archived`));
-            const results: string[] = [];
-            for (const id of this.children) {
-                if (unorderedIds.has(id)) {
-                    results.push(id);
-                }
-            }
-            return results;
-        } else {
-            return this.children;
-        }
-    }
-
-    async getSubtreeNoteIds(includeArchived = false) {
+    async getSubtreeNoteIds() {
         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(includeArchived));
+            noteIds.push(await child.getSubtreeNoteIds());
         }
         return noteIds.flat();
     }
 
     async getSubtreeNotes() {
         const noteIds = await this.getSubtreeNoteIds();
-        return (await this.froca.getNotes(noteIds));
+        return this.froca.getNotes(noteIds);
     }
 
     async getChildNotes() {
@@ -435,7 +416,7 @@ export default class FNote {
         return notePaths;
     }
 
-    getSortedNotePathRecords(hoistedNoteId = "root", activeNotePath: string | null = null): NotePathRecord[] {
+    getSortedNotePathRecords(hoistedNoteId = "root"): NotePathRecord[] {
         const isHoistedRoot = hoistedNoteId === "root";
 
         const notePaths: NotePathRecord[] = this.getAllNotePaths().map((path) => ({
@@ -446,23 +427,7 @@ export default 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) {
@@ -483,11 +448,10 @@ export default 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", activeNotePath: string | null = null) {
-        return this.getSortedNotePathRecords(hoistedNoteId, activeNotePath)[0]?.notePath;
+    getBestNotePath(hoistedNoteId = "root") {
+        return this.getSortedNotePathRecords(hoistedNoteId)[0]?.notePath;
     }
 
     /**
@@ -620,7 +584,7 @@ export default class FNote {
         let childBranches = this.getChildBranches();
 
         if (!childBranches) {
-            console.error(`No children for '${this.noteId}'. This shouldn't happen.`);
+            ws.logError(`No children for '${this.noteId}'. This shouldn't happen.`);
             return [];
         }
 
@@ -806,16 +770,6 @@ export default class FNote {
         return this.getAttributeValue(LABEL, name);
     }
 
-    getLabelOrRelation(nameWithPrefix: string) {
-        if (nameWithPrefix.startsWith("#")) {
-            return this.getLabelValue(nameWithPrefix.substring(1));
-        } else if (nameWithPrefix.startsWith("~")) {
-            return this.getRelationValue(nameWithPrefix.substring(1));
-        } else {
-            return this.getLabelValue(nameWithPrefix);
-        }
-    }
-
     /**
      * @param name - relation name
      * @returns relation value if relation exists, null otherwise
@@ -867,7 +821,8 @@ export default class FNote {
             return [];
         }
 
-        const promotedAttrs = this.getAttributeDefinitions()
+        const promotedAttrs = this.getAttributes()
+            .filter((attr) => attr.isDefinition())
             .filter((attr) => {
                 const def = attr.getDefinition();
 
@@ -887,11 +842,6 @@ export default class FNote {
         return promotedAttrs;
     }
 
-    getAttributeDefinitions() {
-        return this.getAttributes()
-            .filter((attr) => attr.isDefinition());
-    }
-
     hasAncestor(ancestorNoteId: string, followTemplates = false, visitedNoteIds: Set<string> | null = null) {
         if (this.noteId === ancestorNoteId) {
             return true;
@@ -955,8 +905,8 @@ export default class FNote {
         return this.getBlob();
     }
 
-    getBlob() {
-        return this.froca.getBlob("notes", this.noteId);
+    async getBlob() {
+        return await this.froca.getBlob("notes", this.noteId);
     }
 
     toString() {
@@ -1070,14 +1020,6 @@ export default 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.
      */
@@ -1085,3 +1027,5 @@ export default class FNote {
         return await server.get<NoteMetaData>(`notes/${this.noteId}/metadata`);
     }
 }
+
+export default FNote;

apps/client/src/layouts/desktop_layout.ts

@@ -1,49 +1,78 @@
-import { applyModals } from "./layout_commons.js";
-import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
-import ApiLog from "../widgets/api_log.jsx";
-import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
-import CloseZenModeButton from "../widgets/close_zen_button.jsx";
-import ContentHeader from "../widgets/containers/content_header.js";
-import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
-import FindWidget from "../widgets/find.js";
 import FlexContainer from "../widgets/containers/flex_container.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import GlobalMenu from "../widgets/buttons/global_menu.jsx";
-import HighlightsListWidget from "../widgets/highlights_list.js";
-import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
-import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
-import MovePaneButton from "../widgets/buttons/move_pane_button.js";
-import NoteIconWidget from "../widgets/note_icon.jsx";
-import NoteList from "../widgets/collections/NoteList.jsx";
-import NoteTitleWidget from "../widgets/note_title.jsx";
-import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import options from "../services/options.js";
-import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
-import QuickSearchWidget from "../widgets/quick_search.js";
-import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import Ribbon from "../widgets/ribbon/Ribbon.jsx";
-import RightPaneContainer from "../widgets/containers/right_pane_container.js";
-import RootContainer from "../widgets/containers/root_container.js";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
-import ScrollPadding from "../widgets/scroll_padding.js";
-import SearchResult from "../widgets/search_result.jsx";
-import SharedInfo from "../widgets/shared_info.jsx";
-import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import SqlResults from "../widgets/sql_result.js";
-import SqlTableSchemas from "../widgets/sql_table_schemas.js";
+import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import TabRowWidget from "../widgets/tab_row.js";
-import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
+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 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 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 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 UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
-import utils from "../services/utils.js";
-import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
-import NoteDetail from "../widgets/NoteDetail.jsx";
-import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
-import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
-import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import 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";
 
 export default class DesktopLayout {
 
@@ -78,9 +107,9 @@ export default class DesktopLayout {
                 new FlexContainer("row")
                     .class("tab-row-container")
                     .child(new FlexContainer("row").id("tab-row-left-spacer"))
-                    .optChild(launcherPaneIsHorizontal, <LeftPaneToggle isHorizontalLayout={true} />)
+                    .optChild(launcherPaneIsHorizontal, new LeftPaneToggleWidget(true))
                     .child(new TabRowWidget().class("full-width"))
-                    .optChild(customTitleBarButtons, <TitleBarButtons />)
+                    .optChild(customTitleBarButtons, new TitleBarButtonsWidget())
                     .css("height", "40px")
                     .css("background-color", "var(--launcher-pane-background-color)")
                     .setParent(appContext)
@@ -101,7 +130,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, <TitleBarButtons />).css("height", "40px"))
+                            .optChild(!fullWidthTabBar, new FlexContainer("row").child(new TabRowWidget()).optChild(customTitleBarButtons, new TitleBarButtonsWidget()).css("height", "40px"))
                             .child(
                                 new FlexContainer("row")
                                     .filling()
@@ -122,33 +151,69 @@ export default class DesktopLayout {
                                                                 .css("min-height", "50px")
                                                                 .css("align-items", "center")
                                                                 .cssBlock(".title-row > * { margin: 5px; }")
-                                                                .child(<NoteIconWidget />)
-                                                                .child(<NoteTitleWidget />)
-                                                                .child(<SpacerWidget baseSize={0} growthFactor={1} />)
-                                                                .child(<MovePaneButton direction="left" />)
-                                                                .child(<MovePaneButton direction="right" />)
-                                                                .child(<ClosePaneButton />)
-                                                                .child(<CreatePaneButton />)
+                                                                .child(new NoteIconWidget())
+                                                                .child(new NoteTitleWidget())
+                                                                .child(new SpacerWidget(0, 1))
+                                                                .child(new MovePaneButton(true))
+                                                                .child(new MovePaneButton(false))
+                                                                .child(new ClosePaneButton())
+                                                                .child(new CreatePaneButton())
                                                         )
-                                                        .child(<Ribbon />)
+                                                        .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(new WatchedFileUpdateStatusWidget())
-                                                        .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
+                                                        .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(
                                                             new ScrollingContainer()
                                                                 .filling()
-                                                                .child(new ContentHeader()
-                                                                    .child(<ReadOnlyNoteInfoBar />)
-                                                                    .child(<SharedInfo />)
-                                                                )
-                                                                .child(<PromotedAttributes />)
-                                                                .child(<SqlTableSchemas />)
-                                                                .child(<NoteDetail />)
-                                                                .child(<NoteList media="screen" />)
-                                                                .child(<SearchResult />)
-                                                                .child(<SqlResults />)
-                                                                .child(<ScrollPadding />)
+                                                                .child(new PromotedAttributesWidget())
+                                                                .child(new SqlTableSchemasWidget())
+                                                                .child(new NoteDetailWidget())
+                                                                .child(new NoteListWidget(false))
+                                                                .child(new SearchResultWidget())
+                                                                .child(new SqlResultWidget())
+                                                                .child(new ScrollPaddingWidget())
                                                         )
-                                                        .child(<ApiLog />)
+                                                        .child(new ApiLogWidget())
                                                         .child(new FindWidget())
                                                         .child(
                                                             ...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC
@@ -167,11 +232,11 @@ export default class DesktopLayout {
                             )
                     )
             )
-            .child(<CloseZenModeButton />)
+            .child(new CloseZenButton())
 
             // Desktop-specific dialogs.
-            .child(<PasswordNoteSetDialog />)
-            .child(<UploadAttachmentsDialog />);
+            .child(new PasswordNoteSetDialog())
+            .child(new UploadAttachmentsDialog());
 
         applyModals(rootContainer);
         return rootContainer;
@@ -181,18 +246,14 @@ export default class DesktopLayout {
         let launcherPane;
 
         if (isHorizontal) {
-            launcherPane = new FlexContainer("row")
-                .css("height", "53px")
-                .class("horizontal")
-                .child(<LauncherContainer isHorizontalLayout={true} />)
-                .child(<GlobalMenu isHorizontalLayout={true} />);
+            launcherPane = new FlexContainer("row").css("height", "53px").class("horizontal").child(new LauncherContainer(true)).child(new GlobalMenuWidget(true));
         } else {
             launcherPane = new FlexContainer("column")
                 .css("width", "53px")
                 .class("vertical")
-                .child(<GlobalMenu isHorizontalLayout={false} />)
-                .child(<LauncherContainer isHorizontalLayout={false} />)
-                .child(<LeftPaneToggle isHorizontalLayout={false} />);
+                .child(new GlobalMenuWidget(false))
+                .child(new LauncherContainer(false))
+                .child(new LeftPaneToggleWidget(false));
         }
 
         launcherPane.id("launcher-pane");

apps/client/src/layouts/layout_commons.ts

@@ -0,0 +1,71 @@
+import type RootContainer from "../widgets/containers/root_container.js";
+
+import AboutDialog from "../widgets/dialogs/about.js";
+import HelpDialog from "../widgets/dialogs/help.js";
+import JumpToNoteDialog from "../widgets/dialogs/jump_to_note.js";
+import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
+import PromptDialog from "../widgets/dialogs/prompt.js";
+import AddLinkDialog from "../widgets/dialogs/add_link.js";
+import IncludeNoteDialog from "../widgets/dialogs/include_note.js";
+import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
+import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js";
+import SortChildNotesDialog from "../widgets/dialogs/sort_child_notes.js";
+import NoteTypeChooserDialog from "../widgets/dialogs/note_type_chooser.js";
+import MoveToDialog from "../widgets/dialogs/move_to.js";
+import CloneToDialog from "../widgets/dialogs/clone_to.js";
+import ImportDialog from "../widgets/dialogs/import.js";
+import ExportDialog from "../widgets/dialogs/export.js";
+import MarkdownImportDialog from "../widgets/dialogs/markdown_import.js";
+import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session_password.js";
+import ConfirmDialog from "../widgets/dialogs/confirm.js";
+import RevisionsDialog from "../widgets/dialogs/revisions.js";
+import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
+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 NoteDetailWidget from "../widgets/note_detail.js";
+import NoteListWidget from "../widgets/note_list.js";
+import { CallToActionDialog } from "../widgets/dialogs/call_to_action.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(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(new PromotedAttributesWidget())
+                .child(new NoteDetailWidget())
+                .child(new NoteListWidget(true)))
+        .child(new CallToActionDialog());
+}

apps/client/src/layouts/layout_commons.tsx

@@ -1,56 +0,0 @@
-import type RootContainer from "../widgets/containers/root_container.js";
-
-import AboutDialog from "../widgets/dialogs/about.js";
-import HelpDialog from "../widgets/dialogs/help.js";
-import JumpToNoteDialog from "../widgets/dialogs/jump_to_note.js";
-import RecentChangesDialog from "../widgets/dialogs/recent_changes.js";
-import PromptDialog from "../widgets/dialogs/prompt.js";
-import AddLinkDialog from "../widgets/dialogs/add_link.js";
-import IncludeNoteDialog from "../widgets/dialogs/include_note.js";
-import BulkActionsDialog from "../widgets/dialogs/bulk_actions.js";
-import BranchPrefixDialog from "../widgets/dialogs/branch_prefix.js";
-import SortChildNotesDialog from "../widgets/dialogs/sort_child_notes.js";
-import NoteTypeChooserDialog from "../widgets/dialogs/note_type_chooser.js";
-import MoveToDialog from "../widgets/dialogs/move_to.js";
-import CloneToDialog from "../widgets/dialogs/clone_to.js";
-import ImportDialog from "../widgets/dialogs/import.js";
-import ExportDialog from "../widgets/dialogs/export.js";
-import MarkdownImportDialog from "../widgets/dialogs/markdown_import.js";
-import ProtectedSessionPasswordDialog from "../widgets/dialogs/protected_session_password.js";
-import ConfirmDialog from "../widgets/dialogs/confirm.js";
-import RevisionsDialog from "../widgets/dialogs/revisions.js";
-import DeleteNotesDialog from "../widgets/dialogs/delete_notes.js";
-import InfoDialog from "../widgets/dialogs/info.js";
-import IncorrectCpuArchDialog from "../widgets/dialogs/incorrect_cpu_arch.js";
-import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
-import PopupEditorDialog from "../widgets/dialogs/PopupEditor.jsx";
-import ToastContainer from "../widgets/Toast.jsx";
-
-export function applyModals(rootContainer: RootContainer) {
-    rootContainer
-        .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(<PopupEditorDialog />)
-        .child(<CallToActionDialog />)
-        .child(<ToastContainer />)
-}

apps/client/src/layouts/mobile_layout.ts

@@ -0,0 +1,183 @@
+import FlexContainer from "../widgets/containers/flex_container.js";
+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 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 { applyModals } from "./layout_commons.js";
+import CloseZenButton from "../widgets/close_zen_button.js";
+
+const MOBILE_CSS = `
+<style>
+kbd {
+    display: none;
+}
+
+.dropdown-menu {
+    font-size: larger;
+}
+
+.action-button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.25em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    color: var(--main-text-color);
+}
+.quick-search {
+    margin: 0;
+}
+.quick-search .dropdown-menu {
+    max-width: 350px;
+}
+</style>`;
+
+const FANCYTREE_CSS = `
+<style>
+.tree-wrapper {
+    max-height: 100%;
+    margin-top: 0px;
+    overflow-y: auto;
+    contain: content;
+    padding-left: 10px;
+}
+
+.fancytree-custom-icon {
+    font-size: 2em;
+}
+
+.fancytree-title {
+    font-size: 1.5em;
+    margin-left: 0.6em !important;
+}
+
+.fancytree-node {
+    padding: 5px;
+}
+
+.fancytree-node .fancytree-expander:before {
+    font-size: 2em !important;
+}
+
+span.fancytree-expander {
+    width: 24px !important;
+    margin-right: 5px;
+}
+
+.fancytree-loading span.fancytree-expander {
+    width: 24px;
+    height: 32px;
+}
+
+.fancytree-loading  span.fancytree-expander:after {
+    width: 20px;
+    height: 20px;
+    margin-top: 4px;
+    border-width: 2px;
+    border-style: solid;
+}
+
+.tree-wrapper .collapse-tree-button,
+.tree-wrapper .scroll-to-active-note-button,
+.tree-wrapper .tree-settings-button {
+    position: fixed;
+    margin-right: 16px;
+    display: none;
+}
+
+.tree-wrapper .unhoist-button {
+    font-size: 200%;
+}
+</style>`;
+
+export default class MobileLayout {
+    getRootWidget(appContext: typeof AppContext) {
+        const rootContainer = new RootContainer(true)
+            .setParent(appContext)
+            .class("horizontal-layout")
+            .cssBlock(MOBILE_CSS)
+            .child(new FlexContainer("column").id("mobile-sidebar-container"))
+            .child(
+                new FlexContainer("row")
+                    .filling()
+                    .id("mobile-rest-container")
+                    .child(
+                        new SidebarContainer("tree", "column")
+                            .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("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")
+                            .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())
+                            )
+                            .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(
+                new FlexContainer("column")
+                    .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 CloseZenButton());
+        applyModals(rootContainer);
+        return rootContainer;
+    }
+}

apps/client/src/layouts/mobile_layout.tsx

@@ -1,204 +0,0 @@
-import { applyModals } from "./layout_commons.js";
-import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
-import { useNoteContext } from "../widgets/react/hooks.jsx";
-import CloseZenModeButton from "../widgets/close_zen_button.js";
-import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
-import FlexContainer from "../widgets/containers/flex_container.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
-import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
-import NoteList from "../widgets/collections/NoteList.jsx";
-import NoteTitleWidget from "../widgets/note_title.js";
-import ContentHeader from "../widgets/containers/content_header.js";
-import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import QuickSearchWidget from "../widgets/quick_search.js";
-import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import RootContainer from "../widgets/containers/root_container.js";
-import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
-import SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
-import SearchResult from "../widgets/search_result.jsx";
-import SharedInfoWidget from "../widgets/shared_info.js";
-import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
-import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
-import TabRowWidget from "../widgets/tab_row.js";
-import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
-import type AppContext from "../components/app_context.js";
-import NoteDetail from "../widgets/NoteDetail.jsx";
-import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
-import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
-import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
-
-const MOBILE_CSS = `
-<style>
-span.keyboard-shortcut,
-kbd {
-    display: none;
-}
-
-.dropdown-menu {
-    font-size: larger;
-}
-
-.action-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    font-size: 1.25em;
-    padding-inline-start: 0.5em;
-    padding-inline-end: 0.5em;
-    color: var(--main-text-color);
-}
-.quick-search {
-    margin: 0;
-}
-.quick-search .dropdown-menu {
-    max-width: 350px;
-}
-</style>`;
-
-const FANCYTREE_CSS = `
-<style>
-.tree-wrapper {
-    max-height: 100%;
-    margin-top: 0px;
-    overflow-y: auto;
-    contain: content;
-    padding-inline-start: 10px;
-}
-
-.fancytree-custom-icon {
-    font-size: 2em;
-}
-
-.fancytree-title {
-    font-size: 1.5em;
-    margin-inline-start: 0.6em !important;
-}
-
-.fancytree-node {
-    padding: 5px;
-}
-
-.fancytree-node .fancytree-expander:before {
-    font-size: 2em !important;
-}
-
-span.fancytree-expander {
-    width: 24px !important;
-    margin-inline-end: 5px;
-}
-
-.fancytree-loading span.fancytree-expander {
-    width: 24px;
-    height: 32px;
-}
-
-.fancytree-loading  span.fancytree-expander:after {
-    width: 20px;
-    height: 20px;
-    margin-top: 4px;
-    border-width: 2px;
-    border-style: solid;
-}
-
-.tree-wrapper .collapse-tree-button,
-.tree-wrapper .scroll-to-active-note-button,
-.tree-wrapper .tree-settings-button {
-    position: fixed;
-    margin-inline-end: 16px;
-    display: none;
-}
-
-.tree-wrapper .unhoist-button {
-    font-size: 200%;
-}
-</style>`;
-
-export default class MobileLayout {
-    getRootWidget(appContext: typeof AppContext) {
-        const rootContainer = new RootContainer(true)
-            .setParent(appContext)
-            .class("horizontal-layout")
-            .cssBlock(MOBILE_CSS)
-            .child(new FlexContainer("column").id("mobile-sidebar-container"))
-            .child(
-                new FlexContainer("row")
-                    .filling()
-                    .id("mobile-rest-container")
-                    .child(
-                        new SidebarContainer("tree", "column")
-                            .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-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", "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 SplitNoteContainer(() =>
-                                    new NoteWrapperWidget()
-                                        .child(
-                                            new FlexContainer("row")
-                                                .contentSized()
-                                                .css("font-size", "larger")
-                                                .css("align-items", "center")
-                                                .child(<ToggleSidebarButton />)
-                                                .child(<NoteTitleWidget />)
-                                                .child(<MobileDetailMenu />)
-                                        )
-                                        .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
-                                        .child(<PromotedAttributes />)
-                                        .child(
-                                            new ScrollingContainer()
-                                                .filling()
-                                                .contentSized()
-                                                .child(new ContentHeader()
-                                                    .child(<ReadOnlyNoteInfoBar />)
-                                                    .child(<SharedInfoWidget />)
-                                                )
-                                                .child(<NoteDetail />)
-                                                .child(<NoteList media="screen" />)
-                                                .child(<StandaloneRibbonAdapter component={SearchDefinitionTab} />)
-                                                .child(<SearchResult />)
-                                                .child(<FilePropertiesWrapper />)
-                                        )
-                                        .child(<MobileEditorToolbar />)
-                                )
-                            )
-                    )
-            )
-            .child(
-                new FlexContainer("column")
-                    .contentSized()
-                    .id("mobile-bottom-bar")
-                    .child(new TabRowWidget().css("height", "40px"))
-                    .child(new FlexContainer("row")
-                        .class("horizontal")
-                        .css("height", "53px")
-                        .child(<LauncherContainer isHorizontalLayout />)
-                        .child(<GlobalMenuWidget isHorizontalLayout />)
-                        .id("launcher-pane"))
-            )
-            .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,3 +1,5 @@
+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,8 +1,6 @@
-import { KeyboardActionNames } from "@triliumnext/commons";
-import keyboardActionService, { getActionSync } from "../services/keyboard_actions.js";
+import keyboardActionService from "../services/keyboard_actions.js";
 import note_tooltip from "../services/note_tooltip.js";
 import utils from "../services/utils.js";
-import { h, JSX, render } from "preact";
 
 export interface ContextMenuOptions<T> {
     x: number;
@@ -15,18 +13,8 @@ export interface ContextMenuOptions<T> {
     onHide?: () => void;
 }
 
-export interface CustomMenuItem {
-    kind: "custom",
-    componentFn: () => JSX.Element | null;
-}
-
-export interface MenuSeparatorItem {
-    kind: "separator";
-}
-
-export interface MenuHeader {
-    title: string;
-    kind: "header";
+interface MenuSeparatorItem {
+    title: "----";
 }
 
 export interface MenuItemBadge {
@@ -50,13 +38,12 @@ 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> | CustomMenuItem | MenuSeparatorItem | MenuHeader;
+export type MenuItem<T> = MenuCommandItem<T> | MenuSeparatorItem;
 export type MenuHandler<T> = (item: MenuCommandItem<T>, e: JQuery.MouseDownEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => void;
 export type ContextMenuEvent = PointerEvent | MouseEvent | JQuery.ContextMenuEvent;
 
@@ -155,198 +142,117 @@ class ContextMenu {
         this.$widget
             .css({
                 display: "block",
-                top,
-                left
+                top: top,
+                left: left
             })
             .addClass("show");
     }
 
-    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
-        let prevItemKind: string = "";
-
-        for (let index = 0; index < items.length; index++) {
-            const item = items[index];
-            const itemKind = ("kind" in item) ? item.kind : "";
-
+    addItems($parent: JQuery<HTMLElement>, items: MenuItem<any>[]) {
+        for (const item of items) {
             if (!item) {
                 continue;
             }
 
-            // 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 (itemKind === "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 (itemKind === "separator") {
-                if (prevItemKind === "separator") {
-                    // Skip consecutive separators
-                    continue;
-                }
-                $group.append($("<div>").addClass("dropdown-divider"));
-                shouldResetGroup = true; // End the group after the next item
-            } else if (itemKind === "header") {
-                $group.append($("<h6>").addClass("dropdown-header").text((item as MenuHeader).title));
-                shouldResetGroup = true;
+            if (item.title === "----") {
+                $parent.append($("<div>").addClass("dropdown-divider"));
             } else {
-                if (itemKind === "custom") {
-                    // Custom menu item
-                    $group.append(this.createCustomMenuItem(item as CustomMenuItem));
-                } else {
-                    // Standard menu item
-                    $group.append(this.createMenuItem(item as MenuCommandItem<any>));
+                const $icon = $("<span>");
+
+                if ("uiIcon" in item || "checked" in item) {
+                    const icon = (item.checked ? "bx bx-check" : item.uiIcon);
+                    if (icon) {
+                        $icon.addClass(icon);
+                    } else {
+                        $icon.append("&nbsp;");
+                    }
                 }
 
-                // 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;
-                };
-            }
+                const $link = $("<span>")
+                    .append($icon)
+                    .append(" &nbsp; ") // some space between icon and text
+                    .append(item.title);
 
-            prevItemKind = itemKind;
+                if ("badges" in item && item.badges) {
+                    for (let badge of item.badges) {
+                        const badgeElement = $(`<span class="badge">`).text(badge.title);
 
-        }
-    }
+                        if (badge.className) {
+                            badgeElement.addClass(badge.className);
+                        }
 
-    private createCustomMenuItem(item: CustomMenuItem) {
-        const element = document.createElement("li");
-        element.classList.add("dropdown-custom-item");
-        element.onclick = () => this.hide();
-        render(h(item.componentFn, {}), element);
-        return element;
-    }
+                        $link.append(badgeElement);
+                    }
+                }
 
-    private createMenuItem(item: MenuCommandItem<any>) {
-        const $icon = $("<span>");
+                if ("shortcut" in item && item.shortcut) {
+                    $link.append($("<kbd>").text(item.shortcut));
+                }
 
-        if ("uiIcon" in item || "checked" in item) {
-            const icon = (item.checked ? "bx bx-check" : item.uiIcon);
-            if (icon) {
-                $icon.addClass(icon);
-            } else {
-                $icon.append("&nbsp;");
+                const $item = $("<li>")
+                    .addClass("dropdown-item")
+                    .append($link)
+                    .on("contextmenu", (e) => false)
+                    // important to use mousedown instead of click since the former does not change focus
+                    // (especially important for focused text for spell check)
+                    .on("mousedown", (e) => {
+                        e.stopPropagation();
+
+                        if (e.which !== 1) {
+                            // only left click triggers menu items
+                            return false;
+                        }
+
+                        if (this.isMobile && "items" in item && item.items) {
+                            const $item = $(e.target).closest(".dropdown-item");
+
+                            $item.toggleClass("submenu-open");
+                            $item.find("ul.dropdown-menu").toggleClass("show");
+                            return false;
+                        }
+
+                        if ("handler" in item && item.handler) {
+                            item.handler(item, e);
+                        }
+
+                        this.options?.selectMenuItemHandler(item, e);
+
+                        // it's important to stop the propagation especially for sub-menus, otherwise the event
+                        // might be handled again by top-level menu
+                        return false;
+                    });
+
+                $item.on("mouseup", (e) => {
+                    // Prevent submenu from failing to expand on mobile
+                    if (!this.isMobile || !("items" in item && item.items)) {
+                        e.stopPropagation();
+                        // Hide the content menu on mouse up to prevent the mouse event from propagating to the elements below.
+                        this.hide();
+                        return false;
+                    }
+                });
+
+                if ("enabled" in item && item.enabled !== undefined && !item.enabled) {
+                    $item.addClass("disabled");
+                }
+
+                if ("items" in item && item.items) {
+                    $item.addClass("dropdown-submenu");
+                    $link.addClass("dropdown-toggle");
+
+                    const $subMenu = $("<ul>").addClass("dropdown-menu");
+                    if (!this.isMobile && item.columns) {
+                        $subMenu.css("column-count", item.columns);
+                    }
+
+                    this.addItems($subMenu, item.items);
+
+                    $item.append($subMenu);
+                }
+
+                $parent.append($item);
             }
         }
-
-        const $link = $("<span>")
-            .append($icon)
-            .append(" &nbsp; ") // some space between icon and text
-            .append(item.title);
-
-        if ("badges" in item && item.badges) {
-            for (let badge of item.badges) {
-                const badgeElement = $(`<span class="badge">`).text(badge.title);
-
-                if (badge.className) {
-                    badgeElement.addClass(badge.className);
-                }
-
-                $link.append(badgeElement);
-            }
-        }
-
-        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));
-        }
-
-        const $item = $("<li>")
-            .addClass("dropdown-item")
-            .append($link)
-            .on("contextmenu", (e) => false)
-            // important to use mousedown instead of click since the former does not change focus
-            // (especially important for focused text for spell check)
-            .on("mousedown", (e) => {
-                if (e.which !== 1) {
-                    // only left click triggers menu items
-                    return false;
-                }
-
-                if (this.isMobile && "items" in item && item.items) {
-                    const $item = $(e.target).closest(".dropdown-item");
-
-                    $item.toggleClass("submenu-open");
-                    $item.find("ul.dropdown-menu").toggleClass("show");
-                    return false;
-                }
-
-                // Prevent submenu from failing to expand on mobile
-                if (!("items" in item && item.items)) {
-                    this.hide();
-                }
-
-                if ("handler" in item && item.handler) {
-                    item.handler(item, e);
-                }
-
-                this.options?.selectMenuItemHandler(item, e);
-
-                // it's important to stop the propagation especially for sub-menus, otherwise the event
-                // might be handled again by top-level menu
-                return false;
-            });
-
-        if ("enabled" in item && item.enabled !== undefined && !item.enabled) {
-            $item.addClass("disabled");
-        }
-
-        if ("items" in item && item.items) {
-            $item.addClass("dropdown-submenu");
-            $link.addClass("dropdown-toggle");
-
-            const $subMenu = $("<ul>").addClass("dropdown-menu");
-            const hasColumns = !!item.columns && item.columns > 1;
-            if (!this.isMobile && hasColumns) {
-                $subMenu.css("column-count", item.columns!);
-            }
-
-            this.addItems($subMenu, item.items, hasColumns);
-
-            $item.append($subMenu);
-        }
-        return $item;
     }
 
     async hide() {

apps/client/src/menus/context_menu_utils.ts

@@ -1,21 +0,0 @@
-import { t } from "../services/i18n"
-import attributes from "../services/attributes"
-import FNote from "../entities/fnote"
-
-export function getArchiveMenuItem(note: FNote) {
-    if (!note.isArchived) {
-        return {
-            title: t("board_view.archive-note"),
-            uiIcon: "bx bx-archive",
-            handler: () => attributes.addLabel(note.noteId, "archived")
-        }
-    } else {
-        return {
-            title: t("board_view.unarchive-note"),
-            uiIcon: "bx bx-archive-out",
-            handler: async () => {
-                attributes.removeOwnedLabelByName(note, "archived")
-            }
-        }
-    }
-}

apps/client/src/menus/custom-items/NoteColorPicker.css

@@ -1,86 +0,0 @@
-:root {
-    --note-color-picker-clear-color-cell-background: var(--primary-button-background-color);
-    --note-color-picker-clear-color-cell-color: var(--main-background-color);
-    --note-color-picker-clear-color-cell-selection-outline-color: var(--primary-button-border-color);
-}
-
-.note-color-picker {
-    display: flex;
-    gap: 8px;
-    justify-content: space-between;
-}
-
-.note-color-picker .color-cell {
-    --color-picker-cell-size: 14px;
-
-    width: var(--color-picker-cell-size);
-    height: var(--color-picker-cell-size);
-    border-radius: 4px;
-    background-color: var(--color);
-}
-
-.note-color-picker .color-cell:not(.selected):hover {
-    transform: scale(1.2);
-}
-
-.note-color-picker .color-cell.disabled-color-cell {
-    cursor: not-allowed;
-}
-
-.note-color-picker .color-cell.selected {
-    outline: 2px solid var(--outline-color, var(--color));
-    outline-offset: 2px;
-}
-
-/*
- * RESET COLOR CELL
- */
-
-.note-color-picker .color-cell-reset {
-    --color: var(--note-color-picker-clear-color-cell-background);
-    --outline-color: var(--note-color-picker-clear-color-cell-selection-outline-color);
-
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.note-color-picker .color-cell-reset svg {
-    width: var(--color-picker-cell-size);
-    height: var(--color-picker-cell-size);
-    fill: var(--note-color-picker-clear-color-cell-color);
-}
-
-/*
- * CUSTOM COLOR CELL
- */
-
- .note-color-picker .custom-color-cell::before {
-    position: absolute;
-    content: "\ed35";
-    display: flex;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    font-size: calc(var(--color-picker-cell-size) * 1.3);
-    justify-content: center;
-    align-items: center;
-    font-family: boxicons;
-    font-size: 16px;
-    color: var(--foreground);
-}
-
-.note-color-picker .custom-color-cell {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    overflow: hidden;
-}
-
-.note-color-picker .custom-color-cell.custom-color-cell-empty {
-    background-image: url(./custom-color.png);
-    background-size: cover;
-    --foreground: transparent;
-}

apps/client/src/menus/custom-items/NoteColorPicker.tsx

@@ -1,204 +0,0 @@
-import "./NoteColorPicker.css";
-import { t } from "../../services/i18n";
-import { useCallback, useEffect, useRef, useState} from "preact/hooks";
-import {ComponentChildren} from "preact";
-import attributes from "../../services/attributes";
-import clsx from "clsx";
-import Color, { ColorInstance } from "color";
-import Debouncer from "../../utils/debouncer";
-import FNote from "../../entities/fnote";
-import froca from "../../services/froca";
-import { isMobile } from "../../services/utils";
-
-const COLOR_PALETTE = [
-    "#e64d4d", "#e6994d", "#e5e64d", "#99e64d", "#4de64d", "#4de699",
-    "#4de5e6", "#4d99e6", "#4d4de6", "#994de6", "#e64db3"
-];
-
-export interface NoteColorPickerProps {
-    /** The target Note instance or its ID string. */
-    note: FNote | string | null;
-}
-
-export default function NoteColorPicker(props: NoteColorPickerProps) {
-    if (!props.note) return null;
-
-    const [note, setNote] = useState<FNote | null>(null);
-    const [currentColor, setCurrentColor] = useState<string | null>(null);
-    const [isCustomColor, setIsCustomColor] = useState<boolean>(false);
-
-    useEffect(() => {
-        const retrieveNote = async (noteId: string) => {
-            const noteInstance = await froca.getNote(noteId, true);
-            if (noteInstance) {
-                setNote(noteInstance);
-            }
-        }
-
-        if (typeof props.note === "string") {
-            retrieveNote(props.note); // Get the note from the given ID string
-        } else {
-            setNote(props.note);
-        }
-    }, []);
-
-    useEffect(() => {
-        const colorLabel = note?.getLabel("color")?.value ?? null;
-        if (colorLabel) {
-            let color = tryParseColor(colorLabel);
-            if (color) {
-                setCurrentColor(color.hex().toLowerCase());
-            }
-        }
-    }, [note]);
-
-    useEffect(() => {
-        setIsCustomColor(currentColor !== null && COLOR_PALETTE.indexOf(currentColor) === -1);
-    }, [currentColor])
-
-    const onColorCellClicked = useCallback((color: string | null) => {
-        if (note) {
-            if (color !== null) {
-                attributes.setLabel(note.noteId, "color", color);
-            } else {
-                attributes.removeOwnedLabelByName(note, "color");
-            }
-
-            setCurrentColor(color);
-        }
-    }, [note, currentColor]);
-
-    return <div className="note-color-picker">
-
-        <ColorCell className="color-cell-reset"
-                   tooltip={t("note-color.clear-color")}
-                   color={null}
-                   isSelected={(currentColor === null)}
-                   isDisabled={(note === null)}
-                   onSelect={onColorCellClicked}>
-
-            {/* https://pictogrammers.com/library/mdi/icon/close/ */}
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-                <path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
-            </svg>
-        </ColorCell>
-
-
-        {COLOR_PALETTE.map((color) => (
-            <ColorCell key={color}
-                       tooltip={t("note-color.set-color")}
-                       color={color}
-                       isSelected={(color === currentColor)}
-                       isDisabled={(note === null)}
-                       onSelect={onColorCellClicked} />
-        ))}
-
-        <CustomColorCell tooltip={t("note-color.set-custom-color")}
-                         color={currentColor}
-                         isSelected={isCustomColor}
-                         isDisabled={(note === null)}
-                         onSelect={onColorCellClicked} />
-    </div>
-}
-
-interface ColorCellProps {
-    children?: ComponentChildren,
-    className?: string,
-    tooltip?: string,
-    color: string | null,
-    isSelected: boolean,
-    isDisabled?: boolean,
-    onSelect?: (color: string | null) => void
-}
-
-function ColorCell(props: ColorCellProps) {
-    return <div className={clsx(props.className, {
-                    "color-cell": true,
-                    "selected": props.isSelected,
-                    "disabled-color-cell": props.isDisabled
-                })}
-                style={`${(props.color !== null) ? `--color: ${props.color}` : ""}`}
-                title={props.tooltip}
-                onClick={() => props.onSelect?.(props.color)}>
-        {props.children}
-    </div>;
-}
-
-function CustomColorCell(props: ColorCellProps) {
-    const [pickedColor, setPickedColor] = useState<string | null>(null);
-    const colorInput = useRef<HTMLInputElement>(null);
-    const colorInputDebouncer = useRef<Debouncer<string | null> | null>(null);
-    const callbackRef = useRef(props.onSelect);
-
-    useEffect(() => {
-        colorInputDebouncer.current = new Debouncer(250, (color) => {
-            callbackRef.current?.(color);
-            setPickedColor(color);
-        });
-
-        return () => {
-            colorInputDebouncer.current?.destroy();
-        }
-    }, []);
-
-    useEffect(() => {
-        if (props.isSelected && pickedColor === null) {
-            setPickedColor(props.color);
-        }
-    }, [props.isSelected])
-
-    useEffect(() => {
-        callbackRef.current = props.onSelect;
-    }, [props.onSelect]);
-
-    const onSelect = useCallback(() => {
-        if (pickedColor !== null) {
-            callbackRef.current?.(pickedColor);
-        }
-
-        colorInput.current?.click();
-    }, [pickedColor]);
-
-    return <div style={`--foreground: ${getForegroundColor(props.color)};`}
-                onClick={isMobile() ? (e) => {
-                    // The color picker dropdown will close on some browser if the parent context menu is
-                    // dismissed, so stop the click propagation to prevent dismissing the menu.
-                    e.stopPropagation();
-                } : undefined}>
-        <ColorCell {...props}
-                   color={pickedColor}
-                   className={clsx("custom-color-cell", {
-                        "custom-color-cell-empty": (pickedColor === null)
-                   })}
-                   onSelect={onSelect}>
-
-            <input ref={colorInput}
-                   type="color"
-                   value={pickedColor ?? props.color ?? "#40bfbf"}
-                   onChange={() => {colorInputDebouncer.current?.updateValue(colorInput.current?.value ?? null)}}
-                   style="width: 0; height: 0; opacity: 0" />
-        </ColorCell>
-    </div>
-}
-
-function getForegroundColor(backgroundColor: string | null) {
-    if (backgroundColor === null) return "inherit";
-
-    const colorHsl = tryParseColor(backgroundColor)?.hsl();
-    if (colorHsl) {
-        let l = colorHsl.lightness();
-        return colorHsl.saturationl(0).lightness(l >= 50 ? 0 : 100).hex();
-    } else {
-        return "inherit";
-    }
-}
-
-function tryParseColor(colorStr: string): ColorInstance | null {
-    try {
-        return new Color(colorStr);
-    } catch(ex) {
-        console.error(ex);
-    }
-
-    return null;
-}

apps/client/src/menus/electron_context_menu.ts

@@ -4,7 +4,7 @@ import zoomService from "../components/zoom.js";
 import contextMenu, { type MenuItem } from "./context_menu.js";
 import { t } from "../services/i18n.js";
 import type { BrowserWindow } from "electron";
-import type { CommandNames, AppContext } from "../components/app_context.js";
+import type { CommandNames } from "../components/app_context.js";
 
 function setupContextMenu() {
     const electron = utils.dynamicRequire("electron");
@@ -13,8 +13,6 @@ function setupContextMenu() {
     // FIXME: Remove typecast once Electron is properly integrated.
     const { webContents } = remote.getCurrentWindow() as BrowserWindow;
 
-    let appContext: AppContext;
-
     webContents.on("context-menu", (event, params) => {
         const { editFlags } = params;
         const hasText = params.selectionText.trim().length > 0;
@@ -39,7 +37,7 @@ function setupContextMenu() {
                 handler: () => webContents.session.addWordToSpellCheckerDictionary(params.misspelledWord)
             });
 
-            items.push({ kind: "separator" });
+            items.push({ title: `----` });
         }
 
         if (params.isEditable) {
@@ -114,27 +112,13 @@ function setupContextMenu() {
             // Replace the placeholder with the real search keyword.
             let searchUrl = searchEngineUrl.replace("{keyword}", encodeURIComponent(params.selectionText));
 
-            items.push({ kind: "separator" });
+            items.push({ title: "----" });
 
             items.push({
                 title: t("electron_context_menu.search_online", { term: shortenedSelection, searchEngine: searchEngineName }),
                 uiIcon: "bx bx-search-alt",
                 handler: () => electron.shell.openExternal(searchUrl)
             });
-
-            items.push({
-                title: t("electron_context_menu.search_in_trilium", { term: shortenedSelection }),
-                uiIcon: "bx bx-search",
-                handler: async () => {
-                    if (!appContext) {
-                        appContext = (await import("../components/app_context.js")).default;
-                    }
-
-                    await appContext.triggerCommand("searchNotes", {
-                        searchString: params.selectionText
-                    });
-                }
-            });
         }
 
         if (items.length === 0) {

apps/client/src/menus/image_context_menu.ts

@@ -2,6 +2,8 @@ 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";
 
@@ -18,6 +20,12 @@ 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",
@@ -30,7 +38,48 @@ function setupContextMenu($image: JQuery<HTMLElement>) {
                 }
             ],
             selectMenuItemHandler: async ({ command }) => {
-                if (command === "copyImageReferenceToClipboard") {
+                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") {
                     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 ? { kind: "separator" } : null,
+            isVisibleRoot || isAvailableRoot ? { title: "----" } : 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 ? { kind: "separator" } : null,
+            isVisibleItem || isAvailableItem ? { title: "----" } : 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 },
 
-            { kind: "separator" },
+            { title: "----" },
 
             { title: t("launcher_context_menu.reset"), command: "resetLauncher", uiIcon: "bx bx-reset destructive-action-icon", enabled: canBeReset }
         ];

apps/client/src/menus/link_context_menu.ts

@@ -2,32 +2,26 @@ import { t } from "../services/i18n.js";
 import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
 import appContext, { type CommandNames } from "../components/app_context.js";
 import type { ViewScope } from "../services/link.js";
-import utils, { isMobile } from "../services/utils.js";
-import { getClosestNtxId } from "../widgets/widget_utils.js";
-import type { LeafletMouseEvent } from "leaflet";
 
 function openContextMenu(notePath: string, e: ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
     contextMenu.show({
         x: e.pageX,
         y: e.pageY,
-        items: getItems(e),
-        selectMenuItemHandler: ({ command }) => handleLinkContextMenuItem(command, e, notePath, viewScope, hoistedNoteId)
+        items: getItems(),
+        selectMenuItemHandler: ({ command }) => handleLinkContextMenuItem(command, notePath, viewScope, hoistedNoteId)
     });
 }
 
-function getItems(e: ContextMenuEvent | LeafletMouseEvent): MenuItem<CommandNames>[] {
-    const ntxId = getNtxId(e);
-    const isMobileSplitOpen = isMobile() && appContext.tabManager.getNoteContextById(ntxId).getMainContext().getSubContexts().length > 1;
-
+function getItems(): MenuItem<CommandNames>[] {
     return [
         { title: t("link_context_menu.open_note_in_new_tab"), command: "openNoteInNewTab", uiIcon: "bx bx-link-external" },
-        { title: !isMobileSplitOpen ? t("link_context_menu.open_note_in_new_split") : t("link_context_menu.open_note_in_other_split"), command: "openNoteInNewSplit", uiIcon: "bx bx-dock-right" },
+        { title: t("link_context_menu.open_note_in_new_split"), command: "openNoteInNewSplit", uiIcon: "bx bx-dock-right" },
         { title: t("link_context_menu.open_note_in_new_window"), command: "openNoteInNewWindow", uiIcon: "bx bx-window-open" },
         { title: t("link_context_menu.open_note_in_popup"), command: "openNoteInPopup", uiIcon: "bx bx-edit" }
     ];
 }
 
-function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEvent | LeafletMouseEvent, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
+function handleLinkContextMenuItem(command: string | undefined, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
     if (!hoistedNoteId) {
         hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId ?? null;
     }
@@ -35,8 +29,15 @@ function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEv
     if (command === "openNoteInNewTab") {
         appContext.tabManager.openContextWithNote(notePath, { hoistedNoteId, viewScope });
     } else if (command === "openNoteInNewSplit") {
-        const ntxId = getNtxId(e);
-        if (!ntxId) return;
+        const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
+
+        if (!subContexts) {
+            logError("subContexts is null");
+            return;
+        }
+
+        const { ntxId } = subContexts[subContexts.length - 1];
+
         appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath, hoistedNoteId, viewScope });
     } else if (command === "openNoteInNewWindow") {
         appContext.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
@@ -45,18 +46,6 @@ function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEv
     }
 }
 
-function getNtxId(e: ContextMenuEvent | LeafletMouseEvent) {
-    if (utils.isDesktop()) {
-        const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
-        if (!subContexts) return null;
-        return subContexts[subContexts.length - 1].ntxId;
-    } else if (e.target instanceof HTMLElement) {
-        return getClosestNtxId(e.target);
-    } else {
-        return null;
-    }
-}
-
 export default {
     getItems,
     handleLinkContextMenuItem,

apps/client/src/menus/tree_context_menu.ts

@@ -1,4 +1,3 @@
-import NoteColorPicker from "./custom-items/NoteColorPicker.jsx";
 import treeService from "../services/tree.js";
 import froca from "../services/froca.js";
 import clipboard from "../services/clipboard.js";
@@ -14,8 +13,6 @@ 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 {
@@ -64,11 +61,6 @@ 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";
@@ -77,29 +69,27 @@ 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", shortcut: "Ctrl+Click", uiIcon: "bx bx-link-external", enabled: noSelectedNotes },
+            { 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-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")}`,
+                      title: `${t("tree-context-menu.hoist-note")} <kbd data-command="toggleNoteHoisting"></kbd>`,
                       command: "toggleNoteHoisting",
-                      keyboardShortcut: "toggleNoteHoisting",
                       uiIcon: "bx bxs-chevrons-up",
                       enabled: noSelectedNotes && notSearch
                   },
             !isHoisted || !isNotRoot
                 ? null
-                : { title: t("tree-context-menu.unhoist-note"), command: "toggleNoteHoisting", keyboardShortcut: "toggleNoteHoisting", uiIcon: "bx bx-door-open" },
+                : { title: `${t("tree-context-menu.unhoist-note")} <kbd data-command="toggleNoteHoisting"></kbd>`, command: "toggleNoteHoisting", uiIcon: "bx bx-door-open" },
 
-            { kind: "separator" },
+            { title: "----" },
 
             {
-                title: t("tree-context-menu.insert-note-after"),
+                title: `${t("tree-context-menu.insert-note-after")}<kbd data-command="createNoteAfter"></kbd>`,
                 command: "insertNoteAfter",
-                keyboardShortcut: "createNoteAfter",
                 uiIcon: "bx bx-plus",
                 items: insertNoteAfterEnabled ? await noteTypesService.getNoteTypeItems("insertNoteAfter") : null,
                 enabled: insertNoteAfterEnabled && noSelectedNotes && notOptionsOrHelp,
@@ -107,22 +97,21 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
             },
 
             {
-                title: t("tree-context-menu.insert-child-note"),
+                title: `${t("tree-context-menu.insert-child-note")}<kbd data-command="createNoteInto"></kbd>`,
                 command: "insertChildNote",
-                keyboardShortcut: "createNoteInto",
                 uiIcon: "bx bx-plus",
                 items: notSearch ? await noteTypesService.getNoteTypeItems("insertChildNote") : null,
                 enabled: notSearch && noSelectedNotes && notOptionsOrHelp,
                 columns: 2
             },
 
-            { kind: "separator" },
+            { title: "----" },
 
             { 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 },
 
-            { kind: "separator" },
+            { title: "----" },
 
             {
                 title: t("tree-context-menu.advanced"),
@@ -131,58 +120,48 @@ 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 },
 
-                    { kind: "separator" },
+                    { title: "----" },
 
                     {
-                        title: t("tree-context-menu.edit-branch-prefix"),
+                        title: `${t("tree-context-menu.edit-branch-prefix")} <kbd data-command="editBranchPrefix"></kbd>`,
                         command: "editBranchPrefix",
-                        keyboardShortcut: "editBranchPrefix",
                         uiIcon: "bx bx-rename",
-                        enabled: isNotRoot && parentNotSearch && notOptionsOrHelp
-                    },
-                    {
-                        title:
-                        t("tree-context-menu.convert-to-attachment"),
-                        command: "convertNoteToAttachment",
-                        uiIcon: "bx bx-paperclip",
-                        enabled: isNotRoot && !isHoisted && notOptionsOrHelp && selectedNotes.some(note => note.isEligibleForConversionToAttachment())
+                        enabled: isNotRoot && parentNotSearch && noSelectedNotes && notOptionsOrHelp
                     },
+                    { title: t("tree-context-menu.convert-to-attachment"), command: "convertNoteToAttachment", uiIcon: "bx bx-paperclip", enabled: isNotRoot && !isHoisted && notOptionsOrHelp },
 
-                    { kind: "separator" },
+                    { title: "----" },
 
-                    { 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.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.sort-by"),
+                        title: `${t("tree-context-menu.sort-by")} <kbd data-command="sortChildNotes"></kbd>`,
                         command: "sortChildNotes",
-                        keyboardShortcut: "sortChildNotes",
                         uiIcon: "bx bx-sort-down",
                         enabled: noSelectedNotes && notSearch
                     },
 
-                    { kind: "separator" },
+                    { title: "----" },
 
                     { 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 }
                 ]
             },
 
-            { kind: "separator" },
+            { title: "----" },
 
             {
-                title: t("tree-context-menu.cut"),
+                title: `${t("tree-context-menu.cut")} <kbd data-command="cutNotesToClipboard"></kbd>`,
                 command: "cutNotesToClipboard",
-                keyboardShortcut: "cutNotesToClipboard",
                 uiIcon: "bx bx-cut",
                 enabled: isNotRoot && !isHoisted && parentNotSearch
             },
 
-            { title: t("tree-context-menu.copy-clone"), command: "copyNotesToClipboard", keyboardShortcut: "copyNotesToClipboard", uiIcon: "bx bx-copy", enabled: isNotRoot && !isHoisted },
+            { 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.paste-into"),
+                title: `${t("tree-context-menu.paste-into")} <kbd data-command="pasteNotesFromClipboard"></kbd>`,
                 command: "pasteNotesFromClipboard",
-                keyboardShortcut: "pasteNotesFromClipboard",
                 uiIcon: "bx bx-paste",
                 enabled: !clipboard.isClipboardEmpty() && notSearch && noSelectedNotes
             },
@@ -195,80 +174,39 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
             },
 
             {
-                title: t("tree-context-menu.move-to"),
+                title: `${t("tree-context-menu.move-to")} <kbd data-command="moveNotesTo"></kbd>`,
                 command: "moveNotesTo",
-                keyboardShortcut: "moveNotesTo",
                 uiIcon: "bx bx-transfer",
                 enabled: isNotRoot && !isHoisted && parentNotSearch
             },
 
-            { title: t("tree-context-menu.clone-to"), command: "cloneNotesTo", keyboardShortcut: "cloneNotesTo", uiIcon: "bx bx-duplicate", enabled: isNotRoot && !isHoisted },
+            { 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.duplicate"),
+                title: `${t("tree-context-menu.duplicate")} <kbd data-command="duplicateSubtree">`,
                 command: "duplicateSubtree",
-                keyboardShortcut: "duplicateSubtree",
                 uiIcon: "bx bx-outline",
                 enabled: parentNotSearch && isNotRoot && !isHoisted && notOptionsOrHelp
             },
 
             {
-                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"),
+                title: `${t("tree-context-menu.delete")} <kbd data-command="deleteNotes"></kbd>`,
                 command: "deleteNotes",
-                keyboardShortcut: "deleteNotes",
                 uiIcon: "bx bx-trash destructive-action-icon",
                 enabled: isNotRoot && !isHoisted && parentNotSearch && notOptionsOrHelp
             },
 
-            { kind: "separator"},
-
-            (notOptionsOrHelp && selectedNotes.length === 1) ? {
-                kind: "custom",
-                componentFn: () => {
-                    return NoteColorPicker({note});
-                }
-            } : null,
-
-            { kind: "separator" },
+            { title: "----" },
 
             { 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 },
 
-            { kind: "separator" },
+            { title: "----" },
 
             {
-                title: t("tree-context-menu.search-in-subtree"),
+                title: `${t("tree-context-menu.search-in-subtree")} <kbd data-command="searchInSubtree"></kbd>`,
                 command: "searchInSubtree",
-                keyboardShortcut: "searchInSubtree",
                 uiIcon: "bx bx-search",
                 enabled: notSearch && noSelectedNotes
             }