Merge remote-tracking branch 'origin/main' into feat/add-ocr-capabilities

.github/instructions/nx.instructions.md

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

.github/workflows/playwright.yml

@@ -35,7 +35,6 @@ jobs:
         run: pnpm install --frozen-lockfile
       - run: pnpm exec playwright install --with-deps
       - uses: nrwl/nx-set-shas@v4
-
       # Prepend any command with "nx-cloud record --" to record its logs to Nx Cloud
       # - run: npx nx-cloud record -- echo Hello World
       # Nx Affected runs only tasks affected by the changes in this PR/commit. Learn more: https://nx.dev/ci/features/affected

.vscode/mcp.json

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

.vscode/settings.json

@@ -35,5 +35,6 @@
         "docs/**/*.png": true,
         "apps/server/src/assets/doc_notes/**": true,
         "apps/edit-docs/demo/**": true
-    }
+    },
+    "nxConsole.generateAiAgentRules": true
 }

CLAUDE.md

@@ -0,0 +1,161 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Overview
+
+Trilium Notes is a hierarchical note-taking application with advanced features like synchronization, scripting, and rich text editing. It's built as a TypeScript monorepo using NX, with multiple applications and shared packages.
+
+## Development Commands
+
+### Setup
+- `pnpm install` - Install all dependencies
+- `corepack enable` - Enable pnpm if not available
+
+### Running Applications
+- `pnpm run server:start` - Start development server (http://localhost:8080)
+- `pnpm nx run server:serve` - Alternative server start command
+- `pnpm nx run desktop:serve` - Run desktop Electron app
+- `pnpm run server:start-prod` - Run server in production mode
+
+### Building
+- `pnpm nx build <project>` - Build specific project (server, client, desktop, etc.)
+- `pnpm run client:build` - Build client application
+- `pnpm run server:build` - Build server application
+- `pnpm run electron:build` - Build desktop application
+
+### Testing
+- `pnpm test:all` - Run all tests (parallel + sequential)
+- `pnpm test:parallel` - Run tests that can run in parallel
+- `pnpm test:sequential` - Run tests that must run sequentially (server, ckeditor5-mermaid, ckeditor5-math)
+- `pnpm nx test <project>` - Run tests for specific project
+- `pnpm coverage` - Generate coverage reports
+
+### Linting & Type Checking
+- `pnpm nx run <project>:lint` - Lint specific project
+- `pnpm nx run <project>:typecheck` - Type check specific project
+
+## Architecture Overview
+
+### Monorepo Structure
+- **apps/**: Runnable applications
+  - `client/` - Frontend application (shared by server and desktop)
+  - `server/` - Node.js server with web interface
+  - `desktop/` - Electron desktop application
+  - `web-clipper/` - Browser extension for saving web content
+  - Additional tools: `db-compare`, `dump-db`, `edit-docs`
+
+- **packages/**: Shared libraries
+  - `commons/` - Shared interfaces and utilities
+  - `ckeditor5/` - Custom rich text editor with Trilium-specific plugins
+  - `codemirror/` - Code editor customizations
+  - `highlightjs/` - Syntax highlighting
+  - Custom CKEditor plugins: `ckeditor5-admonition`, `ckeditor5-footnotes`, `ckeditor5-math`, `ckeditor5-mermaid`
+
+### Core Architecture Patterns
+
+#### Three-Layer Cache System
+- **Becca** (Backend Cache): Server-side entity cache (`apps/server/src/becca/`)
+- **Froca** (Frontend Cache): Client-side mirror of backend data (`apps/client/src/services/froca.ts`)
+- **Shaca** (Share Cache): Optimized cache for shared/published notes (`apps/server/src/share/`)
+
+#### Entity System
+Core entities are defined in `apps/server/src/becca/entities/`:
+- `BNote` - Notes with content and metadata
+- `BBranch` - Hierarchical relationships between notes (allows multiple parents)
+- `BAttribute` - Key-value metadata attached to notes
+- `BRevision` - Note version history
+- `BOption` - Application configuration
+
+#### Widget-Based UI
+Frontend uses a widget system (`apps/client/src/widgets/`):
+- `BasicWidget` - Base class for all UI components
+- `NoteContextAwareWidget` - Widgets that respond to note changes
+- `RightPanelWidget` - Widgets displayed in the right panel
+- Type-specific widgets in `type_widgets/` directory
+
+#### API Architecture
+- **Internal API**: REST endpoints in `apps/server/src/routes/api/`
+- **ETAPI**: External API for third-party integrations (`apps/server/src/etapi/`)
+- **WebSocket**: Real-time synchronization (`apps/server/src/services/ws.ts`)
+
+### Key Files for Understanding Architecture
+
+1. **Application Entry Points**:
+   - `apps/server/src/main.ts` - Server startup
+   - `apps/client/src/desktop.ts` - Client initialization
+
+2. **Core Services**:
+   - `apps/server/src/becca/becca.ts` - Backend data management
+   - `apps/client/src/services/froca.ts` - Frontend data synchronization
+   - `apps/server/src/services/backend_script_api.ts` - Scripting API
+
+3. **Database Schema**:
+   - `apps/server/src/assets/db/schema.sql` - Core database structure
+
+4. **Configuration**:
+   - `nx.json` - NX workspace configuration
+   - `package.json` - Project dependencies and scripts
+
+## Note Types and Features
+
+Trilium supports multiple note types, each with specialized 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
+
+## Development Guidelines
+
+### Testing Strategy
+- Server tests run sequentially due to shared database
+- Client tests can run in parallel
+- E2E tests use Playwright for both server and desktop apps
+- Build validation tests check artifact integrity
+
+### Scripting System
+Trilium provides powerful user scripting capabilities:
+- Frontend scripts run in browser context
+- Backend scripts run in Node.js context with full API access
+- Script API documentation available in `docs/Script API/`
+
+### Internationalization
+- Translation files in `apps/client/src/translations/`
+- Supported languages: English, German, Spanish, French, Romanian, Chinese
+
+### Security Considerations
+- Per-note encryption with granular protected sessions
+- CSRF protection for API endpoints
+- OpenID and TOTP authentication support
+- Sanitization of user-generated content
+
+## 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
+
+### Custom CKEditor Plugins
+- Create new package in `packages/` following existing plugin structure
+- Register in `packages/ckeditor5/src/plugins.ts`
+
+### Database Migrations
+- Add migration scripts in `apps/server/src/migrations/`
+- Update schema in `apps/server/src/assets/db/schema.sql`
+
+## Build System Notes
+- Uses NX for monorepo management with build caching
+- Vite for fast development builds
+- ESBuild for production optimization
+- pnpm workspaces for dependency management
+- Docker support with multi-stage builds

_regroup/package.json

@@ -36,12 +36,12 @@
   },
   "devDependencies": {    
     "@playwright/test": "1.54.1",
-    "@stylistic/eslint-plugin": "5.2.0",        
+    "@stylistic/eslint-plugin": "5.2.2",        
     "@types/express": "5.0.3",    
-    "@types/node": "22.16.5",    
+    "@types/node": "22.17.0",    
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "3.2.4",
-    "eslint": "9.31.0",
+    "eslint": "9.32.0",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "esm": "3.2.25",
     "jsdoc": "4.0.4",
@@ -49,7 +49,7 @@
     "rcedit": "4.0.1",
     "rimraf": "6.0.1",    
     "tslib": "2.8.1",    
-    "typedoc": "0.28.7",
+    "typedoc": "0.28.8",
     "typedoc-plugin-missing-exports": "4.0.0"
   },
   "optionalDependencies": {

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.97.0",
+  "version": "0.97.1",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -10,7 +10,7 @@
     "url": "https://github.com/TriliumNext/Notes"
   },
   "dependencies": {
-    "@eslint/js": "9.31.0",
+    "@eslint/js": "9.32.0",
     "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.18",
     "@fullcalendar/daygrid": "6.1.18",
@@ -18,6 +18,7 @@
     "@fullcalendar/list": "6.1.18",
     "@fullcalendar/multimonth": "6.1.18",
     "@fullcalendar/timegrid": "6.1.18",
+    "@maplibre/maplibre-gl-leaflet": "0.1.3",
     "@mermaid-js/layout-elk": "0.1.8",
     "@mind-elixir/node-menu": "5.0.0",
     "@popperjs/core": "2.11.8",
@@ -48,10 +49,10 @@
     "mark.js": "8.11.1",
     "marked": "16.1.1",
     "mermaid": "11.9.0",
-    "mind-elixir": "5.0.2",
+    "mind-elixir": "5.0.4",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
-    "preact": "10.26.9",
+    "preact": "10.27.0",
     "split.js": "1.6.5",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
@@ -64,7 +65,7 @@
     "@types/leaflet": "1.9.20",
     "@types/leaflet-gpx": "1.3.7",
     "@types/mark.js": "8.11.12",
-    "@types/tabulator-tables": "6.2.7",
+    "@types/tabulator-tables": "6.2.8",
     "copy-webpack-plugin": "13.0.0",
     "happy-dom": "18.0.1",
     "script-loader": "0.7.2",

apps/client/src/components/app_context.ts

@@ -133,6 +133,8 @@ export type CommandMappings = {
     hideLeftPane: CommandData;
     showCpuArchWarning: CommandData;
     showLeftPane: CommandData;
+    showAttachments: CommandData;
+    showSearchHistory: CommandData;
     hoistNote: CommandData & { noteId: string };
     leaveProtectedSession: CommandData;
     enterProtectedSession: CommandData;
@@ -173,7 +175,7 @@ export type CommandMappings = {
     deleteNotes: ContextMenuCommandData;
     importIntoNote: ContextMenuCommandData;
     exportNote: ContextMenuCommandData;
-    searchInSubtree: ContextMenuCommandData;
+    searchInSubtree: CommandData & { notePath: string; };
     moveNoteUp: ContextMenuCommandData;
     moveNoteDown: ContextMenuCommandData;
     moveNoteUpInHierarchy: ContextMenuCommandData;
@@ -262,6 +264,7 @@ export type CommandMappings = {
     closeThisNoteSplit: CommandData;
     moveThisNoteSplit: CommandData & { isMovingLeft: boolean };
     jumpToNote: CommandData;
+    commandPalette: CommandData;
 
     // Geomap
     deleteFromMap: { noteId: string };

apps/client/src/components/entrypoints.ts

@@ -113,7 +113,9 @@ export default class Entrypoints extends Component {
             if (win.isFullScreenable()) {
                 win.setFullScreen(!win.isFullScreen());
             }
-        } // outside of electron this is handled by the browser
+        } else {
+            document.documentElement.requestFullscreen();
+        }
     }
 
     reloadFrontendAppCommand() {

apps/client/src/components/note_context.ts

@@ -325,8 +325,9 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
             return false;
         }
 
-        // Some book types must always display a note list, even if no children.
-        if (["calendar", "table", "geoMap"].includes(note.getLabelValue("viewType") ?? "")) {
+        // Collections must always display a note list, even if no children.
+        const viewType = note.getLabelValue("viewType") ?? "grid";
+        if (!["list", "grid"].includes(viewType)) {
             return true;
         }
 

apps/client/src/components/root_command_executor.ts

@@ -146,6 +146,19 @@ export default class RootCommandExecutor extends Component {
         }
     }
 
+    async showNoteOCRTextCommand() {
+        const notePath = appContext.tabManager.getActiveContextNotePath();
+
+        if (notePath) {
+            await appContext.tabManager.openTabWithNoteWithHoisting(notePath, {
+                activate: true,
+                viewScope: {
+                    viewMode: "ocr"
+                }
+            });
+        }
+    }
+
     async showAttachmentsCommand() {
         const notePath = appContext.tabManager.getActiveContextNotePath();
 

apps/client/src/menus/tree_context_menu.ts

@@ -23,7 +23,7 @@ let lastTargetNode: HTMLElement | null = null;
 
 // This will include all commands that implement ContextMenuCommandData, but it will not work if it additional options are added via the `|` operator,
 // so they need to be added manually.
-export type TreeCommandNames = FilteredCommandNames<ContextMenuCommandData> | "openBulkActionsDialog";
+export type TreeCommandNames = FilteredCommandNames<ContextMenuCommandData> | "openBulkActionsDialog" | "searchInSubtree";
 
 export default class TreeContextMenu implements SelectMenuItemEventListener<TreeCommandNames> {
     private treeWidget: NoteTreeWidget;
@@ -129,7 +129,7 @@ export default class TreeContextMenu implements SelectMenuItemEventListener<Tree
                         enabled: isNotRoot && parentNotSearch && noSelectedNotes && notOptionsOrHelp
                     },
                     { title: t("tree-context-menu.convert-to-attachment"), command: "convertNoteToAttachment", uiIcon: "bx bx-paperclip", enabled: isNotRoot && !isHoisted && notOptionsOrHelp },
-                    
+
                     { title: "----" },
 
                     { title: `${t("tree-context-menu.expand-subtree")} <kbd data-command="expandSubtree"></kbd>`, command: "expandSubtree", uiIcon: "bx bx-expand", enabled: noSelectedNotes },

apps/client/src/services/attribute_renderer.ts

@@ -79,7 +79,19 @@ async function renderAttributes(attributes: FAttribute[], renderIsInheritable: b
     return $container;
 }
 
-const HIDDEN_ATTRIBUTES = ["originalFileName", "fileSize", "template", "inherit", "cssClass", "iconClass", "pageSize", "viewType", "geolocation", "docName"];
+const HIDDEN_ATTRIBUTES = [
+    "originalFileName",
+    "fileSize",
+    "template",
+    "inherit",
+    "cssClass",
+    "iconClass",
+    "pageSize",
+    "viewType",
+    "geolocation",
+    "docName",
+    "webViewSrc"
+];
 
 async function renderNormalAttributes(note: FNote) {
     const promotedDefinitionAttributes = note.getPromotedDefinitionAttributes();

apps/client/src/services/bulk_action.ts

@@ -91,10 +91,10 @@ function parseActions(note: FNote) {
         .filter((action) => !!action);
 }
 
-export async function executeBulkActions(parentNoteId: string, actions: BulkAction[]) {
+export async function executeBulkActions(targetNoteIds: string[], actions: BulkAction[], includeDescendants = false) {
     await server.post("bulk-action/execute", {
-        noteIds: [ parentNoteId ],
-        includeDescendants: true,
+        noteIds: targetNoteIds,
+        includeDescendants,
         actions
     });
 

apps/client/src/services/command_registry.ts

@@ -0,0 +1,295 @@
+import { ActionKeyboardShortcut } from "@triliumnext/commons";
+import appContext, { type CommandNames } from "../components/app_context.js";
+import type NoteTreeWidget from "../widgets/note_tree.js";
+import { t, translationsInitializedPromise } from "./i18n.js";
+import keyboardActions from "./keyboard_actions.js";
+import utils from "./utils.js";
+
+export interface CommandDefinition {
+    id: string;
+    name: string;
+    description?: string;
+    icon?: string;
+    shortcut?: string;
+    commandName?: CommandNames;
+    handler?: () => Promise<unknown> | null | undefined | void;
+    aliases?: string[];
+    source?: "manual" | "keyboard-action";
+    /** Reference to the original keyboard action for scope checking. */
+    keyboardAction?: ActionKeyboardShortcut;
+}
+
+class CommandRegistry {
+    private commands: Map<string, CommandDefinition> = new Map();
+    private aliases: Map<string, string> = new Map();
+
+    constructor() {
+        this.loadCommands();
+    }
+
+    private async loadCommands() {
+        await translationsInitializedPromise;
+        this.registerDefaultCommands();
+        await this.loadKeyboardActionsAsync();
+    }
+
+    private registerDefaultCommands() {
+        this.register({
+            id: "export-note",
+            name: t("command_palette.export_note_title"),
+            description: t("command_palette.export_note_description"),
+            icon: "bx bx-export",
+            handler: () => {
+                const notePath = appContext.tabManager.getActiveContextNotePath();
+                if (notePath) {
+                    appContext.triggerCommand("showExportDialog", {
+                        notePath,
+                        defaultType: "single"
+                    });
+                }
+            }
+        });
+
+        this.register({
+            id: "show-attachments",
+            name: t("command_palette.show_attachments_title"),
+            description: t("command_palette.show_attachments_description"),
+            icon: "bx bx-paperclip",
+            handler: () => appContext.triggerCommand("showAttachments")
+        });
+
+        // Special search commands with custom logic
+        this.register({
+            id: "search-notes",
+            name: t("command_palette.search_notes_title"),
+            description: t("command_palette.search_notes_description"),
+            icon: "bx bx-search",
+            handler: () => appContext.triggerCommand("searchNotes", {})
+        });
+
+        this.register({
+            id: "search-in-subtree",
+            name: t("command_palette.search_subtree_title"),
+            description: t("command_palette.search_subtree_description"),
+            icon: "bx bx-search-alt",
+            handler: () => {
+                const notePath = appContext.tabManager.getActiveContextNotePath();
+                if (notePath) {
+                    appContext.triggerCommand("searchInSubtree", { notePath });
+                }
+            }
+        });
+
+        this.register({
+            id: "show-search-history",
+            name: t("command_palette.search_history_title"),
+            description: t("command_palette.search_history_description"),
+            icon: "bx bx-history",
+            handler: () => appContext.triggerCommand("showSearchHistory")
+        });
+
+        this.register({
+            id: "show-launch-bar",
+            name: t("command_palette.configure_launch_bar_title"),
+            description: t("command_palette.configure_launch_bar_description"),
+            icon: "bx bx-sidebar",
+            handler: () => appContext.triggerCommand("showLaunchBarSubtree")
+        });
+    }
+
+    private async loadKeyboardActionsAsync() {
+        try {
+            const actions = await keyboardActions.getActions();
+            this.registerKeyboardActions(actions);
+        } catch (error) {
+            console.error("Failed to load keyboard actions:", error);
+        }
+    }
+
+    private registerKeyboardActions(actions: ActionKeyboardShortcut[]) {
+        for (const action of actions) {
+            // Skip actions that we've already manually registered
+            if (this.commands.has(action.actionName)) {
+                continue;
+            }
+
+            // Skip actions that don't have a description (likely separators)
+            if (!action.description) {
+                continue;
+            }
+
+            // Skip Electron-only actions if not in Electron environment
+            if (action.isElectronOnly && !utils.isElectron()) {
+                continue;
+            }
+
+            // Skip actions that should not appear in the command palette
+            if (action.ignoreFromCommandPalette) {
+                continue;
+            }
+
+            // Get the primary shortcut (first one in the list)
+            const primaryShortcut = action.effectiveShortcuts?.[0];
+
+            let name = action.friendlyName;
+            if (action.scope === "note-tree") {
+                name = t("command_palette.tree-action-name", { name: action.friendlyName });
+            }
+
+            // Create a command definition from the keyboard action
+            const commandDef: CommandDefinition = {
+                id: action.actionName,
+                name,
+                description: action.description,
+                icon: action.iconClass,
+                shortcut: primaryShortcut ? this.formatShortcut(primaryShortcut) : undefined,
+                commandName: action.actionName as CommandNames,
+                source: "keyboard-action",
+                keyboardAction: action
+            };
+
+            this.register(commandDef);
+        }
+    }
+
+    private formatShortcut(shortcut: string): string {
+        // Convert electron accelerator format to display format
+        return shortcut
+            .replace(/CommandOrControl/g, 'Ctrl')
+            .replace(/\+/g, ' + ');
+    }
+
+    register(command: CommandDefinition) {
+        this.commands.set(command.id, command);
+
+        // Register aliases
+        if (command.aliases) {
+            for (const alias of command.aliases) {
+                this.aliases.set(alias.toLowerCase(), command.id);
+            }
+        }
+    }
+
+    getCommand(id: string): CommandDefinition | undefined {
+        return this.commands.get(id);
+    }
+
+    getAllCommands(): CommandDefinition[] {
+        const commands = Array.from(this.commands.values());
+
+        // Sort commands by name
+        commands.sort((a, b) => a.name.localeCompare(b.name));
+
+        return commands;
+    }
+
+    searchCommands(query: string): CommandDefinition[] {
+        const normalizedQuery = query.toLowerCase();
+        const results: { command: CommandDefinition; score: number }[] = [];
+
+        for (const command of this.commands.values()) {
+            let score = 0;
+
+            // Exact match on name
+            if (command.name.toLowerCase() === normalizedQuery) {
+                score = 100;
+            }
+            // Name starts with query
+            else if (command.name.toLowerCase().startsWith(normalizedQuery)) {
+                score = 80;
+            }
+            // Name contains query
+            else if (command.name.toLowerCase().includes(normalizedQuery)) {
+                score = 60;
+            }
+            // Description contains query
+            else if (command.description?.toLowerCase().includes(normalizedQuery)) {
+                score = 40;
+            }
+            // Check aliases
+            else if (command.aliases?.some(alias => alias.toLowerCase().includes(normalizedQuery))) {
+                score = 50;
+            }
+
+            if (score > 0) {
+                results.push({ command, score });
+            }
+        }
+
+        // Sort by score (highest first) and then by name
+        results.sort((a, b) => {
+            if (a.score !== b.score) {
+                return b.score - a.score;
+            }
+            return a.command.name.localeCompare(b.command.name);
+        });
+
+        return results.map(r => r.command);
+    }
+
+    async executeCommand(commandId: string) {
+        const command = this.getCommand(commandId);
+        if (!command) {
+            console.error(`Command not found: ${commandId}`);
+            return;
+        }
+
+        // Execute custom handler if provided
+        if (command.handler) {
+            await command.handler();
+            return;
+        }
+
+        // Handle keyboard action with scope-aware execution
+        if (command.keyboardAction && command.commandName) {
+            if (command.keyboardAction.scope === "note-tree") {
+                this.executeWithNoteTreeFocus(command.commandName);
+            } else if (command.keyboardAction.scope === "text-detail") {
+                this.executeWithTextDetail(command.commandName);
+            } else {
+                appContext.triggerCommand(command.commandName, {
+                    ntxId: appContext.tabManager.activeNtxId
+                });
+            }
+            return;
+        }
+
+        // Fallback for commands without keyboard action reference
+        if (command.commandName) {
+            appContext.triggerCommand(command.commandName, {
+                ntxId: appContext.tabManager.activeNtxId
+            });
+            return;
+        }
+
+        console.error(`Command ${commandId} has no handler or commandName`);
+    }
+
+    private executeWithNoteTreeFocus(actionName: CommandNames) {
+        const tree = document.querySelector(".tree-wrapper") as HTMLElement;
+        if (!tree) {
+            return;
+        }
+
+        const treeComponent = appContext.getComponentByEl(tree) as NoteTreeWidget;
+        const activeNode = treeComponent.getActiveNode();
+        treeComponent.triggerCommand(actionName, {
+            ntxId: appContext.tabManager.activeNtxId,
+            node: activeNode
+        });
+    }
+
+    private async executeWithTextDetail(actionName: CommandNames) {
+        const typeWidget = await appContext.tabManager.getActiveContext()?.getTypeWidget();
+        if (!typeWidget) {
+            return;
+        }
+
+        typeWidget.triggerCommand(actionName, {
+            ntxId: appContext.tabManager.activeNtxId
+        });
+    }
+}
+
+const commandRegistry = new CommandRegistry();
+export default commandRegistry;

apps/client/src/services/content_renderer.ts

@@ -23,6 +23,7 @@ interface Options {
     tooltip?: boolean;
     trim?: boolean;
     imageHasZoom?: boolean;
+    showOcrText?: boolean;
 }
 
 const CODE_MIME_TYPES = new Set(["application/json"]);
@@ -46,9 +47,9 @@ async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FA
     } else if (type === "code") {
         await renderCode(entity, $renderedContent);
     } else if (["image", "canvas", "mindMap"].includes(type)) {
-        renderImage(entity, $renderedContent, options);
+        await renderImage(entity, $renderedContent, options);
     } else if (!options.tooltip && ["file", "pdf", "audio", "video"].includes(type)) {
-        renderFile(entity, type, $renderedContent);
+        await renderFile(entity, type, $renderedContent, options);
     } else if (type === "mermaid") {
         await renderMermaid(entity, $renderedContent);
     } else if (type === "render" && entity instanceof FNote) {
@@ -65,6 +66,9 @@ async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FA
 
         $renderedContent.append($("<div>").append("<div>This note is protected and to access it you need to enter password.</div>").append("<br/>").append($button));
     } else if (entity instanceof FNote) {
+        $renderedContent
+            .css("display", "flex")
+            .css("flex-direction", "column");
         $renderedContent.append(
             $("<div>")
                 .css("display", "flex")
@@ -72,8 +76,33 @@ async function getRenderedContent(this: {} | { ctx: string }, entity: FNote | FA
                 .css("align-items", "center")
                 .css("height", "100%")
                 .css("font-size", "500%")
+                .css("flex-grow", "1")
                 .append($("<span>").addClass(entity.getIcon()))
         );
+
+        if (entity.type === "webView" && entity.hasLabel("webViewSrc")) {
+            const $footer = $("<footer>")
+                .addClass("webview-footer");
+            const $openButton = $(`
+                <button class="file-open btn btn-primary" type="button">
+                    <span class="bx bx-link-external"></span>
+                    ${t("content_renderer.open_externally")}
+                </button>
+            `)
+                .appendTo($footer)
+                .on("click", () => {
+                    const webViewSrc = entity.getLabelValue("webViewSrc");
+                    if (webViewSrc) {
+                        if (utils.isElectron()) {
+                            const electron = utils.dynamicRequire("electron");
+                            electron.shell.openExternal(webViewSrc);
+                        } else {
+                            window.open(webViewSrc, '_blank', 'noopener,noreferrer');
+                        }
+                    }
+                });
+            $footer.appendTo($renderedContent);
+        }
     }
 
     if (entity instanceof FNote) {
@@ -133,7 +162,7 @@ async function renderCode(note: FNote | FAttachment, $renderedContent: JQuery<HT
     await applySingleBlockSyntaxHighlight($codeBlock, normalizeMimeTypeForCKEditor(note.mime));
 }
 
-function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: Options = {}) {
+async function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLElement>, options: Options = {}) {
     const encodedTitle = encodeURIComponent(entity.title);
 
     let url;
@@ -173,9 +202,39 @@ function renderImage(entity: FNote | FAttachment, $renderedContent: JQuery<HTMLE
     }
 
     imageContextMenuService.setupContextMenu($img);
+
+    // Add OCR text display for image notes
+    if (entity instanceof FNote && options.showOcrText) {
+        await addOCRTextIfAvailable(entity, $renderedContent);
+    }
 }
 
-function renderFile(entity: FNote | FAttachment, type: string, $renderedContent: JQuery<HTMLElement>) {
+async function addOCRTextIfAvailable(note: FNote, $content: JQuery<HTMLElement>) {
+    try {
+        const response = await fetch(`api/ocr/notes/${note.noteId}/text`);
+        if (response.ok) {
+            const data = await response.json();
+            if (data.success && data.hasOcr && data.text) {
+                const $ocrSection = $(`
+                    <div class="ocr-text-section">
+                        <div class="ocr-header">
+                            <span class="bx bx-text"></span> ${t("ocr.extracted_text")}
+                        </div>
+                        <div class="ocr-content"></div>
+                    </div>
+                `);
+
+                $ocrSection.find('.ocr-content').text(data.text);
+                $content.append($ocrSection);
+            }
+        }
+    } catch (error) {
+        // Silently fail if OCR API is not available
+        console.debug('Failed to fetch OCR text:', error);
+    }
+}
+
+async function renderFile(entity: FNote | FAttachment, type: string, $renderedContent: JQuery<HTMLElement>, options: Options = {}) {
     let entityType, entityId;
 
     if (entity instanceof FNote) {
@@ -211,6 +270,11 @@ function renderFile(entity: FNote | FAttachment, type: string, $renderedContent:
         $content.append($videoPreview);
     }
 
+    // Add OCR text display for file notes
+    if (entity instanceof FNote && options.showOcrText) {
+        await addOCRTextIfAvailable(entity, $content);
+    }
+
     if (entityType === "notes" && "noteId" in entity) {
         // TODO: we should make this available also for attachments, but there's a problem with "Open externally" support
         //       in attachment list

apps/client/src/services/i18n.ts

@@ -6,6 +6,11 @@ import type { Locale } from "@triliumnext/commons";
 
 let locales: Locale[] | null;
 
+/**
+ * A deferred promise that resolves when translations are initialized.
+ */
+export let translationsInitializedPromise = $.Deferred();
+
 export async function initLocale() {
     const locale = (options.get("locale") as string) || "en";
 
@@ -19,6 +24,8 @@ export async function initLocale() {
         },
         returnEmptyString: false
     });
+
+    translationsInitializedPromise.resolve();
 }
 
 export function getAvailableLocales() {

apps/client/src/services/keyboard_actions.ts

@@ -2,21 +2,15 @@ import server from "./server.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";
 
-const keyboardActionRepo: Record<string, Action> = {};
+const keyboardActionRepo: Record<string, ActionKeyboardShortcut> = {};
 
-// TODO: Deduplicate with server.
-export interface Action {
-    actionName: CommandNames;
-    effectiveShortcuts: string[];
-    scope: string;
-}
-
-const keyboardActionsLoaded = server.get<Action[]>("keyboard-actions").then((actions) => {
+const keyboardActionsLoaded = server.get<ActionKeyboardShortcut[]>("keyboard-actions").then((actions) => {
     actions = actions.filter((a) => !!a.actionName); // filter out separators
 
     for (const action of actions) {
-        action.effectiveShortcuts = action.effectiveShortcuts.filter((shortcut) => !shortcut.startsWith("global:"));
+        action.effectiveShortcuts = (action.effectiveShortcuts ?? []).filter((shortcut) => !shortcut.startsWith("global:"));
 
         keyboardActionRepo[action.actionName] = action;
     }
@@ -38,7 +32,7 @@ async function setupActionsForElement(scope: string, $el: JQuery<HTMLElement>, c
     const actions = await getActionsForScope(scope);
 
     for (const action of actions) {
-        for (const shortcut of action.effectiveShortcuts) {
+        for (const shortcut of action.effectiveShortcuts ?? []) {
             shortcutService.bindElShortcut($el, shortcut, () => component.triggerCommand(action.actionName, { ntxId: appContext.tabManager.activeNtxId }));
         }
     }
@@ -46,7 +40,7 @@ async function setupActionsForElement(scope: string, $el: JQuery<HTMLElement>, c
 
 getActionsForScope("window").then((actions) => {
     for (const action of actions) {
-        for (const shortcut of action.effectiveShortcuts) {
+        for (const shortcut of action.effectiveShortcuts ?? []) {
             shortcutService.bindGlobalShortcut(shortcut, () => appContext.triggerCommand(action.actionName, { ntxId: appContext.tabManager.activeNtxId }));
         }
     }
@@ -80,7 +74,7 @@ function updateDisplayedShortcuts($container: JQuery<HTMLElement>) {
         const action = await getAction(actionName, true);
 
         if (action) {
-            const keyboardActions = action.effectiveShortcuts.join(", ");
+            const keyboardActions = (action.effectiveShortcuts ?? []).join(", ");
 
             if (keyboardActions || $(el).text() !== "not set") {
                 $(el).text(keyboardActions);
@@ -99,7 +93,7 @@ function updateDisplayedShortcuts($container: JQuery<HTMLElement>) {
 
         if (action) {
             const title = $(el).attr("title");
-            const shortcuts = action.effectiveShortcuts.join(", ");
+            const shortcuts = (action.effectiveShortcuts ?? []).join(", ");
 
             if (title?.includes(shortcuts)) {
                 return;

apps/client/src/services/note_autocomplete.ts

@@ -3,6 +3,7 @@ import appContext from "../components/app_context.js";
 import noteCreateService from "./note_create.js";
 import froca from "./froca.js";
 import { t } from "./i18n.js";
+import commandRegistry from "./command_registry.js";
 import type { MentionFeedObjectItem } from "@triliumnext/ckeditor5";
 
 // this key needs to have this value, so it's hit by the tooltip
@@ -29,9 +30,12 @@ export interface Suggestion {
     notePathTitle?: string;
     notePath?: string;
     highlightedNotePathTitle?: string;
-    action?: string | "create-note" | "search-notes" | "external-link";
+    action?: string | "create-note" | "search-notes" | "external-link" | "command";
     parentNoteId?: string;
     icon?: string;
+    commandId?: string;
+    commandDescription?: string;
+    commandShortcut?: string;
 }
 
 interface Options {
@@ -44,6 +48,8 @@ interface Options {
     hideGoToSelectedNoteButton?: boolean;
     /** If set, hides all right-side buttons in the autocomplete dropdown */
     hideAllButtons?: boolean;
+    /** If set, enables command palette mode */
+    isCommandPalette?: boolean;
 }
 
 async function autocompleteSourceForCKEditor(queryText: string) {
@@ -73,6 +79,31 @@ async function autocompleteSourceForCKEditor(queryText: string) {
 }
 
 async function autocompleteSource(term: string, cb: (rows: Suggestion[]) => void, options: Options = {}) {
+    // Check if we're in command mode
+    if (options.isCommandPalette && term.startsWith(">")) {
+        const commandQuery = term.substring(1).trim();
+        
+        // Get commands (all if no query, filtered if query provided)
+        const commands = commandQuery.length === 0 
+            ? commandRegistry.getAllCommands()
+            : commandRegistry.searchCommands(commandQuery);
+            
+        // Convert commands to suggestions
+        const commandSuggestions: Suggestion[] = commands.map(cmd => ({
+            action: "command",
+            commandId: cmd.id,
+            noteTitle: cmd.name,
+            notePathTitle: `>${cmd.name}`,
+            highlightedNotePathTitle: cmd.name,
+            commandDescription: cmd.description,
+            commandShortcut: cmd.shortcut,
+            icon: cmd.icon
+        }));
+        
+        cb(commandSuggestions);
+        return;
+    }
+
     const fastSearch = options.fastSearch === false ? false : true;
     if (fastSearch === false) {
         if (term.trim().length === 0) {
@@ -146,6 +177,12 @@ function showRecentNotes($el: JQuery<HTMLElement>) {
     $el.trigger("focus");
 }
 
+function showAllCommands($el: JQuery<HTMLElement>) {
+    searchDelay = 0;
+    $el.setSelectedNotePath("");
+    $el.autocomplete("val", ">").autocomplete("open");
+}
+
 function fullTextSearch($el: JQuery<HTMLElement>, options: Options) {
     const searchString = $el.autocomplete("val") as unknown as string;
     if (options.fastSearch === false || searchString?.trim().length === 0) {
@@ -270,7 +307,24 @@ function initNoteAutocomplete($el: JQuery<HTMLElement>, options?: Options) {
                 },
                 displayKey: "notePathTitle",
                 templates: {
-                    suggestion: (suggestion) => `<span class="${suggestion.icon ?? "bx bx-note"}"></span> ${suggestion.highlightedNotePathTitle}`
+                    suggestion: (suggestion) => {
+                        if (suggestion.action === "command") {
+                            let html = `<div class="command-suggestion">`;
+                            html += `<span class="command-icon ${suggestion.icon || "bx bx-terminal"}"></span>`;
+                            html += `<div class="command-content">`;
+                            html += `<div class="command-name">${suggestion.highlightedNotePathTitle}</div>`;
+                            if (suggestion.commandDescription) {
+                                html += `<div class="command-description">${suggestion.commandDescription}</div>`;
+                            }
+                            html += `</div>`;
+                            if (suggestion.commandShortcut) {
+                                html += `<kbd class="command-shortcut">${suggestion.commandShortcut}</kbd>`;
+                            }
+                            html += '</div>';
+                            return html;
+                        }
+                        return `<span class="${suggestion.icon ?? "bx bx-note"}"></span> ${suggestion.highlightedNotePathTitle}`;
+                    }
                 },
                 // we can't cache identical searches because notes can be created / renamed, new recent notes can be added
                 cache: false
@@ -280,6 +334,12 @@ function initNoteAutocomplete($el: JQuery<HTMLElement>, options?: Options) {
 
     // TODO: Types fail due to "autocomplete:selected" not being registered in type definitions.
     ($el as any).on("autocomplete:selected", async (event: Event, suggestion: Suggestion) => {
+        if (suggestion.action === "command") {
+            $el.autocomplete("close");
+            $el.trigger("autocomplete:commandselected", [suggestion]);
+            return;
+        }
+
         if (suggestion.action === "external-link") {
             $el.setSelectedNotePath(null);
             $el.setSelectedExternalLink(suggestion.externalLink);
@@ -396,6 +456,7 @@ export default {
     autocompleteSourceForCKEditor,
     initNoteAutocomplete,
     showRecentNotes,
+    showAllCommands,
     setText,
     init
 };

apps/client/src/services/note_list_renderer.ts

@@ -1,4 +1,5 @@
 import type FNote from "../entities/fnote.js";
+import BoardView from "../widgets/view_widgets/board_view/index.js";
 import CalendarView from "../widgets/view_widgets/calendar_view.js";
 import GeoView from "../widgets/view_widgets/geo_view/index.js";
 import ListOrGridView from "../widgets/view_widgets/list_or_grid_view.js";
@@ -6,8 +7,9 @@ import TableView from "../widgets/view_widgets/table_view/index.js";
 import type { ViewModeArgs } from "../widgets/view_widgets/view_mode.js";
 import type ViewMode from "../widgets/view_widgets/view_mode.js";
 
+const allViewTypes = ["list", "grid", "calendar", "table", "geoMap", "board"] as const;
 export type ArgsWithoutNoteId = Omit<ViewModeArgs, "noteIds">;
-export type ViewTypeOptions = "list" | "grid" | "calendar" | "table" | "geoMap";
+export type ViewTypeOptions = typeof allViewTypes[number];
 
 export default class NoteListRenderer {
 
@@ -23,7 +25,7 @@ export default class NoteListRenderer {
     #getViewType(parentNote: FNote): ViewTypeOptions {
         const viewType = parentNote.getLabelValue("viewType");
 
-        if (!["list", "grid", "calendar", "table", "geoMap"].includes(viewType || "")) {
+        if (!(allViewTypes as readonly string[]).includes(viewType || "")) {
             // when not explicitly set, decide based on the note type
             return parentNote.type === "search" ? "list" : "grid";
         } else {
@@ -57,6 +59,8 @@ export default class NoteListRenderer {
                 return new TableView(args);
             case "geoMap":
                 return new GeoView(args);
+            case "board":
+                return new BoardView(args);
             case "list":
             case "grid":
             default:

apps/client/src/services/promoted_attribute_definition_parser.ts

@@ -1,4 +1,4 @@
-export type LabelType = "text" | "number" | "boolean" | "date" | "datetime" | "time" | "url";
+export type LabelType = "text" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
 type Multiplicity = "single" | "multi";
 
 export interface DefinitionObject {
@@ -17,7 +17,7 @@ function parse(value: string) {
     for (const token of tokens) {
         if (token === "promoted") {
             defObj.isPromoted = true;
-        } else if (["text", "number", "boolean", "date", "datetime", "time", "url"].includes(token)) {
+        } else if (["text", "number", "boolean", "date", "datetime", "time", "url", "color"].includes(token)) {
             defObj.labelType = token as LabelType;
         } else if (["single", "multi"].includes(token)) {
             defObj.multiplicity = token as Multiplicity;

apps/client/src/services/spaced_update.ts

@@ -51,6 +51,14 @@ export default class SpacedUpdate {
         this.lastUpdated = Date.now();
     }
 
+    /**
+     * Sets the update interval for the spaced update.
+     * @param interval The update interval in milliseconds.
+     */
+    setUpdateInterval(interval: number) {
+        this.updateInterval = interval;
+    }
+
     triggerUpdate() {
         if (!this.changed) {
             return;

apps/client/src/share.ts

@@ -29,6 +29,14 @@ async function formatCodeBlocks() {
     await formatCodeBlocks($("#content"));
 }
 
+async function setupTextNote() {
+    formatCodeBlocks();
+    applyMath();
+
+    const setupMermaid = (await import("./share/mermaid.js")).default;
+    setupMermaid();
+}
+
 /**
  * Fetch note with given ID from backend
  *
@@ -47,8 +55,11 @@ async function fetchNote(noteId: string | null = null) {
 document.addEventListener(
     "DOMContentLoaded",
     () => {
-        formatCodeBlocks();
-        applyMath();
+        const noteType = determineNoteType();
+
+        if (noteType === "text") {
+            setupTextNote();
+        }
 
         const toggleMenuButton = document.getElementById("toggleMenuButton");
         const layout = document.getElementById("layout");
@@ -60,6 +71,12 @@ document.addEventListener(
     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", {

apps/client/src/share/mermaid.ts

@@ -0,0 +1,17 @@
+import mermaid from "mermaid";
+
+export default function setupMermaid() {
+    for (const codeBlock of document.querySelectorAll("#content pre code.language-mermaid")) {
+        const parentPre = codeBlock.parentElement;
+        if (!parentPre) {
+            continue;
+        }
+
+        const mermaidDiv = document.createElement("div");
+        mermaidDiv.classList.add("mermaid");
+        mermaidDiv.innerHTML = codeBlock.innerHTML;
+        parentPre.replaceWith(mermaidDiv);
+    }
+
+    mermaid.init();
+}

apps/client/src/stylesheets/print.css

@@ -320,3 +320,8 @@ h6 {
     page-break-after: avoid;
     break-after: avoid;
 }
+
+figure.table {
+    /* Workaround for https://github.com/ckeditor/ckeditor5/issues/18903. Remove once official fix is released */
+    display: table !important;
+}

apps/client/src/stylesheets/style.css

@@ -139,12 +139,6 @@ textarea,
     color: var(--muted-text-color);
 }
 
-/* Restore default apperance */
-input[type="number"],
-input[type="checkbox"] {
-    appearance: auto !important;
-}
-
 /* Add a gap between consecutive radios / check boxes */
 label.tn-radio + label.tn-radio,
 label.tn-checkbox + label.tn-checkbox {
@@ -1786,6 +1780,54 @@ textarea {
     padding: 1rem;
 }
 
+/* Command palette styling */
+.jump-to-note-dialog .command-suggestion {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.9em;
+}
+
+.jump-to-note-dialog .aa-suggestion .command-suggestion,
+.jump-to-note-dialog .aa-suggestion .command-suggestion div {
+    padding: 0;
+}
+
+.jump-to-note-dialog .aa-cursor .command-suggestion,
+.jump-to-note-dialog .aa-suggestion:hover .command-suggestion {
+    border-left-color: var(--link-color);
+    background-color: var(--hover-background-color);
+}
+
+.jump-to-note-dialog .command-icon {
+    color: var(--muted-text-color);
+    font-size: 1.125rem;
+    flex-shrink: 0;
+    margin-top: 0.125rem;
+}
+
+.jump-to-note-dialog .command-content {
+    flex-grow: 1;
+    min-width: 0;
+}
+
+.jump-to-note-dialog .command-name {
+    font-weight: bold;
+}
+
+.jump-to-note-dialog .command-description {
+    font-size: 0.8em;
+    line-height: 1.3;
+    opacity: 0.75;
+}
+
+.jump-to-note-dialog kbd.command-shortcut {
+    background-color: transparent;
+    color: inherit;
+    opacity: 0.75;
+    font-family: inherit !important;
+}
+
 .empty-table-placeholder {
     text-align: center;
     color: var(--muted-text-color);
@@ -1895,12 +1937,14 @@ body.zen .note-title-widget input {
 
 /* Content renderer */
 
-footer.file-footer {
+footer.file-footer,
+footer.webview-footer {
     display: flex;
     justify-content: center;
 }
 
-footer.file-footer button {
+footer.file-footer button,
+footer.webview-footer button {
     margin: 5px;
 }
 
@@ -2207,3 +2251,26 @@ footer.file-footer button {
     content: "\ec24";
     transform: rotate(180deg);
 }
+
+.ocr-text-section {
+    margin: 10px 0;
+    padding: 10px;
+    background: var(--accented-background-color);
+    border-left: 3px solid var(--main-border-color);
+    text-align: left;
+}
+
+.ocr-header {
+    font-weight: bold;
+    margin-bottom: 8px;
+    font-size: 0.9em;
+    color: var(--muted-text-color);
+}
+
+.ocr-content {
+    max-height: 150px;
+    overflow-y: auto;
+    font-size: 0.9em;
+    line-height: 1.4;
+    white-space: pre-wrap;
+}

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

@@ -458,6 +458,11 @@ body.mobile .dropdown-menu .dropdown-item.submenu-open .dropdown-toggle::after {
     padding: 1rem;
 }
 
+.note-list-wrapper .note-book-card .note-book-content.type-image .rendered-content,
+.note-list-wrapper .note-book-card .note-book-content.type-pdf .rendered-content {
+    padding: 0;
+}
+
 .note-list-wrapper .note-book-card .note-book-content .rendered-content.text-with-ellipsis {
     padding: 1rem !important;
 }

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

@@ -128,10 +128,15 @@ div.tn-tool-dialog {
 
 .jump-to-note-dialog .modal-header {
     padding: unset !important;
+    padding-bottom: 26px !important;
 }
 
 .jump-to-note-dialog .modal-body {
-    padding: 26px 0 !important;
+    padding: 0 !important;
+}
+
+.jump-to-note-dialog .modal-footer {
+    padding-top: 26px;
 }
 
 /* Search box wrapper */

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

@@ -1678,4 +1678,42 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
 #right-pane .highlights-list li:active {
     background: transparent;
     transition: none;
+}
+
+/** Canvas **/
+
+.excalidraw {
+    --border-radius-lg: 6px;
+}
+
+.excalidraw .Island {
+    backdrop-filter: var(--dropdown-backdrop-filter);
+}
+
+.excalidraw .Island.App-toolbar {
+    --island-bg-color: var(--floating-button-background-color);
+    --shadow-island: 1px 1px 1px var(--floating-button-shadow-color);
+}
+
+.excalidraw .dropdown-menu {
+    border: unset !important;
+    box-shadow: unset !important;    
+    background-color: transparent !important;
+    --island-bg-color: var(--menu-background-color);
+    --shadow-island: 0px 10px 20px rgba(0, 0, 0, var(--dropdown-shadow-opacity));
+    --default-border-color: var(--bs-dropdown-divider-bg);
+    --button-hover-bg: var(--hover-item-background-color);
+}
+
+.excalidraw .dropdown-menu .dropdown-menu-container {
+    border-radius: var(--dropdown-border-radius);
+}
+
+.excalidraw .dropdown-menu .dropdown-menu-container > div:not([class]):not(:last-child) {
+    margin-left: calc(var(--padding) * var(--space-factor) * -1) !important;
+    margin-right: calc(var(--padding) * var(--space-factor) * -1) !important;
+}
+
+.excalidraw .dropdown-menu:before {
+    content: unset !important;
 }

apps/client/src/translations/cn/translation.json

@@ -210,7 +210,7 @@
     "okButton": "确定"
   },
   "jump_to_note": {
-    "search_placeholder": "按笔记名称搜索",
+    "search_placeholder": "",
     "close": "关闭",
     "search_button": "全文搜索 <kbd>Ctrl+回车</kbd>"
   },
@@ -1449,7 +1449,7 @@
     "relation-map": "关系图",
     "note-map": "笔记地图",
     "render-note": "渲染笔记",
-    "book": "书",
+    "book": "",
     "mermaid-diagram": "Mermaid 图",
     "canvas": "画布",
     "web-view": "网页视图",

apps/client/src/translations/de/translation.json

@@ -210,7 +210,7 @@
     "okButton": "OK"
   },
   "jump_to_note": {
-    "search_placeholder": "Suche nach einer Notiz anhand ihres Namens",
+    "search_placeholder": "",
     "close": "Schließen",
     "search_button": "Suche im Volltext: <kbd>Strg+Eingabetaste</kbd>"
   },
@@ -1403,7 +1403,7 @@
     "relation-map": "Beziehungskarte",
     "note-map": "Notizkarte",
     "render-note": "Render Notiz",
-    "book": "Buch",
+    "book": "",
     "mermaid-diagram": "Mermaid Diagram",
     "canvas": "Canvas",
     "web-view": "Webansicht",

apps/client/src/translations/en/translation.json

@@ -211,7 +211,7 @@
     "okButton": "OK"
   },
   "jump_to_note": {
-    "search_placeholder": "search for note by its name",
+    "search_placeholder": "Search for note by its name or type > for commands...",
     "close": "Close",
     "search_button": "Search in full text <kbd>Ctrl+Enter</kbd>"
   },
@@ -443,7 +443,8 @@
     "other_notes_with_name": "Other notes with {{attributeType}} name \"{{attributeName}}\"",
     "and_more": "... and {{count}} more.",
     "print_landscape": "When exporting to PDF, changes the orientation of the page to landscape instead of portrait.",
-    "print_page_size": "When exporting to PDF, changes the size of the page. Supported values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>."
+    "print_page_size": "When exporting to PDF, changes the size of the page. Supported values: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.",
+    "color_type": "Color"
   },
   "attribute_editor": {
     "help_text_body1": "To add label, just type e.g. <code>#rock</code> or if you want to add also value then e.g. <code>#year = 2020</code>",
@@ -673,6 +674,7 @@
     "search_in_note": "Search in note",
     "note_source": "Note source",
     "note_attachments": "Note attachments",
+    "view_ocr_text": "View OCR text",
     "open_note_externally": "Open note externally",
     "open_note_externally_title": "File will be open in an external application and watched for changes. You'll then be able to upload the modified version back to Trilium.",
     "open_note_custom": "Open note custom",
@@ -762,7 +764,8 @@
     "invalid_view_type": "Invalid view type '{{type}}'",
     "calendar": "Calendar",
     "table": "Table",
-    "geo-map": "Geo Map"
+    "geo-map": "Geo Map",
+    "board": "Board"
   },
   "edited_notes": {
     "no_edited_notes_found": "No edited notes on this day yet...",
@@ -839,7 +842,8 @@
     "unknown_label_type": "Unknown label type '{{type}}'",
     "unknown_attribute_type": "Unknown attribute type '{{type}}'",
     "add_new_attribute": "Add new attribute",
-    "remove_this_attribute": "Remove this attribute"
+    "remove_this_attribute": "Remove this attribute",
+    "remove_color": "Remove the color label"
   },
   "script_executor": {
     "query": "Query",
@@ -1300,7 +1304,22 @@
     "enable_image_compression": "Enable image compression",
     "max_image_dimensions": "Max width / height of an image (image will be resized if it exceeds this setting).",
     "max_image_dimensions_unit": "pixels",
-    "jpeg_quality_description": "JPEG quality (10 - worst quality, 100 - best quality, 50 - 85 is recommended)"
+    "jpeg_quality_description": "JPEG quality (10 - worst quality, 100 - best quality, 50 - 85 is recommended)",
+    "ocr_section_title": "Optical Character Recognition (OCR)",
+    "enable_ocr": "Enable OCR for images",
+    "ocr_description": "Automatically extract text from images using OCR technology. This makes image content searchable within your notes.",
+    "ocr_auto_process": "Automatically process new images with OCR",
+    "ocr_language": "OCR Language",
+    "ocr_min_confidence": "Minimum confidence threshold",
+    "ocr_confidence_unit": "(0.0-1.0)",
+    "ocr_confidence_description": "Only extract text with confidence above this threshold. Lower values include more text but may be less accurate.",
+    "batch_ocr_title": "Process Existing Images",
+    "batch_ocr_description": "Process all existing images in your notes with OCR. This may take some time depending on the number of images.",
+    "batch_ocr_start": "Start Batch OCR Processing",
+    "batch_ocr_starting": "Starting batch OCR processing...",
+    "batch_ocr_progress": "Processing {{processed}} of {{total}} images...",
+    "batch_ocr_completed": "Batch OCR completed! Processed {{processed}} images.",
+    "batch_ocr_error": "Error during batch OCR: {{error}}"
   },
   "attachment_erasure_timeout": {
     "attachment_erasure_timeout": "Attachment Erasure Timeout",
@@ -1615,7 +1634,7 @@
     "relation-map": "Relation Map",
     "note-map": "Note Map",
     "render-note": "Render Note",
-    "book": "Book",
+    "book": "Collection",
     "mermaid-diagram": "Mermaid Diagram",
     "canvas": "Canvas",
     "web-view": "Web View",
@@ -1964,9 +1983,57 @@
   },
   "book_properties_config": {
     "hide-weekends": "Hide weekends",
-    "display-week-numbers": "Display week numbers"
+    "display-week-numbers": "Display week numbers",
+    "map-style": "Map style:",
+    "max-nesting-depth": "Max nesting depth:",
+    "raster": "Raster",
+    "vector_light": "Vector (Light)",
+    "vector_dark": "Vector (Dark)",
+    "show-scale": "Show scale"
   },
   "table_context_menu": {
     "delete_row": "Delete row"
+  },
+  "board_view": {
+    "delete-note": "Delete Note",
+    "move-to": "Move to",
+    "insert-above": "Insert above",
+    "insert-below": "Insert below",
+    "delete-column": "Delete column",
+    "delete-column-confirmation": "Are you sure you want to delete this column? The corresponding attribute will be deleted in the notes under this column as well.",
+    "new-item": "New item",
+    "add-column": "Add Column"
+  },
+  "ocr": {
+    "extracted_text": "Extracted Text (OCR)",
+    "extracted_text_title": "Extracted Text (OCR)",
+    "loading_text": "Loading OCR text...",
+    "no_text_available": "No OCR text available",
+    "no_text_explanation": "This note has not been processed for OCR text extraction or no text was found.",
+    "failed_to_load": "Failed to load OCR text",
+    "extracted_on": "Extracted on: {{date}}",
+    "unknown_date": "Unknown",
+    "process_now": "Process OCR",
+    "processing": "Processing...",
+    "processing_started": "OCR processing has been started. Please wait a moment and refresh.",
+    "processing_failed": "Failed to start OCR processing"
+  },
+  "command_palette": {
+    "tree-action-name": "Tree: {{name}}",
+    "export_note_title": "Export Note",
+    "export_note_description": "Export current note",
+    "show_attachments_title": "Show Attachments",
+    "show_attachments_description": "View note attachments",
+    "search_notes_title": "Search Notes",
+    "search_notes_description": "Open advanced search",
+    "search_subtree_title": "Search in Subtree",
+    "search_subtree_description": "Search within current subtree",
+    "search_history_title": "Show Search History",
+    "search_history_description": "View previous searches",
+    "configure_launch_bar_title": "Configure Launch Bar",
+    "configure_launch_bar_description": "Open the launch bar configuration, to add or remove items."
+  },
+  "content_renderer": {
+    "open_externally": "Open externally"
   }
 }

apps/client/src/translations/es/translation.json

@@ -211,7 +211,7 @@
     "okButton": "Aceptar"
   },
   "jump_to_note": {
-    "search_placeholder": "buscar nota por su nombre",
+    "search_placeholder": "",
     "close": "Cerrar",
     "search_button": "Buscar en texto completo <kbd>Ctrl+Enter</kbd>"
   },
@@ -1612,7 +1612,7 @@
     "relation-map": "Mapa de Relaciones",
     "note-map": "Mapa de Notas",
     "render-note": "Nota de Renderizado",
-    "book": "Libro",
+    "book": "",
     "mermaid-diagram": "Diagrama Mermaid",
     "canvas": "Lienzo",
     "web-view": "Vista Web",

apps/client/src/translations/fr/translation.json

@@ -210,7 +210,7 @@
     "okButton": "OK"
   },
   "jump_to_note": {
-    "search_placeholder": "rechercher une note par son nom",
+    "search_placeholder": "",
     "close": "Fermer",
     "search_button": "Rechercher dans le texte intégral <kbd>Ctrl+Entrée</kbd>"
   },
@@ -1408,7 +1408,7 @@
     "relation-map": "Carte des relations",
     "note-map": "Carte de notes",
     "render-note": "Rendu Html",
-    "book": "Livre",
+    "book": "",
     "mermaid-diagram": "Diagramme Mermaid",
     "canvas": "Canevas",
     "web-view": "Affichage Web",

apps/client/src/translations/ro/translation.json

@@ -755,7 +755,7 @@
   },
   "jump_to_note": {
     "search_button": "Caută în întregul conținut <kbd>Ctrl+Enter</kbd>",
-    "search_placeholder": "căutați o notiță după denumirea ei",
+    "search_placeholder": "",
     "close": "Închide"
   },
   "left_pane_toggle": {
@@ -1377,7 +1377,7 @@
     "shared_publicly": "Această notiță este partajată public la"
   },
   "note_types": {
-    "book": "Carte",
+    "book": "Colecție",
     "canvas": "Schiță",
     "code": "Cod sursă",
     "mermaid-diagram": "Diagramă Mermaid",

apps/client/src/translations/tw/translation.json

@@ -194,7 +194,7 @@
     "okButton": "確定"
   },
   "jump_to_note": {
-    "search_placeholder": "按筆記名稱搜尋",
+    "search_placeholder": "",
     "search_button": "全文搜尋 <kbd>Ctrl+Enter</kbd>"
   },
   "markdown_import": {
@@ -1354,7 +1354,7 @@
     "relation-map": "關係圖",
     "note-map": "筆記地圖",
     "render-note": "渲染筆記",
-    "book": "書",
+    "book": "",
     "mermaid-diagram": "美人魚圖（Mermaid）",
     "canvas": "畫布",
     "web-view": "網頁視圖",

apps/client/src/types-assets.d.ts

@@ -3,6 +3,11 @@ declare module "*.png" {
     export default path;
 }
 
+declare module "*.json" {
+    var content: any;
+    export default content;
+}
+
 declare module "*?url" {
     var path: string;
     export default path;

apps/client/src/widgets/attribute_widgets/attribute_detail.ts

@@ -142,6 +142,7 @@ const TPL = /*html*/`
                   <option value="datetime">${t("attribute_detail.date_time")}</option>
                   <option value="time">${t("attribute_detail.time")}</option>
                   <option value="url">${t("attribute_detail.url")}</option>
+                  <option value="color">${t("attribute_detail.color_type")}</option>
                 </select>
             </td>
         </tr>

apps/client/src/widgets/buttons/note_actions.ts

@@ -90,6 +90,10 @@ const TPL = /*html*/`
             <span class="bx bx-code"></span> ${t("note_actions.note_source")}<kbd data-command="showNoteSource"></kbd>
         </li>
 
+        <li data-trigger-command="showNoteOCRText" class="dropdown-item show-ocr-text-button">
+            <span class="bx bx-text"></span> ${t("note_actions.view_ocr_text")}<kbd data-command="showNoteOCRText"></kbd>
+        </li>
+
 
         <div class="dropdown-divider"></div>
 
@@ -117,6 +121,7 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
     private $printActiveNoteButton!: JQuery<HTMLElement>;
     private $exportAsPdfButton!: JQuery<HTMLElement>;
     private $showSourceButton!: JQuery<HTMLElement>;
+    private $showOCRTextButton!: JQuery<HTMLElement>;
     private $showAttachmentsButton!: JQuery<HTMLElement>;
     private $renderNoteButton!: JQuery<HTMLElement>;
     private $saveRevisionButton!: JQuery<HTMLElement>;
@@ -143,6 +148,7 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
         this.$printActiveNoteButton = this.$widget.find(".print-active-note-button");
         this.$exportAsPdfButton = this.$widget.find(".export-as-pdf-button");
         this.$showSourceButton = this.$widget.find(".show-source-button");
+        this.$showOCRTextButton = this.$widget.find(".show-ocr-text-button");
         this.$showAttachmentsButton = this.$widget.find(".show-attachments-button");
         this.$renderNoteButton = this.$widget.find(".render-note-button");
         this.$saveRevisionButton = this.$widget.find(".save-revision-button");
@@ -190,6 +196,9 @@ export default class NoteActionsWidget extends NoteContextAwareWidget {
 
         this.toggleDisabled(this.$showAttachmentsButton, !isInOptions);
         this.toggleDisabled(this.$showSourceButton, ["text", "code", "relationMap", "mermaid", "canvas", "mindMap"].includes(note.type));
+        
+        // Show OCR text button for notes that could have OCR data (images and files)
+        this.toggleDisabled(this.$showOCRTextButton, ["image", "file"].includes(note.type));
 
         const canPrint = ["text", "code"].includes(note.type);
         this.toggleDisabled(this.$printActiveNoteButton, canPrint);

apps/client/src/widgets/dialogs/jump_to_note.ts

@@ -6,6 +6,7 @@ import BasicWidget from "../basic_widget.js";
 import shortcutService from "../../services/shortcuts.js";
 import { Modal } from "bootstrap";
 import { openDialog } from "../../services/dialog.js";
+import commandRegistry from "../../services/command_registry.js";
 
 const TPL = /*html*/`<div class="jump-to-note-dialog modal mx-auto" tabindex="-1" role="dialog">
     <div class="modal-dialog modal-lg" role="document">
@@ -34,7 +35,8 @@ export default class JumpToNoteDialog extends BasicWidget {
     private modal!: bootstrap.Modal;
     private $autoComplete!: JQuery<HTMLElement>;
     private $results!: JQuery<HTMLElement>;
-    private $showInFullTextButton!: JQuery<HTMLElement>;
+    private $modalFooter!: JQuery<HTMLElement>;
+    private isCommandMode: boolean = false;
 
     constructor() {
         super();
@@ -48,13 +50,44 @@ export default class JumpToNoteDialog extends BasicWidget {
 
         this.$autoComplete = this.$widget.find(".jump-to-note-autocomplete");
         this.$results = this.$widget.find(".jump-to-note-results");
-        this.$showInFullTextButton = this.$widget.find(".show-in-full-text-button");
-        this.$showInFullTextButton.on("click", (e) => this.showInFullText(e));
+        this.$modalFooter = this.$widget.find(".modal-footer");
+        this.$modalFooter.find(".show-in-full-text-button").on("click", (e) => this.showInFullText(e));
 
         shortcutService.bindElShortcut(this.$widget, "ctrl+return", (e) => this.showInFullText(e));
+
+        // Monitor input changes to detect command mode switches
+        this.$autoComplete.on("input", () => {
+            this.updateCommandModeState();
+        });
+    }
+
+    private updateCommandModeState() {
+        const currentValue = String(this.$autoComplete.val() || "");
+        const newCommandMode = currentValue.startsWith(">");
+
+        if (newCommandMode !== this.isCommandMode) {
+            this.isCommandMode = newCommandMode;
+            this.updateButtonVisibility();
+        }
+    }
+
+    private updateButtonVisibility() {
+        if (this.isCommandMode) {
+            this.$modalFooter.hide();
+        } else {
+            this.$modalFooter.show();
+        }
     }
 
     async jumpToNoteEvent() {
+        await this.openDialog();
+    }
+
+    async commandPaletteEvent() {
+        await this.openDialog(true);
+    }
+
+    private async openDialog(commandMode = false) {
         const dialogPromise = openDialog(this.$widget);
         if (utils.isMobile()) {
             dialogPromise.then(($dialog) => {
@@ -81,42 +114,76 @@ export default class JumpToNoteDialog extends BasicWidget {
         }
 
         // first open dialog, then refresh since refresh is doing focus which should be visible
-        this.refresh();
+        this.refresh(commandMode);
 
         this.lastOpenedTs = Date.now();
     }
 
-    async refresh() {
+    async refresh(commandMode = false) {
         noteAutocompleteService
             .initNoteAutocomplete(this.$autoComplete, {
                 allowCreatingNotes: true,
                 hideGoToSelectedNoteButton: true,
                 allowJumpToSearchNotes: true,
-                container: this.$results[0]
+                container: this.$results[0],
+                isCommandPalette: true
             })
             // clear any event listener added in previous invocation of this function
             .off("autocomplete:noteselected")
+            .off("autocomplete:commandselected")
             .on("autocomplete:noteselected", function (event, suggestion, dataset) {
                 if (!suggestion.notePath) {
                     return false;
                 }
 
                 appContext.tabManager.getActiveContext()?.setNote(suggestion.notePath);
+            })
+            .on("autocomplete:commandselected", async (event, suggestion, dataset) => {
+                if (!suggestion.commandId) {
+                    return false;
+                }
+
+                this.modal.hide();
+                await commandRegistry.executeCommand(suggestion.commandId);
             });
 
-        // if you open the Jump To dialog soon after using it previously, it can often mean that you
-        // actually want to search for the same thing (e.g., you opened the wrong note at first try)
-        // so we'll keep the content.
-        // if it's outside of this time limit, then we assume it's a completely new search and show recent notes instead.
-        if (Date.now() - this.lastOpenedTs > KEEP_LAST_SEARCH_FOR_X_SECONDS * 1000) {
-            noteAutocompleteService.showRecentNotes(this.$autoComplete);
+        if (commandMode) {
+            // Start in command mode - manually trigger command search
+            this.$autoComplete.autocomplete("val", ">");
+            this.isCommandMode = true;
+            this.updateButtonVisibility();
+
+            // Manually populate with all commands immediately
+            noteAutocompleteService.showAllCommands(this.$autoComplete);
+
+            this.$autoComplete.trigger("focus");
         } else {
-            this.$autoComplete
-                // hack, the actual search value is stored in <pre> element next to the search input
-                // this is important because the search input value is replaced with the suggestion note's title
-                .autocomplete("val", this.$autoComplete.next().text())
-                .trigger("focus")
-                .trigger("select");
+            // if you open the Jump To dialog soon after using it previously, it can often mean that you
+            // actually want to search for the same thing (e.g., you opened the wrong note at first try)
+            // so we'll keep the content.
+            // if it's outside of this time limit, then we assume it's a completely new search and show recent notes instead.
+            if (Date.now() - this.lastOpenedTs > KEEP_LAST_SEARCH_FOR_X_SECONDS * 1000) {
+                this.isCommandMode = false;
+                this.updateButtonVisibility();
+                noteAutocompleteService.showRecentNotes(this.$autoComplete);
+            } else {
+                this.$autoComplete
+                    // hack, the actual search value is stored in <pre> element next to the search input
+                    // this is important because the search input value is replaced with the suggestion note's title
+                    .autocomplete("val", this.$autoComplete.next().text())
+                    .trigger("focus")
+                    .trigger("select");
+
+                // Update command mode state based on the restored value
+                this.updateCommandModeState();
+
+                // If we restored a command mode value, manually trigger command display
+                if (this.isCommandMode) {
+                    // Clear the value first, then set it to ">" to trigger a proper change
+                    this.$autoComplete.autocomplete("val", "");
+                    noteAutocompleteService.showAllCommands(this.$autoComplete);
+                }
+            }
         }
     }
 
@@ -125,6 +192,11 @@ export default class JumpToNoteDialog extends BasicWidget {
         e.preventDefault();
         e.stopPropagation();
 
+        // Don't perform full text search in command mode
+        if (this.isCommandMode) {
+            return;
+        }
+
         const searchString = String(this.$autoComplete.val());
 
         this.triggerCommand("searchNotes", { searchString });

apps/client/src/widgets/dialogs/popup_editor.ts

@@ -106,7 +106,11 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
             focus: false
         });
 
-        await this.noteContext.setNote(noteIdOrPath);
+        await this.noteContext.setNote(noteIdOrPath, {
+            viewScope: {
+                readOnlyTemporarilyDisabled: true
+            }
+        });
 
         const activeEl = document.activeElement;
         if (activeEl && "blur" in activeEl) {

apps/client/src/widgets/dialogs/sort_child_notes.ts

@@ -88,7 +88,9 @@ export default class SortChildNotesDialog extends BasicWidget {
         this.$widget = $(TPL);
         this.$form = this.$widget.find(".sort-child-notes-form");
 
-        this.$form.on("submit", async () => {
+        this.$form.on("submit", async (e) => {
+            e.preventDefault();
+
             const sortBy = this.$form.find("input[name='sort-by']:checked").val();
             const sortDirection = this.$form.find("input[name='sort-direction']:checked").val();
             const foldersFirst = this.$form.find("input[name='sort-folders-first']").is(":checked");

apps/client/src/widgets/floating_buttons/help_button.ts

@@ -35,7 +35,8 @@ export const byBookType: Record<ViewTypeOptions, string | null> = {
     grid: "8QqnMzx393bx",
     calendar: "xWbu3jpNWapp",
     table: "2FvYrpmOXm29",
-    geoMap: "81SGnPGMk7Xc"
+    geoMap: "81SGnPGMk7Xc",
+    board: "CtBQqbwXDx1w"
 };
 
 export default class ContextualHelpButton extends NoteContextAwareWidget {

apps/client/src/widgets/note_detail.ts

@@ -28,6 +28,7 @@ import ContentWidgetTypeWidget from "./type_widgets/content_widget.js";
 import AttachmentListTypeWidget from "./type_widgets/attachment_list.js";
 import AttachmentDetailTypeWidget from "./type_widgets/attachment_detail.js";
 import MindMapWidget from "./type_widgets/mind_map.js";
+import ReadOnlyOCRTextWidget from "./type_widgets/read_only_ocr_text.js";
 import utils from "../services/utils.js";
 import type { NoteType } from "../entities/fnote.js";
 import type TypeWidget from "./type_widgets/type_widget.js";
@@ -55,6 +56,7 @@ const typeWidgetClasses = {
     readOnlyText: ReadOnlyTextTypeWidget,
     editableCode: EditableCodeTypeWidget,
     readOnlyCode: ReadOnlyCodeTypeWidget,
+    readOnlyOCRText: ReadOnlyOCRTextWidget,
     file: FileTypeWidget,
     image: ImageTypeWidget,
     search: NoneTypeWidget,
@@ -85,6 +87,7 @@ type ExtendedNoteType =
     | "empty"
     | "readOnlyCode"
     | "readOnlyText"
+    | "readOnlyOCRText"
     | "editableText"
     | "editableCode"
     | "attachmentDetail"
@@ -223,6 +226,8 @@ export default class NoteDetailWidget extends NoteContextAwareWidget {
 
         if (viewScope?.viewMode === "source") {
             resultingType = "readOnlyCode";
+        } else if (viewScope?.viewMode === "ocr") {
+            resultingType = "readOnlyOCRText";
         } else if (viewScope && viewScope.viewMode === "attachments") {
             resultingType = viewScope.attachmentId ? "attachmentDetail" : "attachmentList";
         } else if (type === "text" && (await this.noteContext?.isReadOnly())) {

apps/client/src/widgets/ribbon_widgets/book_properties.ts

@@ -5,6 +5,16 @@ import type FNote from "../../entities/fnote.js";
 import type { EventData } from "../../components/app_context.js";
 import { bookPropertiesConfig, BookProperty } from "./book_properties_config.js";
 import attributes from "../../services/attributes.js";
+import type { ViewTypeOptions } from "../../services/note_list_renderer.js";
+
+const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
+    grid: t("book_properties.grid"),
+    list: t("book_properties.list"),
+    calendar: t("book_properties.calendar"),
+    table: t("book_properties.table"),
+    geoMap: t("book_properties.geo-map"),
+    board: t("book_properties.board")
+};
 
 const TPL = /*html*/`
 <div class="book-properties-widget">
@@ -35,17 +45,25 @@ const TPL = /*html*/`
         .book-properties-container input[type="checkbox"] {
             margin-right: 5px;
         }
+
+        .book-properties-container label {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            text-overflow: clip;
+            white-space: nowrap;
+        }
     </style>
 
     <div style="display: flex; align-items: baseline">
         <span style="white-space: nowrap">${t("book_properties.view_type")}:&nbsp; &nbsp;</span>
 
         <select class="view-type-select form-select form-select-sm">
-            <option value="grid">${t("book_properties.grid")}</option>
-            <option value="list">${t("book_properties.list")}</option>
-            <option value="calendar">${t("book_properties.calendar")}</option>
-            <option value="table">${t("book_properties.table")}</option>
-            <option value="geoMap">${t("book_properties.geo-map")}</option>
+            ${Object.entries(VIEW_TYPE_MAPPINGS)
+                .filter(([type]) => type !== "raster")
+                .map(([type, label]) => `
+                <option value="${type}">${label}</option>
+            `).join("")}
         </select>
     </div>
 
@@ -115,7 +133,7 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
             return;
         }
 
-        if (!["list", "grid", "calendar", "table", "geoMap"].includes(type)) {
+        if (!VIEW_TYPE_MAPPINGS.hasOwnProperty(type)) {
             throw new Error(t("book_properties.invalid_view_type", { type }));
         }
 
@@ -195,6 +213,35 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
                     .append("&nbsp;".repeat(2))
                     .append($numberInput));
                 break;
+            case "combobox":
+                const $select = $("<select>", {
+                    class: "form-select form-select-sm"
+                });
+                const actualValue = note.getLabelValue(property.bindToLabel) ?? property.defaultValue ?? "";
+                for (const option of property.options) {
+                    if ("items" in option) {
+                        const $optGroup = $("<optgroup>", { label: option.name });
+                        for (const item of option.items) {
+                            buildComboBoxItem(item, actualValue).appendTo($optGroup);
+                        }
+                        $optGroup.appendTo($select);
+                    } else {
+                        buildComboBoxItem(option, actualValue).appendTo($select);
+                    }
+                }
+                $select.on("change", () => {
+                    const value = $select.val();
+                    if (value === null || value === "") {
+                        attributes.removeOwnedLabelByName(note, property.bindToLabel);
+                    } else {
+                        attributes.setLabel(note.noteId, property.bindToLabel, String(value));
+                    }
+                });
+                $container.append($("<label>")
+                    .text(property.label)
+                    .append("&nbsp;".repeat(2))
+                    .append($select));
+                break;
         }
 
         return $container;
@@ -202,3 +249,14 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
 
 
 }
+
+function buildComboBoxItem({ value, label }: { value: string, label: string }, actualValue: string) {
+    const $option = $("<option>", {
+        value,
+        text: label
+    });
+    if (actualValue === value) {
+        $option.prop("selected", true);
+    }
+    return $option;
+}

apps/client/src/widgets/ribbon_widgets/book_properties_config.ts

@@ -3,6 +3,7 @@ import FNote from "../../entities/fnote";
 import attributes from "../../services/attributes";
 import { ViewTypeOptions } from "../../services/note_list_renderer"
 import NoteContextAwareWidget from "../note_context_aware_widget";
+import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS, type MapLayer } from "../view_widgets/geo_view/map_layer";
 
 interface BookConfig {
     properties: BookProperty[];
@@ -30,7 +31,28 @@ interface NumberProperty {
     min?: number;
 }
 
-export type BookProperty = CheckBoxProperty | ButtonProperty | NumberProperty;
+interface ComboBoxItem {
+    value: string;
+    label: string;
+}
+
+interface ComboBoxGroup {
+    name: string;
+    items: ComboBoxItem[];
+}
+
+interface ComboBoxProperty {
+    type: "combobox",
+    label: string;
+    bindToLabel: string;
+    /**
+     * The default value is used when the label is not set.
+     */
+    defaultValue?: string;
+    options: (ComboBoxItem | ComboBoxGroup)[];
+}
+
+export type BookProperty = CheckBoxProperty | ButtonProperty | NumberProperty | ComboBoxProperty;
 
 interface BookContext {
     note: FNote;
@@ -90,16 +112,58 @@ export const bookPropertiesConfig: Record<ViewTypeOptions, BookConfig> = {
         ]
     },
     geoMap: {
-        properties: []
+        properties: [
+            {
+                label: t("book_properties_config.map-style"),
+                type: "combobox",
+                bindToLabel: "map:style",
+                defaultValue: DEFAULT_MAP_LAYER_NAME,
+                options: [
+                    {
+                        name: t("book_properties_config.raster"),
+                        items: Object.entries(MAP_LAYERS)
+                            .filter(([_, layer]) => layer.type === "raster")
+                            .map(buildMapLayer)
+                    },
+                    {
+                        name: t("book_properties_config.vector_light"),
+                        items: Object.entries(MAP_LAYERS)
+                            .filter(([_, layer]) => layer.type === "vector" && !layer.isDarkTheme)
+                            .map(buildMapLayer)
+                    },
+                    {
+                        name: t("book_properties_config.vector_dark"),
+                        items: Object.entries(MAP_LAYERS)
+                            .filter(([_, layer]) => layer.type === "vector" && layer.isDarkTheme)
+                            .map(buildMapLayer)
+                    }
+                ]
+            },
+            {
+                label: t("book_properties_config.show-scale"),
+                type: "checkbox",
+                bindToLabel: "map:scale"
+            }
+        ]
     },
     table: {
         properties: [
             {
-                label: "Max nesting depth:",
+                label: t("book_properties_config.max-nesting-depth"),
                 type: "number",
                 bindToLabel: "maxNestingDepth",
                 width: 65
             }
         ]
+    },
+    board: {
+        properties: []
     }
 };
+
+function buildMapLayer([ id, layer ]: [ string, MapLayer ]): ComboBoxItem {
+    return {
+        value: id,
+        label: layer.name
+    };
+}

apps/client/src/widgets/ribbon_widgets/promoted_attributes.ts

@@ -53,12 +53,56 @@ const TPL = /*html*/`
         word-break:keep-all;
         white-space: nowrap;
     }
+
     .promoted-attribute-cell input[type="checkbox"] {
         width: 22px !important;
         flex-grow: 0;
         width: unset;
     }
 
+    /* Restore default apperance */
+    .promoted-attribute-cell input[type="number"],
+    .promoted-attribute-cell input[type="checkbox"] {
+        appearance: auto;
+    }
+
+    .promoted-attribute-cell input[type="color"] {
+        width: 24px;
+        height: 24px;
+        margin-top: 2px;
+        appearance: none;
+        padding: 0;
+        border: 0;
+        outline: none;
+        border-radius: 25% !important;
+    }
+
+    .promoted-attribute-cell input[type="color"]::-webkit-color-swatch-wrapper {
+        padding: 0;
+    }
+
+    .promoted-attribute-cell input[type="color"]::-webkit-color-swatch {
+        border: none;
+        border-radius: 25%;
+    }
+
+    .promoted-attribute-label-color input[type="hidden"][value=""] + input[type="color"] {
+        position: relative;
+        opacity: 0.5;
+    }
+
+    .promoted-attribute-label-color input[type="hidden"][value=""] + input[type="color"]:after {
+        content: "";
+        position: absolute;
+        top: 10px;
+        left: 0px;
+        right: 0;
+        height: 2px;
+        background: rgba(0, 0, 0, 0.5);
+        transform: rotate(45deg);
+        pointer-events: none;
+    }
+
     </style>
 
     <div class="promoted-attributes-container"></div>
@@ -258,6 +302,35 @@ export default class PromotedAttributesWidget extends NoteContextAwareWidget {
                     .on("click", () => window.open($input.val() as string, "_blank"));
 
                 $input.after($openButton);
+            } else if (definition.labelType === "color") {
+                const defaultColor = "#ffffff";
+                $input.prop("type", "hidden");
+                $input.val(valueAttr.value ?? "");
+
+                // We insert a separate input since the color input does not support empty value.
+                // This is a workaround to allow clearing the color input.
+                const $colorInput = $("<input>")
+                    .prop("type", "color")
+                    .prop("value", valueAttr.value || defaultColor)
+                    .addClass("form-control promoted-attribute-input")
+                    .on("change", e => setValue((e.target as HTMLInputElement).value, e));
+                $input.after($colorInput);
+
+                const $clearButton = $("<span>")
+                    .addClass("input-group-text bx bxs-tag-x")
+                    .prop("title", t("promoted_attributes.remove_color"))
+                    .on("click", e => setValue("", e));
+
+                const setValue = (color: string, event: JQuery.TriggeredEvent<HTMLElement, undefined, HTMLElement, HTMLElement>) => {
+                    $input.val(color);
+                    if (!color) {
+                        $colorInput.val(defaultColor);
+                    }
+                    event.target = $input[0]; // Set the event target to the main input
+                    this.promotedAttributeChanged(event);
+                };
+
+                $colorInput.after($clearButton);
             } else {
                 ws.logError(t("promoted_attributes.unknown_label_type", { type: definition.labelType }));
             }

apps/client/src/widgets/tab_row.ts

@@ -8,6 +8,7 @@ import appContext, { type CommandNames, type CommandListenerData, type EventData
 import froca from "../services/froca.js";
 import attributeService from "../services/attributes.js";
 import type NoteContext from "../components/note_context.js";
+import { setupHorizontalScrollViaWheel } from "./widget_utils.js";
 
 const isDesktop = utils.isDesktop();
 
@@ -386,15 +387,7 @@ export default class TabRowWidget extends BasicWidget {
     };
 
     setupScrollEvents() {
-        this.$tabScrollingContainer.on('wheel', (event) => {
-            const wheelEvent = event.originalEvent as WheelEvent;
-            if (utils.isCtrlKey(event) || event.altKey || event.shiftKey) {
-                return;
-            }
-            event.preventDefault();
-            event.stopImmediatePropagation();
-            event.currentTarget.scrollLeft += wheelEvent.deltaY + wheelEvent.deltaX;
-        });
+        setupHorizontalScrollViaWheel(this.$tabScrollingContainer);
 
         this.$scrollButtonLeft[0].addEventListener('click', () => this.scrollTabContainer(-210));
         this.$scrollButtonRight[0].addEventListener('click', () => this.scrollTabContainer(210));

apps/client/src/widgets/type_widgets/abstract_split_type_widget.ts

@@ -130,7 +130,8 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
 
     constructor() {
         super();
-        this.editorTypeWidget = new EditableCodeTypeWidget();
+
+        this.editorTypeWidget = new EditableCodeTypeWidget(true);
         this.editorTypeWidget.updateBackgroundColor = () => {};
         this.editorTypeWidget.isEnabled = () => true;
 
@@ -146,6 +147,8 @@ export default abstract class AbstractSplitTypeWidget extends TypeWidget {
     doRender(): void {
         this.$widget = $(TPL);
 
+        this.spacedUpdate.setUpdateInterval(750);
+
         // Preview pane
         this.$previewCol = this.$widget.find(".note-detail-split-preview-col");
         this.$preview = this.$widget.find(".note-detail-split-preview");

apps/client/src/widgets/type_widgets/book.ts

@@ -45,12 +45,11 @@ export default class BookTypeWidget extends TypeWidget {
         }
 
         switch (this.note?.getAttributeValue("label", "viewType")) {
-            case "calendar":
-            case "table":
-            case "geoMap":
-                return false;
-            default:
+            case "list":
+            case "grid":
                 return true;
+            default:
+                return false;
         }
     }
 

apps/client/src/widgets/type_widgets/canvas.ts

@@ -166,7 +166,6 @@ export default class ExcalidrawTypeWidget extends TypeWidget {
             onChange: () => this.onChangeHandler(),
             viewModeEnabled: options.is("databaseReadonly"),
             zenModeEnabled: false,
-            gridModeEnabled: false,
             isCollaborating: false,
             detectScroll: false,
             handleKeyboardGlobally: false,

apps/client/src/widgets/type_widgets/canvas_el.ts

@@ -153,7 +153,8 @@ export default class Canvas {
             appState: {
                 scrollX: appState.scrollX,
                 scrollY: appState.scrollY,
-                zoom: appState.zoom
+                zoom: appState.zoom,
+                gridModeEnabled: appState.gridModeEnabled
             }
         };
 

apps/client/src/widgets/type_widgets/editable_code.ts

@@ -28,6 +28,16 @@ const TPL = /*html*/`
 
 export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
 
+    private debounceUpdate: boolean;
+
+    /**
+     * @param debounceUpdate if true, the update will be debounced to prevent excessive updates. Especially useful if the editor is linked to a live preview.
+     */
+    constructor(debounceUpdate: boolean = false) {
+        super();
+        this.debounceUpdate = debounceUpdate;
+    }
+
     static getType() {
         return "editableCode";
     }
@@ -46,7 +56,13 @@ export default class EditableCodeTypeWidget extends AbstractCodeTypeWidget {
         return {
             placeholder: t("editable_code.placeholder"),
             vimKeybindings: options.is("vimKeymapEnabled"),
-            onContentChanged: () => this.spacedUpdate.scheduleUpdate(),
+            onContentChanged: () => {
+                if (this.debounceUpdate) {
+                    this.spacedUpdate.resetUpdateTimer();
+                }
+
+                this.spacedUpdate.scheduleUpdate();
+            },
             tabIndex: 300
         }
     }

apps/client/src/widgets/type_widgets/options/images/images.ts

@@ -1,6 +1,8 @@
 import OptionsWidget from "../options_widget.js";
 import { t } from "../../../../services/i18n.js";
 import type { OptionMap } from "@triliumnext/commons";
+import server from "../../../../services/server.js";
+import toastService from "../../../../services/toast.js";
 
 const TPL = /*html*/`
 <div class="options-section">
@@ -9,6 +11,43 @@ const TPL = /*html*/`
             opacity: 0.5;
             pointer-events: none;
         }
+        .batch-ocr-progress {
+            margin-top: 10px;
+        }
+        .batch-ocr-button {
+            margin-top: 10px;
+        }
+        .ocr-language-checkboxes {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+            gap: 8px;
+            margin-bottom: 10px;
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid #dee2e6;
+            border-radius: 4px;
+            padding: 10px;
+        }
+        .ocr-language-display {
+            background-color: #f8f9fa;
+            min-height: 38px;
+            padding: 8px 12px;
+            border: 1px solid #dee2e6;
+            border-radius: 4px;
+            font-family: monospace;
+            font-size: 0.9em;
+        }
+        .ocr-language-display .placeholder-text {
+            color: #6c757d;
+            font-style: italic;
+        }
+        .ocr-language-display .language-code {
+            background-color: #e9ecef;
+            padding: 2px 6px;
+            border-radius: 3px;
+            margin-right: 4px;
+            font-weight: 500;
+        }
     </style>
 
     <h4>${t("images.images_section_title")}</h4>
@@ -44,6 +83,123 @@ const TPL = /*html*/`
             </label>
         </div>
     </div>
+
+    <hr />
+
+    <h5>${t("images.ocr_section_title")}</h5>
+
+    <label class="tn-checkbox">
+        <input class="ocr-enabled" type="checkbox" name="ocr-enabled">
+        ${t("images.enable_ocr")}
+    </label>
+
+    <p class="form-text">${t("images.ocr_description")}</p>
+
+    <div class="ocr-settings-wrapper">
+        <label class="tn-checkbox">
+            <input class="ocr-auto-process" type="checkbox" name="ocr-auto-process">
+            ${t("images.ocr_auto_process")}
+        </label>
+
+        <div class="form-group">
+            <label>${t("images.ocr_language")}</label>
+            <p class="form-text">${t("images.ocr_multi_language_description")}</p>
+            <div class="ocr-language-checkboxes">
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="eng" data-language="eng">
+                    English
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="spa" data-language="spa">
+                    Spanish
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="fra" data-language="fra">
+                    French
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="deu" data-language="deu">
+                    German
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="ita" data-language="ita">
+                    Italian
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="por" data-language="por">
+                    Portuguese
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="rus" data-language="rus">
+                    Russian
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="chi_sim" data-language="chi_sim">
+                    Chinese (Simplified)
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="chi_tra" data-language="chi_tra">
+                    Chinese (Traditional)
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="jpn" data-language="jpn">
+                    Japanese
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="kor" data-language="kor">
+                    Korean
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="ara" data-language="ara">
+                    Arabic
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="hin" data-language="hin">
+                    Hindi
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="tha" data-language="tha">
+                    Thai
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="vie" data-language="vie">
+                    Vietnamese
+                </label>
+                <label class="tn-checkbox">
+                    <input type="checkbox" value="ron" data-language="ron">
+                    Romanian
+                </label>
+            </div>
+            <div class="ocr-language-display form-control" readonly>
+                <span class="placeholder-text">${t("images.ocr_no_languages_selected")}</span>
+            </div>
+        </div>
+
+        <div class="form-group">
+            <label>${t("images.ocr_min_confidence")}</label>
+            <label class="input-group tn-number-unit-pair">
+                <input class="ocr-min-confidence form-control options-number-input" type="number" min="0" max="1" step="0.1">
+                <span class="input-group-text">${t("images.ocr_confidence_unit")}</span>
+            </label>
+            <div class="form-text">${t("images.ocr_confidence_description")}</div>
+        </div>
+
+        <div class="batch-ocr-section">
+            <h6>${t("images.batch_ocr_title")}</h6>
+            <p class="form-text">${t("images.batch_ocr_description")}</p>
+
+            <button class="btn btn-primary batch-ocr-button">
+                ${t("images.batch_ocr_start")}
+            </button>
+
+            <div class="batch-ocr-progress" style="display: none;">
+                <div class="progress">
+                    <div class="progress-bar" role="progressbar" style="width: 0%"></div>
+                </div>
+                <div class="batch-ocr-status"></div>
+            </div>
+        </div>
+    </div>
 </div>
 `;
 
@@ -55,9 +211,22 @@ export default class ImageOptions extends OptionsWidget {
     private $enableImageCompression!: JQuery<HTMLElement>;
     private $imageCompressionWrapper!: JQuery<HTMLElement>;
 
+    // OCR elements
+    private $ocrEnabled!: JQuery<HTMLElement>;
+    private $ocrAutoProcess!: JQuery<HTMLElement>;
+    private $ocrLanguageCheckboxes!: JQuery<HTMLElement>;
+    private $ocrLanguageDisplay!: JQuery<HTMLElement>;
+    private $ocrMinConfidence!: JQuery<HTMLElement>;
+    private $ocrSettingsWrapper!: JQuery<HTMLElement>;
+    private $batchOcrButton!: JQuery<HTMLElement>;
+    private $batchOcrProgress!: JQuery<HTMLElement>;
+    private $batchOcrProgressBar!: JQuery<HTMLElement>;
+    private $batchOcrStatus!: JQuery<HTMLElement>;
+
     doRender() {
         this.$widget = $(TPL);
 
+        // Image settings
         this.$imageMaxWidthHeight = this.$widget.find(".image-max-width-height");
         this.$imageJpegQuality = this.$widget.find(".image-jpeg-quality");
 
@@ -76,16 +245,49 @@ export default class ImageOptions extends OptionsWidget {
             this.updateCheckboxOption("compressImages", this.$enableImageCompression);
             this.setImageCompression();
         });
+
+        // OCR settings
+        this.$ocrEnabled = this.$widget.find(".ocr-enabled");
+        this.$ocrAutoProcess = this.$widget.find(".ocr-auto-process");
+        this.$ocrLanguageCheckboxes = this.$widget.find(".ocr-language-checkboxes");
+        this.$ocrLanguageDisplay = this.$widget.find(".ocr-language-display");
+        this.$ocrMinConfidence = this.$widget.find(".ocr-min-confidence");
+        this.$ocrSettingsWrapper = this.$widget.find(".ocr-settings-wrapper");
+        this.$batchOcrButton = this.$widget.find(".batch-ocr-button");
+        this.$batchOcrProgress = this.$widget.find(".batch-ocr-progress");
+        this.$batchOcrProgressBar = this.$widget.find(".progress-bar");
+        this.$batchOcrStatus = this.$widget.find(".batch-ocr-status");
+
+        this.$ocrEnabled.on("change", () => {
+            this.updateCheckboxOption("ocrEnabled", this.$ocrEnabled);
+            this.setOcrVisibility();
+        });
+
+        this.$ocrAutoProcess.on("change", () => this.updateCheckboxOption("ocrAutoProcessImages", this.$ocrAutoProcess));
+
+        this.$ocrLanguageCheckboxes.on("change", "input[type='checkbox']", () => this.updateOcrLanguages());
+
+        this.$ocrMinConfidence.on("change", () => this.updateOption("ocrMinConfidence", String(this.$ocrMinConfidence.val()).trim() || "0.6"));
+
+        this.$batchOcrButton.on("click", () => this.startBatchOcr());
     }
 
     optionsLoaded(options: OptionMap) {
+        // Image settings
         this.$imageMaxWidthHeight.val(options.imageMaxWidthHeight);
         this.$imageJpegQuality.val(options.imageJpegQuality);
 
         this.setCheckboxState(this.$downloadImagesAutomatically, options.downloadImagesAutomatically);
         this.setCheckboxState(this.$enableImageCompression, options.compressImages);
 
+        // OCR settings
+        this.setCheckboxState(this.$ocrEnabled, options.ocrEnabled);
+        this.setCheckboxState(this.$ocrAutoProcess, options.ocrAutoProcessImages);
+        this.setOcrLanguages(options.ocrLanguage || "eng");
+        this.$ocrMinConfidence.val(options.ocrMinConfidence || "0.6");
+
         this.setImageCompression();
+        this.setOcrVisibility();
     }
 
     setImageCompression() {
@@ -95,4 +297,134 @@ export default class ImageOptions extends OptionsWidget {
             this.$imageCompressionWrapper.addClass("disabled-field");
         }
     }
+
+    setOcrVisibility() {
+        if (this.$ocrEnabled.prop("checked")) {
+            this.$ocrSettingsWrapper.removeClass("disabled-field");
+        } else {
+            this.$ocrSettingsWrapper.addClass("disabled-field");
+        }
+    }
+
+    setOcrLanguages(languageString: string) {
+        // Clear all checkboxes first
+        this.$ocrLanguageCheckboxes.find('input[type="checkbox"]').prop('checked', false);
+        
+        if (languageString) {
+            // Split by '+' to handle multi-language format like "ron+eng"
+            const languages = languageString.split('+');
+            
+            languages.forEach(lang => {
+                const checkbox = this.$ocrLanguageCheckboxes.find(`input[data-language="${lang.trim()}"]`);
+                if (checkbox.length > 0) {
+                    checkbox.prop('checked', true);
+                }
+            });
+        }
+        
+        this.updateOcrLanguageDisplay();
+    }
+
+    updateOcrLanguages() {
+        const selectedLanguages: string[] = [];
+        
+        this.$ocrLanguageCheckboxes.find('input[type="checkbox"]:checked').each(function() {
+            selectedLanguages.push($(this).val() as string);
+        });
+        
+        // Join with '+' for Tesseract multi-language format
+        const languageString = selectedLanguages.join('+');
+        
+        this.updateOption("ocrLanguage", languageString || "eng");
+        this.updateOcrLanguageDisplay();
+    }
+
+    updateOcrLanguageDisplay() {
+        const selectedLanguages: string[] = [];
+        
+        this.$ocrLanguageCheckboxes.find('input[type="checkbox"]:checked').each(function() {
+            selectedLanguages.push($(this).val() as string);
+        });
+        
+        const displayContent = this.$ocrLanguageDisplay.find('.placeholder-text, .language-code');
+        displayContent.remove();
+        
+        if (selectedLanguages.length === 0) {
+            this.$ocrLanguageDisplay.html(`<span class="placeholder-text">${t("images.ocr_no_languages_selected")}</span>`);
+        } else {
+            const languageTags = selectedLanguages.map(lang => 
+                `<span class="language-code">${lang}</span>`
+            ).join('');
+            this.$ocrLanguageDisplay.html(languageTags);
+        }
+    }
+
+    async startBatchOcr() {
+        this.$batchOcrButton.prop("disabled", true);
+        this.$batchOcrProgress.show();
+        this.$batchOcrProgressBar.css("width", "0%");
+        this.$batchOcrStatus.text(t("images.batch_ocr_starting"));
+
+        try {
+            const result = await server.post("ocr/batch-process") as {
+                success: boolean;
+                message?: string;
+            };
+
+            if (result.success) {
+                this.pollBatchOcrProgress();
+            } else {
+                throw new Error(result.message || "Failed to start batch OCR");
+            }
+        } catch (error: any) {
+            console.error("Error starting batch OCR:", error);
+            this.$batchOcrStatus.text(t("images.batch_ocr_error", { error: error.message }));
+            toastService.showError(`Failed to start batch OCR: ${error.message}`);
+            this.$batchOcrButton.prop("disabled", false);
+        }
+    }
+
+    async pollBatchOcrProgress() {
+        try {
+            const result = await server.get("ocr/batch-progress") as {
+                inProgress: boolean;
+                total: number;
+                processed: number;
+            };
+
+            if (result.inProgress) {
+                const progress = (result.processed / result.total) * 100;
+                this.$batchOcrProgressBar.css("width", `${progress}%`);
+                this.$batchOcrStatus.text(t("images.batch_ocr_progress", {
+                    processed: result.processed,
+                    total: result.total
+                }));
+
+                // Continue polling
+                setTimeout(() => this.pollBatchOcrProgress(), 1000);
+            } else {
+                // Batch OCR completed
+                this.$batchOcrProgressBar.css("width", "100%");
+                this.$batchOcrStatus.text(t("images.batch_ocr_completed", {
+                    processed: result.processed,
+                    total: result.total
+                }));
+                this.$batchOcrButton.prop("disabled", false);
+                toastService.showMessage(t("images.batch_ocr_completed", {
+                    processed: result.processed,
+                    total: result.total
+                }));
+
+                // Hide progress after 3 seconds
+                setTimeout(() => {
+                    this.$batchOcrProgress.hide();
+                }, 3000);
+            }
+        } catch (error: any) {
+            console.error("Error polling batch OCR progress:", error);
+            this.$batchOcrStatus.text(t("images.batch_ocr_error", { error: error.message }));
+            toastService.showError(`Failed to get batch OCR progress: ${error.message}`);
+            this.$batchOcrButton.prop("disabled", false);
+        }
+    }
 }

apps/client/src/widgets/type_widgets/options/shortcuts.ts

@@ -3,7 +3,7 @@ import utils from "../../../services/utils.js";
 import dialogService from "../../../services/dialog.js";
 import OptionsWidget from "./options_widget.js";
 import { t } from "../../../services/i18n.js";
-import type { OptionNames, KeyboardShortcut } from "@triliumnext/commons";
+import type { OptionNames, KeyboardShortcut, KeyboardShortcutWithRequiredActionName } from "@triliumnext/commons";
 
 const TPL = /*html*/`
 <div class="options-section shortcuts-options-section tn-no-card">
@@ -75,10 +75,10 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
             for (const action of actions) {
                 const $tr = $("<tr>");
 
-                if (action.separator) {
+                if ("separator" in action) {
                     $tr.append($('<td class="separator" colspan="4">').attr("style", "background-color: var(--accented-background-color); font-weight: bold;").text(action.separator));
                 } else if (action.defaultShortcuts && action.actionName) {
-                    $tr.append($("<td>").text(action.actionName))
+                    $tr.append($("<td>").text(action.friendlyName))
                         .append(
                             $("<td>").append(
                                 $(`<input type="text" class="form-control">`)
@@ -145,9 +145,9 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
                     return;
                 }
 
-                const action = globActions.find((act) => act.actionName === actionName);
+                const action = globActions.find((act) => "actionName" in act && act.actionName === actionName) as KeyboardShortcutWithRequiredActionName;
 
-                if (!action || !action.actionName) {
+                if (!action) {
                     this.$widget.find(el).hide();
                     return;
                 }
@@ -157,6 +157,7 @@ export default class KeyboardShortcutsOptions extends OptionsWidget {
                     .toggle(
                         !!(
                             action.actionName.toLowerCase().includes(filter) ||
+                            (action.friendlyName && action.friendlyName.toLowerCase().includes(filter)) ||
                             (action.defaultShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
                             (action.effectiveShortcuts ?? []).some((shortcut) => shortcut.toLowerCase().includes(filter)) ||
                             (action.description && action.description.toLowerCase().includes(filter))

apps/client/src/widgets/type_widgets/read_only_ocr_text.ts

@@ -0,0 +1,215 @@
+import type { EventData } from "../../components/app_context.js";
+import type FNote from "../../entities/fnote.js";
+import server from "../../services/server.js";
+import toastService from "../../services/toast.js";
+import { t } from "../../services/i18n.js";
+import TypeWidget from "./type_widget.js";
+
+const TPL = /*html*/`
+<div class="note-detail-ocr-text note-detail-printable">
+    <style>
+    .note-detail-ocr-text {
+        min-height: 50px;
+        position: relative;
+        padding: 10px;
+    }
+
+    .ocr-text-content {
+        white-space: pre-wrap;
+        font-family: var(--detail-text-font-family);
+        font-size: var(--detail-text-font-size);
+        line-height: 1.6;
+        border: 1px solid var(--main-border-color);
+        border-radius: 4px;
+        padding: 15px;
+        background-color: var(--accented-background-color);
+        min-height: 100px;
+    }
+
+    .ocr-text-header {
+        margin-bottom: 10px;
+        padding: 8px 12px;
+        background-color: var(--main-background-color);
+        border: 1px solid var(--main-border-color);
+        border-radius: 4px;
+        font-weight: 500;
+        color: var(--main-text-color);
+    }
+
+    .ocr-text-meta {
+        font-size: 0.9em;
+        color: var(--muted-text-color);
+        margin-top: 10px;
+        font-style: italic;
+    }
+
+    .ocr-text-empty {
+        color: var(--muted-text-color);
+        font-style: italic;
+        text-align: center;
+        padding: 30px;
+    }
+
+    .ocr-text-loading {
+        text-align: center;
+        padding: 30px;
+        color: var(--muted-text-color);
+    }
+
+    .ocr-text-error {
+        color: var(--error-color);
+        background-color: var(--error-background-color);
+        border: 1px solid var(--error-border-color);
+        padding: 10px;
+        border-radius: 4px;
+        margin-top: 10px;
+    }
+    
+    .ocr-process-button {
+        margin-top: 15px;
+    }
+    </style>
+
+    <div class="ocr-text-header">
+        <span class="bx bx-text"></span> ${t("ocr.extracted_text_title")}
+    </div>
+
+    <div class="ocr-text-content"></div>
+
+    <div class="ocr-text-actions"></div>
+
+    <div class="ocr-text-meta"></div>
+</div>`;
+
+interface OCRResponse {
+    success: boolean;
+    text: string;
+    hasOcr: boolean;
+    extractedAt: string | null;
+    error?: string;
+}
+
+export default class ReadOnlyOCRTextWidget extends TypeWidget {
+
+    private $content!: JQuery<HTMLElement>;
+    private $actions!: JQuery<HTMLElement>;
+    private $meta!: JQuery<HTMLElement>;
+    private currentNote?: FNote;
+
+    static getType() {
+        return "readOnlyOCRText";
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.contentSized();
+        this.$content = this.$widget.find(".ocr-text-content");
+        this.$actions = this.$widget.find(".ocr-text-actions");
+        this.$meta = this.$widget.find(".ocr-text-meta");
+
+        super.doRender();
+    }
+
+    async doRefresh(note: FNote) {
+        this.currentNote = note;
+        
+        // Show loading state
+        this.$content.html(`<div class="ocr-text-loading">
+            <span class="bx bx-loader-alt bx-spin"></span> ${t("ocr.loading_text")}
+        </div>`);
+        this.$actions.empty();
+        this.$meta.empty();
+
+        try {
+            const response = await server.get<OCRResponse>(`ocr/notes/${note.noteId}/text`);
+
+            if (!response.success) {
+                this.showError(response.error || t("ocr.failed_to_load"));
+                return;
+            }
+
+            if (!response.hasOcr || !response.text) {
+                this.showNoOCRAvailable();
+                return;
+            }
+
+            // Show the OCR text
+            this.$content.text(response.text);
+
+            // Show metadata
+            const extractedAt = response.extractedAt ? new Date(response.extractedAt).toLocaleString() : t("ocr.unknown_date");
+            this.$meta.html(t("ocr.extracted_on", { date: extractedAt }));
+
+        } catch (error: any) {
+            console.error("Error loading OCR text:", error);
+            this.showError(error.message || t("ocr.failed_to_load"));
+        }
+    }
+
+    private showNoOCRAvailable() {
+        const $processButton = $(`<button class="btn btn-secondary ocr-process-button" type="button">
+            <span class="bx bx-play"></span> ${t("ocr.process_now")}
+        </button>`);
+
+        $processButton.on("click", () => this.processOCR());
+
+        this.$content.html(`<div class="ocr-text-empty">
+            <span class="bx bx-info-circle"></span> ${t("ocr.no_text_available")}
+        </div>`);
+        
+        this.$actions.append($processButton);
+        this.$meta.html(t("ocr.no_text_explanation"));
+    }
+
+    private async processOCR() {
+        if (!this.currentNote) {
+            return;
+        }
+
+        const $button = this.$actions.find(".ocr-process-button");
+        
+        // Disable button and show processing state
+        $button.prop("disabled", true);
+        $button.html(`<span class="bx bx-loader-alt bx-spin"></span> ${t("ocr.processing")}`);
+
+        try {
+            const response = await server.post(`ocr/process-note/${this.currentNote.noteId}`);
+            
+            if (response.success) {
+                toastService.showMessage(t("ocr.processing_started"));
+                // Refresh the view after a short delay to allow processing to begin
+                setTimeout(() => {
+                    if (this.currentNote) {
+                        this.doRefresh(this.currentNote);
+                    }
+                }, 2000);
+            } else {
+                throw new Error(response.error || t("ocr.processing_failed"));
+            }
+        } catch (error: any) {
+            console.error("Error processing OCR:", error);
+            toastService.showError(error.message || t("ocr.processing_failed"));
+            
+            // Re-enable button
+            $button.prop("disabled", false);
+            $button.html(`<span class="bx bx-play"></span> ${t("ocr.process_now")}`);
+        }
+    }
+
+    private showError(message: string) {
+        this.$content.html(`<div class="ocr-text-error">
+            <span class="bx bx-error"></span> ${message}
+        </div>`);
+        this.$actions.empty();
+        this.$meta.empty();
+    }
+
+    async executeWithContentElementEvent({ resolve, ntxId }: EventData<"executeWithContentElement">) {
+        if (!this.isNoteContext(ntxId)) {
+            return;
+        }
+
+        await this.initialized;
+        resolve(this.$content);
+    }
+}

apps/client/src/widgets/view_widgets/board_view/api.ts

@@ -0,0 +1,180 @@
+import appContext from "../../../components/app_context";
+import FNote from "../../../entities/fnote";
+import attributes from "../../../services/attributes";
+import { executeBulkActions } from "../../../services/bulk_action";
+import note_create from "../../../services/note_create";
+import ViewModeStorage from "../view_mode_storage";
+import { BoardData } from "./config";
+import { ColumnMap, getBoardData } from "./data";
+
+export default class BoardApi {
+
+    private constructor(
+        private _columns: string[],
+        private _parentNoteId: string,
+        private viewStorage: ViewModeStorage<BoardData>,
+        private byColumn: ColumnMap,
+        private persistedData: BoardData,
+        private _statusAttribute: string) {}
+
+    get columns() {
+        return this._columns;
+    }
+
+    get statusAttribute() {
+        return this._statusAttribute;
+    }
+
+    getColumn(column: string) {
+        return this.byColumn.get(column);
+    }
+
+    async changeColumn(noteId: string, newColumn: string) {
+        await attributes.setLabel(noteId, this._statusAttribute, newColumn);
+    }
+
+    openNote(noteId: string) {
+        appContext.triggerCommand("openInPopup", { noteIdOrPath: noteId });
+    }
+
+    async insertRowAtPosition(
+            column: string,
+            relativeToBranchId: string,
+            direction: "before" | "after",
+            open: boolean = true) {
+        const { note } = await note_create.createNote(this._parentNoteId, {
+            activate: false,
+            targetBranchId: relativeToBranchId,
+            target: direction,
+            title: "New item"
+        });
+
+        if (!note) {
+            throw new Error("Failed to create note");
+        }
+
+        const { noteId } = note;
+        await this.changeColumn(noteId, column);
+        if (open) {
+            this.openNote(noteId);
+        }
+
+        return note;
+    }
+
+    async renameColumn(oldValue: string, newValue: string, noteIds: string[]) {
+        // Change the value in the notes.
+        await executeBulkActions(noteIds, [
+            {
+                name: "updateLabelValue",
+                labelName: this._statusAttribute,
+                labelValue: newValue
+            }
+        ]);
+
+        // Rename the column in the persisted data.
+        for (const column of this.persistedData.columns || []) {
+            if (column.value === oldValue) {
+                column.value = newValue;
+            }
+        }
+        await this.viewStorage.store(this.persistedData);
+    }
+
+    async removeColumn(column: string) {
+        // Remove the value from the notes.
+        const noteIds = this.byColumn.get(column)?.map(item => item.note.noteId) || [];
+        await executeBulkActions(noteIds, [
+            {
+                name: "deleteLabel",
+                labelName: this._statusAttribute
+            }
+        ]);
+
+        this.persistedData.columns = (this.persistedData.columns ?? []).filter(col => col.value !== column);
+        this.viewStorage.store(this.persistedData);
+    }
+
+    async createColumn(columnValue: string) {
+        // Add the new column to persisted data if it doesn't exist
+        if (!this.persistedData.columns) {
+            this.persistedData.columns = [];
+        }
+
+        const existingColumn = this.persistedData.columns.find(col => col.value === columnValue);
+        if (!existingColumn) {
+            this.persistedData.columns.push({ value: columnValue });
+            await this.viewStorage.store(this.persistedData);
+        }
+
+        return columnValue;
+    }
+
+    async reorderColumns(newColumnOrder: string[]) {
+        // Update the column order in persisted data
+        if (!this.persistedData.columns) {
+            this.persistedData.columns = [];
+        }
+
+        // Create a map of existing column data
+        const columnDataMap = new Map();
+        this.persistedData.columns.forEach(col => {
+            columnDataMap.set(col.value, col);
+        });
+
+        // Reorder columns based on new order
+        this.persistedData.columns = newColumnOrder.map(columnValue => {
+            return columnDataMap.get(columnValue) || { value: columnValue };
+        });
+
+        // Update internal columns array
+        this._columns = newColumnOrder;
+
+        await this.viewStorage.store(this.persistedData);
+    }
+
+    async refresh(parentNote: FNote) {
+        // Refresh the API data by re-fetching from the parent note
+        const statusAttribute = parentNote.getLabelValue("board:groupBy") ?? "status";
+        this._statusAttribute = statusAttribute;
+
+        // Use the current in-memory persisted data instead of restoring from storage
+        // This ensures we don't lose recent updates like column renames
+        const { byColumn, newPersistedData } = await getBoardData(parentNote, statusAttribute, this.persistedData);
+        
+        // Update internal state
+        this.byColumn = byColumn;
+        
+        if (newPersistedData) {
+            this.persistedData = newPersistedData;
+            this.viewStorage.store(this.persistedData);
+        }
+
+        // Use the order from persistedData.columns, then add any new columns found
+        const orderedColumns = this.persistedData.columns?.map(col => col.value) || [];
+        const allColumns = Array.from(byColumn.keys());
+        const newColumns = allColumns.filter(col => !orderedColumns.includes(col));
+        this._columns = [...orderedColumns, ...newColumns];
+    }
+
+    static async build(parentNote: FNote, viewStorage: ViewModeStorage<BoardData>) {
+        const statusAttribute = parentNote.getLabelValue("board:groupBy") ?? "status";
+
+        let persistedData = await viewStorage.restore() ?? {};
+        const { byColumn, newPersistedData } = await getBoardData(parentNote, statusAttribute, persistedData);
+        
+        // Use the order from persistedData.columns, then add any new columns found
+        const orderedColumns = persistedData.columns?.map(col => col.value) || [];
+        const allColumns = Array.from(byColumn.keys());
+        const newColumns = allColumns.filter(col => !orderedColumns.includes(col));
+        const columns = [...orderedColumns, ...newColumns];
+
+        if (newPersistedData) {
+            persistedData = newPersistedData;
+            viewStorage.store(persistedData);
+        }
+
+        return new BoardApi(columns, parentNote.noteId, viewStorage, byColumn, persistedData, statusAttribute);
+    }
+
+}

apps/client/src/widgets/view_widgets/board_view/column_drag_handler.ts

@@ -0,0 +1,278 @@
+import BoardApi from "./api";
+import { DragContext, BaseDragHandler } from "./drag_types";
+
+export class ColumnDragHandler implements BaseDragHandler {
+    private $container: JQuery<HTMLElement>;
+    private api: BoardApi;
+    private context: DragContext;
+
+    constructor(
+        $container: JQuery<HTMLElement>,
+        api: BoardApi,
+        context: DragContext,
+    ) {
+        this.$container = $container;
+        this.api = api;
+        this.context = context;
+    }
+
+    setupColumnDrag($columnEl: JQuery<HTMLElement>, columnValue: string) {
+        const $titleEl = $columnEl.find('h3[data-column-value]');
+
+        $titleEl.attr("draggable", "true");
+
+        // Delay drag start to allow click detection
+        let dragStartTimer: number | null = null;
+
+        $titleEl.on("mousedown", (e) => {
+            // Don't interfere with editing mode or input field interactions
+            if ($titleEl.hasClass('editing') || $(e.target).is('input')) {
+                return;
+            }
+            
+            // Clear any existing timer
+            if (dragStartTimer) {
+                clearTimeout(dragStartTimer);
+                dragStartTimer = null;
+            }
+
+            // Set a short delay before enabling dragging
+            dragStartTimer = window.setTimeout(() => {
+                $titleEl.attr("draggable", "true");
+                dragStartTimer = null;
+            }, 150);
+        });
+
+        $titleEl.on("mouseup mouseleave", (e) => {
+            // Don't interfere with editing mode
+            if ($titleEl.hasClass('editing') || $(e.target).is('input')) {
+                return;
+            }
+            
+            // Cancel drag start timer on mouse up or leave
+            if (dragStartTimer) {
+                clearTimeout(dragStartTimer);
+                dragStartTimer = null;
+            }
+        });
+
+        $titleEl.on("dragstart", (e) => {
+            // Only start dragging if the target is not an input (for inline editing)
+            if ($(e.target).is('input') || $titleEl.hasClass('editing')) {
+                e.preventDefault();
+                return false;
+            }
+
+            this.context.draggedColumn = columnValue;
+            this.context.draggedColumnElement = $columnEl;
+            $columnEl.addClass("column-dragging");
+
+            const originalEvent = e.originalEvent as DragEvent;
+            if (originalEvent.dataTransfer) {
+                originalEvent.dataTransfer.effectAllowed = "move";
+                originalEvent.dataTransfer.setData("text/plain", columnValue);
+            }
+
+            // Prevent note dragging when column is being dragged
+            e.stopPropagation();
+
+            // Setup global drag tracking for better drop indicator positioning
+            this.setupGlobalColumnDragTracking();
+        });
+
+        $titleEl.on("dragend", () => {
+            $columnEl.removeClass("column-dragging");
+            this.context.draggedColumn = null;
+            this.context.draggedColumnElement = null;
+            this.cleanupColumnDropIndicators();
+            this.cleanupGlobalColumnDragTracking();
+
+            // Re-enable draggable
+            $titleEl.attr("draggable", "true");
+        });
+    }
+
+    setupColumnDropZone($columnEl: JQuery<HTMLElement>) {
+        $columnEl.on("dragover", (e) => {
+            // Only handle column drops when a column is being dragged
+            if (this.context.draggedColumn && !this.context.draggedNote) {
+                e.preventDefault();
+                const originalEvent = e.originalEvent as DragEvent;
+                if (originalEvent.dataTransfer) {
+                    originalEvent.dataTransfer.dropEffect = "move";
+                }
+
+                // Don't highlight columns - we only care about the drop indicator position
+            }
+        });
+
+        $columnEl.on("drop", async (e) => {
+            if (this.context.draggedColumn && !this.context.draggedNote) {
+                e.preventDefault();
+                console.log("Column drop event triggered for column:", this.context.draggedColumn);
+
+                // Use the drop indicator position to determine where to place the column
+                await this.handleColumnDrop();
+            }
+        });
+    }
+
+    cleanup() {
+        this.cleanupColumnDropIndicators();
+        this.context.draggedColumn = null;
+        this.context.draggedColumnElement = null;
+        this.cleanupGlobalColumnDragTracking();
+    }
+
+    private setupGlobalColumnDragTracking() {
+        // Add container-level drag tracking for better indicator positioning
+        this.$container.on("dragover.columnDrag", (e) => {
+            if (this.context.draggedColumn) {
+                e.preventDefault();
+                const originalEvent = e.originalEvent as DragEvent;
+                this.showColumnDropIndicator(originalEvent.clientX);
+            }
+        });
+
+        // Add container-level drop handler for column reordering
+        this.$container.on("drop.columnDrag", async (e) => {
+            if (this.context.draggedColumn) {
+                e.preventDefault();
+                console.log("Container drop event triggered for column:", this.context.draggedColumn);
+                await this.handleColumnDrop();
+            }
+        });
+    }
+
+    private cleanupGlobalColumnDragTracking() {
+        this.$container.off("dragover.columnDrag");
+        this.$container.off("drop.columnDrag");
+    }
+
+    private cleanupColumnDropIndicators() {
+        // Remove column drop indicators
+        this.$container.find(".column-drop-indicator").remove();
+    }
+
+    private showColumnDropIndicator(mouseX: number) {
+        // Clean up existing indicators
+        this.cleanupColumnDropIndicators();
+
+        // Get all columns (excluding the dragged one if it exists)
+        let $allColumns = this.$container.find('.board-column');
+        if (this.context.draggedColumnElement) {
+            $allColumns = $allColumns.not(this.context.draggedColumnElement);
+        }
+
+        let $targetColumn: JQuery<HTMLElement> = $();
+        let insertBefore = false;
+
+        // Find which column the mouse is closest to
+        $allColumns.each((_, columnEl) => {
+            const $column = $(columnEl);
+            const rect = columnEl.getBoundingClientRect();
+            const columnMiddle = rect.left + rect.width / 2;
+
+            if (mouseX >= rect.left && mouseX <= rect.right) {
+                // Mouse is over this column
+                $targetColumn = $column;
+                insertBefore = mouseX < columnMiddle;
+                return false; // Break the loop
+            }
+        });
+
+        // If no column found under mouse, find the closest one
+        if ($targetColumn.length === 0) {
+            let closestDistance = Infinity;
+            $allColumns.each((_, columnEl) => {
+                const $column = $(columnEl);
+                const rect = columnEl.getBoundingClientRect();
+                const columnCenter = rect.left + rect.width / 2;
+                const distance = Math.abs(mouseX - columnCenter);
+
+                if (distance < closestDistance) {
+                    closestDistance = distance;
+                    $targetColumn = $column;
+                    insertBefore = mouseX < columnCenter;
+                }
+            });
+        }
+
+        if ($targetColumn.length > 0) {
+            const $dropIndicator = $("<div>").addClass("column-drop-indicator");
+
+            if (insertBefore) {
+                $targetColumn.before($dropIndicator);
+            } else {
+                $targetColumn.after($dropIndicator);
+            }
+
+            $dropIndicator.addClass("show");
+        }
+    }
+
+    private async handleColumnDrop() {
+        console.log("handleColumnDrop called for:", this.context.draggedColumn);
+
+        if (!this.context.draggedColumn || !this.context.draggedColumnElement) {
+            console.log("No dragged column or element found");
+            return;
+        }
+
+        try {
+            // Find the drop indicator to determine insert position
+            const $dropIndicator = this.$container.find(".column-drop-indicator.show");
+            console.log("Drop indicator found:", $dropIndicator.length > 0);
+
+            if ($dropIndicator.length > 0) {
+                // Get current column order from the API (source of truth)
+                const currentOrder = [...this.api.columns];
+
+                let newOrder = [...currentOrder];
+
+                // Remove dragged column from current position
+                newOrder = newOrder.filter(col => col !== this.context.draggedColumn);
+
+                // Determine insertion position based on drop indicator position
+                const $nextColumn = $dropIndicator.next('.board-column');
+                const $prevColumn = $dropIndicator.prev('.board-column');
+
+                let insertIndex = -1;
+
+                if ($nextColumn.length > 0) {
+                    // Insert before the next column
+                    const nextColumnValue = $nextColumn.attr('data-column');
+                    if (nextColumnValue) {
+                        insertIndex = newOrder.indexOf(nextColumnValue);
+                    }
+                } else if ($prevColumn.length > 0) {
+                    // Insert after the previous column
+                    const prevColumnValue = $prevColumn.attr('data-column');
+                    if (prevColumnValue) {
+                        insertIndex = newOrder.indexOf(prevColumnValue) + 1;
+                    }
+                } else {
+                    // Insert at the beginning
+                    insertIndex = 0;
+                }
+
+                // Insert the dragged column at the determined position
+                if (insertIndex >= 0 && insertIndex <= newOrder.length) {
+                    newOrder.splice(insertIndex, 0, this.context.draggedColumn);
+                } else {
+                    // Fallback: insert at the end
+                    newOrder.push(this.context.draggedColumn);
+                }
+
+                // Update column order in API
+                await this.api.reorderColumns(newOrder);
+            } else {
+                console.warn("No drop indicator found for column drop");
+            }
+        } catch (error) {
+            console.error("Failed to reorder columns:", error);
+        } finally {
+            this.cleanupColumnDropIndicators();
+        }
+    }
+}

apps/client/src/widgets/view_widgets/board_view/config.ts

@@ -0,0 +1,7 @@
+export interface BoardColumnData {
+    value: string;
+}
+
+export interface BoardData {
+    columns?: BoardColumnData[];
+}

apps/client/src/widgets/view_widgets/board_view/context_menu.ts

@@ -0,0 +1,93 @@
+import contextMenu, { ContextMenuEvent } from "../../../menus/context_menu.js";
+import link_context_menu from "../../../menus/link_context_menu.js";
+import branches from "../../../services/branches.js";
+import dialog from "../../../services/dialog.js";
+import { t } from "../../../services/i18n.js";
+import BoardApi from "./api.js";
+import type BoardView from "./index.js";
+
+interface ShowNoteContextMenuArgs {
+    $container: JQuery<HTMLElement>;
+    api: BoardApi;
+    boardView: BoardView;
+}
+
+export function setupContextMenu({ $container, api, boardView }: ShowNoteContextMenuArgs) {
+    $container.on("contextmenu", ".board-note", showNoteContextMenu);
+    $container.on("contextmenu", ".board-column h3", showColumnContextMenu);
+
+    function showColumnContextMenu(event: ContextMenuEvent) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const $el = $(event.currentTarget);
+        const column = $el.closest(".board-column").data("column");
+
+        contextMenu.show({
+            x: event.pageX,
+            y: event.pageY,
+            items: [
+                {
+                    title: t("board_view.delete-column"),
+                    uiIcon: "bx bx-trash",
+                    async handler() {
+                        const confirmed = await dialog.confirm(t("board_view.delete-column-confirmation"));
+                        if (!confirmed) {
+                            return;
+                        }
+
+                        await api.removeColumn(column);
+                    }
+                }
+            ],
+            selectMenuItemHandler() {}
+        });
+    }
+
+    function showNoteContextMenu(event: ContextMenuEvent) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const $el = $(event.currentTarget);
+        const noteId = $el.data("note-id");
+        const branchId = $el.data("branch-id");
+        const column = $el.closest(".board-column").data("column");
+        if (!noteId) return;
+
+        contextMenu.show({
+            x: event.pageX,
+            y: event.pageY,
+            items: [
+                ...link_context_menu.getItems(),
+                { title: "----" },
+                {
+                    title: t("board_view.move-to"),
+                    uiIcon: "bx bx-transfer",
+                    items: api.columns.map(columnToMoveTo => ({
+                        title: columnToMoveTo,
+                        enabled: columnToMoveTo !== column,
+                        handler: () => api.changeColumn(noteId, columnToMoveTo)
+                    }))
+                },
+                { title: "----" },
+                {
+                    title: t("board_view.insert-above"),
+                    uiIcon: "bx bx-list-plus",
+                    handler: () => boardView.insertItemAtPosition(column, branchId, "before")
+                },
+                {
+                    title: t("board_view.insert-below"),
+                    uiIcon: "bx bx-empty",
+                    handler: () => boardView.insertItemAtPosition(column, branchId, "after")
+                },
+                { title: "----" },
+                {
+                    title: t("board_view.delete-note"),
+                    uiIcon: "bx bx-trash",
+                    handler: () => branches.deleteNotes([ branchId ], false, false)
+                }
+            ],
+            selectMenuItemHandler: ({ command }) =>  link_context_menu.handleLinkContextMenuItem(command, noteId),
+        });
+    }
+}

apps/client/src/widgets/view_widgets/board_view/data.ts

@@ -0,0 +1,84 @@
+import FBranch from "../../../entities/fbranch";
+import FNote from "../../../entities/fnote";
+import { BoardData } from "./config";
+
+export type ColumnMap = Map<string, {
+    branch: FBranch;
+    note: FNote;
+}[]>;
+
+export async function getBoardData(parentNote: FNote, groupByColumn: string, persistedData: BoardData) {
+    const byColumn: ColumnMap = new Map();
+
+    // First, scan all notes to find what columns actually exist
+    await recursiveGroupBy(parentNote.getChildBranches(), byColumn, groupByColumn);
+
+    // Get all columns that exist in the notes
+    const columnsFromNotes = [...byColumn.keys()];
+    
+    // Get existing persisted columns and preserve their order
+    const existingPersistedColumns = persistedData.columns || [];
+    const existingColumnValues = existingPersistedColumns.map(c => c.value);
+    
+    // Find truly new columns (exist in notes but not in persisted data)
+    const newColumnValues = columnsFromNotes.filter(col => !existingColumnValues.includes(col));
+    
+    // Build the complete correct column list: existing + new
+    const allColumns = [
+        ...existingPersistedColumns, // Preserve existing order
+        ...newColumnValues.map(value => ({ value })) // Add new columns
+    ];
+    
+    // Remove duplicates (just in case) and ensure we only keep columns that exist in notes or are explicitly preserved
+    const deduplicatedColumns = allColumns.filter((column, index) => {
+        const firstIndex = allColumns.findIndex(c => c.value === column.value);
+        return firstIndex === index; // Keep only the first occurrence
+    });
+    
+    // Ensure all persisted columns have empty arrays in byColumn (even if no notes use them)
+    for (const column of deduplicatedColumns) {
+        if (!byColumn.has(column.value)) {
+            byColumn.set(column.value, []);
+        }
+    }
+
+    // Return updated persisted data only if there were changes
+    let newPersistedData: BoardData | undefined;
+    const hasChanges = newColumnValues.length > 0 || 
+                      existingPersistedColumns.length !== deduplicatedColumns.length ||
+                      !existingPersistedColumns.every((col, idx) => deduplicatedColumns[idx]?.value === col.value);
+                      
+    if (hasChanges) {
+        newPersistedData = {
+            ...persistedData,
+            columns: deduplicatedColumns
+        };
+    }
+
+    return {
+        byColumn,
+        newPersistedData
+    };
+}
+
+async function recursiveGroupBy(branches: FBranch[], byColumn: ColumnMap, groupByColumn: string) {
+    for (const branch of branches) {
+        const note = await branch.getNote();
+        if (!note) {
+            continue;
+        }
+
+        const group = note.getLabelValue(groupByColumn);
+        if (!group) {
+            continue;
+        }
+
+        if (!byColumn.has(group)) {
+            byColumn.set(group, []);
+        }
+        byColumn.get(group)!.push({
+            branch,
+            note
+        });
+    }
+}

apps/client/src/widgets/view_widgets/board_view/differential_renderer.ts

@@ -0,0 +1,539 @@
+import { BoardDragHandler } from "./drag_handler";
+import BoardApi from "./api";
+import appContext from "../../../components/app_context";
+import FNote from "../../../entities/fnote";
+import ViewModeStorage from "../view_mode_storage";
+import { BoardData } from "./config";
+import { t } from "../../../services/i18n.js";
+
+export interface BoardState {
+    columns: { [key: string]: { note: any; branch: any }[] };
+    columnOrder: string[];
+}
+
+export class DifferentialBoardRenderer {
+    private $container: JQuery<HTMLElement>;
+    private api: BoardApi;
+    private dragHandler: BoardDragHandler;
+    private lastState: BoardState | null = null;
+    private onCreateNewItem: (column: string) => void;
+    private updateTimeout: number | null = null;
+    private pendingUpdate = false;
+    private parentNote: FNote;
+    private viewStorage: ViewModeStorage<BoardData>;
+    private onRefreshApi: () => Promise<void>;
+
+    constructor(
+        $container: JQuery<HTMLElement>,
+        api: BoardApi,
+        dragHandler: BoardDragHandler,
+        onCreateNewItem: (column: string) => void,
+        parentNote: FNote,
+        viewStorage: ViewModeStorage<BoardData>,
+        onRefreshApi: () => Promise<void>
+    ) {
+        this.$container = $container;
+        this.api = api;
+        this.dragHandler = dragHandler;
+        this.onCreateNewItem = onCreateNewItem;
+        this.parentNote = parentNote;
+        this.viewStorage = viewStorage;
+        this.onRefreshApi = onRefreshApi;
+    }
+
+    async renderBoard(refreshApi = false): Promise<void> {
+        // Refresh API data if requested
+        if (refreshApi) {
+            await this.onRefreshApi();
+        }
+
+        // Debounce rapid updates
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+        }
+
+        this.updateTimeout = window.setTimeout(async () => {
+            await this.performUpdate();
+            this.updateTimeout = null;
+        }, 16); // ~60fps
+    }
+
+    private async performUpdate(): Promise<void> {
+        // Clean up any stray drag indicators before updating
+        this.dragHandler.cleanup();
+
+        const currentState = this.getCurrentState();
+
+        if (!this.lastState) {
+            // First render - do full render
+            await this.fullRender(currentState);
+        } else {
+            // Differential render - only update what changed
+            await this.differentialRender(this.lastState, currentState);
+        }
+
+        this.lastState = currentState;
+    }
+
+    private getCurrentState(): BoardState {
+        const columns: { [key: string]: { note: any; branch: any }[] } = {};
+        const columnOrder: string[] = [];
+
+        for (const column of this.api.columns) {
+            columnOrder.push(column);
+            columns[column] = this.api.getColumn(column) || [];
+        }
+
+        return { columns, columnOrder };
+    }
+
+    private async fullRender(state: BoardState): Promise<void> {
+        this.$container.empty();
+
+        for (const column of state.columnOrder) {
+            const columnItems = state.columns[column];
+            const $columnEl = this.createColumn(column, columnItems);
+            this.$container.append($columnEl);
+        }
+
+        this.addAddColumnButton();
+    }
+
+    private async differentialRender(oldState: BoardState, newState: BoardState): Promise<void> {
+        // Store scroll positions before making changes
+        const scrollPositions = this.saveScrollPositions();
+
+        // Handle column additions/removals
+        this.updateColumns(oldState, newState);
+
+        // Handle card updates within existing columns
+        for (const column of newState.columnOrder) {
+            this.updateColumnCards(column, oldState.columns[column] || [], newState.columns[column]);
+        }
+
+        // Restore scroll positions
+        this.restoreScrollPositions(scrollPositions);
+    }
+
+    private saveScrollPositions(): { [column: string]: number } {
+        const positions: { [column: string]: number } = {};
+        this.$container.find('.board-column').each((_, el) => {
+            const column = $(el).attr('data-column');
+            if (column) {
+                positions[column] = el.scrollTop;
+            }
+        });
+        return positions;
+    }
+
+    private restoreScrollPositions(positions: { [column: string]: number }): void {
+        this.$container.find('.board-column').each((_, el) => {
+            const column = $(el).attr('data-column');
+            if (column && positions[column] !== undefined) {
+                el.scrollTop = positions[column];
+            }
+        });
+    }
+
+    private updateColumns(oldState: BoardState, newState: BoardState): void {
+        // Check if column order has changed
+        const orderChanged = !this.arraysEqual(oldState.columnOrder, newState.columnOrder);
+
+        if (orderChanged) {
+            // If order changed, we need to reorder the columns in the DOM
+            this.reorderColumns(newState.columnOrder);
+        }
+
+        // Remove columns that no longer exist
+        for (const oldColumn of oldState.columnOrder) {
+            if (!newState.columnOrder.includes(oldColumn)) {
+                this.$container.find(`[data-column="${oldColumn}"]`).remove();
+            }
+        }
+
+        // Add new columns
+        for (const newColumn of newState.columnOrder) {
+            if (!oldState.columnOrder.includes(newColumn)) {
+                const columnItems = newState.columns[newColumn];
+                const $columnEl = this.createColumn(newColumn, columnItems);
+
+                // Insert at correct position
+                const insertIndex = newState.columnOrder.indexOf(newColumn);
+                const $existingColumns = this.$container.find('.board-column');
+
+                if (insertIndex === 0) {
+                    this.$container.prepend($columnEl);
+                } else if (insertIndex >= $existingColumns.length) {
+                    this.$container.find('.board-add-column').before($columnEl);
+                } else {
+                    $($existingColumns[insertIndex - 1]).after($columnEl);
+                }
+            }
+        }
+    }
+
+    private arraysEqual(a: string[], b: string[]): boolean {
+        return a.length === b.length && a.every((val, index) => val === b[index]);
+    }
+
+    private reorderColumns(newOrder: string[]): void {
+        // Get all existing column elements
+        const $columns = this.$container.find('.board-column');
+        const $addColumnButton = this.$container.find('.board-add-column');
+
+        // Create a map of column elements by their data-column attribute
+        const columnElements = new Map<string, JQuery<HTMLElement>>();
+        $columns.each((_, el) => {
+            const $el = $(el);
+            const columnValue = $el.attr('data-column');
+            if (columnValue) {
+                columnElements.set(columnValue, $el);
+            }
+        });
+
+        // Remove all columns from DOM (but keep references)
+        $columns.detach();
+
+        // Re-insert columns in the new order
+        let $insertAfter: JQuery<HTMLElement> | null = null;
+        for (const columnValue of newOrder) {
+            const $columnEl = columnElements.get(columnValue);
+            if ($columnEl) {
+                if ($insertAfter) {
+                    $insertAfter.after($columnEl);
+                } else {
+                    // Insert at the beginning
+                    this.$container.prepend($columnEl);
+                }
+                $insertAfter = $columnEl;
+            }
+        }
+
+        // Ensure add column button is at the end
+        if ($addColumnButton.length) {
+            this.$container.append($addColumnButton);
+        }
+    }
+
+    private updateColumnCards(column: string, oldCards: { note: any; branch: any }[], newCards: { note: any; branch: any }[]): void {
+        const $column = this.$container.find(`[data-column="${column}"]`);
+        if (!$column.length) return;
+
+        const $cardContainer = $column;
+        const oldCardIds = oldCards.map(item => item.note.noteId);
+        const newCardIds = newCards.map(item => item.note.noteId);
+
+        // Remove cards that no longer exist
+        $cardContainer.find('.board-note').each((_, el) => {
+            const noteId = $(el).attr('data-note-id');
+            if (noteId && !newCardIds.includes(noteId)) {
+                $(el).addClass('fade-out');
+                setTimeout(() => $(el).remove(), 150);
+            }
+        });
+
+        // Add or update cards
+        for (let i = 0; i < newCards.length; i++) {
+            const item = newCards[i];
+            const noteId = item.note.noteId;
+            const $existingCard = $cardContainer.find(`[data-note-id="${noteId}"]`);
+            const isNewCard = !oldCardIds.includes(noteId);
+
+            if ($existingCard.length) {
+                // Check for changes in title, icon, or color
+                const currentTitle = $existingCard.text().trim();
+                const currentIconClass = $existingCard.attr('data-icon-class');
+                const currentColorClass = $existingCard.attr('data-color-class') || '';
+
+                const newIconClass = item.note.getIcon();
+                const newColorClass = item.note.getColorClass() || '';
+
+                let hasChanges = false;
+
+                // Update title if changed
+                if (currentTitle !== item.note.title) {
+                    $existingCard.contents().filter(function() {
+                        return this.nodeType === 3; // Text nodes
+                    }).remove();
+                    $existingCard.append(document.createTextNode(item.note.title));
+                    hasChanges = true;
+                }
+
+                // Update icon if changed
+                if (currentIconClass !== newIconClass) {
+                    const $icon = $existingCard.find('.icon');
+                    $icon.removeClass().addClass('icon').addClass(newIconClass);
+                    $existingCard.attr('data-icon-class', newIconClass);
+                    hasChanges = true;
+                }
+
+                // Update color if changed
+                if (currentColorClass !== newColorClass) {
+                    // Remove old color class if it exists
+                    if (currentColorClass) {
+                        $existingCard.removeClass(currentColorClass);
+                    }
+                    // Add new color class if it exists
+                    if (newColorClass) {
+                        $existingCard.addClass(newColorClass);
+                    }
+                    $existingCard.attr('data-color-class', newColorClass);
+                    hasChanges = true;
+                }
+
+                // Add subtle animation if there were changes
+                if (hasChanges) {
+                    $existingCard.addClass('card-updated');
+                    setTimeout(() => $existingCard.removeClass('card-updated'), 300);
+                }
+
+                // Ensure card is in correct position
+                this.ensureCardPosition($existingCard, i, $cardContainer);
+            } else {
+                // Create new card
+                const $newCard = this.createCard(item.note, item.branch, column);
+                $newCard.addClass('fade-in').css('opacity', '0');
+
+                // Insert at correct position
+                if (i === 0) {
+                    $cardContainer.find('h3').after($newCard);
+                } else {
+                    const $prevCard = $cardContainer.find('.board-note').eq(i - 1);
+                    if ($prevCard.length) {
+                        $prevCard.after($newCard);
+                    } else {
+                        $cardContainer.find('.board-new-item').before($newCard);
+                    }
+                }
+
+                // Trigger fade in animation
+                setTimeout(() => $newCard.css('opacity', '1'), 10);
+            }
+        }
+    }
+
+    private ensureCardPosition($card: JQuery<HTMLElement>, targetIndex: number, $container: JQuery<HTMLElement>): void {
+        const $allCards = $container.find('.board-note');
+        const currentIndex = $allCards.index($card);
+
+        if (currentIndex !== targetIndex) {
+            if (targetIndex === 0) {
+                $container.find('h3').after($card);
+            } else {
+                const $targetPrev = $allCards.eq(targetIndex - 1);
+                if ($targetPrev.length) {
+                    $targetPrev.after($card);
+                }
+            }
+        }
+    }
+
+    private createColumn(column: string, columnItems: { note: any; branch: any }[]): JQuery<HTMLElement> {
+        const $columnEl = $("<div>")
+            .addClass("board-column")
+            .attr("data-column", column);
+
+        // Create header
+        const $titleEl = $("<h3>").attr("data-column-value", column);
+
+        // Create title text
+        const $titleText = $("<span>").text(column);
+
+        // Create edit icon
+        const $editIcon = $("<span>")
+            .addClass("edit-icon icon bx bx-edit-alt")
+            .attr("title", "Click to edit column title");
+
+        $titleEl.append($titleText, $editIcon);
+        $columnEl.append($titleEl);
+
+        // Setup column dragging
+        this.dragHandler.setupColumnDrag($columnEl, column);
+
+        // Handle wheel events for scrolling
+        $columnEl.on("wheel", (event) => {
+            const el = $columnEl[0];
+            const needsScroll = el.scrollHeight > el.clientHeight;
+            if (needsScroll) {
+                event.stopPropagation();
+            }
+        });
+
+        // Setup drop zones for both notes and columns
+        this.dragHandler.setupNoteDropZone($columnEl, column);
+        this.dragHandler.setupColumnDropZone($columnEl);
+
+        // Add cards
+        for (const item of columnItems) {
+            if (item.note) {
+                const $noteEl = this.createCard(item.note, item.branch, column);
+                $columnEl.append($noteEl);
+            }
+        }
+
+        // Add "New item" button
+        const $newItemEl = $("<div>")
+            .addClass("board-new-item")
+            .attr("data-column", column)
+            .html(`<span class="icon bx bx-plus"></span> ${t("board_view.new-item")}`);
+
+        $newItemEl.on("click", () => this.onCreateNewItem(column));
+        $columnEl.append($newItemEl);
+
+        return $columnEl;
+    }
+
+    private createCard(note: any, branch: any, column: string): JQuery<HTMLElement> {
+        const $iconEl = $("<span>")
+            .addClass("icon")
+            .addClass(note.getIcon());
+
+        const colorClass = note.getColorClass() || '';
+
+        const $noteEl = $("<div>")
+            .addClass("board-note")
+            .attr("data-note-id", note.noteId)
+            .attr("data-branch-id", branch.branchId)
+            .attr("data-current-column", column)
+            .attr("data-icon-class", note.getIcon())
+            .attr("data-color-class", colorClass)
+            .text(note.title);
+
+        // Add color class to the card if it exists
+        if (colorClass) {
+            $noteEl.addClass(colorClass);
+        }
+
+        $noteEl.prepend($iconEl);
+        $noteEl.on("click", () => appContext.triggerCommand("openInPopup", { noteIdOrPath: note.noteId }));
+
+        // Setup drag functionality
+        this.dragHandler.setupNoteDrag($noteEl, note, branch);
+
+        return $noteEl;
+    }
+
+    private addAddColumnButton(): void {
+        if (this.$container.find('.board-add-column').length === 0) {
+            const $addColumnEl = $("<div>")
+                .addClass("board-add-column")
+                .html(`<span class="icon bx bx-plus"></span> ${t("board_view.add-column")}`);
+
+            this.$container.append($addColumnEl);
+        }
+    }
+
+    forceFullRender(): void {
+        this.lastState = null;
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+            this.updateTimeout = null;
+        }
+    }
+
+    async flushPendingUpdates(): Promise<void> {
+        if (this.updateTimeout) {
+            clearTimeout(this.updateTimeout);
+            this.updateTimeout = null;
+            await this.performUpdate();
+        }
+    }
+
+    startInlineEditing(noteId: string): void {
+        // Use setTimeout to ensure the card is rendered before trying to edit it
+        setTimeout(() => {
+            const $card = this.$container.find(`[data-note-id="${noteId}"]`);
+            if ($card.length) {
+                this.makeCardEditable($card, noteId);
+            }
+        }, 100);
+    }
+
+    private makeCardEditable($card: JQuery<HTMLElement>, noteId: string): void {
+        if ($card.hasClass('editing')) {
+            return; // Already editing
+        }
+
+        // Get the current title (get text without icon)
+        const $icon = $card.find('.icon');
+        const currentTitle = $card.text().trim();
+
+        // Add editing class and store original click handler
+        $card.addClass('editing');
+        $card.off('click'); // Remove any existing click handlers temporarily
+
+        // Create input element
+        const $input = $('<input>')
+            .attr('type', 'text')
+            .val(currentTitle)
+            .css({
+                background: 'transparent',
+                border: 'none',
+                outline: 'none',
+                fontFamily: 'inherit',
+                fontSize: 'inherit',
+                color: 'inherit',
+                flex: '1',
+                minWidth: '0',
+                padding: '0',
+                marginLeft: '0.25em'
+            });
+
+        // Create a flex container to keep icon and input inline
+        const $editContainer = $('<div>')
+            .css({
+                display: 'flex',
+                alignItems: 'center',
+                width: '100%'
+            });
+
+        // Replace content with icon + input in flex container
+        $editContainer.append($icon.clone(), $input);
+        $card.empty().append($editContainer);
+        $input.focus().select();
+
+        const finishEdit = async (save = true) => {
+            if (!$card.hasClass('editing')) {
+                return; // Already finished
+            }
+
+            $card.removeClass('editing');
+
+            let finalTitle = currentTitle;
+            if (save) {
+                const newTitle = $input.val() as string;
+                if (newTitle.trim() && newTitle !== currentTitle) {
+                    try {
+                        // Update the note title using the board view's server call
+                        import('../../../services/server').then(async ({ default: server }) => {
+                            await server.put(`notes/${noteId}/title`, { title: newTitle.trim() });
+                            finalTitle = newTitle.trim();
+                        });
+                    } catch (error) {
+                        console.error("Failed to update note title:", error);
+                    }
+                }
+            }
+
+            // Restore the card content
+            const iconClass = $card.attr('data-icon-class') || 'bx bx-file';
+            const $newIcon = $('<span>').addClass('icon').addClass(iconClass);
+            $card.text(finalTitle);
+            $card.prepend($newIcon);
+
+            // Re-attach click handler for quick edit (for existing cards)
+            $card.on('click', () => appContext.triggerCommand("openInPopup", { noteIdOrPath: noteId }));
+        };
+
+        $input.on('blur', () => finishEdit(true));
+        $input.on('keydown', (e) => {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                finishEdit(true);
+            } else if (e.key === 'Escape') {
+                e.preventDefault();
+                finishEdit(false);
+            }
+        });
+    }
+}

apps/client/src/widgets/view_widgets/board_view/drag_handler.ts

@@ -0,0 +1,45 @@
+import BoardApi from "./api";
+import { DragContext } from "./drag_types";
+import { NoteDragHandler } from "./note_drag_handler";
+import { ColumnDragHandler } from "./column_drag_handler";
+
+export class BoardDragHandler {
+    private noteDragHandler: NoteDragHandler;
+    private columnDragHandler: ColumnDragHandler;
+
+    constructor(
+        $container: JQuery<HTMLElement>,
+        api: BoardApi,
+        context: DragContext,
+    ) {
+        // Initialize specialized drag handlers
+        this.noteDragHandler = new NoteDragHandler($container, api, context);
+        this.columnDragHandler = new ColumnDragHandler($container, api, context);
+    }
+
+    // Note drag methods - delegate to NoteDragHandler
+    setupNoteDrag($noteEl: JQuery<HTMLElement>, note: any, branch: any) {
+        this.noteDragHandler.setupNoteDrag($noteEl, note, branch);
+    }
+
+    setupNoteDropZone($columnEl: JQuery<HTMLElement>, column: string) {
+        this.noteDragHandler.setupNoteDropZone($columnEl, column);
+    }
+
+    // Column drag methods - delegate to ColumnDragHandler
+    setupColumnDrag($columnEl: JQuery<HTMLElement>, columnValue: string) {
+        this.columnDragHandler.setupColumnDrag($columnEl, columnValue);
+    }
+
+    setupColumnDropZone($columnEl: JQuery<HTMLElement>) {
+        this.columnDragHandler.setupColumnDropZone($columnEl);
+    }
+
+    cleanup() {
+        this.noteDragHandler.cleanup();
+        this.columnDragHandler.cleanup();
+    }
+}
+
+// Export the drag context type for external use
+export type { DragContext } from "./drag_types";

apps/client/src/widgets/view_widgets/board_view/drag_types.ts

@@ -0,0 +1,11 @@
+export interface DragContext {
+    draggedNote: any;
+    draggedBranch: any;
+    draggedNoteElement: JQuery<HTMLElement> | null;
+    draggedColumn: string | null;
+    draggedColumnElement: JQuery<HTMLElement> | null;
+}
+
+export interface BaseDragHandler {
+    cleanup(): void;
+}

apps/client/src/widgets/view_widgets/board_view/index.ts

@@ -0,0 +1,650 @@
+import { setupHorizontalScrollViaWheel } from "../../widget_utils";
+import ViewMode, { ViewModeArgs } from "../view_mode";
+import noteCreateService from "../../../services/note_create";
+import { EventData } from "../../../components/app_context";
+import { BoardData } from "./config";
+import SpacedUpdate from "../../../services/spaced_update";
+import { setupContextMenu } from "./context_menu";
+import BoardApi from "./api";
+import { BoardDragHandler, DragContext } from "./drag_handler";
+import { DifferentialBoardRenderer } from "./differential_renderer";
+
+const TPL = /*html*/`
+<div class="board-view">
+    <style>
+        .board-view {
+            overflow-x: auto;
+            position: relative;
+            height: 100%;
+            user-select: none;
+        }
+
+        .board-view-container {
+            height: 100%;
+            display: flex;
+            gap: 1em;
+            padding: 1em;
+            padding-bottom: 0;
+            align-items: flex-start;
+        }
+
+        .board-view-container .board-column {
+            width: 250px;
+            flex-shrink: 0;
+            border: 2px solid transparent;
+            border-radius: 8px;
+            padding: 0.5em;
+            background-color: var(--accented-background-color);
+            transition: border-color 0.2s ease;
+            overflow-y: auto;
+            max-height: 100%;
+        }
+
+        .board-view-container .board-column.drag-over {
+            border-color: var(--main-text-color);
+            background-color: var(--hover-item-background-color);
+        }
+
+        .board-view-container .board-column h3 {
+            font-size: 1em;
+            margin-bottom: 0.75em;
+            padding: 0.5em 0.5em 0.5em 0.5em;
+            border-bottom: 1px solid var(--main-border-color);
+            cursor: grab;
+            position: relative;
+            transition: background-color 0.2s ease, border-radius 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            box-sizing: border-box;
+            background-color: transparent;
+        }
+
+        .board-view-container .board-column h3:active {
+            cursor: grabbing;
+        }
+
+        .board-view-container .board-column h3.editing {
+            cursor: default;
+        }
+
+        .board-view-container .board-column h3:hover {
+            background-color: var(--hover-item-background-color);
+            border-radius: 4px;
+        }
+
+        .board-view-container .board-column h3.editing {
+            background-color: var(--main-background-color);
+            border: 1px solid var(--main-text-color);
+            border-radius: 4px;
+        }
+
+        .board-view-container .board-column.column-dragging {
+            opacity: 0.6;
+            transform: scale(0.98);
+            transition: opacity 0.2s ease, transform 0.2s ease;
+        }
+
+        .board-view-container .board-column h3 input {
+            background: transparent;
+            border: none;
+            outline: none;
+            font-size: inherit;
+            font-weight: inherit;
+            color: inherit;
+            width: 100%;
+            font-family: inherit;
+        }
+
+        .board-view-container .board-column h3 .edit-icon {
+            opacity: 0;
+            margin-left: 0.5em;
+            transition: opacity 0.2s ease;
+            color: var(--muted-text-color);
+        }
+
+        .board-view-container .board-column h3:hover .edit-icon {
+            opacity: 1;
+        }
+
+        .board-view-container .board-column h3.editing .edit-icon {
+            display: none;
+        }
+
+        .board-view-container .board-note {
+            box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.25);
+            margin: 0.65em 0;
+            padding: 0.5em;
+            border-radius: 5px;
+            cursor: move;
+            position: relative;
+            background-color: var(--main-background-color);
+            border: 1px solid var(--main-border-color);
+            transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.15s ease;
+            opacity: 1;
+        }
+
+        .board-view-container .board-note.fade-in {
+            animation: fadeIn 0.15s ease-in;
+        }
+
+        .board-view-container .board-note.fade-out {
+            animation: fadeOut 0.15s ease-out forwards;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        @keyframes fadeOut {
+            from { opacity: 1; transform: translateY(0); }
+            to { opacity: 0; transform: translateY(-10px); }
+        }
+
+        .board-view-container .board-note.card-updated {
+            animation: cardUpdate 0.3s ease-in-out;
+        }
+
+        @keyframes cardUpdate {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.02); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
+            100% { transform: scale(1); }
+        }
+
+        .board-view-container .board-note:hover {
+            transform: translateY(-2px);
+            box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.35);
+        }
+
+        .board-view-container .board-note.dragging {
+            opacity: 0.8;
+            transform: rotate(5deg);
+            z-index: 1000;
+            box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.5);
+        }
+
+        .board-view-container .board-note.editing {
+            box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.35);
+            border-color: var(--main-text-color);
+        }
+
+        .board-view-container .board-note.editing input {
+            background: transparent;
+            border: none;
+            outline: none;
+            font-family: inherit;
+            font-size: inherit;
+            color: inherit;
+            width: 100%;
+            padding: 0;
+        }
+
+        .board-view-container .board-note .icon {
+            margin-right: 0.25em;
+        }
+
+        .board-drop-indicator {
+            height: 3px;
+            background-color: var(--main-text-color);
+            border-radius: 2px;
+            margin: 0.25em 0;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+        }
+
+        .board-drop-indicator.show {
+            opacity: 1;
+        }
+
+        .column-drop-indicator {
+            width: 4px;
+            background-color: var(--main-text-color);
+            border-radius: 2px;
+            opacity: 0;
+            transition: opacity 0.2s ease;
+            height: 100%;
+            z-index: 1000;
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+            flex-shrink: 0;
+        }
+
+        .column-drop-indicator.show {
+            opacity: 1;
+        }
+
+        .board-new-item {
+            margin-top: 0.5em;
+            padding: 0.5em;
+            border-radius: 5px;
+            color: var(--muted-text-color);
+            cursor: pointer;
+            transition: all 0.2s ease;
+            background-color: transparent;
+        }
+
+        .board-new-item:hover {
+            border-color: var(--main-text-color);
+            color: var(--main-text-color);
+            background-color: var(--hover-item-background-color);
+        }
+
+        .board-new-item .icon {
+            margin-right: 0.25em;
+        }
+
+        .board-add-column {
+            width: 180px;
+            flex-shrink: 0;
+            height: 60px;
+            border-radius: 8px;
+            padding: 0.5em;
+            background-color: var(--accented-background-color);
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: var(--muted-text-color);
+            font-size: 0.9em;
+            align-self: flex-start;
+        }
+
+        .board-add-column:hover {
+            border-color: var(--main-text-color);
+            color: var(--main-text-color);
+            background-color: var(--hover-item-background-color);
+        }
+
+        .board-add-column .icon {
+            margin-right: 0.5em;
+            font-size: 1.2em;
+        }
+
+        .board-drag-preview {
+            position: fixed;
+            z-index: 10000;
+            pointer-events: none;
+            opacity: 0.8;
+            transform: rotate(5deg);
+            box-shadow: 4px 8px 16px rgba(0, 0, 0, 0.5);
+            background-color: var(--main-background-color);
+            border: 1px solid var(--main-border-color);
+            border-radius: 5px;
+            padding: 0.5em;
+            font-size: 0.9em;
+            max-width: 200px;
+            word-wrap: break-word;
+        }
+    </style>
+
+    <div class="board-view-container"></div>
+</div>
+`;
+
+export default class BoardView extends ViewMode<BoardData> {
+
+    private $root: JQuery<HTMLElement>;
+    private $container: JQuery<HTMLElement>;
+    private spacedUpdate: SpacedUpdate;
+    private dragContext: DragContext;
+    private persistentData: BoardData;
+    private api?: BoardApi;
+    private dragHandler?: BoardDragHandler;
+    private renderer?: DifferentialBoardRenderer;
+
+    constructor(args: ViewModeArgs) {
+        super(args, "board");
+
+        this.$root = $(TPL);
+        setupHorizontalScrollViaWheel(this.$root);
+        this.$container = this.$root.find(".board-view-container");
+        this.spacedUpdate = new SpacedUpdate(() => this.onSave(), 5_000);
+        this.persistentData = {
+            columns: []
+        };
+        this.dragContext = {
+            draggedNote: null,
+            draggedBranch: null,
+            draggedNoteElement: null,
+            draggedColumn: null,
+            draggedColumnElement: null
+        };
+
+        args.$parent.append(this.$root);
+    }
+
+    async renderList(): Promise<JQuery<HTMLElement> | undefined> {
+        if (!this.renderer) {
+            // First time setup
+            this.$container.empty();
+            await this.initializeRenderer();
+        }
+
+        await this.renderer!.renderBoard();
+        return this.$root;
+    }
+
+    private async initializeRenderer() {
+        this.api = await BoardApi.build(this.parentNote, this.viewStorage);
+        this.dragHandler = new BoardDragHandler(
+            this.$container,
+            this.api,
+            this.dragContext
+        );
+
+        this.renderer = new DifferentialBoardRenderer(
+            this.$container,
+            this.api,
+            this.dragHandler,
+            (column: string) => this.createNewItem(column),
+            this.parentNote,
+            this.viewStorage,
+            () => this.refreshApi()
+        );
+
+        setupContextMenu({
+            $container: this.$container,
+            api: this.api,
+            boardView: this
+        });
+
+        // Setup column title editing and add column functionality
+        this.setupBoardInteractions();
+    }
+
+    private async refreshApi(): Promise<void> {
+        if (!this.api) {
+            throw new Error("API not initialized");
+        }
+
+        await this.api.refresh(this.parentNote);
+    }
+
+    private setupBoardInteractions() {
+        // Handle column title editing with click detection that works with dragging
+        this.$container.on('mousedown', 'h3[data-column-value]', (e) => {
+            const $titleEl = $(e.currentTarget);
+
+            // Don't interfere with editing mode
+            if ($titleEl.hasClass('editing') || $(e.target).is('input')) {
+                return;
+            }
+
+            const startTime = Date.now();
+            let hasMoved = false;
+            const startX = e.clientX;
+            const startY = e.clientY;
+
+            const handleMouseMove = (moveEvent: JQuery.MouseMoveEvent) => {
+                const deltaX = Math.abs(moveEvent.clientX - startX);
+                const deltaY = Math.abs(moveEvent.clientY - startY);
+                if (deltaX > 5 || deltaY > 5) {
+                    hasMoved = true;
+                }
+            };
+
+            const handleMouseUp = (upEvent: JQuery.MouseUpEvent) => {
+                const duration = Date.now() - startTime;
+                $(document).off('mousemove', handleMouseMove);
+                $(document).off('mouseup', handleMouseUp);
+
+                // If it was a quick click without much movement, treat as edit request
+                if (duration < 500 && !hasMoved && upEvent.button === 0) {
+                    const columnValue = $titleEl.attr('data-column-value');
+                    if (columnValue) {
+                        const columnItems = this.api?.getColumn(columnValue) || [];
+                        this.startEditingColumnTitle($titleEl, columnValue, columnItems);
+                    }
+                }
+            };
+
+            $(document).on('mousemove', handleMouseMove);
+            $(document).on('mouseup', handleMouseUp);
+        });
+
+        // Handle add column button
+        this.$container.on('click', '.board-add-column', (e) => {
+            e.stopPropagation();
+            this.startCreatingNewColumn($(e.currentTarget));
+        });
+    }
+
+    private createTitleStructure(title: string): { $titleText: JQuery<HTMLElement>; $editIcon: JQuery<HTMLElement> } {
+        const $titleText = $("<span>").text(title);
+        const $editIcon = $("<span>")
+            .addClass("edit-icon icon bx bx-edit-alt")
+            .attr("title", "Click to edit column title");
+
+        return { $titleText, $editIcon };
+    }
+
+    private startEditingColumnTitle($titleEl: JQuery<HTMLElement>, columnValue: string, columnItems: { branch: any; note: any; }[]) {
+        if ($titleEl.hasClass("editing")) {
+            return; // Already editing
+        }
+
+        const $titleSpan = $titleEl.find("span").first(); // Get the text span
+        const currentTitle = $titleSpan.text();
+        $titleEl.addClass("editing");
+
+        // Disable dragging while editing
+        $titleEl.attr("draggable", "false");
+
+        const $input = $("<input>")
+            .attr("type", "text")
+            .val(currentTitle)
+            .attr("placeholder", "Column title");
+
+        // Prevent events from bubbling to parent drag handlers
+        $input.on('mousedown mouseup click', (e) => {
+            e.stopPropagation();
+        });
+
+        $titleEl.empty().append($input);
+        $input.focus().select();
+
+        const finishEdit = async (save: boolean = true) => {
+            if (!$titleEl.hasClass("editing")) {
+                return; // Already finished
+            }
+
+            $titleEl.removeClass("editing");
+
+            // Re-enable dragging after editing
+            $titleEl.attr("draggable", "true");
+
+            let finalTitle = currentTitle;
+            if (save) {
+                const newTitle = $input.val() as string;
+                if (newTitle.trim() && newTitle !== currentTitle) {
+                    await this.renameColumn(columnValue, newTitle.trim(), columnItems);
+                    finalTitle = newTitle.trim();
+                }
+            }
+
+            // Recreate the title structure
+            const { $titleText, $editIcon } = this.createTitleStructure(finalTitle);
+            $titleEl.empty().append($titleText, $editIcon);
+        };
+
+        $input.on("blur", () => finishEdit(true));
+        $input.on("keydown", (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                finishEdit(true);
+            } else if (e.key === "Escape") {
+                e.preventDefault();
+                finishEdit(false);
+            }
+        });
+    }
+
+    private async renameColumn(oldValue: string, newValue: string, columnItems: { branch: any; note: any; }[]) {
+        try {
+            // Get all note IDs in this column
+            const noteIds = columnItems.map(item => item.note.noteId);
+
+            // Use the API to rename the column (update all notes)
+            // This will trigger onEntitiesReloaded which will automatically refresh the board
+            await this.api?.renameColumn(oldValue, newValue, noteIds);
+        } catch (error) {
+            console.error("Failed to rename column:", error);
+        }
+    }
+
+    private async createNewItem(column: string) {
+        try {
+            // Get the parent note path
+            const parentNotePath = this.parentNote.noteId;
+
+            // Create a new note as a child of the parent note
+            const { note: newNote } = await noteCreateService.createNote(parentNotePath, {
+                activate: false,
+                title: "New item"
+            });
+
+            if (newNote) {
+                // Set the status label to place it in the correct column
+                await this.api?.changeColumn(newNote.noteId, column);
+
+                // Refresh the board to show the new item
+                await this.renderList();
+
+                // Start inline editing of the newly created card
+                this.startInlineEditingCard(newNote.noteId);
+            }
+        } catch (error) {
+            console.error("Failed to create new item:", error);
+        }
+    }
+
+    async insertItemAtPosition(column: string, relativeToBranchId: string, direction: "before" | "after"): Promise<void> {
+        try {
+            // Create the note without opening it
+            const newNote = await this.api?.insertRowAtPosition(column, relativeToBranchId, direction, false);
+
+            if (newNote) {
+                // Refresh the board to show the new item
+                await this.renderList();
+
+                // Start inline editing of the newly created card
+                this.startInlineEditingCard(newNote.noteId);
+            }
+        } catch (error) {
+            console.error("Failed to insert new item:", error);
+        }
+    }
+
+    private startInlineEditingCard(noteId: string) {
+        this.renderer?.startInlineEditing(noteId);
+    }
+
+    forceFullRefresh() {
+        this.renderer?.forceFullRender();
+        return this.renderList();
+    }
+
+    private startCreatingNewColumn($addColumnEl: JQuery<HTMLElement>) {
+        if ($addColumnEl.hasClass("editing")) {
+            return; // Already editing
+        }
+
+        $addColumnEl.addClass("editing");
+
+        const $input = $("<input>")
+            .attr("type", "text")
+            .attr("placeholder", "Enter column name...")
+            .css({
+                background: "var(--main-background-color)",
+                border: "1px solid var(--main-text-color)",
+                borderRadius: "4px",
+                padding: "0.5em",
+                color: "var(--main-text-color)",
+                fontFamily: "inherit",
+                fontSize: "inherit",
+                width: "100%",
+                textAlign: "center"
+            });
+
+        $addColumnEl.empty().append($input);
+        $input.focus();
+
+        const finishEdit = async (save: boolean = true) => {
+            if (!$addColumnEl.hasClass("editing")) {
+                return; // Already finished
+            }
+
+            $addColumnEl.removeClass("editing");
+
+            if (save) {
+                const columnName = $input.val() as string;
+                if (columnName.trim()) {
+                    await this.createNewColumn(columnName.trim());
+                }
+            }
+
+            // Restore the add button
+            $addColumnEl.html('<span class="icon bx bx-plus"></span>Add Column');
+        };
+
+        $input.on("blur", () => finishEdit(true));
+        $input.on("keydown", (e) => {
+            if (e.key === "Enter") {
+                e.preventDefault();
+                finishEdit(true);
+            } else if (e.key === "Escape") {
+                e.preventDefault();
+                finishEdit(false);
+            }
+        });
+    }
+
+    private async createNewColumn(columnName: string) {
+        try {
+            // Check if column already exists
+            if (this.api?.columns.includes(columnName)) {
+                console.warn("A column with this name already exists.");
+                return;
+            }
+
+            // Create the new column
+            await this.api?.createColumn(columnName);
+
+            // Refresh the board to show the new column
+            await this.renderList();
+        } catch (error) {
+            console.error("Failed to create new column:", error);
+        }
+    }
+
+    async onEntitiesReloaded({ loadResults }: EventData<"entitiesReloaded">) {
+        // Check if any changes affect our board
+        const hasRelevantChanges =
+            // React to changes in status attribute for notes in this board
+            loadResults.getAttributeRows().some(attr => attr.name === this.api?.statusAttribute && this.noteIds.includes(attr.noteId!)) ||
+            // React to changes in note title
+            loadResults.getNoteIds().some(noteId => this.noteIds.includes(noteId)) ||
+            // React to changes in branches for subchildren (e.g., moved, added, or removed notes)
+            loadResults.getBranchRows().some(branch => this.noteIds.includes(branch.noteId!)) ||
+            // React to changes in note icon or color.
+            loadResults.getAttributeRows().some(attr => [ "iconClass", "color" ].includes(attr.name ?? "") && this.noteIds.includes(attr.noteId ?? "")) ||
+            // React to attachment change
+            loadResults.getAttachmentRows().some(att => att.ownerId === this.parentNote.noteId && att.title === "board.json") ||
+            // React to changes in "groupBy"
+            loadResults.getAttributeRows().some(attr => attr.name === "board:groupBy" && attr.noteId === this.parentNote.noteId);
+
+        if (hasRelevantChanges && this.renderer) {
+            // Use differential rendering with API refresh
+            await this.renderer.renderBoard(true);
+        }
+
+        // Don't trigger full view refresh - let differential renderer handle it
+        return false;
+    }
+
+    private onSave() {
+        this.viewStorage.store(this.persistentData);
+    }
+
+}

apps/client/src/widgets/view_widgets/board_view/note_drag_handler.ts

@@ -0,0 +1,322 @@
+import branchService from "../../../services/branches";
+import BoardApi from "./api";
+import { DragContext, BaseDragHandler } from "./drag_types";
+
+export class NoteDragHandler implements BaseDragHandler {
+    private $container: JQuery<HTMLElement>;
+    private api: BoardApi;
+    private context: DragContext;
+
+    constructor(
+        $container: JQuery<HTMLElement>,
+        api: BoardApi,
+        context: DragContext,
+    ) {
+        this.$container = $container;
+        this.api = api;
+        this.context = context;
+    }
+
+    setupNoteDrag($noteEl: JQuery<HTMLElement>, note: any, branch: any) {
+        $noteEl.attr("draggable", "true");
+
+        // Mouse drag events
+        this.setupMouseDrag($noteEl, note, branch);
+
+        // Touch drag events
+        this.setupTouchDrag($noteEl, note, branch);
+    }
+
+    setupNoteDropZone($columnEl: JQuery<HTMLElement>, column: string) {
+        $columnEl.on("dragover", (e) => {
+            // Only handle note drops when a note is being dragged
+            if (this.context.draggedNote && !this.context.draggedColumn) {
+                e.preventDefault();
+                const originalEvent = e.originalEvent as DragEvent;
+                if (originalEvent.dataTransfer) {
+                    originalEvent.dataTransfer.dropEffect = "move";
+                }
+
+                $columnEl.addClass("drag-over");
+                this.showDropIndicator($columnEl, e);
+            }
+        });
+
+        $columnEl.on("dragleave", (e) => {
+            // Only remove drag-over if we're leaving the column entirely
+            const rect = $columnEl[0].getBoundingClientRect();
+            const originalEvent = e.originalEvent as DragEvent;
+            const x = originalEvent.clientX;
+            const y = originalEvent.clientY;
+
+            if (x < rect.left || x > rect.right || y < rect.top || y > rect.bottom) {
+                $columnEl.removeClass("drag-over");
+                this.cleanupNoteDropIndicators($columnEl);
+            }
+        });
+
+        $columnEl.on("drop", async (e) => {
+            if (this.context.draggedNote && !this.context.draggedColumn) {
+                e.preventDefault();
+                $columnEl.removeClass("drag-over");
+
+                if (this.context.draggedNote && this.context.draggedNoteElement && this.context.draggedBranch) {
+                    await this.handleNoteDrop($columnEl, column);
+                }
+            }
+        });
+    }
+
+    cleanup() {
+        this.cleanupAllDropIndicators();
+        this.$container.find('.board-column').removeClass('drag-over');
+    }
+
+    private setupMouseDrag($noteEl: JQuery<HTMLElement>, note: any, branch: any) {
+        $noteEl.on("dragstart", (e) => {
+            this.context.draggedNote = note;
+            this.context.draggedBranch = branch;
+            this.context.draggedNoteElement = $noteEl;
+            $noteEl.addClass("dragging");
+
+            // Set drag data
+            const originalEvent = e.originalEvent as DragEvent;
+            if (originalEvent.dataTransfer) {
+                originalEvent.dataTransfer.effectAllowed = "move";
+                originalEvent.dataTransfer.setData("text/plain", note.noteId);
+            }
+        });
+
+        $noteEl.on("dragend", () => {
+            $noteEl.removeClass("dragging");
+            this.context.draggedNote = null;
+            this.context.draggedBranch = null;
+            this.context.draggedNoteElement = null;
+
+            // Clean up all drop indicators properly
+            this.cleanupAllDropIndicators();
+        });
+    }
+
+    private setupTouchDrag($noteEl: JQuery<HTMLElement>, note: any, branch: any) {
+        let isDragging = false;
+        let startY = 0;
+        let startX = 0;
+        let dragThreshold = 10; // Minimum distance to start dragging
+        let $dragPreview: JQuery<HTMLElement> | null = null;
+
+        $noteEl.on("touchstart", (e) => {
+            const touch = (e.originalEvent as TouchEvent).touches[0];
+            startX = touch.clientX;
+            startY = touch.clientY;
+            isDragging = false;
+            $dragPreview = null;
+        });
+
+        $noteEl.on("touchmove", (e) => {
+            e.preventDefault(); // Prevent scrolling
+            const touch = (e.originalEvent as TouchEvent).touches[0];
+            const deltaX = Math.abs(touch.clientX - startX);
+            const deltaY = Math.abs(touch.clientY - startY);
+
+            // Start dragging if we've moved beyond threshold
+            if (!isDragging && (deltaX > dragThreshold || deltaY > dragThreshold)) {
+                isDragging = true;
+                this.context.draggedNote = note;
+                this.context.draggedBranch = branch;
+                this.context.draggedNoteElement = $noteEl;
+                $noteEl.addClass("dragging");
+
+                // Create drag preview
+                $dragPreview = this.createDragPreview($noteEl, touch.clientX, touch.clientY);
+            }
+
+            if (isDragging && $dragPreview) {
+                // Update drag preview position
+                $dragPreview.css({
+                    left: touch.clientX - ($dragPreview.outerWidth() || 0) / 2,
+                    top: touch.clientY - ($dragPreview.outerHeight() || 0) / 2
+                });
+
+                // Find element under touch point
+                const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+                if (elementBelow) {
+                    const $columnEl = $(elementBelow).closest('.board-column');
+
+                    if ($columnEl.length > 0) {
+                        // Remove drag-over from all columns
+                        this.$container.find('.board-column').removeClass('drag-over');
+                        $columnEl.addClass('drag-over');
+
+                        // Show drop indicator
+                        this.showDropIndicatorAtPoint($columnEl, touch.clientY);
+                    } else {
+                        // Remove all drag indicators if not over a column
+                        this.$container.find('.board-column').removeClass('drag-over');
+                        this.cleanupAllDropIndicators();
+                    }
+                }
+            }
+        });
+
+        $noteEl.on("touchend", async (e) => {
+            if (isDragging) {
+                const touch = (e.originalEvent as TouchEvent).changedTouches[0];
+                const elementBelow = document.elementFromPoint(touch.clientX, touch.clientY);
+                if (elementBelow) {
+                    const $columnEl = $(elementBelow).closest('.board-column');
+
+                    if ($columnEl.length > 0) {
+                        const column = $columnEl.attr('data-column');
+                        if (column && this.context.draggedNote && this.context.draggedNoteElement && this.context.draggedBranch) {
+                            await this.handleNoteDrop($columnEl, column);
+                        }
+                    }
+                }
+
+                // Clean up
+                $noteEl.removeClass("dragging");
+                this.context.draggedNote = null;
+                this.context.draggedBranch = null;
+                this.context.draggedNoteElement = null;
+                this.$container.find('.board-column').removeClass('drag-over');
+                this.cleanupAllDropIndicators();
+
+                // Remove drag preview
+                if ($dragPreview) {
+                    $dragPreview.remove();
+                    $dragPreview = null;
+                }
+            }
+            isDragging = false;
+        });
+    }
+
+    private createDragPreview($noteEl: JQuery<HTMLElement>, x: number, y: number): JQuery<HTMLElement> {
+        // Clone the note element for the preview
+        const $preview = $noteEl.clone();
+
+        $preview
+            .addClass('board-drag-preview')
+            .css({
+                position: 'fixed',
+                left: x - ($noteEl.outerWidth() || 0) / 2,
+                top: y - ($noteEl.outerHeight() || 0) / 2,
+                pointerEvents: 'none',
+                zIndex: 10000
+            })
+            .appendTo('body');
+
+        return $preview;
+    }
+
+    private showDropIndicator($columnEl: JQuery<HTMLElement>, e: JQuery.DragOverEvent) {
+        const originalEvent = e.originalEvent as DragEvent;
+        const mouseY = originalEvent.clientY;
+        this.showDropIndicatorAtY($columnEl, mouseY);
+    }
+
+    private showDropIndicatorAtPoint($columnEl: JQuery<HTMLElement>, touchY: number) {
+        this.showDropIndicatorAtY($columnEl, touchY);
+    }
+
+    private showDropIndicatorAtY($columnEl: JQuery<HTMLElement>, y: number) {
+        const columnRect = $columnEl[0].getBoundingClientRect();
+        const relativeY = y - columnRect.top;
+
+        // Clean up any existing drop indicators in this column first
+        this.cleanupNoteDropIndicators($columnEl);
+
+        // Create a new drop indicator
+        const $dropIndicator = $("<div>").addClass("board-drop-indicator");
+
+        // Find the best position to insert the note
+        const $notes = this.context.draggedNoteElement ?
+            $columnEl.find(".board-note").not(this.context.draggedNoteElement) :
+            $columnEl.find(".board-note");
+        let insertAfterElement: HTMLElement | null = null;
+
+        $notes.each((_, noteEl) => {
+            const noteRect = noteEl.getBoundingClientRect();
+            const noteMiddle = noteRect.top + noteRect.height / 2 - columnRect.top;
+
+            if (relativeY > noteMiddle) {
+                insertAfterElement = noteEl;
+            }
+        });
+
+        // Position the drop indicator
+        if (insertAfterElement) {
+            $(insertAfterElement).after($dropIndicator);
+        } else {
+            // Insert at the beginning (after the header)
+            const $header = $columnEl.find("h3");
+            $header.after($dropIndicator);
+        }
+
+        $dropIndicator.addClass("show");
+    }
+
+    private async handleNoteDrop($columnEl: JQuery<HTMLElement>, column: string) {
+        const draggedNoteElement = this.context.draggedNoteElement;
+        const draggedNote = this.context.draggedNote;
+        const draggedBranch = this.context.draggedBranch;
+
+        if (draggedNote && draggedNoteElement && draggedBranch) {
+            const currentColumn = draggedNoteElement.attr("data-current-column");
+
+            // Capture drop indicator position BEFORE removing it
+            const dropIndicator = $columnEl.find(".board-drop-indicator.show");
+            let targetBranchId: string | null = null;
+            let moveType: "before" | "after" | null = null;
+
+            if (dropIndicator.length > 0) {
+                // Find the note element that the drop indicator is positioned relative to
+                const nextNote = dropIndicator.next(".board-note");
+                const prevNote = dropIndicator.prev(".board-note");
+
+                if (nextNote.length > 0) {
+                    targetBranchId = nextNote.attr("data-branch-id") || null;
+                    moveType = "before";
+                } else if (prevNote.length > 0) {
+                    targetBranchId = prevNote.attr("data-branch-id") || null;
+                    moveType = "after";
+                }
+            }
+
+            try {
+                // Handle column change
+                if (currentColumn !== column) {
+                    await this.api.changeColumn(draggedNote.noteId, column);
+                }
+
+                // Handle position change (works for both same column and different column moves)
+                if (targetBranchId && moveType) {
+                    if (moveType === "before") {
+                        await branchService.moveBeforeBranch([draggedBranch.branchId], targetBranchId);
+                    } else if (moveType === "after") {
+                        await branchService.moveAfterBranch([draggedBranch.branchId], targetBranchId);
+                    }
+                }
+
+                // Update the data attributes
+                draggedNoteElement.attr("data-current-column", column);
+            } catch (error) {
+                console.error("Failed to update note position:", error);
+            } finally {
+                // Always clean up drop indicators after drop operation
+                this.cleanupAllDropIndicators();
+            }
+        }
+    }
+
+    private cleanupAllDropIndicators() {
+        // Remove all drop indicators from the DOM to prevent layout issues
+        this.$container.find(".board-drop-indicator").remove();
+    }
+
+    private cleanupNoteDropIndicators($columnEl: JQuery<HTMLElement>) {
+        // Remove note drop indicators from a specific column
+        $columnEl.find(".board-drop-indicator").remove();
+    }
+}

apps/client/src/widgets/view_widgets/geo_view/index.ts

@@ -1,6 +1,6 @@
 import ViewMode, { ViewModeArgs } from "../view_mode.js";
 import L from "leaflet";
-import type { GPX, LatLng, LeafletMouseEvent, Map, Marker } from "leaflet";
+import type { GPX, LatLng, Layer, LeafletMouseEvent, Map, Marker } from "leaflet";
 import "leaflet/dist/leaflet.css";
 import SpacedUpdate from "../../../services/spaced_update.js";
 import { t } from "../../../services/i18n.js";
@@ -10,6 +10,8 @@ import toast from "../../../services/toast.js";
 import { CommandListenerData, EventData } from "../../../components/app_context.js";
 import { createNewNote, moveMarker, setupDragging } from "./editing.js";
 import { openMapContextMenu } from "./context_menu.js";
+import attributes from "../../../services/attributes.js";
+import { DEFAULT_MAP_LAYER_NAME, MAP_LAYERS } from "./map_layer.js";
 
 const TPL = /*html*/`
 <div class="geo-view">
@@ -83,6 +85,11 @@ const TPL = /*html*/`
             white-space: no-wrap;
             overflow: hidden;
         }
+
+        .geo-map-container.dark .leaflet-div-icon .title-label {
+            color: white;
+            text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
+        }
     </style>
 
     <div class="geo-map-container"></div>
@@ -138,10 +145,32 @@ export default class GeoView extends ViewMode<MapData> {
         const map = L.map(this.$container[0], {
             worldCopyJump: true
         });
-        L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-            detectRetina: true
-        }).addTo(map);
+
+        const layerName = this.parentNote.getLabelValue("map:style") ?? DEFAULT_MAP_LAYER_NAME;
+        let layer: Layer;
+        const layerData = MAP_LAYERS[layerName];
+
+        if (layerData.type === "vector") {
+            const style = (typeof layerData.style === "string" ? layerData.style : await layerData.style());
+            await import("@maplibre/maplibre-gl-leaflet");
+
+            layer = L.maplibreGL({
+                style: style as any
+            });
+        } else {
+            layer = L.tileLayer(layerData.url, {
+                attribution: layerData.attribution,
+                detectRetina: true
+            });
+        }
+
+        if (this.parentNote.hasLabel("map:scale")) {
+            L.control.scale().addTo(map);
+        }
+
+        this.$container.toggleClass("dark", !!layerData.isDarkTheme);
+
+        layer.addTo(map);
 
         this.map = map;
 
@@ -261,9 +290,14 @@ export default class GeoView extends ViewMode<MapData> {
         // If any of note has its location attribute changed.
         // TODO: Should probably filter by parent here as well.
         const attributeRows = loadResults.getAttributeRows();
-        if (attributeRows.find((at) => [LOCATION_ATTRIBUTE, "color"].includes(at.name ?? ""))) {
+        if (attributeRows.find((at) => [LOCATION_ATTRIBUTE, "color", "iconClass"].includes(at.name ?? ""))) {
             this.#reloadMarkers();
         }
+
+        // Full reload if map layer is changed.
+        if (loadResults.getAttributeRows().some(attr => (attr.name?.startsWith("map:") && attributes.isAffecting(attr, this.parentNote)))) {
+            return true;
+        }
     }
 
     async geoMapCreateChildNoteEvent({ ntxId }: EventData<"geoMapCreateChildNote">) {
@@ -330,3 +364,4 @@ export default class GeoView extends ViewMode<MapData> {
     }
 
 }
+

apps/client/src/widgets/view_widgets/geo_view/map_layer.ts

@@ -0,0 +1,53 @@
+export interface MapLayer {
+    name: string;
+    isDarkTheme?: boolean;
+}
+
+interface VectorLayer extends MapLayer {
+    type: "vector";
+    style: string | (() => Promise<{}>)
+}
+
+interface RasterLayer extends MapLayer {
+    type: "raster";
+    url: string;
+    attribution: string;
+}
+
+export const MAP_LAYERS: Record<string, VectorLayer | RasterLayer> = {
+    "openstreetmap": {
+        name: "OpenStreetMap",
+        type: "raster",
+        url: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    },
+    "versatiles-colorful": {
+        name: "VersaTiles Colorful",
+        type: "vector",
+        style: async () => (await import("./styles/colorful/en.json")).default
+    },
+    "versatiles-eclipse": {
+        name: "VersaTiles Eclipse",
+        type: "vector",
+        style: async () => (await import("./styles/eclipse/en.json")).default,
+        isDarkTheme: true
+    },
+    "versatiles-graybeard": {
+        name: "VersaTiles Graybeard",
+        type: "vector",
+        style: async () => (await import("./styles/graybeard/en.json")).default
+    },
+    "versatiles-neutrino": {
+        name: "VersaTiles Neutrino",
+        type: "vector",
+        style: async () => (await import("./styles/neutrino/en.json")).default
+    },
+    "versatiles-shadow": {
+        name: "VersaTiles Shadow",
+        type: "vector",
+        style: async () => (await import("./styles/shadow/en.json")).default,
+        isDarkTheme: true
+    }
+};
+
+export const DEFAULT_MAP_LAYER_NAME: keyof typeof MAP_LAYERS = "versatiles-colorful";

apps/client/src/widgets/view_widgets/list_or_grid_view.ts

@@ -351,7 +351,8 @@ class ListOrGridView extends ViewMode<{}> {
 
         try {
             const { $renderedContent, type } = await contentRenderer.getRenderedContent(note, {
-                trim: this.viewType === "grid" // for grid only short content is needed
+                trim: this.viewType === "grid", // for grid only short content is needed
+                showOcrText: this.parentNote.type === "search" // show OCR text only in search results
             });
 
             if (this.highlightRegex) {

apps/client/src/widgets/view_widgets/table_view/bulk_actions.ts

@@ -2,30 +2,30 @@ import { executeBulkActions } from "../../../services/bulk_action.js";
 
 export async function renameColumn(parentNoteId: string, type: "label" | "relation", originalName: string, newName: string) {
     if (type === "label") {
-        return executeBulkActions(parentNoteId, [{
+        return executeBulkActions([parentNoteId], [{
             name: "renameLabel",
             oldLabelName: originalName,
             newLabelName: newName
-        }]);
+        }], true);
     } else {
-        return executeBulkActions(parentNoteId, [{
+        return executeBulkActions([parentNoteId], [{
             name: "renameRelation",
             oldRelationName: originalName,
             newRelationName: newName
-        }]);
+        }], true);
     }
 }
 
 export async function deleteColumn(parentNoteId: string, type: "label" | "relation", columnName: string) {
     if (type === "label") {
-        return executeBulkActions(parentNoteId, [{
+        return executeBulkActions([parentNoteId], [{
             name: "deleteLabel",
             labelName: columnName
-        }]);
+        }], true);
     } else {
-        return executeBulkActions(parentNoteId, [{
+        return executeBulkActions([parentNoteId], [{
             name: "deleteRelation",
             relationName: columnName
-        }]);
+        }], true);
     }
 }

apps/client/src/widgets/view_widgets/table_view/columns.ts

@@ -35,6 +35,15 @@ const labelTypeMappings: Record<ColumnType, Partial<ColumnDefinition>> = {
         formatter: "link",
         editor: "input"
     },
+    color: {
+        editor: "input",
+        formatter: "color",
+        editorParams: {
+            elementAttributes: {
+                type: "color"
+            }
+        }
+    },
     relation: {
         editor: RelationEditor,
         formatter: NoteFormatter

apps/client/src/widgets/widget_utils.ts

@@ -0,0 +1,18 @@
+import utils from "../services/utils.js";
+
+/**
+ * Enables scrolling of a container horizontally using the mouse wheel, instead of having to use the scrollbar or keep Shift pressed.
+ *
+ * @param $container the jQuery-wrapped container element to enable horizontal scrolling for.
+ */
+export function setupHorizontalScrollViaWheel($container: JQuery<HTMLElement>) {
+    $container.on("wheel", (event) => {
+        const wheelEvent = event.originalEvent as WheelEvent;
+        if (utils.isCtrlKey(event) || event.altKey || event.shiftKey) {
+            return;
+        }
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        event.currentTarget.scrollLeft += wheelEvent.deltaY + wheelEvent.deltaX;
+    });
+}

apps/client/tsconfig.app.json

@@ -32,7 +32,8 @@
     "eslint.config.mjs"
   ],
   "include": [
-    "src/**/*.ts"
+    "src/**/*.ts",
+    "src/**/*.json"
   ],
   "references": [
     {

apps/desktop-e2e/package.json

@@ -18,7 +18,7 @@
     }
   },
   "devDependencies": {
-    "dotenv": "17.2.0",
-    "electron": "37.2.3"
+    "dotenv": "17.2.1",
+    "electron": "37.2.4"
   }
 }

apps/desktop/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/desktop",
-  "version": "0.97.0",
+  "version": "0.97.1",
   "description": "Build your personal knowledge base with Trilium Notes",
   "private": true,
   "main": "main.cjs",
@@ -17,15 +17,15 @@
     "@types/electron-squirrel-startup": "1.0.2",
     "@triliumnext/server": "workspace:*",
     "copy-webpack-plugin": "13.0.0",
-    "electron": "37.2.3",
-    "@electron-forge/cli": "7.8.1",
-    "@electron-forge/maker-deb": "7.8.1",
-    "@electron-forge/maker-dmg": "7.8.1",
-    "@electron-forge/maker-flatpak": "7.8.1",
-    "@electron-forge/maker-rpm": "7.8.1",
-    "@electron-forge/maker-squirrel": "7.8.1",
-    "@electron-forge/maker-zip": "7.8.1",
-    "@electron-forge/plugin-auto-unpack-natives": "7.8.1",
+    "electron": "37.2.4",
+    "@electron-forge/cli": "7.8.2",
+    "@electron-forge/maker-deb": "7.8.2",
+    "@electron-forge/maker-dmg": "7.8.2",
+    "@electron-forge/maker-flatpak": "7.8.2",
+    "@electron-forge/maker-rpm": "7.8.2",
+    "@electron-forge/maker-squirrel": "7.8.2",
+    "@electron-forge/maker-zip": "7.8.2",
+    "@electron-forge/plugin-auto-unpack-natives": "7.8.2",
     "prebuild-install": "^7.1.1"
   },
   "config": {

apps/edit-docs/package.json

@@ -12,7 +12,7 @@
     "@triliumnext/desktop": "workspace:*",
     "@types/fs-extra": "11.0.4",
     "copy-webpack-plugin": "13.0.0",
-    "electron": "37.2.3",
+    "electron": "37.2.4",
     "fs-extra": "11.3.0"
   },
   "nx": {

apps/server-e2e/package.json

@@ -17,6 +17,6 @@
     }
   },
   "devDependencies": {
-    "dotenv": "17.2.0"
+    "dotenv": "17.2.1"
   }
 }

apps/server-e2e/src/layout/tab_bar.spec.ts

@@ -72,6 +72,10 @@ test("Tabs are restored in right order", async ({ page, context }) => {
 
     // Select the mid one.
     await app.getTab(1).click();
+    await expect(app.noteTreeActiveNote).toContainText("Text notes");
+    await expect(app.getTab(0)).toContainText("Code notes");
+    await expect(app.getTab(1)).toContainText("Text notes");
+    await expect(app.getTab(2)).toContainText("Mermaid");
 
     // Refresh the page and check the order.
     await app.goto( { preserveTabs: true });

apps/server-e2e/src/support/app.ts

@@ -65,9 +65,12 @@ export default class App {
     async goToNoteInNewTab(noteTitle: string) {
         const autocomplete = this.currentNoteSplit.locator(".note-autocomplete");
         await autocomplete.fill(noteTitle);
-        await expect(this.currentNoteSplit.locator(".note-detail-empty-results")).toContainText(noteTitle);
-        await autocomplete.press("ArrowDown");
-        await autocomplete.press("Enter");
+
+        const resultsSelector = this.currentNoteSplit.locator(".note-detail-empty-results");
+        await expect(resultsSelector).toContainText(noteTitle);
+        await resultsSelector.locator(".aa-suggestion", { hasText: noteTitle })
+            .nth(1) // Select the second one, as the first one is "Create a new note"
+            .click();
     }
 
     async goToSettings() {

apps/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/server",
-  "version": "0.97.0",
+  "version": "0.97.1",
   "description": "The server-side component of TriliumNext, which exposes the client via the web, allows for sync and provides a REST API for both internal and external use.",
   "private": true,
   "dependencies": {
@@ -16,7 +16,7 @@
     "@types/debounce": "1.2.4",
     "@types/ejs": "3.1.5",
     "@types/escape-html": "1.0.4",
-    "@types/express-http-proxy": "1.6.6",
+    "@types/express-http-proxy": "1.6.7",
     "@types/express-session": "1.18.2",
     "@types/fs-extra": "11.0.4",
     "@types/html": "1.0.4",
@@ -34,22 +34,23 @@
     "@types/stream-throttle": "0.1.4",
     "@types/supertest": "6.0.3",
     "@types/swagger-ui-express": "4.1.8",
+    "@types/tesseract.js": "2.0.0",
     "@types/tmp": "0.2.6",
     "@types/turndown": "5.0.5",
     "@types/ws": "8.18.1",
     "@types/xml2js": "0.4.14",
     "express-http-proxy": "2.1.1",
-    "@anthropic-ai/sdk": "0.56.0",
+    "@anthropic-ai/sdk": "0.57.0",
     "@braintree/sanitize-url": "7.1.1",
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/express-partial-content": "workspace:*",
     "@triliumnext/turndown-plugin-gfm": "workspace:*",
     "archiver": "7.0.1",
     "async-mutex": "0.5.0",
-    "axios": "1.10.0",
+    "axios": "1.11.0",
     "bindings": "1.5.0",
     "chardet": "2.1.0",
-    "cheerio": "1.1.0",
+    "cheerio": "1.1.2",
     "chokidar": "4.0.3",
     "cls-hooked": "4.2.2",
     "compression": "1.8.1",
@@ -59,7 +60,7 @@
     "debounce": "2.2.0",
     "debug": "4.4.1",
     "ejs": "3.1.10",
-    "electron": "37.2.3",
+    "electron": "37.2.4",
     "electron-debug": "4.1.0",
     "electron-window-state": "5.0.3",
     "escape-html": "1.0.3",
@@ -88,7 +89,7 @@
     "multer": "2.0.2",
     "normalize-strings": "1.1.1",
     "ollama": "0.5.16",
-    "openai": "5.10.1",
+    "openai": "5.10.2",
     "rand-token": "1.0.1",
     "safe-compare": "1.1.4",
     "sanitize-filename": "1.6.3",
@@ -98,16 +99,20 @@
     "stream-throttle": "0.1.3",
     "strip-bom": "5.0.0",
     "striptags": "3.2.0",
-    "supertest": "7.1.3",
+    "supertest": "7.1.4",
     "swagger-jsdoc": "6.2.8",
     "swagger-ui-express": "5.0.1",
     "time2fa": "^1.3.0",
+    "tesseract.js": "6.0.1",
     "tmp": "0.2.3",
     "turndown": "7.2.0",
     "unescape": "1.0.1",
     "ws": "8.18.3",
     "xml2js": "0.6.2",
-    "yauzl": "3.2.0"
+    "yauzl": "3.2.0",
+    "officeparser": "5.2.0",
+    "pdf-parse": "1.1.1",
+    "sharp": "0.34.3"
   },
   "nx": {
     "name": "server",
@@ -354,6 +359,9 @@
           "build"
         ],
         "command": "vitest --config {projectRoot}/vitest.build.config.mts"
+      },
+      "circular-deps": {
+        "command": "pnpx dpdm -T {projectRoot}/src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
       }
     }
   },