style(sql_console): improve style for frozen cell

Updated by "Cleanup translation files" add-on in Weblate.

Translation: Trilium Notes/README
Translate-URL: https://hosted.weblate.org/projects/trilium/readme/

.editorconfig

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

.envrc

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

.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@v5
+    uses: apple-actions/import-codesign-certs@v6
     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@v5
+    uses: apple-actions/import-codesign-certs@v6
     with:
       p12-file-base64: ${{ env.APPLE_INSTALLER_CERTIFICATE_BASE64 }}
       p12-password: ${{ env.APPLE_INSTALLER_CERTIFICATE_PASSWORD }}

.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@v5
+      uses: actions/checkout@v6
       with:
         ref: ${{ inputs.branch }}
         path: br-base

.github/copilot-instructions.md

@@ -0,0 +1,334 @@
+# 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/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@v5
+      uses: actions/checkout@v6
 
     # Add any setup steps before running the `github/codeql-action/init` action.
     # This includes steps like installing compilers or runtimes (`actions/setup-node`

.github/workflows/deploy-docs.yml

@@ -42,7 +42,7 @@ jobs:
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4

.github/workflows/dev.yml

@@ -24,7 +24,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
@@ -46,7 +46,7 @@ jobs:
     needs:
       - test_dev
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -80,7 +80,7 @@ jobs:
           - dockerfile: Dockerfile
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - uses: pnpm/action-setup@v4
       - name: Install dependencies

.github/workflows/i18n.yml

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

.github/workflows/main-docker.yml

@@ -32,7 +32,7 @@ jobs:
           - dockerfile: Dockerfile
     steps:
       - name: Checkout the repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
 
       - name: Set IMAGE_NAME to lowercase
         run: echo "IMAGE_NAME=${IMAGE_NAME,,}" >> $GITHUB_ENV
@@ -86,12 +86,12 @@ jobs:
 
       - name: Upload Playwright trace
         if: failure()
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         with:
           name: Playwright trace (${{ matrix.dockerfile }})
           path: test-output/playwright/output
 
-      - uses: actions/upload-artifact@v5
+      - uses: actions/upload-artifact@v6
         if: ${{ !cancelled() }}
         with:
           name: Playwright report (${{ matrix.dockerfile }})
@@ -141,7 +141,7 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Checkout repository
-        uses: actions/checkout@v5
+        uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
@@ -155,6 +155,10 @@ jobs:
       - 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
 
@@ -209,7 +213,7 @@ jobs:
           touch "/tmp/digests/${digest#sha256:}"
 
       - name: Upload digest
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         with:
           name: digests-${{ env.PLATFORM_PAIR }}-${{ matrix.dockerfile }}
           path: /tmp/digests/*
@@ -223,7 +227,7 @@ jobs:
       - build
     steps:
       - name: Download digests
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@v7
         with:
           path: /tmp/digests
           pattern: digests-*

.github/workflows/nightly.yml

@@ -45,9 +45,22 @@ jobs:
             image: win-signing
             shell: cmd
             forge_platform: win32
+        # Exclude ARM64 Linux from default matrix to use native runner
+        exclude:
+          - arch: arm64
+            os:
+              name: linux
+        # Add ARM64 Linux with native ubuntu-24.04-arm runner for better-sqlite3 compatibility
+        include:
+          - arch: arm64
+            os:
+              name: linux
+              image: ubuntu-24.04-arm
+              shell: bash
+              forge_platform: linux
     runs-on: ${{ matrix.os.image }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
@@ -57,7 +70,7 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - name: Update nightly version
-        run: npm run chore:ci-update-nightly-version
+        run: pnpm run chore:ci-update-nightly-version
       - name: Run the build
         uses: ./.github/actions/build-electron
         with:
@@ -77,7 +90,7 @@ jobs:
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.4.2
+        uses: softprops/action-gh-release@v2.5.0
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false
@@ -89,7 +102,7 @@ jobs:
           name: Nightly Build
 
       - name: Publish artifacts
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         if: ${{ github.event_name == 'pull_request' }}
         with:
           name: TriliumNotes ${{ matrix.os.name }} ${{ matrix.arch }}
@@ -109,7 +122,7 @@ jobs:
             runs-on: ubuntu-24.04-arm
     runs-on: ${{ matrix.runs-on }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
 
       - name: Run the build
         uses: ./.github/actions/build-server
@@ -118,7 +131,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.4.2
+        uses: softprops/action-gh-release@v2.5.0
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false

.github/workflows/playwright.yml

@@ -33,7 +33,7 @@ jobs:
       TRILIUM_DATA_DIR: "${{ github.workspace }}/apps/server/spec/db"
       TRILIUM_INTEGRATION_TEST: memory
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
         with:
           filter: tree:0
           fetch-depth: 0
@@ -77,9 +77,9 @@ jobs:
 
       - name: Upload test report
         if: failure()
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         with:
-          name: e2e report
+          name: e2e report ${{ matrix.arch }}
           path: apps/server-e2e/test-output
 
       - name: Kill the server

.github/workflows/release.yml

@@ -11,6 +11,14 @@ concurrency:
   cancel-in-progress: true
 
 jobs:
+  sanity-check:
+    name: Sanity Check
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v6
+
+      - name: Check version consistency
+        run: pnpm tsx ${{ github.workspace }}/scripts/check-version-consistency.ts ${{ github.ref_name }}
   make-electron:
     name: Make Electron
     strategy:
@@ -45,7 +53,7 @@ jobs:
               forge_platform: linux
     runs-on: ${{ matrix.os.image }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
@@ -73,7 +81,7 @@ jobs:
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         with:
           name: release-desktop-${{ matrix.os.name }}-${{ matrix.arch }}
           path: apps/desktop/upload/*.*
@@ -91,7 +99,7 @@ jobs:
             runs-on: ubuntu-24.04-arm
     runs-on: ${{ matrix.runs-on }}
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
 
       - name: Run the build
         uses: ./.github/actions/build-server
@@ -100,7 +108,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v6
         with:
           name: release-server-linux-${{ matrix.arch }}
           path: upload/*.*
@@ -114,20 +122,20 @@ jobs:
     steps:
       - run: mkdir upload
 
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
         with:
           sparse-checkout: |
             docs/Release Notes
 
       - name: Download all artifacts
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@v7
         with:
           merge-multiple: true
           pattern: release-*
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.4.2
+        uses: softprops/action-gh-release@v2.5.0
         with:
           draft: false
           body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md

.github/workflows/website.yml

@@ -25,7 +25,7 @@ jobs:
       pull-requests: write # For PR preview comments
 
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
@@ -34,7 +34,7 @@ jobs:
           cache: "pnpm"
 
       - name: Install dependencies
-        run: pnpm install --filter website --frozen-lockfile
+        run: pnpm install --filter website --frozen-lockfile --ignore-scripts
 
       - name: Build the website
         run: pnpm website:build

.gitignore

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

.nvmrc

@@ -1 +1 @@
-24.11.0
+24.13.0

.vscode/extensions.json

@@ -9,7 +9,6 @@
     "tobermory.es6-string-html",
     "vitest.explorer",
     "yzhang.markdown-all-in-one",
-    "svelte.svelte-vscode",
-    "bradlc.vscode-tailwindcss"
+    "usernamehw.errorlens"
   ]
 }

.vscode/settings.json

@@ -36,5 +36,11 @@
         "docs/**/*.png": true,
         "apps/server/src/assets/doc_notes/**": true,
         "apps/edit-docs/demo/**": true
-    }
+    },
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
+    "eslint.rules.customizations": [
+        { "rule": "*", "severity": "warn" }
+    ]
 }

README.md

@@ -16,13 +16,14 @@
 ![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/triliumnext/trilium/total)  
 [![RelativeCI](https://badges.relative-ci.com/badges/Di5q7dz9daNDZ9UXi0Bp?branch=develop)](https://app.relative-ci.com/projects/Di5q7dz9daNDZ9UXi0Bp) [![Translation status](https://hosted.weblate.org/widget/trilium/svg-badge.svg)](https://hosted.weblate.org/engage/trilium/)
 
-[English](./README.md) | [Chinese (Simplified)](./docs/README-ZH_CN.md) | [Chinese (Traditional)](./docs/README-ZH_TW.md) | [Russian](./docs/README-ru.md) | [Japanese](./docs/README-ja.md) | [Italian](./docs/README-it.md) | [Spanish](./docs/README-es.md)
+<!-- 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 -->
 
 Trilium Notes is a free and open-source, cross-platform hierarchical note taking application with focus on building large personal knowledge bases.
 
-See [screenshots](https://triliumnext.github.io/Docs/Wiki/screenshot-tour) for quick overview:
-
-<a href="https://triliumnext.github.io/Docs/Wiki/screenshot-tour"><img src="./docs/app.png" alt="Trilium Screenshot" width="1000"></a>
+<img src="./docs/app.png" alt="Trilium Screenshot" width="1000">
 
 ## ⏬ Download
 - [Latest release](https://github.com/TriliumNext/Trilium/releases/latest) – stable version, recommended for most users.
@@ -39,39 +40,39 @@ Our documentation is available in multiple formats:
 
 ### Quick Links
 - [Getting Started Guide](https://docs.triliumnotes.org/)
-- [Installation Instructions](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation.md)
-- [Docker Setup](./docs/User%20Guide/User%20Guide/Installation%20&%20Setup/Server%20Installation/1.%20Installing%20the%20server/Using%20Docker.md)
-- [Upgrading TriliumNext](./docs/User%20Guide/User%20Guide/Installation%20%26%20Setup/Upgrading%20TriliumNext.md)
-- [Basic Concepts and Features](./docs/User%20Guide/User%20Guide/Basic%20Concepts%20and%20Features/Notes.md)
-- [Patterns of Personal Knowledge Base](https://triliumnext.github.io/Docs/Wiki/patterns-of-personal-knowledge)
+- [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)
 
 ## 🎁 Features
 
-* Notes can be arranged into arbitrarily deep tree. Single note can be placed into multiple places in the tree (see [cloning](https://triliumnext.github.io/Docs/Wiki/cloning-notes))
-* 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)
+* 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)
 * UI available in English, German, Spanish, French, Romanian, and Chinese (simplified and traditional)
-* 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
+* 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
 * Sketching diagrams, based on [Excalidraw](https://excalidraw.com/) (note type "canvas")
-* [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
+* [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
 * Mind maps, based on [Mind Elixir](https://docs.mind-elixir.com/)
-* [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
+* [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
 * Scales well in both usability and performance upwards of 100 000 notes
-* 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
+* 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
 * Customizable UI (sidebar buttons, user-defined widgets, ...)
-* [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)
+* [Metrics](https://docs.triliumnotes.org/user-guide/advanced-usage/metrics), along with a Grafana Dashboard.
 
 ✨ Check out the following third-party resources/communities for more TriliumNext related goodies:
 
@@ -131,7 +132,7 @@ Note: It is best to disable automatic updates on your server installation (see b
 
 ### 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://triliumnext.github.io/Docs/Wiki/server-installation).
+To install TriliumNext on your own server (including via Docker from [Dockerhub](https://hub.docker.com/r/triliumnext/trilium)) follow [the server installation docs](https://docs.triliumnotes.org/user-guide/setup/server).
 
 
 ## 💻 Contribute
@@ -164,6 +165,17 @@ pnpm install
 pnpm edit-docs:edit-docs
 ```
 
+Alternatively, if you have Nix installed:
+```shell
+# Run directly
+nix run .#edit-docs
+
+# Or install to your profile
+nix profile install .#edit-docs
+trilium-edit-docs
+```
+
+
 ### Building the Executable
 Download the repository, install dependencies using `pnpm` and then build the desktop app for Windows:
 ```shell
@@ -198,7 +210,7 @@ Trilium would not be possible without the technologies behind it:
 * [Leaflet](https://github.com/Leaflet/Leaflet) - for rendering geographical maps.
 * [Tabulator](https://github.com/olifolkerd/tabulator) - for the interactive table used in collections.
 * [FancyTree](https://github.com/mar10/fancytree) - feature-rich tree library without real competition. 
-* [jsPlumb](https://github.com/jsplumb/jsplumb) - visual connectivity library. Used in [relation maps](https://triliumnext.github.io/Docs/Wiki/relation-map.html) and [link maps](https://triliumnext.github.io/Docs/Wiki/note-map.html#link-map)
+* [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)
 
 ## 🤝 Support
 

_regroup/bin/create-anonymization-script.ts

@@ -1,7 +0,0 @@
-#!/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

@@ -1,7 +0,0 @@
-#!/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/push-docker-image.sh

@@ -1,16 +0,0 @@
-#!/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

@@ -1,57 +0,0 @@
-#!/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

@@ -1,49 +0,0 @@
-#!/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

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

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

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

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

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

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

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

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

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

@@ -1,56 +0,0 @@
-{
-  "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.56.1",
-    "@stylistic/eslint-plugin": "5.5.0",        
-    "@types/express": "5.0.5",    
-    "@types/node": "24.10.0",    
-    "@types/yargs": "17.0.34",
-    "@vitest/coverage-v8": "3.2.4",
-    "eslint": "9.39.1",
-    "eslint-plugin-simple-import-sort": "12.1.1",
-    "esm": "3.2.25",
-    "jsdoc": "4.0.5",
-    "lorem-ipsum": "2.0.8",    
-    "rcedit": "5.0.0",
-    "rimraf": "6.1.0",    
-    "tslib": "2.8.1" 
-  },
-  "optionalDependencies": {
-    "appdmg": "0.6.6"
-  }
-}

_regroup/spec/etapi/app_info.ts

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

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

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

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

@@ -1,152 +0,0 @@
-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, () => {
-        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

@@ -1,22 +0,0 @@
-{
-  "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"
-  ]
-}

apps/build-docs/package.json

@@ -9,14 +9,14 @@
   "keywords": [],
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.20.0",
+  "packageManager": "pnpm@10.28.0",
   "devDependencies": {
-    "@redocly/cli": "2.11.0",
+    "@redocly/cli": "2.14.5",
     "archiver": "7.0.1",
-    "fs-extra": "11.3.2",
-    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "typedoc": "0.28.14",
+    "fs-extra": "11.3.3",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "typedoc": "0.28.16",
     "typedoc-plugin-missing-exports": "4.1.2"
   }
 }

apps/client/eslint.config.mjs

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

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.99.5",
+  "version": "0.101.3",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -12,54 +12,56 @@
   "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"
   },
   "dependencies": {
-    "@eslint/js": "9.39.1",
     "@excalidraw/excalidraw": "0.18.0",
-    "@fullcalendar/core": "6.1.19",
-    "@fullcalendar/daygrid": "6.1.19",
-    "@fullcalendar/interaction": "6.1.19",
-    "@fullcalendar/list": "6.1.19",
-    "@fullcalendar/multimonth": "6.1.19",
-    "@fullcalendar/timegrid": "6.1.19",
+    "@fullcalendar/core": "6.1.20",
+    "@fullcalendar/daygrid": "6.1.20",
+    "@fullcalendar/interaction": "6.1.20",
+    "@fullcalendar/list": "6.1.20",
+    "@fullcalendar/multimonth": "6.1.20",
+    "@fullcalendar/timegrid": "6.1.20",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
     "@mermaid-js/layout-elk": "0.2.0",
-    "@mind-elixir/node-menu": "5.0.0",
+    "@mind-elixir/node-menu": "5.0.1",
     "@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",
     "boxicons": "2.1.4",
-    "color": "5.0.2",
-    "dayjs": "1.11.19",
-    "dayjs-plugin-utc": "0.1.2",
+    "clsx": "2.1.1",
+    "color": "5.0.3",
     "debounce": "3.0.0",
     "draggabilly": "3.0.0",
     "force-graph": "1.51.0",
-    "globals": "16.5.0",
-    "i18next": "25.6.1",
+    "globals": "17.0.0",
+    "i18next": "25.7.4",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.25",
+    "katex": "0.16.27",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "16.4.2",
-    "mermaid": "11.12.1",
-    "mind-elixir": "5.3.5",
+    "marked": "17.0.1",
+    "mermaid": "11.12.2",
+    "mind-elixir": "5.6.1",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
-    "preact": "10.27.2",
-    "react-i18next": "16.2.4",
+    "preact": "10.28.2",
+    "react-i18next": "16.5.3",
+    "react-window": "2.2.5",
     "reveal.js": "5.2.1",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
@@ -67,16 +69,17 @@
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-inspector": "5.0.0",
-    "@preact/preset-vite": "2.10.2",
+    "@prefresh/vite": "2.4.11",
     "@types/bootstrap": "5.2.10",
     "@types/jquery": "3.5.33",
     "@types/leaflet": "1.9.21",
     "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
-    "@types/reveal.js": "5.2.1",
-    "@types/tabulator-tables": "6.3.0",
+    "@types/reveal.js": "5.2.2",
+    "@types/tabulator-tables": "6.3.1",
     "copy-webpack-plugin": "13.0.1",
-    "happy-dom": "20.0.10",
+    "happy-dom": "20.3.1",
+    "lightningcss": "1.30.2",
     "script-loader": "0.7.2",
     "vite-plugin-static-copy": "3.1.4"
   }

apps/client/src/components/app_context.ts

@@ -1,38 +1,41 @@
-import froca from "../services/froca.js";
-import RootCommandExecutor from "./root_command_executor.js";
-import Entrypoints from "./entrypoints.js";
-import options from "../services/options.js";
-import utils, { hasTouchBar } from "../services/utils.js";
-import zoomComponent from "./zoom.js";
-import TabManager from "./tab_manager.js";
-import Component from "./component.js";
-import keyboardActionsService from "../services/keyboard_actions.js";
-import linkService, { type ViewScope } from "../services/link.js";
-import MobileScreenSwitcherExecutor, { type Screen } from "./mobile_screen_switcher.js";
-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";
-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";
 import type CodeMirror from "@triliumnext/codemirror";
-import { StartupChecks } from "./startup_checks.js";
-import type { CreateNoteOpts } from "../services/note_create.js";
+import { SqlExecuteResponse } from "@triliumnext/commons";
+import type { NativeImage, TouchBar } from "electron";
 import { ColumnComponent } from "tabulator-tables";
-import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
+
+import type { Attribute } from "../services/attribute_parser.js";
+import froca from "../services/froca.js";
+import { initLocale, t } from "../services/i18n.js";
+import keyboardActionsService from "../services/keyboard_actions.js";
+import linkService, { type ViewScope } from "../services/link.js";
+import type LoadResults from "../services/load_results.js";
+import type { CreateNoteOpts } from "../services/note_create.js";
+import options from "../services/options.js";
+import toast from "../services/toast.js";
+import utils, { hasTouchBar } from "../services/utils.js";
+import { ReactWrappedWidget } from "../widgets/basic_widget.js";
 import type RootContainer from "../widgets/containers/root_container.js";
-import { SqlExecuteResults } from "@triliumnext/commons";
+import { AddLinkOpts } from "../widgets/dialogs/add_link.jsx";
+import type { ConfirmWithMessageOptions, ConfirmWithTitleOptions } from "../widgets/dialogs/confirm.js";
+import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
+import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
+import type { InfoProps } from "../widgets/dialogs/info.jsx";
+import type { MarkdownImportOpts } from "../widgets/dialogs/markdown_import.jsx";
+import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
+import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
+import type NoteTreeWidget from "../widgets/note_tree.js";
+import Component from "./component.js";
+import Entrypoints from "./entrypoints.js";
+import MainTreeExecutors from "./main_tree_executors.js";
+import MobileScreenSwitcherExecutor, { type Screen } from "./mobile_screen_switcher.js";
+import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
+import RootCommandExecutor from "./root_command_executor.js";
+import ShortcutComponent from "./shortcut_component.js";
+import { StartupChecks } from "./startup_checks.js";
+import TabManager from "./tab_manager.js";
+import TouchBarComponent from "./touch_bar.js";
+import zoomComponent from "./zoom.js";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootContainer;
@@ -123,7 +126,7 @@ export type CommandMappings = {
         isNewNote?: boolean;
     };
     showPromptDialog: PromptDialogOptions;
-    showInfoDialog: ConfirmWithMessageOptions;
+    showInfoDialog: InfoProps;
     showConfirmDialog: ConfirmWithMessageOptions;
     showRecentChanges: CommandData & { ancestorNoteId: string };
     showImportDialog: CommandData & { noteId: string };
@@ -151,6 +154,7 @@ export type CommandMappings = {
     };
     openInTab: ContextMenuCommandData;
     openNoteInSplit: ContextMenuCommandData;
+    openNoteInWindow: ContextMenuCommandData;
     openNoteInPopup: ContextMenuCommandData;
     toggleNoteHoisting: ContextMenuCommandData;
     insertNoteAfter: ContextMenuCommandData;
@@ -199,7 +203,7 @@ export type CommandMappings = {
     resetLauncher: ContextMenuCommandData;
 
     executeInActiveNoteDetailWidget: CommandData & {
-        callback: (value: NoteDetailWidget | PromiseLike<NoteDetailWidget>) => void;
+        callback: (value: ReactWrappedWidget) => void;
     };
     executeWithTextEditor: CommandData &
     ExecuteCommandData<CKTextEditor> & {
@@ -211,7 +215,7 @@ 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<TypeWidget | null>;
+    executeWithTypeWidget: CommandData & ExecuteCommandData<ReactWrappedWidget | null>;
     addTextToActiveEditor: CommandData & {
         text: string;
     };
@@ -221,9 +225,9 @@ export type CommandMappings = {
     showPasswordNotSet: CommandData;
     showProtectedSessionPasswordDialog: CommandData;
     showUploadAttachmentsDialog: CommandData & { noteId: string };
-    showIncludeNoteDialog: CommandData & { textTypeWidget: EditableTextTypeWidget };
-    showAddLinkDialog: CommandData & { textTypeWidget: EditableTextTypeWidget, text: string };
-    showPasteMarkdownDialog: CommandData & { textTypeWidget: EditableTextTypeWidget };
+    showIncludeNoteDialog: CommandData & IncludeNoteOpts;
+    showAddLinkDialog: CommandData & AddLinkOpts;
+    showPasteMarkdownDialog: CommandData & MarkdownImportOpts;
     closeProtectedSessionPasswordDialog: CommandData;
     copyImageReferenceToClipboard: CommandData;
     copyImageToClipboard: CommandData;
@@ -263,7 +267,7 @@ export type CommandMappings = {
 
     reEvaluateRightPaneVisibility: CommandData;
     runActiveNote: CommandData;
-    scrollContainerToCommand: CommandData & {
+    scrollContainerTo: CommandData & {
         position: number;
     };
     scrollToEnd: CommandData;
@@ -328,6 +332,7 @@ export type CommandMappings = {
     exportAsPdf: CommandData;
     openNoteExternally: CommandData;
     openNoteCustom: CommandData;
+    openNoteOnServer: CommandData;
     renderActiveNote: CommandData;
     unhoist: CommandData;
     reloadFrontendApp: CommandData;
@@ -378,7 +383,8 @@ export type CommandMappings = {
     reloadTextEditor: CommandData;
     chooseNoteType: CommandData & {
         callback: ChooseNoteTypeCallback
-    }
+    };
+    customDownload: CommandData;
 };
 
 type EventMappings = {
@@ -404,7 +410,7 @@ type EventMappings = {
     addNewLabel: CommandData;
     addNewRelation: CommandData;
     sqlQueryResults: CommandData & {
-        results: SqlExecuteResults;
+        response: SqlExecuteResponse;
     };
     readOnlyTemporarilyDisabled: {
         noteContext: NoteContext;
@@ -443,6 +449,8 @@ type EventMappings = {
         error: string;
     };
     searchRefreshed: { ntxId?: string | null };
+    textEditorRefreshed: { ntxId?: string | null, editor: CKTextEditor };
+    contentElRefreshed: { ntxId?: string | null, contentEl: HTMLElement };
     hoistedNoteChanged: {
         noteId: string;
         ntxId: string | null;
@@ -467,6 +475,11 @@ type EventMappings = {
     noteContextRemoved: {
         ntxIds: string[];
     };
+    contextDataChanged: {
+        noteContext: NoteContext;
+        key: string;
+        value: unknown;
+    };
     exportSvg: { ntxId: string | null | undefined; };
     exportPng: { ntxId: string | null | undefined; };
     geoMapCreateChildNote: {
@@ -484,14 +497,9 @@ type EventMappings = {
     relationMapResetPanZoom: { ntxId: string | null | undefined };
     relationMapResetZoomIn: { ntxId: string | null | undefined };
     relationMapResetZoomOut: { ntxId: string | null | undefined };
-    activeNoteChanged: {};
-    showAddLinkDialog: {
-        textTypeWidget: EditableTextTypeWidget;
-        text: string;
-    };
-    showIncludeDialog: {
-        textTypeWidget: EditableTextTypeWidget;
-    };
+    activeNoteChanged: {ntxId: string | null | undefined};
+    showAddLinkDialog: AddLinkOpts;
+    showIncludeDialog: IncludeNoteOpts;
     openBulkActionsDialog: {
         selectedOrActiveNoteIds: string[];
     };
@@ -670,6 +678,10 @@ export class AppContext extends Component {
             this.beforeUnloadListeners.push(obj);
         }
     }
+
+    removeBeforeUnloadListener(listener: (() => boolean)) {
+        this.beforeUnloadListeners = this.beforeUnloadListeners.filter(l => l !== listener);
+    }
 }
 
 const appContext = new AppContext(window.glob.isMainWindow);
@@ -692,10 +704,8 @@ $(window).on("beforeunload", () => {
                 console.log(`Component ${component.componentId} is not finished saving its state.`);
                 allSaved = false;
             }
-        } else {
-            if (!listener()) {
-                allSaved = false;
-            }
+        } else if (!listener()) {
+            allSaved = false;
         }
     }
 
@@ -705,7 +715,7 @@ $(window).on("beforeunload", () => {
     }
 });
 
-$(window).on("hashchange", function () {
+$(window).on("hashchange", () => {
     const { notePath, ntxId, viewScope, searchString } = linkService.parseNavigationStateFromUrl(window.location.href);
 
     if (notePath || ntxId) {

apps/client/src/components/component.ts

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

apps/client/src/components/entrypoints.ts

@@ -1,16 +1,17 @@
-import utils from "../services/utils.js";
+import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
+
+import bundleService from "../services/bundle.js";
 import dateNoteService from "../services/date_notes.js";
+import froca from "../services/froca.js";
+import { t } from "../services/i18n.js";
+import linkService from "../services/link.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import server from "../services/server.js";
+import toastService from "../services/toast.js";
+import utils from "../services/utils.js";
+import ws from "../services/ws.js";
 import appContext, { type NoteCommandData } from "./app_context.js";
 import Component from "./component.js";
-import toastService from "../services/toast.js";
-import ws from "../services/ws.js";
-import bundleService from "../services/bundle.js";
-import froca from "../services/froca.js";
-import linkService from "../services/link.js";
-import { t } from "../services/i18n.js";
-import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
 
 export default class Entrypoints extends Component {
     constructor() {
@@ -187,13 +188,8 @@ export default class Entrypoints extends Component {
         } else if (note.mime.endsWith("env=backend")) {
             await server.post(`script/run/${note.noteId}`);
         } else if (note.mime === "text/x-sqlite;schema=trilium") {
-            const resp = await server.post<SqlExecuteResponse>(`sql/execute/${note.noteId}`);
-
-            if (!resp.success) {
-                toastService.showError(t("entrypoints.sql-error", { message: resp.error }));
-            }
-
-            await appContext.triggerEvent("sqlQueryResults", { ntxId: ntxId, results: resp.results });
+            const response = await server.post<SqlExecuteResponse>(`sql/execute/${note.noteId}`);
+            await appContext.triggerEvent("sqlQueryResults", { ntxId, response });
         }
 
         toastService.showMessage(t("entrypoints.note-executed"));

apps/client/src/components/note_context.ts

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

apps/client/src/components/root_command_executor.ts

@@ -1,14 +1,14 @@
-import Component from "./component.js";
-import appContext, { type CommandData, type CommandListenerData } from "./app_context.js";
 import dateNoteService from "../services/date_notes.js";
-import treeService from "../services/tree.js";
-import openService from "../services/open.js";
-import protectedSessionService from "../services/protected_session.js";
-import options from "../services/options.js";
 import froca from "../services/froca.js";
-import utils from "../services/utils.js";
-import toastService from "../services/toast.js";
 import noteCreateService from "../services/note_create.js";
+import openService from "../services/open.js";
+import options from "../services/options.js";
+import protectedSessionService from "../services/protected_session.js";
+import toastService from "../services/toast.js";
+import treeService from "../services/tree.js";
+import utils, { openInReusableSplit } from "../services/utils.js";
+import appContext, { type CommandListenerData } from "./app_context.js";
+import Component from "./component.js";
 
 export default class RootCommandExecutor extends Component {
     editReadOnlyNoteCommand() {
@@ -66,6 +66,13 @@ export default class RootCommandExecutor extends Component {
         }
     }
 
+    openNoteOnServerCommand() {
+        const noteId = appContext.tabManager.getActiveContextNoteId();
+        if (noteId) {
+            openService.openNoteOnServer(noteId);
+        }
+    }
+
     enterProtectedSessionCommand() {
         protectedSessionService.enterProtectedSession();
     }
@@ -186,6 +193,19 @@ export default class RootCommandExecutor extends Component {
         appContext.triggerEvent("zenModeChanged", { isEnabled });
     }
 
+    async toggleRibbonTabNoteMapCommand(data: CommandListenerData<"toggleRibbonTabNoteMap">) {
+        const { isExperimentalFeatureEnabled } = await import("../services/experimental_features.js");
+        const isNewLayout = isExperimentalFeatureEnabled("new-layout");
+        if (!isNewLayout) {
+            this.triggerEvent("toggleRibbonTabNoteMap", data);
+            return;
+        }
+
+        const activeContext = appContext.tabManager.getActiveContext();
+        if (!activeContext?.notePath) return;
+        openInReusableSplit(activeContext.notePath, "note-map");
+    }
+
     firstTabCommand() {
         this.#goToTab(1);
     }
@@ -255,7 +275,7 @@ export default class RootCommandExecutor extends Component {
         }
         catch (e) {
             console.error("Error creating AI Chat note:", e);
-            toastService.showError("Failed to create AI Chat note: " + (e as Error).message);
+            toastService.showError(`Failed to create AI Chat note: ${(e as Error).message}`);
         }
     }
 }

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", {}); // trigger this even in on popstate event
+        this.triggerEvent("activeNoteChanged", {ntxId:activeNoteContext?.ntxId}); // trigger this even in on popstate event
     }
 
     calculateHash(): string {
@@ -265,6 +265,7 @@ 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);
 
@@ -646,7 +647,32 @@ export default class TabManager extends Component {
                 ...this.noteContexts.slice(-noteContexts.length),
                 ...this.noteContexts.slice(lastClosedTab.position, -noteContexts.length)
             ];
-            this.noteContextReorderEvent({ ntxIdsInOrder: ntxsInOrder.map((nc) => nc.ntxId).filter((id) => id !== null) });
+
+            // 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
+            });
 
             let mainNtx = noteContexts.find((nc) => nc.isMainContext());
             if (mainNtx) {

apps/client/src/desktop.ts

@@ -1,17 +1,18 @@
-import appContext from "./components/app_context.js";
-import utils from "./services/utils.js";
-import noteTooltipService from "./services/note_tooltip.js";
-import bundleService from "./services/bundle.js";
-import toastService from "./services/toast.js";
-import noteAutocompleteService from "./services/note_autocomplete.js";
-import electronContextMenu from "./menus/electron_context_menu.js";
-import glob from "./services/glob.js";
-import { t } from "./services/i18n.js";
-import options from "./services/options.js";
+import "autocomplete.js/index_jquery.js";
+
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
-import "boxicons/css/boxicons.min.css";
-import "autocomplete.js/index_jquery.js";
+
+import appContext from "./components/app_context.js";
+import electronContextMenu from "./menus/electron_context_menu.js";
+import bundleService from "./services/bundle.js";
+import glob from "./services/glob.js";
+import { t } from "./services/i18n.js";
+import noteAutocompleteService from "./services/note_autocomplete.js";
+import noteTooltipService from "./services/note_tooltip.js";
+import options from "./services/options.js";
+import toastService from "./services/toast.js";
+import utils from "./services/utils.js";
 
 await appContext.earlyInit();
 
@@ -22,6 +23,7 @@ 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 })
@@ -58,10 +60,14 @@ function initOnElectron() {
 
     initDarkOrLightMode(style);
     initTransparencyEffects(style, currentWindow);
+    initFullScreenDetection(currentWindow);
 
     if (options.get("nativeTitleBarVisible") !== "true") {
         initTitleBarButtons(style, currentWindow);
     }
+
+    // Clear navigation history on frontend refresh.
+    currentWindow.webContents.navigationHistory.clear();
 }
 
 function initTitleBarButtons(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {
@@ -87,6 +93,11 @@ 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");

apps/client/src/entities/fnote.ts

@@ -1,34 +1,18 @@
-import server from "../services/server.js";
-import noteAttributeCache from "../services/note_attribute_cache.js";
-import protectedSessionHolder from "../services/protected_session_holder.js";
+import { getNoteIcon } from "@triliumnext/commons";
+
 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 noteAttributeCache from "../services/note_attribute_cache.js";
+import protectedSessionHolder from "../services/protected_session_holder.js";
+import search from "../services/search.js";
+import server from "../services/server.js";
 import utils from "../services/utils.js";
+import type FAttachment from "./fattachment.js";
+import type { AttributeType, default as FAttribute } from "./fattribute.js";
 
 const LABEL = "label";
 const RELATION = "relation";
 
-const NOTE_TYPE_ICONS = {
-    file: "bx bx-file",
-    image: "bx bx-image",
-    code: "bx bx-code",
-    render: "bx bx-extension",
-    search: "bx bx-file-find",
-    relationMap: "bx bxs-network-chart",
-    book: "bx bx-book",
-    noteMap: "bx bxs-network-chart",
-    mermaid: "bx bx-selection",
-    canvas: "bx bx-pen",
-    webView: "bx bx-globe-alt",
-    launcher: "bx bx-link",
-    doc: "bx bxs-file-doc",
-    contentWidget: "bx bxs-widget",
-    mindMap: "bx bx-sitemap",
-    aiChat: "bx bx-bot"
-};
-
 /**
  * There are many different Note types, some of which are entirely opaque to the
  * end user. Those types should be used only for checking against, they are
@@ -239,7 +223,7 @@ export default class FNote {
 
             const aNote = this.froca.getNoteFromCache(aNoteId);
 
-            if (aNote.isArchived || aNote.isHiddenCompletely()) {
+            if (!aNote || aNote.isArchived || aNote.isHiddenCompletely()) {
                 return 1;
             }
 
@@ -255,8 +239,24 @@ 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;
+        }
+        return this.children;
+    }
+
     async getSubtreeNoteIds(includeArchived = false) {
-        let noteIds: (string | string[])[] = [];
+        const noteIds: (string | string[])[] = [];
         for (const child of await this.getChildNotes()) {
             if (child.isArchived && !includeArchived) continue;
 
@@ -453,9 +453,8 @@ export default class FNote {
                 return a.isHidden ? 1 : -1;
             } else if (a.isSearch !== b.isSearch) {
                 return a.isSearch ? 1 : -1;
-            } else {
-                return a.notePath.length - b.notePath.length;
             }
+            return a.notePath.length - b.notePath.length;
         });
 
         return notePaths;
@@ -567,26 +566,15 @@ export default class FNote {
         const iconClassLabels = this.getLabels("iconClass");
         const workspaceIconClass = this.getWorkspaceIconClass();
 
-        if (iconClassLabels && iconClassLabels.length > 0) {
-            return iconClassLabels[0].value;
-        } else if (workspaceIconClass) {
-            return workspaceIconClass;
-        } else if (this.noteId === "root") {
-            return "bx bx-home-alt-2";
-        }
-        if (this.noteId === "_share") {
-            return "bx bx-share-alt";
-        } else if (this.type === "text") {
-            if (this.isFolder()) {
-                return "bx bx-folder";
-            } else {
-                return "bx bx-note";
-            }
-        } else if (this.type === "code" && this.mime.startsWith("text/x-sql")) {
-            return "bx bx-data";
-        } else {
-            return NOTE_TYPE_ICONS[this.type];
-        }
+        const icon = getNoteIcon({
+            noteId: this.noteId,
+            type: this.type,
+            mime: this.mime,
+            iconClass: iconClassLabels.length > 0 ? iconClassLabels[0].value : undefined,
+            workspaceIconClass,
+            isFolder: this.isFolder.bind(this)
+        });
+        return `tn-icon ${icon}`;
     }
 
     getColorClass() {
@@ -595,11 +583,13 @@ export default class FNote {
     }
 
     isFolder() {
-        return this.type === "search" || this.getFilteredChildBranches().length > 0;
+        if (this.isLabelTruthy("subtreeHidden")) return false;
+        if (this.type === "search") return true;
+        return this.getFilteredChildBranches().length > 0;
     }
 
     getFilteredChildBranches() {
-        let childBranches = this.getChildBranches();
+        const childBranches = this.getChildBranches();
 
         if (!childBranches) {
             console.error(`No children for '${this.noteId}'. This shouldn't happen.`);
@@ -788,6 +778,16 @@ 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));
+        }
+        return this.getLabelValue(nameWithPrefix);
+
+    }
+
     /**
      * @param name - relation name
      * @returns relation value if relation exists, null otherwise
@@ -839,8 +839,7 @@ export default class FNote {
             return [];
         }
 
-        const promotedAttrs = this.getAttributes()
-            .filter((attr) => attr.isDefinition())
+        const promotedAttrs = this.getAttributeDefinitions()
             .filter((attr) => {
                 const def = attr.getDefinition();
 
@@ -851,15 +850,20 @@ export default class FNote {
         promotedAttrs.sort((a, b) => {
             if (a.noteId === b.noteId) {
                 return a.position < b.position ? -1 : 1;
-            } else {
-                // inherited promoted attributes should stay grouped: https://github.com/zadam/trilium/issues/3761
-                return a.noteId < b.noteId ? -1 : 1;
             }
+            // inherited promoted attributes should stay grouped: https://github.com/zadam/trilium/issues/3761
+            return a.noteId < b.noteId ? -1 : 1;
+
         });
 
         return promotedAttrs;
     }
 
+    getAttributeDefinitions() {
+        return this.getAttributes()
+            .filter((attr) => attr.isDefinition());
+    }
+
     hasAncestor(ancestorNoteId: string, followTemplates = false, visitedNoteIds: Set<string> | null = null) {
         if (this.noteId === ancestorNoteId) {
             return true;
@@ -961,6 +965,10 @@ export default class FNote {
         );
     }
 
+    isJsx() {
+        return (this.type === "code" && this.mime === "text/jsx");
+    }
+
     /** @returns true if this note is HTML */
     isHtml() {
         return (this.type === "code" || this.type === "file" || this.type === "render") && this.mime === "text/html";
@@ -968,7 +976,7 @@ export default class FNote {
 
     /** @returns JS script environment - either "frontend" or "backend" */
     getScriptEnv() {
-        if (this.isHtml() || (this.isJavaScript() && this.mime.endsWith("env=frontend"))) {
+        if (this.isHtml() || (this.isJavaScript() && this.mime.endsWith("env=frontend")) || this.isJsx()) {
             return "frontend";
         }
 
@@ -990,7 +998,7 @@ export default class FNote {
      * @returns a promise that resolves when the script has been run. Additionally, for front-end notes, the promise will contain the value that is returned by the script.
      */
     async executeScript() {
-        if (!this.isJavaScript()) {
+        if (!(this.isJavaScript() || this.isJsx())) {
             throw new Error(`Note ${this.noteId} is of type ${this.type} and mime ${this.mime} and thus cannot be executed`);
         }
 

apps/client/src/index.html

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

apps/client/src/index.ts

@@ -0,0 +1,110 @@
+async function bootstrap() {
+    showSplash();
+    await setupGlob();
+    await Promise.all([
+        initJQuery(),
+        loadBootstrapCss()
+    ]);
+    loadStylesheets();
+    loadIcons();
+    setBodyAttributes();
+    await loadScripts();
+    hideSplash();
+}
+
+async function initJQuery() {
+    const $ = (await import("jquery")).default;
+    window.$ = $;
+    window.jQuery = $;
+}
+
+async function setupGlob() {
+    const response = await fetch(`/bootstrap${window.location.search}`);
+    const json = await response.json();
+
+    window.global = globalThis; /* fixes https://github.com/webpack/webpack/issues/10035 */
+    window.glob = {
+        ...json,
+        activeDialog: null
+    };
+}
+
+async function loadBootstrapCss() {
+    // We have to selectively import Bootstrap CSS based on text direction.
+    if (glob.isRtl) {
+        await import("bootstrap/dist/css/bootstrap.rtl.min.css");
+    } else {
+        await import("bootstrap/dist/css/bootstrap.min.css");
+    }
+}
+
+function loadStylesheets() {
+    const { assetPath, themeCssUrl, themeUseNextAsBase } = window.glob;
+    const cssToLoad: string[] = [];
+    cssToLoad.push(`${assetPath}/stylesheets/ckeditor-theme.css`);
+    cssToLoad.push(`api/fonts`);
+    cssToLoad.push(`${assetPath}/stylesheets/theme-light.css`);
+    if (themeCssUrl) {
+        cssToLoad.push(themeCssUrl);
+    }
+    if (themeUseNextAsBase === "next") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next.css`);
+    } else if (themeUseNextAsBase === "next-dark") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next-dark.css`);
+    } else if (themeUseNextAsBase === "next-light") {
+        cssToLoad.push(`${assetPath}/stylesheets/theme-next-light.css`);
+    }
+    cssToLoad.push(`${assetPath}/stylesheets/style.css`);
+
+    for (const href of cssToLoad) {
+        const linkEl = document.createElement("link");
+        linkEl.href = href;
+        linkEl.rel = "stylesheet";
+        document.head.appendChild(linkEl);
+    }
+}
+
+function loadIcons() {
+    const styleEl = document.createElement("style");
+    styleEl.innerText = window.glob.iconPackCss;
+    document.head.appendChild(styleEl);
+}
+
+function setBodyAttributes() {
+    const { device, headingStyle, layoutOrientation, platform, isElectron, hasNativeTitleBar, hasBackgroundEffects, currentLocale } = window.glob;
+    const classesToSet = [
+        device,
+        `heading-style-${headingStyle}`,
+        `layout-${layoutOrientation}`,
+        `platform-${platform}`,
+        isElectron && "electron",
+        hasNativeTitleBar && "native-titlebar",
+        hasBackgroundEffects && "background-effects"
+    ].filter(Boolean) as string[];
+
+    for (const classToSet of classesToSet) {
+        document.body.classList.add(classToSet);
+    }
+
+    document.body.lang = currentLocale.id;
+    document.body.dir = currentLocale.rtl ? "rtl" : "ltr";
+}
+
+async function loadScripts() {
+    if (glob.device === "mobile") {
+        await import("./mobile.js");
+    } else {
+        await import("./desktop.js");
+    }
+}
+
+function showSplash() {
+    // hide body to reduce flickering on the startup. This is done through JS and not CSS to not hide <noscript>
+    document.body.style.display = "none";
+}
+
+function hideSplash() {
+    document.body.style.display = "block";
+}
+
+bootstrap();

apps/client/src/layouts/desktop_layout.tsx

@@ -1,49 +1,57 @@
-import { applyModals } from "./layout_commons.js";
-import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import type { AppContext } from "../components/app_context.js";
+import type { WidgetsByParent } from "../services/bundle.js";
+import { isExperimentalFeatureEnabled } from "../services/experimental_features.js";
+import options from "../services/options.js";
+import utils from "../services/utils.js";
 import 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 LauncherContainer from "../widgets/containers/launcher_container.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 NoteDetailWidget from "../widgets/note_detail.js";
-import NoteIconWidget from "../widgets/note_icon.jsx";
+import RightPaneToggle from "../widgets/buttons/right_pane_toggle.jsx";
+import CloseZenModeButton from "../widgets/close_zen_button.jsx";
 import NoteList from "../widgets/collections/NoteList.jsx";
-import 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 PromotedAttributesWidget from "../widgets/promoted_attributes.js";
-import QuickSearchWidget from "../widgets/quick_search.js";
-import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import Ribbon from "../widgets/ribbon/Ribbon.jsx";
+import ContentHeader from "../widgets/containers/content_header.js";
+import FlexContainer from "../widgets/containers/flex_container.js";
+import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import RightPaneContainer from "../widgets/containers/right_pane_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
 import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import SplitNoteContainer from "../widgets/containers/split_note_container.js";
+import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
+import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
+import FindWidget from "../widgets/find.js";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import HighlightsListWidget from "../widgets/highlights_list.js";
+import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
+import InlineTitle from "../widgets/layout/InlineTitle.jsx";
+import NoteBadges from "../widgets/layout/NoteBadges.jsx";
+import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
+import StatusBar from "../widgets/layout/StatusBar.jsx";
+import NoteIconWidget from "../widgets/note_icon.jsx";
+import NoteTitleWidget from "../widgets/note_title.jsx";
+import NoteTreeWidget from "../widgets/note_tree.js";
+import NoteWrapperWidget from "../widgets/note_wrapper.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
+import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
+import QuickSearchWidget from "../widgets/quick_search.js";
+import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
+import { FixedFormattingToolbar } from "../widgets/ribbon/FormattingToolbar.jsx";
+import NoteActions from "../widgets/ribbon/NoteActions.jsx";
+import Ribbon from "../widgets/ribbon/Ribbon.jsx";
 import ScrollPadding from "../widgets/scroll_padding.js";
 import SearchResult from "../widgets/search_result.jsx";
 import SharedInfo from "../widgets/shared_info.jsx";
-import SpacerWidget from "../widgets/spacer.js";
-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 RightPanelContainer from "../widgets/sidebar/RightPanelContainer.jsx";
 import TabRowWidget from "../widgets/tab_row.js";
+import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
 import TocWidget from "../widgets/toc.js";
-import type { AppContext } from "../components/app_context.js";
-import type { WidgetsByParent } from "../services/bundle.js";
-import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
-import utils from "../services/utils.js";
 import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
+import { applyModals } from "./layout_commons.js";
 
 export default class DesktopLayout {
 
@@ -69,17 +77,20 @@ export default class DesktopLayout {
          */
         const fullWidthTabBar = launcherPaneIsHorizontal || (isElectron && !hasNativeTitleBar && isMac);
         const customTitleBarButtons = !hasNativeTitleBar && !isMac && !isWindows;
+        const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
         const rootContainer = new RootContainer(true)
             .setParent(appContext)
-            .class((launcherPaneIsHorizontal ? "horizontal" : "vertical") + "-layout")
+            .class(`${launcherPaneIsHorizontal ? "horizontal" : "vertical"  }-layout`)
             .optChild(
                 fullWidthTabBar,
                 new FlexContainer("row")
                     .class("tab-row-container")
                     .child(new FlexContainer("row").id("tab-row-left-spacer"))
                     .optChild(launcherPaneIsHorizontal, <LeftPaneToggle isHorizontalLayout={true} />)
+                    .child(<TabHistoryNavigationButtons />)
                     .child(new TabRowWidget().class("full-width"))
+                    .optChild(isNewLayout, <RightPaneToggle />)
                     .optChild(customTitleBarButtons, <TitleBarButtons />)
                     .css("height", "40px")
                     .css("background-color", "var(--launcher-pane-background-color)")
@@ -101,7 +112,17 @@ 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")
+                                    .class("tab-row-container")
+                                    .child(<TabHistoryNavigationButtons />)
+                                    .child(new TabRowWidget())
+                                    .optChild(isNewLayout, <RightPaneToggle />)
+                                    .optChild(customTitleBarButtons, <TitleBarButtons />)
+                                    .css("height", "40px")
+                                    .css("align-items", "center")
+                            )
+                            .optChild(isNewLayout, <FixedFormattingToolbar />)
                             .child(
                                 new FlexContainer("row")
                                     .filling()
@@ -115,58 +136,56 @@ export default class DesktopLayout {
                                             .child(
                                                 new SplitNoteContainer(() =>
                                                     new NoteWrapperWidget()
-                                                        .child(
-                                                            new FlexContainer("row")
-                                                                .class("title-row")
-                                                                .css("height", "50px")
-                                                                .css("min-height", "50px")
-                                                                .css("align-items", "center")
-                                                                .cssBlock(".title-row > * { margin: 5px; }")
-                                                                .child(<NoteIconWidget />)
-                                                                .child(<NoteTitleWidget />)
-                                                                .child(new SpacerWidget(0, 1))
-                                                                .child(<MovePaneButton direction="left" />)
-                                                                .child(<MovePaneButton direction="right" />)
-                                                                .child(<ClosePaneButton />)
-                                                                .child(<CreatePaneButton />)
-                                                        )
-                                                        .child(<Ribbon />)
+                                                        .child(new FlexContainer("row")
+                                                            .class("title-row note-split-title")
+                                                            .cssBlock(".title-row > * { margin: 5px; }")
+                                                            .child(<NoteIconWidget />)
+                                                            .child(<NoteTitleWidget />)
+                                                            .optChild(isNewLayout, <NoteBadges />)
+                                                            .child(<SpacerWidget baseSize={0} growthFactor={1} />)
+                                                            .optChild(!isNewLayout, <MovePaneButton direction="left" />)
+                                                            .optChild(!isNewLayout, <MovePaneButton direction="right" />)
+                                                            .optChild(!isNewLayout, <ClosePaneButton />)
+                                                            .optChild(!isNewLayout, <CreatePaneButton />)
+                                                            .optChild(isNewLayout, <NoteActions />))
+                                                        .optChild(!isNewLayout, <Ribbon />)
                                                         .child(new WatchedFileUpdateStatusWidget())
-                                                        .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
+                                                        .optChild(!isNewLayout, <FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
                                                         .child(
                                                             new ScrollingContainer()
                                                                 .filling()
-                                                                .child(new ContentHeader()
+                                                                .optChild(isNewLayout, <InlineTitle />)
+                                                                .optChild(isNewLayout, <NoteTitleActions />)
+                                                                .optChild(!isNewLayout, new ContentHeader()
                                                                     .child(<ReadOnlyNoteInfoBar />)
                                                                     .child(<SharedInfo />)
                                                                 )
-                                                                .child(new PromotedAttributesWidget())
-                                                                .child(<SqlTableSchemas />)
-                                                                .child(new NoteDetailWidget())
+                                                                .optChild(!isNewLayout, <PromotedAttributes />)
+                                                                .child(<NoteDetail />)
                                                                 .child(<NoteList media="screen" />)
                                                                 .child(<SearchResult />)
-                                                                .child(<SqlResults />)
                                                                 .child(<ScrollPadding />)
                                                         )
                                                         .child(<ApiLog />)
                                                         .child(new FindWidget())
-                                                        .child(
-                                                            ...this.customWidgets.get("node-detail-pane"), // typo, let's keep it for a while as BC
-                                                            ...this.customWidgets.get("note-detail-pane")
-                                                        )
+                                                        .child(...this.customWidgets.get("note-detail-pane"))
                                                 )
                                             )
                                             .child(...this.customWidgets.get("center-pane"))
+
                                     )
-                                    .child(
+                                    .optChild(!isNewLayout,
                                         new RightPaneContainer()
                                             .child(new TocWidget())
                                             .child(new HighlightsListWidget())
                                             .child(...this.customWidgets.get("right-pane"))
                                     )
+                                    .optChild(isNewLayout, <RightPanelContainer widgetsByParent={this.customWidgets} />)
                             )
+                            .optChild(!launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
                     )
             )
+            .optChild(launcherPaneIsHorizontal && isNewLayout, <StatusBar />)
             .child(<CloseZenModeButton />)
 
             // Desktop-specific dialogs.
@@ -184,14 +203,14 @@ export default class DesktopLayout {
             launcherPane = new FlexContainer("row")
                 .css("height", "53px")
                 .class("horizontal")
-                .child(new LauncherContainer(true))
+                .child(<LauncherContainer isHorizontalLayout={true} />)
                 .child(<GlobalMenu isHorizontalLayout={true} />);
         } else {
             launcherPane = new FlexContainer("column")
                 .css("width", "53px")
                 .class("vertical")
                 .child(<GlobalMenu isHorizontalLayout={false} />)
-                .child(new LauncherContainer(false))
+                .child(<LauncherContainer isHorizontalLayout={false} />)
                 .child(<LeftPaneToggle isHorizontalLayout={false} />);
         }
 

apps/client/src/layouts/layout_commons.tsx

@@ -22,16 +22,9 @@ 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";
-import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
-import NoteDetailWidget from "../widgets/note_detail.js";
 import CallToActionDialog from "../widgets/dialogs/call_to_action.jsx";
-import NoteTitleWidget from "../widgets/note_title.jsx";
-import FormattingToolbar from "../widgets/ribbon/FormattingToolbar.js";
-import NoteList from "../widgets/collections/NoteList.jsx";
-import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
+import PopupEditorDialog from "../widgets/dialogs/PopupEditor.jsx";
+import ToastContainer from "../widgets/Toast.jsx";
 
 export function applyModals(rootContainer: RootContainer) {
     rootContainer
@@ -57,16 +50,7 @@ export function applyModals(rootContainer: RootContainer) {
         .child(<ConfirmDialog />)
         .child(<PromptDialog />)
         .child(<IncorrectCpuArchDialog />)
-        .child(new PopupEditorDialog()
-                .child(new FlexContainer("row")
-                    .class("title-row")
-                    .css("align-items", "center")
-                    .cssBlock(".title-row > * { margin: 5px; }")
-                    .child(<NoteIconWidget />)
-                    .child(<NoteTitleWidget />))
-                .child(<StandaloneRibbonAdapter component={FormattingToolbar} />)
-                .child(new PromotedAttributesWidget())
-                .child(new NoteDetailWidget())
-                .child(<NoteList media="screen" displayOnlyCollections />))
-        .child(<CallToActionDialog />);
+        .child(<PopupEditorDialog />)
+        .child(<CallToActionDialog />)
+        .child(<ToastContainer />);
 }

apps/client/src/layouts/mobile_layout.tsx

@@ -1,37 +1,39 @@
-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 type AppContext from "../components/app_context.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
-import LauncherContainer from "../widgets/containers/launcher_container.js";
-import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
-import MobileEditorToolbar from "../widgets/type_widgets/ckeditor/mobile_editor_toolbar.js";
-import NoteDetailWidget from "../widgets/note_detail.js";
+import CloseZenModeButton from "../widgets/close_zen_button.js";
 import NoteList from "../widgets/collections/NoteList.jsx";
+import ContentHeader from "../widgets/containers/content_header.js";
+import FlexContainer from "../widgets/containers/flex_container.js";
+import RootContainer from "../widgets/containers/root_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import SplitNoteContainer from "../widgets/containers/split_note_container.js";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
+import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
+import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
+import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
+import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
 import 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 PromotedAttributesWidget from "../widgets/promoted_attributes.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
+import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
 import QuickSearchWidget from "../widgets/quick_search.js";
+import { useNoteContext } from "../widgets/react/hooks.jsx";
 import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import 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 StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
+import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
 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 MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
+import { applyModals } from "./layout_commons.js";
 
 const MOBILE_CSS = `
 <style>
+span.keyboard-shortcut,
 kbd {
     display: none;
 }
@@ -141,33 +143,35 @@ export default class MobileLayout {
                             .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 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(new PromotedAttributesWidget())
-                                    .child(
-                                        new ScrollingContainer()
-                                            .filling()
-                                            .contentSized()
-                                            .child(new ContentHeader()
-                                                .child(<ReadOnlyNoteInfoBar />)
-                                                .child(<SharedInfoWidget />)
-                                            )
-                                            .child(new NoteDetailWidget())
-                                            .child(<NoteList media="screen" />)
-                                            .child(<StandaloneRibbonAdapter component={SearchDefinitionTab} />)
-                                            .child(<SearchResult />)
-                                            .child(<FilePropertiesWrapper />)
-                                    )
-                                    .child(<MobileEditorToolbar />)
+                                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 />)
+                                )
                             )
                     )
             )
@@ -179,7 +183,7 @@ export default class MobileLayout {
                     .child(new FlexContainer("row")
                         .class("horizontal")
                         .css("height", "53px")
-                        .child(new LauncherContainer(true))
+                        .child(<LauncherContainer isHorizontalLayout />)
                         .child(<GlobalMenuWidget isHorizontalLayout />)
                         .id("launcher-pane"))
             )
@@ -190,11 +194,11 @@ export default class MobileLayout {
 }
 
 function FilePropertiesWrapper() {
-    const { note } = useNoteContext();
+    const { note, ntxId } = useNoteContext();
 
     return (
         <div>
-            {note?.type === "file" && <FilePropertiesTab note={note} />}
+            {note?.type === "file" && <FilePropertiesTab note={note} ntxId={ntxId} />}
         </div>
     );
 }

apps/client/src/menus/context_menu.ts

@@ -2,7 +2,7 @@ import { KeyboardActionNames } from "@triliumnext/commons";
 import keyboardActionService, { getActionSync } from "../services/keyboard_actions.js";
 import note_tooltip from "../services/note_tooltip.js";
 import utils from "../services/utils.js";
-import { should } from "vitest";
+import { h, JSX, render } from "preact";
 
 export interface ContextMenuOptions<T> {
     x: number;
@@ -15,6 +15,11 @@ export interface ContextMenuOptions<T> {
     onHide?: () => void;
 }
 
+export interface CustomMenuItem {
+    kind: "custom",
+    componentFn: () => JSX.Element | null;
+}
+
 export interface MenuSeparatorItem {
     kind: "separator";
 }
@@ -51,7 +56,7 @@ export interface MenuCommandItem<T> {
     columns?: number;
 }
 
-export type MenuItem<T> = MenuCommandItem<T> | MenuSeparatorItem | MenuHeader;
+export type MenuItem<T> = MenuCommandItem<T> | CustomMenuItem | MenuSeparatorItem | MenuHeader;
 export type MenuHandler<T> = (item: MenuCommandItem<T>, e: JQuery.MouseDownEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => void;
 export type ContextMenuEvent = PointerEvent | MouseEvent | JQuery.ContextMenuEvent;
 
@@ -160,16 +165,19 @@ class ContextMenu {
         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 : "";
+
             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 ("kind" in item && item.kind === "header") {
+            if (itemKind === "header") {
                 if (multicolumn && !shouldResetGroup) {
                     shouldStartNewGroup = true;
                 }
@@ -195,125 +203,25 @@ class ContextMenu {
                 shouldStartNewGroup = false;
             }
 
-            if ("kind" in item && item.kind === "separator") {
+            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 ("kind" in item && item.kind === "header") {
-                $group.append($("<h6>").addClass("dropdown-header").text(item.title));
+            } else if (itemKind === "header") {
+                $group.append($("<h6>").addClass("dropdown-header").text((item as MenuHeader).title));
                 shouldResetGroup = true;
             } else {
-                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;");
-                    }
+                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 $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) => {
-                        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");
-                    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);
-                }
-
-                $group.append($item);
-
                 // After adding a menu item, if the previous item was a separator or header,
                 // reset the group so that the next item will be appended directly to the parent.
                 if (shouldResetGroup) {
@@ -321,9 +229,126 @@ class ContextMenu {
                     shouldResetGroup = false;
                 };
             }
+
+            prevItemKind = itemKind;
+
         }
     }
 
+    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;
+    }
+
+    private createMenuItem(item: 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;");
+            }
+        }
+
+        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() {
         this.options?.onHide?.();
         this.$widget.removeClass("show");

apps/client/src/menus/context_menu_utils.ts

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

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

@@ -0,0 +1,204 @@
+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 } from "../components/app_context.js";
+import type { CommandNames, AppContext } from "../components/app_context.js";
 
 function setupContextMenu() {
     const electron = utils.dynamicRequire("electron");
@@ -13,6 +13,8 @@ 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;
@@ -119,6 +121,20 @@ function setupContextMenu() {
                 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/link_context_menu.ts

@@ -1,49 +1,67 @@
-import { t } from "../services/i18n.js";
-import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
+import type { LeafletMouseEvent } from "leaflet";
+
 import appContext, { type CommandNames } from "../components/app_context.js";
+import { t } from "../services/i18n.js";
 import type { ViewScope } from "../services/link.js";
+import utils, { isMobile } from "../services/utils.js";
+import { getClosestNtxId } from "../widgets/widget_utils.js";
+import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
 
 function openContextMenu(notePath: string, e: ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
     contextMenu.show({
         x: e.pageX,
         y: e.pageY,
-        items: getItems(),
-        selectMenuItemHandler: ({ command }) => handleLinkContextMenuItem(command, notePath, viewScope, hoistedNoteId)
+        items: getItems(e),
+        selectMenuItemHandler: ({ command }) => handleLinkContextMenuItem(command, e, notePath, viewScope, hoistedNoteId)
     });
 }
 
-function getItems(): MenuItem<CommandNames>[] {
+function getItems(e: ContextMenuEvent | LeafletMouseEvent): MenuItem<CommandNames>[] {
+    const ntxId = getNtxId(e);
+    const isMobileSplitOpen = isMobile() && appContext.tabManager.getNoteContextById(ntxId).getMainContext().getSubContexts().length > 1;
+
     return [
         { title: t("link_context_menu.open_note_in_new_tab"), command: "openNoteInNewTab", uiIcon: "bx bx-link-external" },
-        { title: t("link_context_menu.open_note_in_new_split"), command: "openNoteInNewSplit", uiIcon: "bx bx-dock-right" },
+        { 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_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, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
+function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEvent | LeafletMouseEvent, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
     if (!hoistedNoteId) {
         hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId ?? null;
     }
 
     if (command === "openNoteInNewTab") {
         appContext.tabManager.openContextWithNote(notePath, { hoistedNoteId, viewScope });
+        return true;
     } else if (command === "openNoteInNewSplit") {
-        const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
-
-        if (!subContexts) {
-            logError("subContexts is null");
-            return;
-        }
-
-        const { ntxId } = subContexts[subContexts.length - 1];
-
+        const ntxId = getNtxId(e);
+        if (!ntxId) return false;
         appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath, hoistedNoteId, viewScope });
+        return true;
     } else if (command === "openNoteInNewWindow") {
         appContext.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
+        return true;
     } else if (command === "openNoteInPopup") {
-        appContext.triggerCommand("openInPopup", { noteIdOrPath: notePath })
+        appContext.triggerCommand("openInPopup", { noteIdOrPath: notePath });
+        return true;
     }
+
+    return false;
+}
+
+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);
+    }
+    return null;
+
 }
 
 export default {

apps/client/src/menus/tree_context_menu.ts

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

apps/client/src/mobile.ts

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

apps/client/src/print.tsx

@@ -1,14 +1,25 @@
-import FNote from "./entities/fnote";
 import { render } from "preact";
-import { CustomNoteList } from "./widgets/collections/NoteList";
 import { useCallback, useLayoutEffect, useRef } from "preact/hooks";
+
+import FNote from "./entities/fnote";
 import content_renderer from "./services/content_renderer";
+import { applyInlineMermaid } from "./services/content_renderer_text";
+import { dynamicRequire, isElectron } from "./services/utils";
+import { CustomNoteList, useNoteViewType } from "./widgets/collections/NoteList";
 
 interface RendererProps {
     note: FNote;
-    onReady: () => void;
+    onReady: (data: PrintReport) => void;
+    onProgressChanged?: (progress: number) => void;
 }
 
+export type PrintReport = {
+    type: "single-note";
+} | {
+    type: "collection";
+    ignoredNoteIds: string[];
+};
+
 async function main() {
     const notePath = window.location.hash.substring(1);
     const noteId = notePath.split("/").at(-1);
@@ -23,15 +34,25 @@ async function main() {
 
 function App({ note, noteId }: { note: FNote | null | undefined, noteId: string }) {
     const sentReadyEvent = useRef(false);
-    const onReady = useCallback(() => {
+    const onProgressChanged = useCallback((progress: number) => {
+        if (isElectron()) {
+            const { ipcRenderer } = dynamicRequire('electron');
+            ipcRenderer.send("print-progress", progress);
+        } else {
+            window.dispatchEvent(new CustomEvent("note-load-progress", { detail: { progress } }));
+        }
+    }, []);
+    const onReady = useCallback((printReport: PrintReport) => {
         if (sentReadyEvent.current) return;
-        window.dispatchEvent(new Event("note-ready"));
-        window._noteReady = true;
+        window.dispatchEvent(new CustomEvent("note-ready", {
+            detail: printReport
+        }));
+        window._noteReady = printReport;
         sentReadyEvent.current = true;
     }, []);
-    const props: RendererProps | undefined | null = note && { note, onReady };
+    const props: RendererProps | undefined | null = note && { note, onReady, onProgressChanged };
 
-    if (!note || !props) return <Error404 noteId={noteId} />
+    if (!note || !props) return <Error404 noteId={noteId} />;
 
     useLayoutEffect(() => {
         document.body.dataset.noteType = note.type;
@@ -40,8 +61,8 @@ function App({ note, noteId }: { note: FNote | null | undefined, noteId: string
     return (
         <>
             {note.type === "book"
-            ? <CollectionRenderer {...props} />
-            : <SingleNoteRenderer {...props} />
+                ? <CollectionRenderer {...props} />
+                : <SingleNoteRenderer {...props} />
             }
         </>
     );
@@ -71,11 +92,18 @@ function SingleNoteRenderer({ note, onReady }: RendererProps) {
                 })
             );
 
+            // Initialize mermaid.
+            if (note.type === "text") {
+                await applyInlineMermaid(container);
+            }
+
             // Check custom CSS.
             await loadCustomCss(note);
         }
 
-        load().then(() => requestAnimationFrame(onReady))
+        load().then(() => requestAnimationFrame(() => onReady({
+            type: "single-note"
+        })));
     }, [ note ]);
 
     return <>
@@ -84,18 +112,21 @@ function SingleNoteRenderer({ note, onReady }: RendererProps) {
     </>;
 }
 
-function CollectionRenderer({ note, onReady }: RendererProps) {
+function CollectionRenderer({ note, onReady, onProgressChanged }: RendererProps) {
+    const viewType = useNoteViewType(note);
     return <CustomNoteList
+        viewType={viewType}
         isEnabled
         note={note}
         notePath={note.getBestNotePath().join("/")}
         ntxId="print"
         highlightedTokens={null}
         media="print"
-        onReady={async () => {
+        onReady={async (data: PrintReport) => {
             await loadCustomCss(note);
-            onReady();
+            onReady(data);
         }}
+        onProgressChanged={onProgressChanged}
     />;
 }
 
@@ -105,12 +136,12 @@ function Error404({ noteId }: { noteId: string }) {
             <p>The note you are trying to print could not be found.</p>
             <small>{noteId}</small>
         </main>
-    )
+    );
 }
 
 async function loadCustomCss(note: FNote) {
     const printCssNotes = await note.getRelationTargets("printCss");
-    let loadPromises: JQueryPromise<void>[] = [];
+    const loadPromises: JQueryPromise<void>[] = [];
 
     for (const printCssNote of printCssNotes) {
         if (!printCssNote || (printCssNote.type !== "code" && printCssNote.mime !== "text/css")) continue;

apps/client/src/services/attribute_renderer.ts

@@ -90,7 +90,8 @@ const HIDDEN_ATTRIBUTES = [
     "viewType",
     "geolocation",
     "docName",
-    "webViewSrc"
+    "webViewSrc",
+    "archived"
 ];
 
 async function renderNormalAttributes(note: FNote) {

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

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

apps/client/src/services/attributes.ts

@@ -1,14 +1,15 @@
-import server from "./server.js";
-import froca from "./froca.js";
-import type FNote from "../entities/fnote.js";
-import type { AttributeRow } from "./load_results.js";
 import { AttributeType } from "@triliumnext/commons";
 
+import type FNote from "../entities/fnote.js";
+import froca from "./froca.js";
+import type { AttributeRow } from "./load_results.js";
+import server from "./server.js";
+
 async function addLabel(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/attribute`, {
         type: "label",
-        name: name,
-        value: value,
+        name,
+        value,
         isInheritable
     });
 }
@@ -16,12 +17,51 @@ async function addLabel(noteId: string, name: string, value: string = "", isInhe
 export async function setLabel(noteId: string, name: string, value: string = "", isInheritable = false) {
     await server.put(`notes/${noteId}/set-attribute`, {
         type: "label",
-        name: name,
-        value: value,
+        name,
+        value,
         isInheritable
     });
 }
 
+export async function setRelation(noteId: string, name: string, value: string = "", isInheritable = false) {
+    await server.put(`notes/${noteId}/set-attribute`, {
+        type: "relation",
+        name,
+        value,
+        isInheritable
+    });
+}
+
+/**
+ * Sets a boolean label on the given note, taking inheritance into account. If the desired value matches the inherited
+ * value, any owned label will be removed to allow the inherited value to take effect. If the desired value differs
+ * from the inherited value, an owned label will be created or updated to reflect the desired value.
+ *
+ * When checking if the boolean value is set, don't use `note.hasLabel`; instead use `note.isLabelTruthy`.
+ *
+ * @param note the note on which to set the boolean label.
+ * @param labelName the name of the label to set.
+ * @param value the boolean value to set for the label.
+ */
+export async function setBooleanWithInheritance(note: FNote, labelName: string, value: boolean) {
+    const actualValue = note.isLabelTruthy(labelName);
+    if (actualValue === value) return;
+    const hasInheritedValue = !note.hasOwnedLabel(labelName) && note.hasLabel(labelName);
+
+    if (hasInheritedValue) {
+        if (value) {
+            setLabel(note.noteId, labelName, "");
+        } else {
+            // Label is inherited - override to false.
+            setLabel(note.noteId, labelName, "false");
+        }
+    } else if (value) {
+        setLabel(note.noteId, labelName, "");
+    } else {
+        removeOwnedLabelByName(note, labelName);
+    }
+}
+
 async function removeAttributeById(noteId: string, attributeId: string) {
     await server.remove(`notes/${noteId}/attributes/${attributeId}`);
 }
@@ -51,6 +91,23 @@ function removeOwnedLabelByName(note: FNote, labelName: string) {
     return false;
 }
 
+/**
+ * Removes a relation identified by its name from the given note, if it exists. Note that the relation must be owned, i.e.
+ * it will not remove inherited attributes.
+ *
+ * @param note the note from which to remove the relation.
+ * @param relationName the name of the relation to remove.
+ * @returns `true` if an attribute was identified and removed, `false` otherwise.
+ */
+function removeOwnedRelationByName(note: FNote, relationName: string) {
+    const relation = note.getOwnedRelation(relationName);
+    if (relation) {
+        removeAttributeById(note.noteId, relation.attributeId);
+        return true;
+    }
+    return false;
+}
+
 /**
  * Sets the attribute of the given note to the provided value if its truthy, or removes the attribute if the value is falsy.
  * For an attribute with an empty value, pass an empty string instead.
@@ -100,9 +157,7 @@ function isAffecting(attrRow: AttributeRow, affectedNote: FNote | null | undefin
         }
     }
 
-    // TODO: This doesn't seem right.
-    //@ts-ignore
-    if (this.isInheritable) {
+    if (attrRow.isInheritable) {
         for (const owningNote of owningNotes) {
             if (owningNote.hasAncestor(attrNote.noteId, true)) {
                 return true;
@@ -116,8 +171,11 @@ function isAffecting(attrRow: AttributeRow, affectedNote: FNote | null | undefin
 export default {
     addLabel,
     setLabel,
+    setRelation,
     setAttribute,
+    setBooleanWithInheritance,
     removeAttributeById,
     removeOwnedLabelByName,
+    removeOwnedRelationByName,
     isAffecting
 };

apps/client/src/services/branches.ts

@@ -1,12 +1,12 @@
-import utils from "./utils.js";
-import server from "./server.js";
-import toastService, { type ToastOptions } from "./toast.js";
+import appContext from "../components/app_context.js";
+import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
 import froca from "./froca.js";
 import hoistedNoteService from "./hoisted_note.js";
-import ws from "./ws.js";
-import appContext from "../components/app_context.js";
 import { t } from "./i18n.js";
-import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
+import server from "./server.js";
+import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
+import utils from "./utils.js";
+import ws from "./ws.js";
 
 // TODO: Deduplicate type with server
 interface Response {
@@ -66,7 +66,7 @@ async function moveAfterBranch(branchIdsToMove: string[], afterBranchId: string)
     }
 }
 
-async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: string) {
+async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: string, componentId?: string) {
     const newParentBranch = froca.getBranch(newParentBranchId);
     if (!newParentBranch) {
         return;
@@ -86,7 +86,7 @@ async function moveToParentNote(branchIdsToMove: string[], newParentBranchId: st
             continue;
         }
 
-        const resp = await server.put<Response>(`branches/${branchIdToMove}/move-to/${newParentBranchId}`);
+        const resp = await server.put<Response>(`branches/${branchIdToMove}/move-to/${newParentBranchId}`, undefined, componentId);
 
         if (!resp.success) {
             toastService.showError(resp.message);
@@ -176,11 +176,6 @@ async function moveNodeUpInHierarchy(node: Fancytree.FancytreeNode) {
         toastService.showError(resp.message);
         return;
     }
-
-    if (!hoistedNoteService.isTopLevelNode(node) && node.getParent().getChildren().length <= 1) {
-        node.getParent().folder = false;
-        node.getParent().renderTitle();
-    }
 }
 
 function filterSearchBranches(branchIds: string[]) {
@@ -200,11 +195,11 @@ function filterRootNote(branchIds: string[]) {
     });
 }
 
-function makeToast(id: string, message: string): ToastOptions {
+function makeToast(id: string, message: string): ToastOptionsWithRequiredId {
     return {
-        id: id,
+        id,
         title: t("branches.delete-status"),
-        message: message,
+        message,
         icon: "trash"
     };
 }
@@ -221,7 +216,7 @@ ws.subscribeToMessages(async (message) => {
         toastService.showPersistent(makeToast(message.taskId, t("branches.delete-notes-in-progress", { count: message.progressCount })));
     } else if (message.type === "taskSucceeded") {
         const toast = makeToast(message.taskId, t("branches.delete-finished-successfully"));
-        toast.closeAfter = 5000;
+        toast.timeout = 5000;
 
         toastService.showPersistent(toast);
     }
@@ -239,7 +234,7 @@ ws.subscribeToMessages(async (message) => {
         toastService.showPersistent(makeToast(message.taskId, t("branches.undeleting-notes-in-progress", { count: message.progressCount })));
     } else if (message.type === "taskSucceeded") {
         const toast = makeToast(message.taskId, t("branches.undeleting-notes-finished-successfully"));
-        toast.closeAfter = 5000;
+        toast.timeout = 5000;
 
         toastService.showPersistent(toast);
     }
@@ -247,7 +242,7 @@ ws.subscribeToMessages(async (message) => {
 
 async function cloneNoteToBranch(childNoteId: string, parentBranchId: string, prefix?: string) {
     const resp = await server.put<Response>(`notes/${childNoteId}/clone-to-branch/${parentBranchId}`, {
-        prefix: prefix
+        prefix
     });
 
     if (!resp.success) {
@@ -257,7 +252,7 @@ async function cloneNoteToBranch(childNoteId: string, parentBranchId: string, pr
 
 async function cloneNoteToParentNote(childNoteId: string, parentNoteId: string, prefix?: string) {
     const resp = await server.put<Response>(`notes/${childNoteId}/clone-to-note/${parentNoteId}`, {
-        prefix: prefix
+        prefix
     });
 
     if (!resp.success) {

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

@@ -0,0 +1,44 @@
+import { describe, expect, it } from "vitest";
+import { Bundle, executeBundle } from "./bundle";
+import { buildNote } from "../test/easy-froca";
+
+describe("Script bundle", () => {
+    it("dayjs is available", async () => {
+        const script = /* js */`return api.dayjs().format("YYYY-MM-DD");`;
+        const bundle = getBundle(script);
+        const result = await executeBundle(bundle, null, $());
+        expect(result).toMatch(/^\d{4}-\d{2}-\d{2}$/);
+    });
+
+    it("dayjs is-same-or-before plugin exists", async () => {
+        const script = /* js */`return api.dayjs("2023-10-01").isSameOrBefore(api.dayjs("2023-10-02"));`;
+        const bundle = getBundle(script);
+        const result = await executeBundle(bundle, null, $());
+        expect(result).toBe(true);
+    });
+});
+
+function getBundle(script: string) {
+    const id = buildNote({
+        title: "Script note"
+    }).noteId;
+    const bundle: Bundle = {
+        script: [
+            '',
+            `apiContext.modules['${id}'] = { exports: {} };`,
+            `return await ((async function(exports, module, require, api) {`,
+            `try {`,
+            `${script}`,
+            `;`,
+            `} catch (e) { throw new Error(\"Load of script note \\\"Client\\\" (${id}) failed with: \" + e.message); }`,
+            `for (const exportKey in exports) module.exports[exportKey] = exports[exportKey];`,
+            `return module.exports;`,
+            `}).call({}, {}, apiContext.modules['${id}'], apiContext.require([]), apiContext.apis['${id}']));`,
+            ''
+        ].join('\n'),
+        html: "",
+        noteId: id,
+        allNoteIds: [ id ]
+    };
+    return bundle;
+}

apps/client/src/services/bundle.ts

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

apps/client/src/services/content_renderer.ts

@@ -1,35 +1,39 @@
-import renderService from "./render.js";
+import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
+import WheelZoom from 'vanilla-js-wheel-zoom';
+
+import FAttachment from "../entities/fattachment.js";
+import FNote from "../entities/fnote.js";
+import imageContextMenuService from "../menus/image_context_menu.js";
+import { t } from "../services/i18n.js";
+import renderText from "./content_renderer_text.js";
+import renderDoc from "./doc_renderer.js";
+import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
+import openService from "./open.js";
 import protectedSessionService from "./protected_session.js";
 import protectedSessionHolder from "./protected_session_holder.js";
-import openService from "./open.js";
-import froca from "./froca.js";
+import renderService from "./render.js";
+import { applySingleBlockSyntaxHighlight } from "./syntax_highlight.js";
 import utils from "./utils.js";
-import linkService from "./link.js";
-import treeService from "./tree.js";
-import FNote from "../entities/fnote.js";
-import FAttachment from "../entities/fattachment.js";
-import imageContextMenuService from "../menus/image_context_menu.js";
-import { applySingleBlockSyntaxHighlight, formatCodeBlocks } from "./syntax_highlight.js";
-import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
-import renderDoc from "./doc_renderer.js";
-import { t } from "../services/i18n.js";
-import WheelZoom from 'vanilla-js-wheel-zoom';
-import { renderMathInElement } from "./math.js";
-import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 
 let idCounter = 1;
 
-interface Options {
+export interface RenderOptions {
     tooltip?: boolean;
     trim?: boolean;
     imageHasZoom?: boolean;
     /** If enabled, it will prevent the default behavior in which an empty note would display a list of children. */
     noChildrenList?: boolean;
+    /** If enabled, it will prevent rendering of included notes. */
+    noIncludedNotes?: boolean;
+    /** If enabled, it will include archived notes when rendering children list. */
+    includeArchivedNotes?: boolean;
+    /** Set of note IDs that have already been seen during rendering to prevent infinite recursion. */
+    seenNoteIds?: Set<string>;
 }
 
 const CODE_MIME_TYPES = new Set(["application/json"]);
 
-export async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: Options = {}) {
+export async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: RenderOptions = {}) {
 
     options = Object.assign(
         {
@@ -116,32 +120,6 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
     };
 }
 
-async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: Options = {}) {
-    // entity must be FNote
-    const blob = await note.getBlob();
-
-    if (blob && !utils.isHtmlEmpty(blob.content)) {
-        $renderedContent.append($('<div class="ck-content">').html(blob.content));
-
-        if ($renderedContent.find("span.math-tex").length > 0) {
-            renderMathInElement($renderedContent[0], { trust: true });
-        }
-
-        const getNoteIdFromLink = (el: HTMLElement) => treeService.getNoteIdFromUrl($(el).attr("href") || "");
-        const referenceLinks = $renderedContent.find("a.reference-link");
-        const noteIdsToPrefetch = referenceLinks.map((i, el) => getNoteIdFromLink(el));
-        await froca.getNotes(noteIdsToPrefetch);
-
-        for (const el of referenceLinks) {
-            await linkService.loadReferenceLinkTitle($(el));
-        }
-
-        await formatCodeBlocks($renderedContent);
-    } else if (note instanceof FNote && !options.noChildrenList) {
-        await renderChildrenList($renderedContent, note);
-    }
-}
-
 /**
  * Renders a code note, by displaying its content and applying syntax highlighting based on the selected MIME type.
  */
@@ -163,7 +141,7 @@ async function renderCode(note: FNote | FAttachment, $renderedContent: JQuery<HT
     await applySingleBlockSyntaxHighlight($codeBlock, normalizeMimeTypeForCKEditor(note.mime));
 }
 
-function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: Options = {}) {
+function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: RenderOptions = {}) {
     const encodedTitle = encodeURIComponent(entity.title);
 
     let url;
@@ -181,7 +159,7 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
 
     const $img = $("<img>")
         .attr("src", url || "")
-        .attr("id", "attachment-image-" + idCounter++)
+        .attr("id", `attachment-image-${idCounter++}`)
         .css("max-width", "100%");
 
     $renderedContent.append($img);
@@ -222,7 +200,7 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
 
     if (type === "pdf") {
         const $pdfPreview = $('<iframe class="pdf-preview" style="width: 100%; flex-grow: 100;"></iframe>');
-        $pdfPreview.attr("src", openService.getUrlForDownload(`api/${entityType}/${entityId}/open`));
+        $pdfPreview.attr("src", openService.getUrlForDownload(`pdfjs/web/viewer.html?file=../../api/${entityType}/${entityId}/open`));
 
         $content.append($pdfPreview);
     } else if (type === "audio") {
@@ -246,28 +224,28 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
         //       in attachment list
         const $downloadButton = $(`
             <button class="file-download btn btn-primary" type="button">
-                <span class="bx bx-download"></span>
+                <span class="tn-icon bx bx-download"></span>
                 ${t("file_properties.download")}
             </button>
         `);
 
         const $openButton = $(`
             <button class="file-open btn btn-primary" type="button">
-                <span class="bx bx-link-external"></span>
+                <span class="tn-icon bx bx-link-external"></span>
                 ${t("file_properties.open")}
             </button>
         `);
 
         $downloadButton.on("click", (e) => {
             e.stopPropagation();
-            openService.downloadFileNote(entity.noteId)
+            openService.downloadFileNote(entity, null, null);
         });
         $openButton.on("click", async (e) => {
             const iconEl = $openButton.find("> .bx");
             iconEl.removeClass("bx bx-link-external");
             iconEl.addClass("bx bx-loader spin");
             e.stopPropagation();
-            await openService.openNoteExternally(entity.noteId, entity.mime)
+            await openService.openNoteExternally(entity.noteId, entity.mime);
             iconEl.removeClass("bx bx-loader spin");
             iconEl.addClass("bx bx-link-external");
         });
@@ -295,7 +273,7 @@ async function renderMermaid(note: FNote | FAttachment, $renderedContent: JQuery
 
     try {
         await loadElkIfNeeded(mermaid, content);
-        const { svg } = await mermaid.mermaidAPI.render("in-mermaid-graph-" + idCounter++, content);
+        const { svg } = await mermaid.mermaidAPI.render(`in-mermaid-graph-${idCounter++}`, content);
 
         $renderedContent.append($(postprocessMermaidSvg(svg)));
     } catch (e) {
@@ -305,40 +283,6 @@ async function renderMermaid(note: FNote | FAttachment, $renderedContent: JQuery
     }
 }
 
-/**
- * @param {jQuery} $renderedContent
- * @param {FNote} note
- * @returns {Promise<void>}
- */
-async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: FNote) {
-    let childNoteIds = note.getChildNoteIds();
-
-    if (!childNoteIds.length) {
-        return;
-    }
-
-    $renderedContent.css("padding", "10px");
-    $renderedContent.addClass("text-with-ellipsis");
-
-    if (childNoteIds.length > 10) {
-        childNoteIds = childNoteIds.slice(0, 10);
-    }
-
-    // just load the first 10 child notes
-    const childNotes = await froca.getNotes(childNoteIds);
-
-    for (const childNote of childNotes) {
-        $renderedContent.append(
-            await linkService.createLink(`${note.noteId}/${childNote.noteId}`, {
-                showTooltip: false,
-                showNoteIcon: true
-            })
-        );
-
-        $renderedContent.append("<br>");
-    }
-}
-
 function getRenderingType(entity: FNote | FAttachment) {
     let type: string = "";
     if ("type" in entity) {

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

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

apps/client/src/services/content_renderer_text.ts

@@ -0,0 +1,145 @@
+import FAttachment from "../entities/fattachment.js";
+import FNote from "../entities/fnote.js";
+import { default as content_renderer, type RenderOptions } from "./content_renderer.js";
+import froca from "./froca.js";
+import link from "./link.js";
+import { renderMathInElement } from "./math.js";
+import { getMermaidConfig } from "./mermaid.js";
+import { formatCodeBlocks } from "./syntax_highlight.js";
+import tree from "./tree.js";
+import { isHtmlEmpty } from "./utils.js";
+
+export default async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: RenderOptions = {}) {
+    // entity must be FNote
+    const blob = await note.getBlob();
+
+    if (blob && !isHtmlEmpty(blob.content)) {
+        $renderedContent.append($('<div class="ck-content">').html(blob.content));
+
+        const seenNoteIds = options.seenNoteIds ?? new Set<string>();
+        seenNoteIds.add("noteId" in note ? note.noteId : note.attachmentId);
+        if (!options.noIncludedNotes) {
+            await renderIncludedNotes($renderedContent[0], seenNoteIds);
+        } else {
+            $renderedContent.find("section.include-note").remove();
+        }
+
+        if ($renderedContent.find("span.math-tex").length > 0) {
+            renderMathInElement($renderedContent[0], { trust: true });
+        }
+
+        const getNoteIdFromLink = (el: HTMLElement) => tree.getNoteIdFromUrl($(el).attr("href") || "");
+        const referenceLinks = $renderedContent.find<HTMLAnchorElement>("a.reference-link");
+        const noteIdsToPrefetch = referenceLinks.map((i, el) => getNoteIdFromLink(el));
+        await froca.getNotes(noteIdsToPrefetch);
+
+        for (const el of referenceLinks) {
+            const innerSpan = document.createElement("span");
+            await link.loadReferenceLinkTitle($(innerSpan), el.href);
+            el.replaceChildren(innerSpan);
+        }
+
+        await rewriteMermaidDiagramsInContainer($renderedContent[0] as HTMLDivElement);
+        await formatCodeBlocks($renderedContent);
+    } else if (note instanceof FNote && !options.noChildrenList) {
+        await renderChildrenList($renderedContent, note, options.includeArchivedNotes ?? false);
+    }
+}
+
+async function renderIncludedNotes(contentEl: HTMLElement, seenNoteIds: Set<string>) {
+    // TODO: Consider duplicating with server's share/content_renderer.ts.
+    const includeNoteEls = contentEl.querySelectorAll("section.include-note");
+
+    // Gather the list of items to load.
+    const noteIds: string[] = [];
+    for (const includeNoteEl of includeNoteEls) {
+        const noteId = includeNoteEl.getAttribute("data-note-id");
+        if (noteId) {
+            noteIds.push(noteId);
+        }
+    }
+
+    // Load the required notes.
+    await froca.getNotes(noteIds);
+
+    // Render and integrate the notes.
+    for (const includeNoteEl of includeNoteEls) {
+        const noteId = includeNoteEl.getAttribute("data-note-id");
+        if (!noteId) continue;
+
+        const note = froca.getNoteFromCache(noteId);
+        if (!note) {
+            console.warn(`Unable to include ${noteId} because it could not be found.`);
+            continue;
+        }
+
+        if (seenNoteIds.has(noteId)) {
+            console.warn(`Skipping inclusion of ${noteId} to avoid circular reference.`);
+            includeNoteEl.remove();
+            continue;
+        }
+
+        const renderedContent = (await content_renderer.getRenderedContent(note, {
+            seenNoteIds
+        })).$renderedContent;
+        includeNoteEl.replaceChildren(...renderedContent);
+    }
+}
+
+/** Rewrite the code block from <pre><code> to <div> in order not to apply a codeblock style to it. */
+export async function rewriteMermaidDiagramsInContainer(container: HTMLDivElement) {
+    const mermaidBlocks = container.querySelectorAll('pre:has(code[class="language-mermaid"])');
+    if (!mermaidBlocks.length) return;
+    const nodes: HTMLElement[] = [];
+
+    for (const mermaidBlock of mermaidBlocks) {
+        const div = document.createElement("div");
+        div.classList.add("mermaid-diagram");
+        div.innerHTML = mermaidBlock.querySelector("code")?.innerHTML ?? "";
+        mermaidBlock.replaceWith(div);
+        nodes.push(div);
+    }
+}
+
+export async function applyInlineMermaid(container: HTMLDivElement) {
+    // Initialize mermaid
+    const mermaid = (await import("mermaid")).default;
+    mermaid.initialize(getMermaidConfig());
+    const nodes = Array.from(container.querySelectorAll<HTMLElement>("div.mermaid-diagram"));
+    try {
+        await mermaid.run({ nodes });
+    } catch (e) {
+        console.log(e);
+    }
+}
+
+async function renderChildrenList($renderedContent: JQuery<HTMLElement>, note: FNote, includeArchivedNotes: boolean) {
+    let childNoteIds = note.getChildNoteIds();
+
+    if (!childNoteIds.length) {
+        return;
+    }
+
+    $renderedContent.css("padding", "10px");
+    $renderedContent.addClass("text-with-ellipsis");
+
+    // just load the first 10 child notes
+    if (childNoteIds.length > 10) {
+        childNoteIds = childNoteIds.slice(0, 10);
+    }
+
+    const childNotes = await froca.getNotes(childNoteIds);
+
+    for (const childNote of childNotes) {
+        if (childNote.isArchived && !includeArchivedNotes) continue;
+
+        $renderedContent.append(
+            await link.createLink(`${note.noteId}/${childNote.noteId}`, {
+                showTooltip: false,
+                showNoteIcon: true
+            })
+        );
+
+        $renderedContent.append("<br>");
+    }
+}

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

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

apps/client/src/services/css_class_manager.ts

@@ -1,19 +1,22 @@
-import {readCssVar} from "../utils/css-var";
+import clsx from "clsx";
 import Color, { ColorInstance } from "color";
 
+import {readCssVar} from "../utils/css-var";
+
 const registeredClasses = new Set<string>();
+const colorsWithHue = new Set<string>();
 
 // Read the color lightness limits defined in the theme as CSS variables
 
 const lightThemeColorMaxLightness = readCssVar(
-                                        document.documentElement,
-                                        "tree-item-light-theme-max-color-lightness"
-                                    ).asNumber(70);
+    document.documentElement,
+    "tree-item-light-theme-max-color-lightness"
+).asNumber(70);
 
 const darkThemeColorMinLightness = readCssVar(
-                                        document.documentElement,
-                                        "tree-item-dark-theme-min-color-lightness"
-                                    ).asNumber(50);
+    document.documentElement,
+    "tree-item-dark-theme-min-color-lightness"
+).asNumber(50);
 
 function createClassForColor(colorString: string | null) {
     if (!colorString?.trim()) return "";
@@ -25,25 +28,30 @@ function createClassForColor(colorString: string | null) {
 
     if (!registeredClasses.has(className)) {
         const adjustedColor = adjustColorLightness(color, lightThemeColorMaxLightness!,
-                                                   darkThemeColorMinLightness!);
+            darkThemeColorMinLightness!);
+        const hue = getHue(color);
 
         $("head").append(`<style>
             .${className}, span.fancytree-active.${className} {
+                --original-custom-color: ${color.hex()};
                 --light-theme-custom-color: ${adjustedColor.lightThemeColor};
                 --dark-theme-custom-color: ${adjustedColor.darkThemeColor};
-                --custom-color-hue: ${getHue(color) ?? 'unset'};
+                --custom-color-hue: ${hue ?? 'unset'};
             }
         </style>`);
 
         registeredClasses.add(className);
+        if (hue !== undefined) {
+            colorsWithHue.add(className);
+        }
     }
 
-    return className;
+    return clsx("use-note-color", className, colorsWithHue.has(className) && "with-hue");
 }
 
 function parseColor(color: string) {
     try {
-        return Color(color);
+        return Color(color.toLowerCase());
     } catch (ex) {
         console.error(ex);
     }
@@ -76,6 +84,11 @@ function getHue(color: ColorInstance) {
     }
 }
 
+export function getReadableTextColor(bgColor: string) {
+    const colorInstance = parseColor(bgColor);
+    return !colorInstance || colorInstance?.isLight() ? "#000" : "#fff";
+}
+
 export default {
     createClassForColor
 };

apps/client/src/services/date_notes.ts

@@ -1,4 +1,4 @@
-import dayjs from "dayjs";
+import { dayjs } from "@triliumnext/commons";
 import type { FNoteRow } from "../entities/fnote.js";
 import froca from "./froca.js";
 import server from "./server.js";

apps/client/src/services/debounce.ts

@@ -12,7 +12,7 @@
  * @param whether to execute at the beginning (`false`)
  * @api public
  */
-function debounce<T>(func: (...args: unknown[]) => T, waitMs: number, immediate: boolean = false) {
+function debounce<T>(func: (...args: any[]) => T, waitMs: number, immediate: boolean = false) {
     let timeout: any; // TODO: fix once we split client and server.
     let args: unknown[] | null;
     let context: unknown;

apps/client/src/services/dialog.ts

@@ -1,8 +1,9 @@
 import { Modal } from "bootstrap";
 import appContext from "../components/app_context.js";
-import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions } from "../widgets/dialogs/confirm.js";
+import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions, MessageType } from "../widgets/dialogs/confirm.js";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
 import { focusSavedElement, saveFocusedElement } from "./focus.js";
+import { InfoExtraProps } from "../widgets/dialogs/info.jsx";
 
 export async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog = true, config?: Partial<Modal.Options>) {
     if (closeActDialog) {
@@ -37,8 +38,8 @@ export function closeActiveDialog() {
     }
 }
 
-async function info(message: string) {
-    return new Promise((res) => appContext.triggerCommand("showInfoDialog", { message, callback: res }));
+async function info(message: MessageType, extraProps?: InfoExtraProps) {
+    return new Promise((res) => appContext.triggerCommand("showInfoDialog", { ...extraProps, message, callback: res }));
 }
 
 /**

apps/client/src/services/doc_renderer.ts

@@ -1,4 +1,5 @@
 import type FNote from "../entities/fnote.js";
+import { applyReferenceLinks } from "../widgets/type_widgets/text/read_only_helper.js";
 import { getCurrentLanguage } from "./i18n.js";
 import { formatCodeBlocks } from "./syntax_highlight.js";
 
@@ -10,18 +11,18 @@ export default function renderDoc(note: FNote) {
         if (docName) {
             // find doc based on language
             const url = getUrl(docName, getCurrentLanguage());
-            $content.load(url, (response, status) => {
+            $content.load(url, async (response, status) => {
                 // fallback to english doc if no translation available
                 if (status === "error") {
                     const fallbackUrl = getUrl(docName, "en");
-                    $content.load(fallbackUrl, () => {
-                        processContent(fallbackUrl, $content)
+                    $content.load(fallbackUrl, async () => {
+                        await processContent(fallbackUrl, $content)
                         resolve($content);
                     });
                     return;
                 }
 
-                processContent(url, $content);
+                await processContent(url, $content);
                 resolve($content);
             });
         } else {
@@ -32,7 +33,7 @@ export default function renderDoc(note: FNote) {
     });
 }
 
-function processContent(url: string, $content: JQuery<HTMLElement>) {
+async function processContent(url: string, $content: JQuery<HTMLElement>) {
     const dir = url.substring(0, url.lastIndexOf("/"));
 
     // Images are relative to the docnote but that will not work when rendered in the application since the path breaks.
@@ -42,6 +43,9 @@ function processContent(url: string, $content: JQuery<HTMLElement>) {
     });
 
     formatCodeBlocks($content);
+
+    // Apply reference links.
+    await applyReferenceLinks($content[0]);
 }
 
 function getUrl(docNameValue: string, language: string) {

apps/client/src/services/experimental_features.ts

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

apps/client/src/services/froca-interface.ts

@@ -13,7 +13,7 @@ export interface Froca {
 
     getBlob(entityType: string, entityId: string): Promise<FBlob | null>;
     getNote(noteId: string, silentNotFoundError?: boolean): Promise<FNote | null>;
-    getNoteFromCache(noteId: string): FNote;
+    getNoteFromCache(noteId: string): FNote | undefined;
     getNotesFromCache(noteIds: string[], silentNotFoundError?: boolean): FNote[];
     getNotes(noteIds: string[], silentNotFoundError?: boolean): Promise<FNote[]>;
 

apps/client/src/services/froca.ts

@@ -288,7 +288,7 @@ class FrocaImpl implements Froca {
         return (await this.getNotes([noteId], silentNotFoundError))[0];
     }
 
-    getNoteFromCache(noteId: string) {
+    getNoteFromCache(noteId: string): FNote | undefined {
         if (!noteId) {
             throw new Error("Empty noteId");
         }

apps/client/src/services/frontend_script_api.ts

@@ -1,27 +1,27 @@
-import server from "./server.js";
-import utils from "./utils.js";
-import toastService from "./toast.js";
-import linkService from "./link.js";
+import { dayjs, formatLogMessage } from "@triliumnext/commons";
+
+import appContext from "../components/app_context.js";
+import type Component from "../components/component.js";
+import type NoteContext from "../components/note_context.js";
+import type FNote from "../entities/fnote.js";
+import BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import NoteContextAwareWidget from "../widgets/note_context_aware_widget.js";
+import RightPanelWidget from "../widgets/right_panel_widget.js";
+import dateNotesService from "./date_notes.js";
+import dialogService from "./dialog.js";
 import froca from "./froca.js";
+import { preactAPI } from "./frontend_script_api_preact.js";
+import { t } from "./i18n.js";
+import linkService from "./link.js";
 import noteTooltipService from "./note_tooltip.js";
 import protectedSessionService from "./protected_session.js";
-import dateNotesService from "./date_notes.js";
 import searchService from "./search.js";
-import RightPanelWidget from "../widgets/right_panel_widget.js";
-import ws from "./ws.js";
-import appContext from "../components/app_context.js";
-import NoteContextAwareWidget from "../widgets/note_context_aware_widget.js";
-import BasicWidget from "../widgets/basic_widget.js";
-import SpacedUpdate from "./spaced_update.js";
+import server from "./server.js";
 import shortcutService from "./shortcuts.js";
-import dialogService from "./dialog.js";
-import type FNote from "../entities/fnote.js";
-import { t } from "./i18n.js";
-import dayjs from "dayjs";
-import type NoteContext from "../components/note_context.js";
-import type NoteDetailWidget from "../widgets/note_detail.js";
-import type Component from "../components/component.js";
-import { formatLogMessage } from "@triliumnext/commons";
+import SpacedUpdate from "./spaced_update.js";
+import toastService from "./toast.js";
+import utils from "./utils.js";
+import ws from "./ws.js";
 
 /**
  * A whole number
@@ -78,6 +78,10 @@ export interface Api {
 
     /**
      * Entity whose event triggered this execution.
+     *
+     * <p>
+     * For front-end scripts, generally there's no origin entity specified since the scripts are run by the user or automatically by the UI (widgets).
+     * If there is an origin entity specified, then it's going to be a note entity.
      */
     originEntity: unknown | null;
 
@@ -279,12 +283,16 @@ export interface Api {
     getActiveContextNote(): FNote;
 
     /**
-     * @returns returns active context (split)
+     * Obtains the currently active/focused split in the current tab.
+     *
+     * Note that this method does not return the note context of the "Quick edit" panel, it will return the note context behind it.
      */
     getActiveContext(): NoteContext;
 
     /**
-     * @returns returns active main context (first split in a tab, represents the tab as a whole)
+     * Obtains the main context of the current tab. This is the left-most split.
+     *
+     * Note that this method does not return the note context of the "Quick edit" panel, it will return the note context behind it.
      */
     getActiveMainContext(): NoteContext;
 
@@ -317,7 +325,7 @@ export interface Api {
      * Get access to the widget handling note detail. Methods like `getWidgetType()` and `getTypeWidget()` to get to the
      * implementation of actual widget type.
      */
-    getActiveNoteDetailWidget(): Promise<NoteDetailWidget>;
+    getActiveNoteDetailWidget(): Promise<ReactWrappedWidget>;
     /**
      * @returns returns a note path of active note or null if there isn't active note
      */
@@ -457,6 +465,8 @@ export interface Api {
      * Log given message to the log pane in UI
      */
     log(message: string | object): void;
+
+    preact: typeof preactAPI;
 }
 
 /**
@@ -526,9 +536,8 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
         return params.map((p) => {
             if (typeof p === "function") {
                 return `!@#Function: ${p.toString()}`;
-            } else {
-                return p;
             }
+            return p;
         });
     }
 
@@ -555,9 +564,8 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
             await ws.waitForMaxKnownEntityChangeId();
 
             return ret.executionResult;
-        } else {
-            throw new Error(`server error: ${ret.error}`);
         }
+        throw new Error(`server error: ${ret.error}`);
     };
 
     this.runOnBackend = async (func, params = []) => {
@@ -714,6 +722,8 @@ function FrontendScriptApi(this: Api, startNote: FNote, currentNote: FNote, orig
         this.logMessages[noteId].push(message);
         this.logSpacedUpdates[noteId].scheduleUpdate();
     };
+
+    this.preact = preactAPI;
 }
 
 export default FrontendScriptApi as any as {

apps/client/src/services/frontend_script_api_preact.ts

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

apps/client/src/services/i18n.ts

@@ -2,7 +2,7 @@ import options from "./options.js";
 import i18next from "i18next";
 import i18nextHttpBackend from "i18next-http-backend";
 import server from "./server.js";
-import type { Locale } from "@triliumnext/commons";
+import { LOCALE_IDS, setDayjsLocale, type Locale } from "@triliumnext/commons";
 import { initReactI18next } from "react-i18next";
 
 let locales: Locale[] | null;
@@ -13,7 +13,7 @@ let locales: Locale[] | null;
 export let translationsInitializedPromise = $.Deferred();
 
 export async function initLocale() {
-    const locale = (options.get("locale") as string) || "en";
+    const locale = ((options.get("locale") as string) || "en") as LOCALE_IDS;
 
     locales = await server.get<Locale[]>("options/locales");
 
@@ -27,6 +27,7 @@ export async function initLocale() {
         returnEmptyString: false
     });
 
+    await setDayjsLocale(locale);
     translationsInitializedPromise.resolve();
 }
 

apps/client/src/services/import.ts

@@ -1,4 +1,4 @@
-import toastService, { type ToastOptions } from "./toast.js";
+import toastService, { type ToastOptionsWithRequiredId } from "./toast.js";
 import server from "./server.js";
 import ws from "./ws.js";
 import utils from "./utils.js";
@@ -57,11 +57,11 @@ export async function uploadFiles(entityType: string, parentNoteId: string, file
     }
 }
 
-function makeToast(id: string, message: string): ToastOptions {
+function makeToast(id: string, message: string): ToastOptionsWithRequiredId {
     return {
-        id: id,
+        id,
         title: t("import.import-status"),
-        message: message,
+        message,
         icon: "plus"
     };
 }
@@ -78,7 +78,7 @@ ws.subscribeToMessages(async (message) => {
         toastService.showPersistent(makeToast(message.taskId, t("import.in-progress", { progress: message.progressCount })));
     } else if (message.type === "taskSucceeded") {
         const toast = makeToast(message.taskId, t("import.successful"));
-        toast.closeAfter = 5000;
+        toast.timeout = 5000;
 
         toastService.showPersistent(toast);
 
@@ -100,7 +100,7 @@ ws.subscribeToMessages(async (message: WebSocketMessage) => {
         toastService.showPersistent(makeToast(message.taskId, t("import.in-progress", { progress: message.progressCount })));
     } else if (message.type === "taskSucceeded") {
         const toast = makeToast(message.taskId, t("import.successful"));
-        toast.closeAfter = 5000;
+        toast.timeout = 5000;
 
         toastService.showPersistent(toast);
 

apps/client/src/services/keyboard_actions.ts

@@ -1,6 +1,6 @@
 import server from "./server.js";
-import appContext, { type CommandNames } from "../components/app_context.js";
-import shortcutService from "./shortcuts.js";
+import appContext from "../components/app_context.js";
+import shortcutService, { ShortcutBinding } from "./shortcuts.js";
 import type Component from "../components/component.js";
 import type { ActionKeyboardShortcut } from "@triliumnext/commons";
 
@@ -28,14 +28,24 @@ async function getActionsForScope(scope: string) {
     return actions.filter((action) => action.scope === scope);
 }
 
-async function setupActionsForElement(scope: string, $el: JQuery<HTMLElement>, component: Component) {
+async function setupActionsForElement(scope: string, $el: JQuery<HTMLElement>, component: Component, ntxId: string | null | undefined) {
+    if (!$el[0]) return [];
+
     const actions = await getActionsForScope(scope);
+    const bindings: ShortcutBinding[] = [];
 
     for (const action of actions) {
         for (const shortcut of action.effectiveShortcuts ?? []) {
-            shortcutService.bindElShortcut($el, shortcut, () => component.triggerCommand(action.actionName, { ntxId: appContext.tabManager.activeNtxId }));
+            const binding = shortcutService.bindElShortcut($el, shortcut, () => {
+                component.triggerCommand(action.actionName, { ntxId });
+            });
+            if (binding) {
+                bindings.push(binding);
+            }
         }
     }
+
+    return bindings;
 }
 
 getActionsForScope("window").then((actions) => {

apps/client/src/services/link.ts

@@ -1,10 +1,11 @@
-import treeService from "./tree.js";
-import linkContextMenuService from "../menus/link_context_menu.js";
-import appContext, { type NoteCommandData } from "../components/app_context.js";
-import froca from "./froca.js";
-import utils from "./utils.js";
 import { ALLOWED_PROTOCOLS } from "@triliumnext/commons";
+
+import appContext, { type NoteCommandData } from "../components/app_context.js";
 import { openInCurrentNoteContext } from "../components/note_context.js";
+import linkContextMenuService from "../menus/link_context_menu.js";
+import froca from "./froca.js";
+import treeService from "./tree.js";
+import utils from "./utils.js";
 
 function getNotePathFromUrl(url: string) {
     const notePathMatch = /#(root[A-Za-z0-9_/]*)$/.exec(url);
@@ -27,7 +28,7 @@ async function getLinkIcon(noteId: string, viewMode: ViewMode | undefined) {
     return icon;
 }
 
-export type ViewMode = "default" | "source" | "attachments" | "contextual-help";
+export type ViewMode = "default" | "source" | "attachments" | "contextual-help" | "note-map";
 
 export interface ViewScope {
     /**
@@ -99,7 +100,7 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
     const viewMode = viewScope.viewMode || "default";
     let linkTitle = options.title;
 
-    if (!linkTitle) {
+    if (linkTitle === undefined) {
         if (viewMode === "attachments" && viewScope.attachmentId) {
             const attachment = await froca.getAttachment(viewScope.attachmentId);
 
@@ -122,7 +123,7 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
     const $container = $("<span>");
 
     if (showNoteIcon) {
-        let icon = await getLinkIcon(noteId, viewMode);
+        const icon = await getLinkIcon(noteId, viewMode);
 
         if (icon) {
             $container.append($("<span>").addClass(`bx ${icon}`)).append(" ");
@@ -131,7 +132,7 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
 
     const hash = calculateHash({
         notePath,
-        viewScope: viewScope
+        viewScope
     });
 
     const $noteLink = $("<a>", {
@@ -150,11 +151,16 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
     $container.append($noteLink);
 
     if (showNotePath) {
-        const resolvedPathSegments = (await treeService.resolveNotePathToSegments(notePath)) || [];
-        resolvedPathSegments.pop(); // Remove last element
+        let pathSegments: string[];
+        if (notePath == "root") {
+            pathSegments = ["⌂"];
+        } else {
+            const resolvedPathSegments = (await treeService.resolveNotePathToSegments(notePath)) || [];
+            resolvedPathSegments.pop(); // Remove last element
 
-        const resolvedPath = resolvedPathSegments.join("/");
-        const pathSegments = await treeService.getNotePathTitleComponents(resolvedPath);
+            const resolvedPath = resolvedPathSegments.join("/");
+            pathSegments = await treeService.getNotePathTitleComponents(resolvedPath);
+        }
 
         if (pathSegments) {
             if (pathSegments.length) {
@@ -166,11 +172,11 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
     return $container;
 }
 
-function calculateHash({ notePath, ntxId, hoistedNoteId, viewScope = {} }: NoteCommandData) {
+export function calculateHash({ notePath, ntxId, hoistedNoteId, viewScope = {} }: NoteCommandData) {
     notePath = notePath || "";
     const params = [
-        ntxId ? { ntxId: ntxId } : null,
-        hoistedNoteId && hoistedNoteId !== "root" ? { hoistedNoteId: hoistedNoteId } : null,
+        ntxId ? { ntxId } : null,
+        hoistedNoteId && hoistedNoteId !== "root" ? { hoistedNoteId } : null,
         viewScope.viewMode && viewScope.viewMode !== "default" ? { viewMode: viewScope.viewMode } : null,
         viewScope.attachmentId ? { attachmentId: viewScope.attachmentId } : null
     ].filter((p) => !!p);
@@ -214,7 +220,7 @@ export function parseNavigationStateFromUrl(url: string | undefined) {
     }
 
     const hash = url.substr(hashIdx + 1); // strip also the initial '#'
-    let [notePath, paramString] = hash.split("?");
+    const [notePath, paramString] = hash.split("?");
 
     const viewScope: ViewScope = {
         viewMode: "default"
@@ -247,7 +253,7 @@ export function parseNavigationStateFromUrl(url: string | undefined) {
     }
 
     if (searchString) {
-        return { searchString }
+        return { searchString };
     }
 
     if (!notePath.match(/^[_a-z0-9]{4,}(\/[_a-z0-9]{4,})*$/i)) {
@@ -280,7 +286,7 @@ function goToLink(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent) {
  * @param $link the jQuery element of the link that was clicked, used to determine if the link is an anchor link (e.g., `#fn1` or `#fnref1`) and to handle it accordingly.
  * @returns `true` if the link was handled (i.e., the element was found and scrolled to), or a falsy value otherwise.
  */
-function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, hrefLink: string | undefined, $link?: JQuery<HTMLElement> | null) {
+export function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, hrefLink: string | undefined, $link?: JQuery<HTMLElement> | null) {
     if (hrefLink?.startsWith("data:")) {
         return true;
     }
@@ -302,7 +308,8 @@ function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent
     // Right click is handled separately.
     const isMiddleClick = evt && "which" in evt && evt.which === 2;
     const targetIsBlank = ($link?.attr("target") === "_blank");
-    const openInNewTab = (isLeftClick && ctrlKey) || isMiddleClick || targetIsBlank;
+    const isDoubleClick = isLeftClick && evt?.type === "dblclick";
+    const openInNewTab = (isLeftClick && ctrlKey) || isDoubleClick || isMiddleClick || targetIsBlank;
     const activate = (isLeftClick && ctrlKey && shiftKey) || (isMiddleClick && shiftKey);
     const openInNewWindow = isLeftClick && evt?.shiftKey && !ctrlKey;
 
@@ -323,16 +330,18 @@ function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent
         const withinEditLink = $link?.hasClass("ck-link-actions__preview");
         const outsideOfCKEditor = !$link || $link.closest("[contenteditable]").length === 0;
 
-        if (openInNewTab || (withinEditLink && (isLeftClick || isMiddleClick)) || (outsideOfCKEditor && (isLeftClick || isMiddleClick))) {
+        if (openInNewTab || openInNewWindow || (isLeftClick && (withinEditLink || outsideOfCKEditor))) {
             if (hrefLink.toLowerCase().startsWith("http") || hrefLink.startsWith("api/")) {
                 window.open(hrefLink, "_blank");
-            } else if ((hrefLink.toLowerCase().startsWith("file:") || hrefLink.toLowerCase().startsWith("geo:")) && utils.isElectron()) {
-                const electron = utils.dynamicRequire("electron");
-                electron.shell.openPath(hrefLink);
             } else {
                 // Enable protocols supported by CKEditor 5 to be clickable.
-                if (ALLOWED_PROTOCOLS.some((protocol) => hrefLink.toLowerCase().startsWith(protocol + ":"))) {
-                    window.open(hrefLink, "_blank");
+                if (ALLOWED_PROTOCOLS.some((protocol) => hrefLink.toLowerCase().startsWith(`${protocol}:`))) {
+                    if ( utils.isElectron()) {
+                        const electron = utils.dynamicRequire("electron");
+                        electron.shell.openExternal(hrefLink);
+                    } else {
+                        window.open(hrefLink, "_blank");
+                    }
                 }
             }
         }
@@ -387,7 +396,7 @@ async function loadReferenceLinkTitle($el: JQuery<HTMLElement>, href: string | n
 
     href = href || $link.attr("href");
     if (!href) {
-        console.warn("Empty URL for parsing: " + $el[0].outerHTML);
+        console.warn(`Empty URL for parsing: ${$el[0].outerHTML}`);
         return;
     }
 
@@ -430,9 +439,9 @@ async function getReferenceLinkTitle(href: string) {
         const attachment = await note.getAttachmentById(viewScope.attachmentId);
 
         return attachment ? attachment.title : "[missing attachment]";
-    } else {
-        return note.title;
     }
+    return note.title;
+
 }
 
 function getReferenceLinkTitleSync(href: string) {
@@ -454,42 +463,35 @@ function getReferenceLinkTitleSync(href: string) {
         const attachment = note.attachments.find((att) => att.attachmentId === viewScope.attachmentId);
 
         return attachment ? attachment.title : "[missing attachment]";
-    } else {
-        return note.title;
     }
+    return note.title;
+
 }
 
-// TODO: Check why the event is not supported.
-//@ts-ignore
-$(document).on("click", "a", goToLink);
-// TODO: Check why the event is not supported.
-//@ts-ignore
-$(document).on("auxclick", "a", goToLink); // to handle the middle button
-// TODO: Check why the event is not supported.
-//@ts-ignore
-$(document).on("contextmenu", "a", linkContextMenu);
-$(document).on("dblclick", "a", (e) => {
-    e.preventDefault();
-    e.stopPropagation();
+if (glob.device !== "print") {
+    // TODO: Check why the event is not supported.
+    //@ts-ignore
+    $(document).on("click", "a", goToLink);
+    // TODO: Check why the event is not supported.
+    //@ts-ignore
+    $(document).on("auxclick", "a", goToLink); // to handle the middle button
+    // TODO: Check why the event is not supported.
+    //@ts-ignore
+    $(document).on("contextmenu", "a", linkContextMenu);
+    // TODO: Check why the event is not supported.
+    //@ts-ignore
+    $(document).on("dblclick", "a", goToLink);
 
-    const $link = $(e.target).closest("a");
-
-    const address = $link.attr("href");
-
-    if (address && address.startsWith("http")) {
-        window.open(address, "_blank");
-    }
-});
-
-$(document).on("mousedown", "a", (e) => {
-    if (e.which === 2) {
-        // prevent paste on middle click
-        // https://github.com/zadam/trilium/issues/2995
-        // https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event#preventing_default_actions
-        e.preventDefault();
-        return false;
-    }
-});
+    $(document).on("mousedown", "a", (e) => {
+        if (e.which === 2) {
+            // prevent paste on middle click
+            // https://github.com/zadam/trilium/issues/2995
+            // https://developer.mozilla.org/en-US/docs/Web/API/Element/auxclick_event#preventing_default_actions
+            e.preventDefault();
+            return false;
+        }
+    });
+}
 
 export default {
     getNotePathFromUrl,

apps/client/src/services/load_results.ts

@@ -1,11 +1,22 @@
-import type { AttachmentRow, EtapiTokenRow, OptionNames } from "@triliumnext/commons";
+import type { AttachmentRow, EtapiTokenRow, NoteType, OptionNames } from "@triliumnext/commons";
+
 import type { AttributeType } from "../entities/fattribute.js";
 import type { EntityChange } from "../server_types.js";
 
 // TODO: Deduplicate with server.
 
 interface NoteRow {
+    blobId: string;
+    dateCreated: string;
+    dateModified: string;
     isDeleted?: boolean;
+    isProtected?: boolean;
+    mime: string;
+    noteId: string;
+    title: string;
+    type: NoteType;
+    utcDateCreated: string;
+    utcDateModified: string;
 }
 
 // TODO: Deduplicate with BranchRow from `rows.ts`/
@@ -125,7 +136,14 @@ export default class LoadResults {
     }
 
     getBranchRows() {
-        return this.branchRows.map((row) => this.getEntityRow("branches", row.branchId)).filter((branch) => !!branch);
+        return this.branchRows.map((row) => {
+            const branch = this.getEntityRow("branches", row.branchId);
+            if (branch) {
+                // Merge the componentId from the tracked row with the entity data
+                return { ...branch, componentId: row.componentId };
+            }
+            return null;
+        }).filter((branch) => !!branch) as BranchRow[];
     }
 
     addNoteReordering(parentNoteId: string, componentId: string) {
@@ -143,7 +161,14 @@ export default class LoadResults {
     getAttributeRows(componentId = "none"): AttributeRow[] {
         return this.attributeRows
             .filter((row) => row.componentId !== componentId)
-            .map((row) => this.getEntityRow("attributes", row.attributeId))
+            .map((row) => {
+                const attr = this.getEntityRow("attributes", row.attributeId);
+                if (attr) {
+                    // Merge the componentId from the tracked row with the entity data
+                    return { ...attr, componentId: row.componentId };
+                }
+                return null;
+            })
             .filter((attr) => !!attr) as AttributeRow[];
     }
 

apps/client/src/services/open.ts

@@ -1,5 +1,8 @@
-import utils from "./utils.js";
+import Component from "../components/component.js";
+import FNote from "../entities/fnote.js";
+import options from "./options.js";
 import server from "./server.js";
+import utils from "./utils.js";
 
 type ExecFunction = (command: string, cb: (err: string, stdout: string, stderror: string) => void) => void;
 
@@ -35,9 +38,14 @@ function download(url: string) {
     }
 }
 
-export function downloadFileNote(noteId: string) {
-    const url = `${getFileUrl("notes", noteId)}?${Date.now()}`; // don't use cache
+export function downloadFileNote(note: FNote, parentComponent: Component | null, ntxId: string | null | undefined) {
+    if (note.type === "file" && note.mime === "application/pdf" && parentComponent) {
+        // Special handling, manages its own downloading process.
+        parentComponent.triggerEvent("customDownload", { ntxId });
+        return;
+    }
 
+    const url = `${getFileUrl("notes", note.noteId)}?${Date.now()}`; // don't use cache
     download(url);
 }
 
@@ -96,7 +104,7 @@ async function openCustom(type: string, entityId: string, mime: string) {
             // Note that the path separator must be \ instead of /
             filePath = filePath.replace(/\//g, "\\");
         }
-        const command = `rundll32.exe shell32.dll,OpenAs_RunDLL ` + filePath;
+        const command = `rundll32.exe shell32.dll,OpenAs_RunDLL ${filePath}`;
         exec(command, (err, stdout, stderr) => {
             if (err) {
                 console.error("Open Note custom: ", err);
@@ -126,14 +134,14 @@ function downloadRevision(noteId: string, revisionId: string) {
 /**
  * @param url - should be without initial slash!!!
  */
-function getUrlForDownload(url: string) {
+export function getUrlForDownload(url: string) {
     if (utils.isElectron()) {
         // electron needs absolute URL, so we extract current host, port, protocol
         return `${getHost()}/${url}`;
-    } else {
-        // web server can be deployed on subdomain, so we need to use a relative path
-        return url;
     }
+    // web server can be deployed on subdomain, so we need to use a relative path
+    return url;
+
 }
 
 function canOpenInBrowser(mime: string) {
@@ -171,6 +179,21 @@ function getHost() {
     return `${url.protocol}//${url.hostname}:${url.port}`;
 }
 
+async function openNoteOnServer(noteId: string) {
+    // Get the sync server host from options
+    const syncServerHost = options.get("syncServerHost");
+
+    if (!syncServerHost) {
+        console.error("No sync server host configured");
+        return;
+    }
+
+    const url = new URL(`#root/${noteId}`, syncServerHost).toString();
+
+    // Use window.open to ensure link opens in external browser in Electron
+    window.open(url, '_blank', 'noopener,noreferrer');
+}
+
 async function openDirectory(directory: string) {
     try {
         if (utils.isElectron()) {
@@ -198,5 +221,6 @@ export default {
     openAttachmentExternally,
     openNoteCustom,
     openAttachmentCustom,
+    openNoteOnServer,
     openDirectory
 };

apps/client/src/services/promoted_attribute_definition_parser.ts

@@ -41,6 +41,17 @@ function parse(value: string) {
     return defObj;
 }
 
+/**
+ * For an attribute definition name (e.g. `label:TEST:TEST1`), extracts its type (label) and name (TEST:TEST1).
+ * @param definitionAttrName the attribute definition name, without the leading `#` (e.g. `label:TEST:TEST1`)
+ * @return a tuple of [type, name].
+ */
+export function extractAttributeDefinitionTypeAndName(definitionAttrName: string): [ "label" | "relation", string ] {
+    const valueType = definitionAttrName.startsWith("label:") ? "label" : "relation";
+    const valueName = definitionAttrName.substring(valueType.length + 1);
+    return [ valueType, valueName ];
+}
+
 export default {
     parse
 };

apps/client/src/services/protected_session.ts

@@ -1,7 +1,7 @@
 import server from "./server.js";
 import protectedSessionHolder from "./protected_session_holder.js";
 import toastService from "./toast.js";
-import type { ToastOptions } from "./toast.js";
+import type { ToastOptionsWithRequiredId } from "./toast.js";
 import ws from "./ws.js";
 import appContext from "../components/app_context.js";
 import froca from "./froca.js";
@@ -97,7 +97,7 @@ async function protectNote(noteId: string, protect: boolean, includingSubtree: b
     await server.put(`notes/${noteId}/protect/${protect ? 1 : 0}?subtree=${includingSubtree ? 1 : 0}`);
 }
 
-function makeToast(message: Message, title: string, text: string): ToastOptions {
+function makeToast(message: Message, title: string, text: string): ToastOptionsWithRequiredId {
     return {
         id: message.taskId,
         title,
@@ -124,7 +124,7 @@ ws.subscribeToMessages(async (message) => {
     } else if (message.type === "taskSucceeded") {
         const text = isProtecting ? t("protected_session.protecting-finished-successfully") : t("protected_session.unprotecting-finished-successfully");
         const toast = makeToast(message, title, text);
-        toast.closeAfter = 3000;
+        toast.timeout = 3000;
 
         toastService.showPersistent(toast);
     }

apps/client/src/services/render.ts

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

apps/client/src/services/server.ts

@@ -85,13 +85,15 @@ async function remove<T>(url: string, componentId?: string) {
     return await call<T>("DELETE", url, componentId);
 }
 
-async function upload(url: string, fileToUpload: File) {
+async function upload(url: string, fileToUpload: File, componentId?: string) {
     const formData = new FormData();
     formData.append("upload", fileToUpload);
 
     return await $.ajax({
         url: window.glob.baseApiUrl + url,
-        headers: await getHeaders(),
+        headers: await getHeaders(componentId ? {
+            "trilium-component-id": componentId
+        } : undefined),
         data: formData,
         type: "PUT",
         timeout: 60 * 60 * 1000,
@@ -133,11 +135,11 @@ async function call<T>(method: string, url: string, componentId?: string, option
             };
 
             ipc.send("server-request", {
-                requestId: requestId,
-                headers: headers,
-                method: method,
+                requestId,
+                headers,
+                method,
                 url: `/${window.glob.baseApiUrl}${url}`,
-                data: data
+                data
             });
         })) as any;
     } else {
@@ -161,7 +163,7 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, sile
         const options: JQueryAjaxSettings = {
             url: window.glob.baseApiUrl + url,
             type: method,
-            headers: headers,
+            headers,
             timeout: 60000,
             success: (body, textStatus, jqXhr) => {
                 const respHeaders: Headers = {};
@@ -263,7 +265,7 @@ async function reportError(method: string, url: string, statusCode: number, resp
 
     const toastService = (await import("./toast.js")).default;
 
-    const messageStr = typeof message === "string" ? message : JSON.stringify(message);
+    const messageStr = (typeof message === "string" ? message : JSON.stringify(message)) || "-";
 
     if ([400, 404].includes(statusCode) && response && typeof response === "object") {
         toastService.showError(messageStr);
@@ -274,10 +276,22 @@ async function reportError(method: string, url: string, statusCode: number, resp
             ...response
         });
     } else {
-        const title = `${statusCode} ${method} ${url}`;
-        toastService.showErrorTitleAndMessage(title, messageStr);
-        const { throwError } = await import("./ws.js");
-        throwError(`${title} - ${message}`);
+        const { t } = await import("./i18n.js");
+        if (statusCode === 400 && (url.includes("%23") || url.includes("%2F"))) {
+            toastService.showPersistent({
+                id: "trafik-blocked",
+                icon: "bx bx-unlink",
+                title: t("server.unknown_http_error_title"),
+                message: t("server.traefik_blocks_requests")
+            });
+        } else {
+            toastService.showErrorTitleAndMessage(
+                t("server.unknown_http_error_title"),
+                t("server.unknown_http_error_content", { statusCode, method, url, message: messageStr }),
+                15_000);
+        }
+        const { logError } = await import("./ws.js");
+        logError(`${statusCode} ${method} ${url} - ${message}`);
     }
 }
 

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

@@ -100,6 +100,20 @@ describe("shortcuts", () => {
             expect(consoleSpy).toHaveBeenCalled();
             consoleSpy.mockRestore();
         });
+
+        it("should match letter keys using code when key is a special character (macOS Alt behavior)", () => {
+            // On macOS, pressing Option/Alt + A produces 'å' as the key, but code is still 'KeyA'
+            const macOSAltAEvent = createKeyboardEvent("å", "KeyA");
+            expect(keyMatches(macOSAltAEvent, "a")).toBe(true);
+
+            // Option + H produces '˙'
+            const macOSAltHEvent = createKeyboardEvent("˙", "KeyH");
+            expect(keyMatches(macOSAltHEvent, "h")).toBe(true);
+
+            // Option + S produces 'ß'
+            const macOSAltSEvent = createKeyboardEvent("ß", "KeyS");
+            expect(keyMatches(macOSAltSEvent, "s")).toBe(true);
+        });
     });
 
     describe("matchesShortcut", () => {
@@ -200,6 +214,33 @@ describe("shortcuts", () => {
             expect(consoleSpy).toHaveBeenCalled();
             consoleSpy.mockRestore();
         });
+
+        it("should match Alt+letter shortcuts on macOS where key is a special character", () => {
+            // On macOS, pressing Option/Alt + A produces 'å' but code remains 'KeyA'
+            const macOSAltAEvent = createKeyboardEvent({
+                key: "å",
+                code: "KeyA",
+                altKey: true
+            });
+            expect(matchesShortcut(macOSAltAEvent, "alt+a")).toBe(true);
+
+            // Option/Alt + H produces '˙'
+            const macOSAltHEvent = createKeyboardEvent({
+                key: "˙",
+                code: "KeyH",
+                altKey: true
+            });
+            expect(matchesShortcut(macOSAltHEvent, "alt+h")).toBe(true);
+
+            // Combined with Ctrl: Ctrl+Alt+S where Alt produces 'ß'
+            const macOSCtrlAltSEvent = createKeyboardEvent({
+                key: "ß",
+                code: "KeyS",
+                ctrlKey: true,
+                altKey: true
+            });
+            expect(matchesShortcut(macOSCtrlAltSEvent, "ctrl+alt+s")).toBe(true);
+        });
     });
 
     describe("bindGlobalShortcut", () => {

apps/client/src/services/shortcuts.ts

@@ -1,9 +1,9 @@
 import utils from "./utils.js";
 
 type ElementType = HTMLElement | Document;
-type Handler = (e: KeyboardEvent) => void;
+export type Handler = (e: KeyboardEvent) => void;
 
-interface ShortcutBinding {
+export interface ShortcutBinding {
     element: HTMLElement | Document;
     shortcut: string;
     handler: Handler;
@@ -110,8 +110,9 @@ function bindElShortcut($el: JQuery<ElementType | Element>, keyboardShortcut: st
                 }
             };
 
-            // Add the event listener
-            element.addEventListener('keydown', listener);
+            // Add the event listener in capture phase to intercept events before they reach
+            // child elements like CodeMirror
+            element.addEventListener('keydown', listener, true);
 
             // Store the binding for later cleanup
             const binding: ShortcutBinding = {
@@ -127,16 +128,27 @@ function bindElShortcut($el: JQuery<ElementType | Element>, keyboardShortcut: st
                 activeBindings.set(key, []);
             }
             activeBindings.get(key)!.push(binding);
+            return binding;
         }
     }
 }
 
+export function removeIndividualBinding(binding: ShortcutBinding) {
+    const key = binding.namespace ?? "global";
+    const activeBindingsInNamespace = activeBindings.get(key);
+    if (activeBindingsInNamespace) {
+        activeBindings.set(key, activeBindingsInNamespace.filter(aBinding => aBinding.handler === binding.handler));
+    }
+    // Remove listener with capture phase to match how it was added
+    binding.element.removeEventListener("keydown", binding.listener, true);
+}
+
 function removeNamespaceBindings(namespace: string) {
     const bindings = activeBindings.get(namespace);
     if (bindings) {
-        // Remove all event listeners for this namespace
         bindings.forEach(binding => {
-            binding.element.removeEventListener('keydown', binding.listener);
+            // Remove listener with capture phase to match how it was added
+            binding.element.removeEventListener('keydown', binding.listener, true);
         });
         activeBindings.delete(namespace);
     }
@@ -203,8 +215,11 @@ export function keyMatches(e: KeyboardEvent, key: string): boolean {
     }
 
     // For letter keys, use the physical key code for consistency
+    // On macOS, Option/Alt key produces special characters, so we must use e.code
     if (key.length === 1 && key >= 'a' && key <= 'z') {
-        return e.key.toLowerCase() === key.toLowerCase();
+        // e.code is like "KeyA", "KeyB", etc.
+        const expectedCode = `Key${key.toUpperCase()}`;
+        return e.code === expectedCode || e.key.toLowerCase() === key.toLowerCase();
     }
 
     // For regular keys, check both key and code as fallback

apps/client/src/services/spaced_update.ts

@@ -1,22 +1,30 @@
+import type { SaveState } from "../components/note_context";
+import { getErrorMessage } from "./utils";
+
 type Callback = () => Promise<void> | void;
 
+export type StateCallback = (state: SaveState) => void;
+
 export default class SpacedUpdate {
     private updater: Callback;
     private lastUpdated: number;
     private changed: boolean;
     private updateInterval: number;
     private changeForbidden?: boolean;
+    private stateCallback?: StateCallback;
 
-    constructor(updater: Callback, updateInterval = 1000) {
+    constructor(updater: Callback, updateInterval = 1000, stateCallback?: StateCallback) {
         this.updater = updater;
         this.lastUpdated = Date.now();
         this.changed = false;
         this.updateInterval = updateInterval;
+        this.stateCallback = stateCallback;
     }
 
     scheduleUpdate() {
         if (!this.changeForbidden) {
             this.changed = true;
+            this.stateCallback?.("unsaved");
             setTimeout(() => this.triggerUpdate());
         }
     }
@@ -26,10 +34,13 @@ export default class SpacedUpdate {
             this.changed = false; // optimistic...
 
             try {
+                this.stateCallback?.("saving");
                 await this.updater();
+                this.stateCallback?.("saved");
             } catch (e) {
                 this.changed = true;
-
+                this.stateCallback?.("error");
+                logError(getErrorMessage(e));
                 throw e;
             }
         }
@@ -59,15 +70,22 @@ export default class SpacedUpdate {
         this.updateInterval = interval;
     }
 
-    triggerUpdate() {
+    async triggerUpdate() {
         if (!this.changed) {
             return;
         }
 
         if (Date.now() - this.lastUpdated > this.updateInterval) {
-            this.updater();
+            this.stateCallback?.("saving");
+            try {
+                await this.updater();
+                this.stateCallback?.("saved");
+                this.changed = false;
+            } catch (e) {
+                this.stateCallback?.("error");
+                logError(getErrorMessage(e));
+            }
             this.lastUpdated = Date.now();
-            this.changed = false;
         } else {
             // update isn't triggered but changes are still pending, so we need to schedule another check
             this.scheduleUpdate();