feat(llm): migrate the calendar tool into the manage_note tool

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

@@ -10,9 +10,9 @@ runs:
   steps:
   - uses: pnpm/action-setup@v4
   - name: Set up node & dependencies
-    uses: actions/setup-node@v6
+    uses: actions/setup-node@v5
     with:
-      node-version: 24
+      node-version: 22
       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@v6
+      uses: actions/checkout@v5
       with:
         ref: ${{ inputs.branch }}
         path: br-base

.github/copilot-instructions.md

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

.github/workflows/checks.yml

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

.github/workflows/codeql.yml

@@ -57,7 +57,7 @@ jobs:
         # your codebase is analyzed, see https://docs.github.com/en/code-security/code-scanning/creating-an-advanced-setup-for-code-scanning/codeql-code-scanning-for-compiled-languages
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v6
+      uses: actions/checkout@v5
 
     # Add any setup steps before running the `github/codeql-action/init` action.
     # This includes steps like installing compilers or runtimes (`actions/setup-node`

.github/workflows/deploy-docs.yml

@@ -1,4 +1,6 @@
-name: Deploy Documentation
+# 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
 
 on:
   # Trigger on push to main branch
@@ -9,9 +11,11 @@ on:
     # Only run when docs files change
     paths:
       - 'docs/**'
-      - 'apps/edit-docs/**'
-      - 'apps/build-docs/**'
-      - 'packages/share-theme/**'
+      - 'README.md'  # README is synced to docs/index.md
+      - 'mkdocs.yml'
+      - 'requirements-docs.txt'
+      - '.github/workflows/deploy-docs.yml'
+      - 'scripts/fix-mkdocs-structure.ts'
 
   # Allow manual triggering from Actions tab
   workflow_dispatch:
@@ -23,13 +27,15 @@ on:
       - master
     paths:
       - 'docs/**'
-      - 'apps/edit-docs/**'
-      - 'apps/build-docs/**'
-      - 'packages/share-theme/**'
+      - 'README.md'  # README is synced to docs/index.md
+      - 'mkdocs.yml'
+      - 'requirements-docs.txt'
+      - '.github/workflows/deploy-docs.yml'
+      - 'scripts/fix-mkdocs-structure.ts'
 
 jobs:
   build-and-deploy:
-    name: Build and Deploy Documentation
+    name: Build and Deploy MkDocs
     runs-on: ubuntu-latest
     timeout-minutes: 10
 
@@ -42,32 +48,77 @@ jobs:
 
     steps:
       - name: Checkout Repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
+        with:
+          fetch-depth: 0 # Fetch all history for git info and mkdocs-git-revision-date plugin
 
+      - 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@v6
+        uses: actions/setup-node@v5
         with:
-          node-version: '24'
+          node-version: '22'
           cache: 'pnpm'
 
+      # Install Node.js dependencies for the TypeScript script
       - name: Install Dependencies
-        run: pnpm install --frozen-lockfile
+        run: |
+          pnpm install --frozen-lockfile
 
-      - name: Trigger build of documentation
-        run: pnpm docs:build
+      - 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: 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/developer-guide/index.html || (echo "ERROR: site/developer-guide/index.html not found" && exit 1)
-          echo "✓ User Guide and Developer Guide built successfully"
+          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"
 
       - name: Deploy
         uses: ./.github/actions/deploy-to-cloudflare-pages
-        if: github.repository == ${{ vars.REPO_MAIN }}
+        if: github.repository == ${{ vars.REPO_MAIN }} && ${{secrets.CLOUDFLARE_API_TOKEN}}
         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@v6
+        uses: actions/checkout@v5
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
-          node-version: 24
+          node-version: 22
           cache: "pnpm"
       - run: pnpm install --frozen-lockfile
 
@@ -46,7 +46,7 @@ jobs:
     needs:
       - test_dev
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
       - 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@v6
+        uses: actions/checkout@v5
 
       - 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@v6
+        uses: actions/checkout@v5
 
       - name: Set IMAGE_NAME to lowercase
         run: echo "IMAGE_NAME=${IMAGE_NAME,,}" >> $GITHUB_ENV
@@ -44,9 +44,9 @@ jobs:
 
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
-          node-version: 24
+          node-version: 22
           cache: "pnpm"
 
       - name: Install npm dependencies
@@ -86,12 +86,12 @@ jobs:
 
       - name: Upload Playwright trace
         if: failure()
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v4
         with:
           name: Playwright trace (${{ matrix.dockerfile }})
           path: test-output/playwright/output
 
-      - uses: actions/upload-artifact@v5
+      - uses: actions/upload-artifact@v4
         if: ${{ !cancelled() }}
         with:
           name: Playwright report (${{ matrix.dockerfile }})
@@ -116,10 +116,10 @@ jobs:
           - dockerfile: Dockerfile
             platform: linux/arm64
             image: ubuntu-24.04-arm
-          - dockerfile: Dockerfile.legacy
+          - dockerfile: Dockerfile
             platform: linux/arm/v7
             image: ubuntu-24.04-arm
-          - dockerfile: Dockerfile.legacy
+          - dockerfile: Dockerfile
             platform: linux/arm/v8
             image: ubuntu-24.04-arm
     runs-on: ${{ matrix.image }}
@@ -141,12 +141,12 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Checkout repository
-        uses: actions/checkout@v6
+        uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
-          node-version: 24
+          node-version: 22
           cache: 'pnpm'
 
       - name: Install dependencies
@@ -155,10 +155,6 @@ 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
 
@@ -213,7 +209,7 @@ jobs:
           touch "/tmp/digests/${digest#sha256:}"
 
       - name: Upload digest
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v4
         with:
           name: digests-${{ env.PLATFORM_PAIR }}-${{ matrix.dockerfile }}
           path: /tmp/digests/*
@@ -227,7 +223,7 @@ jobs:
       - build
     steps:
       - name: Download digests
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@v5
         with:
           path: /tmp/digests
           pattern: digests-*

.github/workflows/nightly.yml

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

.github/workflows/playwright.yml

@@ -4,7 +4,6 @@ on:
   push:
     branches:
       - main
-      - hotfix
     paths-ignore:
       - "apps/website/**"
   pull_request:
@@ -14,74 +13,29 @@ permissions:
   contents: read
 
 jobs:
-  e2e:
-    strategy:
-      fail-fast: false
-      matrix:
-        include:
-          - name: linux-x64
-            os: ubuntu-22.04
-            arch: x64
-          - name: linux-arm64
-            os: ubuntu-24.04-arm
-            arch: arm64
-    runs-on: ${{ matrix.os }}
-    name: E2E tests on ${{ matrix.name }}
-    env:
-      TRILIUM_DOCKER: 1
-      TRILIUM_PORT: 8082
-      TRILIUM_DATA_DIR: "${{ github.workspace }}/apps/server/spec/db"
-      TRILIUM_INTEGRATION_TEST: memory
+  main:
+    runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
         with:
           filter: tree:0
           fetch-depth: 0
 
       - uses: pnpm/action-setup@v4
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v5
         with:
-          node-version: 24
+          node-version: 22
           cache: 'pnpm'
 
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+      - run: pnpm exec playwright install --with-deps
 
-      - 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
+      - run: pnpm --filter server-e2e e2e
 
       - name: Upload test report
         if: failure()
-        uses: actions/upload-artifact@v5
+        uses: actions/upload-artifact@v4
         with:
-          name: e2e report ${{ matrix.arch }}
+          name: e2e report
           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@v6
+      - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
-          node-version: 24
+          node-version: 22
           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@v5
+        uses: actions/upload-artifact@v4
         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@v6
+      - uses: actions/checkout@v5
 
       - 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@v5
+        uses: actions/upload-artifact@v4
         with:
           name: release-server-linux-${{ matrix.arch }}
           path: upload/*.*
@@ -114,20 +114,20 @@ jobs:
     steps:
       - run: mkdir upload
 
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v5
         with:
           sparse-checkout: |
             docs/Release Notes
 
       - name: Download all artifacts
-        uses: actions/download-artifact@v6
+        uses: actions/download-artifact@v5
         with:
           merge-multiple: true
           pattern: release-*
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.4.2
+        uses: softprops/action-gh-release@v2.4.0
         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@v6
+      - uses: actions/checkout@v5
       - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
-        uses: actions/setup-node@v6
+        uses: actions/setup-node@v5
         with:
-          node-version: 24
+          node-version: 22
           cache: "pnpm"
 
       - name: Install dependencies

.nvmrc

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

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

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

.vscode/settings.json

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

README.md

@@ -1,14 +1,3 @@
-<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)  
@@ -24,10 +13,6 @@ 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,20 +35,22 @@
     "chore:generate-openapi": "tsx bin/generate-openapi.js"
   },
   "devDependencies": {    
-    "@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",
+    "@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",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "esm": "3.2.25",
     "jsdoc": "4.0.5",
     "lorem-ipsum": "2.0.8",    
-    "rcedit": "5.0.2",
-    "rimraf": "6.1.2",    
-    "tslib": "2.8.1" 
+    "rcedit": "4.0.1",
+    "rimraf": "6.0.1",    
+    "tslib": "2.8.1",    
+    "typedoc": "0.28.13",
+    "typedoc-plugin-missing-exports": "4.1.0"
   },
   "optionalDependencies": {
     "appdmg": "0.6.6"

_regroup/spec/support/etapi.ts

@@ -1,3 +1,4 @@
+import type child_process from "child_process";
 import { describe, beforeAll, afterAll } from "vitest";
 
 let etapiAuthToken: string | undefined;
@@ -11,6 +12,8 @@ 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

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

apps/build-docs/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "build-docs",
-  "version": "1.0.0",
-  "description": "",
-  "main": "src/main.ts",
-  "scripts": {
-    "start": "tsx ."
-  },
-  "keywords": [],
-  "author": "Elian Doran <contact@eliandoran.me>",
-  "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.24.0",
-  "devDependencies": {
-    "@redocly/cli": "2.12.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

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

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

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

apps/build-docs/src/context.ts

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

apps/build-docs/src/frontend_script_entrypoint.ts

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

apps/build-docs/src/index.html

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

apps/build-docs/src/main.ts

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

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

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

apps/build-docs/src/swagger.ts

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

apps/build-docs/tsconfig.app.json

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

apps/build-docs/tsconfig.json

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

apps/build-docs/typedoc.backend.json

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

apps/build-docs/typedoc.frontend.json

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

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.100.0",
+  "version": "0.99.1",
   "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.39.1",
+    "@eslint/js": "9.37.0",
     "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.19",
     "@fullcalendar/daygrid": "6.1.19",
@@ -25,41 +25,40 @@
     "@fullcalendar/timegrid": "6.1.19",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
     "@mermaid-js/layout-elk": "0.2.0",
-    "@mind-elixir/node-menu": "5.0.1",
+    "@mind-elixir/node-menu": "5.0.0",
     "@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",
-    "clsx": "2.1.1",
-    "color": "5.0.3",
-    "debounce": "3.0.0",
+    "dayjs": "1.11.18",
+    "dayjs-plugin-utc": "0.1.2",
+    "debounce": "2.2.0",
     "draggabilly": "3.0.0",
     "force-graph": "1.51.0",
-    "globals": "16.5.0",
-    "i18next": "25.6.3",
+    "globals": "16.4.0",
+    "i18next": "25.5.3",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.25",
+    "katex": "0.16.23",
     "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "17.0.1",
-    "mermaid": "11.12.1",
-    "mind-elixir": "5.3.7",
+    "marked": "16.4.0",
+    "mermaid": "11.12.0",
+    "mind-elixir": "5.3.2",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
     "preact": "10.27.2",
-    "react-i18next": "16.3.5",
-    "reveal.js": "5.2.1",
+    "react-i18next": "16.0.0",
+    "split.js": "1.6.5",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
     "vanilla-js-wheel-zoom": "9.0.4"
@@ -69,14 +68,13 @@
     "@preact/preset-vite": "2.10.2",
     "@types/bootstrap": "5.2.10",
     "@types/jquery": "3.5.33",
-    "@types/leaflet": "1.9.21",
+    "@types/leaflet": "1.9.20",
     "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
-    "@types/reveal.js": "5.2.1",
-    "@types/tabulator-tables": "6.3.0",
+    "@types/tabulator-tables": "6.2.11",
     "copy-webpack-plugin": "13.0.1",
-    "happy-dom": "20.0.11",
+    "happy-dom": "20.0.0",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.1.4"
+    "vite-plugin-static-copy": "3.1.3"
   }
 }

apps/client/src/components/app_context.ts

@@ -13,6 +13,7 @@ import MainTreeExecutors from "./main_tree_executors.js";
 import toast from "../services/toast.js";
 import ShortcutComponent from "./shortcut_component.js";
 import { t, initLocale } from "../services/i18n.js";
+import type NoteDetailWidget from "../widgets/note_detail.js";
 import type { ResolveOptions } from "../widgets/dialogs/delete_notes.js";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
 import type { ConfirmWithMessageOptions, ConfirmWithTitleOptions } from "../widgets/dialogs/confirm.js";
@@ -20,6 +21,8 @@ import type LoadResults from "../services/load_results.js";
 import type { Attribute } from "../services/attribute_parser.js";
 import type NoteTreeWidget from "../widgets/note_tree.js";
 import type { default as NoteContext, GetTextEditorCallback } from "./note_context.js";
+import type TypeWidget from "../widgets/type_widgets/type_widget.js";
+import type EditableTextTypeWidget from "../widgets/type_widgets/editable_text.js";
 import type { NativeImage, TouchBar } from "electron";
 import TouchBarComponent from "./touch_bar.js";
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
@@ -30,10 +33,6 @@ 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;
@@ -200,7 +199,7 @@ export type CommandMappings = {
     resetLauncher: ContextMenuCommandData;
 
     executeInActiveNoteDetailWidget: CommandData & {
-        callback: (value: ReactWrappedWidget) => void;
+        callback: (value: NoteDetailWidget | PromiseLike<NoteDetailWidget>) => void;
     };
     executeWithTextEditor: CommandData &
     ExecuteCommandData<CKTextEditor> & {
@@ -212,19 +211,19 @@ export type CommandMappings = {
      * Generally should not be invoked manually, as it is used by {@link NoteContext.getContentElement}.
      */
     executeWithContentElement: CommandData & ExecuteCommandData<JQuery<HTMLElement>>;
-    executeWithTypeWidget: CommandData & ExecuteCommandData<ReactWrappedWidget | null>;
+    executeWithTypeWidget: CommandData & ExecuteCommandData<TypeWidget | null>;
     addTextToActiveEditor: CommandData & {
         text: string;
     };
     /** Works only in the electron context menu. */
     replaceMisspelling: CommandData;
 
+    importMarkdownInline: CommandData;
     showPasswordNotSet: CommandData;
     showProtectedSessionPasswordDialog: CommandData;
     showUploadAttachmentsDialog: CommandData & { noteId: string };
-    showIncludeNoteDialog: CommandData & IncludeNoteOpts;
-    showAddLinkDialog: CommandData & AddLinkOpts;
-    showPasteMarkdownDialog: CommandData & MarkdownImportOpts;
+    showIncludeNoteDialog: CommandData & { textTypeWidget: EditableTextTypeWidget };
+    showAddLinkDialog: CommandData & { textTypeWidget: EditableTextTypeWidget, text: string };
     closeProtectedSessionPasswordDialog: CommandData;
     copyImageReferenceToClipboard: CommandData;
     copyImageToClipboard: CommandData;
@@ -271,7 +270,6 @@ export type CommandMappings = {
     closeThisNoteSplit: CommandData;
     moveThisNoteSplit: CommandData & { isMovingLeft: boolean };
     jumpToNote: CommandData;
-    openTodayNote: CommandData;
     commandPalette: CommandData;
 
     // Keyboard shortcuts
@@ -329,7 +327,6 @@ export type CommandMappings = {
     exportAsPdf: CommandData;
     openNoteExternally: CommandData;
     openNoteCustom: CommandData;
-    openNoteOnServer: CommandData;
     renderActiveNote: CommandData;
     unhoist: CommandData;
     reloadFrontendApp: CommandData;
@@ -445,7 +442,6 @@ type EventMappings = {
         error: string;
     };
     searchRefreshed: { ntxId?: string | null };
-    textEditorRefreshed: { ntxId?: string | null, editor: CKTextEditor };
     hoistedNoteChanged: {
         noteId: string;
         ntxId: string | null;
@@ -487,9 +483,14 @@ type EventMappings = {
     relationMapResetPanZoom: { ntxId: string | null | undefined };
     relationMapResetZoomIn: { ntxId: string | null | undefined };
     relationMapResetZoomOut: { ntxId: string | null | undefined };
-    activeNoteChanged: {ntxId: string | null | undefined};
-    showAddLinkDialog: AddLinkOpts;
-    showIncludeDialog: IncludeNoteOpts;
+    activeNoteChanged: {};
+    showAddLinkDialog: {
+        textTypeWidget: EditableTextTypeWidget;
+        text: string;
+    };
+    showIncludeDialog: {
+        textTypeWidget: EditableTextTypeWidget;
+    };
     openBulkActionsDialog: {
         selectedOrActiveNoteIds: string[];
     };
@@ -497,10 +498,6 @@ type EventMappings = {
         noteIds: string[];
     };
     refreshData: { ntxId: string | null | undefined };
-    contentSafeMarginChanged: {
-        top: number;
-        noteContext: NoteContext;
-    }
 };
 
 export type EventListener<T extends EventNames> = {
@@ -668,10 +665,6 @@ 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,16 +159,6 @@ export default class Entrypoints extends Component {
         this.openInWindowCommand({ notePath: "", hoistedNoteId: "root" });
     }
 
-    async openTodayNoteCommand() {
-        const todayNote = await dateNoteService.getTodayNote();
-        if (!todayNote) {
-            console.warn("Missing today note.");
-            return;
-        }
-
-        await appContext.tabManager.openInSameTab(todayNote.noteId);
-    }
-
     async runActiveNoteCommand() {
         const noteContext = appContext.tabManager.getActiveContext();
         if (!noteContext) {

apps/client/src/components/note_context.ts

@@ -9,10 +9,10 @@ import hoistedNoteService from "../services/hoisted_note.js";
 import options from "../services/options.js";
 import type { ViewScope } from "../services/link.js";
 import type FNote from "../entities/fnote.js";
+import type TypeWidget from "../widgets/type_widgets/type_widget.js";
 import type { CKTextEditor } from "@triliumnext/ckeditor5";
 import type CodeMirror from "@triliumnext/codemirror";
 import { closeActiveDialog } from "../services/dialog.js";
-import { ReactWrappedWidget } from "../widgets/basic_widget.js";
 
 export interface SetNoteOpts {
     triggerSwitchEvent?: unknown;
@@ -321,21 +321,15 @@ 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;
@@ -401,7 +395,7 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
     async getTypeWidget() {
         return this.timeout(
-            new Promise<ReactWrappedWidget | null>((resolve) =>
+            new Promise<TypeWidget | null>((resolve) =>
                 appContext.triggerCommand("executeWithTypeWidget", {
                     resolve,
                     ntxId: this.ntxId
@@ -444,22 +438,4 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
     }
 }
 
-export function openInCurrentNoteContext(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, notePath: string, viewScope?: ViewScope) {
-    const ntxId = $(evt?.target as Element)
-        .closest("[data-ntx-id]")
-        .attr("data-ntx-id");
-
-    const noteContext = ntxId ? appContext.tabManager.getNoteContextById(ntxId) : appContext.tabManager.getActiveContext();
-
-    if (noteContext) {
-        noteContext.setNote(notePath, { viewScope }).then(() => {
-            if (noteContext !== appContext.tabManager.getActiveContext()) {
-                appContext.tabManager.activateNoteContext(noteContext.ntxId);
-            }
-        });
-    } else {
-        appContext.tabManager.openContextWithNote(notePath, { viewScope, activate: true });
-    }
-}
-
 export default NoteContext;

apps/client/src/components/root_command_executor.ts

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

apps/client/src/components/tab_manager.ts

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

apps/client/src/desktop.ts

@@ -58,7 +58,6 @@ function initOnElectron() {
 
     initDarkOrLightMode(style);
     initTransparencyEffects(style, currentWindow);
-    initFullScreenDetection(currentWindow);
 
     if (options.get("nativeTitleBarVisible") !== "true") {
         initTitleBarButtons(style, currentWindow);
@@ -88,11 +87,6 @@ function initTitleBarButtons(style: CSSStyleDeclaration, currentWindow: Electron
     }
 }
 
-function initFullScreenDetection(currentWindow: Electron.BrowserWindow) {
-    currentWindow.on("enter-full-screen", () => document.body.classList.add("full-screen"));
-    currentWindow.on("leave-full-screen", () => document.body.classList.remove("full-screen"));
-}
-
 function initTransparencyEffects(style: CSSStyleDeclaration, currentWindow: Electron.BrowserWindow) {
     if (window.glob.platform === "win32") {
         const material = style.getPropertyValue("--background-material");

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 || aNote.isArchived || aNote.isHiddenCompletely()) {
+            if (aNote.isArchived || aNote.isHiddenCompletely()) {
                 return 1;
             }
 
@@ -256,23 +256,6 @@ 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()) {
@@ -435,7 +418,7 @@ export default class FNote {
         return notePaths;
     }
 
-    getSortedNotePathRecords(hoistedNoteId = "root", activeNotePath: string | null = null): NotePathRecord[] {
+    getSortedNotePathRecords(hoistedNoteId = "root"): NotePathRecord[] {
         const isHoistedRoot = hoistedNoteId === "root";
 
         const notePaths: NotePathRecord[] = this.getAllNotePaths().map((path) => ({
@@ -446,23 +429,7 @@ export default class FNote {
             isHidden: path.includes("_hidden")
         }));
 
-        // Calculate the length of the prefix match between two arrays
-        const prefixMatchLength = (path: string[], target: string[]) => {
-            const diffIndex = path.findIndex((seg, i) => seg !== target[i]);
-            return diffIndex === -1 ? Math.min(path.length, target.length) : diffIndex;
-        };
-
         notePaths.sort((a, b) => {
-            if (activeNotePath) {
-                const activeSegments = activeNotePath.split('/');
-                const aOverlap = prefixMatchLength(a.notePath, activeSegments);
-                const bOverlap = prefixMatchLength(b.notePath, activeSegments);
-                // Paths with more matching prefix segments are prioritized
-                // when the match count is equal, other criteria are used for sorting
-                if (bOverlap !== aOverlap) {
-                    return bOverlap - aOverlap;
-                }
-            }
             if (a.isInHoistedSubTree !== b.isInHoistedSubTree) {
                 return a.isInHoistedSubTree ? -1 : 1;
             } else if (a.isArchived !== b.isArchived) {
@@ -483,11 +450,10 @@ export default class FNote {
      * Returns the note path considered to be the "best"
      *
      * @param {string} [hoistedNoteId='root']
-     * @param {string|null} [activeNotePath=null]
      * @return {string[]} array of noteIds constituting the particular note path
      */
-    getBestNotePath(hoistedNoteId = "root", activeNotePath: string | null = null) {
-        return this.getSortedNotePathRecords(hoistedNoteId, activeNotePath)[0]?.notePath;
+    getBestNotePath(hoistedNoteId = "root") {
+        return this.getSortedNotePathRecords(hoistedNoteId)[0]?.notePath;
     }
 
     /**
@@ -620,7 +586,7 @@ export default class FNote {
         let childBranches = this.getChildBranches();
 
         if (!childBranches) {
-            console.error(`No children for '${this.noteId}'. This shouldn't happen.`);
+            ws.logError(`No children for '${this.noteId}'. This shouldn't happen.`);
             return [];
         }
 
@@ -806,16 +772,6 @@ export default class FNote {
         return this.getAttributeValue(LABEL, name);
     }
 
-    getLabelOrRelation(nameWithPrefix: string) {
-        if (nameWithPrefix.startsWith("#")) {
-            return this.getLabelValue(nameWithPrefix.substring(1));
-        } else if (nameWithPrefix.startsWith("~")) {
-            return this.getRelationValue(nameWithPrefix.substring(1));
-        } else {
-            return this.getLabelValue(nameWithPrefix);
-        }
-    }
-
     /**
      * @param name - relation name
      * @returns relation value if relation exists, null otherwise
@@ -867,7 +823,8 @@ export default class FNote {
             return [];
         }
 
-        const promotedAttrs = this.getAttributeDefinitions()
+        const promotedAttrs = this.getAttributes()
+            .filter((attr) => attr.isDefinition())
             .filter((attr) => {
                 const def = attr.getDefinition();
 
@@ -887,11 +844,6 @@ export default class FNote {
         return promotedAttrs;
     }
 
-    getAttributeDefinitions() {
-        return this.getAttributes()
-            .filter((attr) => attr.isDefinition());
-    }
-
     hasAncestor(ancestorNoteId: string, followTemplates = false, visitedNoteIds: Set<string> | null = null) {
         if (this.noteId === ancestorNoteId) {
             return true;

apps/client/src/layouts/desktop_layout.tsx

@@ -1,50 +1,47 @@
-import { applyModals } from "./layout_commons.js";
-import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
-import ApiLog from "../widgets/api_log.jsx";
-import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
-import CloseZenModeButton from "../widgets/close_zen_button.jsx";
-import ContentHeader from "../widgets/containers/content_header.js";
-import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
-import FindWidget from "../widgets/find.js";
 import FlexContainer from "../widgets/containers/flex_container.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import GlobalMenu from "../widgets/buttons/global_menu.jsx";
-import HighlightsListWidget from "../widgets/highlights_list.js";
-import 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 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 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";
+import { applyModals } from "./layout_commons.js";
+import Ribbon from "../widgets/ribbon/Ribbon.jsx";
+import FloatingButtons from "../widgets/FloatingButtons.jsx";
+import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
+import SearchResult from "../widgets/search_result.jsx";
+import GlobalMenu from "../widgets/buttons/global_menu.jsx";
+import SqlResults from "../widgets/sql_result.js";
+import SqlTableSchemas from "../widgets/sql_table_schemas.js";
+import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
+import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
+import ApiLog from "../widgets/api_log.jsx";
+import CloseZenModeButton from "../widgets/close_zen_button.jsx";
+import SharedInfo from "../widgets/shared_info.jsx";
+import NoteList from "../widgets/collections/NoteList.jsx";
 
 export default class DesktopLayout {
 
@@ -132,19 +129,16 @@ 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 ContentHeader()
-                                                                    .child(<ReadOnlyNoteInfoBar />)
-                                                                    .child(<SharedInfo />)
-                                                                )
-                                                                .child(<PromotedAttributes />)
+                                                                .child(new PromotedAttributesWidget())
                                                                 .child(<SqlTableSchemas />)
-                                                                .child(<NoteDetail />)
-                                                                .child(<NoteList media="screen" />)
+                                                                .child(new NoteDetailWidget())
+                                                                .child(<NoteList />)
                                                                 .child(<SearchResult />)
                                                                 .child(<SqlResults />)
                                                                 .child(<ScrollPadding />)

apps/client/src/layouts/layout_commons.tsx

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

apps/client/src/layouts/mobile_layout.tsx

@@ -1,39 +1,32 @@
-import { applyModals } from "./layout_commons.js";
-import { MOBILE_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
-import { useNoteContext } from "../widgets/react/hooks.jsx";
-import CloseZenModeButton from "../widgets/close_zen_button.js";
-import FilePropertiesTab from "../widgets/ribbon/FilePropertiesTab.jsx";
 import FlexContainer from "../widgets/containers/flex_container.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
-import LauncherContainer from "../widgets/containers/launcher_container.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 NoteDetailWidget from "../widgets/note_detail.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
-import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
-import RootContainer from "../widgets/containers/root_container.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 SearchDefinitionTab from "../widgets/ribbon/SearchDefinitionTab.jsx";
-import SearchResult from "../widgets/search_result.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 StandaloneRibbonAdapter from "../widgets/ribbon/components/StandaloneRibbonAdapter.jsx";
-import TabRowWidget from "../widgets/tab_row.js";
-import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
 import type AppContext from "../components/app_context.js";
-import NoteDetail from "../widgets/NoteDetail.jsx";
-import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
-import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
-import SplitNoteContainer from "../widgets/containers/split_note_container.js";
+import 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";
 
 const MOBILE_CSS = `
 <style>
-span.keyboard-shortcut,
 kbd {
     display: none;
 }
@@ -143,7 +136,6 @@ 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")
@@ -154,27 +146,21 @@ export default class MobileLayout {
                                             .child(<NoteTitleWidget />)
                                             .child(<MobileDetailMenu />)
                                     )
+                                    .child(<SharedInfoWidget />)
                                     .child(<FloatingButtons items={MOBILE_FLOATING_BUTTONS} />)
-                                        .child(<PromotedAttributes />)
+                                    .child(new PromotedAttributesWidget())
                                     .child(
                                         new ScrollingContainer()
                                             .filling()
                                             .contentSized()
-                                                .child(new ContentHeader()
-                                                    .child(<ReadOnlyNoteInfoBar />)
-                                                    .child(<SharedInfoWidget />)
-                                                )
-                                                .child(<NoteDetail />)
-                                                .child(<NoteList media="screen" />)
-                                                .child(<StandaloneRibbonAdapter component={SearchDefinitionTab} />)
-                                                .child(<SearchResult />)
+                                            .child(new NoteDetailWidget())
+                                            .child(<NoteList />)
                                             .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 { h, JSX, render } from "preact";
+import { should } from "vitest";
 
 export interface ContextMenuOptions<T> {
     x: number;
@@ -15,11 +15,6 @@ export interface ContextMenuOptions<T> {
     onHide?: () => void;
 }
 
-export interface CustomMenuItem {
-    kind: "custom",
-    componentFn: () => JSX.Element | null;
-}
-
 export interface MenuSeparatorItem {
     kind: "separator";
 }
@@ -56,7 +51,7 @@ export interface MenuCommandItem<T> {
     columns?: number;
 }
 
-export type MenuItem<T> = MenuCommandItem<T> | CustomMenuItem | MenuSeparatorItem | MenuHeader;
+export type MenuItem<T> = MenuCommandItem<T> | MenuSeparatorItem | MenuHeader;
 export type MenuHandler<T> = (item: MenuCommandItem<T>, e: JQuery.MouseDownEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => void;
 export type ContextMenuEvent = PointerEvent | MouseEvent | JQuery.ContextMenuEvent;
 
@@ -165,19 +160,16 @@ 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 (itemKind === "header") {
+            if ("kind" in item && item.kind === "header") {
                 if (multicolumn && !shouldResetGroup) {
                     shouldStartNewGroup = true;
                 }
@@ -203,47 +195,13 @@ class ContextMenu {
                 shouldStartNewGroup = false;
             }
 
-            if (itemKind === "separator") {
-                if (prevItemKind === "separator") {
-                    // Skip consecutive separators
-                    continue;
-                }
+            if ("kind" in item && item.kind === "separator") {
                 $group.append($("<div>").addClass("dropdown-divider"));
                 shouldResetGroup = true; // End the group after the next item
-            } else if (itemKind === "header") {
-                $group.append($("<h6>").addClass("dropdown-header").text((item as MenuHeader).title));
+            } else if ("kind" in item && item.kind === "header") {
+                $group.append($("<h6>").addClass("dropdown-header").text(item.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) {
@@ -299,6 +257,8 @@ 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;
@@ -312,11 +272,6 @@ 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);
                         }
@@ -328,6 +283,16 @@ 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");
                 }
@@ -346,7 +311,17 @@ class ContextMenu {
 
                     $item.append($subMenu);
                 }
-        return $item;
+
+                $group.append($item);
+
+                // After adding a menu item, if the previous item was a separator or header,
+                // reset the group so that the next item will be appended directly to the parent.
+                if (shouldResetGroup) {
+                    $group = $parent;
+                    shouldResetGroup = false;
+                };
+            }
+        }
     }
 
     async hide() {

apps/client/src/menus/context_menu_utils.ts

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

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

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

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

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

apps/client/src/menus/electron_context_menu.ts

@@ -4,7 +4,7 @@ import zoomService from "../components/zoom.js";
 import contextMenu, { type MenuItem } from "./context_menu.js";
 import { t } from "../services/i18n.js";
 import type { BrowserWindow } from "electron";
-import type { CommandNames, AppContext } from "../components/app_context.js";
+import type { CommandNames } from "../components/app_context.js";
 
 function setupContextMenu() {
     const electron = utils.dynamicRequire("electron");
@@ -13,8 +13,6 @@ function setupContextMenu() {
     // FIXME: Remove typecast once Electron is properly integrated.
     const { webContents } = remote.getCurrentWindow() as BrowserWindow;
 
-    let appContext: AppContext;
-
     webContents.on("context-menu", (event, params) => {
         const { editFlags } = params;
         const hasText = params.selectionText.trim().length > 0;
@@ -121,20 +119,6 @@ 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,32 +2,26 @@ import { t } from "../services/i18n.js";
 import contextMenu, { type ContextMenuEvent, type MenuItem } from "./context_menu.js";
 import appContext, { type CommandNames } from "../components/app_context.js";
 import type { ViewScope } from "../services/link.js";
-import utils, { isMobile } from "../services/utils.js";
-import { getClosestNtxId } from "../widgets/widget_utils.js";
-import type { LeafletMouseEvent } from "leaflet";
 
 function openContextMenu(notePath: string, e: ContextMenuEvent, viewScope: ViewScope = {}, hoistedNoteId: string | null = null) {
     contextMenu.show({
         x: e.pageX,
         y: e.pageY,
-        items: getItems(e),
-        selectMenuItemHandler: ({ command }) => handleLinkContextMenuItem(command, e, notePath, viewScope, hoistedNoteId)
+        items: getItems(),
+        selectMenuItemHandler: ({ command }) => handleLinkContextMenuItem(command, notePath, viewScope, hoistedNoteId)
     });
 }
 
-function getItems(e: ContextMenuEvent | LeafletMouseEvent): MenuItem<CommandNames>[] {
-    const ntxId = getNtxId(e);
-    const isMobileSplitOpen = isMobile() && appContext.tabManager.getNoteContextById(ntxId).getMainContext().getSubContexts().length > 1;
-
+function getItems(): MenuItem<CommandNames>[] {
     return [
         { title: t("link_context_menu.open_note_in_new_tab"), command: "openNoteInNewTab", uiIcon: "bx bx-link-external" },
-        { title: !isMobileSplitOpen ? t("link_context_menu.open_note_in_new_split") : t("link_context_menu.open_note_in_other_split"), command: "openNoteInNewSplit", uiIcon: "bx bx-dock-right" },
+        { title: t("link_context_menu.open_note_in_new_split"), command: "openNoteInNewSplit", uiIcon: "bx bx-dock-right" },
         { title: t("link_context_menu.open_note_in_new_window"), command: "openNoteInNewWindow", uiIcon: "bx bx-window-open" },
         { title: t("link_context_menu.open_note_in_popup"), command: "openNoteInPopup", uiIcon: "bx bx-edit" }
     ];
 }
 
-function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEvent | LeafletMouseEvent, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
+function handleLinkContextMenuItem(command: string | undefined, notePath: string, viewScope = {}, hoistedNoteId: string | null = null) {
     if (!hoistedNoteId) {
         hoistedNoteId = appContext.tabManager.getActiveContext()?.hoistedNoteId ?? null;
     }
@@ -35,8 +29,15 @@ function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEv
     if (command === "openNoteInNewTab") {
         appContext.tabManager.openContextWithNote(notePath, { hoistedNoteId, viewScope });
     } else if (command === "openNoteInNewSplit") {
-        const ntxId = getNtxId(e);
-        if (!ntxId) return;
+        const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
+
+        if (!subContexts) {
+            logError("subContexts is null");
+            return;
+        }
+
+        const { ntxId } = subContexts[subContexts.length - 1];
+
         appContext.triggerCommand("openNewNoteSplit", { ntxId, notePath, hoistedNoteId, viewScope });
     } else if (command === "openNoteInNewWindow") {
         appContext.triggerCommand("openInWindow", { notePath, hoistedNoteId, viewScope });
@@ -45,18 +46,6 @@ function handleLinkContextMenuItem(command: string | undefined, e: ContextMenuEv
     }
 }
 
-function getNtxId(e: ContextMenuEvent | LeafletMouseEvent) {
-    if (utils.isDesktop()) {
-        const subContexts = appContext.tabManager.getActiveContext()?.getSubContexts();
-        if (!subContexts) return null;
-        return subContexts[subContexts.length - 1].ntxId;
-    } else if (e.target instanceof HTMLElement) {
-        return getClosestNtxId(e.target);
-    } else {
-        return null;
-    }
-}
-
 export default {
     getItems,
     handleLinkContextMenuItem,

apps/client/src/menus/tree_context_menu.ts

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

apps/client/src/print.css

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

@@ -1,151 +0,0 @@
-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,8 +90,7 @@ const HIDDEN_ATTRIBUTES = [
     "viewType",
     "geolocation",
     "docName",
-    "webViewSrc",
-    "archived"
+    "webViewSrc"
 ];
 
 async function renderNormalAttributes(note: FNote) {

apps/client/src/services/attributes.ts

@@ -22,15 +22,6 @@ 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}`);
 }
@@ -60,23 +51,6 @@ 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.
@@ -126,7 +100,9 @@ function isAffecting(attrRow: AttributeRow, affectedNote: FNote | null | undefin
         }
     }
 
-    if (attrRow.isInheritable) {
+    // TODO: This doesn't seem right.
+    //@ts-ignore
+    if (this.isInheritable) {
         for (const owningNote of owningNotes) {
             if (owningNote.hasAncestor(attrNote.noteId, true)) {
                 return true;
@@ -140,10 +116,8 @@ 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,6 +176,11 @@ 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

@@ -1,44 +0,0 @@
-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);
 }
 
-export async function executeBundle(bundle: Bundle, originEntity?: Entity | null, $container?: JQuery<HTMLElement>) {
+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,31 +2,32 @@ 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 } from "./syntax_highlight.js";
+import { applySingleBlockSyntaxHighlight, formatCodeBlocks } from "./syntax_highlight.js";
 import { loadElkIfNeeded, postprocessMermaidSvg } from "./mermaid.js";
 import renderDoc from "./doc_renderer.js";
 import { t } from "../services/i18n.js";
 import WheelZoom from 'vanilla-js-wheel-zoom';
+import { renderMathInElement } from "./math.js";
 import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
-import renderText from "./content_renderer_text.js";
 
 let idCounter = 1;
 
-export interface RenderOptions {
+interface Options {
     tooltip?: boolean;
     trim?: boolean;
     imageHasZoom?: boolean;
-    /** If enabled, it will prevent the default behavior in which an empty note would display a list of children. */
-    noChildrenList?: boolean;
 }
 
 const CODE_MIME_TYPES = new Set(["application/json"]);
 
-export async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: RenderOptions = {}) {
+async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FAttachment, options: Options = {}) {
 
     options = Object.assign(
         {
@@ -41,7 +42,7 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
     const $renderedContent = $('<div class="rendered-content">');
 
     if (type === "text" || type === "book") {
-        await renderText(entity, $renderedContent, options);
+        await renderText(entity, $renderedContent);
     } else if (type === "code") {
         await renderCode(entity, $renderedContent);
     } else if (["image", "canvas", "mindMap"].includes(type)) {
@@ -113,6 +114,32 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
     };
 }
 
+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.
  */
@@ -134,7 +161,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: RenderOptions = {}) {
+function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: Options = {}) {
     const encodedTitle = encodeURIComponent(entity.title);
 
     let url;
@@ -276,6 +303,40 @@ 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

@@ -1,126 +0,0 @@
-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,90 +1,26 @@
-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>();
 
-// Read the color lightness limits defined in the theme as CSS variables
+function createClassForColor(color: string | null) {
+    if (!color?.trim()) {
+        return "";
+    }
 
-const lightThemeColorMaxLightness = readCssVar(
-                                        document.documentElement,
-                                        "tree-item-light-theme-max-color-lightness"
-                                    ).asNumber(70);
+    const normalizedColorName = color.replace(/[^a-z0-9]/gi, "");
 
-const darkThemeColorMinLightness = readCssVar(
-                                        document.documentElement,
-                                        "tree-item-dark-theme-min-color-lightness"
-                                    ).asNumber(50);
+    if (!normalizedColorName.trim()) {
+        return "";
+    }
 
-function createClassForColor(colorString: string | null) {
-    if (!colorString?.trim()) return "";
-
-    const color = parseColor(colorString);
-    if (!color) return "";
-
-    const className = `color-${color.hex().substring(1)}`;
+    const className = `color-${normalizedColorName}`;
 
     if (!registeredClasses.has(className)) {
-        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>`);
+        // make the active fancytree selector more specific than the normal color setting
+        $("head").append(`<style>.${className}, span.fancytree-active.${className} { color: ${color} !important; }</style>`);
 
         registeredClasses.add(className);
-        if (hue !== undefined) {
-            colorsWithHue.add(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";
+    return className;
 }
 
 export default {

apps/client/src/services/date_notes.ts

@@ -1,4 +1,4 @@
-import { dayjs } from "@triliumnext/commons";
+import dayjs from "dayjs";
 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: any[]) => T, waitMs: number, immediate: boolean = false) {
+function debounce<T>(func: (...args: unknown[]) => 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,5 +1,4 @@
 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";
 
@@ -11,18 +10,18 @@ export default function renderDoc(note: FNote) {
         if (docName) {
             // find doc based on language
             const url = getUrl(docName, getCurrentLanguage());
-            $content.load(url, async (response, status) => {
+            $content.load(url, (response, status) => {
                 // fallback to english doc if no translation available
                 if (status === "error") {
                     const fallbackUrl = getUrl(docName, "en");
-                    $content.load(fallbackUrl, async () => {
-                        await processContent(fallbackUrl, $content)
+                    $content.load(fallbackUrl, () => {
+                        processContent(fallbackUrl, $content)
                         resolve($content);
                     });
                     return;
                 }
 
-                await processContent(url, $content);
+                processContent(url, $content);
                 resolve($content);
             });
         } else {
@@ -33,7 +32,7 @@ export default function renderDoc(note: FNote) {
     });
 }
 
-async function processContent(url: string, $content: JQuery<HTMLElement>) {
+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.
@@ -43,9 +42,6 @@ async 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 | undefined;
+    getNoteFromCache(noteId: string): FNote;
     getNotesFromCache(noteIds: string[], silentNotFoundError?: boolean): FNote[];
     getNotes(noteIds: string[], silentNotFoundError?: boolean): Promise<FNote[]>;
 

apps/client/src/services/froca.ts

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

apps/client/src/services/frontend_script_api.ts

@@ -11,14 +11,15 @@ import RightPanelWidget from "../widgets/right_panel_widget.js";
 import ws from "./ws.js";
 import appContext from "../components/app_context.js";
 import NoteContextAwareWidget from "../widgets/note_context_aware_widget.js";
-import BasicWidget, { ReactWrappedWidget } from "../widgets/basic_widget.js";
+import BasicWidget from "../widgets/basic_widget.js";
 import SpacedUpdate from "./spaced_update.js";
 import shortcutService from "./shortcuts.js";
 import dialogService from "./dialog.js";
 import type FNote from "../entities/fnote.js";
 import { t } from "./i18n.js";
-import { dayjs } from "@triliumnext/commons";
+import dayjs from "dayjs";
 import type NoteContext from "../components/note_context.js";
+import type NoteDetailWidget from "../widgets/note_detail.js";
 import type Component from "../components/component.js";
 import { formatLogMessage } from "@triliumnext/commons";
 
@@ -316,7 +317,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<ReactWrappedWidget>;
+    getActiveNoteDetailWidget(): Promise<NoteDetailWidget>;
     /**
      * @returns returns a note path of active note or null if there isn't active note
      */

apps/client/src/services/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 "../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,6 +20,9 @@ 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 { LOCALE_IDS, setDayjsLocale, type Locale } from "@triliumnext/commons";
+import 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") as LOCALE_IDS;
+    const locale = (options.get("locale") as string) || "en";
 
     locales = await server.get<Locale[]>("options/locales");
 
@@ -27,7 +27,6 @@ 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: "s1aBHPd79XYj",
+    mermaid: null,
     mindMap: null,
     noteMap: null,
     relationMap: null,
@@ -27,8 +27,7 @@ export const byBookType: Record<ViewTypeOptions, string | null> = {
     calendar: "xWbu3jpNWapp",
     table: "2FvYrpmOXm29",
     geoMap: "81SGnPGMk7Xc",
-    board: "CtBQqbwXDx1w",
-    presentation: null
+    board: "CtBQqbwXDx1w"
 };
 
 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 from "../components/app_context.js";
-import shortcutService, { ShortcutBinding } from "./shortcuts.js";
+import appContext, { type CommandNames } from "../components/app_context.js";
+import shortcutService from "./shortcuts.js";
 import type Component from "../components/component.js";
 import type { ActionKeyboardShortcut } from "@triliumnext/commons";
 
@@ -28,24 +28,14 @@ async function getActionsForScope(scope: string) {
     return actions.filter((action) => action.scope === scope);
 }
 
-async function setupActionsForElement(scope: string, $el: JQuery<HTMLElement>, component: Component, ntxId: string | null | undefined) {
-    if (!$el[0]) return [];
-
+async function setupActionsForElement(scope: string, $el: JQuery<HTMLElement>, component: Component) {
     const actions = await getActionsForScope(scope);
-    const bindings: ShortcutBinding[] = [];
 
     for (const action of actions) {
         for (const shortcut of action.effectiveShortcuts ?? []) {
-            const binding = shortcutService.bindElShortcut($el, shortcut, () => {
-                component.triggerCommand(action.actionName, { ntxId });
-            });
-            if (binding) {
-                bindings.push(binding);
+            shortcutService.bindElShortcut($el, shortcut, () => component.triggerCommand(action.actionName, { ntxId: appContext.tabManager.activeNtxId }));
         }
     }
-    }
-
-    return bindings;
 }
 
 getActionsForScope("window").then((actions) => {

apps/client/src/services/link.ts

@@ -4,7 +4,6 @@ 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);
@@ -150,16 +149,11 @@ 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("/");
-            pathSegments = await treeService.getNotePathTitleComponents(resolvedPath);
-        }
+        const pathSegments = await treeService.getNotePathTitleComponents(resolvedPath);
 
         if (pathSegments) {
             if (pathSegments.length) {
@@ -285,7 +279,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.
  */
-export function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDownEvent | React.PointerEvent<HTMLCanvasElement> | null, hrefLink: string | undefined, $link?: JQuery<HTMLElement> | null) {
+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;
     }
@@ -307,8 +301,7 @@ export function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDo
     // Right click is handled separately.
     const isMiddleClick = evt && "which" in evt && evt.which === 2;
     const targetIsBlank = ($link?.attr("target") === "_blank");
-    const isDoubleClick = isLeftClick && evt?.type === "dblclick";
-    const openInNewTab = (isLeftClick && ctrlKey) || isDoubleClick || isMiddleClick || targetIsBlank;
+    const openInNewTab = (isLeftClick && ctrlKey) || isMiddleClick || targetIsBlank;
     const activate = (isLeftClick && ctrlKey && shiftKey) || (isMiddleClick && shiftKey);
     const openInNewWindow = isLeftClick && evt?.shiftKey && !ctrlKey;
 
@@ -323,28 +316,40 @@ export function goToLinkExt(evt: MouseEvent | JQuery.ClickEvent | JQuery.MouseDo
                 viewScope
             });
         } else if (isLeftClick) {
-            openInCurrentNoteContext(evt, notePath, viewScope);
+            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 });
+            }
         }
     } else if (hrefLink) {
         const withinEditLink = $link?.hasClass("ck-link-actions__preview");
         const outsideOfCKEditor = !$link || $link.closest("[contenteditable]").length === 0;
 
-        if (openInNewTab || openInNewWindow || (isLeftClick && (withinEditLink || outsideOfCKEditor))) {
+        if (openInNewTab || (withinEditLink && (isLeftClick || isMiddleClick)) || (outsideOfCKEditor && (isLeftClick || isMiddleClick))) {
             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;
 }
@@ -467,21 +472,29 @@ function getReferenceLinkTitleSync(href: string) {
     }
 }
 
-if (glob.device !== "print") {
-    // TODO: Check why the event is not supported.
-    //@ts-ignore
-    $(document).on("click", "a", goToLink);
-    // TODO: Check why the event is not supported.
-    //@ts-ignore
-    $(document).on("auxclick", "a", goToLink); // to handle the middle button
-    // TODO: Check why the event is not supported.
-    //@ts-ignore
-    $(document).on("contextmenu", "a", linkContextMenu);
-    // TODO: Check why the event is not supported.
-    //@ts-ignore
-    $(document).on("dblclick", "a", goToLink);
+// TODO: Check why the event is not supported.
+//@ts-ignore
+$(document).on("click", "a", goToLink);
+// TODO: Check why the event is not supported.
+//@ts-ignore
+$(document).on("auxclick", "a", goToLink); // to handle the middle button
+// TODO: Check why the event is not supported.
+//@ts-ignore
+$(document).on("contextmenu", "a", linkContextMenu);
+$(document).on("dblclick", "a", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
 
-    $(document).on("mousedown", "a", (e) => {
+    const $link = $(e.target).closest("a");
+
+    const address = $link.attr("href");
+
+    if (address && address.startsWith("http")) {
+        window.open(address, "_blank");
+    }
+});
+
+$(document).on("mousedown", "a", (e) => {
     if (e.which === 2) {
         // prevent paste on middle click
         // https://github.com/zadam/trilium/issues/2995
@@ -489,8 +502,7 @@ if (glob.device !== "print") {
         e.preventDefault();
         return false;
     }
-    });
-}
+});
 
 export default {
     getNotePathFromUrl,

apps/client/src/services/load_results.ts

@@ -1,21 +1,11 @@
-import type { AttachmentRow, EtapiTokenRow, NoteType, OptionNames } from "@triliumnext/commons";
+import type { AttachmentRow, EtapiTokenRow, OptionNames } from "@triliumnext/commons";
 import type { AttributeType } from "../entities/fattribute.js";
 import type { EntityChange } from "../server_types.js";
 
 // 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,8 +168,7 @@ async function getBuiltInTemplates(title: string | null, command: TreeCommandNam
     }
 
     for (const templateNote of childNotes) {
-        if (templateNote.hasLabel("collection") !== filterCollections ||
-            !templateNote.hasLabel("template")) {
+        if (templateNote.hasLabel("collection") !== filterCollections) {
             continue;
         }
 

apps/client/src/services/open.ts

@@ -1,5 +1,4 @@
 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;
@@ -127,7 +126,7 @@ function downloadRevision(noteId: string, revisionId: string) {
 /**
  * @param url - should be without initial slash!!!
  */
-export function getUrlForDownload(url: string) {
+function getUrlForDownload(url: string) {
     if (utils.isElectron()) {
         // electron needs absolute URL, so we extract current host, port, protocol
         return `${getHost()}/${url}`;
@@ -172,21 +171,6 @@ 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()) {
@@ -214,6 +198,5 @@ export default {
     openAttachmentExternally,
     openNoteCustom,
     openAttachmentCustom,
-    openNoteOnServer,
     openDirectory
 };

apps/client/src/services/promoted_attribute_definition_parser.ts

@@ -41,17 +41,6 @@ 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 "@triliumnext/split.js";
+import Split from "split.js"
 
 export const DEFAULT_GUTTER_SIZE = 5;
 
@@ -46,7 +46,6 @@ 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]));
@@ -80,7 +79,6 @@ 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]));
@@ -156,7 +154,6 @@ 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", "NumpadEnter" ]) {
+            for (const keyCode of [ "Delete", "Enter" ]) {
                 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;
 
-export interface ShortcutBinding {
+interface ShortcutBinding {
     element: HTMLElement | Document;
     shortcut: string;
     handler: Handler;
@@ -46,7 +46,6 @@ for (let i = 1; i <= 19; i++) {
 const KEYCODES_WITH_NO_MODIFIER = new Set([
     "Delete",
     "Enter",
-    "NumpadEnter",
     ...functionKeyCodes
 ]);
 
@@ -127,20 +126,10 @@ 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,9 +24,7 @@ export async function formatCodeBlocks($container: JQuery<HTMLElement>) {
             continue;
         }
 
-        if (glob.device !== "print") {
         applyCopyToClipboardButton($(codeBlock));
-        }
 
         if (syntaxHighlightingEnabled) {
             applySingleBlockSyntaxHighlight($(codeBlock), normalizedMimeType);
@@ -63,11 +61,7 @@ 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) {
@@ -82,7 +76,7 @@ export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
 
     // Load theme.
     const currentThemeName = String(options.get("codeBlockTheme"));
-    await loadHighlightingTheme(currentThemeName);
+    loadHighlightingTheme(currentThemeName);
 
     // Load mime types.
     let mimeTypes: MimeType[];
@@ -104,16 +98,17 @@ export async function ensureMimeTypesForHighlighting(mimeTypeHint?: string) {
     highlightingLoaded = true;
 }
 
-export async function loadHighlightingTheme(themeName: string) {
+export function loadHighlightingTheme(themeName: string) {
     const themePrefix = "default:";
     let theme: Theme | null = null;
-    if (glob.device === "print") {
-        theme = Themes.vs;
-    } else if (themeName.includes(themePrefix)) {
+    if (themeName.includes(themePrefix)) {
         theme = Themes[themeName.substring(themePrefix.length)];
     }
+    if (!theme) {
+        theme = Themes.default;
+    }
 
-    await loadTheme(theme ?? Themes.default);
+    loadTheme(theme);
 }
 
 /**

apps/client/src/services/toast.ts

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

apps/client/src/services/tree.ts

@@ -4,6 +4,9 @@ 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);
 
@@ -26,12 +29,21 @@ 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;
 
-    for (let i = 0; i < path.length; i++) {
-        const parentNoteId = path[i];
+    while (true) {
+        if (i >= path.length) {
+            break;
+        }
+
+        const parentNoteId = path[i++];
 
         if (childNoteId !== null) {
             const child = await froca.getNote(childNoteId, !logErrors);
@@ -56,7 +68,7 @@ async function resolveNotePathToSegments(notePath: string, hoistedNoteId = "root
                 return null;
             }
 
-            if (!parents.some(p => p.noteId === parentNoteId) || (i === path.length - 1 && parentNoteId !== 'root')) {
+            if (!parents.some((p) => p.noteId === parentNoteId)) {
                 if (logErrors) {
                     const parent = froca.getNoteFromCache(parentNoteId);
 
@@ -68,8 +80,7 @@ async function resolveNotePathToSegments(notePath: string, hoistedNoteId = "root
                     );
                 }
 
-                const activeNotePath = appContext.tabManager.getActiveContextNotePath();
-                const bestNotePath = child.getBestNotePath(hoistedNoteId, activeNotePath);
+                const bestNotePath = child.getBestNotePath(hoistedNoteId);
 
                 if (bestNotePath) {
                     const pathToRoot = bestNotePath.reverse().slice(1);
@@ -89,7 +100,7 @@ async function resolveNotePathToSegments(notePath: string, hoistedNoteId = "root
 
     effectivePathSegments.reverse();
 
-    if (effectivePathSegments.includes(hoistedNoteId) && effectivePathSegments.includes('root')) {
+    if (effectivePathSegments.includes(hoistedNoteId)) {
         return effectivePathSegments;
     } else {
         const noteId = getNoteIdFromUrl(notePath);
@@ -100,9 +111,7 @@ async function resolveNotePathToSegments(notePath: string, hoistedNoteId = "root
         if (!note) {
             throw new Error(`Unable to find note: ${notePath}.`);
         }
-
-        const activeNotePath = appContext.tabManager.getActiveContextNotePath();
-        const bestNotePath = note.getBestNotePath(hoistedNoteId, activeNotePath);
+        const bestNotePath = note.getBestNotePath(hoistedNoteId);
 
         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 "@triliumnext/commons";
+import dayjs from "dayjs";
 import type { ViewScope } from "./link.js";
 import FNote from "../entities/fnote";
 
@@ -11,11 +11,7 @@ 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() {
@@ -173,7 +169,7 @@ const entityMap: Record<string, string> = {
     "=": "&#x3D;"
 };
 
-export function escapeHtml(str: string) {
+function escapeHtml(str: string) {
     return str.replace(/[&<>"'`=\/]/g, (s) => entityMap[s]);
 }
 
@@ -207,7 +203,7 @@ function toObject<T, R>(array: T[], fn: (arg0: T) => [key: string, value: R]) {
     return obj;
 }
 
-export function randomString(len: number) {
+function randomString(len: number) {
     let text = "";
     const possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
 
@@ -274,7 +270,7 @@ function getMimeTypeClass(mime: string) {
     return `mime-${mime.toLowerCase().replace(/[\W_]+/g, "-")}`;
 }
 
-export function isHtmlEmpty(html: string) {
+function isHtmlEmpty(html: string) {
     if (!html) {
         return true;
     } else if (typeof html !== "string") {
@@ -841,7 +837,7 @@ export function arrayEqual<T>(a: T[], b: T[]) {
     return true;
 }
 
-export type Indexed<T extends object> = T & { index: number };
+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,8 +304,6 @@ async function sendPing() {
 }
 
 setTimeout(() => {
-    if (glob.device === "print") return;
-
     ws = connectWebSocket();
 
     lastPingTs = Date.now();

apps/client/src/share.ts

@@ -0,0 +1,84 @@
+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/share/mermaid.ts

@@ -1,12 +1,7 @@
-export default async function setupMermaid() {
-    const mermaidEls = document.querySelectorAll("#content pre code.language-mermaid");
-    if (mermaidEls.length === 0) {
-        return;
-    }
+import mermaid from "mermaid";
 
-    const mermaid = (await import("mermaid")).default;
-
-    for (const codeBlock of mermaidEls) {
+export default function setupMermaid() {
+    for (const codeBlock of document.querySelectorAll("#content pre code.language-mermaid")) {
         const parentPre = codeBlock.parentElement;
         if (!parentPre) {
             continue;

apps/client/src/stylesheets/calendar.css

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

@@ -0,0 +1,322 @@
+: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/relation_map.css

@@ -5,6 +5,7 @@
 .note-detail-relation-map {
     height: 100%;
     overflow: hidden !important;
+    padding: 10px;
     position: relative;
 }
 

apps/client/src/stylesheets/style.css

@@ -26,10 +26,6 @@
     --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 *,
@@ -216,16 +212,6 @@ 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;
 }
@@ -257,11 +243,6 @@ 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;
 }
@@ -379,8 +360,7 @@ button kbd {
 }
 
 .dropdown-menu,
-.tabulator-popup-container,
-:root .excalidraw .popover {
+.tabulator-popup-container {
     color: var(--menu-text-color) !important;
     font-size: inherit;
     background: var(--menu-background-color) !important;
@@ -391,9 +371,7 @@ button kbd {
 }
 
 body.desktop .dropdown-menu,
-body.desktop .tabulator-popup-container,
-:root .excalidraw .dropdown-menu .dropdown-menu-container,
-:root .excalidraw .popover {
+body.desktop .tabulator-popup-container {
     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));
@@ -426,7 +404,7 @@ body.desktop .tabulator-popup-container,
 .dropdown-menu .disabled .disabled-tooltip {
     pointer-events: all;
     margin-inline-start: 8px;
-    font-size: 0.75rem;
+    font-size: 0.5em;
     color: var(--disabled-tooltip-icon-color);
     cursor: help;
     opacity: 0.75;
@@ -438,8 +416,7 @@ body.desktop .tabulator-popup-container,
 
 .dropdown-menu a:hover:not(.disabled),
 .dropdown-item:hover:not(.disabled, .dropdown-container-item),
-.tabulator-menu-item:hover,
-:root .excalidraw .context-menu .context-menu-item:hover {
+.tabulator-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;
@@ -458,8 +435,7 @@ body.desktop .tabulator-popup-container,
 }
 
 body.desktop .dropdown-menu:not(#context-menu-container) .dropdown-item,
-body #context-menu-container .dropdown-item > span,
-body.mobile .dropdown .dropdown-submenu > span {
+body #context-menu-container .dropdown-item > span {
     display: flex;
     align-items: center;
 }
@@ -481,8 +457,7 @@ body.mobile .dropdown .dropdown-submenu > span {
 }
 
 .dropdown-item,
-.dropdown-header,
-:root .excalidraw .context-menu .context-menu-item:hover {
+.dropdown-header {
     color: var(--menu-text-color) !important;
     border: 1px solid transparent !important;
 }
@@ -514,10 +489,6 @@ body.mobile .dropdown .dropdown-submenu > span {
     width: 100%;
 }
 
-.dropdown-menu .note-color-picker {
-    padding: 4px 12px 8px 12px;
-}
-
 .cm-editor {
     height: 100%;
     outline: none !important;
@@ -600,6 +571,11 @@ 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);
@@ -720,6 +696,11 @@ 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;
 }
@@ -1015,15 +996,9 @@ div[data-notify="container"] {
     font-family: var(--monospace-font-family);
 }
 
-svg.ck-icon {
-    &.ck-icon_inherit-color path[fill="#333"] {
-        fill: currentColor;
-    }
-
-    &.note-icon {
+svg.ck-icon .note-icon {
     color: var(--main-text-color);
     font-size: 20px;
-    }
 }
 
 .ck-content {
@@ -1033,7 +1008,7 @@ svg.ck-icon {
     --ck-content-line-height: var(--bs-body-line-height);
 }
 
-:root .ck-content .table table:not(.layout-table) th {
+.ck-content .table table th {
     background-color: var(--accented-background-color);
 }
 
@@ -1124,6 +1099,7 @@ 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;
 }
 
@@ -1132,6 +1108,10 @@ 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 */
 }
@@ -1153,7 +1133,6 @@ 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 {
@@ -1186,16 +1165,6 @@ 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;
@@ -1327,11 +1296,11 @@ body.mobile #context-menu-container.mobile-bottom-menu {
     inset-inline-end: 0 !important;
     bottom: 0 !important;
     top: unset !important;
-    max-height: var(--tn-modal-max-height);
+    max-height: 70vh;
     overflow: auto !important;
     user-select: none;
     -webkit-user-select: none;
-    padding-bottom: max(env(safe-area-inset-bottom), var(--padding, var(--menu-padding-size))) !important;
+    padding-bottom: env(safe-area-inset-bottom) !important;
 }
 
 body.mobile .dropdown-menu {
@@ -1390,20 +1359,6 @@ 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;
 }
@@ -1579,15 +1534,12 @@ 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: var(--dropdown-bottom) !important;
+        bottom: calc(var(--mobile-bottom-offset) + var(--launcher-pane-size)) !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 {
@@ -1622,14 +1574,6 @@ 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);
     }
@@ -1692,6 +1636,46 @@ 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 */
@@ -1770,10 +1754,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);
@@ -1820,15 +1804,12 @@ 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-content-width: unset;
+    max-width: 999999px;
 }
 
 button.close:hover {
@@ -1997,10 +1978,6 @@ 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));
 }
@@ -2048,16 +2025,13 @@ body.zen #right-pane,
 body.zen #mobile-sidebar-wrapper,
 body.zen .tab-row-container,
 body.zen .tab-row-widget,
-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 .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 .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 .note-split:not(.type-book) .note-list-widget {
+body.zen .action-button {
     display: none !important;
 }
 
@@ -2101,121 +2075,12 @@ 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,
@@ -2412,8 +2277,9 @@ 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;
@@ -2446,15 +2312,6 @@ 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;
@@ -2541,7 +2398,7 @@ footer.webview-footer button {
     transform: rotate(180deg);
 }
 
-/* CK Editor */
+/* CK Edito */
 
 /* 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 {
@@ -2558,60 +2415,3 @@ 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,26 +76,12 @@
 
     --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;
 }
@@ -111,7 +97,3 @@ 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,22 +80,4 @@ 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: #242424;
+    --main-background-color: #272727;
     --main-text-color: #ccc;
     --main-border-color: #454545;
     --subtle-border-color: #313131;
@@ -41,9 +41,6 @@
     --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);
@@ -101,7 +98,6 @@
     --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);
@@ -164,15 +160,9 @@
     --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);
@@ -199,8 +189,8 @@
     --badge-background-color: #ffffff1a;
     --badge-text-color: var(--muted-text-color);
 
-    --promoted-attribute-card-background-color: #ffffff21;
-    --promoted-attribute-card-shadow: none;
+    --promoted-attribute-card-background-color: var(--card-background-color);
+    --promoted-attribute-card-shadow-color: #000000b3;
 
     --floating-button-shadow-color: #00000080;
     --floating-button-background-color: #494949d2;
@@ -215,8 +205,6 @@
     --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;
 
@@ -234,9 +222,10 @@
     --code-block-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
 
     --card-background-color: #ffffff12;
-    --card-background-hover-color: #ffffff20;
-    --card-border-color: transparent;
-    --card-box-shadow: none;
+    --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);
 
     --calendar-color: var(--menu-text-color);
     --calendar-weekday-labels-color: var(--muted-text-color);
@@ -270,36 +259,12 @@
     --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);
 }
@@ -311,13 +276,3 @@ 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,9 +41,6 @@
     --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);
@@ -130,7 +127,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: var(--left-pane-text-color);
+    --left-pane-item-action-button-color: inherit;
     --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);
@@ -156,15 +153,9 @@
     --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);
@@ -186,13 +177,13 @@
     --inactive-tab-hover-background-color: #00000016;
     --inactive-tab-text-color: #4e4e4e;
 
-    --alert-bar-background: #f9cf2b29;
+    --alert-bar-background: #32637b29;
 
     --badge-background-color: #00000011;
     --badge-text-color: var(--muted-text-color);
 
-    --promoted-attribute-card-background-color: #00000014;
-    --promoted-attribute-card-shadow: none;
+    --promoted-attribute-card-background-color: var(--card-background-color);
+    --promoted-attribute-card-shadow-color: #00000033;
 
     --floating-button-shadow-color: #00000042;
     --floating-button-background-color: #eaeaeacc;
@@ -213,9 +204,7 @@
     --new-tab-button-hover-background: white;
     --new-tab-button-hover-color: black;
 
-    --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-background: #ececec;
     --right-pane-item-hover-color: inherit;
 
     --scrollbar-thumb-color: #0000005c;
@@ -231,11 +220,12 @@
 
     --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: #0000000d;
-    --card-background-hover-color: #0000001c;
-    --card-border-color: transparent;
+    --card-background-color: var(--accented-background-color);
+    --card-background-hover-color: #f9f9f9;
+    --card-background-press-color: #efefef;
+    --card-border-color: #eaeaea;
     --card-shadow-color: rgba(0, 0, 0, 0.1);
-    --card-box-shadow: none;
+    --card-box-shadow: 0 0 12px var(--card-shadow-color);
 
     --calendar-color: var(--menu-text-color);
     --calendar-weekday-labels-color: var(--muted-text-color);
@@ -269,26 +259,4 @@
     --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,7 +4,6 @@
 @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 {
@@ -62,7 +61,6 @@
 
     --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);
 
@@ -83,29 +81,6 @@
 
     /* 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 {
@@ -121,17 +96,25 @@ body.backdrop-effects-disabled {
  * supported when this class is used.
  */
 
- .dropdown-menu:not(.static),
- :root .excalidraw .popover {
+ .dropdown-menu:not(.static) {
     border-radius: var(--dropdown-border-radius);
-    padding: var(--padding, var(--menu-padding-size)) !important;
+    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 .excalidraw .popover::before,
-body.zen .note-split .ribbon-container .classic-toolbar-widget::before {
+:root .ck.ck-dropdown__panel::before {
     content: "";
     backdrop-filter: var(--dropdown-backdrop-filter);
     border-radius: var(--dropdown-border-radius);
@@ -155,22 +138,19 @@ 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,
-.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;
-
+body.mobile .dropdown-submenu .dropdown-toggle {
+    padding: 2px 2px 2px 8px !important;
+    padding-inline-end: 22px !important;
     /* Note: the right padding should also accommodate the submenu arrow. */
     border-radius: 6px;
     cursor: default !important;
@@ -194,6 +174,10 @@ 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;
@@ -218,8 +202,7 @@ html body .dropdown-item[disabled] {
 }
 
 /* Menu item keyboard shortcut */
-.dropdown-item kbd,
-.excalidraw .context-menu-item__shortcut {
+.dropdown-item kbd {
     font-family: unset !important;
     font-size: unset !important;
     color: var(--menu-item-keyboard-shortcut-color) !important;
@@ -231,15 +214,13 @@ html body .dropdown-item[disabled] {
     margin-inline-start: 16px;
 }
 
-.dropdown-divider,
-.excalidraw .context-menu hr {
+.dropdown-divider {
     position: relative;
     border-color: transparent !important;
     overflow: visible;
 }
 
-.dropdown-divider::after,
-.excalidraw .context-menu hr::before {
+.dropdown-divider::after {
     position: absolute;
     content: "";
     top: -1px;
@@ -272,9 +253,7 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
 /* Menu item group heading */
 
 /* The heading body */
-.dropdown-menu h6,
-.excalidraw .dropdown-menu-container .dropdown-menu-group-title,
-.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"] {
+.dropdown-menu h6 {
     position: relative;
     background: transparent;
     padding: 1em 8px 14px 8px;
@@ -285,9 +264,7 @@ body[dir=rtl] .dropdown-menu:not([data-popper-placement="bottom-start"]) .dropdo
 }
 
 /* The delimiter line */
-.dropdown-menu h6::before,
-.excalidraw .dropdown-menu-container .dropdown-menu-group-title::before,
-.excalidraw .dropdown-menu-container div[data-testid="canvas-background-label"]::before {
+.dropdown-menu h6::before {
     content: "";
     position: absolute;
     bottom: 8px;
@@ -310,126 +287,17 @@ 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) */
 
@@ -445,12 +313,6 @@ 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
  */
@@ -591,21 +453,13 @@ 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);
 }
@@ -614,6 +468,10 @@ 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;
 }
@@ -685,14 +543,9 @@ 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 {
@@ -700,6 +553,7 @@ 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,7 +25,6 @@
 
 .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;
@@ -56,17 +55,15 @@
     font-family: boxicons;
 }
 
-.modal .modal-header .help-button,
-.modal .modal-header .custom-title-bar-button {
+.modal .modal-header .help-button {
     margin-inline-end: 0;
-    font-size: calc(var(--modal-control-button-size) * .70);
+    font-size: calc(var(--modal-control-button-size) * .75);
     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);
@@ -74,7 +71,6 @@
 
 .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);
 }
@@ -396,8 +392,7 @@ div.tn-tool-dialog {
 }
 
 .delete-notes-list .note-path {
-    padding-inline-start: 8px;
-    color: var(--muted-text-color)
+    padding-inline-end: 8px;
 }
 
 /*

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

@@ -17,10 +17,6 @@ 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,
@@ -146,14 +142,6 @@ 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

@@ -1,261 +0,0 @@
-: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,6 +258,11 @@
     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 {
@@ -349,7 +354,6 @@
     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;
@@ -643,7 +647,7 @@ html .note-detail-editable-text :not(figure, .include-note, hr):first-child {
     }
 }
 
-.ck-content:not(.word-wrap) pre code {
+.note-detail-printable:not(.word-wrap) pre code {
     white-space: pre;
 }
 
@@ -662,29 +666,3 @@ 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;
-}