docs(release): update change log for #7939

Currently translated at 100.0% (1636 of 1636 strings)

Translation: Trilium Notes/Client
Translate-URL: https://hosted.weblate.org/projects/trilium/client/ro/

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

@@ -10,9 +10,9 @@ runs:
   steps:
   - uses: pnpm/action-setup@v4
   - name: Set up node & dependencies
-    uses: actions/setup-node@v5
+    uses: actions/setup-node@v6
     with:
-      node-version: 22
+      node-version: 24
       cache: "pnpm"
   - name: Install dependencies
     shell: bash

.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/checks.yml

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

.github/workflows/codeql.yml

@@ -57,7 +57,7 @@ jobs:
         # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
     steps:
     - name: Checkout repository
-      uses: actions/checkout@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

@@ -1,6 +1,4 @@
-# GitHub Actions workflow for deploying MkDocs documentation to Cloudflare Pages
-# This workflow builds and deploys your MkDocs site when changes are pushed to main
-name: Deploy MkDocs Documentation
+name: Deploy Documentation
 
 on:
   # Trigger on push to main branch
@@ -11,11 +9,9 @@ on:
     # Only run when docs files change
     paths:
       - 'docs/**'
-      - 'README.md'  # README is synced to docs/index.md
-      - 'mkdocs.yml'
-      - 'requirements-docs.txt'
-      - '.github/workflows/deploy-docs.yml'
-      - 'scripts/fix-mkdocs-structure.ts'
+      - 'apps/edit-docs/**'
+      - 'apps/build-docs/**'
+      - 'packages/share-theme/**'
 
   # Allow manual triggering from Actions tab
   workflow_dispatch:
@@ -27,15 +23,13 @@ on:
       - master
     paths:
       - 'docs/**'
-      - 'README.md'  # README is synced to docs/index.md
-      - 'mkdocs.yml'
-      - 'requirements-docs.txt'
-      - '.github/workflows/deploy-docs.yml'
-      - 'scripts/fix-mkdocs-structure.ts'
+      - 'apps/edit-docs/**'
+      - 'apps/build-docs/**'
+      - 'packages/share-theme/**'
 
 jobs:
   build-and-deploy:
-    name: Build and Deploy MkDocs
+    name: Build and Deploy Documentation
     runs-on: ubuntu-latest
     timeout-minutes: 10
 
@@ -48,77 +42,32 @@ jobs:
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v5
-        with:
-          fetch-depth: 0 # Fetch all history for git info and mkdocs-git-revision-date plugin
+        uses: actions/checkout@v6
 
-      - name: Setup Python
-        uses: actions/setup-python@v6
-        with:
-          python-version: '3.14'
-          cache: 'pip'
-          cache-dependency-path: 'requirements-docs.txt'
-
-      - name: Install MkDocs and Dependencies
-        run: |
-          pip install --upgrade pip
-          pip install -r requirements-docs.txt
-        env:
-          PIP_DISABLE_PIP_VERSION_CHECK: 1
-
-      # Setup pnpm before fixing docs structure
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
 
-      # Setup Node.js with pnpm
       - name: Setup Node.js
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
-          node-version: '22'
+          node-version: '24'
           cache: 'pnpm'
 
-      # Install Node.js dependencies for the TypeScript script
       - name: Install Dependencies
-        run: |
-          pnpm install --frozen-lockfile
+        run: pnpm install --frozen-lockfile
 
-      - name: Fix Documentation Structure
-        run: |
-          # Fix duplicate navigation entries by moving overview pages to index.md
-          pnpm run chore:fix-mkdocs-structure
-
-      - name: Build MkDocs Site
-        run: |
-          # Build with strict mode but allow expected warnings
-          mkdocs build --verbose || {
-            EXIT_CODE=$?
-            # Check if the only issue is expected warnings
-            if mkdocs build 2>&1 | grep -E "WARNING.*(README|not found)" && \
-               [ $(mkdocs build 2>&1 | grep -c "ERROR") -eq 0 ]; then
-              echo "✅ Build succeeded with expected warnings"
-              mkdocs build --verbose
-            else
-              echo "❌ Build failed with unexpected errors"
-              exit $EXIT_CODE
-            fi
-          }
-
-      - name: Fix HTML Links
-        run: |
-          # Remove .md extensions from links in generated HTML
-          pnpm tsx ./scripts/fix-html-links.ts site
+      - name: Trigger build of documentation
+        run: pnpm docs:build
 
       - name: Validate Built Site
         run: |
-          # Basic validation that important files exist
           test -f site/index.html || (echo "ERROR: site/index.html not found" && exit 1)
-          test -f site/sitemap.xml || (echo "ERROR: site/sitemap.xml not found" && exit 1)
-          test -d site/assets || (echo "ERROR: site/assets directory not found" && exit 1)
-          echo "✅ Site validation passed"
+          test -f site/developer-guide/index.html || (echo "ERROR: site/developer-guide/index.html not found" && exit 1)
+          echo "✓ User Guide and Developer Guide built successfully"
 
       - name: Deploy
         uses: ./.github/actions/deploy-to-cloudflare-pages
-        if: github.repository == ${{ vars.REPO_MAIN }} && ${{secrets.CLOUDFLARE_API_TOKEN}}
+        if: github.repository == ${{ vars.REPO_MAIN }}
         with:
           project_name: "trilium-docs"
           comment_body: "📚 Documentation preview is ready"

.github/workflows/dev.yml

@@ -24,13 +24,13 @@ 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
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
 
@@ -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/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
@@ -44,9 +44,9 @@ jobs:
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v5
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: "pnpm"
 
       - name: Install npm dependencies
@@ -86,12 +86,12 @@ jobs:
 
       - name: Upload Playwright trace
         if: failure()
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: Playwright trace (${{ matrix.dockerfile }})
           path: test-output/playwright/output
 
-      - uses: actions/upload-artifact@v4
+      - uses: actions/upload-artifact@v5
         if: ${{ !cancelled() }}
         with:
           name: Playwright report (${{ matrix.dockerfile }})
@@ -116,10 +116,10 @@ jobs:
           - dockerfile: Dockerfile
             platform: linux/arm64
             image: ubuntu-24.04-arm
-          - dockerfile: Dockerfile
+          - dockerfile: Dockerfile.legacy
             platform: linux/arm/v7
             image: ubuntu-24.04-arm
-          - dockerfile: Dockerfile
+          - dockerfile: Dockerfile.legacy
             platform: linux/arm/v8
             image: ubuntu-24.04-arm
     runs-on: ${{ matrix.image }}
@@ -141,12 +141,12 @@ 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@v5
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -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@v4
+        uses: actions/upload-artifact@v5
         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@v5
+        uses: actions/download-artifact@v6
         with:
           path: /tmp/digests
           pattern: digests-*

.github/workflows/nightly.yml

@@ -45,19 +45,32 @@ 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@v5
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: 'pnpm'
       - 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.0
+        uses: softprops/action-gh-release@v2.4.2
         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@v4
+        uses: actions/upload-artifact@v5
         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.0
+        uses: softprops/action-gh-release@v2.4.2
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false

.github/workflows/playwright.yml

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

.github/workflows/release.yml

@@ -45,12 +45,12 @@ 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@v5
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
@@ -73,7 +73,7 @@ jobs:
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: release-desktop-${{ matrix.os.name }}-${{ matrix.arch }}
           path: apps/desktop/upload/*.*
@@ -91,7 +91,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 +100,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Upload the artifact
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: release-server-linux-${{ matrix.arch }}
           path: upload/*.*
@@ -114,20 +114,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@v5
+        uses: actions/download-artifact@v6
         with:
           merge-multiple: true
           pattern: release-*
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.4.0
+        uses: softprops/action-gh-release@v2.4.2
         with:
           draft: false
           body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md

.github/workflows/website.yml

@@ -25,12 +25,12 @@ 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@v5
+        uses: actions/setup-node@v6
         with:
-          node-version: 22
+          node-version: 24
           cache: "pnpm"
 
       - name: Install dependencies

.nvmrc

@@ -1 +1 @@
-22.20.0
+24.11.1

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

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

.vscode/settings.json

@@ -5,7 +5,8 @@
     "i18n-ally.keystyle": "nested",
     "i18n-ally.localesPaths": [
         "apps/server/src/assets/translations",
-        "apps/client/src/translations"
+        "apps/client/src/translations",
+        "apps/website/public/translations"
     ],
     "npm.exclude": [
         "**/dist",

README.md

@@ -1,3 +1,14 @@
+<div align="center">
+	<sup>Special thanks to:</sup><br />
+	<a href="https://go.warp.dev/Trilium" target="_blank">		
+		<img alt="Warp sponsorship" width="400" src="https://github.com/warpdotdev/brand-assets/blob/main/Github/Sponsor/Warp-Github-LG-03.png"><br />
+		Warp, built for coding with multiple AI agents<br />
+	</a>
+  <sup>Available for macOS, Linux and Windows</sup>
+</div>
+
+<hr />
+
 # Trilium Notes
 
 ![GitHub Sponsors](https://img.shields.io/github/sponsors/eliandoran) ![LiberaPay patrons](https://img.shields.io/liberapay/patrons/ElianDoran)  
@@ -13,6 +24,10 @@ See [screenshots](https://triliumnext.github.io/Docs/Wiki/screenshot-tour) for q
 
 <a href="https://triliumnext.github.io/Docs/Wiki/screenshot-tour"><img src="./docs/app.png" alt="Trilium Screenshot" width="1000"></a>
 
+## ⏬ Download
+- [Latest release](https://github.com/TriliumNext/Trilium/releases/latest) – stable version, recommended for most users.
+- [Nightly build](https://github.com/TriliumNext/Trilium/releases/tag/nightly) – unstable development version, updated daily with the latest features and fixes.
+
 ## 📚 Documentation
 
 **Visit our comprehensive documentation at [docs.triliumnotes.org](https://docs.triliumnotes.org/)**

_regroup/package.json

@@ -35,22 +35,20 @@
     "chore:generate-openapi": "tsx bin/generate-openapi.js"
   },
   "devDependencies": {    
-    "@playwright/test": "1.56.0",
-    "@stylistic/eslint-plugin": "5.4.0",        
-    "@types/express": "5.0.3",    
-    "@types/node": "22.18.9",    
-    "@types/yargs": "17.0.33",
-    "@vitest/coverage-v8": "3.2.4",
-    "eslint": "9.37.0",
+    "@playwright/test": "1.57.0",
+    "@stylistic/eslint-plugin": "5.6.1",        
+    "@types/express": "5.0.5",    
+    "@types/node": "24.10.1",    
+    "@types/yargs": "17.0.35",
+    "@vitest/coverage-v8": "4.0.14",
+    "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": "4.0.1",
-    "rimraf": "6.0.1",    
-    "tslib": "2.8.1",    
-    "typedoc": "0.28.13",
-    "typedoc-plugin-missing-exports": "4.1.0"
+    "rcedit": "5.0.2",
+    "rimraf": "6.1.2",    
+    "tslib": "2.8.1" 
   },
   "optionalDependencies": {
     "appdmg": "0.6.6"

_regroup/spec/support/etapi.ts

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

_regroup/typedoc.json

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

apps/build-docs/package.json

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

apps/build-docs/src/backend_script_entrypoint.ts

@@ -0,0 +1,36 @@
+/**
+ * The backend script API is accessible to code notes with the "JS (backend)" language.
+ *
+ * The entire API is exposed as a single global: {@link api}
+ *
+ * @module Backend Script API
+ */
+
+/**
+ * This file creates the entrypoint for TypeDoc that simulates the context from within a
+ * script note on the server side.
+ *
+ * Make sure to keep in line with backend's `script_context.ts`.
+ */
+
+export type { default as AbstractBeccaEntity } from "../../server/src/becca/entities/abstract_becca_entity.js";
+export type { default as BAttachment } from "../../server/src/becca/entities/battachment.js";
+export type { default as BAttribute } from "../../server/src/becca/entities/battribute.js";
+export type { default as BBranch } from "../../server/src/becca/entities/bbranch.js";
+export type { default as BEtapiToken } from "../../server/src/becca/entities/betapi_token.js";
+export type { BNote };
+export type { default as BOption } from "../../server/src/becca/entities/boption.js";
+export type { default as BRecentNote } from "../../server/src/becca/entities/brecent_note.js";
+export type { default as BRevision } from "../../server/src/becca/entities/brevision.js";
+
+import BNote from "../../server/src/becca/entities/bnote.js";
+import BackendScriptApi, { type Api } from "../../server/src/services/backend_script_api.js";
+
+export type { Api };
+
+const fakeNote = new BNote();
+
+/**
+ * The `api` global variable allows access to the backend script API, which is documented in {@link Api}.
+ */
+export const api: Api = new BackendScriptApi(fakeNote, {});

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

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

apps/build-docs/src/context.ts

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

apps/build-docs/src/frontend_script_entrypoint.ts

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

apps/build-docs/src/index.html

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

apps/build-docs/src/main.ts

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

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

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

apps/build-docs/src/swagger.ts

@@ -0,0 +1,32 @@
+import BuildContext from "./context";
+import { join } from "path";
+import { execSync } from "child_process";
+import { mkdirSync } from "fs";
+
+interface BuildInfo {
+    specPath: string;
+    outDir: string;
+}
+
+const DIR_PREFIX = "rest-api";
+
+const buildInfos: BuildInfo[] = [
+    {
+        // Paths are relative to Git root.
+        specPath: "apps/server/internal.openapi.yaml",
+        outDir: `${DIR_PREFIX}/internal`
+    },
+    {
+        specPath: "apps/server/etapi.openapi.yaml",
+        outDir: `${DIR_PREFIX}/etapi`
+    }
+];
+
+export default function buildSwagger({ baseDir, gitRootDir }: BuildContext) {
+    for (const { specPath, outDir } of buildInfos) {
+        const absSpecPath = join(gitRootDir, specPath);
+        const targetDir = join(baseDir, outDir);
+        mkdirSync(targetDir, { recursive: true });
+        execSync(`pnpm redocly build-docs ${absSpecPath} -o ${targetDir}/index.html`, { stdio: "inherit" });
+    }
+}

apps/build-docs/tsconfig.app.json

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

apps/build-docs/tsconfig.json

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

apps/build-docs/typedoc.backend.json

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

apps/build-docs/typedoc.frontend.json

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

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.99.1",
+  "version": "0.100.0",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -15,7 +15,7 @@
     "circular-deps": "dpdm -T src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
   },
   "dependencies": {
-    "@eslint/js": "9.37.0",
+    "@eslint/js": "9.39.1",
     "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
@@ -25,40 +25,41 @@
     "@fullcalendar/timegrid": "6.1.19",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
     "@mermaid-js/layout-elk": "0.2.0",
-    "@mind-elixir/node-menu": "5.0.0",
+    "@mind-elixir/node-menu": "5.0.1",
     "@popperjs/core": "2.11.8",
     "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
+    "@triliumnext/split.js": "workspace:*",
     "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.8",
     "boxicons": "2.1.4",
-    "dayjs": "1.11.18",
-    "dayjs-plugin-utc": "0.1.2",
-    "debounce": "2.2.0",
+    "clsx": "2.1.1",
+    "color": "5.0.3",
+    "debounce": "3.0.0",
     "draggabilly": "3.0.0",
     "force-graph": "1.51.0",
-    "globals": "16.4.0",
-    "i18next": "25.5.3",
+    "globals": "16.5.0",
+    "i18next": "25.6.3",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.23",
+    "katex": "0.16.25",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "16.4.0",
-    "mermaid": "11.12.0",
-    "mind-elixir": "5.3.2",
+    "marked": "17.0.1",
+    "mermaid": "11.12.1",
+    "mind-elixir": "5.3.7",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
     "preact": "10.27.2",
-    "react-i18next": "16.0.0",
-    "split.js": "1.6.5",
+    "react-i18next": "16.3.5",
+    "reveal.js": "5.2.1",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
     "vanilla-js-wheel-zoom": "9.0.4"
@@ -68,13 +69,14 @@
     "@preact/preset-vite": "2.10.2",
     "@types/bootstrap": "5.2.10",
     "@types/jquery": "3.5.33",
-    "@types/leaflet": "1.9.20",
+    "@types/leaflet": "1.9.21",
     "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
-    "@types/tabulator-tables": "6.2.11",
+    "@types/reveal.js": "5.2.1",
+    "@types/tabulator-tables": "6.3.0",
     "copy-webpack-plugin": "13.0.1",
-    "happy-dom": "20.0.0",
+    "happy-dom": "20.0.11",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.1.3"
+    "vite-plugin-static-copy": "3.1.4"
   }
 }

apps/client/src/components/app_context.ts

@@ -13,7 +13,6 @@ 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";
@@ -21,8 +20,6 @@ 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";
@@ -33,6 +30,10 @@ import { ColumnComponent } from "tabulator-tables";
 import { ChooseNoteTypeCallback } from "../widgets/dialogs/note_type_chooser.jsx";
 import type RootContainer from "../widgets/containers/root_container.js";
 import { SqlExecuteResults } from "@triliumnext/commons";
+import { AddLinkOpts } from "../widgets/dialogs/add_link.jsx";
+import { IncludeNoteOpts } from "../widgets/dialogs/include_note.jsx";
+import { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import type { MarkdownImportOpts } from "../widgets/dialogs/markdown_import.jsx";
 
 interface Layout {
     getRootWidget: (appContext: AppContext) => RootContainer;
@@ -199,7 +200,7 @@ export type CommandMappings = {
     resetLauncher: ContextMenuCommandData;
 
     executeInActiveNoteDetailWidget: CommandData & {
-        callback: (value: NoteDetailWidget | PromiseLike<NoteDetailWidget>) => void;
+        callback: (value: ReactWrappedWidget) => void;
     };
     executeWithTextEditor: CommandData &
     ExecuteCommandData<CKTextEditor> & {
@@ -211,19 +212,19 @@ export type CommandMappings = {
      * Generally should not be invoked manually, as it is used by {@link NoteContext.getContentElement}.
      */
     executeWithContentElement: CommandData & ExecuteCommandData<JQuery<HTMLElement>>;
-    executeWithTypeWidget: CommandData & ExecuteCommandData<TypeWidget | null>;
+    executeWithTypeWidget: CommandData & ExecuteCommandData<ReactWrappedWidget | null>;
     addTextToActiveEditor: CommandData & {
         text: string;
     };
     /** Works only in the electron context menu. */
     replaceMisspelling: CommandData;
 
-    importMarkdownInline: CommandData;
     showPasswordNotSet: CommandData;
     showProtectedSessionPasswordDialog: CommandData;
     showUploadAttachmentsDialog: CommandData & { noteId: string };
-    showIncludeNoteDialog: CommandData & { textTypeWidget: EditableTextTypeWidget };
-    showAddLinkDialog: CommandData & { textTypeWidget: EditableTextTypeWidget, text: string };
+    showIncludeNoteDialog: CommandData & IncludeNoteOpts;
+    showAddLinkDialog: CommandData & AddLinkOpts;
+    showPasteMarkdownDialog: CommandData & MarkdownImportOpts;
     closeProtectedSessionPasswordDialog: CommandData;
     copyImageReferenceToClipboard: CommandData;
     copyImageToClipboard: CommandData;
@@ -270,6 +271,7 @@ export type CommandMappings = {
     closeThisNoteSplit: CommandData;
     moveThisNoteSplit: CommandData & { isMovingLeft: boolean };
     jumpToNote: CommandData;
+    openTodayNote: CommandData;
     commandPalette: CommandData;
 
     // Keyboard shortcuts
@@ -327,6 +329,7 @@ export type CommandMappings = {
     exportAsPdf: CommandData;
     openNoteExternally: CommandData;
     openNoteCustom: CommandData;
+    openNoteOnServer: CommandData;
     renderActiveNote: CommandData;
     unhoist: CommandData;
     reloadFrontendApp: CommandData;
@@ -442,6 +445,7 @@ type EventMappings = {
         error: string;
     };
     searchRefreshed: { ntxId?: string | null };
+    textEditorRefreshed: { ntxId?: string | null, editor: CKTextEditor };
     hoistedNoteChanged: {
         noteId: string;
         ntxId: string | null;
@@ -483,14 +487,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[];
     };
@@ -498,6 +497,10 @@ type EventMappings = {
         noteIds: string[];
     };
     refreshData: { ntxId: string | null | undefined };
+    contentSafeMarginChanged: {
+        top: number;
+        noteContext: NoteContext;
+    }
 };
 
 export type EventListener<T extends EventNames> = {
@@ -665,6 +668,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);

apps/client/src/components/entrypoints.ts

@@ -159,6 +159,16 @@ export default class Entrypoints extends Component {
         this.openInWindowCommand({ notePath: "", hoistedNoteId: "root" });
     }
 
+    async openTodayNoteCommand() {
+        const todayNote = await dateNoteService.getTodayNote();
+        if (!todayNote) {
+            console.warn("Missing today note.");
+            return;
+        }
+
+        await appContext.tabManager.openInSameTab(todayNote.noteId);
+    }
+
     async runActiveNoteCommand() {
         const noteContext = appContext.tabManager.getActiveContext();
         if (!noteContext) {

apps/client/src/components/note_context.ts

@@ -9,10 +9,10 @@ import hoistedNoteService from "../services/hoisted_note.js";
 import options from "../services/options.js";
 import type { ViewScope } from "../services/link.js";
 import type FNote from "../entities/fnote.js";
-import type TypeWidget from "../widgets/type_widgets/type_widget.js";
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
 import type CodeMirror from "@triliumnext/codemirror";
 import { closeActiveDialog } from "../services/dialog.js";
+import { ReactWrappedWidget } from "../widgets/basic_widget.js";
 
 export interface SetNoteOpts {
     triggerSwitchEvent?: unknown;
@@ -321,15 +321,21 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
             return false;
         }
 
+        if (note.type === "search") {
+            return false;
+        }
+
         if (!["default", "contextual-help"].includes(this.viewScope?.viewMode ?? "")) {
             return false;
         }
 
         // Collections must always display a note list, even if no children.
+        if (note.type === "book") {
             const viewType = note.getLabelValue("viewType") ?? "grid";
             if (!["list", "grid"].includes(viewType)) {
                 return true;
             }
+        }
 
         if (!note.hasChildren()) {
             return false;
@@ -395,7 +401,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,4 +444,22 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     }
 }
 
+export function openInCurrentNoteContext(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, notePath: string, viewScope?: ViewScope) {
+    const ntxId = $(evt?.target as Element)
+        .closest("[data-ntx-id]")
+        .attr("data-ntx-id");
+
+    const noteContext = ntxId ? appContext.tabManager.getNoteContextById(ntxId) : appContext.tabManager.getActiveContext();
+
+    if (noteContext) {
+        noteContext.setNote(notePath, { viewScope }).then(() => {
+            if (noteContext !== appContext.tabManager.getActiveContext()) {
+                appContext.tabManager.activateNoteContext(noteContext.ntxId);
+            }
+        });
+    } else {
+        appContext.tabManager.openContextWithNote(notePath, { viewScope, activate: true });
+    }
+}
+
 export default NoteContext;

apps/client/src/components/root_command_executor.ts

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

apps/client/src/components/tab_manager.ts

@@ -165,7 +165,7 @@ export default class TabManager extends Component {
         const activeNoteContext = this.getActiveContext();
         this.updateDocumentTitle(activeNoteContext);
 
-        this.triggerEvent("activeNoteChanged", {}); // 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

@@ -58,6 +58,7 @@ function initOnElectron() {
 
     initDarkOrLightMode(style);
     initTransparencyEffects(style, currentWindow);
+    initFullScreenDetection(currentWindow);
 
     if (options.get("nativeTitleBarVisible") !== "true") {
         initTitleBarButtons(style, currentWindow);
@@ -87,6 +88,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,12 +1,12 @@
 import server from "../services/server.js";
 import noteAttributeCache from "../services/note_attribute_cache.js";
-import ws from "../services/ws.js";
 import protectedSessionHolder from "../services/protected_session_holder.js";
 import cssClassManager from "../services/css_class_manager.js";
 import type { Froca } from "../services/froca-interface.js";
 import type FAttachment from "./fattachment.js";
 import type { default as FAttribute, AttributeType } from "./fattribute.js";
 import utils from "../services/utils.js";
+import search from "../services/search.js";
 
 const LABEL = "label";
 const RELATION = "relation";
@@ -240,7 +240,7 @@ export default class FNote {
 
             const aNote = this.froca.getNoteFromCache(aNoteId);
 
-            if (aNote.isArchived || aNote.isHiddenCompletely()) {
+            if (!aNote || aNote.isArchived || aNote.isHiddenCompletely()) {
                 return 1;
             }
 
@@ -256,6 +256,23 @@ export default class FNote {
         return this.children;
     }
 
+    async getChildNoteIdsWithArchiveFiltering(includeArchived = false) {
+        const isHiddenNote = this.noteId.startsWith("_");
+        const isSearchNote = this.type === "search";
+        if (!includeArchived && !isHiddenNote && !isSearchNote) {
+            const unorderedIds = new Set(await search.searchForNoteIds(`note.parents.noteId="${this.noteId}" #!archived`));
+            const results: string[] = [];
+            for (const id of this.children) {
+                if (unorderedIds.has(id)) {
+                    results.push(id);
+                }
+            }
+            return results;
+        } else {
+            return this.children;
+        }
+    }
+
     async getSubtreeNoteIds(includeArchived = false) {
         let noteIds: (string | string[])[] = [];
         for (const child of await this.getChildNotes()) {
@@ -418,7 +435,7 @@ export default class FNote {
         return notePaths;
     }
 
-    getSortedNotePathRecords(hoistedNoteId = "root"): NotePathRecord[] {
+    getSortedNotePathRecords(hoistedNoteId = "root", activeNotePath: string | null = null): NotePathRecord[] {
         const isHoistedRoot = hoistedNoteId === "root";
 
         const notePaths: NotePathRecord[] = this.getAllNotePaths().map((path) => ({
@@ -429,7 +446,23 @@ export default class FNote {
             isHidden: path.includes("_hidden")
         }));
 
+        // Calculate the length of the prefix match between two arrays
+        const prefixMatchLength = (path: string[], target: string[]) => {
+            const diffIndex = path.findIndex((seg, i) => seg !== target[i]);
+            return diffIndex === -1 ? Math.min(path.length, target.length) : diffIndex;
+        };
+
         notePaths.sort((a, b) => {
+            if (activeNotePath) {
+                const activeSegments = activeNotePath.split('/');
+                const aOverlap = prefixMatchLength(a.notePath, activeSegments);
+                const bOverlap = prefixMatchLength(b.notePath, activeSegments);
+                // Paths with more matching prefix segments are prioritized
+                // when the match count is equal, other criteria are used for sorting
+                if (bOverlap !== aOverlap) {
+                    return bOverlap - aOverlap;
+                }
+            }
             if (a.isInHoistedSubTree !== b.isInHoistedSubTree) {
                 return a.isInHoistedSubTree ? -1 : 1;
             } else if (a.isArchived !== b.isArchived) {
@@ -450,10 +483,11 @@ export default class FNote {
      * Returns the note path considered to be the "best"
      *
      * @param {string} [hoistedNoteId='root']
+     * @param {string|null} [activeNotePath=null]
      * @return {string[]} array of noteIds constituting the particular note path
      */
-    getBestNotePath(hoistedNoteId = "root") {
-        return this.getSortedNotePathRecords(hoistedNoteId)[0]?.notePath;
+    getBestNotePath(hoistedNoteId = "root", activeNotePath: string | null = null) {
+        return this.getSortedNotePathRecords(hoistedNoteId, activeNotePath)[0]?.notePath;
     }
 
     /**
@@ -586,7 +620,7 @@ export default class FNote {
         let childBranches = this.getChildBranches();
 
         if (!childBranches) {
-            ws.logError(`No children for '${this.noteId}'. This shouldn't happen.`);
+            console.error(`No children for '${this.noteId}'. This shouldn't happen.`);
             return [];
         }
 
@@ -772,6 +806,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));
+        } else {
+            return this.getLabelValue(nameWithPrefix);
+        }
+    }
+
     /**
      * @param name - relation name
      * @returns relation value if relation exists, null otherwise
@@ -823,8 +867,7 @@ export default class FNote {
             return [];
         }
 
-        const promotedAttrs = this.getAttributes()
-            .filter((attr) => attr.isDefinition())
+        const promotedAttrs = this.getAttributeDefinitions()
             .filter((attr) => {
                 const def = attr.getDefinition();
 
@@ -844,6 +887,11 @@ export default class FNote {
         return promotedAttrs;
     }
 
+    getAttributeDefinitions() {
+        return this.getAttributes()
+            .filter((attr) => attr.isDefinition());
+    }
+
     hasAncestor(ancestorNoteId: string, followTemplates = false, visitedNoteIds: Set<string> | null = null) {
         if (this.noteId === ancestorNoteId) {
             return true;

apps/client/src/layouts/desktop_layout.tsx

@@ -1,47 +1,50 @@
-import FlexContainer from "../widgets/containers/flex_container.js";
-import TabRowWidget from "../widgets/tab_row.js";
-import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
-import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteTitleWidget from "../widgets/note_title.jsx";
-import NoteDetailWidget from "../widgets/note_detail.js";
-import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
-import NoteIconWidget from "../widgets/note_icon.jsx";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
-import RootContainer from "../widgets/containers/root_container.js";
-import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
-import SpacerWidget from "../widgets/spacer.js";
-import QuickSearchWidget from "../widgets/quick_search.js";
-import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
-import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
-import RightPaneContainer from "../widgets/containers/right_pane_container.js";
-import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import FindWidget from "../widgets/find.js";
-import TocWidget from "../widgets/toc.js";
-import HighlightsListWidget from "../widgets/highlights_list.js";
-import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
-import LauncherContainer from "../widgets/containers/launcher_container.js";
-import MovePaneButton from "../widgets/buttons/move_pane_button.js";
-import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
-import ScrollPadding from "../widgets/scroll_padding.js";
-import options from "../services/options.js";
-import utils from "../services/utils.js";
-import type { AppContext } from "../components/app_context.js";
-import type { WidgetsByParent } from "../services/bundle.js";
 import { applyModals } from "./layout_commons.js";
-import Ribbon from "../widgets/ribbon/Ribbon.jsx";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
 import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
-import SearchResult from "../widgets/search_result.jsx";
+import 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 NoteIconWidget from "../widgets/note_icon.jsx";
+import NoteList from "../widgets/collections/NoteList.jsx";
+import NoteTitleWidget from "../widgets/note_title.jsx";
+import NoteTreeWidget from "../widgets/note_tree.js";
+import NoteWrapperWidget from "../widgets/note_wrapper.js";
+import options from "../services/options.js";
+import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
+import QuickSearchWidget from "../widgets/quick_search.js";
+import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
+import Ribbon from "../widgets/ribbon/Ribbon.jsx";
+import RightPaneContainer from "../widgets/containers/right_pane_container.js";
+import RootContainer from "../widgets/containers/root_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import ScrollPadding from "../widgets/scroll_padding.js";
+import SearchResult from "../widgets/search_result.jsx";
+import SharedInfo from "../widgets/shared_info.jsx";
+import 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 TabRowWidget from "../widgets/tab_row.js";
 import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
-import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
-import ApiLog from "../widgets/api_log.jsx";
-import CloseZenModeButton from "../widgets/close_zen_button.jsx";
-import SharedInfo from "../widgets/shared_info.jsx";
-import NoteList from "../widgets/collections/NoteList.jsx";
+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 NoteDetail from "../widgets/NoteDetail.jsx";
+import RightPanelWidget from "../widgets/sidebar/RightPanelWidget.jsx";
+import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
 
 export default class DesktopLayout {
 
@@ -129,16 +132,19 @@ export default class DesktopLayout {
                                                                 .child(<CreatePaneButton />)
                                                         )
                                                         .child(<Ribbon />)
-                                                        .child(<SharedInfo />)
                                                         .child(new WatchedFileUpdateStatusWidget())
                                                         .child(<FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
                                                         .child(
                                                             new ScrollingContainer()
                                                                 .filling()
-                                                                .child(new PromotedAttributesWidget())
+                                                                .child(new ContentHeader()
+                                                                    .child(<ReadOnlyNoteInfoBar />)
+                                                                    .child(<SharedInfo />)
+                                                                )
+                                                                .child(<PromotedAttributes />)
                                                                 .child(<SqlTableSchemas />)
-                                                                .child(new NoteDetailWidget())
-                                                                .child(<NoteList />)
+                                                                .child(<NoteDetail />)
+                                                                .child(<NoteList media="screen" />)
                                                                 .child(<SearchResult />)
                                                                 .child(<SqlResults />)
                                                                 .child(<ScrollPadding />)

apps/client/src/layouts/layout_commons.tsx

@@ -22,15 +22,8 @@ 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 { PopupEditorFormattingToolbar } from "../widgets/ribbon/FormattingToolbar.js";
-import NoteList from "../widgets/collections/NoteList.jsx";
+import PopupEditorDialog from "../widgets/dialogs/PopupEditor.jsx";
 
 export function applyModals(rootContainer: RootContainer) {
     rootContainer
@@ -56,16 +49,6 @@ 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(<PopupEditorFormattingToolbar />)
-                .child(new PromotedAttributesWidget())
-                .child(new NoteDetailWidget())
-                .child(<NoteList displayOnlyCollections />))
+        .child(<PopupEditorDialog />)
         .child(<CallToActionDialog />);
 }

apps/client/src/layouts/mobile_layout.tsx

@@ -1,32 +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 NoteTitleWidget from "../widgets/note_title.js";
-import NoteDetailWidget from "../widgets/note_detail.js";
-import QuickSearchWidget from "../widgets/quick_search.js";
-import NoteTreeWidget from "../widgets/note_tree.js";
-import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import LauncherContainer from "../widgets/containers/launcher_container.js";
-import RootContainer from "../widgets/containers/root_container.js";
-import SharedInfoWidget from "../widgets/shared_info.js";
-import PromotedAttributesWidget from "../widgets/promoted_attributes.js";
-import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
-import type AppContext from "../components/app_context.js";
-import TabRowWidget from "../widgets/tab_row.js";
-import MobileEditorToolbar from "../widgets/type_widgets/ckeditor/mobile_editor_toolbar.js";
-import { applyModals } from "./layout_commons.js";
-import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
-import { useNoteContext } from "../widgets/react/hooks.jsx";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
-import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
-import CloseZenModeButton from "../widgets/close_zen_button.js";
-import NoteWrapperWidget from "../widgets/note_wrapper.js";
 import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import NoteList from "../widgets/collections/NoteList.jsx";
+import NoteTitleWidget from "../widgets/note_title.js";
+import ContentHeader from "../widgets/containers/content_header.js";
+import NoteTreeWidget from "../widgets/note_tree.js";
+import NoteWrapperWidget from "../widgets/note_wrapper.js";
+import QuickSearchWidget from "../widgets/quick_search.js";
+import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
+import RootContainer from "../widgets/containers/root_container.js";
+import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
+import ScrollingContainer from "../widgets/containers/scrolling_container.js";
+import SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
+import SearchResult from "../widgets/search_result.jsx";
+import SharedInfoWidget from "../widgets/shared_info.js";
+import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
+import StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
+import TabRowWidget from "../widgets/tab_row.js";
+import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
+import type AppContext from "../components/app_context.js";
+import NoteDetail from "../widgets/NoteDetail.jsx";
+import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
+import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
+import SplitNoteContainer from "../widgets/containers/split_note_container.js";
 
 const MOBILE_CSS = `
 <style>
+span.keyboard-shortcut,
 kbd {
     display: none;
 }
@@ -136,6 +143,7 @@ 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 SplitNoteContainer(() =>
                                     new NoteWrapperWidget()
                                         .child(
                                             new FlexContainer("row")
@@ -146,21 +154,27 @@ export default class MobileLayout {
                                                 .child(<NoteTitleWidget />)
                                                 .child(<MobileDetailMenu />)
                                         )
-                                    .child(<SharedInfoWidget />)
                                         .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
-                                    .child(new PromotedAttributesWidget())
+                                        .child(<PromotedAttributes />)
                                         .child(
                                             new ScrollingContainer()
                                                 .filling()
                                                 .contentSized()
-                                            .child(new NoteDetailWidget())
-                                            .child(<NoteList />)
+                                                .child(new ContentHeader()
+                                                    .child(<ReadOnlyNoteInfoBar />)
+                                                    .child(<SharedInfoWidget />)
+                                                )
+                                                .child(<NoteDetail />)
+                                                .child(<NoteList media="screen" />)
+                                                .child(<StandaloneRibbonAdapter component={SearchDefinitionTab} />)
+                                                .child(<SearchResult />)
                                                 .child(<FilePropertiesWrapper />)
                                         )
                                         .child(<MobileEditorToolbar />)
                                 )
                             )
                     )
+            )
             .child(
                 new FlexContainer("column")
                     .contentSized()

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,13 +203,47 @@ 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 {
+                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>));
+                }
+
+                // After adding a menu item, if the previous item was a separator or header,
+                // reset the group so that the next item will be appended directly to the parent.
+                if (shouldResetGroup) {
+                    $group = $parent;
+                    shouldResetGroup = false;
+                };
+            }
+
+            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) {
@@ -257,8 +299,6 @@ class ContextMenu {
             // 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;
@@ -272,6 +312,11 @@ class ContextMenu {
                     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);
                 }
@@ -283,16 +328,6 @@ class ContextMenu {
                 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");
         }
@@ -311,17 +346,7 @@ class ContextMenu {
 
             $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) {
-                    $group = $parent;
-                    shouldResetGroup = false;
-                };
-            }
-        }
+        return $item;
     }
 
     async hide() {

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

@@ -2,26 +2,32 @@ import { t } from "../services/i18n.js";
 import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
 import appContext, { type CommandNames } from "../components/app_context.js";
 import type { ViewScope } from "../services/link.js";
+import utils, { isMobile } from "../services/utils.js";
+import { getClosestNtxId } from "../widgets/widget_utils.js";
+import type { LeafletMouseEvent } from "leaflet";
 
 function openContextMenu(notePath: string, e: ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
     contextMenu.show({
         x: e.pageX,
         y: e.pageY,
-        items: getItems(),
-        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;
     }
@@ -29,15 +35,8 @@ function handleLinkContextMenuItem(command: string | undefined, notePath: string
     if (command === "openNoteInNewTab") {
         appContext.tabManager.openContextWithNote(notePath, { hoistedNoteId, viewScope });
     } 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;
         appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath, hoistedNoteId, viewScope });
     } else if (command === "openNoteInNewWindow") {
         appContext.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
@@ -46,6 +45,18 @@ function handleLinkContextMenuItem(command: string | undefined, notePath: string
     }
 }
 
+function getNtxId(e: ContextMenuEvent | LeafletMouseEvent) {
+    if (utils.isDesktop()) {
+        const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
+        if (!subContexts) return null;
+        return subContexts[subContexts.length - 1].ntxId;
+    } else if (e.target instanceof HTMLElement) {
+        return getClosestNtxId(e.target);
+    } else {
+        return null;
+    }
+}
+
 export default {
     getItems,
     handleLinkContextMenuItem,

apps/client/src/menus/tree_context_menu.ts

@@ -1,3 +1,4 @@
+import NoteColorPicker from "./custom-items/NoteColorPicker.jsx";
 import treeService from "../services/tree.js";
 import froca from "../services/froca.js";
 import clipboard from "../services/clipboard.js";
@@ -137,9 +138,15 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
                         command: "editBranchPrefix",
                         keyboardShortcut: "editBranchPrefix",
                         uiIcon: "bx bx-rename",
-                        enabled: isNotRoot && parentNotSearch && noSelectedNotes && notOptionsOrHelp
+                        enabled: isNotRoot && parentNotSearch && notOptionsOrHelp
+                    },
+                    {
+                        title:
+                        t("tree-context-menu.convert-to-attachment"),
+                        command: "convertNoteToAttachment",
+                        uiIcon: "bx bx-paperclip",
+                        enabled: isNotRoot && !isHoisted && notOptionsOrHelp && selectedNotes.some(note => note.isEligibleForConversionToAttachment())
                     },
-                    { title: t("tree-context-menu.convert-to-attachment"), command: "convertNoteToAttachment", uiIcon: "bx bx-paperclip", enabled: isNotRoot && !isHoisted && notOptionsOrHelp },
 
                     { kind: "separator" },
 
@@ -243,6 +250,15 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
 
             { 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 },
 
             { title: t("tree-context-menu.export"), command: "exportNote", uiIcon: "bx bx-export", enabled: notSearch && noSelectedNotes && notOptionsOrHelp },

apps/client/src/print.css

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

apps/client/src/print.tsx

@@ -0,0 +1,151 @@
+import FNote from "./entities/fnote";
+import { render } from "preact";
+import { CustomNoteList, useNoteViewType } from "./widgets/collections/NoteList";
+import { useCallback, useLayoutEffect, useRef } from "preact/hooks";
+import content_renderer from "./services/content_renderer";
+import { dynamicRequire, isElectron } from "./services/utils";
+import { applyInlineMermaid } from "./services/content_renderer_text";
+
+interface RendererProps {
+    note: FNote;
+    onReady: () => void;
+    onProgressChanged?: (progress: number) => void;
+}
+
+async function main() {
+    const notePath = window.location.hash.substring(1);
+    const noteId = notePath.split("/").at(-1);
+    if (!noteId) return;
+
+    await import("./print.css");
+    const froca = (await import("./services/froca")).default;
+    const note = await froca.getNote(noteId);
+
+    render(<App note={note} noteId={noteId} />, document.body);
+}
+
+function App({ note, noteId }: { note: FNote | null | undefined, noteId: string }) {
+    const sentReadyEvent = useRef(false);
+    const 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(() => {
+        if (sentReadyEvent.current) return;
+        window.dispatchEvent(new Event("note-ready"));
+        window._noteReady = true;
+        sentReadyEvent.current = true;
+    }, []);
+    const props: RendererProps | undefined | null = note && { note, onReady, onProgressChanged };
+
+    if (!note || !props) return <Error404 noteId={noteId} />
+
+    useLayoutEffect(() => {
+        document.body.dataset.noteType = note.type;
+    }, [ note ]);
+
+    return (
+        <>
+            {note.type === "book"
+            ? <CollectionRenderer {...props} />
+            : <SingleNoteRenderer {...props} />
+            }
+        </>
+    );
+}
+
+function SingleNoteRenderer({ note, onReady }: RendererProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+
+    useLayoutEffect(() => {
+        async function load() {
+            if (note.type === "text") {
+                await import("@triliumnext/ckeditor5/src/theme/ck-content.css");
+            }
+            const { $renderedContent } = await content_renderer.getRenderedContent(note, { noChildrenList: true });
+            const container = containerRef.current!;
+            container.replaceChildren(...$renderedContent);
+
+            // Wait for all images to load.
+            const images = Array.from(container.querySelectorAll("img"));
+            await Promise.all(
+                images.map(img => {
+                    if (img.complete) return Promise.resolve();
+                    return new Promise<void>(resolve => {
+                        img.addEventListener("load", () => resolve(), { once: true });
+                        img.addEventListener("error", () => resolve(), { once: true });
+                    });
+                })
+            );
+
+            // Initialize mermaid.
+            if (note.type === "text") {
+                await applyInlineMermaid(container);
+            }
+
+            // Check custom CSS.
+            await loadCustomCss(note);
+        }
+
+        load().then(() => requestAnimationFrame(onReady))
+    }, [ note ]);
+
+    return <>
+        <h1>{note.title}</h1>
+        <main ref={containerRef} />
+    </>;
+}
+
+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 () => {
+            await loadCustomCss(note);
+            onReady();
+        }}
+        onProgressChanged={onProgressChanged}
+    />;
+}
+
+function Error404({ noteId }: { noteId: string }) {
+    return (
+        <main>
+            <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>[] = [];
+
+    for (const printCssNote of printCssNotes) {
+        if (!printCssNote || (printCssNote.type !== "code" && printCssNote.mime !== "text/css")) continue;
+
+        const linkEl = document.createElement("link");
+        linkEl.href = `/api/notes/${printCssNote.noteId}/download`;
+        linkEl.rel = "stylesheet";
+
+        const promise = $.Deferred();
+        loadPromises.push(promise.promise());
+        linkEl.onload = () => promise.resolve();
+
+        document.head.appendChild(linkEl);
+    }
+
+    await Promise.allSettled(loadPromises);
+}
+
+main();

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.ts

@@ -22,6 +22,15 @@ export async function setLabel(noteId: string, name: string, value: string = "",
     });
 }
 
+export async function setRelation(noteId: string, name: string, value: string = "", isInheritable = false) {
+    await server.put(`notes/${noteId}/set-attribute`, {
+        type: "relation",
+        name: name,
+        value: value,
+        isInheritable
+    });
+}
+
 async function removeAttributeById(noteId: string, attributeId: string) {
     await server.remove(`notes/${noteId}/attributes/${attributeId}`);
 }
@@ -51,6 +60,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 +126,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 +140,10 @@ function isAffecting(attrRow: AttributeRow, affectedNote: FNote | null | undefin
 export default {
     addLabel,
     setLabel,
+    setRelation,
     setAttribute,
     removeAttributeById,
     removeOwnedLabelByName,
+    removeOwnedRelationByName,
     isAffecting
 };

apps/client/src/services/branches.ts

@@ -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[]) {

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

@@ -27,7 +27,7 @@ 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 async function executeBundle(bundle: Bundle, originEntity?: Entity | null, $container?: JQuery<HTMLElement>) {
     const apiContext = await ScriptContext(bundle.noteId, bundle.allNoteIds, originEntity, $container);
 
     try {

apps/client/src/services/content_renderer.ts

@@ -2,32 +2,31 @@ import renderService from "./render.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 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 { applySingleBlockSyntaxHighlight } 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";
+import renderText from "./content_renderer_text.js";
 
 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;
 }
 
 const CODE_MIME_TYPES = new Set(["application/json"]);
 
-async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: Options = {}) {
+export async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: RenderOptions = {}) {
 
     options = Object.assign(
         {
@@ -42,7 +41,7 @@ async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FA
     const $renderedContent = $('<div class="rendered-content">');
 
     if (type === "text" || type === "book") {
-        await renderText(entity, $renderedContent);
+        await renderText(entity, $renderedContent, options);
     } else if (type === "code") {
         await renderCode(entity, $renderedContent);
     } else if (["image", "canvas", "mindMap"].includes(type)) {
@@ -114,32 +113,6 @@ async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FA
     };
 }
 
-async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>) {
-    // 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) {
-        await renderChildrenList($renderedContent, note);
-    }
-}
-
 /**
  * Renders a code note, by displaying its content and applying syntax highlighting based on the selected MIME type.
  */
@@ -161,7 +134,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;
@@ -303,40 +276,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.ts

@@ -0,0 +1,126 @@
+import { formatCodeBlocks } from "./syntax_highlight.js";
+import { getMermaidConfig } from "./mermaid.js";
+import { renderMathInElement } from "./math.js";
+import FNote from "../entities/fnote.js";
+import FAttachment from "../entities/fattachment.js";
+import tree from "./tree.js";
+import froca from "./froca.js";
+import link from "./link.js";
+import { isHtmlEmpty } from "./utils.js";
+import { default as content_renderer, type RenderOptions } from "./content_renderer.js";
+
+export default async function renderText(note: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: RenderOptions = {}) {
+    // entity must be FNote
+    const blob = await note.getBlob();
+
+    if (blob && !isHtmlEmpty(blob.content)) {
+        $renderedContent.append($('<div class="ck-content">').html(blob.content));
+        await renderIncludedNotes($renderedContent[0]);
+
+        if ($renderedContent.find("span.math-tex").length > 0) {
+            renderMathInElement($renderedContent[0], { trust: true });
+        }
+
+        const getNoteIdFromLink = (el: HTMLElement) => tree.getNoteIdFromUrl($(el).attr("href") || "");
+        const referenceLinks = $renderedContent.find("a.reference-link");
+        const noteIdsToPrefetch = referenceLinks.map((i, el) => getNoteIdFromLink(el));
+        await froca.getNotes(noteIdsToPrefetch);
+
+        for (const el of referenceLinks) {
+            await link.loadReferenceLinkTitle($(el));
+        }
+
+        await rewriteMermaidDiagramsInContainer($renderedContent[0] as HTMLDivElement);
+        await formatCodeBlocks($renderedContent);
+    } else if (note instanceof FNote && !options.noChildrenList) {
+        await renderChildrenList($renderedContent, note);
+    }
+}
+
+async function renderIncludedNotes(contentEl: HTMLElement) {
+    // 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;
+        }
+
+        const renderedContent = (await content_renderer.getRenderedContent(note)).$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) {
+    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 link.createLink(`${note.noteId}/${childNote.noteId}`, {
+                showTooltip: false,
+                showNoteIcon: true
+            })
+        );
+
+        $renderedContent.append("<br>");
+    }
+}

apps/client/src/services/css_class_manager.ts

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

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

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

@@ -11,15 +11,14 @@ 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 BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
 import SpacedUpdate from "./spaced_update.js";
 import shortcutService from "./shortcuts.js";
 import dialogService from "./dialog.js";
 import type FNote from "../entities/fnote.js";
 import { t } from "./i18n.js";
-import dayjs from "dayjs";
+import { dayjs } from "@triliumnext/commons";
 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";
 
@@ -317,7 +316,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
      */

apps/client/src/services/frontend_script_entrypoint.ts

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

apps/client/src/services/glob.ts

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

apps/client/src/services/i18n.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/in_app_help.ts

@@ -10,7 +10,7 @@ export const byNoteType: Record<Exclude<NoteType, "book">, string | null> = {
     file: null,
     image: null,
     launcher: null,
-    mermaid: null,
+    mermaid: "s1aBHPd79XYj",
     mindMap: null,
     noteMap: null,
     relationMap: null,
@@ -27,7 +27,8 @@ export const byBookType: Record<ViewTypeOptions, string | null> = {
     calendar: "xWbu3jpNWapp",
     table: "2FvYrpmOXm29",
     geoMap: "81SGnPGMk7Xc",
-    board: "CtBQqbwXDx1w"
+    board: "CtBQqbwXDx1w",
+    presentation: null
 };
 
 export function getHelpUrlForNote(note: FNote | null | undefined) {

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,16 +28,26 @@ 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) => {
     for (const action of actions) {
         for (const shortcut of action.effectiveShortcuts ?? []) {

apps/client/src/services/link.ts

@@ -4,6 +4,7 @@ import appContext, { type NoteCommandData } from "../components/app_context.js";
 import froca from "./froca.js";
 import utils from "./utils.js";
 import { ALLOWED_PROTOCOLS } from "@triliumnext/commons";
+import { openInCurrentNoteContext } from "../components/note_context.js";
 
 function getNotePathFromUrl(url: string) {
     const notePathMatch = /#(root[A-Za-z0-9_/]*)$/.exec(url);
@@ -149,11 +150,16 @@ async function createLink(notePath: string | undefined, options: CreateLinkOptio
     $container.append($noteLink);
 
     if (showNotePath) {
+        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);
+            pathSegments = await treeService.getNotePathTitleComponents(resolvedPath);
+        }
 
         if (pathSegments) {
             if (pathSegments.length) {
@@ -279,7 +285,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;
     }
@@ -301,7 +307,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;
 
@@ -316,40 +323,28 @@ function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent
                 viewScope
             });
         } else if (isLeftClick) {
-            const ntxId = $(evt?.target as any)
-                .closest("[data-ntx-id]")
-                .attr("data-ntx-id");
-
-            const noteContext = ntxId ? appContext.tabManager.getNoteContextById(ntxId) : appContext.tabManager.getActiveContext();
-
-            if (noteContext) {
-                noteContext.setNote(notePath, { viewScope }).then(() => {
-                    if (noteContext !== appContext.tabManager.getActiveContext()) {
-                        appContext.tabManager.activateNoteContext(noteContext.ntxId);
-                    }
-                });
-            } else {
-                appContext.tabManager.openContextWithNote(notePath, { viewScope, activate: true });
-            }
+            openInCurrentNoteContext(evt, notePath, viewScope);
         }
     } else if (hrefLink) {
         const withinEditLink = $link?.hasClass("ck-link-actions__preview");
         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 + ":"))) {
+                    if ( utils.isElectron()) {
+                        const electron = utils.dynamicRequire("electron");
+                        electron.shell.openExternal(hrefLink);
+                    } else {
                         window.open(hrefLink, "_blank");
                     }
                 }
             }
         }
+    }
 
     return true;
 }
@@ -472,6 +467,7 @@ function getReferenceLinkTitleSync(href: string) {
     }
 }
 
+if (glob.device !== "print") {
     // TODO: Check why the event is not supported.
     //@ts-ignore
     $(document).on("click", "a", goToLink);
@@ -481,18 +477,9 @@ $(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();
-
-    const $link = $(e.target).closest("a");
-
-    const address = $link.attr("href");
-
-    if (address && address.startsWith("http")) {
-        window.open(address, "_blank");
-    }
-});
+    // TODO: Check why the event is not supported.
+    //@ts-ignore
+    $(document).on("dblclick", "a", goToLink);
 
     $(document).on("mousedown", "a", (e) => {
         if (e.which === 2) {
@@ -503,6 +490,7 @@ $(document).on("mousedown", "a", (e) => {
             return false;
         }
     });
+}
 
 export default {
     getNotePathFromUrl,

apps/client/src/services/load_results.ts

@@ -1,11 +1,21 @@
-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`/

apps/client/src/services/note_types.ts

@@ -168,7 +168,8 @@ async function getBuiltInTemplates(title: string | null, command: TreeCommandNam
     }
 
     for (const templateNote of childNotes) {
-        if (templateNote.hasLabel("collection") !== filterCollections) {
+        if (templateNote.hasLabel("collection") !== filterCollections ||
+            !templateNote.hasLabel("template")) {
             continue;
         }
 

apps/client/src/services/open.ts

@@ -1,4 +1,5 @@
 import utils from "./utils.js";
+import options from "./options.js";
 import server from "./server.js";
 
 type ExecFunction = (command: string, cb: (err: string, stdout: string, stderror: string) => void) => void;
@@ -126,7 +127,7 @@ 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}`;
@@ -171,6 +172,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 +214,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/resizer.ts

@@ -1,5 +1,5 @@
 import options from "./options.js";
-import Split from "split.js"
+import Split from "@triliumnext/split.js";
 
 export const DEFAULT_GUTTER_SIZE = 5;
 
@@ -46,6 +46,7 @@ function setupLeftPaneResizer(leftPaneVisible: boolean) {
                 sizes: [leftPaneWidth, restPaneWidth],
                 gutterSize: DEFAULT_GUTTER_SIZE,
                 minSize: [150, 300],
+                rtl: glob.isRtl,
                 onDragEnd: (sizes) => {
                     leftPaneWidth = Math.round(sizes[0]);
                     options.save("leftPaneWidth", Math.round(sizes[0]));
@@ -79,6 +80,7 @@ function setupRightPaneResizer() {
             sizes: [100 - rightPaneWidth, rightPaneWidth],
             gutterSize: DEFAULT_GUTTER_SIZE,
             minSize: [300, 180],
+            rtl: glob.isRtl,
             onDragEnd: (sizes) => {
                 rightPaneWidth = Math.round(sizes[1]);
                 options.save("rightPaneWidth", Math.round(sizes[1]));
@@ -154,6 +156,7 @@ function createSplitInstance(targetNtxIds: string[]) {
         const splitPanels = [...splitNoteContainer.querySelectorAll<HTMLElement>(':scope > .note-split')]
             .filter(el => targetNtxIds.includes(el.getAttribute('data-ntx-id') ?? ""));
         const splitInstance = Split(splitPanels, {
+            rtl: glob.isRtl,
             gutterSize: DEFAULT_GUTTER_SIZE,
             minSize: 150,
         });

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

@@ -159,7 +159,7 @@ describe("shortcuts", () => {
             expect(matchesShortcut(event, "Shift+F1")).toBeTruthy();
 
             // Special keys
-            for (const keyCode of [ "Delete", "Enter" ]) {
+            for (const keyCode of [ "Delete", "Enter", "NumpadEnter" ]) {
                 event = createKeyboardEvent({ key: keyCode, code: keyCode });
                 expect(matchesShortcut(event, keyCode), `Key ${keyCode}`).toBeTruthy();
             }

apps/client/src/services/shortcuts.ts

@@ -3,7 +3,7 @@ import utils from "./utils.js";
 type ElementType = HTMLElement | Document;
 type Handler = (e: KeyboardEvent) => void;
 
-interface ShortcutBinding {
+export interface ShortcutBinding {
     element: HTMLElement | Document;
     shortcut: string;
     handler: Handler;
@@ -46,6 +46,7 @@ for (let i = 1; i <= 19; i++) {
 const KEYCODES_WITH_NO_MODIFIER = new Set([
     "Delete",
     "Enter",
+    "NumpadEnter",
     ...functionKeyCodes
 ]);
 
@@ -126,10 +127,20 @@ 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));
+    }
+    binding.element.removeEventListener("keydown", binding.listener);
+}
+
 function removeNamespaceBindings(namespace: string) {
     const bindings = activeBindings.get(namespace);
     if (bindings) {

apps/client/src/services/syntax_highlight.ts

@@ -24,7 +24,9 @@ export async function formatCodeBlocks($container: JQuery<HTMLElement>) {
             continue;
         }
 
+        if (glob.device !== "print") {
             applyCopyToClipboardButton($(codeBlock));
+        }
 
         if (syntaxHighlightingEnabled) {
             applySingleBlockSyntaxHighlight($(codeBlock), normalizedMimeType);
@@ -61,7 +63,11 @@ export async function applySingleBlockSyntaxHighlight($codeBlock: JQuery<HTMLEle
         highlightedText = highlightAuto(text);
     } else if (normalizedMimeType) {
         await ensureMimeTypesForHighlighting(normalizedMimeType);
+        try {
             highlightedText = highlight(text, { language: normalizedMimeType });
+        } catch (e) {
+            console.warn("Unable to apply syntax highlight.", e);
+        }
     }
 
     if (highlightedText) {
@@ -76,7 +82,7 @@ export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
 
     // Load theme.
     const currentThemeName = String(options.get("codeBlockTheme"));
-    loadHighlightingTheme(currentThemeName);
+    await loadHighlightingTheme(currentThemeName);
 
     // Load mime types.
     let mimeTypes: MimeType[];
@@ -98,17 +104,16 @@ export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
     highlightingLoaded = true;
 }
 
-export function loadHighlightingTheme(themeName: string) {
+export async function loadHighlightingTheme(themeName: string) {
     const themePrefix = "default:";
     let theme: Theme | null = null;
-    if (themeName.includes(themePrefix)) {
+    if (glob.device === "print") {
+        theme = Themes.vs;
+    } else if (themeName.includes(themePrefix)) {
         theme = Themes[themeName.substring(themePrefix.length)];
     }
-    if (!theme) {
-        theme = Themes.default;
-    }
 
-    loadTheme(theme);
+    await loadTheme(theme ?? Themes.default);
 }
 
 /**

apps/client/src/services/toast.ts

@@ -8,46 +8,50 @@ export interface ToastOptions {
     delay?: number;
     autohide?: boolean;
     closeAfter?: number;
+    progress?: number;
 }
 
-function toast(options: ToastOptions) {
-    const $toast = $(options.title
+function toast({ title, icon, message, id, delay, autohide, progress }: ToastOptions) {
+    const $toast = $(title
         ? `\
             <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                 <div class="toast-header">
                     <strong class="me-auto">
-                        <span class="bx bx-${options.icon}"></span>
+                        <span class="bx bx-${icon}"></span>
                         <span class="toast-title"></span>
                     </strong>
                     <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                 </div>
                 <div class="toast-body"></div>
+                <div class="toast-progress"></div>
             </div>`
         : `
             <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
                 <div class="toast-icon">
-                    <span class="bx bx-${options.icon}"></span>
+                    <span class="bx bx-${icon}"></span>
                 </div>
                 <div class="toast-body"></div>
                 <div class="toast-header">
                     <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
                 </div>
+                <div class="toast-progress"></div>
             </div>`
     );
 
-    $toast.toggleClass("no-title", !options.title);
-    $toast.find(".toast-title").text(options.title ?? "");
-    $toast.find(".toast-body").html(options.message);
+    $toast.toggleClass("no-title", !title);
+    $toast.find(".toast-title").text(title ?? "");
+    $toast.find(".toast-body").html(message);
+    $toast.find(".toast-progress").css("width", `${(progress ?? 0) * 100}%`);
 
-    if (options.id) {
-        $toast.attr("id", `toast-${options.id}`);
+    if (id) {
+        $toast.attr("id", `toast-${id}`);
     }
 
     $("#toast-container").append($toast);
 
     $toast.toast({
-        delay: options.delay || 3000,
-        autohide: !!options.autohide
+        delay: delay || 3000,
+        autohide: !!autohide
     });
 
     $toast.on("hidden.bs.toast", (e) => e.target.remove());
@@ -62,6 +66,7 @@ function showPersistent(options: ToastOptions) {
 
     if ($toast.length > 0) {
         $toast.find(".toast-body").html(options.message);
+        $toast.find(".toast-progress").css("width", `${(options.progress ?? 0) * 100}%`);
     } else {
         options.autohide = false;
 
@@ -77,11 +82,11 @@ function closePersistent(id: string) {
     $(`#toast-${id}`).remove();
 }
 
-function showMessage(message: string, delay = 2000) {
+function showMessage(message: string, delay = 2000, icon = "check") {
     console.debug(utils.now(), "message:", message);
 
     toast({
-        icon: "check",
+        icon,
         message: message,
         autohide: true,
         delay

apps/client/src/services/tree.ts

@@ -4,9 +4,6 @@ import froca from "./froca.js";
 import hoistedNoteService from "./hoisted_note.js";
 import appContext from "../components/app_context.js";
 
-/**
- * @returns {string|null}
- */
 async function resolveNotePath(notePath: string, hoistedNoteId = "root") {
     const runPath = await resolveNotePathToSegments(notePath, hoistedNoteId);
 
@@ -29,21 +26,12 @@ async function resolveNotePathToSegments(notePath: string, hoistedNoteId = "root
     }
 
     const path = notePath.split("/").reverse();
-
-    if (!path.includes("root")) {
-        path.push("root");
-    }
-
     const effectivePathSegments: string[] = [];
     let childNoteId: string | null = null;
     let i = 0;
 
-    while (true) {
-        if (i >= path.length) {
-            break;
-        }
-
-        const parentNoteId = path[i++];
+    for (let i = 0; i < path.length; i++) {
+        const parentNoteId = path[i];
 
         if (childNoteId !== null) {
             const child = await froca.getNote(childNoteId, !logErrors);
@@ -68,7 +56,7 @@ async function resolveNotePathToSegments(notePath: string, hoistedNoteId = "root
                 return null;
             }
 
-            if (!parents.some((p) => p.noteId === parentNoteId)) {
+            if (!parents.some(p => p.noteId === parentNoteId) || (i === path.length - 1 && parentNoteId !== 'root')) {
                 if (logErrors) {
                     const parent = froca.getNoteFromCache(parentNoteId);
 
@@ -80,7 +68,8 @@ async function resolveNotePathToSegments(notePath: string, hoistedNoteId = "root
                     );
                 }
 
-                const bestNotePath = child.getBestNotePath(hoistedNoteId);
+                const activeNotePath = appContext.tabManager.getActiveContextNotePath();
+                const bestNotePath = child.getBestNotePath(hoistedNoteId, activeNotePath);
 
                 if (bestNotePath) {
                     const pathToRoot = bestNotePath.reverse().slice(1);
@@ -100,7 +89,7 @@ async function resolveNotePathToSegments(notePath: string, hoistedNoteId = "root
 
     effectivePathSegments.reverse();
 
-    if (effectivePathSegments.includes(hoistedNoteId)) {
+    if (effectivePathSegments.includes(hoistedNoteId) && effectivePathSegments.includes('root')) {
         return effectivePathSegments;
     } else {
         const noteId = getNoteIdFromUrl(notePath);
@@ -111,7 +100,9 @@ async function resolveNotePathToSegments(notePath: string, hoistedNoteId = "root
         if (!note) {
             throw new Error(`Unable to find note: ${notePath}.`);
         }
-        const bestNotePath = note.getBestNotePath(hoistedNoteId);
+
+        const activeNotePath = appContext.tabManager.getActiveContextNotePath();
+        const bestNotePath = note.getBestNotePath(hoistedNoteId, activeNotePath);
 
         if (!bestNotePath) {
             throw new Error(`Did not find any path segments for '${note.toString()}', hoisted note '${hoistedNoteId}'`);

apps/client/src/services/utils.ts

@@ -1,4 +1,4 @@
-import dayjs from "dayjs";
+import { dayjs } from "@triliumnext/commons";
 import type { ViewScope } from "./link.js";
 import FNote from "../entities/fnote";
 
@@ -11,8 +11,12 @@ export function reloadFrontendApp(reason?: string) {
         logInfo(`Frontend app reload: ${reason}`);
     }
 
+    if (isElectron()) {
+        dynamicRequire("@electron/remote").BrowserWindow.getFocusedWindow()?.reload();
+    } else {
         window.location.reload();
     }
+}
 
 export function restartDesktopApp() {
     if (!isElectron()) {
@@ -169,7 +173,7 @@ const entityMap: Record<string, string> = {
     "=": "&#x3D;"
 };
 
-function escapeHtml(str: string) {
+export function escapeHtml(str: string) {
     return str.replace(/[&<>"'`=\/]/g, (s) => entityMap[s]);
 }
 
@@ -203,7 +207,7 @@ function toObject<T, R>(array: T[], fn: (arg0: T) => [key: string, value: R]) {
     return obj;
 }
 
-function randomString(len: number) {
+export function randomString(len: number) {
     let text = "";
     const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
@@ -270,7 +274,7 @@ function getMimeTypeClass(mime: string) {
     return `mime-${mime.toLowerCase().replace(/[\W_]+/g, "-")}`;
 }
 
-function isHtmlEmpty(html: string) {
+export function isHtmlEmpty(html: string) {
     if (!html) {
         return true;
     } else if (typeof html !== "string") {
@@ -837,7 +841,7 @@ export function arrayEqual<T>(a: T[], b: T[]) {
     return true;
 }
 
-type Indexed<T extends object> = T & { index: number };
+export type Indexed<T extends object> = T & { index: number };
 
 /**
  * Given an object array, alters every object in the array to have an index field assigned to it.

apps/client/src/services/ws.ts

@@ -304,6 +304,8 @@ async function sendPing() {
 }
 
 setTimeout(() => {
+    if (glob.device === "print") return;
+
     ws = connectWebSocket();
 
     lastPingTs = Date.now();

apps/client/src/share.ts

@@ -1,84 +0,0 @@
-import "normalize.css";
-import "boxicons/css/boxicons.min.css";
-import "@triliumnext/ckeditor5/src/theme/ck-content.css";
-import "@triliumnext/share-theme/styles/index.css";
-import "@triliumnext/share-theme/scripts/index.js";
-
-async function ensureJQuery() {
-    const $ = (await import("jquery")).default;
-    (window as any).$ = $;
-}
-
-async function applyMath() {
-    const anyMathBlock = document.querySelector("#content .math-tex");
-    if (!anyMathBlock) {
-        return;
-    }
-
-    const renderMathInElement = (await import("./services/math.js")).renderMathInElement;
-    renderMathInElement(document.getElementById("content"));
-}
-
-async function formatCodeBlocks() {
-    const anyCodeBlock = document.querySelector("#content pre");
-    if (!anyCodeBlock) {
-        return;
-    }
-    await ensureJQuery();
-    const { formatCodeBlocks } = await import("./services/syntax_highlight.js");
-    await formatCodeBlocks($("#content"));
-}
-
-async function setupTextNote() {
-    formatCodeBlocks();
-    applyMath();
-
-    const setupMermaid = (await import("./share/mermaid.js")).default;
-    setupMermaid();
-}
-
-/**
- * Fetch note with given ID from backend
- *
- * @param noteId of the given note to be fetched. If false, fetches current note.
- */
-async function fetchNote(noteId: string | null = null) {
-    if (!noteId) {
-        noteId = document.body.getAttribute("data-note-id");
-    }
-
-    const resp = await fetch(`api/notes/${noteId}`);
-
-    return await resp.json();
-}
-
-document.addEventListener(
-    "DOMContentLoaded",
-    () => {
-        const noteType = determineNoteType();
-
-        if (noteType === "text") {
-            setupTextNote();
-        }
-
-        const toggleMenuButton = document.getElementById("toggleMenuButton");
-        const layout = document.getElementById("layout");
-
-        if (toggleMenuButton && layout) {
-            toggleMenuButton.addEventListener("click", () => layout.classList.toggle("showMenu"));
-        }
-    },
-    false
-);
-
-function determineNoteType() {
-    const bodyClass = document.body.className;
-    const match = bodyClass.match(/type-([^\s]+)/);
-    return match ? match[1] : null;
-}
-
-// workaround to prevent webpack from removing "fetchNote" as dead code:
-// add fetchNote as property to the window object
-Object.defineProperty(window, "fetchNote", {
-    value: fetchNote
-});

apps/client/src/stylesheets/calendar.css

@@ -4,6 +4,10 @@
     box-sizing: border-box;
 }
 
+.dropdown-menu:not(.static).calendar-dropdown-menu {
+    padding: 0 !important;
+}
+
 .calendar-dropdown-widget {
     margin: 0 auto;
     overflow: hidden;

apps/client/src/stylesheets/print.css

@@ -1,322 +0,0 @@
-:root {
-    --main-background-color: white;
-    --root-background: var(--main-background-color);
-    --launcher-pane-background-color: var(--main-background-color);
-    --main-text-color: black;
-    --input-text-color: var(--main-text-color);
-
-    --print-font-size: 11pt;
-}
-
-@page {
-    margin: 2cm;
-}
-
-.ck-content {
-    font-size: var(--print-font-size);
-    text-align: justify;
-}
-
-.note-detail-readonly-text {
-    padding: 0 !important;
-}
-
-.no-print,
-.no-print *,
-.tab-row-container,
-.tab-row-widget,
-.title-bar-buttons,
-#launcher-pane,
-#left-pane,
-#center-pane > *:not(.split-note-container-widget),
-#right-pane,
-.title-row .note-icon-widget,
-.title-row .icon-action,
-.ribbon-container,
-.promoted-attributes-widget,
-.scroll-padding-widget,
-.note-list-widget,
-.spacer {
-    display: none !important;
-}
-
-body.mobile #mobile-sidebar-wrapper,
-body.mobile .classic-toolbar-widget,
-body.mobile .action-button {
-    display: none !important;
-}
-
-body.mobile #detail-container {
-    max-height: unset;
-}
-
-body.mobile .note-title-widget {
-    padding: 0 !important;
-}
-
-body,
-#root-widget,
-#rest-pane > div.component:first-child,
-.note-detail-printable,
-.note-detail-editable-text-editor {
-    height: unset !important;
-    overflow: auto;
-}
-
-.ck.ck-editor__editable_inline {
-    overflow: hidden !important;
-}
-
-.note-title-widget input,
-.note-detail-editable-text,
-.note-detail-editable-text-editor {
-    padding: 0 !important;
-}
-
-html,
-body {
-    width: unset !important;
-    height: unset !important;
-    overflow: visible;
-    position: unset;
-    /* https://github.com/zadam/trilium/issues/3202 */
-    color: black;
-}
-
-#root-widget,
-#horizontal-main-container,
-#rest-pane,
-#vertical-main-container,
-#center-pane,
-.split-note-container-widget,
-.note-split:not(.hidden-ext),
-body.mobile #mobile-rest-container {
-    display: block !important;
-    overflow: auto;
-    border-radius: 0 !important;
-}
-
-#center-pane,
-#rest-pane,
-.note-split,
-body.mobile #detail-container {
-    width: unset !important;
-    max-width: unset !important;
-}
-
-.component {
-    contain: none !important;
-}
-
-/* Respect page breaks */
-.page-break {
-    page-break-after: always;
-    break-after: always;
-}
-
-.page-break > * {
-    display: none !important;
-}
-
-.relation-map-wrapper {
-    height: 100vh !important;
-}
-
-.table thead th,
-.table td,
-.table th {
-    /* Fix center vertical alignment of table cells */
-    vertical-align: middle;
-}
-
-pre {
-    box-shadow: unset !important;
-    border: 0.75pt solid gray !important;
-    border-radius: 2pt !important;
-}
-
-th,
-span[style] {
-    print-color-adjust: exact;
-    -webkit-print-color-adjust: exact;
-}
-
-/*
- * Text note specific fixes
- */
-.ck-widget {
-    outline: none !important;
-}
-
-.ck-placeholder,
-.ck-widget__type-around,
-.ck-widget__selection-handle {
-    display: none !important;
-}
-
-.ck-widget.table td.ck-editor__nested-editable.ck-editor__nested-editable_focused,
-.ck-widget.table td.ck-editor__nested-editable:focus,
-.ck-widget.table th.ck-editor__nested-editable.ck-editor__nested-editable_focused,
-.ck-widget.table th.ck-editor__nested-editable:focus {
-    background: unset !important;
-    outline: unset !important;
-}
-
-.include-note .include-note-content {
-    max-height: unset !important;
-    overflow: unset !important;
-}
-
-/* TODO: This will break once we translate the language */
-.ck-content pre[data-language="Auto-detected"]:after {
-    display: none !important;
-}
-
-/*
- * Code note specific fixes.
- */
-.note-detail-code pre {
-    border: unset !important;
-    border-radius: unset !important;
-}
-
-/*
- * Links
- */
-
-.note-detail-printable a {
-    text-decoration: none;
-}
-
-.note-detail-printable a:not([href^="#root/"]) {
-    text-decoration: underline;
-    color: #374a75;
-}
-
-.note-detail-printable a::after {
-    /* Hide the external link trailing arrow */
-    display: none !important;
-}
-
-/*
- * TODO list check boxes
- */
-
-.note-detail-printable .todo-list__label * {
-    -webkit-print-color-adjust: exact;
-    print-color-adjust: exact;
-}
-
-@supports selector(.todo-list__label__description:has(*)) and (height: 1lh) {
-    .note-detail-printable .todo-list__label__description {
-        /* The percentage of the line height that the check box occupies */
-        --box-ratio: 0.75;
-        /* The size of the gap between the check box and the caption */
-        --box-text-gap: 0.25em;
-
-        --box-size: calc(1lh * var(--box-ratio));
-        --box-vert-offset: calc((1lh - var(--box-size)) / 2);
-
-        display: inline-block;
-        padding-inline-start: calc(var(--box-size) + var(--box-text-gap));
-        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-blank-outline/ */
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5C3.89%2c3 3%2c3.89 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5C21%2c3.89 20.1%2c3 19%2c3M19%2c5V19H5V5H19Z' /%3e%3c/svg%3e");
-        background-position: 0 var(--box-vert-offset);
-        background-size: var(--box-size);
-        background-repeat: no-repeat;
-    }
-
-    .note-detail-printable .todo-list__label:has(input[type="checkbox"]:checked) .todo-list__label__description {
-        /* Source: https://pictogrammers.com/library/mdi/icon/checkbox-outline/ */
-        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='currentColor'%3e%3cpath d='M19%2c3H5A2%2c2 0 0%2c0 3%2c5V19A2%2c2 0 0%2c0 5%2c21H19A2%2c2 0 0%2c0 21%2c19V5A2%2c2 0 0%2c0 19%2c3M19%2c5V19H5V5H19M10%2c17L6%2c13L7.41%2c11.58L10%2c14.17L16.59%2c7.58L18%2c9' /%3e%3c/svg%3e");
-    }
-
-    .note-detail-printable .todo-list__label input[type="checkbox"] {
-        display: none !important;
-    }
-}
-
-/*
- * Blockquotes
- */
-
-.note-detail-printable blockquote {
-    box-shadow: unset;
-}
-
-/* 
- * Figures
- */
-
-.note-detail-printable figcaption {
-    --accented-background-color: transparent;
-
-    font-style: italic;
-}
-
-/*
- * Footnotes
- */
-
-.note-detail-printable .footnote-reference a,
-.footnote-back-link a {
-    text-decoration: none;
-}
-
-/* Make the "^" link cover the whole area of the footnote item */
-
-.footnote-section {
-    clear: both;
-}
-
-.note-detail-printable li.footnote-item {
-    position: relative;
-    width: fit-content;
-}
-
-.note-detail-printable .footnote-back-link,
-.note-detail-printable .footnote-back-link *,
-.note-detail-printable .footnote-back-link a {
-    display: block;
-    position: absolute;
-
-    top: 0;
-    inset-inline-start: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.note-detail-printable .footnote-back-link a {
-    color: transparent;
-}
-
-.note-detail-printable .footnote-content {
-    display: inline-block;
-    width: unset;
-}
-
-/*
- * Widows and orphans
- */
-p,
-blockquote {
-    widows: 4;
-    orphans: 4;
-}
-
-pre > code {
-    widows: 6;
-    orphans: 6;
-    overflow: auto;
-    white-space: pre-wrap !important;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    page-break-after: avoid;
-    break-after: avoid;
-}

apps/client/src/stylesheets/style.css

@@ -26,6 +26,10 @@
     --bs-body-color: var(--main-text-color) !important;
     --bs-body-bg: var(--main-background-color) !important;    
     --ck-mention-list-max-height: 500px;    
+    --tn-modal-max-height: 90vh;
+
+    --tree-item-light-theme-max-color-lightness: 50;
+    --tree-item-dark-theme-min-color-lightness: 75;
 }
 
 body#trilium-app.motion-disabled *,
@@ -212,6 +216,16 @@ input::placeholder,
     background-color: var(--modal-backdrop-color) !important;
 }
 
+body.mobile .modal .modal-dialog {
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+}
+
+body.mobile .modal .modal-content {
+    border-radius: var(--bs-modal-border-radius) var(--bs-modal-border-radius) 0 0;
+}
+
 .component {
     contain: size;
 }
@@ -243,6 +257,11 @@ button.close:hover {
     color: var(--hover-item-text-color);
 }
 
+button.custom-title-bar-button {
+    background: transparent;
+    border: unset;
+}
+
 .modal-content {
     background-color: var(--modal-background-color) !important;
 }
@@ -360,7 +379,8 @@ button kbd {
 }
 
 .dropdown-menu,
-.tabulator-popup-container {
+.tabulator-popup-container,
+:root .excalidraw .popover {
     color: var(--menu-text-color) !important;
     font-size: inherit;
     background: var(--menu-background-color) !important;
@@ -371,7 +391,9 @@ button kbd {
 }
 
 body.desktop .dropdown-menu,
-body.desktop .tabulator-popup-container {
+body.desktop .tabulator-popup-container,
+:root .excalidraw .dropdown-menu .dropdown-menu-container,
+:root .excalidraw .popover {
     border: 1px solid var(--dropdown-border-color);
     column-rule: 1px solid var(--dropdown-border-color);
     box-shadow: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
@@ -404,7 +426,7 @@ body.desktop .tabulator-popup-container {
 .dropdown-menu .disabled .disabled-tooltip {
     pointer-events: all;
     margin-inline-start: 8px;
-    font-size: 0.5em;
+    font-size: 0.75rem;
     color: var(--disabled-tooltip-icon-color);
     cursor: help;
     opacity: 0.75;
@@ -416,7 +438,8 @@ body.desktop .tabulator-popup-container {
 
 .dropdown-menu a:hover:not(.disabled),
 .dropdown-item:hover:not(.disabled, .dropdown-container-item),
-.tabulator-menu-item:hover {
+.tabulator-menu-item:hover,
+:root .excalidraw .context-menu .context-menu-item:hover {
     color: var(--hover-item-text-color) !important;
     background-color: var(--hover-item-background-color) !important;
     border-color: var(--hover-item-border-color) !important;
@@ -435,7 +458,8 @@ body.desktop .tabulator-popup-container {
 }
 
 body.desktop .dropdown-menu:not(#context-menu-container) .dropdown-item,
-body #context-menu-container .dropdown-item > span {
+body #context-menu-container .dropdown-item > span,
+body.mobile .dropdown .dropdown-submenu > span {
     display: flex;
     align-items: center;
 }
@@ -457,7 +481,8 @@ body #context-menu-container .dropdown-item > span {
 }
 
 .dropdown-item,
-.dropdown-header {
+.dropdown-header,
+:root .excalidraw .context-menu .context-menu-item:hover {
     color: var(--menu-text-color) !important;
     border: 1px solid transparent !important;
 }
@@ -489,6 +514,10 @@ body #context-menu-container .dropdown-item > span {
     width: 100%;
 }
 
+.dropdown-menu .note-color-picker {
+    padding: 4px 12px 8px 12px;
+}
+
 .cm-editor {
     height: 100%;
     outline: none !important;
@@ -571,11 +600,6 @@ button.btn-sm {
     color: var(--left-pane-text-color);
 }
 
-.btn.active:not(.btn-primary) {
-    background-color: var(--button-disabled-background-color) !important;
-    opacity: 0.4;
-}
-
 .ck.ck-block-toolbar-button {
     transform: translateX(7px);
     color: var(--muted-text-color);
@@ -696,11 +720,6 @@ table.promoted-attributes-in-tooltip th {
     z-index: 32767 !important;
 }
 
-.tooltip-trigger {
-    background: transparent;
-    pointer-events: none;
-}
-
 .bs-tooltip-bottom .tooltip-arrow::before {
     border-bottom-color: var(--main-border-color) !important;
 }
@@ -996,10 +1015,16 @@ div[data-notify="container"] {
     font-family: var(--monospace-font-family);
 }
 
-svg.ck-icon .note-icon {
+svg.ck-icon {
+    &.ck-icon_inherit-color path[fill="#333"] {
+        fill: currentColor;
+    }
+
+    &.note-icon {
         color: var(--main-text-color);
         font-size: 20px;
     }
+}
 
 .ck-content {
     --ck-content-font-family: var(--detail-font-family);
@@ -1008,7 +1033,7 @@ svg.ck-icon .note-icon {
     --ck-content-line-height: var(--bs-body-line-height);
 }
 
-.ck-content .table table th {
+:root .ck-content .table table:not(.layout-table) th {
     background-color: var(--accented-background-color);
 }
 
@@ -1099,7 +1124,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
 
 .card {
     color: inherit !important;
-    background-color: inherit !important;
     border-color: var(--main-border-color) !important;
 }
 
@@ -1108,10 +1132,6 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     display: inline-block;
 }
 
-.note-detail-empty {
-    margin: 50px;
-}
-
 .modal-header {
     padding: 0.5rem 1rem 0.5rem 1rem !important; /* make modal header padding slightly smaller */
 }
@@ -1133,6 +1153,7 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     --bs-toast-color: var(--main-text-color);
     z-index: 9999999999 !important;
     pointer-events: all;
+    overflow: hidden;
 }
 
 .toast-header {
@@ -1165,6 +1186,16 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     background-color: unset !important;
 }
 
+.toast .toast-progress {
+    position: absolute;
+    bottom: 0;
+    inset-inline-start: 0;
+    inset-inline-end: 0;
+    background-color: var(--toast-text-color) !important;
+    height: 4px;
+    transition: width 0.1s linear;    
+}
+
 .ck-mentions .ck-button {
     font-size: var(--detail-font-size) !important;
     padding: 5px;
@@ -1296,11 +1327,11 @@ body.mobile #context-menu-container.mobile-bottom-menu {
     inset-inline-end: 0 !important;
     bottom: 0 !important;
     top: unset !important;
-    max-height: 70vh;
+    max-height: var(--tn-modal-max-height);
     overflow: auto !important;
     user-select: none;
     -webkit-user-select: none;
-    padding-bottom: env(safe-area-inset-bottom) !important;
+    padding-bottom: max(env(safe-area-inset-bottom), var(--padding, var(--menu-padding-size))) !important;
 }
 
 body.mobile .dropdown-menu {
@@ -1359,6 +1390,20 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     flex-shrink: 0;
 }
 
+.right-dropdown-widget .right-dropdown-button {
+    position: relative;
+}
+
+.tooltip-trigger {
+    background: transparent;
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}
+
 #launcher-pane.horizontal .right-dropdown-widget {
     width: 53px;
 }
@@ -1534,12 +1579,15 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 @media (max-width: 991px) {
     body.mobile #launcher-pane .dropdown.global-menu > .dropdown-menu.show,
     body.mobile #launcher-container .dropdown > .dropdown-menu.show {
+        --dropdown-bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size));
         position: fixed !important;
-        bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !important;
+        bottom: var(--dropdown-bottom) !important;
         top: unset !important;
         inset-inline-start: 0 !important;
         inset-inline-end: 0 !important;
         transform: unset !important;
+        overflow-y: auto;
+        max-height: calc(var(--tn-modal-max-height) - var(--dropdown-bottom));
     }
 
     #mobile-sidebar-container {
@@ -1574,6 +1622,14 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
         width: 100%;
     }
 
+    .note-split.empty-note {
+        --max-content-width: var(--preferred-max-content-width);
+    }
+
+    .note-detail-empty {
+        margin: 15px;
+    }
+
     #mobile-sidebar-container.show #mobile-sidebar-wrapper {
         transform: translateX(0);
     }
@@ -1636,46 +1692,6 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     body.mobile .modal-dialog.modal-dialog-scrollable {
         height: unset;
     }
-
-    body.mobile .revisions-dialog .modal-dialog {
-        height: 95vh;
-    }
-
-    body.mobile .revisions-dialog .modal-body {
-        height: 100% !important;
-        flex-direction: column;
-        padding: 0;
-    }
-
-    body.mobile .revisions-dialog .revision-list {
-        height: unset;
-        max-height: 20vh;
-        border-bottom: 1px solid var(--main-border-color) !important;
-        padding: 0 1em;
-    }
-
-    body.mobile .revisions-dialog .modal-body > .revision-content-wrapper {
-        flex-grow: 1;
-        height: 100%;
-        overflow: auto;
-        margin: 0;
-    }
-
-    body.mobile .revisions-dialog .modal-body > .revision-content-wrapper > div:first-of-type {
-        flex-direction: column;
-    }
-
-    body.mobile .revisions-dialog .revision-title {
-        font-size: 1rem;
-    }
-
-    body.mobile .revisions-dialog .revision-title-buttons {
-        text-align: center;
-    }
-
-    body.mobile .revisions-dialog .revision-content {
-        padding: 0.5em;
-    }
 }
 
 /* Mobile, tablet mode */
@@ -1754,10 +1770,10 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     flex-direction: column;
     margin-inline-start: 10px;
     margin-inline-end: 5px;
+    background: transparent;
 }
 
 #right-pane .card-header {
-    background: inherit;
     padding: 6px 0 3px 0;
     width: 99%; /* to give minimal right margin */
     background-color: var(--button-background-color);
@@ -1804,12 +1820,15 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 .note-split {
+    /* Limits the maximum width of the note */
+    --max-content-width: var(--preferred-max-content-width);
+
     margin-inline-start: auto;
     margin-inline-end: auto;
 }
 
 .note-split.full-content-width {
-    max-width: 999999px;
+    --max-content-width: unset;
 }
 
 button.close:hover {
@@ -1978,6 +1997,10 @@ body.electron.platform-darwin:not(.native-titlebar) .tab-row-container {
     -webkit-app-region: drag;
 }
 
+body.electron.platform-darwin:not(.native-titlebar):not(.full-screen) #tab-row-left-spacer {
+    width: 80px;
+}
+
 .tab-row-widget {
     padding-inline-end: calc(100vw - env(titlebar-area-width, 100vw));
 }
@@ -2025,13 +2048,16 @@ body.zen #right-pane,
 body.zen #mobile-sidebar-wrapper,
 body.zen .tab-row-container,
 body.zen .tab-row-widget,
-body.zen .ribbon-container:not(:has(.classic-toolbar-widget.visible)),
-body.zen .ribbon-container:has(.classic-toolbar-widget.visible) .ribbon-top-row,
-body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget.visible)),
+body.zen .shared-info-widget,
+body.zen .ribbon-container:not(:has(.classic-toolbar-widget)),
+body.zen .ribbon-container:has(.classic-toolbar-widget) .ribbon-top-row,
+body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget)),
 body.zen .note-icon-widget,
 body.zen .title-row .icon-action,
+body.zen .promoted-attributes-widget,
 body.zen .floating-buttons-children > *:not(.bx-edit-alt),
-body.zen .action-button {
+body.zen .action-button,
+body.zen .note-split:not(.type-book) .note-list-widget {
     display: none !important;
 }
 
@@ -2075,12 +2101,121 @@ body.zen .note-title-widget,
 body.zen .note-title-widget input {
     font-size: 1rem !important;
     background: transparent !important;
+    pointer-events: none;
 }
 
 body.zen #detail-container {
     width: 100%;
 }
 
+body.zen .note-split:not(.full-content-width) .scrolling-container {
+    display: flex;
+    flex-direction: column;
+    scroll-behavior: unset !important;
+}
+
+body.zen .note-split:not(.full-content-width) .note-detail {
+    margin: auto;
+    padding-bottom: 25vh;
+    max-width: var(--max-content-width);
+    width: 100%;
+}
+
+body.zen .note-split:not(.full-content-width) .scroll-padding-widget {
+    display: none;
+}
+
+body.zen .note-split.type-text {
+    position: relative;
+    font-size: 1.15em;
+}
+
+body.zen:not(.backdrop-effects-disabled) .note-split.type-text .title-row {
+    --start-color: var(--main-background-color);
+
+    position: absolute;
+    width: 100%;
+    background: linear-gradient(var(--start-color) 30%, transparent 100%);
+    z-index: 1000;
+}
+
+@supports (background: color-mix(in srgb, white, transparent)) {
+    body.zen .note-split.type-text .title-row {
+        --start-color: color-mix(in srgb, var(--main-background-color), transparent 10%);
+    }
+}
+
+body.zen .note-split.type-text .scrolling-container {
+    --padding-bottom: 130px; /* Should be enough to avoid caret being hidden by the formatting toolbar */
+
+    /* (Usually) keeps the caret above the fixed toolbar */
+    scroll-padding-bottom: var(--padding-bottom);
+}
+
+body.zen:not(.backdrop-effects-disabled) .note-split.type-text .scrolling-container {
+    --padding-top: 50px; /* Should be enough to cover the title row */
+    
+    padding-top: var(--padding-top);
+    scroll-padding-top: var(--padding-top);
+}
+
+/* Fixed formatting toolbar */
+
+body.zen .note-split .ribbon-container {
+    position: fixed;
+    left: 0;
+    bottom: 20px;
+    width: 100%;
+    z-index: 1000;
+    opacity: 0; /* Hidden unless the current note split is focused */
+    pointer-events: none;
+    transition: opacity 100ms linear;
+}
+
+body.zen .note-split:focus-within .ribbon-container {
+    opacity: 1; /* Show when the note split is focused */
+}
+
+body.zen .note-split .ribbon-container .ribbon-body {
+    border: 0;
+}
+
+body.zen .note-split .ribbon-container .classic-toolbar-widget {
+    margin: auto;
+    width: fit-content;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
+    border-radius: 8px;
+    border: 1px solid var(--main-border-color);
+    padding: 4px;
+    background: var(--menu-background-color);
+}
+
+body.zen .note-split .ribbon-container .classic-toolbar-widget:not(:has(> .ck-toolbar)) {
+    /* Hide the toolbar wrapper if the toolbar is missing */
+    display: none;
+}
+
+body.zen .note-split:focus-within .ribbon-container .classic-toolbar-widget {
+    pointer-events: all;
+}
+
+@media (max-width: 1300px) {
+    body.zen .note-split .ribbon-container .classic-toolbar-widget {
+        /* Set the toolbar to full with */
+        width: 100%;
+    }
+
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
+        /* Force toolbar items overflow dropdowns open upwards */
+        top: auto;
+        bottom: 100%;
+    }
+}
+
 /* Content renderer */
 
 footer.file-footer,
@@ -2277,9 +2412,8 @@ footer.webview-footer button {
 
 .admonition {
     --accent-color: var(--card-border-color);
+    background: color-mix(in srgb, var(--accent-color) 15%, transparent);
     border: 1px solid var(--accent-color);
-    box-shadow: var(--card-box-shadow);
-    background: var(--card-background-color);
     border-radius: 0.5em;
     padding: 1em;
     margin: 1.25em 0;
@@ -2312,6 +2446,15 @@ footer.webview-footer button {
 .admonition.caution::before { content: "\eac7"; }
 .admonition.warning::before { content: "\eac5"; }
 
+.ck-content ul.todo-list li span.todo-list__label__description {
+    transition: opacity 200ms ease;
+}
+
+.ck-content ul.todo-list li:has(> span.todo-list__label input[type="checkbox"]:checked) > span.todo-list__label span.todo-list__label__description {
+    text-decoration: line-through;
+    opacity: 0.6;    
+}
+
 .chat-options-container {
     display: flex;
     margin: 5px 0;
@@ -2398,7 +2541,7 @@ footer.webview-footer button {
     transform: rotate(180deg);
 }
 
-/* CK Edito */
+/* CK Editor */
 
 /* Insert text snippet: limit the width of the listed items to avoid overly long names */
 :root body.desktop div.ck-template-form li.ck-list__item .ck-template-form__text-part > span {
@@ -2415,3 +2558,60 @@ footer.webview-footer button {
     background: rgba(255, 100, 100, 0.5);
     text-decoration: line-through;
 }
+
+iframe.print-iframe {
+    position: absolute;
+    top: 0;
+    left: -600px;
+    right: -600px;
+    bottom: 0;
+    width: 0;
+    height: 0;
+}
+
+.excalidraw.theme--dark canvas {
+    --theme-filter: invert(100%) hue-rotate(180deg);
+}
+
+/* Scrolling container */
+
+.scrolling-container:has(> :is(.note-detail.full-height, .note-list-widget.full-height)) {
+    display: flex;
+    flex-direction: column;
+}
+
+.note-detail.full-height,
+.scrolling-container > .note-list-widget.full-height {
+    position: relative;
+    flex-grow: 1;
+    width: 100%;
+}
+
+/* Calendar collection */
+
+.calendar-view a.fc-timegrid-event,
+.calendar-view a.fc-daygrid-event {
+    /* Workaround: set font weight only if the theme-next is not active */
+    font-weight: var(--root-background, 800);
+}
+
+@media (max-width: 991px) {
+    body.mobile {
+        .split-note-container-widget {
+            flex-direction: column !important;
+            
+            .note-split {
+                width: 100%;
+            }
+
+            .note-split.visible + .note-split.visible {
+                border-top: 1px solid var(--main-border-color);
+            }
+        }
+
+        #root-widget.virtual-keyboard-opened .note-split:not(:focus-within) {
+            max-height: 80px;
+            opacity: 0.4;
+        }
+    }
+}

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

@@ -76,12 +76,26 @@
 
     --mermaid-theme: dark;
     --native-titlebar-background: #00000000;
+
+    --calendar-coll-event-background-saturation: 30%;
+    --calendar-coll-event-background-lightness: 30%;
 }
 
 body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
 
+#left-pane .fancytree-node.tinted {
+    --custom-color: var(--dark-theme-custom-color);
+}
+
+:root .reference-link,
+:root .reference-link:hover,
+.ck-content a.reference-link > span,
+.board-note {
+    color: var(--dark-theme-custom-color, inherit);
+}
+
 .excalidraw.theme--dark {
     --theme-filter: invert(80%) hue-rotate(180deg) !important;
 }
@@ -97,3 +111,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .ck-content pre {
     box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6) !important;
 }
+
+.use-note-color {
+    --custom-color: var(--dark-theme-custom-color);
+}

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

@@ -80,4 +80,22 @@ html {
 
     --mermaid-theme: default;
     --native-titlebar-background: #ffffff00;
+
+    --calendar-coll-event-background-lightness: 95%;
+    --calendar-coll-event-background-saturation: 80%;
+}
+
+#left-pane .fancytree-node.tinted {
+    --custom-color: var(--light-theme-custom-color);
+}
+
+:root .reference-link,
+:root .reference-link:hover,
+.ck-content a.reference-link > span,
+.board-note {
+    color: var(--light-theme-custom-color, inherit);
+}
+
+.use-note-color {
+    --custom-color: var(--light-theme-custom-color);
 }

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

@@ -15,7 +15,7 @@
     --native-titlebar-background: #00000000;
     --window-background-color-bgfx: transparent; /* When background effects enabled */
 
-    --main-background-color: #272727;
+    --main-background-color: #242424;
     --main-text-color: #ccc;
     --main-border-color: #454545;
     --subtle-border-color: #313131;
@@ -41,6 +41,9 @@
     --cmd-button-keyboard-shortcut-color: white;
     --cmd-button-disabled-opacity: 0.5;
 
+    --button-group-active-button-background: #ffffff4e;
+    --button-group-active-button-text-color: white;
+
     --icon-button-color: currentColor;
     --icon-button-hover-background: var(--hover-item-background-color);
     --icon-button-hover-color: var(--hover-item-text-color);
@@ -98,6 +101,7 @@
     --menu-item-delimiter-color: #ffffff1c;
     --menu-item-group-header-color: #ffffff91;
     --menu-section-background-color: #fefefe08;
+    --menu-submenu-mobile-background-color: rgba(0, 0, 0, 0.15);
 
     --modal-backdrop-color: #000;
     --modal-shadow-color: rgba(0, 0, 0, .5);
@@ -160,9 +164,15 @@
     --launcher-pane-horiz-background-color-bgfx: #ffffff17; /* When background effects enabled */
     --launcher-pane-horiz-border-color-bgfx: #00000080; /* When background effects enabled */
 
+    --global-menu-update-available-badge-background-color: #7dbe61;
+    --global-menu-update-available-badge-color: black;
+
     --protected-session-active-icon-color: #8edd8e;
     --sync-status-error-pulse-color: #f47871;
 
+    --center-pane-vert-layout-background-color-bgfx: #0c0c0c69;
+    --center-pane-horiz-layout-background-color-bgfx: #1e1e1ec7;
+
     --right-pane-heading-color: gray;
 
     --root-background: var(--left-pane-background-color);
@@ -189,8 +199,8 @@
     --badge-background-color: #ffffff1a;
     --badge-text-color: var(--muted-text-color);
 
-    --promoted-attribute-card-background-color: var(--card-background-color);
-    --promoted-attribute-card-shadow-color: #000000b3;
+    --promoted-attribute-card-background-color: #ffffff21;
+    --promoted-attribute-card-shadow: none;
     
     --floating-button-shadow-color: #00000080;
     --floating-button-background-color: #494949d2;
@@ -205,6 +215,8 @@
     --floating-button-hide-button-background: #00000029;
     --floating-button-hide-button-color: #ffffff63;
 
+    --right-pane-background-color: var(--main-background-color);
+    --right-pane-background-color-bgfx: #0c0c0c24; /* Only for the vertical layout */
     --right-pane-item-hover-background: #ffffff26;
     --right-pane-item-hover-color: white;
 
@@ -222,10 +234,9 @@
     --code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
 
     --card-background-color: #ffffff12;
-    --card-background-hover-color: #3c3c3c;
-    --card-background-press-color: #464646;
-    --card-border-color: #222222;
-    --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
+    --card-background-hover-color: #ffffff20;
+    --card-border-color: transparent;
+    --card-box-shadow: none;
 
     --calendar-color: var(--menu-text-color);
     --calendar-weekday-labels-color: var(--muted-text-color);
@@ -259,12 +270,36 @@
     --ck-editor-toolbar-button-on-color: white;
     --ck-editor-toolbar-button-on-shadow: 1px 1px 2px rgba(0, 0, 0, .75);
     --ck-editor-toolbar-dropdown-button-open-background: #ffffff14;
+
+    --calendar-coll-event-background-saturation: 25%;
+    --calendar-coll-event-background-lightness: 20%;
+    --calendar-coll-event-background-color: #3c3c3c;
+    --calendar-coll-event-text-color: white;
+    --calendar-coll-event-hover-filter: brightness(1.25);
+    --callendar-coll-event-archived-sripe-color: #00000026;
+    --calendar-coll-today-background-color: #ffffff08;
 }
 
 /*
  * Dark color scheme tweaks
  */
 
+#left-pane .fancytree-node.tinted {
+    --custom-color: var(--dark-theme-custom-color);
+
+    /* The background color of the active item in the note tree.
+     * The --custom-color-hue variable contains the hue of the user-selected note color.
+     * This value is unset for gray tones. */
+    --custom-bg-color: hsl(var(--custom-color-hue), 20%, 33%, 0.4);
+}
+
+:root .reference-link,
+:root .reference-link:hover,
+.ck-content a.reference-link > span,
+.board-note {
+    color: var(--dark-theme-custom-color, inherit);
+}
+
 body ::-webkit-calendar-picker-indicator {
     filter: invert(1);
 }
@@ -276,3 +311,13 @@ body ::-webkit-calendar-picker-indicator {
 body .todo-list input[type="checkbox"]:not(:checked):before {
     border-color: var(--muted-text-color) !important;
 }
+
+.quick-edit-dialog-wrapper.with-hue {
+    --modal-background-color: hsl(var(--custom-color-hue), 8.8%, 11.2%);
+    --modal-border-color: hsl(var(--custom-color-hue), 9.4%, 25.1%);
+    --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%);
+}
+
+.use-note-color {
+    --custom-color: var(--dark-theme-custom-color);
+}

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

@@ -41,6 +41,9 @@
     --cmd-button-keyboard-shortcut-color: black;
     --cmd-button-disabled-opacity: 0.5;
 
+    --button-group-active-button-background: #00000026;
+    --button-group-active-button-text-color: black;
+
     --icon-button-color: currentColor;
     --icon-button-hover-background: var(--hover-item-background-color);
     --icon-button-hover-color: var(--hover-item-text-color);
@@ -127,7 +130,7 @@
     --left-pane-item-selected-color: black;
     --left-pane-item-selected-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
     --left-pane-item-action-button-background: rgba(0, 0, 0, 0.11);
-    --left-pane-item-action-button-color: inherit;
+    --left-pane-item-action-button-color: var(--left-pane-text-color);
     --left-pane-item-action-button-hover-background: white;
     --left-pane-item-action-button-hover-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
     --left-pane-item-selected-action-button-hover-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25);
@@ -153,9 +156,15 @@
     --launcher-pane-horiz-background-color-bgfx: #ffffffb3; /* When background effects enabled */
     --launcher-pane-horiz-border-color-bgfx: #00000026; /* When background effects enabled */
 
+    --global-menu-update-available-badge-background-color: #4fa450;
+    --global-menu-update-available-badge-color: white;
+
     --protected-session-active-icon-color: #16b516;
     --sync-status-error-pulse-color: #ff5528;
 
+    --center-pane-vert-layout-background-color-bgfx: #ffffff75;
+    --center-pane-horiz-layout-background-color-bgfx: #ffffffd6;
+
     --right-pane-heading-color: gray;
 
     --root-background: var(--left-pane-background-color);
@@ -177,13 +186,13 @@
     --inactive-tab-hover-background-color: #00000016;
     --inactive-tab-text-color: #4e4e4e;
 
-    --alert-bar-background: #32637b29;
+    --alert-bar-background: #f9cf2b29;
 
     --badge-background-color: #00000011;
     --badge-text-color: var(--muted-text-color);
 
-    --promoted-attribute-card-background-color: var(--card-background-color);
-    --promoted-attribute-card-shadow-color: #00000033;
+    --promoted-attribute-card-background-color: #00000014;
+    --promoted-attribute-card-shadow: none;
 
     --floating-button-shadow-color: #00000042;
     --floating-button-background-color: #eaeaeacc;
@@ -204,7 +213,9 @@
     --new-tab-button-hover-background: white;
     --new-tab-button-hover-color: black;
 
-    --right-pane-item-hover-background: #ececec;
+    --right-pane-background-color: var(--main-background-color);
+    --right-pane-background-color-bgfx: #ffffff9e; /* Only for the vertical layout */
+    --right-pane-item-hover-background: #00000013;
     --right-pane-item-hover-color: inherit;
 
     --scrollbar-thumb-color: #0000005c;
@@ -220,12 +231,11 @@
 
     --code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
 
-    --card-background-color: var(--accented-background-color);
-    --card-background-hover-color: #f9f9f9;
-    --card-background-press-color: #efefef;
-    --card-border-color: #eaeaea;
+    --card-background-color: #0000000d;
+    --card-background-hover-color: #0000001c;
+    --card-border-color: transparent;
     --card-shadow-color: rgba(0, 0, 0, 0.1);
-    --card-box-shadow: 0 0 12px var(--card-shadow-color);
+    --card-box-shadow: none;
 
     --calendar-color: var(--menu-text-color);
     --calendar-weekday-labels-color: var(--muted-text-color);
@@ -259,4 +269,26 @@
     --ck-editor-toolbar-button-on-shadow: none;
     --ck-editor-toolbar-dropdown-button-open-background: #0000000f;
 
+    --calendar-coll-event-background-lightness: 95%;
+    --calendar-coll-event-background-saturation: 80%;
+    --calendar-coll-event-background-color: #eaeaea;
+    --calendar-coll-event-text-color: black;
+    --calendar-coll-event-hover-filter: brightness(.95) saturate(1.25);
+    --callendar-coll-event-archived-sripe-color: #0000000a;
+    --calendar-coll-today-background-color: #00000006;
+}
+
+#left-pane .fancytree-node.tinted {
+    --custom-color: var(--light-theme-custom-color);
+
+    /* The background color of the active item in the note tree.
+     * The --custom-color-hue variable contains the hue of the user-selected note color.
+     * This value is unset for gray tones. */
+    --custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1);
+}
+
+.quick-edit-dialog-wrapper.with-hue {
+    --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%);
+    --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%);
+    --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
 }

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

@@ -4,6 +4,7 @@
 @import url(./pages.css);
 @import url(./ribbon.css);
 @import url(./notes/text.css);
+@import url(./notes/canvas.css);
 @import url(./notes/collections/table.css);
 
 @font-face {
@@ -61,6 +62,7 @@
 
     --menu-padding-size: 8px;
     --menu-item-icon-vert-offset: -2px;
+    --menu-submenu-mobile-background-color: rgba(255, 255, 255, 0.15);
 
     --more-accented-background-color: var(--card-background-hover-color);
 
@@ -81,6 +83,29 @@
 
     /* Theme capabilities */
     --tab-note-icons: true;
+    --allow-background-effects: true;
+
+    /* To ensure that a tree item's custom color remains sufficiently contrasted and readable,
+     * the color is adjusted based on the current color scheme (light or dark). The lightness
+     * component of the color represented in the CIELAB color space, will be
+     * constrained to a certain percentage defined below.
+     * 
+     * Note: the tree background may vary when background effects are enabled, so it is recommended
+     * to maintain a higher contrast margin than on the usual note tree solid background. */
+
+    /* The maximum perceptual lightness for the custom color in the light theme (%): */
+    --tree-item-light-theme-max-color-lightness: 60;
+    
+    /* The minimum perceptual lightness for the custom color in the dark theme (%): */
+    --tree-item-dark-theme-min-color-lightness: 65;
+}
+
+body {
+    user-select: none;
+}
+
+.selectable-text {
+    user-select: text;
 }
 
 body.backdrop-effects-disabled {
@@ -96,25 +121,17 @@ body.backdrop-effects-disabled {
  * supported when this class is used.
  */
 
- .dropdown-menu:not(.static) {
+ .dropdown-menu:not(.static),
+ :root .excalidraw .popover {
     border-radius: var(--dropdown-border-radius);
-    padding: var(--menu-padding-size) !important;
+    padding: var(--padding, var(--menu-padding-size)) !important;
     font-size: 0.9rem !important;
 }
 
-body.mobile .dropdown-menu {
-    backdrop-filter: var(--dropdown-backdrop-filter);
-    border-radius: var(--dropdown-border-radius);
-    position: relative;
-}
-
-body.mobile .dropdown-menu .dropdown-menu {
-    backdrop-filter: unset !important;
-    border-radius: unset !important;
-}
-
 body.desktop .dropdown-menu::before,
-:root .ck.ck-dropdown__panel::before {
+:root .ck.ck-dropdown__panel::before,
+:root .excalidraw .popover::before,
+body.zen .note-split .ribbon-container .classic-toolbar-widget::before {
     content: "";
     backdrop-filter: var(--dropdown-backdrop-filter);
     border-radius: var(--dropdown-border-radius);
@@ -138,19 +155,22 @@ body.desktop .dropdown-submenu .dropdown-menu::before {
     content: unset;
 }
 
-body.mobile .dropdown-submenu .dropdown-menu {
-    background: transparent !important;
-}
-
 body.desktop .dropdown-submenu .dropdown-menu {
     backdrop-filter: var(--dropdown-backdrop-filter);
     background: transparent;
 }
 
 .dropdown-item,
-body.mobile .dropdown-submenu .dropdown-toggle {
-    padding: 2px 2px 2px 8px !important;
-    padding-inline-end: 22px !important;
+.excalidraw .context-menu .context-menu-item {
+    --menu-item-start-padding: 8px;
+    --menu-item-end-padding: 22px;
+    --menu-item-vertical-padding: 2px;
+    
+    padding-top: var(--menu-item-vertical-padding) !important;
+    padding-bottom: var(--menu-item-vertical-padding) !important;
+    padding-inline-start: var(--menu-item-start-padding) !important;
+    padding-inline-end: var(--menu-item-end-padding) !important;
+
     /* Note: the right padding should also accommodate the submenu arrow. */
     border-radius: 6px;
     cursor: default !important;
@@ -174,10 +194,6 @@ body.mobile .dropdown-item:not(:last-of-type) {
     margin-bottom: 0.5em;
 }
 
-body.mobile .dropdown-submenu:hover {
-    background: transparent !important;
-}
-
 html body .dropdown-item.disabled,
 html body .dropdown-item[disabled] {
     color: var(--menu-text-color) !important;
@@ -202,7 +218,8 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item keyboard shortcut */
-.dropdown-item kbd {
+.dropdown-item kbd,
+.excalidraw .context-menu-item__shortcut {
     font-family: unset !important;
     font-size: unset !important;
     color: var(--menu-item-keyboard-shortcut-color) !important;
@@ -214,13 +231,15 @@ html body .dropdown-item[disabled] {
     margin-inline-start: 16px;
 }
 
-.dropdown-divider {
+.dropdown-divider,
+.excalidraw .context-menu hr {
     position: relative;
     border-color: transparent !important;
     overflow: visible;
 }
 
-.dropdown-divider::after {
+.dropdown-divider::after,
+.excalidraw .context-menu hr::before {
     position: absolute;
     content: "";
     top: -1px;
@@ -253,7 +272,9 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
 /* Menu item group heading */
 
 /* The heading body */
-.dropdown-menu h6 {
+.dropdown-menu h6,
+.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
+.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"] {
     position: relative;
     background: transparent;
     padding: 1em 8px 14px 8px;
@@ -264,7 +285,9 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
 }
 
 /* The delimiter line */
-.dropdown-menu h6::before {
+.dropdown-menu h6::before,
+.excalidraw .dropdown-menu-container .dropdown-menu-group-title::before,
+.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"]::before {
     content: "";
     position: absolute;
     bottom: 8px;
@@ -287,17 +310,126 @@ body.desktop .dropdown-menu.static .dropdown-item.active {
     --active-item-text-color: var(--menu-text-color);
 }
 
+/* #region Mobile tweaks for dropdown menus */
+body.mobile #context-menu-cover {
+    transition: background-color 150ms ease-in;
+
+    &.show {
+        background: rgba(0, 0, 0, 0.7);
+    }
+
+    &.global-menu-cover {
+        bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size));
+
+        @media (min-width: 992px) {
+            bottom: 0;
+        }
+    }
+}
+
+body.mobile .dropdown-menu.mobile-bottom-menu,
+body.mobile .dropdown.global-menu .dropdown-menu {
+    border-radius: var(--dropdown-border-radius) var(--dropdown-border-radius) 0 0;
+}
+
+body.mobile .dropdown-menu {
+    --dropdown-menu-padding-vertical: 0.7em;
+    --dropdown-menu-padding-horizontal: 1em;
+    --hover-item-background-color: var(--card-background-color);
+    font-size: 1em !important;
+    backdrop-filter: var(--dropdown-backdrop-filter);
+    position: relative;
+    
+    .dropdown-toggle::after {
+        top: 0.5em;
+        right: var(--dropdown-menu-padding-horizontal);
+        transform: translateX(50%) rotate(90deg);
+    }
+
+    .dropdown-item.submenu-open .dropdown-toggle::after {
+        transform: rotate(270deg);
+    }
+
+    .dropdown-item,
+    .dropdown-custom-item {
+        margin-bottom: 0;
+        padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horizontal) !important;
+        background: var(--card-background-color);
+        border-bottom: 1px solid var(--menu-item-delimiter-color) !important;
+        border-radius: 0;        
+    }
+
+    .dropdown-item:first-of-type,
+    .dropdown-divider + .dropdown-item,
+    .dropdown-custom-item:first-of-type,
+    .dropdown-divider + .dropdown-custom-item {
+        border-top-left-radius: 6px;
+        border-top-right-radius: 6px;
+    }
+
+    .dropdown-item:last-of-type,    
+    .dropdown-item:has(+ .dropdown-divider),
+    .dropdown-custom-item:last-of-type,    
+    .dropdown-custom-item:has(+ .dropdown-divider) {
+        border-bottom-left-radius: 6px;
+        border-bottom-right-radius: 6px;
+        border-bottom: 0 !important;
+    }
+
+    .dropdown-divider {
+        visibility: hidden;
+    }
+
+    .dropdown-submenu {
+        padding: 0 !important;
+        backdrop-filter: unset !important;
+
+        .dropdown-toggle {
+            padding: var(--dropdown-menu-padding-vertical) var(--dropdown-menu-padding-horizontal);
+        }
+
+        .dropdown-menu {
+            --menu-background-color: --menu-submenu-mobile-background-color;
+            --bs-dropdown-divider-margin-y: 0.25rem;
+            border-radius: 0;
+            max-height: 0;            
+            transition: max-height 100ms ease-in;
+            display: block !important;            
+            
+            &.show {
+                max-height: 1000px;
+                padding: 0.5rem 0.75rem !important;
+            }
+        }
+
+        &.submenu-open {
+            .dropdown-toggle {
+                padding-bottom: var(--dropdown-menu-padding-vertical);
+            }            
+        }
+    }
+
+    .dropdown-custom-item:has(.note-color-picker) {
+        overflow-x: auto;
+    }
+
+    .note-color-picker {
+        padding: 0;
+        width: fit-content;
+
+        .color-cell {
+            --color-picker-cell-size: 26px;
+            flex-shrink: 0;
+        }
+    }
+}
+/* #endregion */
+
 body.desktop .dropdown-menu .dropdown-toggle::after {
     height: 100%;
 }
 
-body.mobile .dropdown-menu .dropdown-toggle::after {
-    transform: rotate(90deg);
-}
 
-body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
-    transform: rotate(270deg);
-}
 
 /* Dropdown item button (used in zoom buttons in global menu) */
 
@@ -313,6 +445,12 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     outline: 2px solid var(--input-focus-outline-color) !important;
 }
 
+:root .dropdown-menu .note-color-picker {
+    padding: 4px 10px;
+    --note-color-picker-clear-color-cell-background: var(--main-text-color);
+    --note-color-picker-clear-color-cell-selection-outline-color: var(--main-text-color);
+}
+
 /*
  * TOASTS
  */
@@ -453,13 +591,21 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     --note-list-vertical-padding: 15px;
     background-color: var(--card-background-color);
     border: 1px solid var(--card-border-color) !important;
-    box-shadow: 2px 3px 4px var(--card-shadow-color);
     border-radius: 12px;
     user-select: none;
     padding: 0;
     margin: 5px 10px 5px 0;
 }
 
+:root .note-list .note-book-card:hover {
+    background-color: var(--card-background-hover-color);
+    transition: background-color 200ms ease-out;
+}
+
+:root .note-list.grid-view .note-book-card:active {
+    transform: scale(.98);
+}
+
 .note-list.list-view .note-book-card {
     box-shadow: 0 0 3px var(--card-shadow-color);
 }
@@ -468,10 +614,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     vertical-align: middle;
 }
 
-.note-list-wrapper .note-book-card:active {
-    background-color: var(--card-background-press-color);
-}
-
 .note-list-wrapper .note-book-card a {
     color: inherit !important;
 }
@@ -543,9 +685,14 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
     padding: 0;
 }
 
+.note-list-wrapper .note-book-card .note-book-content.type-code {
+    height: 100%;
+}
+
 .note-list-wrapper .note-book-card .note-book-content.type-code pre {
     height: 100%;
     padding: 1em;
+    margin-bottom: 0;
 }
 
 .note-list-wrapper .note-book-card .bx {
@@ -553,7 +700,6 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
 }
 
 .note-list.grid-view .note-book-card:hover {
-    background: var(--card-background-color) !important;
     filter: contrast(105%);
 }
 

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

@@ -25,6 +25,7 @@
 
 .modal .modal-header .btn-close,
 .modal .modal-header .help-button,
+.modal .modal-header .custom-title-bar-button,
 #toast-container .toast .toast-header .btn-close {
     display: flex;
     justify-content: center;
@@ -55,15 +56,17 @@
     font-family: boxicons;
 }
 
-.modal .modal-header .help-button {
+.modal .modal-header .help-button,
+.modal .modal-header .custom-title-bar-button {
     margin-inline-end: 0;
-    font-size: calc(var(--modal-control-button-size) * .75);
+    font-size: calc(var(--modal-control-button-size) * .70);
     font-family: unset;
     font-weight: bold;
 }
 
 .modal .modal-header .btn-close:hover,
 .modal .modal-header .help-button:hover,
+.modal .modal-header .custom-title-bar-button:hover,
 #toast-container .toast .toast-header .btn-close:hover {
     background: var(--modal-control-button-hover-background);
     color: var(--modal-control-button-hover-color);
@@ -71,6 +74,7 @@
 
 .modal .modal-header .btn-close:active,
 .modal .modal-header .help-button:active,
+.modal .modal-header .custom-title-bar-button:active,
 #toast-container .toast .toast-header .btn-close:active {
     transform: scale(.85);
 }
@@ -392,7 +396,8 @@ div.tn-tool-dialog {
 }
 
 .delete-notes-list .note-path {
-    padding-inline-end: 8px;
+    padding-inline-start: 8px;
+    color: var(--muted-text-color)
 }
 
 /*

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

@@ -17,6 +17,10 @@ button.ck.ck-button:is(.ck-button-action, .ck-button-save, .ck-button-cancel, .c
     padding: 4px 16px;
     background: var(--cmd-button-background-color);
     color: var(--cmd-button-text-color);
+
+    &.dropdown-toggle-split {
+        min-width: unset;
+    }
 }
 
 button.btn.btn-primary:hover,
@@ -142,6 +146,14 @@ button.btn.btn-success kbd {
     outline: 2px solid var(--input-focus-outline-color);
 }
 
+/* Button groups */
+
+/* Active button */
+:root .btn-group button.btn.active {
+    background-color: var(--button-group-active-button-background);
+    color: var(--button-group-active-button-text-color);
+}
+
 /* 
  * Input boxes
  */

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

@@ -0,0 +1,261 @@
+:root .excalidraw {
+    --ui-font: var(--main-font-family);
+
+
+    /* Button hover background color */
+    --button-hover-bg: var(--hover-item-background-color);
+    --color-surface-high: var(--hover-item-background-color);
+
+
+    --button-active-border: transparent;
+    --color-brand-active: transparent;
+
+    --color-surface-mid: transparent;
+    --color-surface-low: transparent;
+
+    /* Slider colors */
+    --color-slider-track: var(--menu-item-delimiter-color);
+    --color-slider-thumb: var(--muted-text-color);
+
+    /* Selected button icon fill color */
+    --color-on-primary-container: var(--ck-editor-toolbar-button-on-color);
+    --color-primary: var(--ck-editor-toolbar-button-on-color);
+
+    /* Selected button icon background color */
+    --color-surface-primary-container: var(--ck-editor-toolbar-button-on-background);
+    --color-primary-light: var(--ck-editor-toolbar-button-on-background);
+
+    --island-bg-color: var(--floating-button-background-color);
+
+}
+
+/* Dark theme tweaks */
+
+:root body .excalidraw.theme--dark {
+    --color-surface-high: transparent;
+    --color-brand-hover: transparent;
+}
+
+:root .excalidraw.theme--dark.excalidraw .App-mobile-menu,
+:root .excalidraw.theme--dark.excalidraw .App-menu__left {
+    --button-hover-bg: var(--hover-item-background-color);
+}
+
+:root .excalidraw.theme--dark.excalidraw .dropdown-menu-button:hover {
+    --background: var(--hover-item-background-color);
+}
+
+/* Backdrop blur pseudo-element */
+.Island:not(.App-menu__left)::before,
+.excalidraw .picker::before,
+:root .App-menu__left > .panelColumn > fieldset::before,
+:root .App-menu__left > .panelColumn > label::before,
+:root .App-menu__left > .panelColumn > div:has(> *)::before {
+    display: block;
+    position: absolute;
+    content: "";
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    backdrop-filter: blur(10px) saturate(6);
+    z-index: -1;
+}
+
+/* Note's root */
+
+:root .type-canvas {
+    --floating-buttons-vert-offset: 20px;
+}
+
+
+/* Context menus */
+
+/* Context menu - outer wrapper */
+:root .excalidraw .popover {
+    --padding: 0;
+
+    max-width: unset;
+    overflow: hidden;
+    font-family: var(--main-font-family);
+}
+
+/* Context menu - inner wrapper */
+:root .excalidraw .popover > .context-menu {
+    margin: 0;
+    padding: 8px !important;
+    overflow-y: auto;
+    overflow-x: hidden;
+    height: 100%;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    background: transparent;
+}
+
+/* Context menu item */
+:root .excalidraw .context-menu .context-menu-item {
+    --menu-item-start-padding: 22px;
+
+    border: 1px solid transparent;
+}
+
+/* Context menu item icon */
+:root .excalidraw .dropdown-menu-item__icon {
+    color: var(--menu-item-icon-color);
+}
+
+/* Context menu item label */
+:root .excalidraw .context-menu-item__label,
+:root .excalidraw .context-menu-item.dangerous .context-menu-item__label {
+    color: var(--menu-text-color);
+}
+
+:root .excalidraw .context-menu-item:hover .context-menu-item__label {
+    color: var(--hover-item-text-color);
+}
+
+/* Context menu item keyboard shortcut */
+:root .excalidraw .context-menu-item__shortcut {
+    padding: 0;
+    opacity: 1;
+}
+
+/* Context menu separator */
+.excalidraw .context-menu .context-menu-item-separator {
+    margin: 8px 0;
+    opacity: 1;
+}
+
+/* Main menu */
+
+/* Hide separators - no longer needed as the menu group headers feature a delimiter line */
+.excalidraw .Island.dropdown-menu-container>div:not(:has(>*)) {
+    display: none;
+}
+
+/* Menu group header */
+.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
+.excalidraw .Island.dropdown-menu-container div[data-testid="canvas-background-label"] {
+    margin: 0 !important;
+}
+
+/* Header */
+
+.excalidraw .App-menu.App-menu_top {
+    align-items: center;
+}
+
+.excalidraw .App-menu.App-menu_top .App-menu_top__left {
+    /* Fixes a layout glitch with the header when the options panel is visbile */
+    --gap: 0 !important;
+}
+
+/* The parent element of the "Library" button  */
+.excalidraw .App-menu.App-menu_top > div:nth-child(3) {
+    flex-direction: row-reverse;
+}
+
+/* Panels */
+
+.excalidraw .zoom-actions,
+.undo-redo-buttons {
+    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
+    backdrop-filter: blur(10px) saturate(6);
+}
+
+:root .excalidraw .main-menu-trigger,
+:root .excalidraw .sidebar-trigger,
+:root .excalidraw .help-icon  {
+    box-shadow: none;
+}
+
+/* Selected color outline */
+:root .excalidraw .color-picker__button.active .color-picker__button-outline {
+    box-shadow: 0 0 0 2px var(--input-focus-outline-color);
+}
+
+:root .excalidraw .buttonList label.active {
+    border-color: transparent;
+}
+
+/* Options panel */
+
+.excalidraw .Island.App-menu__left {
+    box-shadow: none;
+    background: transparent;
+    backdrop-filter: none;
+    width: 13.2em;
+}
+
+body[dir=ltr] .excalidraw .Island.App-menu__left {
+    right: 0;
+}
+
+body[dir=rtl] .excalidraw .Island.App-menu__left {
+    left: 0;
+}
+
+:root .App-menu__left > .panelColumn {
+    row-gap: 5px;
+}
+
+/* Options panel card */
+:root .App-menu__left > .panelColumn > fieldset,
+:root .App-menu__left > .panelColumn > label,
+:root .App-menu__left > .panelColumn > div:has(> *) {
+    position: relative;
+    margin: 0;
+    border-radius: 4px;
+    box-shadow: 1px 1px 1px var(--floating-button-shadow-color);
+    background: var(--floating-button-background-color);
+    padding: 8px 12px;
+
+    /* backdrop: blur() creates a new stacking context that prevents some popovers like the
+     * arrowheads picker from being positioned correctly. To workaround this, the backdrop blur
+     * effect is applyed using a pseudo-element instead. */
+}
+
+/* Options panel card title */
+:root .App-menu__left fieldset > legend,
+:root .App-menu__left div > h3,
+:root .App-menu__left > .panelColumn > label {
+    text-transform: uppercase;
+    font-size: .65rem;
+    letter-spacing: 1pt;
+    color: var(--muted-text-color);
+}
+
+/* Options panel button bar */
+:root .excalidraw .App-menu__left .buttonList {
+    padding: 0;
+}
+
+/* Picker */
+body[dir=ltr] .excalidraw .App-menu__left .buttonList .picker {
+    translate: -80% 0;
+}
+
+/* Properties panel */
+
+body[dir=ltr] .excalidraw .exc-stats {
+    left: 0;
+}
+
+body[dir=rtl] .excalidraw .exc-stats {
+    right: 0;
+}
+
+/* Sidebar */
+
+.split-note-container-widget > .component.type-canvas:has(.excalidraw-container > .Island.default-sidebar) > .floating-buttons {
+    /* Hide the floating buttons when the sidebar is open */
+    display: none;
+}
+
+/* Pickers */
+
+.excalidraw .picker {
+    position: relative;
+}

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

@@ -258,11 +258,6 @@
     border-inline-start: 1px solid var(--ck-color-toolbar-border);
 }
 
-/* The last separator of the toolbar */
-:root .classic-toolbar-widget .ck.ck-toolbar__separator:last-of-type {
-    flex-grow: 1;
-}
-
 /* Heading dropdown */
 
 :root .ck.ck-dropdown.ck-heading-dropdown .ck-dropdown__panel .ck-list__item {
@@ -354,6 +349,7 @@
     align-items: center;
     width: 100%;
     margin: 4px;
+    background: color-mix(in srgb, var(--accent) 15%, var(--main-background-color));
     padding-inline-end: 2em;
     border: 1px solid var(--accent);
     border-radius: 6px;
@@ -647,7 +643,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
     }
 }
 
-.note-detail-printable:not(.word-wrap) pre code {
+.ck-content:not(.word-wrap) pre code {
     white-space: pre;
 }
 
@@ -666,3 +662,29 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
     background: var(--accented-background-color);
     color: var(--main-text-color);
 }
+
+/* Reference link */
+
+.ck-content a.reference-link,
+.ck-content a.reference-link:hover {
+    /* Apply underline only to the span inside the link so it can follow the
+     * target note's user defined color */
+    text-decoration: none;
+}
+
+.ck-content a.reference-link > span {
+    text-decoration: underline;
+}
+
+/*
+ * Read-only text content
+ */
+
+.note-detail-readonly-text:focus-visible {
+    outline: 2px solid var(--input-focus-outline-color);
+    border-radius: 4px;
+}
+
+.note-list-widget {
+    outline: 0 !important;
+}

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

@@ -63,7 +63,7 @@
 
  /* Button bar */
  .search-definition-widget .search-setting-table tbody:last-child div {
-    justify-content: flex-end !important;
+    justify-content: flex-end;
     gap: 8px;
  }
 
@@ -101,7 +101,7 @@
 .sql-table-schemas-widget .sql-table-schemas button:hover,
 .sql-table-schemas-widget .sql-table-schemas button:active,
 .sql-table-schemas-widget .sql-table-schemas button:focus-visible {
-    --background: var(--card-background-press-color);
+    --background: var(--card-background-hover-color);
     --color: var(--main-text-color);
 }
 
@@ -123,9 +123,9 @@
  */
 
 /* The container */
-div.note-detail-empty {
-    max-width: 70%;
-    margin: 50px auto;
+
+.note-split.empty-note div.note-detail {
+    margin-inline: auto;
 }
 
 /* The search results list */
@@ -148,7 +148,7 @@ div.note-detail-empty {
     --options-card-min-width: 500px;
     --options-card-max-width: 900px;
     --options-card-padding: 17px;
-    --options-title-font-size: 1rem;
+    --options-title-font-size: .75rem;
     --options-title-offset: 13px;
 }
 /* Create a gap at the top of the option pages */
@@ -173,16 +173,19 @@ div.note-detail-empty {
 }
 
 .options-section:not(.tn-no-card) {
-    margin: auto;    
-    border-radius: 12px;
-    border: 1px solid var(--card-border-color) !important;
+    margin-bottom: calc(var(--options-title-offset) + 26px) !important;
     box-shadow: var(--card-box-shadow);
+    border: 1px solid var(--card-border-color) !important;
+    border-radius: 8px;
     background: var(--card-background-color);
     padding: var(--options-card-padding);
-    margin-bottom: calc(var(--options-title-offset) + 26px) !important;
 }
 
-body.desktop .option-section:not(.tn-no-card) {
+body.prefers-centered-content .options-section:not(.tn-no-card) {
+    margin-inline: auto;
+}
+
+body.desktop .options-section:not(.tn-no-card) {
     min-width: var(--options-card-min-width);
     max-width: var(--options-card-max-width);
 }
@@ -193,9 +196,16 @@ body.desktop .option-section:not(.tn-no-card) {
     padding-bottom: var(--default-padding);
 }
 
+.options-section:not(.tn-no-card) h4,
+.options-section:not(.tn-no-card) h5 {
+    text-transform: uppercase;
+    letter-spacing: .4pt;
+}
+
+
 .options-section:not(.tn-no-card) h4 {
     font-size: var(--options-title-font-size);
-    font-weight: bold;
+    font-weight: 600;
     color: var(--launcher-pane-text-color);
     margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important;
     margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important;

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

@@ -34,6 +34,7 @@
 div.promoted-attributes-container {
     margin-top: 8px;
     margin-bottom: 8px;
+    margin-inline-start: 12px;
 }
 
 /*
@@ -41,7 +42,7 @@ div.promoted-attributes-container {
  */
 
  /* The property label */
-.note-info-widget-table th,
+.note-info-item > span:first-child,
 .file-properties-widget .file-table th,
 .image-properties > div:first-child > span > strong {
     opacity: 0.65;
@@ -49,7 +50,6 @@ div.promoted-attributes-container {
     vertical-align: top;
 }
 
-.note-info-widget-table td,
 .file-properties-widget .file-table td {
     vertical-align: top;
 }