chore(react): add backup

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

@@ -8,7 +8,7 @@ inputs:
 runs:
   using: composite
   steps:
-  - uses: pnpm/action-setup@v5
+  - uses: pnpm/action-setup@v4
   - name: Set up node & dependencies
     uses: actions/setup-node@v6
     with:

.github/actions/report-size/action.yml

@@ -69,7 +69,7 @@ runs:
 
     # Post github action comment
     - name: Post comment
-      uses: marocchino/sticky-pull-request-comment@v3
+      uses: marocchino/sticky-pull-request-comment@v2
       if: ${{ steps.bundleSize.outputs.hasDifferences == 'true' }} # post only in case of changes
       with:
         number: ${{ github.event.pull_request.number }}

.github/workflows/deploy-docs.yml

@@ -45,7 +45,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Setup pnpm
-        uses: pnpm/action-setup@v5
+        uses: pnpm/action-setup@v4
 
       - name: Setup Node.js
         uses: actions/setup-node@v6

.github/workflows/dev.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -40,32 +40,11 @@ jobs:
       - name: Run the client-side tests
         run: pnpm run --filter=client test
 
-      - name: Upload client test report
-        uses: actions/upload-artifact@v7
-        if: always()
-        with:
-          name: client-test-report
-          path: apps/client/test-output/vitest/html/
-          retention-days: 30
-
       - name: Run the server-side tests
         run: pnpm run --filter=server test
 
-      - name: Upload server test report
-        uses: actions/upload-artifact@v7
-        if: always()
-        with:
-          name: server-test-report
-          path: apps/server/test-output/vitest/html/
-          retention-days: 30
-
-      - name: Run CKEditor e2e tests
-        run: |
-          pnpm run --filter=ckeditor5-mermaid test
-          pnpm run --filter=ckeditor5-math test
-
       - name: Run the rest of the tests
-        run: pnpm run --filter=\!client --filter=\!server --filter=\!ckeditor5-mermaid --filter=\!ckeditor5-math test
+        run: pnpm run --filter=\!client --filter=\!server test"
 
   build_docker:
     name: Build Docker image
@@ -74,7 +53,7 @@ jobs:
       - test_dev
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
       - name: Update build info
@@ -89,8 +68,8 @@ jobs:
           key: ${{ secrets.RELATIVE_CI_CLIENT_KEY }}
       - name: Trigger server build
         run: pnpm run server:build
-      - uses: docker/setup-buildx-action@v4
-      - uses: docker/build-push-action@v7
+      - uses: docker/setup-buildx-action@v3
+      - uses: docker/build-push-action@v6
         with:
           context: apps/server
           cache-from: type=gha
@@ -109,7 +88,7 @@ jobs:
       - name: Checkout the repository
         uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
@@ -124,10 +103,10 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3
 
       - name: Build and export to Docker
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}

.github/workflows/i18n.yml

@@ -18,7 +18,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:

.github/workflows/main-docker.yml

@@ -40,9 +40,9 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3
 
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -59,7 +59,7 @@ jobs:
         run: pnpm run server:build
 
       - name: Build and export to Docker
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}
@@ -142,7 +142,7 @@ jobs:
 
       - name: Checkout repository
         uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -164,7 +164,7 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
         with:
           images: ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |
@@ -175,13 +175,13 @@ jobs:
             latest=false
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v4
+        uses: docker/setup-qemu-action@v3
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3
 
       - name: Login to GHCR
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.GHCR_REGISTRY }}
           username: ${{ github.actor }}
@@ -189,7 +189,7 @@ jobs:
 
       - name: Build and push by digest
         id: build
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
         with:
           context: apps/server
           file: apps/server/${{ matrix.dockerfile }}
@@ -229,17 +229,17 @@ jobs:
         run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV
 
       - name: Set up crane
-        uses: imjasonh/setup-crane@v0.5
+        uses: imjasonh/setup-crane@v0.4
 
       - name: Login to GHCR
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.GHCR_REGISTRY }}
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Login to DockerHub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
         with:
           registry: ${{ env.DOCKERHUB_REGISTRY }}
           username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -247,7 +247,7 @@ jobs:
 
       - name: Docker meta
         id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
         with:
           images: ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
           tags: |

.github/workflows/nightly.yml

@@ -61,7 +61,7 @@ jobs:
     runs-on: ${{ matrix.os.image }}
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -91,7 +91,7 @@ jobs:
           GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.6.1
+        uses: softprops/action-gh-release@v2.5.0
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false
@@ -132,7 +132,7 @@ jobs:
           arch: ${{ matrix.arch }}
 
       - name: Publish release
-        uses: softprops/action-gh-release@v2.6.1
+        uses: softprops/action-gh-release@v2.5.0
         if: ${{ github.event_name != 'pull_request' }}
         with:
           make_latest: false

.github/workflows/playwright.yml

@@ -38,7 +38,7 @@ jobs:
           filter: tree:0
           fetch-depth: 0
 
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - uses: actions/setup-node@v6
         with:
           node-version: 24

.github/workflows/release.yml

@@ -17,7 +17,7 @@ jobs:
     steps:
       - uses: actions/checkout@v6
 
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -66,7 +66,7 @@ jobs:
     runs-on: ${{ matrix.os.image }}
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -150,7 +150,7 @@ jobs:
           path: upload
 
       - name: Publish stable release
-        uses: softprops/action-gh-release@v2.6.1
+        uses: softprops/action-gh-release@v2.5.0
         with:
           draft: false
           body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md

.github/workflows/web-clipper.yml

@@ -32,7 +32,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:
@@ -58,7 +58,7 @@ jobs:
           compression-level: 0
 
       - name: Release web clipper extension
-        uses: softprops/action-gh-release@v2.6.1
+        uses: softprops/action-gh-release@v2.5.0
         if: ${{ startsWith(github.ref, 'refs/tags/web-clipper-v') }}
         with:
           draft: false

.github/workflows/website.yml

@@ -26,7 +26,7 @@ jobs:
 
     steps:
       - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
       - name: Set up node & dependencies
         uses: actions/setup-node@v6
         with:

.gitignore

@@ -46,6 +46,7 @@ upload
 
 /.direnv
 /result
+.svelte-kit
 
 # docs
 site/

.nvmrc

@@ -1 +1 @@
-24.14.1
+24.14.0

apps/build-docs/package.json

@@ -14,15 +14,15 @@
   "keywords": [],
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.33.0",
+  "packageManager": "pnpm@10.30.3",
   "devDependencies": {
-    "@redocly/cli": "2.25.1",
+    "@redocly/cli": "2.20.2",
     "archiver": "7.0.1",
     "fs-extra": "11.3.4",
     "js-yaml": "4.1.1",
     "react": "19.2.4",
     "react-dom": "19.2.4",
-    "typedoc": "0.28.18",
+    "typedoc": "0.28.17",
     "typedoc-plugin-missing-exports": "4.1.2"
   }
 }

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.102.1",
+  "version": "0.102.0",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -16,7 +16,6 @@
     "circular-deps": "dpdm -T src/**/*.ts --tree=false --warning=false --skip-dynamic-imports=circular"
   },
   "dependencies": {
-    "@algolia/autocomplete-js": "1.19.6",
     "@excalidraw/excalidraw": "0.18.0",
     "@fullcalendar/core": "6.1.20",
     "@fullcalendar/daygrid": "6.1.20",
@@ -26,54 +25,50 @@
     "@fullcalendar/rrule": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
-    "@mermaid-js/layout-elk": "0.2.1",
+    "@mermaid-js/layout-elk": "0.2.0",
     "@mind-elixir/node-menu": "5.0.1",
     "@popperjs/core": "2.11.8",
-    "@preact/signals": "2.8.2",
+    "@preact/signals": "2.8.1",
     "@triliumnext/ckeditor5": "workspace:*",
     "@triliumnext/codemirror": "workspace:*",
     "@triliumnext/commons": "workspace:*",
     "@triliumnext/highlightjs": "workspace:*",
     "@triliumnext/share-theme": "workspace:*",
     "@triliumnext/split.js": "workspace:*",
-    "@univerjs/preset-sheets-conditional-formatting": "0.18.0",
-    "@univerjs/preset-sheets-core": "0.18.0",
-    "@univerjs/preset-sheets-data-validation": "0.18.0",
-    "@univerjs/preset-sheets-filter": "0.18.0",
-    "@univerjs/preset-sheets-find-replace": "0.18.0",
-    "@univerjs/preset-sheets-note": "0.18.0",
-    "@univerjs/preset-sheets-sort": "0.18.0",
-    "@univerjs/presets": "0.18.0",
-    "@zumer/snapdom": "2.5.0",
+    "@univerjs/preset-sheets-core": "0.16.1",
+    "@univerjs/presets": "0.16.1",
+    "@zumer/snapdom": "2.0.2",
+    "autocomplete.js": "0.38.1",
     "bootstrap": "5.3.8",
     "boxicons": "2.1.4",
     "clsx": "2.1.1",
     "color": "5.0.3",
     "debounce": "3.0.0",
     "draggabilly": "3.0.0",
-    "force-graph": "1.51.2",
+    "force-graph": "1.51.1",
     "globals": "17.4.0",
-    "i18next": "25.10.10",
+    "i18next": "25.8.13",
     "i18next-http-backend": "3.0.2",
     "jquery": "4.0.0",
     "jquery.fancytree": "2.38.5",
     "jsplumb": "2.15.6",
-    "katex": "0.16.43",
+    "katex": "0.16.33",
+    "knockout": "3.5.1",
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "17.0.5",
-    "mermaid": "11.13.0",
-    "mind-elixir": "5.9.3",
+    "marked": "17.0.3",
+    "mermaid": "11.12.3",
+    "mind-elixir": "5.9.1",
     "normalize.css": "8.0.1",
-    "panzoom": "9.4.4",
-    "preact": "10.29.0",
-    "react-i18next": "16.6.6",
+    "panzoom": "9.4.3",
+    "preact": "10.28.4",
+    "react-i18next": "16.5.4",
     "react-window": "2.2.7",
-    "reveal.js": "6.0.0",
+    "reveal.js": "5.2.1",
     "rrule": "2.8.1",
     "svg-pan-zoom": "3.6.2",
-    "tabulator-tables": "6.4.0",
+    "tabulator-tables": "6.3.1",
     "vanilla-js-wheel-zoom": "9.0.4"
   },
   "devDependencies": {
@@ -84,11 +79,12 @@
     "@types/leaflet": "1.9.21",
     "@types/leaflet-gpx": "1.3.8",
     "@types/mark.js": "8.11.12",
+    "@types/reveal.js": "5.2.2",
     "@types/tabulator-tables": "6.3.1",
     "copy-webpack-plugin": "14.0.0",
-    "happy-dom": "20.8.9",
-    "lightningcss": "1.32.0",
+    "happy-dom": "20.8.3",
+    "lightningcss": "1.31.1",
     "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.4.0"
+    "vite-plugin-static-copy": "3.2.0"
   }
-}
+}

apps/client/src/components/entrypoints.ts

@@ -1,6 +1,5 @@
 import { CreateChildrenResponse, SqlExecuteResponse } from "@triliumnext/commons";
 
-import { closeAllHeadlessAutocompletes } from "../services/autocomplete_core.js";
 import bundleService from "../services/bundle.js";
 import dateNoteService from "../services/date_notes.js";
 import froca from "../services/froca.js";
@@ -198,7 +197,7 @@ export default class Entrypoints extends Component {
 
     hideAllPopups() {
         if (utils.isDesktop()) {
-            closeAllHeadlessAutocompletes();
+            $(".aa-input").autocomplete("close");
         }
     }
 

apps/client/src/components/note_context.ts

@@ -381,10 +381,6 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">
 
         // Collections must always display a note list, even if no children.
         if (note.type === "book") {
-            if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
-                return false;
-            }
-
             const viewType = note.getLabelValue("viewType") ?? "grid";
             if (!["list", "grid"].includes(viewType)) {
                 return true;

apps/client/src/components/tab_manager.ts

@@ -1,16 +1,15 @@
-import type FNote from "../entities/fnote.js";
-import { closeAllHeadlessAutocompletes } from "../services/autocomplete_core.js";
-import froca from "../services/froca.js";
-import linkService from "../services/link.js";
-import options from "../services/options.js";
-import server from "../services/server.js";
-import SpacedUpdate from "../services/spaced_update.js";
-import treeService from "../services/tree.js";
-import Mutex from "../utils/mutex.js";
-import type { EventData } from "./app_context.js";
-import appContext from "./app_context.js";
 import Component from "./component.js";
+import SpacedUpdate from "../services/spaced_update.js";
+import server from "../services/server.js";
+import options from "../services/options.js";
+import froca from "../services/froca.js";
+import treeService from "../services/tree.js";
 import NoteContext from "./note_context.js";
+import appContext from "./app_context.js";
+import Mutex from "../utils/mutex.js";
+import linkService from "../services/link.js";
+import type { EventData } from "./app_context.js";
+import type FNote from "../entities/fnote.js";
 
 interface TabState {
     contexts: NoteContext[];
@@ -430,7 +429,10 @@ export default class TabManager extends Component {
             }
 
             // close dangling autocompletes after closing the tab
-            closeAllHeadlessAutocompletes();
+            const $autocompleteEl = $(".aa-input");
+            if ("autocomplete" in $autocompleteEl) {
+                $autocompleteEl.autocomplete("close");
+            }
 
             // close dangling tooltips
             $("body > div.tooltip").remove();

apps/client/src/desktop.ts

@@ -1,3 +1,5 @@
+import "autocomplete.js/index_jquery.js";
+
 import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
 

apps/client/src/index.ts

@@ -16,6 +16,17 @@ async function initJQuery() {
     const $ = (await import("jquery")).default;
     window.$ = $;
     window.jQuery = $;
+
+    // Polyfill removed jQuery methods for autocomplete.js compatibility
+    ($ as any).isArray = Array.isArray;
+    ($ as any).isFunction = function(obj: any) { return typeof obj === 'function'; };
+    ($ as any).isPlainObject = function(obj: any) {
+        if (obj == null || typeof obj !== 'object') { return false; }
+        const proto = Object.getPrototypeOf(obj);
+        if (proto === null) { return true; }
+        const Ctor = Object.prototype.hasOwnProperty.call(proto, 'constructor') && proto.constructor;
+        return typeof Ctor === 'function' && Ctor === Object;
+    };
 }
 
 async function setupGlob() {

apps/client/src/layouts/desktop_layout.tsx

@@ -3,54 +3,29 @@ import type { WidgetsByParent } from "../services/bundle.js";
 import { isExperimentalFeatureEnabled } from "../services/experimental_features.js";
 import options from "../services/options.js";
 import utils from "../services/utils.js";
-import ApiLog from "../widgets/api_log.jsx";
-import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
-import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
 import GlobalMenu from "../widgets/buttons/global_menu.jsx";
 import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
-import MovePaneButton from "../widgets/buttons/move_pane_button.js";
 import RightPaneToggle from "../widgets/buttons/right_pane_toggle.jsx";
 import CloseZenModeButton from "../widgets/close_zen_button.jsx";
-import NoteList from "../widgets/collections/NoteList.jsx";
-import ContentHeader from "../widgets/containers/content_header.js";
 import FlexContainer from "../widgets/containers/flex_container.js";
 import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import RightPaneContainer from "../widgets/containers/right_pane_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
 import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
 import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
-import FindWidget from "../widgets/find.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
 import HighlightsListWidget from "../widgets/highlights_list.js";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
-import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
-import InlineTitle from "../widgets/layout/InlineTitle.jsx";
-import NoteBadges from "../widgets/layout/NoteBadges.jsx";
-import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
 import StatusBar from "../widgets/layout/StatusBar.jsx";
-import NoteIconWidget from "../widgets/note_icon.jsx";
-import NoteTitleWidget from "../widgets/note_title.jsx";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import NoteDetail from "../widgets/NoteDetail.jsx";
-import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
+import NoteWrapperWidget from "../widgets/NoteWrapper.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
-import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
 import { FixedFormattingToolbar } from "../widgets/ribbon/FormattingToolbar.jsx";
-import NoteActions from "../widgets/ribbon/NoteActions.jsx";
-import Ribbon from "../widgets/ribbon/Ribbon.jsx";
-import ScrollPadding from "../widgets/scroll_padding.js";
-import SearchResult from "../widgets/search_result.jsx";
-import SharedInfo from "../widgets/shared_info.jsx";
 import RightPanelContainer from "../widgets/sidebar/RightPanelContainer.jsx";
 import TabRowWidget from "../widgets/tab_row.js";
 import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
 import TocWidget from "../widgets/toc.js";
-import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
 import { applyModals } from "./layout_commons.js";
 
 export default class DesktopLayout {
@@ -133,44 +108,7 @@ export default class DesktopLayout {
                                             .filling()
                                             .collapsible()
                                             .id("center-pane")
-                                            .child(
-                                                new SplitNoteContainer(() =>
-                                                    new NoteWrapperWidget()
-                                                        .child(new FlexContainer("row")
-                                                            .class("title-row note-split-title")
-                                                            .cssBlock(".title-row > * { margin: 5px; }")
-                                                            .child(<NoteIconWidget />)
-                                                            .child(<NoteTitleWidget />)
-                                                            .optChild(isNewLayout, <NoteBadges />)
-                                                            .child(<SpacerWidget baseSize={0} growthFactor={1} />)
-                                                            .optChild(!isNewLayout, <MovePaneButton direction="left" />)
-                                                            .optChild(!isNewLayout, <MovePaneButton direction="right" />)
-                                                            .optChild(!isNewLayout, <ClosePaneButton />)
-                                                            .optChild(!isNewLayout, <CreatePaneButton />)
-                                                            .optChild(isNewLayout, <NoteActions />))
-                                                        .optChild(!isNewLayout, <Ribbon />)
-                                                        .child(new WatchedFileUpdateStatusWidget())
-                                                        .optChild(!isNewLayout, <FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
-                                                        .child(
-                                                            new ScrollingContainer()
-                                                                .filling()
-                                                                .optChild(isNewLayout, <InlineTitle />)
-                                                                .optChild(isNewLayout, <NoteTitleActions />)
-                                                                .optChild(!isNewLayout, new ContentHeader()
-                                                                    .child(<ReadOnlyNoteInfoBar />)
-                                                                    .child(<SharedInfo />)
-                                                                )
-                                                                .optChild(!isNewLayout, <PromotedAttributes />)
-                                                                .child(<NoteDetail />)
-                                                                .child(<NoteList media="screen" />)
-                                                                .child(<SearchResult />)
-                                                                .child(<ScrollPadding />)
-                                                        )
-                                                        .child(<ApiLog />)
-                                                        .child(new FindWidget())
-                                                        .child(...this.customWidgets.get("note-detail-pane"))
-                                                )
-                                            )
+                                            .child(new SplitNoteContainer(() => <NoteWrapperWidget />))
                                             .child(...this.customWidgets.get("center-pane"))
 
                                     )

apps/client/src/layouts/mobile_layout.tsx

@@ -3,29 +3,15 @@ import "./mobile_layout.css";
 import type AppContext from "../components/app_context.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import CloseZenModeButton from "../widgets/close_zen_button.js";
-import NoteList from "../widgets/collections/NoteList.jsx";
 import FlexContainer from "../widgets/containers/flex_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import FindWidget from "../widgets/find.js";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
-import InlineTitle from "../widgets/layout/InlineTitle.jsx";
-import NoteBadges from "../widgets/layout/NoteBadges.jsx";
-import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
-import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
-import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
-import NoteIconWidget from "../widgets/note_icon.jsx";
-import NoteTitleWidget from "../widgets/note_title.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import NoteDetail from "../widgets/NoteDetail.jsx";
+import NoteWrapperWidget from "../widgets/NoteWrapper";
 import QuickSearchWidget from "../widgets/quick_search.js";
-import ScrollPadding from "../widgets/scroll_padding";
-import SearchResult from "../widgets/search_result.jsx";
-import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
 import { applyModals } from "./layout_commons.js";
 
 export default class MobileLayout {
@@ -52,35 +38,7 @@ export default class MobileLayout {
                         new ScreenContainer("detail", "row")
                             .id("detail-container")
                             .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-9")
-                            .child(
-                                new SplitNoteContainer(() =>
-                                    new NoteWrapperWidget()
-                                        .child(
-                                            new FlexContainer("row")
-                                                .class("title-row note-split-title")
-                                                .contentSized()
-                                                .css("align-items", "center")
-                                                .child(<ToggleSidebarButton />)
-                                                .child(<NoteIconWidget />)
-                                                .child(<NoteTitleWidget />)
-                                                .child(<NoteBadges />)
-                                                .child(<MobileDetailMenu />)
-                                        )
-                                        .child(
-                                            new ScrollingContainer()
-                                                .filling()
-                                                .contentSized()
-                                                .child(<InlineTitle />)
-                                                .child(<NoteTitleActions />)
-                                                .child(<NoteDetail />)
-                                                .child(<NoteList media="screen" />)
-                                                .child(<SearchResult />)
-                                                .child(<ScrollPadding />)
-                                        )
-                                        .child(<MobileEditorToolbar />)
-                                        .child(new FindWidget())
-                                )
-                            )
+                            .child(new SplitNoteContainer(() => <NoteWrapperWidget />))
                     )
             )
             .child(

apps/client/src/mobile.ts

@@ -1,3 +1,5 @@
+import "autocomplete.js/index_jquery.js";
+
 import appContext from "./components/app_context.js";
 import glob from "./services/glob.js";
 import noteAutocompleteService from "./services/note_autocomplete.js";

apps/client/src/runtime.ts

@@ -8,6 +8,17 @@ async function loadBootstrap() {
     }
 }
 
+// Polyfill removed jQuery methods for autocomplete.js compatibility
+($ as any).isArray = Array.isArray;
+($ as any).isFunction = function(obj: any) { return typeof obj === 'function'; };
+($ as any).isPlainObject = function(obj: any) {
+    if (obj == null || typeof obj !== 'object') { return false; }
+    const proto = Object.getPrototypeOf(obj);
+    if (proto === null) { return true; }
+    const Ctor = Object.prototype.hasOwnProperty.call(proto, 'constructor') && proto.constructor;
+    return typeof Ctor === 'function' && Ctor === Object;
+};
+
 (window as any).$ = $;
 (window as any).jQuery = $;
 await loadBootstrap();

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

@@ -1,47 +0,0 @@
-import { describe, expect, it } from "vitest";
-
-import { shouldAutocompleteHandleEnterKey } from "./attribute_autocomplete.js";
-
-describe("attribute autocomplete enter handling", () => {
-    it("delegates plain Enter when the panel is open and an item is active", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "Enter", ctrlKey: false, metaKey: false },
-            { isPanelOpen: true, hasActiveItem: true }
-        )).toBe(true);
-    });
-
-    it("does not delegate plain Enter when there is no active suggestion", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "Enter", ctrlKey: false, metaKey: false },
-            { isPanelOpen: true, hasActiveItem: false }
-        )).toBe(false);
-    });
-
-    it("does not delegate plain Enter when the panel is closed", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "Enter", ctrlKey: false, metaKey: false },
-            { isPanelOpen: false, hasActiveItem: false }
-        )).toBe(false);
-    });
-
-    it("does not delegate Ctrl+Enter even when an item is active", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "Enter", ctrlKey: true, metaKey: false },
-            { isPanelOpen: true, hasActiveItem: true }
-        )).toBe(false);
-    });
-
-    it("does not delegate Cmd+Enter even when an item is active", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "Enter", ctrlKey: false, metaKey: true },
-            { isPanelOpen: true, hasActiveItem: true }
-        )).toBe(false);
-    });
-
-    it("ignores non-Enter keys", () => {
-        expect(shouldAutocompleteHandleEnterKey(
-            { key: "ArrowDown", ctrlKey: false, metaKey: false },
-            { isPanelOpen: false, hasActiveItem: false }
-        )).toBe(true);
-    });
-});

apps/client/src/services/attribute_autocomplete.ts

@@ -1,450 +1,114 @@
-import type { AutocompleteApi as CoreAutocompleteApi, BaseItem } from "@algolia/autocomplete-core";
-import { createAutocomplete } from "@algolia/autocomplete-core";
-
 import type { AttributeType } from "../entities/fattribute.js";
-import { bindAutocompleteInput, createHeadlessPanelController, registerHeadlessAutocompleteCloser, withHeadlessSourceDefaults } from "./autocomplete_core.js";
 import server from "./server.js";
 
-// ---------------------------------------------------------------------------
-// Types
-// ---------------------------------------------------------------------------
-
-interface NameItem extends BaseItem {
-    name: string;
-}
-
-export function shouldAutocompleteHandleEnterKey(
-    event: Pick<KeyboardEvent, "key" | "ctrlKey" | "metaKey">,
-    { isPanelOpen, hasActiveItem }: { isPanelOpen: boolean; hasActiveItem: boolean }
-) {
-    if (event.key !== "Enter") {
-        return true;
-    }
-
-    if (event.ctrlKey || event.metaKey) {
-        return false;
-    }
-
-    return isPanelOpen && hasActiveItem;
-}
-
-interface InitAttributeNameOptions {
-    /** The <input> element where the user types */
+interface InitOptions {
     $el: JQuery<HTMLElement>;
     attributeType?: AttributeType | (() => AttributeType);
     open: boolean;
-    /** Called when the user selects a value or the panel closes */
-    onValueChange?: (value: string) => void;
-}
-
-// ---------------------------------------------------------------------------
-// Instance tracking
-// ---------------------------------------------------------------------------
-
-interface ManagedInstance {
-    autocomplete: CoreAutocompleteApi<NameItem>;
-    panelEl: HTMLElement;
-    cleanup: () => void;
-}
-
-const instanceMap = new WeakMap<HTMLElement, ManagedInstance>();
-
-function renderItems(
-    panelEl: HTMLElement,
-    items: NameItem[],
-    activeItemId: number | null,
-    onSelect: (item: NameItem) => void,
-    onActivate: (index: number) => void,
-    onDeactivate: () => void
-): void {
-    panelEl.innerHTML = "";
-    if (items.length === 0) {
-        panelEl.style.display = "none";
-        return;
-    }
-    const list = document.createElement("ul");
-    list.className = "aa-core-list";
-    items.forEach((item, index) => {
-        const li = document.createElement("li");
-        li.className = "aa-core-item";
-        if (index === activeItemId) {
-            li.classList.add("aa-core-item--active");
-        }
-        li.textContent = item.name;
-        li.addEventListener("mousemove", () => {
-            if (activeItemId === index) {
-                return;
-            }
-
-            onActivate(index);
-        });
-        li.addEventListener("mouseleave", (event) => {
-            const relatedTarget = event.relatedTarget;
-            if (relatedTarget instanceof HTMLElement && li.contains(relatedTarget)) {
-                return;
-            }
-
-            onDeactivate();
-        });
-        li.addEventListener("mousedown", (e) => {
-            e.preventDefault(); // prevent input blur
-            e.stopPropagation();
-            onSelect(item);
-        });
-        list.appendChild(li);
-    });
-    panelEl.appendChild(list);
-}
-
-// ---------------------------------------------------------------------------
-// Attribute name autocomplete — new (autocomplete-core, headless)
-// ---------------------------------------------------------------------------
-
-function initAttributeNameAutocomplete({ $el, attributeType, open, onValueChange }: InitAttributeNameOptions) {
-    const inputEl = $el[0] as HTMLInputElement;
-    const syncQueryFromInputValue = (autocomplete: CoreAutocompleteApi<NameItem>) => {
-        autocomplete.setQuery(inputEl.value || "");
-    };
-
-    // Already initialized — just open if requested
-    if (instanceMap.has(inputEl)) {
-        if (open) {
-            const inst = instanceMap.get(inputEl)!;
-            syncQueryFromInputValue(inst.autocomplete);
-            inst.autocomplete.setIsOpen(true);
-            inst.autocomplete.refresh();
-        }
-        return;
-    }
-
-    const panelController = createHeadlessPanelController({ inputEl });
-    const { panelEl } = panelController;
-
-    let isPanelOpen = false;
-    let hasActiveItem = false;
-
-    const autocomplete = createAutocomplete<NameItem>({
-        openOnFocus: true,
-        defaultActiveItemId: 0,
-        shouldPanelOpen() {
-            return true;
-        },
-
-        getSources({ query }) {
-            return [
-                withHeadlessSourceDefaults({
-                    sourceId: "attribute-names",
-                    getItems() {
-                        const type = typeof attributeType === "function" ? attributeType() : attributeType;
-                        return server
-                            .get<string[]>(`attribute-names/?type=${type}&query=${encodeURIComponent(query)}`)
-                            .then((names) => names.map((name) => ({ name })));
-                    },
-                    getItemInputValue({ item }) {
-                        return item.name;
-                    },
-                    onSelect({ item }) {
-                        inputEl.value = item.name;
-                        autocomplete.setQuery(item.name);
-                        autocomplete.setIsOpen(false);
-                        onValueChange?.(item.name);
-                    },
-                }),
-            ];
-        },
-
-        onStateChange({ state }) {
-            isPanelOpen = state.isOpen;
-            hasActiveItem = state.activeItemId !== null;
-
-            // Render items
-            const collections = state.collections;
-            const items = collections.length > 0 ? (collections[0].items as NameItem[]) : [];
-            const activeId = state.activeItemId ?? null;
-
-            if (state.isOpen && items.length > 0) {
-                renderItems(
-                    panelEl,
-                    items,
-                    activeId,
-                    (item) => {
-                        inputEl.value = item.name;
-                        autocomplete.setQuery(item.name);
-                        autocomplete.setIsOpen(false);
-                        onValueChange?.(item.name);
-                    },
-                    (index) => {
-                        autocomplete.setActiveItemId(index);
-                    },
-                    () => {
-                        autocomplete.setActiveItemId(null);
-                    }
-                );
-                panelController.startPositioning();
-            } else {
-                panelController.hide();
-            }
-
-            if (!state.isOpen) {
-                panelController.hide();
-            }
-        },
-    });
-
-    const unregisterGlobalCloser = registerHeadlessAutocompleteCloser(() => {
-        autocomplete.setIsOpen(false);
-        panelController.hide();
-    });
-
-    const cleanupInputBindings = bindAutocompleteInput<NameItem>({
-        inputEl,
-        autocomplete,
-        onInput(e, handlers) {
-            handlers.onChange(e as any);
-        },
-        onFocus(e, handlers) {
-            syncQueryFromInputValue(autocomplete);
-            handlers.onFocus(e as any);
-        },
-        onBlur() {
-            // Delay to allow mousedown on panel items
-            setTimeout(() => {
-                autocomplete.setIsOpen(false);
-                panelController.hide();
-                onValueChange?.(inputEl.value);
-            }, 50);
-        },
-        onKeyDown(e, handlers) {
-            if (!shouldAutocompleteHandleEnterKey(e, { isPanelOpen, hasActiveItem })) {
-                return;
-            }
-
-            if (e.key === "Enter") {
-                // Prevent the enter key from propagating to parent dialogs
-                // (which might interpret it as "submit" or "save and close")
-                e.stopPropagation();
-            }
-
-            handlers.onKeyDown(e as any);
-        }
-    });
-
-    const cleanup = () => {
-        unregisterGlobalCloser();
-        cleanupInputBindings();
-        panelController.destroy();
-    };
-
-    instanceMap.set(inputEl, { autocomplete, panelEl, cleanup });
-
-    if (open) {
-        syncQueryFromInputValue(autocomplete);
-        autocomplete.setIsOpen(true);
-        autocomplete.refresh();
-        panelController.startPositioning();
-    }
-}
-
-
-
-// ---------------------------------------------------------------------------
-// Label value autocomplete (headless autocomplete-core)
-// ---------------------------------------------------------------------------
-
-interface LabelValueInitOptions {
-    $el: JQuery<HTMLElement>;
-    open: boolean;
     nameCallback?: () => string;
-    onValueChange?: (value: string) => void;
 }
 
-function initLabelValueAutocomplete({ $el, open, nameCallback, onValueChange }: LabelValueInitOptions) {
-    const inputEl = $el[0] as HTMLInputElement;
-    const syncQueryFromInputValue = (autocomplete: CoreAutocompleteApi<NameItem>) => {
-        autocomplete.setQuery(inputEl.value || "");
-    };
+/**
+ * @param $el - element on which to init autocomplete
+ * @param attributeType - "relation" or "label" or callback providing one of those values as a type of autocompleted attributes
+ * @param open - should the autocomplete be opened after init?
+ */
+function initAttributeNameAutocomplete({ $el, attributeType, open }: InitOptions) {
+    if (!$el.hasClass("aa-input")) {
+        $el.autocomplete(
+            {
+                appendTo: document.querySelector("body"),
+                hint: false,
+                openOnFocus: true,
+                minLength: 0,
+                tabAutocomplete: false
+            },
+            [
+                {
+                    displayKey: "name",
+                    // disabling cache is important here because otherwise cache can stay intact when switching between attribute type which will lead to autocomplete displaying attribute names for incorrect attribute type
+                    cache: false,
+                    source: async (term, cb) => {
+                        const type = typeof attributeType === "function" ? attributeType() : attributeType;
 
-    if (instanceMap.has(inputEl)) {
-        if (open) {
-            const inst = instanceMap.get(inputEl)!;
-            syncQueryFromInputValue(inst.autocomplete);
-            inst.autocomplete.setIsOpen(true);
-            inst.autocomplete.refresh();
-        }
+                        const names = await server.get<string[]>(`attribute-names/?type=${type}&query=${encodeURIComponent(term)}`);
+                        const result = names.map((name) => ({ name }));
+
+                        cb(result);
+                    }
+                }
+            ]
+        );
+
+        $el.on("autocomplete:opened", () => {
+            if ($el.attr("readonly")) {
+                $el.autocomplete("close");
+            }
+        });
+    }
+
+    if (open) {
+        $el.autocomplete("open");
+    }
+}
+
+async function initLabelValueAutocomplete({ $el, open, nameCallback }: InitOptions) {
+    if ($el.hasClass("aa-input")) {
+        // we reinit every time because autocomplete seems to have a bug where it retains state from last
+        // open even though the value was reset
+        $el.autocomplete("destroy");
+    }
+
+    let attributeName = "";
+    if (nameCallback) {
+        attributeName = nameCallback();
+    }
+
+    if (attributeName.trim() === "") {
         return;
     }
 
-    const panelController = createHeadlessPanelController({ inputEl });
-    const { panelEl } = panelController;
+    const attributeValues = (await server.get<string[]>(`attribute-values/${encodeURIComponent(attributeName)}`)).map((attribute) => ({ value: attribute }));
 
-    let isPanelOpen = false;
-    let hasActiveItem = false;
-    let isSelecting = false;
+    if (attributeValues.length === 0) {
+        return;
+    }
 
-    let cachedAttributeName = "";
-    let cachedAttributeValues: NameItem[] = [];
-
-    const handleSelect = (item: NameItem) => {
-        isSelecting = true;
-        inputEl.value = item.name;
-        inputEl.dispatchEvent(new Event("input", { bubbles: true }));
-        autocomplete.setQuery(item.name);
-        autocomplete.setIsOpen(false);
-        onValueChange?.(item.name);
-        isSelecting = false;
-
-        setTimeout(() => {
-            // Preserve the legacy contract: several consumers still commit the
-            // selected value from their existing Enter key handlers instead of
-            // listening to the autocomplete selection event directly.
-            inputEl.dispatchEvent(new KeyboardEvent("keydown", {
-                key: "Enter",
-                code: "Enter",
-                keyCode: 13,
-                which: 13,
-                bubbles: true,
-                cancelable: true
-            }));
-        }, 0);
-    };
-
-    const autocomplete = createAutocomplete<NameItem>({
-        openOnFocus: true,
-        defaultActiveItemId: null,
-        shouldPanelOpen() {
-            return true;
+    $el.autocomplete(
+        {
+            appendTo: document.querySelector("body"),
+            hint: false,
+            openOnFocus: false, // handled manually
+            minLength: 0,
+            tabAutocomplete: false
         },
+        [
+            {
+                displayKey: "value",
+                cache: false,
+                source: async function (term, cb) {
+                    term = term.toLowerCase();
 
-        getSources({ query }) {
-            return [
-                withHeadlessSourceDefaults({
-                    sourceId: "attribute-values",
-                    async getItems() {
-                        const attributeName = nameCallback ? nameCallback() : "";
-                        if (!attributeName.trim()) {
-                            return [];
-                        }
+                    const filtered = attributeValues.filter((attr) => attr.value.toLowerCase().includes(term));
 
-                        if (attributeName !== cachedAttributeName || cachedAttributeValues.length === 0) {
-                            cachedAttributeName = attributeName;
-                            const values = await server.get<string[]>(`attribute-values/${encodeURIComponent(attributeName)}`);
-                            cachedAttributeValues = values.map((name) => ({ name }));
-                        }
-
-                        const q = query.toLowerCase();
-                        return cachedAttributeValues.filter((attr) => attr.name.toLowerCase().includes(q));
-                    },
-                    getItemInputValue({ item }) {
-                        return item.name;
-                    },
-                    onSelect({ item }) {
-                        handleSelect(item);
-                    },
-                }),
-            ];
-        },
-
-        onStateChange({ state }) {
-            isPanelOpen = state.isOpen;
-            hasActiveItem = state.activeItemId !== null;
-
-            const collections = state.collections;
-            const items = collections.length > 0 ? (collections[0].items as NameItem[]) : [];
-            const activeId = state.activeItemId ?? null;
-
-            if (state.isOpen && items.length > 0) {
-                renderItems(
-                    panelEl,
-                    items,
-                    activeId,
-                    handleSelect,
-                    (index) => {
-                        autocomplete.setActiveItemId(index);
-                    },
-                    () => {
-                        autocomplete.setActiveItemId(null);
-                    }
-                );
-                panelController.startPositioning();
-            } else {
-                panelController.hide();
+                    cb(filtered);
+                }
             }
+        ]
+    );
 
-            if (!state.isOpen) {
-                panelController.hide();
-            }
-        },
-    });
-
-    const unregisterGlobalCloser = registerHeadlessAutocompleteCloser(() => {
-        autocomplete.setIsOpen(false);
-        panelController.hide();
-    });
-
-    const cleanupInputBindings = bindAutocompleteInput<NameItem>({
-        inputEl,
-        autocomplete,
-        onInput(e, handlers) {
-            if (!isSelecting) {
-                handlers.onChange(e as any);
-            }
-        },
-        onFocus(e, handlers) {
-            const attributeName = nameCallback ? nameCallback() : "";
-            if (attributeName !== cachedAttributeName) {
-                cachedAttributeName = "";
-                cachedAttributeValues = [];
-            }
-            syncQueryFromInputValue(autocomplete);
-            handlers.onFocus(e as any);
-        },
-        onBlur() {
-            setTimeout(() => {
-                autocomplete.setIsOpen(false);
-                panelController.hide();
-                onValueChange?.(inputEl.value);
-            }, 50);
-        },
-        onKeyDown(e, handlers) {
-            if (!shouldAutocompleteHandleEnterKey(e, { isPanelOpen, hasActiveItem })) {
-                return;
-            }
-
-            if (e.key === "Enter") {
-                e.stopPropagation();
-            }
-
-            handlers.onKeyDown(e as any);
+    $el.on("autocomplete:opened", () => {
+        if ($el.attr("readonly")) {
+            $el.autocomplete("close");
         }
     });
 
-    const cleanup = () => {
-        unregisterGlobalCloser();
-        cleanupInputBindings();
-        panelController.destroy();
-    };
-
-    instanceMap.set(inputEl, { autocomplete, panelEl, cleanup });
-
     if (open) {
-        syncQueryFromInputValue(autocomplete);
-        autocomplete.setIsOpen(true);
-        autocomplete.refresh();
-        panelController.startPositioning();
-    }
-}
-
-export function destroyAutocomplete($el: JQuery<HTMLElement> | HTMLElement) {
-    const inputEl = $el instanceof HTMLElement ? $el : $el[0] as HTMLInputElement;
-    const instance = instanceMap.get(inputEl);
-    if (instance) {
-        instance.cleanup();
-        instanceMap.delete(inputEl);
+        $el.autocomplete("open");
     }
 }
 
 export default {
     initAttributeNameAutocomplete,
-    destroyAutocomplete,
-    initLabelValueAutocomplete,
+    initLabelValueAutocomplete
 };

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

@@ -1,93 +0,0 @@
-import $ from "jquery";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const {
-    showSpy,
-    hideSpy,
-    updateDisplayedShortcutsSpy,
-    saveFocusedElementSpy,
-    focusSavedElementSpy
-} = vi.hoisted(() => ({
-    showSpy: vi.fn(),
-    hideSpy: vi.fn(),
-    updateDisplayedShortcutsSpy: vi.fn(),
-    saveFocusedElementSpy: vi.fn(),
-    focusSavedElementSpy: vi.fn()
-}));
-
-vi.mock("bootstrap", () => ({
-    Modal: {
-        getOrCreateInstance: vi.fn(() => ({
-            show: showSpy,
-            hide: hideSpy
-        }))
-    }
-}));
-
-vi.mock("./keyboard_actions.js", () => ({
-    default: {
-        updateDisplayedShortcuts: updateDisplayedShortcutsSpy
-    }
-}));
-
-vi.mock("./focus.js", () => ({
-    saveFocusedElement: saveFocusedElementSpy,
-    focusSavedElement: focusSavedElementSpy
-}));
-
-import { closeAllHeadlessAutocompletes, registerHeadlessAutocompleteCloser } from "./autocomplete_core.js";
-import { openDialog } from "./dialog.js";
-
-describe("headless autocomplete closing", () => {
-    const unregisterClosers: Array<() => void> = [];
-
-    beforeEach(() => {
-        vi.clearAllMocks();
-        (window as any).glob = {
-            ...(window as any).glob,
-            activeDialog: null
-        };
-    });
-
-    afterEach(() => {
-        while (unregisterClosers.length > 0) {
-            unregisterClosers.pop()?.();
-        }
-    });
-
-    it("closes every registered closer and skips unregistered ones", () => {
-        const closer1 = vi.fn();
-        const closer2 = vi.fn();
-        const closer3 = vi.fn();
-
-        unregisterClosers.push(registerHeadlessAutocompleteCloser(closer1));
-        const unregister2 = registerHeadlessAutocompleteCloser(closer2);
-        unregisterClosers.push(unregister2);
-        unregisterClosers.push(registerHeadlessAutocompleteCloser(closer3));
-
-        unregister2();
-
-        closeAllHeadlessAutocompletes();
-
-        expect(closer1).toHaveBeenCalledTimes(1);
-        expect(closer2).not.toHaveBeenCalled();
-        expect(closer3).toHaveBeenCalledTimes(1);
-    });
-
-    it("closes registered autocompletes when a dialog finishes hiding", async () => {
-        const closer = vi.fn();
-        unregisterClosers.push(registerHeadlessAutocompleteCloser(closer));
-
-        const dialogEl = document.createElement("div");
-        const $dialog = $(dialogEl);
-
-        await openDialog($dialog, false);
-        $dialog.trigger("hidden.bs.modal");
-
-        expect(showSpy).toHaveBeenCalledTimes(1);
-        expect(updateDisplayedShortcutsSpy).toHaveBeenCalledWith($dialog);
-        expect(saveFocusedElementSpy).toHaveBeenCalledTimes(1);
-        expect(closer).toHaveBeenCalledTimes(1);
-        expect(focusSavedElementSpy).toHaveBeenCalledTimes(1);
-    });
-});

apps/client/src/services/autocomplete_core.ts

@@ -1,195 +0,0 @@
-import type { AutocompleteApi, AutocompleteSource, BaseItem } from "@algolia/autocomplete-core";
-
-export const HEADLESS_AUTOCOMPLETE_PANEL_SELECTOR = ".aa-core-panel";
-
-type HeadlessSourceDefaults = Required<Pick<AutocompleteSource<any>, "getItemUrl" | "onActive" | "onResolve">>;
-
-const headlessAutocompleteClosers = new Set<() => void>();
-
-export function withHeadlessSourceDefaults<TSource extends AutocompleteSource<any>>(
-    source: TSource
-): TSource & HeadlessSourceDefaults {
-    return {
-        getItemUrl() {
-            return undefined;
-        },
-        onActive() {
-            // Headless consumers handle highlight side effects themselves.
-        },
-        onResolve() {
-            // Headless consumers resolve and render items manually.
-        },
-        ...source
-    } as TSource & HeadlessSourceDefaults;
-}
-
-export function registerHeadlessAutocompleteCloser(close: () => void) {
-    headlessAutocompleteClosers.add(close);
-
-    return () => {
-        headlessAutocompleteClosers.delete(close);
-    };
-}
-
-export function closeAllHeadlessAutocompletes() {
-    for (const close of Array.from(headlessAutocompleteClosers)) {
-        close();
-    }
-}
-
-interface HeadlessPanelControllerOptions {
-    inputEl: HTMLElement;
-    container?: HTMLElement | null;
-    className?: string;
-    containedClassName?: string;
-}
-
-export function createHeadlessPanelController({
-    inputEl,
-    container,
-    className = "aa-core-panel",
-    containedClassName = "aa-core-panel--contained"
-}: HeadlessPanelControllerOptions) {
-    const panelEl = document.createElement("div");
-    panelEl.className = className;
-
-    const isContained = Boolean(container);
-    if (isContained) {
-        panelEl.classList.add(containedClassName);
-        container!.appendChild(panelEl);
-    } else {
-        document.body.appendChild(panelEl);
-    }
-
-    panelEl.style.display = "none";
-
-    let rafId: number | null = null;
-
-    const positionPanel = () => {
-        if (isContained) {
-            panelEl.style.position = "static";
-            panelEl.style.top = "";
-            panelEl.style.left = "";
-            panelEl.style.width = "100%";
-            panelEl.style.display = "block";
-            return;
-        }
-
-        const rect = inputEl.getBoundingClientRect();
-        panelEl.style.position = "fixed";
-        panelEl.style.top = `${rect.bottom}px`;
-        panelEl.style.left = `${rect.left}px`;
-        panelEl.style.width = `${rect.width}px`;
-        panelEl.style.display = "block";
-    };
-
-    const stopPositioning = () => {
-        if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-            rafId = null;
-        }
-    };
-
-    const startPositioning = () => {
-        if (isContained) {
-            positionPanel();
-            return;
-        }
-
-        if (rafId !== null) {
-            return;
-        }
-
-        const update = () => {
-            positionPanel();
-            rafId = requestAnimationFrame(update);
-        };
-
-        update();
-    };
-
-    const hide = () => {
-        panelEl.style.display = "none";
-        stopPositioning();
-    };
-
-    const destroy = () => {
-        hide();
-        panelEl.remove();
-    };
-
-    return {
-        panelEl,
-        hide,
-        destroy,
-        startPositioning,
-        stopPositioning
-    };
-}
-
-type InputHandlers<TItem extends BaseItem> = ReturnType<AutocompleteApi<TItem>["getInputProps"]>;
-
-interface InputBinding<TEvent extends Event = Event> {
-    type: string;
-    listener: (event: TEvent) => void;
-}
-
-interface BindAutocompleteInputOptions<TItem extends BaseItem> {
-    inputEl: HTMLInputElement;
-    autocomplete: AutocompleteApi<TItem>;
-    onInput?: (event: Event, handlers: InputHandlers<TItem>) => void;
-    onFocus?: (event: Event, handlers: InputHandlers<TItem>) => void;
-    onBlur?: (event: Event, handlers: InputHandlers<TItem>) => void;
-    onKeyDown?: (event: KeyboardEvent, handlers: InputHandlers<TItem>) => void;
-    extraBindings?: InputBinding[];
-}
-
-export function bindAutocompleteInput<TItem extends BaseItem>({
-    inputEl,
-    autocomplete,
-    onInput,
-    onFocus,
-    onBlur,
-    onKeyDown,
-    extraBindings = []
-}: BindAutocompleteInputOptions<TItem>) {
-    const handlers = autocomplete.getInputProps({ inputElement: inputEl });
-
-    const bindings: InputBinding[] = [
-        {
-            type: "input",
-            listener: (event: Event) => {
-                onInput?.(event, handlers);
-            }
-        },
-        {
-            type: "focus",
-            listener: (event: Event) => {
-                onFocus?.(event, handlers);
-            }
-        },
-        {
-            type: "blur",
-            listener: (event: Event) => {
-                onBlur?.(event, handlers);
-            }
-        },
-        {
-            type: "keydown",
-            listener: (event: Event) => {
-                onKeyDown?.(event as KeyboardEvent, handlers);
-            }
-        },
-        ...extraBindings
-    ];
-
-    bindings.forEach(({ type, listener }) => {
-        inputEl.addEventListener(type, listener as EventListener);
-    });
-
-    return () => {
-        bindings.forEach(({ type, listener }) => {
-            inputEl.removeEventListener(type, listener as EventListener);
-        });
-    };
-}

apps/client/src/services/content_renderer.ts

@@ -54,7 +54,7 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
         await renderText(entity, $renderedContent, options);
     } else if (type === "code") {
         await renderCode(entity, $renderedContent);
-    } else if (["image", "canvas", "mindMap", "spreadsheet"].includes(type)) {
+    } else if (["image", "canvas", "mindMap"].includes(type)) {
         renderImage(entity, $renderedContent, options);
     } else if (!options.tooltip && ["file", "pdf", "audio", "video"].includes(type)) {
         await renderFile(entity, type, $renderedContent);

apps/client/src/services/dialog.ts

@@ -1,11 +1,9 @@
 import { Modal } from "bootstrap";
-
 import appContext from "../components/app_context.js";
 import type { ConfirmDialogOptions, ConfirmDialogResult, ConfirmWithMessageOptions, MessageType } from "../widgets/dialogs/confirm.js";
-import { InfoExtraProps } from "../widgets/dialogs/info.jsx";
 import type { PromptDialogOptions } from "../widgets/dialogs/prompt.js";
-import { closeAllHeadlessAutocompletes } from "./autocomplete_core.js";
 import { focusSavedElement, saveFocusedElement } from "./focus.js";
+import { InfoExtraProps } from "../widgets/dialogs/info.jsx";
 
 export async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog = true, config?: Partial<Modal.Options>) {
     if (closeActDialog) {
@@ -17,7 +15,10 @@ export async function openDialog($dialog: JQuery<HTMLElement>, closeActDialog =
     Modal.getOrCreateInstance($dialog[0], config).show();
 
     $dialog.on("hidden.bs.modal", () => {
-        closeAllHeadlessAutocompletes();
+        const $autocompleteEl = $(".aa-input");
+        if ("autocomplete" in $autocompleteEl) {
+            $autocompleteEl.autocomplete("close");
+        }
 
         if (!glob.activeDialog || glob.activeDialog === $dialog) {
             focusSavedElement();

apps/client/src/services/froca_updater.ts

@@ -110,12 +110,7 @@ function processNoteChange(loadResults: LoadResults, ec: EntityChange) {
                 }
             }
 
-            // Only register as a content change if the protection status didn't change.
-            // When isProtected changes, the blobId change is a side effect of re-encryption,
-            // not a content edit. Registering it as content would cause the tree's content-only
-            // filter to incorrectly skip the note update (since both changes share the same
-            // componentId).
-            if (ec.componentId && note.isProtected === (ec.entity as FNoteRow).isProtected) {
+            if (ec.componentId) {
                 loadResults.addNoteContent(note.noteId, ec.componentId);
             }
         }

apps/client/src/services/keyboard_actions.ts

@@ -1,9 +1,8 @@
-import type { ActionKeyboardShortcut } from "@triliumnext/commons";
-
-import appContext from "../components/app_context.js";
-import type Component from "../components/component.js";
 import server from "./server.js";
+import appContext from "../components/app_context.js";
 import shortcutService, { ShortcutBinding } from "./shortcuts.js";
+import type Component from "../components/component.js";
+import type { ActionKeyboardShortcut } from "@triliumnext/commons";
 
 const keyboardActionRepo: Record<string, ActionKeyboardShortcut> = {};
 
@@ -52,10 +51,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 ?? []) {
-            shortcutService.bindGlobalShortcut(shortcut, () => {
-                const ntxId = appContext.tabManager?.activeNtxId ?? null;
-                appContext.triggerCommand(action.actionName, { ntxId });
-            });
+            shortcutService.bindGlobalShortcut(shortcut, () => appContext.triggerCommand(action.actionName, { ntxId: appContext.tabManager.activeNtxId }));
         }
     }
 });

apps/client/src/services/note_create.ts

@@ -1,17 +1,15 @@
-import type { CKTextEditor } from "@triliumnext/ckeditor5";
-import { AttributeRow } from "@triliumnext/commons";
-
 import appContext from "../components/app_context.js";
-import type FBranch from "../entities/fbranch.js";
-import type FNote from "../entities/fnote.js";
-import type { ChooseNoteTypeResponse } from "../widgets/dialogs/note_type_chooser.js";
-import froca from "./froca.js";
-import { t } from "./i18n.js";
 import protectedSessionHolder from "./protected_session_holder.js";
 import server from "./server.js";
-import toastService from "./toast.js";
-import treeService from "./tree.js";
 import ws from "./ws.js";
+import froca from "./froca.js";
+import treeService from "./tree.js";
+import toastService from "./toast.js";
+import { t } from "./i18n.js";
+import type FNote from "../entities/fnote.js";
+import type FBranch from "../entities/fbranch.js";
+import type { ChooseNoteTypeResponse } from "../widgets/dialogs/note_type_chooser.js";
+import type { CKTextEditor } from "@triliumnext/ckeditor5";
 
 export interface CreateNoteOpts {
     isProtected?: boolean;
@@ -26,8 +24,6 @@ export interface CreateNoteOpts {
     target?: string;
     targetBranchId?: string;
     textEditor?: CKTextEditor;
-    /** Attributes to be set on the note. These are set atomically on note creation, so entity changes are not sent for attributes defined here. */
-    attributes?: Omit<AttributeRow, "noteId" | "attributeId">[];
 }
 
 interface Response {
@@ -41,7 +37,7 @@ interface DuplicateResponse {
     note: FNote;
 }
 
-async function createNote(parentNotePath: string | undefined, options: CreateNoteOpts = {}, componentId?: string) {
+async function createNote(parentNotePath: string | undefined, options: CreateNoteOpts = {}) {
     options = Object.assign(
         {
             activate: true,
@@ -67,15 +63,22 @@ async function createNote(parentNotePath: string | undefined, options: CreateNot
 
     const parentNoteId = treeService.getNoteIdFromUrl(parentNotePath);
 
+    if (options.type === "mermaid" && !options.content && !options.templateNoteId) {
+        options.content = `graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;`;
+    }
+
     const { note, branch } = await server.post<Response>(`notes/${parentNoteId}/children?target=${options.target}&targetBranchId=${options.targetBranchId || ""}`, {
         title: options.title,
         content: options.content || "",
         isProtected: options.isProtected,
         type: options.type,
         mime: options.mime,
-        templateNoteId: options.templateNoteId,
-        attributes: options.attributes
-    }, componentId);
+        templateNoteId: options.templateNoteId
+    });
 
     if (options.saveSelection) {
         // we remove the selection only after it was saved to server to make sure we don't lose anything
@@ -137,8 +140,9 @@ function parseSelectedHtml(selectedHtml: string) {
         const content = selectedHtml.replace(dom[0].outerHTML, "");
 
         return [title, content];
+    } else {
+        return [null, selectedHtml];
     }
-    return [null, selectedHtml];
 }
 
 async function duplicateSubtree(noteId: string, parentNotePath: string) {

apps/client/src/services/promoted_attribute_definition_parser.ts

@@ -1,4 +1,4 @@
-export type LabelType = "text" | "textarea" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
+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", "textarea", "number", "boolean", "date", "datetime", "time", "url", "color"].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/server.ts

@@ -89,33 +89,21 @@ async function remove<T>(url: string, componentId?: string) {
     return await call<T>("DELETE", url, componentId);
 }
 
-async function upload(url: string, fileToUpload: File, componentId?: string, method = "PUT") {
+async function upload(url: string, fileToUpload: File, componentId?: string) {
     const formData = new FormData();
     formData.append("upload", fileToUpload);
 
-    const doUpload = async () => $.ajax({
+    return await $.ajax({
         url: window.glob.baseApiUrl + url,
         headers: await getHeaders(componentId ? {
             "trilium-component-id": componentId
         } : undefined),
         data: formData,
-        type: method,
+        type: "PUT",
         timeout: 60 * 60 * 1000,
         contentType: false, // NEEDED, DON'T REMOVE THIS
         processData: false // NEEDED, DON'T REMOVE THIS
     });
-
-    try {
-        return await doUpload();
-    } catch (e: unknown) {
-        // jQuery rejects with the jqXHR object
-        const jqXhr = e as JQuery.jqXHR;
-        if (jqXhr?.status && isCsrfError(jqXhr.status, jqXhr.responseText)) {
-            await refreshCsrfToken();
-            return await doUpload();
-        }
-        throw e;
-    }
 }
 
 let idCounter = 1;
@@ -124,55 +112,12 @@ const idToRequestMap: Record<string, RequestData> = {};
 
 let maxKnownEntityChangeId = 0;
 
-let csrfRefreshInProgress: Promise<void> | null = null;
-
-/**
- * Re-fetches /bootstrap to obtain a fresh CSRF token. This is needed when the
- * server session expires (e.g. mobile tab backgrounded for a long time) and the
- * existing CSRF token is no longer valid.
- *
- * Coalesces concurrent calls so only one bootstrap request is in-flight at a time.
- */
-async function refreshCsrfToken(): Promise<void> {
-    if (csrfRefreshInProgress) {
-        return csrfRefreshInProgress;
-    }
-
-    csrfRefreshInProgress = (async () => {
-        try {
-            const response = await fetch(`./bootstrap${window.location.search}`, { cache: "no-store" });
-            if (response.ok) {
-                const json = await response.json();
-                glob.csrfToken = json.csrfToken;
-            }
-        } finally {
-            csrfRefreshInProgress = null;
-        }
-    })();
-
-    return csrfRefreshInProgress;
-}
-
-function isCsrfError(status: number, responseText: string): boolean {
-    if (status !== 403) {
-        return false;
-    }
-    try {
-        const body = JSON.parse(responseText);
-        return body.message === "Invalid CSRF token";
-    } catch {
-        return false;
-    }
-}
-
 interface CallOptions {
     data?: unknown;
     silentNotFound?: boolean;
     silentInternalServerError?: boolean;
     // If `true`, the value will be returned as a string instead of a JavaScript object if JSON, XMLDocument if XML, etc.
     raw?: boolean;
-    /** Used internally to prevent infinite retry loops on CSRF refresh. */
-    csrfRetried?: boolean;
 }
 
 async function call<T>(method: string, url: string, componentId?: string, options: CallOptions = {}) {
@@ -222,7 +167,7 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, opts
             type: method,
             headers,
             timeout: 60000,
-            success: (body, _textStatus, jqXhr) => {
+            success: (body, textStatus, jqXhr) => {
                 const respHeaders: Headers = {};
 
                 jqXhr
@@ -247,25 +192,7 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, opts
                     // don't report requests that are rejected by the browser, usually when the user is refreshing or going to a different page.
                     rej("rejected by browser");
                     return;
-                }
-
-                // If the CSRF token is stale (e.g. session expired while tab was backgrounded),
-                // refresh it and retry the request once.
-                if (!opts.csrfRetried && isCsrfError(jqXhr.status, jqXhr.responseText)) {
-                    try {
-                        await refreshCsrfToken();
-                        // Rebuild headers so the fresh glob.csrfToken is picked up
-                        const retryHeaders = await getHeaders({ "trilium-component-id": headers["trilium-component-id"] });
-                        const retryResult = await ajax(url, method, data, retryHeaders, { ...opts, csrfRetried: true });
-                        res(retryResult);
-                        return;
-                    } catch (retryErr) {
-                        rej(retryErr);
-                        return;
-                    }
-                }
-
-                if (opts.silentNotFound && jqXhr.status === 404) {
+                } else if (opts.silentNotFound && jqXhr.status === 404) {
                     // report nothing
                 } else if (opts.silentInternalServerError && jqXhr.status === 500) {
                     // report nothing

apps/client/src/setup.ts

@@ -1,107 +1,66 @@
 import "jquery";
-
 import utils from "./services/utils.js";
+import ko from "knockout";
 
-type SetupStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop" | "sync-from-server";
-type SetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
+// TriliumNextTODO: properly make use of below types
+// type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
+// type SetupModelStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop";
 
-class SetupController {
-    private step: SetupStep;
-    private setupType: SetupType = "";
-    private syncPollIntervalId: number | null = null;
-    private rootNode: HTMLElement;
-    private setupTypeForm: HTMLFormElement;
-    private syncFromServerForm: HTMLFormElement;
-    private setupTypeNextButton: HTMLButtonElement;
-    private setupTypeInputs: HTMLInputElement[];
-    private syncServerHostInput: HTMLInputElement;
-    private syncProxyInput: HTMLInputElement;
-    private passwordInput: HTMLInputElement;
-    private sections: Record<SetupStep, HTMLElement>;
+class SetupModel {
+    syncInProgress: boolean;
+    step: ko.Observable<string>;
+    setupType: ko.Observable<string>;
+    setupNewDocument: ko.Observable<boolean>;
+    setupSyncFromDesktop: ko.Observable<boolean>;
+    setupSyncFromServer: ko.Observable<boolean>;
+    syncServerHost: ko.Observable<string | undefined>;
+    syncProxy: ko.Observable<string | undefined>;
+    password: ko.Observable<string | undefined>;
 
-    constructor(rootNode: HTMLElement, syncInProgress: boolean) {
-        this.rootNode = rootNode;
-        this.step = syncInProgress ? "sync-in-progress" : "setup-type";
-        this.setupTypeForm = mustGetElement("setup-type-form", HTMLFormElement);
-        this.syncFromServerForm = mustGetElement("sync-from-server-form", HTMLFormElement);
-        this.setupTypeNextButton = mustGetElement("setup-type-next", HTMLButtonElement);
-        this.setupTypeInputs = Array.from(document.querySelectorAll<HTMLInputElement>("input[name='setup-type']"));
-        this.syncServerHostInput = mustGetElement("sync-server-host", HTMLInputElement);
-        this.syncProxyInput = mustGetElement("sync-proxy", HTMLInputElement);
-        this.passwordInput = mustGetElement("password", HTMLInputElement);
-        this.sections = {
-            "setup-type": mustGetElement("setup-type-section", HTMLElement),
-            "new-document-in-progress": mustGetElement("new-document-in-progress-section", HTMLElement),
-            "sync-from-desktop": mustGetElement("sync-from-desktop-section", HTMLElement),
-            "sync-from-server": mustGetElement("sync-from-server-section", HTMLElement),
-            "sync-in-progress": mustGetElement("sync-in-progress-section", HTMLElement)
-        };
-    }
+    constructor(syncInProgress: boolean) {
+        this.syncInProgress = syncInProgress;
+        this.step = ko.observable(syncInProgress ? "sync-in-progress" : "setup-type");
+        this.setupType = ko.observable("");
+        this.setupNewDocument = ko.observable(false);
+        this.setupSyncFromDesktop = ko.observable(false);
+        this.setupSyncFromServer = ko.observable(false);
+        this.syncServerHost = ko.observable();
+        this.syncProxy = ko.observable();
+        this.password = ko.observable();
 
-    init() {
-        this.setupTypeForm.addEventListener("submit", (event) => {
-            event.preventDefault();
-            void this.selectSetupType();
-        });
-
-        this.syncFromServerForm.addEventListener("submit", (event) => {
-            event.preventDefault();
-            void this.finish();
-        });
-
-        for (const input of this.setupTypeInputs) {
-            input.addEventListener("change", () => {
-                this.setupType = input.value as SetupType;
-                this.render();
-            });
+        if (this.syncInProgress) {
+            setInterval(checkOutstandingSyncs, 1000);
         }
-
-        for (const backButton of document.querySelectorAll<HTMLElement>("[data-action='back']")) {
-            backButton.addEventListener("click", () => {
-                this.back();
-            });
-        }
-
         const serverAddress = `${location.protocol}//${location.host}`;
         $("#current-host").html(serverAddress);
-
-        if (this.step === "sync-in-progress") {
-            this.startSyncPolling();
-        }
-
-        this.render();
-        this.rootNode.style.display = "";
     }
 
-    private async selectSetupType() {
-        if (this.setupType === "new-document") {
-            this.setStep("new-document-in-progress");
+    // this is called in setup.ejs
+    setupTypeSelected() {
+        return !!this.setupType();
+    }
 
-            await $.post("api/setup/new-document");
-            window.location.replace("./setup");
-            return;
-        }
+    selectSetupType() {
+        if (this.setupType() === "new-document") {
+            this.step("new-document-in-progress");
 
-        if (this.setupType) {
-            this.setStep(this.setupType);
+            $.post("api/setup/new-document").then(() => {
+                window.location.replace("./setup");
+            });
+        } else {
+            this.step(this.setupType());
         }
     }
 
-    private back() {
-        this.setStep("setup-type");
-        this.setupType = "";
-
-        for (const input of this.setupTypeInputs) {
-            input.checked = false;
-        }
-
-        this.render();
+    back() {
+        this.step("setup-type");
+        this.setupType("");
     }
 
-    private async finish() {
-        const syncServerHost = this.syncServerHostInput.value.trim();
-        const syncProxy = this.syncProxyInput.value.trim();
-        const password = this.passwordInput.value;
+    async finish() {
+        const syncServerHost = this.syncServerHost();
+        const syncProxy = this.syncProxy();
+        const password = this.password();
 
         if (!syncServerHost) {
             showAlert("Trilium server address can't be empty");
@@ -115,44 +74,21 @@ class SetupController {
 
         // not using server.js because it loads too many dependencies
         const resp = await $.post("api/setup/sync-from-server", {
-            syncServerHost,
-            syncProxy,
-            password
+            syncServerHost: syncServerHost,
+            syncProxy: syncProxy,
+            password: password
         });
 
         if (resp.result === "success") {
+            this.step("sync-in-progress");
+
+            setInterval(checkOutstandingSyncs, 1000);
+
             hideAlert();
-            this.setStep("sync-in-progress");
-            this.startSyncPolling();
         } else {
             showAlert(`Sync setup failed: ${resp.error}`);
         }
     }
-
-    private setStep(step: SetupStep) {
-        this.step = step;
-        this.render();
-    }
-
-    private render() {
-        for (const [step, section] of Object.entries(this.sections) as [SetupStep, HTMLElement][]) {
-            section.style.display = step === this.step ? "" : "none";
-        }
-
-        this.setupTypeNextButton.disabled = !this.setupType;
-    }
-
-    private getSelectedSetupType(): SetupType {
-        return (this.setupTypeInputs.find((input) => input.checked)?.value ?? "") as SetupType;
-    }
-
-    private startSyncPolling() {
-        if (this.syncPollIntervalId !== null) {
-            return;
-        }
-
-        this.syncPollIntervalId = window.setInterval(checkOutstandingSyncs, 1000);
-    }
 }
 
 async function checkOutstandingSyncs() {
@@ -186,19 +122,7 @@ function getSyncInProgress() {
     return !!parseInt(el.content);
 }
 
-function mustGetElement<T extends typeof HTMLElement>(id: string, ctor: T): InstanceType<T> {
-    const element = document.getElementById(id);
-
-    if (!element || !(element instanceof ctor)) {
-        throw new Error(`Expected element #${id}`);
-    }
-
-    return element as InstanceType<T>;
-}
-
 addEventListener("DOMContentLoaded", (event) => {
-    const rootNode = document.getElementById("setup-dialog");
-    if (!rootNode || !(rootNode instanceof HTMLElement)) return;
-
-    new SetupController(rootNode, getSyncInProgress()).init();
+    ko.applyBindings(new SetupModel(getSyncInProgress()), document.getElementById("setup-dialog"));
+    $("#setup-dialog").show();
 });

apps/client/src/stylesheets/style.css

@@ -892,6 +892,33 @@ table.promoted-attributes-in-tooltip th {
     opacity: 1;
 }
 
+.algolia-autocomplete {
+    width: calc(100% - 30px);
+    z-index: 2000 !important;
+}
+
+.algolia-autocomplete-container .aa-dropdown-menu {
+    position: inherit !important;
+    overflow: auto;
+}
+
+.algolia-autocomplete .aa-input,
+.algolia-autocomplete .aa-hint {
+    width: 100%;
+}
+
+.algolia-autocomplete .aa-dropdown-menu {
+    width: 100%;
+    background-color: var(--main-background-color);
+    border: 1px solid var(--main-border-color);
+    border-top: none;
+    z-index: 2000 !important;
+    max-height: 500px;
+    overflow: auto;
+    padding: 0;
+    margin: 0;
+}
+
 .aa-dropdown-menu .aa-suggestion {
     cursor: pointer;
     padding: 6px 16px;
@@ -933,153 +960,6 @@ table.promoted-attributes-in-tooltip th {
     background-color: var(--active-item-background-color);
 }
 
-/* ===== @algolia/autocomplete-core (headless, custom panel) ===== */
-
-.aa-core-panel {
-    z-index: 10000;
-    background-color: var(--main-background-color);
-    border: 1px solid var(--main-border-color);
-    border-top: none;
-    max-height: 500px;
-    overflow: auto;
-    padding: 0;
-    margin: 0;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-}
-
-.aa-core-panel.aa-dropdown-menu {
-    width: 100%;
-}
-
-.aa-core-panel--contained {
-    position: static !important;
-    border: 0;
-    background: transparent;
-    box-shadow: none;
-}
-
-.aa-core-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-}
-
-.aa-core-item {
-    cursor: pointer;
-    padding: 7px 16px;
-    margin: 0;
-    white-space: normal;
-}
-
-.aa-core-item--active {
-    color: var(--active-item-text-color);
-    background-color: var(--active-item-background-color);
-}
-
-.aa-core-item .note-suggestion {
-    display: flex;
-    align-items: flex-start;
-    gap: 8px;
-    width: 100%;
-}
-
-.aa-core-item .icon,
-.aa-core-item .command-icon {
-    flex-shrink: 0;
-    line-height: 1.4;
-    margin-top: 1px;
-}
-
-.aa-core-item .text {
-    min-width: 0;
-    flex: 1;
-}
-
-.aa-core-item .aa-core-primary-row {
-    display: flex;
-    align-items: baseline;
-    justify-content: space-between;
-    gap: 12px;
-}
-
-.aa-core-item .search-result-title {
-    display: block;
-    min-width: 0;
-    line-height: 1.35;
-    word-break: break-word;
-    font-size: 1.02em;
-}
-
-.aa-core-item .search-result-attributes {
-    display: block;
-    margin-top: 1px;
-    font-size: 0.8em;
-    color: var(--muted-text-color);
-    opacity: 0.65;
-    line-height: 1.2;
-    word-break: break-word;
-}
-
-.aa-core-item .search-result-attributes {
-    padding-inline-start: 14px;
-}
-
-.aa-core-item .aa-core-shortcut,
-.aa-core-item kbd.command-shortcut {
-    flex-shrink: 0;
-    padding: 0;
-    border: 0;
-    background: transparent;
-    color: var(--muted-text-color);
-    font-family: inherit !important;
-    font-size: 0.8em;
-    opacity: 0.85;
-}
-
-.aa-core-item .command-suggestion {
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    width: 100%;
-    font-size: 0.9em;
-}
-
-.aa-core-item .command-content {
-    flex-grow: 1;
-    min-width: 0;
-}
-
-.aa-core-item .command-name {
-    font-weight: bold;
-    line-height: 1.35;
-}
-
-.aa-core-item .command-description {
-    font-size: 0.8em;
-    line-height: 1.3;
-    opacity: 0.75;
-}
-
-.aa-core-item .search-result-title b,
-.aa-core-item .search-result-path b,
-.aa-core-item .search-result-attributes b,
-.aa-core-item .command-name b,
-.aa-core-item .command-description b {
-    color: var(--admonition-warning-accent-color);
-    text-decoration: underline;
-}
-
-.aa-core-item .aa-core-separator {
-    padding: 0 2px;
-}
-
-.jump-to-note-results .aa-core-panel--contained {
-    max-height: calc(80vh - 200px);
-    overflow-y: auto;
-    overflow-x: hidden;
-    text-overflow: ellipsis;
-}
-
 .help-button {
     float: inline-end;
     background: none;
@@ -1732,7 +1612,11 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
     }
 
     body.mobile #launcher-container {
-        justify-content: space-evenly;
+        justify-content: center;
+    }
+
+    body.mobile #launcher-container button {
+        margin: 0 16px;
     }
 
     body.mobile .modal.show {

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

@@ -675,11 +675,10 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
 div.alert {
     margin-bottom: 8px;
     background: var(--alert-bar-background) !important;
-    color: var(--main-text-color);
     border-radius: 8px;
     font-size: .85em;
 }
 
 div.alert p + p {
     margin-block: 1em 0;
-}
+}

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

@@ -128,8 +128,8 @@
     margin-inline: auto;
 }
 
-/* The headless autocomplete panel rendered into the empty-note results container */
-.note-detail-empty .aa-core-panel--contained {
+/* The search results list */
+.note-detail-empty span.aa-dropdown-menu {
     margin-top: 1em;
     border: unset;
 }

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

@@ -803,13 +803,12 @@
     "web-view": "عرض الويب",
     "mind-map": "خريطة ذهنية",
     "geo-map": "خريطة جغرافية",
-    "task-list": "قائمة المهام",
-    "spreadsheet": "جدول البيانات"
+    "task-list": "قائمة المهام"
   },
   "shared_switch": {
     "shared": "مشترك",
     "toggle-on-title": "مشاركة الملاحظة",
-    "toggle-off-title": "إلغاء مشاركة الملاحظة"
+    "toggle-off-title": "الغاء مشاركة الملاحظة"
   },
   "template_switch": {
     "template": "قالب"
@@ -1069,6 +1068,7 @@
     "rename_note": "اعادة تسمية الملاحظة",
     "remove_relation": "حذف العلاقة",
     "default_new_note_title": "ملاحظة جديدة",
+    "open_in_new_tab": "فتح في تبويب جديد",
     "enter_new_title": "ادخل عنوان ملاحظة جديدة:",
     "note_not_found": "الملاحظة {{noteId}} غير موجودة!",
     "cannot_match_transform": "تعذر مطابقة التحويل: {{transform}}"
@@ -1286,10 +1286,8 @@
     "search-for": "بحث ل \"{{term}}\""
   },
   "protect_note": {
-    "toggle-off": "إزالة الحماية عن الملاحظة",
-    "toggle-on": "حماية الملاحظة",
-    "toggle-on-hint": "الملاحظة غير محمة، انقر لحمايتها",
-    "toggle-off-hint": "الملاحظة محمية، انقر لإزالة الحماية منها"
+    "toggle-off": "ازالة الحماية عن الملاحظة",
+    "toggle-on": "حماية الملاحظة"
   },
   "open-help-page": "فتح صفحة المساعدة",
   "empty": {

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

@@ -93,10 +93,7 @@
     "digits": "dígits",
     "inheritable": "Heretable",
     "delete": "Suprimeix",
-    "color_type": "Color",
-    "textarea": "Text multi linia",
-    "date_time": "Data i hora",
-    "precision_title": "Quants dígits han d'estar disponibles per a coma flotant a la interfície de configuració."
+    "color_type": "Color"
   },
   "rename_label": {
     "to": "Per"

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

@@ -446,8 +446,7 @@
     "and_more": "... 以及另外 {{count}} 个。",
     "print_landscape": "导出为 PDF 时，将页面方向更改为横向而不是纵向。",
     "print_page_size": "导出为 PDF 时，更改页面大小。支持的值：<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": "颜色",
-    "textarea": "多行文本"
+    "color_type": "颜色"
   },
   "attribute_editor": {
     "help_text_body1": "要添加标签，只需输入例如 <code>#rock</code> 或者如果您还想添加值，则例如 <code>#year = 2020</code>",
@@ -1048,6 +1047,7 @@
     "unprotecting-title": "解除保护状态"
   },
   "relation_map": {
+    "open_in_new_tab": "在新标签页中打开",
     "remove_note": "删除笔记",
     "edit_title": "编辑标题",
     "rename_note": "重命名笔记",
@@ -1535,8 +1535,7 @@
     "new-feature": "新建",
     "collections": "集合",
     "book": "集合",
-    "ai-chat": "AI聊天",
-    "spreadsheet": "电子表格"
+    "ai-chat": "AI聊天"
   },
   "protect_note": {
     "toggle-on": "保护笔记",
@@ -2168,52 +2167,5 @@
   },
   "setup_form": {
     "more_info": "了解更多"
-  },
-  "media": {
-    "play": "播放（空格）",
-    "pause": "暂停（空格）",
-    "back-10s": "后退10秒（左箭头键）",
-    "forward-30s": "前进30秒",
-    "mute": "静音（M）",
-    "unmute": "取消静音（M）",
-    "playback-speed": "播放速度",
-    "loop": "循环播放",
-    "disable-loop": "禁用循环播放",
-    "rotate": "旋转",
-    "picture-in-picture": "画中画",
-    "exit-picture-in-picture": "退出画中画",
-    "fullscreen": "全屏（F）",
-    "exit-fullscreen": "退出全屏",
-    "unsupported-format": "此文件格式不支持媒体预览：\n{{mime}}",
-    "zoom-to-fit": "缩放以填充",
-    "zoom-reset": "重置缩放以填充"
-  },
-  "mermaid": {
-    "sample_diagrams": "示例图：",
-    "sample_flowchart": "流程图",
-    "sample_class": "类图",
-    "sample_sequence": "时序图",
-    "sample_entity_relationship": "实体关系图",
-    "sample_state": "状态图",
-    "sample_mindmap": "思维导图",
-    "sample_architecture": "架构图",
-    "sample_block": "模块图",
-    "sample_c4": "C4 图",
-    "sample_gantt": "甘特图",
-    "sample_git": "Git 流程图",
-    "sample_kanban": "看板图",
-    "sample_packet": "数据包图",
-    "sample_pie": "饼图",
-    "sample_quadrant": "象限图",
-    "sample_radar": "雷达图",
-    "sample_requirement": "需求图",
-    "sample_sankey": "桑基图",
-    "sample_timeline": "时间轴图",
-    "sample_treemap": "树形图",
-    "sample_user_journey": "用户旅程图",
-    "sample_xy": "散点图",
-    "sample_venn": "韦恩图",
-    "sample_ishikawa": "鱼骨图",
-    "placeholder": "输入你的美人鱼图的内容，或者使用下面的示例图之一。"
   }
 }

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

@@ -446,8 +446,7 @@
     "and_more": "... und {{count}} mehr.",
     "print_landscape": "Beim Export als PDF, wird die Seitenausrichtung Querformat anstatt Hochformat verwendet.",
     "print_page_size": "Beim Export als PDF, wird die Größe der Seite angepasst. Unterstützte Größen: <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": "Farbe",
-    "textarea": "Mehrzeilen-Text"
+    "color_type": "Farbe"
   },
   "attribute_editor": {
     "help_text_body1": "Um ein Label hinzuzufügen, gebe einfach z.B. ein. <code>#rock</code> oder wenn du auch einen Wert hinzufügen möchten, dann z.B. <code>#year = 2024</code>",
@@ -1047,6 +1046,7 @@
     "unprotecting-title": "Ungeschützt-Status"
   },
   "relation_map": {
+    "open_in_new_tab": "In neuem Tab öffnen",
     "remove_note": "Notiz entfernen",
     "edit_title": "Titel bearbeiten",
     "rename_note": "Notiz umbenennen",
@@ -1488,21 +1488,20 @@
     "mermaid-diagram": "Mermaid Diagramm",
     "canvas": "Leinwand",
     "web-view": "Webansicht",
-    "mind-map": "Mindmap",
+    "mind-map": "Mind Map",
     "file": "Datei",
     "image": "Bild",
     "launcher": "Starter",
     "doc": "Dokument",
     "widget": "Widget",
-    "confirm-change": "Es ist nicht empfehlenswert den Notiz-Typ zu ändern, wenn der Inhalt der Notiz nicht leer ist. Möchtest du dennoch fortfahren?",
+    "confirm-change": "Es is nicht empfehlenswert den Notiz-Typ zu ändern, wenn der Inhalt der Notiz nicht leer ist. Möchtest du dennoch fortfahren?",
     "geo-map": "Geo-Karte",
     "beta-feature": "Beta",
     "book": "Sammlung",
-    "ai-chat": "KI-Chat",
+    "ai-chat": "KI Chat",
     "task-list": "Aufgabenliste",
     "new-feature": "Neu",
-    "collections": "Sammlungen",
-    "spreadsheet": "Tabelle"
+    "collections": "Sammlungen"
   },
   "protect_note": {
     "toggle-on": "Notiz schützen",
@@ -2183,52 +2182,5 @@
   },
   "setup_form": {
     "more_info": "Mehr erfahren"
-  },
-  "media": {
-    "play": "Abspielen (Arbeitsbereich)",
-    "pause": "Pausieren (Arbeitsbereich)",
-    "back-10s": "10 s zurück (Linke Pfeiltaste)",
-    "forward-30s": "30 s vorwärts",
-    "mute": "Stumm (M)",
-    "unmute": "Stummschaltung aufheben (M)",
-    "playback-speed": "Wiedergabegeschwindigkeit",
-    "loop": "Schleife",
-    "disable-loop": "Schleife deaktivieren",
-    "rotate": "Rotieren",
-    "picture-in-picture": "Bild-in-Bild",
-    "exit-picture-in-picture": "Bild-in-Bild verlassen",
-    "fullscreen": "Vollbild (F)",
-    "exit-fullscreen": "Vollbild verlassen",
-    "unsupported-format": "Medienvorschau ist für dieses Format nicht verfügbar:\n{{mime}}",
-    "zoom-to-fit": "Zoomen um auszufüllen",
-    "zoom-reset": "Zoomen um auszufüllen zurücksetzen"
-  },
-  "mermaid": {
-    "placeholder": "Geben den Inhalt des Mermaid-Diagramms ein oder verwenden eine der folgenden Beispieldiagramme.",
-    "sample_diagrams": "Beispieldiagramme:",
-    "sample_flowchart": "Flussdiagramm",
-    "sample_class": "Klasse",
-    "sample_sequence": "Abfolge",
-    "sample_entity_relationship": "Entität Beziehung",
-    "sample_state": "Zustandsübergangsdiagramm",
-    "sample_mindmap": "Mindmap",
-    "sample_architecture": "Architektur",
-    "sample_block": "Block",
-    "sample_c4": "C4",
-    "sample_gantt": "Gantt",
-    "sample_git": "GitGraph",
-    "sample_kanban": "Kanban",
-    "sample_packet": "Paket",
-    "sample_pie": "Kuchen",
-    "sample_quadrant": "Quadrant",
-    "sample_radar": "Radar",
-    "sample_requirement": "Anforderung",
-    "sample_sankey": "Sankey",
-    "sample_timeline": "Zeitstrahl",
-    "sample_treemap": "Kachel",
-    "sample_user_journey": "Benutzererfahrung",
-    "sample_xy": "XY",
-    "sample_venn": "Mengen",
-    "sample_ishikawa": "Ursache-Wirkung"
   }
 }

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

@@ -1,6 +1,6 @@
 {
   "about": {
-    "title": "Σχετικά με το Trilium Notes",
+    "title": "Πληροφορίες για το Trilium Notes",
     "homepage": "Αρχική Σελίδα:",
     "app_version": "Έκδοση εφαρμογής:",
     "db_version": "Έκδοση βάσης δεδομένων:",

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

@@ -343,7 +343,6 @@
     "label_type_title": "Type of the label will help Trilium to choose suitable interface to enter the label value.",
     "label_type": "Type",
     "text": "Text",
-    "textarea": "Multi-line Text",
     "number": "Number",
     "boolean": "Boolean",
     "date": "Date",
@@ -1037,25 +1036,6 @@
     "file_preview_not_available": "File preview is not available for this file format.",
     "too_big": "The preview only shows the first {{maxNumChars}} characters of the file for performance reasons. Download the file and open it externally to be able to see the entire content."
   },
-  "media": {
-    "play": "Play (Space)",
-    "pause": "Pause (Space)",
-    "back-10s": "Back 10s (Left arrow key)",
-    "forward-30s": "Forward 30s",
-    "mute": "Mute (M)",
-    "unmute": "Unmute (M)",
-    "playback-speed": "Playback speed",
-    "loop": "Loop",
-    "disable-loop": "Disable loop",
-    "rotate": "Rotate",
-    "picture-in-picture": "Picture-in-picture",
-    "exit-picture-in-picture": "Exit picture-in-picture",
-    "fullscreen": "Fullscreen (F)",
-    "exit-fullscreen": "Exit fullscreen",
-    "unsupported-format": "Media preview is not available for this file format:\n{{mime}}",
-    "zoom-to-fit": "Zoom to fill",
-    "zoom-reset": "Reset zoom to fill"
-  },
   "protected_session": {
     "enter_password_instruction": "Showing protected note requires entering your password:",
     "start_session_button": "Start protected session",
@@ -1069,6 +1049,7 @@
     "unprotecting-title": "Unprotecting status"
   },
   "relation_map": {
+    "open_in_new_tab": "Open in new tab",
     "remove_note": "Remove note",
     "edit_title": "Edit title",
     "rename_note": "Rename note",
@@ -2202,33 +2183,5 @@
   },
   "setup_form": {
     "more_info": "Learn more"
-  },
-  "mermaid": {
-    "placeholder": "Type the content of your Mermaid diagram or use one of the sample diagrams below.",
-    "sample_diagrams": "Sample diagrams:",
-    "sample_flowchart": "Flowchart",
-    "sample_class": "Class",
-    "sample_sequence": "Sequence",
-    "sample_entity_relationship": "Entity Relationship",
-    "sample_state": "State",
-    "sample_mindmap": "Mindmap",
-    "sample_architecture": "Architecture",
-    "sample_block": "Block",
-    "sample_c4": "C4",
-    "sample_gantt": "Gantt",
-    "sample_git": "Git",
-    "sample_kanban": "Kanban",
-    "sample_packet": "Packet",
-    "sample_pie": "Pie",
-    "sample_quadrant": "Quadrant",
-    "sample_radar": "Radar",
-    "sample_requirement": "Requirement",
-    "sample_sankey": "Sankey",
-    "sample_timeline": "Timeline",
-    "sample_treemap": "Treemap",
-    "sample_user_journey": "User Journey",
-    "sample_xy": "XY",
-    "sample_venn": "Venn",
-    "sample_ishikawa": "Ishikawa"
   }
 }

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

@@ -1051,6 +1051,7 @@
     "unprotecting-title": "Estado de desprotección"
   },
   "relation_map": {
+    "open_in_new_tab": "Abrir en nueva pestaña",
     "remove_note": "Quitar nota",
     "edit_title": "Editar título",
     "rename_note": "Cambiar nombre de nota",
@@ -1547,8 +1548,7 @@
     "task-list": "Lista de tareas",
     "book": "Colección",
     "new-feature": "Nuevo",
-    "collections": "Colecciones",
-    "spreadsheet": "Hoja de cálculo"
+    "collections": "Colecciones"
   },
   "protect_note": {
     "toggle-on": "Proteger la nota",
@@ -1650,8 +1650,7 @@
   },
   "search_result": {
     "no_notes_found": "No se han encontrado notas para los parámetros de búsqueda dados.",
-    "search_not_executed": "La búsqueda aún no se ha ejecutado.",
-    "search_now": "Buscar ahora"
+    "search_not_executed": "La búsqueda aún no se ha ejecutado. Dé clic en el botón «Buscar» para ver los resultados."
   },
   "spacer": {
     "configure_launchbar": "Configurar barra de lanzamiento"
@@ -2197,52 +2196,5 @@
   },
   "setup_form": {
     "more_info": "Para saber más"
-  },
-  "media": {
-    "play": "Reproducir (Espacio)",
-    "pause": "Pausa (Espacio)",
-    "back-10s": "Retroceder 10s (tecla de flecha izquierda)",
-    "forward-30s": "Adelantar 30s",
-    "mute": "Silenciar (M)",
-    "unmute": "Activar sonido (M)",
-    "playback-speed": "Velocidad de reproducción",
-    "loop": "Bucle",
-    "disable-loop": "Deshabilitar bucle",
-    "rotate": "Rotar",
-    "picture-in-picture": "Imagen en imagen",
-    "exit-picture-in-picture": "Salir del modo imagen en imagen",
-    "fullscreen": "Pantalla completa (F)",
-    "exit-fullscreen": "Salir de la pantalla completa",
-    "unsupported-format": "La vista previa del medio no está disponible para este formato de archivo:\n{{mime}}",
-    "zoom-to-fit": "Acercamiento para llenar",
-    "zoom-reset": "Reiniciar acercamiento para llenar"
-  },
-  "mermaid": {
-    "placeholder": "Ingrese el contenido de su diagrama Mermaid o utilice uno de los diagramas de muestra a continuación.",
-    "sample_diagrams": "Diagramas de muestra:",
-    "sample_flowchart": "Diagrama de flujo",
-    "sample_class": "Clase",
-    "sample_sequence": "Secuencia",
-    "sample_entity_relationship": "Relación entre entidades",
-    "sample_state": "Estado",
-    "sample_mindmap": "Mapa mental",
-    "sample_architecture": "Arquitectura",
-    "sample_block": "Bloque",
-    "sample_c4": "C4",
-    "sample_gantt": "Gantt",
-    "sample_git": "Git",
-    "sample_kanban": "Kanban",
-    "sample_packet": "Paquete",
-    "sample_pie": "Pastel",
-    "sample_quadrant": "Cuadrante",
-    "sample_radar": "Radar",
-    "sample_requirement": "Requerimiento",
-    "sample_sankey": "Sankey",
-    "sample_timeline": "Línea de tiempo",
-    "sample_user_journey": "Jornada de usuario",
-    "sample_xy": "XY",
-    "sample_venn": "Venn",
-    "sample_ishikawa": "Ishikawa",
-    "sample_treemap": "Mapa de árbol"
   }
 }

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

@@ -1036,6 +1036,7 @@
     "unprotecting-title": "Statut de la non-protection"
   },
   "relation_map": {
+    "open_in_new_tab": "Ouvrir dans un nouvel onglet",
     "remove_note": "Supprimer la note",
     "edit_title": "Modifier le titre",
     "rename_note": "Renommer la note",

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

@@ -477,8 +477,7 @@
     "and_more": "... agus {{count}} eile.",
     "print_landscape": "Agus é á onnmhairiú go PDF, athraítear treoshuíomh an leathanaigh go tírdhreach seachas portráid.",
     "print_page_size": "Agus é á easpórtáil go PDF, athraítear méid an leathanaigh. Luachanna tacaithe: <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": "Dath",
-    "textarea": "Téacs Il-líne"
+    "color_type": "Dath"
   },
   "attribute_editor": {
     "help_text_body1": "Chun lipéad a chur leis, clóscríobh m.sh. <code>#rock</code> nó más mian leat luach a chur leis freisin ansin m.sh. <code>#year = 2020</code>",
@@ -1056,6 +1055,7 @@
     "unprotecting-title": "Stádas díchosanta"
   },
   "relation_map": {
+    "open_in_new_tab": "Oscail i gcluaisín nua",
     "remove_note": "Bain nóta",
     "edit_title": "Cuir an teideal in eagar",
     "rename_note": "Athainmnigh an nóta",
@@ -1571,8 +1571,7 @@
     "ai-chat": "Comhrá AI",
     "task-list": "Liosta Tascanna",
     "new-feature": "Nua",
-    "collections": "Bailiúcháin",
-    "spreadsheet": "Scarbhileog"
+    "collections": "Bailiúcháin"
   },
   "protect_note": {
     "toggle-on": "Cosain an nóta",
@@ -2228,52 +2227,5 @@
   },
   "setup_form": {
     "more_info": "Foghlaim níos mó"
-  },
-  "media": {
-    "play": "Seinn (Spás)",
-    "pause": "Sos (Spás)",
-    "back-10s": "10 soicind ar ais (eochair saighead chlé)",
-    "forward-30s": "Ar aghaidh 30s",
-    "mute": "Balbhaigh (M)",
-    "unmute": "Díbhalbhaigh (M)",
-    "playback-speed": "Luas athsheinm",
-    "loop": "Lúb",
-    "disable-loop": "Díchumasaigh an lúb",
-    "rotate": "Rothlaigh",
-    "picture-in-picture": "Pictiúr i bpictiúr",
-    "exit-picture-in-picture": "Scoir pictiúr-i-bpictiúr",
-    "fullscreen": "Lánscáileán (F)",
-    "exit-fullscreen": "Scoir lánscáileáin",
-    "unsupported-format": "Níl réamhamharc meán ar fáil don fhormáid comhaid seo:\n{{mime}}",
-    "zoom-to-fit": "Zúmáil chun líonadh",
-    "zoom-reset": "Athshocraigh súmáil chun líonadh"
-  },
-  "mermaid": {
-    "placeholder": "Clóscríobh ábhar do léaráid Maighdean Mhara nó bain úsáid as ceann de na léaráidí samplacha thíos.",
-    "sample_diagrams": "Léaráidí samplacha:",
-    "sample_flowchart": "Cairt Sreabhadh",
-    "sample_class": "Rang",
-    "sample_sequence": "Seicheamh",
-    "sample_entity_relationship": "Gaol Eintitis",
-    "sample_state": "Stát",
-    "sample_mindmap": "Léarscáil intinne",
-    "sample_architecture": "Ailtireacht",
-    "sample_block": "Bloc",
-    "sample_c4": "C4",
-    "sample_gantt": "Gantt",
-    "sample_git": "Git",
-    "sample_kanban": "Kanban",
-    "sample_packet": "Paicéad",
-    "sample_pie": "Pióg",
-    "sample_quadrant": "Ceathrú",
-    "sample_radar": "Radar",
-    "sample_requirement": "Riachtanas",
-    "sample_sankey": "Sankey",
-    "sample_timeline": "Amlíne",
-    "sample_treemap": "Léarscáil Crann",
-    "sample_user_journey": "Turas Úsáideora",
-    "sample_xy": "XY",
-    "sample_venn": "Venn",
-    "sample_ishikawa": "Ishikawa"
   }
 }

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

@@ -1049,6 +1049,7 @@
     "unprotecting-title": "अन-प्रोटेक्ट स्टेटस"
   },
   "relation_map": {
+    "open_in_new_tab": "नए टैब में खोलें",
     "remove_note": "नोट हटाएं",
     "edit_title": "टाइटल एडिट करें",
     "rename_note": "नोट का नाम बदलें",

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

@@ -520,7 +520,7 @@
     "custom_name_label": "Nome del motore di ricerca personalizzato",
     "custom_name_placeholder": "Personalizza il nome del motore di ricerca",
     "custom_url_label": "L'URL del motore di ricerca personalizzato deve includere {keyword} come segnaposto per il termine di ricerca.",
-    "custom_url_placeholder": "Personalizza indirizzo url del motore di ricerca"
+"custom_url_placeholder": "Personalizza l'URL del motore di ricerca"
   },
   "sql_table_schemas": {
     "tables": "Tabelle"
@@ -917,8 +917,7 @@
     "print_landscape": "Quando si esporta in PDF, cambia l'orientamento della pagina da verticale a orizzontale.",
     "print_page_size": "Quando si esporta in PDF, modifica le dimensioni della pagina. Valori supportati: <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": "Colore",
-    "share_root": "segna la nota che viene servita su /share root.",
-    "textarea": "Testo su più righe"
+    "share_root": "segna la nota che viene servita su /share root."
   },
   "attribute_editor": {
     "help_text_body1": "Per aggiungere un'etichetta, basta digitare ad esempio <code>#rock</code> oppure, se si desidera aggiungere anche un valore, ad esempio <code>#year = 2020</code>",
@@ -1425,6 +1424,7 @@
     "unprotecting-title": "Stato non protetto"
   },
   "relation_map": {
+    "open_in_new_tab": "Apri in una nuova scheda",
     "remove_note": "Rimuovi nota",
     "edit_title": "Modifica titolo",
     "rename_note": "Rinomina nota",
@@ -1717,8 +1717,7 @@
     "task-list": "Elenco delle attività",
     "new-feature": "Nuovo",
     "collections": "Collezioni",
-    "ai-chat": "Chat con IA",
-    "spreadsheet": "Foglio di calcolo"
+    "ai-chat": "Chat con IA"
   },
   "protect_note": {
     "toggle-on": "Proteggi la nota",
@@ -2198,52 +2197,5 @@
   },
   "setup_form": {
     "more_info": "Per saperne di più"
-  },
-  "media": {
-    "play": "Gioca (Barra spaziatrice)",
-    "pause": "Pausa (Barra spaziatrice)",
-    "back-10s": "Indietro di 10 (tasto freccia sinistra)",
-    "forward-30s": "Avanti 30s",
-    "mute": "Muto (M)",
-    "unmute": "Riattiva audio (M)",
-    "playback-speed": "Velocità di riproduzione",
-    "loop": "Ciclo",
-    "disable-loop": "Disattiva il ciclo",
-    "rotate": "Ruota",
-    "picture-in-picture": "Immagine nell'immagine",
-    "exit-picture-in-picture": "Esci dalla modalità picture-in-picture",
-    "fullscreen": "Schermo intero (F)",
-    "exit-fullscreen": "Esci dalla modalità a schermo intero",
-    "unsupported-format": "Per questo formato di file non è disponibile l'anteprima multimediale:\n{{mime}}",
-    "zoom-to-fit": "Ingrandisci per riempire",
-    "zoom-reset": "Ripristina lo zoom a schermo intero"
-  },
-  "mermaid": {
-    "placeholder": "Digita il contenuto del tuo diagramma Mermaid oppure utilizza uno dei diagrammi di esempio riportati di seguito.",
-    "sample_diagrams": "Esempi di diagrammi:",
-    "sample_flowchart": "Diagramma di flusso",
-    "sample_class": "Classe",
-    "sample_sequence": "Sequenza",
-    "sample_entity_relationship": "Relazioni tra entità",
-    "sample_state": "Stato",
-    "sample_mindmap": "Mappa mentale",
-    "sample_architecture": "Architettura",
-    "sample_block": "Blocco",
-    "sample_c4": "C4",
-    "sample_gantt": "Gantt",
-    "sample_git": "Git",
-    "sample_kanban": "Kanban",
-    "sample_packet": "Packet",
-    "sample_pie": "Torta",
-    "sample_quadrant": "Quadrante",
-    "sample_radar": "Radar",
-    "sample_requirement": "Requisito",
-    "sample_sankey": "Chiave",
-    "sample_timeline": "Cronologia",
-    "sample_treemap": "Treemap",
-    "sample_user_journey": "Percorso dell'utente",
-    "sample_xy": "XY",
-    "sample_venn": "Venn",
-    "sample_ishikawa": "Ishikawa"
   }
 }

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

@@ -588,7 +588,7 @@
     "note-map": "ノートマップ",
     "render-note": "レンダリングノート",
     "book": "コレクション",
-    "mermaid-diagram": "マーメイド図",
+    "mermaid-diagram": "Mermaidダイアグラム",
     "canvas": "キャンバス",
     "web-view": "Web ビュー",
     "mind-map": "マインドマップ",
@@ -600,8 +600,7 @@
     "task-list": "タスクリスト",
     "new-feature": "New",
     "collections": "コレクション",
-    "ai-chat": "AI チャット",
-    "spreadsheet": "スプレッドシート"
+    "ai-chat": "AI チャット"
   },
   "edited_notes": {
     "no_edited_notes_found": "この日の編集されたノートはまだありません...",
@@ -1180,8 +1179,7 @@
     "is_owned_by_note": "ノートによって所有されています",
     "and_more": "...その他 {{count}} 件。",
     "print_landscape": "PDF にエクスポートするときに、ページの向きを縦向きではなく横向きに変更します。",
-    "print_page_size": "PDF にエクスポートするときに、ページのサイズを変更します。サポートされる値: <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>。",
-    "textarea": "複数行テキスト"
+    "print_page_size": "PDF にエクスポートするときに、ページのサイズを変更します。サポートされる値: <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>。"
   },
   "link_context_menu": {
     "open_note_in_popup": "クイック編集",
@@ -1538,6 +1536,7 @@
     "url_placeholder": "http://web サイト..."
   },
   "relation_map": {
+    "open_in_new_tab": "新しいタブで開く",
     "remove_note": "ノートを削除",
     "edit_title": "タイトルを編集",
     "rename_note": "ノート名を変更",
@@ -2168,52 +2167,5 @@
   },
   "setup_form": {
     "more_info": "さらに詳しく"
-  },
-  "media": {
-    "play": "再生 (スペース)",
-    "pause": "一時停止 (スペース)",
-    "back-10s": "10 秒戻る (左矢印キー)",
-    "forward-30s": "30 秒進む",
-    "mute": "ミュート (M)",
-    "unmute": "ミュート解除 (M)",
-    "playback-speed": "再生速度",
-    "loop": "ループ",
-    "disable-loop": "ループを解除",
-    "rotate": "回転",
-    "picture-in-picture": "ピクチャーインピクチャー",
-    "exit-picture-in-picture": "ピクチャーインピクチャーを終了",
-    "fullscreen": "全画面表示 (F)",
-    "exit-fullscreen": "全画面表示を終了",
-    "unsupported-format": "このファイル形式ではメディアプレビューはご利用いただけません:\n{{mime}}",
-    "zoom-to-fit": "ズームして全体を表示",
-    "zoom-reset": "ズーム設定をリセット"
-  },
-  "mermaid": {
-    "placeholder": "マーメイド図の内容を入力するか、以下のサンプル図のいずれかを使用してください。",
-    "sample_diagrams": "サンプル図：",
-    "sample_flowchart": "フローチャート",
-    "sample_class": "クラス図",
-    "sample_sequence": "シーケンス図",
-    "sample_entity_relationship": "ER 図",
-    "sample_state": "状態遷移図",
-    "sample_mindmap": "マインドマップ",
-    "sample_architecture": "アーキテクチャ図",
-    "sample_block": "ブロック図",
-    "sample_c4": "C4 図",
-    "sample_gantt": "ガントチャート",
-    "sample_git": "Git グラフ",
-    "sample_kanban": "カンバン",
-    "sample_packet": "パケット図",
-    "sample_pie": "円グラフ",
-    "sample_quadrant": "4象限図",
-    "sample_radar": "レーダーチャート",
-    "sample_requirement": "要件図",
-    "sample_sankey": "サンキー図",
-    "sample_timeline": "タイムライン",
-    "sample_treemap": "ツリーマップ",
-    "sample_user_journey": "ユーザージャーニー図",
-    "sample_xy": "XY チャート",
-    "sample_venn": "ベン図",
-    "sample_ishikawa": "石川図"
   }
 }

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

@@ -51,7 +51,7 @@
     "branch_prefix_saved": "브랜치 접두사가 저장되었습니다.",
     "edit_branch_prefix_multiple": "{{count}}개의 지점 접두사 편집",
     "branch_prefix_saved_multiple": "{{count}}개의 지점에 대해 지점 접두사가 저장되었습니다.",
-    "affected_branches": "영향을 받은 분기 수({{count}}):"
+    "affected_branches": "영향을 받는 브랜치 수 ({{count}}):"
   },
   "bulk_actions": {
     "bulk_actions": "대량 작업",
@@ -134,27 +134,6 @@
     "notSet": "미설정",
     "goBackForwards": "히스토리에서 뒤로/앞으로 이동",
     "showJumpToNoteDialog": "<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">\"노트로 이동\" 대화 상자</a> 표시",
-    "scrollToActiveNote": "활성화된 노트로 스크롤 이동",
-    "collapseWholeTree": "모든 노트 트리를 접기",
-    "collapseSubTree": "하위 트리 접기",
-    "tabShortcuts": "탭 단축키",
-    "onlyInDesktop": "데스크톱에서만(일렉트론 빌드)",
-    "openEmptyTab": "빈 탭 열기",
-    "closeActiveTab": "활성 탭 닫기",
-    "jumpToParentNote": "부모 노트로 이동하기",
-    "activateNextTab": "다음 탭 활성화",
-    "activatePreviousTab": "이전 탭 활성화",
-    "creatingNotes": "노트 만들기",
-    "createNoteInto": "활성 노트에 새로운 하위 노트 추가",
-    "movingCloningNotes": "노트 이동/복제",
-    "moveNoteUpDown": "노트 목록에서 노트 위/아래 이동",
-    "selectAllNotes": "현재 레벨의 모든 노트 선택",
-    "selectNote": "노트 선택",
-    "deleteNotes": "노트/하위트리 삭제",
-    "editingNotes": "노트 편집",
-    "createEditLink": "외부 링크 생성/편집",
-    "createInternalLink": "내부 링크 생성",
-    "followLink": "커서아래 링크 따라가기",
-    "insertDateTime": "커서위치에 현재 날짜와 시간 삽입"
+    "scrollToActiveNote": "활성화된 노트로 스크롤 이동"
   }
 }

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

@@ -29,7 +29,7 @@
     "widget-render-error": {
       "title": "Nie udało się wyrenderować niestandardowego widżetu React"
     },
-    "widget-missing-parent": "Niestandardowy widżet nie ma zdefiniowanej obowiązkowej właściwości „{{property}}”.\n\nJeśli skrypt ma działać bez interfejsu użytkownika (UI) wyłącz go: '#run=frontendStartup'.",
+    "widget-missing-parent": "Niestandardowy widżet nie ma zdefiniowanej obowiązkowej właściwości „{{property}}”.\nJeśli skrypt ma działać bez interfejsu użytkownika (UI) wyłącz go:  '#run=frontendStartup'.",
     "open-script-note": "Otwórz notatkę ze skryptem",
     "scripting-error": "Błąd skryptu użytkownika: {{title}}"
   },
@@ -117,7 +117,7 @@
     "no_path_to_clone_to": "Brak ścieżki do sklonowania.",
     "note_cloned": "Notatka \"{{clonedTitle}}\" została sklonowana do \"{{targetTitle}}\"",
     "help_on_links": "Pomoc dotycząca linków",
-    "target_parent_note": "Docelowa notatka pierwotna"
+    "target_parent_note": "Docelowa notatka nadrzędna"
   },
   "help": {
     "title": "Ściągawka",
@@ -126,7 +126,7 @@
     "collapseExpand": "zwiń/rozwiń węzeł",
     "notSet": "nie ustawiono",
     "goBackForwards": "idź wstecz / do przodu w historii",
-    "showJumpToNoteDialog": "pokaż <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">\"Przejdź do\"</a>",
+    "showJumpToNoteDialog": "pokaż okno <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">\"Przejdź do\"</a>",
     "scrollToActiveNote": "przewiń do aktywnej notatki",
     "jumpToParentNote": "przejdź do notatki nadrzędnej",
     "collapseWholeTree": "zwiń całe drzewo notatek",
@@ -402,8 +402,7 @@
     "and_more": "... i {{count}} więcej.",
     "print_landscape": "Podczas eksportowania do PDF zmienia orientację strony na poziomą zamiast pionowej.",
     "print_page_size": "Podczas eksportowania do PDF zmienia rozmiar strony. Obsługiwane wartości: <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": "Kolor",
-    "textarea": "Wiele linii tekstu"
+    "color_type": "Kolor"
   },
   "import": {
     "importIntoNote": "Importuj do notatki",
@@ -1276,6 +1275,7 @@
     "unprotecting-title": "Status zdejmowania ochrony"
   },
   "relation_map": {
+    "open_in_new_tab": "Otwórz w nowej karcie",
     "remove_note": "Usuń notatkę",
     "edit_title": "Edytuj tytuł",
     "rename_note": "Zmień nazwę notatki",
@@ -1487,7 +1487,7 @@
     "custom_name_label": "Nazwa niestandardowej wyszukiwarki",
     "custom_name_placeholder": "Dostosuj nazwę wyszukiwarki",
     "custom_url_label": "URL niestandardowej wyszukiwarki powinien zawierać {keyword} jako symbol zastępczy dla wyszukiwanej frazy.",
-    "custom_url_placeholder": "Dostosuj url wyszukiwarki",
+    "custom_url_placeholder": "Dostosuj URL wyszukiwarki",
     "save_button": "Zapisz"
   },
   "tray": {
@@ -1614,7 +1614,7 @@
     "password_changed_success": "Hasło zostało zmienione. Trilium zostanie przeładowane po naciśnięciu OK."
   },
   "multi_factor_authentication": {
-    "title": "Uwierzytelnianie wieloskładnikowe",
+    "title": "Uwierzytelnianie wieloskładnikowe (MFA)",
     "description": "Uwierzytelnianie wieloskładnikowe (MFA) dodaje dodatkową warstwę zabezpieczeń do Twojego konta. Zamiast tylko wpisywać hasło do logowania, MFA wymaga podania jednego lub więcej dodatkowych dowodów tożsamości. W ten sposób, nawet jeśli ktoś zdobędzie Twoje hasło, nadal nie będzie mógł uzyskać dostępu do Twojego konta bez drugiej informacji. To jak dodanie dodatkowego zamka do drzwi, utrudniającego włamanie.<br><br>Proszę postępować zgodnie z poniższymi instrukcjami, aby włączyć MFA. Jeśli nie skonfigurujesz poprawnie, logowanie powróci do samego hasła.",
     "mfa_enabled": "Włącz uwierzytelnianie wieloskładnikowe",
     "mfa_method": "Metoda MFA",
@@ -1629,7 +1629,7 @@
     "totp_secret_generated": "Sekret TOTP wygenerowany",
     "totp_secret_warning": "Proszę zapisać wygenerowany sekret w bezpiecznym miejscu. Nie zostanie pokazany ponownie.",
     "totp_secret_regenerate_confirm": "Czy na pewno chcesz ponownie wygenerować sekret TOTP? To unieważni poprzedni sekret TOTP i wszystkie istniejące kody odzyskiwania.",
-    "recovery_keys_title": "Klucze odzyskiwania logowania jednokrotnego",
+    "recovery_keys_title": "Klucze odzyskiwania logowania jednokrotnego (SSO)",
     "recovery_keys_description": "Klucze odzyskiwania logowania jednokrotnego służą do logowania w przypadku braku dostępu do kodów Authenticator.",
     "recovery_keys_description_warning": "Klucze odzyskiwania nie zostaną pokazane ponownie po opuszczeniu strony, przechowuj je w bezpiecznym miejscu.<br>Po użyciu klucza odzyskiwania nie można go użyć ponownie.",
     "recovery_keys_error": "Błąd generowania kodów odzyskiwania",
@@ -1767,7 +1767,7 @@
     "book": "Kolekcja",
     "mermaid-diagram": "Diagram Mermaid",
     "canvas": "Płótno",
-    "web-view": "Widok strony web",
+    "web-view": "Widok WWW",
     "mind-map": "Mapa myśli",
     "file": "Plik",
     "image": "Obraz",
@@ -1780,8 +1780,7 @@
     "ai-chat": "Czat AI",
     "task-list": "Lista zadań",
     "new-feature": "Nowość",
-    "collections": "Kolekcje",
-    "spreadsheet": "Arkusz"
+    "collections": "Kolekcje"
   },
   "protect_note": {
     "toggle-on": "Chroń notatkę",
@@ -1816,9 +1815,9 @@
     "modal_title": "Konfiguracja listy wyróżnień",
     "menu_configure": "Konfiguracja listy wyróżnień...",
     "no_highlights": "Nie znaleziono wyróżnień.",
-    "title_with_count_one": "{{count}} wyróżnienie",
-    "title_with_count_few": "{{count}} wyróżnienia",
-    "title_with_count_many": "{{count}} wyróżnień"
+    "title_with_count_one": "{{count}} podświetlenie",
+    "title_with_count_few": "{{count}} podświetlenia",
+    "title_with_count_many": "{{count}} podświetleń"
   },
   "quick-search": {
     "placeholder": "Szybkie wyszukiwanie",
@@ -2071,7 +2070,7 @@
     "read_only_temporarily_disabled_description": "Ta notatka jest obecnie edytowalna, ale normalnie jest tylko do odczytu. Notatka powróci do trybu tylko do odczytu, gdy tylko przejdziesz do innej notatki.\n\nKliknij, aby ponownie włączyć tryb tylko do odczytu.",
     "shared_publicly": "Udostępniona publicznie",
     "shared_locally": "Udostępniona lokalnie",
-    "clipped_note": "Wycinek z sieci",
+    "clipped_note": "Wycinek WWW",
     "clipped_note_description": "Ta notatka została pierwotnie pobrana z {{url}}.\n\nKliknij, aby przejść do źródłowej strony internetowej.",
     "execute_script": "Uruchom skrypt",
     "execute_script_description": "Ta notatka jest notatką skryptową. Kliknij, aby wykonać skrypt.",
@@ -2198,52 +2197,5 @@
   },
   "setup_form": {
     "more_info": "Dowiedz się więcej"
-  },
-  "media": {
-    "fullscreen": "Pełny ekran (F)",
-    "mute": "Wycisz (M)",
-    "unmute": "Wyłącz wyciszenie (M)",
-    "exit-fullscreen": "Wyłącz pełny ekran",
-    "loop": "Pętla",
-    "disable-loop": "Wyłącz pętle",
-    "rotate": "Obróć",
-    "picture-in-picture": "Obraz w obrazie",
-    "pause": "Zatrzymaj (Space)",
-    "back-10s": "Cofnij 10s (Lewa strzałka)",
-    "forward-30s": "Do przodu 30s",
-    "playback-speed": "Szybkość odtwarzania",
-    "exit-picture-in-picture": "Wyjdź z obrazu w obrazie",
-    "zoom-to-fit": "Powiększ aby wypełnić",
-    "unsupported-format": "Podgląd multimediów nie jest dostępny dla tego formatu pliku\n{{mime}}",
-    "play": "Odtwórz (Space)",
-    "zoom-reset": "Zresetuj powiększenie"
-  },
-  "mermaid": {
-    "sample_architecture": "Architektura",
-    "sample_diagrams": "Przykład diagramu:",
-    "sample_flowchart": "Schemat blokowy",
-    "sample_class": "Klasa",
-    "sample_sequence": "Sekwencja",
-    "sample_timeline": "Oś czasu",
-    "sample_treemap": "Mapa drzewa",
-    "sample_xy": "XY",
-    "sample_venn": "Diagram Venna",
-    "sample_ishikawa": "Diagram Ishikawa",
-    "placeholder": "Wpisz treść swojego diagramu lub skorzystaj z jednego z przykładowych diagramów poniżej.",
-    "sample_entity_relationship": "Diagram związków encji",
-    "sample_state": "Diagram stanów",
-    "sample_mindmap": "Mapa myśli",
-    "sample_block": "Diagram blokowy",
-    "sample_c4": "C4",
-    "sample_gantt": "Wykres Gantta",
-    "sample_git": "Diagram Git",
-    "sample_kanban": "Tablica Kanban",
-    "sample_packet": "Diagram pakietów",
-    "sample_pie": "Wykres kołowy",
-    "sample_quadrant": "Diagram kwadrantowy",
-    "sample_radar": "Wykres radarowy",
-    "sample_requirement": "Diagram wymagań",
-    "sample_sankey": "Wykres Sankeya",
-    "sample_user_journey": "Mapa Podróży Użytkownika"
   }
 }

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

@@ -1047,6 +1047,7 @@
     "unprotecting-title": "Estado da remoção de proteção"
   },
   "relation_map": {
+    "open_in_new_tab": "Abrir em nova guia",
     "remove_note": "Remover nota",
     "edit_title": "Editar título",
     "rename_note": "Renomear nota",

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

@@ -1111,6 +1111,7 @@
     "start_session_button": "Iniciar sessão protegida"
   },
   "relation_map": {
+    "open_in_new_tab": "Abrir em nova aba",
     "remove_note": "Remover nota",
     "edit_title": "Editar título",
     "rename_note": "Renomear nota",

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

@@ -1054,6 +1054,7 @@
     "enter_title_of_new_note": "Introduceți titlul noii notițe",
     "note_already_in_diagram": "Notița „{{title}}” deja se află pe diagramă.",
     "note_not_found": "Notița „{{noteId}}” nu a putut fi găsită!",
+    "open_in_new_tab": "Deschide într-un tab nou",
     "remove_note": "Șterge notița",
     "remove_relation": "Șterge relația",
     "rename_note": "Redenumește notița",

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

@@ -257,7 +257,7 @@
     "collapseExpand": "свернуть/развернуть узел",
     "notSet": "не установлено",
     "goBackForwards": "назад / вперед в истории",
-    "showJumpToNoteDialog": "Перейти к <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">\"Перейти к\" окно</a>",
+    "showJumpToNoteDialog": "показать <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">окно \"Перейти к\"</a>",
     "scrollToActiveNote": "прокрутка к активной заметке",
     "jumpToParentNote": "переход к родительской заметке",
     "collapseWholeTree": "свернуть все дерево заметок",
@@ -471,7 +471,7 @@
     "calendar_root": "отмечает заметку, которая должна использоваться в качестве корневой для заметок дня. Только одна должна быть отмечена как таковая.",
     "archived": "заметки с этой меткой не будут отображаться в результатах поиска по умолчанию (а также в диалоговых окнах «Перейти к», «Добавить ссылку» и т. д.).",
     "exclude_from_export": "заметки (с их поддеревьями) не будут включены ни в один экспорт заметок",
-    "run": "определяет, при каких событиях должен запускаться скрипт. Возможные значения:<ul>\n<li>frontendStartup — при запуске (или обновлении) фронтенда Trilium, но не на мобильном устройстве.</li>\n<li>mobileStartup — при запуске (или обновлении) фронтенда Trilium на мобильном устройстве.</li>\n<li>backendStartup — при запуске бэкенда Trilium.</li>\n<li>hourly — запускать каждый час. Для указания времени можно использовать дополнительную метку <code>runAtHour</code>.</li>\n<li>daily — запускать раз в день.</li></ul>",
+    "run": "определяет, при каких событиях должен запускаться скрипт. Возможные значения:\n<ul>\n<li>frontendStartup — при запуске (или обновлении) фронтенда Trilium, но не на мобильном устройстве.</li>\n<li>mobileStartup — при запуске (или обновлении) фронтенда Trilium на мобильном устройстве.</li>\n<li>backendStartup — при запуске бэкенда Trilium.</li>\n<li>hourly — запускать каждый час. Для указания времени можно использовать дополнительную метку <code>runAtHour</code>.</li>\n<li>daily — запускать раз в день.</li>\n</ul>",
     "run_on_instance": "Определить, на каком экземпляре Trilium это должно выполняться. По умолчанию — для всех экземпляров.",
     "run_at_hour": "В какой час это должно выполняться? Следует использовать вместе с <code>#run=hourly</code>. Можно задать несколько раз для большего количества запусков в течение дня.",
     "disable_inclusion": "скрипты с этой меткой не будут включены в выполнение родительского скрипта.",
@@ -594,8 +594,7 @@
     "display-week-numbers": "Отображать номера недель",
     "hide-weekends": "Скрыть выходные",
     "raster": "Растр",
-    "show-scale": "Показать масштаб",
-    "show-labels": "Показать названия маркеров"
+    "show-scale": "Показать масштаб"
   },
   "editorfeatures": {
     "note_completion_enabled": "Включить автодополнение",
@@ -783,13 +782,7 @@
     "shared-indicator-tooltip": "Эта заметка опубликована",
     "shared-indicator-tooltip-with-url": "Эта заметка доступно публично по адресу: {{- url}}",
     "subtree-hidden-moved-description-other": "В дереве, к которому относится эта заметка, скрыты дочерние заметки.",
-    "subtree-hidden-moved-description-collection": "Эта коллекция скрывает свои дочерние заметки в дереве.",
-    "clone-indicator-tooltip": "У этой заметки {{- count}} родителей: {{- parents}}",
-    "clone-indicator-tooltip-single": "Эта заметка клонирована (1 дополнительный родитель: {{- parent}})",
-    "subtree-hidden-moved-title": "Добавлено в {{title}}",
-    "subtree-hidden-tooltip_one": "{{count}} дочерняя заметка скрыта",
-    "subtree-hidden-tooltip_few": "Скрыто {{count}} дочерних заметок",
-    "subtree-hidden-tooltip_many": "Скрыто {{count}} дочерних заметок"
+    "subtree-hidden-moved-description-collection": "Эта коллекция скрывает свои дочерние заметки в дереве."
   },
   "quick-search": {
     "no-results": "Результаты не найдены",
@@ -833,9 +826,7 @@
     "mind-map": "Mind Map",
     "geo-map": "Географическая карта",
     "task-list": "Список задач",
-    "confirm-change": "Не рекомендуется менять тип заметки, если её содержимое не пустое. Вы всё равно хотите продолжить?",
-    "ai-chat": "Чат с ИИ",
-    "spreadsheet": "Электронная таблица"
+    "confirm-change": "Не рекомендуется менять тип заметки, если её содержимое не пустое. Вы всё равно хотите продолжить?"
   },
   "tree-context-menu": {
     "open-in-popup": "Быстрое редактирование",
@@ -1162,8 +1153,7 @@
     "search_note_saved": "Заметка с настройкой поиска сохранена в {{- notePathTitle}}",
     "unknown_search_option": "Неизвестный параметр поиска {{searchOptionName}}",
     "actions_executed": "Действия выполнены.",
-    "view_options": "Просмотреть опции:",
-    "option": "опция"
+    "view_options": "Просмотреть опции:"
   },
   "ancestor": {
     "depth_label": "глубина",
@@ -1413,8 +1403,7 @@
     "type_text_to_filter": "Введите текст для фильтрации сочетаний клавиш...",
     "reload_app": "Перезагрузить приложение, чтобы применить изменения",
     "confirm_reset": "Вы действительно хотите сбросить все сочетания клавиш до значений по умолчанию?",
-    "set_all_to_default": "Установить все сочетания клавиш по умолчанию",
-    "no_results": "Не найдено ярлыков, соответствующих '{{filter}}'"
+    "set_all_to_default": "Установить все сочетания клавиш по умолчанию"
   },
   "sync_2": {
     "timeout_unit": "миллисекунд",
@@ -1625,6 +1614,7 @@
     "rename_note": "Переименовать заметку",
     "remove_relation": "Удалить отношение",
     "default_new_note_title": "новая заметка",
+    "open_in_new_tab": "Открыть в новой вкладке",
     "confirm_remove_relation": "Вы уверены, что хотите удалить связь?",
     "enter_new_title": "Введите новое название заметки:",
     "note_not_found": "Заметка {{noteId}} не найдена!",
@@ -1723,8 +1713,7 @@
     "delete_this_note": "Удалить эту заметку",
     "insert_child_note": "Вставить дочернюю заметку",
     "note_revisions": "История изменений",
-    "content_language_switcher": "Язык содержимого: {{language}}",
-    "backlinks": "Ссылки"
+    "content_language_switcher": "Язык содержимого: {{language}}"
   },
   "svg_export_button": {
     "button_title": "Экспортировать диаграмму как SVG"
@@ -1801,8 +1790,7 @@
   },
   "search_result": {
     "no_notes_found": "По заданным параметрам поиска заметки не найдены.",
-    "search_not_executed": "Поиск ещё не выполнен.",
-    "search_now": "Искать сейчас"
+    "search_not_executed": "Поиск ещё не выполнен. Нажмите кнопку «Поиск» выше, чтобы увидеть результаты."
   },
   "empty": {
     "search_placeholder": "поиск заметки по ее названию",
@@ -2000,12 +1988,10 @@
     "print_report_collection_content_few": "{{count}} заметки в коллекции не удалось распечатать, поскольку они не поддерживаются или защищены.",
     "print_report_collection_content_many": "{{count}} заметок в коллекции не удалось распечатать, поскольку они не поддерживаются или защищены.",
     "print_report_collection_details_button": "Подробнее",
-    "print_report_collection_details_ignored_notes": "Пропущенные заметки",
-    "print_report_error_title": "Не удалось напечатать",
-    "print_report_stack_trace": "Трассировка стека"
+    "print_report_collection_details_ignored_notes": "Пропущенные заметки"
   },
   "book": {
-    "no_children_help": "В этой коллекции нет дочерних заметок, поэтому отображать нечего.",
+    "no_children_help": "В этой коллекции нет дочерних заметок, поэтому отображать нечего. Подробности см. в <a href=\"https://triliumnext.github.io/Docs/Wiki/book-note.html\">wiki</a>.",
     "drag_locked_title": "Защищено от изменения",
     "drag_locked_message": "Перетаскивание не допускается, так как коллекция защищена от редактирования."
   },
@@ -2021,9 +2007,7 @@
     "rendering_error": "Невозможно отобразить содержимое из-за ошибки."
   },
   "pagination": {
-    "total_notes": "{{count}} заметок",
-    "prev_page": "Предыдущая страница",
-    "next_page": "Следующая страница"
+    "total_notes": "{{count}} заметок"
   },
   "status_bar": {
     "attributes_one": "{{count}} атрибут",
@@ -2153,49 +2137,5 @@
   },
   "platform_indicator": {
     "available_on": "Доступно для {{platform}}"
-  },
-  "render": {
-    "setup_title": "Отобразить настраиваемый HTML или Preact JSX в этой заметке",
-    "setup_create_sample_preact": "Создать образец заметки с помощью Preact",
-    "setup_create_sample_html": "Создать образец заметки с помощью HTML",
-    "setup_sample_created": "Образец заметки был создан в качестве дочерней записи.",
-    "disabled_description": "Эти заметки для рендера поступают из внешнего источника. Чтобы защитить вас от вредоносного содержимого, они не включены по умолчанию. Убедитесь, что вы доверяете источнику до его включения.",
-    "disabled_button_enable": "Включить заметки для рендера"
-  },
-  "web_view_setup": {
-    "title": "Создайте живой просмотр веб-страницы прямо в Trilium",
-    "url_placeholder": "Введите или вставьте адрес сайта, например https://triliumnotes.org",
-    "create_button": "Создать веб-просмотр",
-    "invalid_url_title": "Неверный адрес",
-    "invalid_url_message": "Введите корректный веб-адрес, например https://triliumnotes.org.",
-    "disabled_description": "Этот веб-просмотр был импортирован из внешнего источника. Чтобы защитить вас от фишинга или вредоносного контента, он не загружается автоматически. Вы можете включить его, если доверяете источнику.",
-    "disabled_button_enable": "Включить просмотр веб-страниц"
-  },
-  "active_content_badges": {
-    "type_icon_pack": "Набор иконок",
-    "type_backend_script": "Бэкенд скрипт",
-    "type_frontend_script": "Фронтенд скрипт",
-    "type_widget": "Виджет",
-    "type_app_css": "Пользовательский CSS",
-    "type_render_note": "Заметка для рендера",
-    "type_web_view": "Просмотр веб-страницы",
-    "type_app_theme": "Пользовательская тема",
-    "toggle_tooltip_enable_tooltip": "Нажмите, чтобы включить этот {{type}}.",
-    "toggle_tooltip_disable_tooltip": "Нажмите, чтобы выключить этот {{type}}.",
-    "menu_docs": "Открытая документация",
-    "menu_execute_now": "Выполнить скрипт сейчас",
-    "menu_run": "Выполнять автоматически",
-    "menu_run_disabled": "Вручную",
-    "menu_run_backend_startup": "При запуске бэкенда",
-    "menu_run_hourly": "Ежечасно",
-    "menu_run_daily": "Ежедневно",
-    "menu_run_frontend_startup": "Когда запускается интерфейс ПК",
-    "menu_run_mobile_startup": "При запуске мобильного интерфейса",
-    "menu_change_to_widget": "Изменить виджет",
-    "menu_change_to_frontend_script": "Перейти к фронтенд скрипту",
-    "menu_theme_base": "Базовая тема"
-  },
-  "setup_form": {
-    "more_info": "Узнать больше"
   }
 }

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

@@ -3,38 +3,6 @@
     "title": "Om Trilium Notes",
     "homepage": "Hemsida:",
     "app_version": "App version:",
-    "db_version": "DB version:",
-    "sync_version": "Sync version:",
-    "build_date": "Bygg datum:",
-    "build_revision": "Bygg version:",
-    "data_directory": "Data sökväg:"
-  },
-  "toast": {
-    "critical-error": {
-      "title": "Kritiskt fel",
-      "message": "Ett kritiskt fel har inträffat som förhindrar klientprogrammet från att starta:\n\n{{message}}\n\nDetta beror troligen på att ett skript har misslyckats på ett oväntat sätt. Försök att starta programmet i felsäkert läge och åtgärda problemet."
-    },
-    "widget-error": {
-      "title": "Misslyckades att starta widget",
-      "message-custom": "Anpassad widget från anteckning med ID \"{{id}}\", med rubrik \"{{title}}\" kunde inte startas på grund av:\n\n{{message}}",
-      "message-unknown": "Okänd widget kunde inte startas på grund av:\n\n{{message}}"
-    },
-    "bundle-error": {
-      "title": "Misslyckades att starta ett anpassat skript",
-      "message": "Skript kunde inte startas på grund av:\n\n{{message}}"
-    },
-    "widget-list-error": {
-      "title": "Misslyckades att hämta widget-listan från servern"
-    },
-    "widget-render-error": {
-      "title": "Misslyckades att renderera en anpassad React-widget"
-    },
-    "widget-missing-parent": "Anpassad widget saknar '{{property}}', som måste vara definierad.\n\nOm skriptet är avsett att köras utan gränssnitt, använd '#run-frontendStartup' istället.",
-    "open-script-note": "Öppna skriptanteckning",
-    "scripting-error": "Fel i anpassat skript: {{title}}"
-  },
-  "add_link": {
-    "add_link": "Infoga länk",
-    "help_on_links": "Hjälp om länkar"
+    "db_version": "DB version:"
   }
 }

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

@@ -446,8 +446,7 @@
     "app_theme_base": "設定為 \"next\"、\"next-light \" 或 \"next-dark\"，以使用相應的 TriliumNext 主題（自動、淺色或深色）作為自訂主題的基礎，而非傳統主題。",
     "print_landscape": "匯出為 PDF 時，將頁面方向更改為橫向而非縱向。",
     "print_page_size": "在匯出 PDF 時更改頁面大小。支援的值：<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": "顏色",
-    "textarea": "多行文字"
+    "color_type": "顏色"
   },
   "attribute_editor": {
     "help_text_body1": "要新增標籤，只需輸入例如 <code>#rock</code> 或者如果您還想新增值，則例如 <code>#year = 2020</code>",
@@ -1047,6 +1046,7 @@
     "unprotecting-title": "解除保護狀態"
   },
   "relation_map": {
+    "open_in_new_tab": "在新分頁中打開",
     "remove_note": "刪除筆記",
     "edit_title": "編輯標題",
     "rename_note": "重新命名筆記",
@@ -1496,8 +1496,7 @@
     "task-list": "任務列表",
     "new-feature": "新增",
     "collections": "集合",
-    "ai-chat": "AI 聊天",
-    "spreadsheet": "試算表"
+    "ai-chat": "AI 聊天"
   },
   "protect_note": {
     "toggle-on": "保護筆記",
@@ -2183,52 +2182,5 @@
   },
   "setup_form": {
     "more_info": "了解更多"
-  },
-  "media": {
-    "play": "播放 (空白鍵)",
-    "pause": "暫停 (空白鍵)",
-    "back-10s": "往前 10 秒 (左方向鍵)",
-    "forward-30s": "往後 30 秒",
-    "mute": "靜音 (M)",
-    "unmute": "解除靜音 (M)",
-    "playback-speed": "播放速度",
-    "loop": "循環",
-    "disable-loop": "解除循環",
-    "rotate": "旋轉",
-    "picture-in-picture": "畫中畫",
-    "exit-picture-in-picture": "退出畫中畫",
-    "fullscreen": "全螢幕 (F)",
-    "exit-fullscreen": "退出全螢幕",
-    "unsupported-format": "此檔案格式不支援媒體預覽：\n{{mime}}",
-    "zoom-to-fit": "放大至填滿畫面",
-    "zoom-reset": "重設放大至填滿畫面"
-  },
-  "mermaid": {
-    "placeholder": "請輸入您的美人魚圖表內容，或選用下方其中一個範例圖表。",
-    "sample_diagrams": "範例圖表：",
-    "sample_flowchart": "流程圖",
-    "sample_class": "階層圖",
-    "sample_sequence": "時序圖",
-    "sample_entity_relationship": "實體關係圖",
-    "sample_state": "狀態圖",
-    "sample_mindmap": "心智圖",
-    "sample_architecture": "架構圖",
-    "sample_block": "區塊圖",
-    "sample_c4": "C4 圖",
-    "sample_gantt": "甘特圖",
-    "sample_git": "Git 分支圖",
-    "sample_kanban": "看板圖",
-    "sample_packet": "數據包圖",
-    "sample_pie": "圓餅圖",
-    "sample_quadrant": "象限圖",
-    "sample_radar": "雷達圖",
-    "sample_requirement": "需求圖",
-    "sample_sankey": "桑基圖",
-    "sample_timeline": "時間軸",
-    "sample_treemap": "樹狀圖",
-    "sample_user_journey": "使用者旅程",
-    "sample_xy": "XY 圖表",
-    "sample_venn": "韋恩圖",
-    "sample_ishikawa": "魚骨圖"
   }
 }

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

@@ -1151,6 +1151,7 @@
     "unprotecting-title": "Статус зняття захисту"
   },
   "relation_map": {
+    "open_in_new_tab": "Відкрити в новій вкладці",
     "remove_note": "Видалити нотатку",
     "edit_title": "Редагувати заголовок",
     "rename_note": "Перейменувати нотатку",

apps/client/src/types.d.ts

@@ -6,6 +6,7 @@ import type { PrintReport } from "./print";
 import type { lint } from "./services/eslint";
 import type { Froca } from "./services/froca-interface";
 import { Library } from "./services/library_loader";
+import { Suggestion } from "./services/note_autocomplete";
 import server from "./services/server";
 import utils from "./services/utils";
 
@@ -82,7 +83,34 @@ declare global {
         "note-load-progress": CustomEvent<{ progress: number }>;
     }
 
+    interface AutoCompleteConfig {
+        appendTo?: HTMLElement | null;
+        hint?: boolean;
+        openOnFocus?: boolean;
+        minLength?: number;
+        tabAutocomplete?: boolean;
+        autoselect?: boolean;
+        dropdownMenuContainer?: HTMLElement;
+        debug?: boolean;
+    }
+
+    type AutoCompleteCallback = (values: AutoCompleteArg[]) => void;
+
+    interface AutoCompleteArg {
+        name?: string;
+        value?: string;
+        notePathTitle?: string;
+        displayKey?: "name" | "value" | "notePathTitle";
+        cache?: boolean;
+        source?: (term: string, cb: AutoCompleteCallback) => void,
+        templates?: {
+            suggestion: (suggestion: Suggestion) => string | undefined
+        }
+    }
+
     interface JQuery {
+        autocomplete: (action?: "close" | "open" | "destroy" | "val" | AutoCompleteConfig, args?: AutoCompleteArg[] | string) => JQuery<HTMLElement>;
+
         getSelectedNotePath(): string | undefined;
         getSelectedNoteId(): string | null;
         setSelectedNotePath(notePath: string | null | undefined);

apps/client/src/widgets/NoteDetail.tsx

@@ -40,21 +40,6 @@ export default function NoteDetail() {
     const widgetRequestId = useRef(0);
     const hasFixedTree = note && noteContext?.hoistedNoteId === "_lbMobileRoot" && isMobile() && note.noteId.startsWith("_lbMobile");
 
-    // Defer loading for tabs that haven't been active yet (e.g. on app refresh).
-    // Special contexts (ntxId starting with "_", e.g. popup editor) are always considered active.
-    const isSpecialContext = ntxId?.startsWith("_") ?? false;
-    const [ hasTabBeenActive, setHasTabBeenActive ] = useState(() => isSpecialContext || (noteContext?.isActive() ?? false));
-    useEffect(() => {
-        if (!hasTabBeenActive && noteContext?.isActive()) {
-            setHasTabBeenActive(true);
-        }
-    }, [ noteContext, hasTabBeenActive ]);
-    useTriliumEvent("activeNoteChanged", ({ ntxId: eventNtxId }) => {
-        if (eventNtxId === ntxId && !hasTabBeenActive) {
-            setHasTabBeenActive(true);
-        }
-    });
-
     const props: TypeWidgetProps = {
         note: note!,
         viewScope,
@@ -64,7 +49,7 @@ export default function NoteDetail() {
     };
 
     useEffect(() => {
-        if (!type || !hasTabBeenActive) return;
+        if (!type) return;
         const requestId = ++widgetRequestId.current;
 
         if (!noteTypesToRender[type]) {
@@ -83,7 +68,7 @@ export default function NoteDetail() {
         } else {
             setActiveNoteType(type);
         }
-    }, [ note, viewScope, type, noteTypesToRender, hasTabBeenActive ]);
+    }, [ note, viewScope, type, noteTypesToRender ]);
 
     // Detect note type changes.
     useTriliumEvent("entitiesReloaded", async ({ loadResults }) => {
@@ -262,8 +247,9 @@ function NoteDetailWrapper({ Element, type, isVisible, isFullHeight, props }: {
     useEffect(() => {
         if (isVisible) {
             setCachedProps(props);
+        } else {
+            // Do nothing, keep the old props.
         }
-        // When not visible, keep the old props to avoid re-rendering in the background.
     }, [ props, isVisible ]);
 
     const typeMapping = TYPE_MAPPINGS[type];
@@ -274,7 +260,7 @@ function NoteDetailWrapper({ Element, type, isVisible, isFullHeight, props }: {
                 height: isFullHeight ? "100%" : ""
             }}
         >
-            <Element {...cachedProps} />
+            { <Element {...cachedProps} /> }
         </div>
     );
 }

apps/client/src/widgets/NoteWrapper.bak

@@ -11,12 +11,6 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
 
     private noteContext?: NoteContext;
 
-    constructor() {
-        super("column");
-
-        this.css("flex-grow", "1").collapsible();
-    }
-
     setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
         this.noteContext = noteContext;
 
@@ -53,8 +47,6 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
             this.$widget.addClass("active");
         }
 
-        this.$widget.addClass("component note-split");
-
         const note = this.noteContext?.note;
         if (!note) {
             this.$widget.addClass("bgfx empty-note");
@@ -83,7 +75,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
             return true;
         }
 
-        if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/") || note.mime.startsWith("audio/"))) {
+        if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/"))) {
             return true;
         }
 
@@ -108,7 +100,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
             return true;
         }
 
-        if (note.type === "file" && (MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime) || note.mime.startsWith("audio/"))) {
+        if (note.type === "file" && MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime)) {
             return true;
         }
 

apps/client/src/widgets/NoteWrapper.css

@@ -0,0 +1,16 @@
+.component.note-split {
+    display: flex;
+    flex-grow: 1;
+    flex-direction: column;
+    contain: none;
+
+    > .title-row {
+        display: flex;
+        flex-direction: row;
+        contain: none;
+    }
+}
+
+body.desktop .component.note-split > .title-row > * {
+    margin: 5px;
+}

apps/client/src/widgets/NoteWrapper.tsx

@@ -0,0 +1,96 @@
+import "./NoteWrapper.css";
+
+import { isExperimentalFeatureEnabled } from "../services/experimental_features";
+import { isDesktop } from "../services/utils";
+import ApiLog from "./api_log";
+import ClosePaneButton from "./buttons/close_pane_button";
+import CreatePaneButton from "./buttons/create_pane_button";
+import MovePaneButton from "./buttons/move_pane_button";
+import NoteList from "./collections/NoteList";
+import ScrollingContainer from "./containers/ScrollingContainer";
+import FindWidget from "./find";
+import FloatingButtons from "./FloatingButtons";
+import { DESKTOP_FLOATING_BUTTONS } from "./FloatingButtonsDefinitions";
+import { LegacyWidgetRenderer } from "./launch_bar/LauncherDefinitions";
+import SpacerWidget from "./launch_bar/SpacerWidget";
+import InlineTitle from "./layout/InlineTitle";
+import NoteBadges from "./layout/NoteBadges";
+import NoteTitleActions from "./layout/NoteTitleActions";
+import MobileDetailMenu from "./mobile_widgets/mobile_detail_menu";
+import ToggleSidebarButton from "./mobile_widgets/toggle_sidebar_button";
+import NoteIcon from "./note_icon";
+import NoteTitleWidget from "./note_title";
+import NoteDetail from "./NoteDetail";
+import PromotedAttributes from "./PromotedAttributes";
+import ReadOnlyNoteInfoBar from "./ReadOnlyNoteInfoBar";
+import NoteActions from "./ribbon/NoteActions";
+import Ribbon from "./ribbon/Ribbon";
+import ScrollPadding from "./scroll_padding";
+import SearchResult from "./search_result";
+import SharedInfo from "./shared_info";
+import MobileEditorToolbar from "./type_widgets/text/mobile_editor_toolbar";
+import WatchedFileUpdateStatusWidget from "./watched_file_update_status";
+
+const isNewLayout = isExperimentalFeatureEnabled("new-layout");
+const cachedIsDesktop = isDesktop();
+const cachedIsMobile = !cachedIsDesktop;
+
+export default function NoteWrapper() {
+    return (
+        <div className="component note-split">
+            <TitleRow />
+            {!isNewLayout && <Ribbon />}
+            {cachedIsDesktop && <LegacyWidgetRenderer widget={new WatchedFileUpdateStatusWidget()} />}
+            {!isNewLayout && <FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />}
+            <ScrollingContainer>
+                {isNewLayout ? (
+                    <>
+                        <InlineTitle />
+                        <NoteTitleActions />
+                    </>
+                ) : (
+                    <>
+                        <ReadOnlyNoteInfoBar />
+                        <SharedInfo />
+                    </>
+                )}
+                {!isNewLayout && <PromotedAttributes />}
+                <NoteDetail />
+                <NoteList media="screen" />
+                <SearchResult />
+                <ScrollPadding />
+            </ScrollingContainer>
+            <ApiLog />
+            {cachedIsMobile && <MobileEditorToolbar />}
+            <LegacyWidgetRenderer widget={new FindWidget()} />
+        </div>
+    );
+}
+
+function TitleRow() {
+    return (
+        <div className="component title-row note-split-title">
+            {cachedIsMobile && <ToggleSidebarButton />}
+            <NoteIcon />
+            <NoteTitleWidget />
+            {isNewLayout && <NoteBadges />}
+            {cachedIsDesktop ? (
+                <>
+                    <SpacerWidget baseSize={0} growthFactor={1} />
+                    {!isNewLayout ? (
+                        <>
+                            <MovePaneButton direction="left" />
+                            <MovePaneButton direction="right" />
+                            <ClosePaneButton />
+                            <CreatePaneButton />
+                        </>
+                    ) : (
+                        <NoteActions />
+                    )}
+                </>
+            ) : (
+                <MobileDetailMenu />
+            )}
+        </div>
+    );
+}

apps/client/src/widgets/PromotedAttributes.tsx

@@ -2,13 +2,12 @@ import "./PromotedAttributes.css";
 
 import { UpdateAttributeResponse } from "@triliumnext/commons";
 import clsx from "clsx";
-import { ComponentChild, createElement, HTMLInputTypeAttribute, InputHTMLAttributes, MouseEventHandler, TargetedEvent, TargetedInputEvent } from "preact";
+import { ComponentChild, HTMLInputTypeAttribute, InputHTMLAttributes, MouseEventHandler, TargetedEvent, TargetedInputEvent } from "preact";
 import { Dispatch, StateUpdater, useCallback, useEffect, useRef, useState } from "preact/hooks";
 
 import NoteContext from "../components/note_context";
 import FAttribute from "../entities/fattribute";
 import FNote from "../entities/fnote";
-import attributeAutocompleteService from "../services/attribute_autocomplete";
 import { Attribute } from "../services/attribute_parser";
 import attributes from "../services/attributes";
 import { t } from "../services/i18n";
@@ -37,7 +36,8 @@ interface CellProps {
     setCellToFocus(cell: Cell): void;
 }
 
-type OnChangeEventData = TargetedEvent<HTMLInputElement | HTMLTextAreaElement, Event> | InputEvent;
+type OnChangeEventData = TargetedEvent<HTMLInputElement, Event> | InputEvent | JQuery.TriggeredEvent<HTMLInputElement, undefined, HTMLInputElement, HTMLInputElement>;
+type OnChangeListener = (e: OnChangeEventData) => void | Promise<void>;
 
 export default function PromotedAttributes() {
     const { note, componentId, noteContext } = useNoteContext();
@@ -171,9 +171,8 @@ function PromotedAttributeCell(props: CellProps) {
     );
 }
 
-const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute | undefined> = {
+const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute> = {
     text: "text",
-    textarea: undefined,
     number: "number",
     boolean: "checkbox",
     date: "date",
@@ -201,9 +200,10 @@ function LabelInput(props: CellProps & { inputId: string }) {
     }, [ cell, componentId, note, setCells ]);
     const extraInputProps: InputHTMLAttributes = {};
 
-    useTextLabelAutocomplete(inputId, valueAttr, definition, async (value) => {
-        setDraft(value);
-        await updateAttribute(note, cell, componentId, value, setCells);
+    useTextLabelAutocomplete(inputId, valueAttr, definition, (e) => {
+        if (e.currentTarget instanceof HTMLInputElement) {
+            setDraft(e.currentTarget.value);
+        }
     });
 
     // React to model changes.
@@ -226,21 +226,20 @@ function LabelInput(props: CellProps & { inputId: string }) {
         }
     }
 
-
-    const inputNode = createElement(definition.labelType === "textarea" ? "textarea" : "input", {
-        className: "form-control promoted-attribute-input",
-        tabIndex: 200 + definitionAttr.position,
-        id: inputId,
-        type: LABEL_MAPPINGS[definition.labelType ?? "text"],
-        value: valueDraft,
-        checked: definition.labelType === "boolean" ? valueAttr.value === "true" : undefined,
-        placeholder: t("promoted_attributes.unset-field-placeholder"),
-        "data-attribute-id": valueAttr.attributeId,
-        "data-attribute-type": valueAttr.type,
-        "data-attribute-name": valueAttr.name,
-        onBlur: onChangeListener,
-        ...extraInputProps
-    });
+    const inputNode = <input
+        className="form-control promoted-attribute-input"
+        tabIndex={200 + definitionAttr.position}
+        id={inputId}
+        type={LABEL_MAPPINGS[definition.labelType ?? "text"]}
+        value={valueDraft}
+        checked={definition.labelType === "boolean" ? valueAttr.value === "true" : undefined}
+        placeholder={t("promoted_attributes.unset-field-placeholder")}
+        data-attribute-id={valueAttr.attributeId}
+        data-attribute-type={valueAttr.type}
+        data-attribute-name={valueAttr.name}
+        onBlur={onChangeListener}
+        {...extraInputProps}
+    />;
 
     if (definition.labelType === "boolean") {
         return <>
@@ -259,7 +258,7 @@ function LabelInput(props: CellProps & { inputId: string }) {
                     className="open-external-link-button"
                     icon="bx bx-window-open"
                     title={t("promoted_attributes.open_external_link")}
-                    onClick={() => {
+                    onClick={(e) => {
                         const inputEl = document.getElementById(inputId) as HTMLInputElement | null;
                         const url = inputEl?.value;
                         if (url) {
@@ -414,31 +413,55 @@ function InputButton({ icon, className, title, onClick }: {
     );
 }
 
-function useTextLabelAutocomplete(inputId: string, valueAttr: Attribute, definition: DefinitionObject, onValueChange: (value: string) => void) {
+function useTextLabelAutocomplete(inputId: string, valueAttr: Attribute, definition: DefinitionObject, onChangeListener: OnChangeListener) {
+    const [ attributeValues, setAttributeValues ] = useState<{ value: string }[] | null>(null);
+
+    // Obtain data.
     useEffect(() => {
         if (definition.labelType !== "text") {
             return;
         }
 
+        server.get<string[]>(`attribute-values/${encodeURIComponent(valueAttr.name)}`).then((_attributesValues) => {
+            setAttributeValues(_attributesValues.map((attribute) => ({ value: attribute })));
+        });
+    }, [ definition.labelType, valueAttr.name ]);
+
+    // Initialize autocomplete.
+    useEffect(() => {
+        if (attributeValues?.length === 0) return;
         const el = document.getElementById(inputId) as HTMLInputElement | null;
-        if (!el) {
-            return;
-        }
+        if (!el) return;
 
         const $input = $(el);
-        attributeAutocompleteService.initLabelValueAutocomplete({
-            $el: $input,
-            open: false,
-            nameCallback: () => valueAttr.name,
-            onValueChange: (value) => {
-                onValueChange(value);
-            }
-        });
+        $input.autocomplete(
+            {
+                appendTo: document.querySelector("body"),
+                hint: false,
+                autoselect: false,
+                openOnFocus: true,
+                minLength: 0,
+                tabAutocomplete: false
+            },
+            [
+                {
+                    displayKey: "value",
+                    source (term, cb) {
+                        term = term.toLowerCase();
 
-        return () => {
-            attributeAutocompleteService.destroyAutocomplete($input);
-        };
-    }, [ definition.labelType, inputId, onValueChange, valueAttr.name ]);
+                        const filtered = (attributeValues ?? []).filter((attr) => attr.value.toLowerCase().includes(term));
+
+                        cb(filtered);
+                    }
+                }
+            ]
+        );
+
+        $input.off("autocomplete:selected");
+        $input.on("autocomplete:selected", onChangeListener);
+
+        return () => $input.autocomplete("destroy");
+    }, [ inputId, attributeValues, onChangeListener ]);
 }
 
 async function updateAttribute(note: FNote, cell: Cell, componentId: string, value: string | undefined, setCells: Dispatch<StateUpdater<Cell[] | undefined>>) {

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

@@ -1,19 +1,18 @@
-import appContext from "../../components/app_context.js";
-import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
-import type { Attribute } from "../../services/attribute_parser.js";
-import { HEADLESS_AUTOCOMPLETE_PANEL_SELECTOR } from "../../services/autocomplete_core.js";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";
-import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
-import froca from "../../services/froca.js";
 import { t } from "../../services/i18n.js";
+import server from "../../services/server.js";
+import froca from "../../services/froca.js";
 import linkService from "../../services/link.js";
+import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
 import noteAutocompleteService from "../../services/note_autocomplete.js";
 import promotedAttributeDefinitionParser from "../../services/promoted_attribute_definition_parser.js";
-import server from "../../services/server.js";
-import shortcutService from "../../services/shortcuts.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import SpacedUpdate from "../../services/spaced_update.js";
 import utils from "../../services/utils.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import shortcutService from "../../services/shortcuts.js";
+import appContext from "../../components/app_context.js";
+import type { Attribute } from "../../services/attribute_parser.js";
+import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
+import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";
 
 const TPL = /*html*/`
 <div class="attr-detail tn-tool-dialog">
@@ -30,7 +29,6 @@ const TPL = /*html*/`
             max-height: 600px;
             overflow: auto;
             box-shadow: 10px 10px 93px -25px black;
-            contain: none;
         }
 
         .attr-help td {
@@ -139,7 +137,6 @@ const TPL = /*html*/`
             <td>
                 <select class="attr-input-label-type form-control">
                   <option value="text">${t("attribute_detail.text")}</option>
-                  <option value="textarea">${t("attribute_detail.textarea")}</option>
                   <option value="number">${t("attribute_detail.number")}</option>
                   <option value="boolean">${t("attribute_detail.boolean")}</option>
                   <option value="date">${t("attribute_detail.date")}</option>
@@ -345,7 +342,6 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
     private $relatedNotesList!: JQuery<HTMLElement>;
     private $relatedNotesMoreNotes!: JQuery<HTMLElement>;
     private $attrHelp!: JQuery<HTMLElement>;
-    private $statusBar?: JQuery<HTMLElement>;
 
     private relatedNotesSpacedUpdate!: SpacedUpdate;
     private attribute!: Attribute;
@@ -376,13 +372,13 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
             }
         });
         this.$inputName.on("change", () => this.userEditedAttribute());
+        this.$inputName.on("autocomplete:closed", () => this.userEditedAttribute());
 
         this.$inputName.on("focus", () => {
             attributeAutocompleteService.initAttributeNameAutocomplete({
                 $el: this.$inputName,
                 attributeType: () => (["relation", "relation-definition"].includes(this.attrType || "") ? "relation" : "label"),
-                open: true,
-                onValueChange: () => this.userEditedAttribute(),
+                open: true
             });
         });
 
@@ -395,12 +391,12 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
             }
         });
         this.$inputValue.on("change", () => this.userEditedAttribute());
+        this.$inputValue.on("autocomplete:closed", () => this.userEditedAttribute());
         this.$inputValue.on("focus", () => {
             attributeAutocompleteService.initLabelValueAutocomplete({
                 $el: this.$inputValue,
                 open: true,
-                nameCallback: () => String(this.$inputName.val()),
-                onValueChange: () => this.userEditedAttribute(),
+                nameCallback: () => String(this.$inputName.val())
             });
         });
 
@@ -481,9 +477,7 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
         this.$relatedNotesMoreNotes = this.$relatedNotesContainer.find(".related-notes-more-notes");
 
         $(window).on("mousedown", (e) => {
-            if (!$(e.target).closest(this.$widget[0]).length
-                && !$(e.target).closest(HEADLESS_AUTOCOMPLETE_PANEL_SELECTOR).length
-                && !$(e.target).closest("#context-menu-container").length) {
+            if (!$(e.target).closest(this.$widget[0]).length && !$(e.target).closest(".algolia-autocomplete").length && !$(e.target).closest("#context-menu-container").length) {
                 this.hide();
             }
         });
@@ -582,24 +576,17 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
             return;
         }
 
-        if (isNewLayout) {
-            if (!this.$statusBar) {
-                this.$statusBar = $(document.body).find(".component.status-bar");
-            }
+        this.$widget
+            .css("left", detPosition.left)
+            .css("right", detPosition.right)
+            .css("top", y - offset.top + 70)
+            .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
 
-            const statusBarHeight = this.$statusBar.outerHeight() ?? 0;
-            const maxHeight = document.body.clientHeight - statusBarHeight;
+        if (isNewLayout) {
             this.$widget
-                .css("left", offset.left + (typeof detPosition.left === "number" ? detPosition.left : 0))
                 .css("top", "unset")
-                .css("bottom", statusBarHeight ?? 0)
-                .css("max-height", maxHeight);
-        } else {
-            this.$widget
-                .css("left", detPosition.left)
-                .css("right", detPosition.right)
-                .css("top", y - offset.top + 70)
-                .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
+                .css("bottom", 70)
+                .css("max-height", "80vh");
         }
 
         if (focus === "name") {
@@ -707,14 +694,14 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
                 return "label-definition";
             } else if (attribute.name.startsWith("relation:")) {
                 return "relation-definition";
+            } else {
+                return "label";
             }
-            return "label";
-
         } else if (attribute.type === "relation") {
             return "relation";
+        } else {
+            this.$title.text("");
         }
-        this.$title.text("");
-
     }
 
     updateAttributeInEditor() {

apps/client/src/widgets/collections/board/api.ts

@@ -1,5 +1,5 @@
 import { BulkAction } from "@triliumnext/commons";
-
+import { BoardViewData } from ".";
 import appContext from "../../../components/app_context";
 import FNote from "../../../entities/fnote";
 import attributes from "../../../services/attributes";
@@ -9,7 +9,6 @@ import froca from "../../../services/froca";
 import { t } from "../../../services/i18n";
 import note_create from "../../../services/note_create";
 import server from "../../../services/server";
-import { BoardViewData } from ".";
 import { ColumnMap } from "./data";
 
 export default class BoardApi {
@@ -36,11 +35,13 @@ export default class BoardApi {
 
     async createNewItem(column: string, title: 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, branch: newBranch } = await note_create.createNote(this.parentNote.noteId, {
+            const { note: newNote, branch: newBranch } = await note_create.createNote(parentNotePath, {
                 activate: false,
-                title,
-                isProtected: this.parentNote.isProtected
+                title
             });
 
             if (newNote && newBranch) {
@@ -86,7 +87,7 @@ export default class BoardApi {
 
         const action: BulkAction = this.isRelationMode
             ? { name: "deleteRelation", relationName: this.statusAttribute }
-            : { name: "deleteLabel", labelName: this.statusAttribute };
+            : { name: "deleteLabel", labelName: this.statusAttribute }
         await executeBulkActions(noteIds, [ action ]);
         this.viewConfig.columns = (this.viewConfig.columns ?? []).filter(col => col.value !== column);
         this.saveConfig(this.viewConfig);
@@ -98,7 +99,7 @@ export default class BoardApi {
         // Change the value in the notes.
         const action: BulkAction = this.isRelationMode
             ? { name: "updateRelationTarget", relationName: this.statusAttribute, targetNoteId: newValue }
-            : { name: "updateLabelValue", labelName: this.statusAttribute, labelValue: newValue };
+            : { name: "updateLabelValue", labelName: this.statusAttribute, labelValue: newValue }
         await executeBulkActions(noteIds, [ action ]);
 
         // Rename the column in the persisted data.
@@ -136,9 +137,9 @@ export default class BoardApi {
     }
 
     async insertRowAtPosition(
-        column: string,
-        relativeToBranchId: string,
-        direction: "before" | "after") {
+            column: string,
+            relativeToBranchId: string,
+            direction: "before" | "after") {
         const { note, branch } = await note_create.createNote(this.parentNote.noteId, {
             activate: false,
             targetBranchId: relativeToBranchId,
@@ -178,8 +179,9 @@ export default class BoardApi {
         if (!note) return;
         if (this.isRelationMode) {
             return attributes.removeOwnedRelationByName(note, this.statusAttribute);
+        } else {
+            return attributes.removeOwnedLabelByName(note, this.statusAttribute);
         }
-        return attributes.removeOwnedLabelByName(note, this.statusAttribute);
     }
 
     async moveWithinBoard(noteId: string, sourceBranchId: string, sourceIndex: number, targetIndex: number, sourceColumn: string, targetColumn: string) {

apps/client/src/widgets/collections/board/index.css

@@ -14,7 +14,8 @@
   height: 100%;
   display: flex;
   gap: 1em;
-  padding: 4px var(--content-margin-inline);
+  margin-inline: var(--content-margin-inline);
+  padding-block: 4px;
   align-items: flex-start;
   overflow-x: auto;
 }
@@ -41,11 +42,7 @@ body.mobile .board-view-container {
 body.mobile .board-view-container .board-column {
   width: 75vw;
   max-width: 300px;
-}
-
-body.mobile .board-view-container .board-column,
-body.mobile .board-view-container .board-add-column {
-    scroll-snap-align: center;
+  scroll-snap-align: center;
 }
 
 .board-view-container .board-column.drag-over {

apps/client/src/widgets/collections/calendar/api.ts

@@ -1,8 +1,8 @@
-import { AttributeRow } from "@triliumnext/commons";
+import { AttributeRow, CreateChildrenResponse } from "@triliumnext/commons";
 
 import FNote from "../../../entities/fnote";
 import { setAttribute, setLabel } from "../../../services/attributes";
-import note_create from "../../../services/note_create";
+import server from "../../../services/server";
 
 interface NewEventOpts {
     title: string;
@@ -51,13 +51,11 @@ export async function newEvent(parentNote: FNote, { title, startDate, endDate, s
     }
 
     // Create the note.
-    await note_create.createNote(parentNote.noteId, {
+    await server.post<CreateChildrenResponse>(`notes/${parentNote.noteId}/children?target=into`, {
         title,
-        isProtected: parentNote.isProtected,
         content: "",
         type: "text",
-        attributes,
-        activate: false
+        attributes
     }, componentId);
 }
 

apps/client/src/widgets/collections/geomap/api.ts

@@ -1,11 +1,10 @@
 import type { LatLng, LeafletMouseEvent } from "leaflet";
-
-import FNote from "../../../entities/fnote";
+import { LOCATION_ATTRIBUTE } from ".";
 import attributes from "../../../services/attributes";
 import { prompt } from "../../../services/dialog";
+import server from "../../../services/server";
 import { t } from "../../../services/i18n";
-import note_create from "../../../services/note_create";
-import { LOCATION_ATTRIBUTE } from ".";
+import { CreateChildrenResponse } from "@triliumnext/commons";
 
 const CHILD_NOTE_ICON = "bx bx-pin";
 
@@ -14,20 +13,16 @@ export async function moveMarker(noteId: string, latLng: LatLng | null) {
     await attributes.setLabel(noteId, LOCATION_ATTRIBUTE, value);
 }
 
-export async function createNewNote(parentNote: FNote, e: LeafletMouseEvent) {
+export async function createNewNote(noteId: string, e: LeafletMouseEvent) {
     const title = await prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });
 
     if (title?.trim()) {
-        await note_create.createNote(parentNote.noteId, {
+        const { note } = await server.post<CreateChildrenResponse>(`notes/${noteId}/children?target=into`, {
             title,
             content: "",
-            type: "text",
-            activate: false,
-            isProtected: parentNote.isProtected,
-            attributes: [
-                { type: "label", name: LOCATION_ATTRIBUTE, value: [e.latlng.lat, e.latlng.lng].join(",") },
-                { type: "label", name: "iconClass", value: CHILD_NOTE_ICON }
-            ]
+            type: "text"
         });
+        attributes.setLabel(note.noteId, "iconClass", CHILD_NOTE_ICON);
+        moveMarker(note.noteId, e.latlng);
     }
 }

apps/client/src/widgets/collections/geomap/context_menu.ts

@@ -1,14 +1,12 @@
 import type { LatLng, LeafletMouseEvent } from "leaflet";
-
 import appContext, { type CommandMappings } from "../../../components/app_context.js";
-import FNote from "../../../entities/fnote.js";
 import contextMenu, { type MenuItem } from "../../../menus/context_menu.js";
-import NoteColorPicker from "../../../menus/custom-items/NoteColorPicker.jsx";
 import linkContextMenu from "../../../menus/link_context_menu.js";
-import { copyTextWithToast } from "../../../services/clipboard_ext.js";
+import NoteColorPicker from "../../../menus/custom-items/NoteColorPicker.jsx";
 import { t } from "../../../services/i18n.js";
-import link from "../../../services/link.js";
 import { createNewNote } from "./api.js";
+import { copyTextWithToast } from "../../../services/clipboard_ext.js";
+import link from "../../../services/link.js";
 
 export default function openContextMenu(noteId: string, e: LeafletMouseEvent, isEditable: boolean) {
     let items: MenuItem<keyof CommandMappings>[] = [
@@ -46,7 +44,7 @@ export default function openContextMenu(noteId: string, e: LeafletMouseEvent, is
     });
 }
 
-export function openMapContextMenu(note: FNote, e: LeafletMouseEvent, isEditable: boolean) {
+export function openMapContextMenu(noteId: string, e: LeafletMouseEvent, isEditable: boolean) {
     let items: MenuItem<keyof CommandMappings>[] = [
         ...buildGeoLocationItem(e)
     ];
@@ -57,10 +55,10 @@ export function openMapContextMenu(note: FNote, e: LeafletMouseEvent, isEditable
             { kind: "separator" },
             {
                 title: t("geo-map-context.add-note"),
-                handler: () => createNewNote(note, e),
+                handler: () => createNewNote(noteId, e),
                 uiIcon: "bx bx-plus"
             }
-        ];
+        ]
     }
 
     contextMenu.show({

apps/client/src/widgets/collections/geomap/index.tsx

@@ -93,14 +93,14 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
     const onClick = useCallback(async (e: LeafletMouseEvent) => {
         if (state === State.NewNote) {
             toast.closePersistent("geo-new-note");
-            await createNewNote(note, e);
+            await createNewNote(note.noteId, e);
             setState(State.Normal);
         }
-    }, [ note, state ]);
+    }, [ state ]);
 
     const onContextMenu = useCallback((e: LeafletMouseEvent) => {
-        openMapContextMenu(note, e, !isReadOnly);
-    }, [ note, isReadOnly ]);
+        openMapContextMenu(note.noteId, e, !isReadOnly);
+    }, [ note.noteId, isReadOnly ]);
 
     // Dragging
     const containerRef = useRef<HTMLDivElement>(null);

apps/client/src/widgets/collections/legacy/ListOrGridView.css

@@ -364,19 +364,23 @@
         mask-repeat: no-repeat;
         mask-size: 100% 100%;
     }
-
+    
     .ck-content p {
         margin-bottom: 0.5em;
         line-height: 1.3;
     }
 
+    .ck-content figure.image {
+        width: 25%;
+    }
+
     .ck-content .table {
         display: flex;
         flex-direction: column-reverse;
         overflow-x: scroll;
         --scrollbar-thickness: 0;
         scrollbar-width: none;
-
+        
         table {
             width: max-content;
             table-layout: auto;
@@ -431,4 +435,4 @@
     }
 }
 
-/* #endregion */
+/* #endregion */

apps/client/src/widgets/collections/presentation/index.tsx

@@ -2,8 +2,8 @@ import "./index.css";
 
 import { RefObject } from "preact";
 import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
-import Reveal, { RevealApi } from "reveal.js";
-import slideBaseStylesheet from "reveal.js/reveal.css?raw";
+import Reveal from "reveal.js";
+import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";
 
 import { openInCurrentNoteContext } from "../../../components/note_context";
 import FNote from "../../../entities/fnote";
@@ -20,7 +20,7 @@ import { DEFAULT_THEME, loadPresentationTheme } from "./themes";
 export default function PresentationView({ note, noteIds, media, onReady, onProgressChanged }: ViewModeProps<{}>) {
     const [ presentation, setPresentation ] = useState<PresentationModel>();
     const containerRef = useRef<HTMLDivElement>(null);
-    const [ api, setApi ] = useState<RevealApi>();
+    const [ api, setApi ] = useState<Reveal.Api>();
     const stylesheets = usePresentationStylesheets(note, media);
 
     function refresh() {
@@ -98,7 +98,7 @@ function usePresentationStylesheets(note: FNote, media: ViewModeMedia) {
     return stylesheets;
 }
 
-function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivElement>, api: RevealApi | undefined }) {
+function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivElement>, api: Reveal.Api | undefined }) {
     const [ isOverviewActive, setIsOverviewActive ] = useState(false);
     useEffect(() => {
         if (!api) return;
@@ -144,9 +144,9 @@ function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivE
     );
 }
 
-function Presentation({ presentation, setApi } : { presentation: PresentationModel, setApi: (api: RevealApi | undefined) => void }) {
+function Presentation({ presentation, setApi } : { presentation: PresentationModel, setApi: (api: Reveal.Api | undefined) => void }) {
     const containerRef = useRef<HTMLDivElement>(null);
-    const [revealApi, setRevealApi] = useState<RevealApi>();
+    const [revealApi, setRevealApi] = useState<Reveal.Api>();
 
     useEffect(() => {
         if (!containerRef.current) return;
@@ -222,7 +222,7 @@ function getNoteIdFromSlide(slide: HTMLElement | undefined) {
     return slide.dataset.noteId;
 }
 
-function rewireLinks(container: HTMLElement, api: RevealApi) {
+function rewireLinks(container: HTMLElement, api: Reveal.Api) {
     const links = container.querySelectorAll<HTMLLinkElement>("a.reference-link");
     for (const link of links) {
         link.addEventListener("click", () => {

apps/client/src/widgets/collections/presentation/themes.ts

@@ -3,49 +3,49 @@ export const DEFAULT_THEME = "white";
 const themes = {
     black: {
         name: "Black",
-        loadTheme: () => import("reveal.js/theme/black.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
     },
     white: {
         name: "White",
-        loadTheme: () => import("reveal.js/theme/white.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/white.css?raw")
     },
     beige: {
         name: "Beige",
-        loadTheme: () => import("reveal.js/theme/beige.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/beige.css?raw")
     },
     serif: {
         name: "Serif",
-        loadTheme: () => import("reveal.js/theme/serif.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/serif.css?raw")
     },
     simple: {
         name: "Simple",
-        loadTheme: () => import("reveal.js/theme/simple.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/simple.css?raw")
     },
     solarized: {
         name: "Solarized",
-        loadTheme: () => import("reveal.js/theme/solarized.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/solarized.css?raw")
     },
     moon: {
         name: "Moon",
-        loadTheme: () => import("reveal.js/theme/moon.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/moon.css?raw")
     },
     dracula: {
         name: "Dracula",
-        loadTheme: () => import("reveal.js/theme/dracula.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/dracula.css?raw")
     },
     sky: {
         name: "Sky",
-        loadTheme: () => import("reveal.js/theme/sky.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/sky.css?raw")
     },
     blood: {
         name: "Blood",
-        loadTheme: () => import("reveal.js/theme/blood.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/blood.css?raw")
     }
 } as const;
 
 export function getPresentationThemes() {
     return Object.entries(themes).map(([ id, theme ]) => ({
-        id,
+        id: id,
         name: theme.name
     }));
 }

apps/client/src/widgets/collections/table/columns.tsx

@@ -19,13 +19,6 @@ const labelTypeMappings: Record<ColumnType, Partial<ColumnDefinition>> = {
     text: {
         editor: "input"
     },
-    textarea: {
-        editor: "textarea",
-        formatter: "textarea",
-        editorParams: {
-            shiftEnterSubmit: true
-        }
-    },
     boolean: {
         formatter: "tickCross",
         editor: "tickCross"

apps/client/src/widgets/collections/table/index.css

@@ -75,9 +75,3 @@
     font-size: 1.5em;
     transform: translateY(-50%);
 }
-
-.tabulator .tabulator-editable {
-    textarea {
-        padding: 7px !important;
-    }
-}

apps/client/src/widgets/collections/table/index.tsx

@@ -18,14 +18,14 @@ import useRowTableEditing from "./row_editing";
 import { TableData } from "./rows";
 import Tabulator from "./tabulator";
 
-export default function TableView({ note, noteIds, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
+export default function TableView({ note, noteIds, notePath, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
     const tabulatorRef = useRef<VanillaTabulator>(null);
     const parentComponent = useContext(ParentComponent);
 
     const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget().contentSized());
     const contextMenuEvents = useContextMenu(note, parentComponent, tabulatorRef);
     const persistenceProps = usePersistence(viewConfig, saveConfig);
-    const rowEditingEvents = useRowTableEditing(tabulatorRef, attributeDetailWidget, note);
+    const rowEditingEvents = useRowTableEditing(tabulatorRef, attributeDetailWidget, notePath);
     const { newAttributePosition, resetNewAttributePosition } = useColTableEditing(tabulatorRef, attributeDetailWidget, note);
     const { columnDefs, rowData, movableRows, hasChildren } = useData(note, noteIds, viewConfig, newAttributePosition, resetNewAttributePosition);
     const dataTreeProps = useMemo<Options>(() => {

apps/client/src/widgets/collections/table/row_editing.ts

@@ -1,27 +1,24 @@
-import { RefObject } from "preact";
 import { EventCallBackMethods, RowComponent, Tabulator } from "tabulator-tables";
-
 import { CommandListenerData } from "../../../components/app_context";
-import FNote from "../../../entities/fnote";
-import { setAttribute, setLabel } from "../../../services/attributes";
-import branches from "../../../services/branches";
-import froca from "../../../services/froca";
 import note_create, { CreateNoteOpts } from "../../../services/note_create";
-import server from "../../../services/server";
-import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
 import { useLegacyImperativeHandlers } from "../../react/hooks";
+import { RefObject } from "preact";
+import { setAttribute, setLabel } from "../../../services/attributes";
+import froca from "../../../services/froca";
+import server from "../../../services/server";
+import branches from "../../../services/branches";
+import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
 
-export default function useRowTableEditing(api: RefObject<Tabulator>, attributeDetailWidget: AttributeDetailWidget, parentNote: FNote): Partial<EventCallBackMethods> {
+export default function useRowTableEditing(api: RefObject<Tabulator>, attributeDetailWidget: AttributeDetailWidget, parentNotePath: string): Partial<EventCallBackMethods> {
     // Adding new rows
     useLegacyImperativeHandlers({
         addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
-            const notePath = customNotePath ?? parentNote.noteId;
+            const notePath = customNotePath ?? parentNotePath;
             if (notePath) {
                 const opts: CreateNoteOpts = {
                     activate: false,
-                    isProtected: parentNote.isProtected,
                     ...customOpts
-                };
+                }
                 note_create.createNote(notePath, opts).then(({ branch }) => {
                     if (branch) {
                         setTimeout(() => {
@@ -29,7 +26,7 @@ export default function useRowTableEditing(api: RefObject<Tabulator>, attributeD
                             focusOnBranch(api.current, branch?.branchId);
                         }, 100);
                     }
-                });
+                })
             }
         }
     });
@@ -94,14 +91,14 @@ function focusOnBranch(api: Tabulator, branchId: string) {
 }
 
 function findRowDataById(rows: RowComponent[], branchId: string): RowComponent | null {
-    for (const row of rows) {
+    for (let row of rows) {
         const item = row.getIndex() as string;
 
         if (item === branchId) {
             return row;
         }
 
-        const found = findRowDataById(row.getTreeChildren(), branchId);
+        let found = findRowDataById(row.getTreeChildren(), branchId);
         if (found) return found;
     }
     return null;

apps/client/src/widgets/containers/ScrollingContainer.bak.ts

@@ -10,8 +10,6 @@ export default class ScrollingContainer extends Container<BasicWidget> {
 
     constructor() {
         super();
-
-        this.class("scrolling-container");
     }
 
     setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {

apps/client/src/widgets/containers/ScrollingContainer.css

@@ -4,6 +4,7 @@
     overflow: auto;
     scroll-behavior: smooth;
     position: relative;
+    flex-grow: 1;
 
     > .note-detail > .note-detail-editable-text > .note-detail-editable-text-editor,
     > .note-list-widget:not(.full-height) .note-list-wrapper {

apps/client/src/widgets/containers/ScrollingContainer.tsx

@@ -0,0 +1,9 @@
+import { ComponentChildren } from "preact";
+
+export default function ScrollingContainer({ children }: { children: ComponentChildren }) {
+    return (
+        <div className="scrolling-container">
+            {children}
+        </div>
+    );
+}

apps/client/src/widgets/containers/split_note_container.ts

@@ -1,9 +1,12 @@
+import { VNode } from "preact";
+
 import appContext, { type CommandData, type CommandListenerData, type EventData, type EventNames, type NoteSwitchedContext } from "../../components/app_context.js";
 import Component from "../../components/component.js";
 import NoteContext from "../../components/note_context.js";
 import splitService from "../../services/resizer.js";
 import { isMobile } from "../../services/utils.js";
 import type BasicWidget from "../basic_widget.js";
+import { wrapReactWidgets } from "../basic_widget.js";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import FlexContainer from "./flex_container.js";
 
@@ -12,7 +15,7 @@ interface SplitNoteWidget extends BasicWidget {
     ntxId?: string;
 }
 
-type WidgetFactory = () => SplitNoteWidget;
+type WidgetFactory = () => (SplitNoteWidget | VNode);
 
 export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
 
@@ -31,7 +34,7 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
     }
 
     async newNoteContextCreatedEvent({ noteContext }: EventData<"newNoteContextCreated">) {
-        const widget = this.widgetFactory();
+        const widget = wrapReactWidgets([ this.widgetFactory() ])[0];
 
         const $renderedWidget = widget.render();
 

apps/client/src/widgets/dialogs/add_link.spec.tsx

@@ -1,70 +0,0 @@
-import type { FunctionComponent } from "preact";
-import { render } from "preact";
-import { act } from "preact/test-utils";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-import { type AddLinkDialogTestState,createAddLinkDialogTestState, setupAddLinkDialogMocks } from "./add_link.spec_utils";
-
-describe("AddLinkDialog", () => {
-    let container: HTMLDivElement;
-    let AddLinkDialog: FunctionComponent;
-    let state: AddLinkDialogTestState;
-
-    beforeEach(async () => {
-        vi.resetModules();
-        state = createAddLinkDialogTestState();
-        vi.clearAllMocks();
-        setupAddLinkDialogMocks(state);
-
-        ({ default: AddLinkDialog } = await import("./add_link"));
-
-        container = document.createElement("div");
-        document.body.appendChild(container);
-    });
-
-    afterEach(() => {
-        act(() => {
-            render(null, container);
-        });
-        container.remove();
-    });
-
-    it("submits the selected note when Enter picks an autocomplete suggestion", async () => {
-        act(() => {
-            render(<AddLinkDialog />, container);
-        });
-
-        const showDialog = state.triliumEventHandlers.get("showAddLinkDialog");
-        if (!showDialog) {
-            throw new Error("showAddLinkDialog handler was not registered");
-        }
-
-        await act(async () => {
-            showDialog({
-                text: "",
-                hasSelection: false,
-                addLink: state.addLinkSpy
-            });
-        });
-
-        act(() => {
-            state.latestNoteAutocompletePropsRef.current.onKeyDownCapture({
-                key: "Enter",
-                ctrlKey: false,
-                metaKey: false,
-                shiftKey: false,
-                altKey: false,
-                isComposing: false
-            });
-            state.latestNoteAutocompletePropsRef.current.onChange({
-                notePath: "root/target-note"
-            });
-        });
-
-        await act(async () => {
-            state.latestModalPropsRef.current.onHidden();
-        });
-
-        expect(state.addLinkSpy).toHaveBeenCalledWith("root/target-note", null);
-    });
-});

apps/client/src/widgets/dialogs/add_link.spec_utils.tsx

@@ -1,99 +0,0 @@
-import $ from "jquery";
-import type { ComponentChildren } from "preact";
-import { vi } from "vitest";
-
-export interface AddLinkDialogTestState {
-    triliumEventHandlers: Map<string, (payload: any) => void>;
-    latestModalPropsRef: { current: any };
-    latestNoteAutocompletePropsRef: { current: any };
-    addLinkSpy: ReturnType<typeof vi.fn>;
-    logErrorSpy: ReturnType<typeof vi.fn>;
-    showRecentNotesSpy: ReturnType<typeof vi.fn>;
-    setTextSpy: ReturnType<typeof vi.fn>;
-}
-
-export function createAddLinkDialogTestState(): AddLinkDialogTestState {
-    return {
-        triliumEventHandlers: new Map<string, (payload: any) => void>(),
-        latestModalPropsRef: { current: null as any },
-        latestNoteAutocompletePropsRef: { current: null as any },
-        addLinkSpy: vi.fn(() => Promise.resolve()),
-        logErrorSpy: vi.fn(),
-        showRecentNotesSpy: vi.fn(),
-        setTextSpy: vi.fn()
-    };
-}
-
-export function setupAddLinkDialogMocks(state: AddLinkDialogTestState) {
-    vi.doMock("../../services/i18n", () => ({
-        t: (key: string) => key
-    }));
-
-    vi.doMock("../../services/tree", () => ({
-        default: {
-            getNoteIdFromUrl: (notePath: string) => notePath.split("/").at(-1),
-            getNoteTitle: vi.fn(async () => "Target note")
-        }
-    }));
-
-    vi.doMock("../../services/ws", () => ({
-        logError: state.logErrorSpy
-    }));
-
-    vi.doMock("../../services/note_autocomplete", () => ({
-        __esModule: true,
-        default: {
-            showRecentNotes: state.showRecentNotesSpy,
-            setText: state.setTextSpy
-        }
-    }));
-
-    vi.doMock("../react/react_utils", () => ({
-        refToJQuerySelector: (ref: { current: HTMLInputElement | null }) => ref.current ? $(ref.current) : $()
-    }));
-
-    vi.doMock("../react/hooks", () => ({
-        useTriliumEvent: (name: string, handler: (payload: any) => void) => {
-            state.triliumEventHandlers.set(name, handler);
-        }
-    }));
-
-    vi.doMock("../react/Modal", () => ({
-        default: (props: any) => {
-            state.latestModalPropsRef.current = props;
-
-            if (!props.show) {
-                return null;
-            }
-
-            return (
-                <form onSubmit={(e) => {
-                    e.preventDefault();
-                    props.onSubmit?.();
-                }}>
-                    {props.children}
-                    {props.footer}
-                </form>
-            );
-        }
-    }));
-
-    vi.doMock("../react/FormGroup", () => ({
-        default: ({ children }: { children: ComponentChildren }) => <div>{children}</div>
-    }));
-
-    vi.doMock("../react/Button", () => ({
-        default: ({ text }: { text: string }) => <button type="submit">{text}</button>
-    }));
-
-    vi.doMock("../react/FormRadioGroup", () => ({
-        default: () => null
-    }));
-
-    vi.doMock("../react/NoteAutocomplete", () => ({
-        default: (props: any) => {
-            state.latestNoteAutocompletePropsRef.current = props;
-            return <input ref={props.inputRef} />;
-        }
-    }));
-}

apps/client/src/widgets/dialogs/add_link.tsx

@@ -1,17 +1,15 @@
-import type { JSX } from "preact";
-import { useEffect,useRef, useState } from "preact/hooks";
-
 import { t } from "../../services/i18n";
-import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
-import tree from "../../services/tree";
-import { logError } from "../../services/ws";
-import Button from "../react/Button";
-import FormGroup from "../react/FormGroup.js";
-import FormRadioGroup from "../react/FormRadioGroup";
-import { useTriliumEvent } from "../react/hooks";
 import Modal from "../react/Modal";
+import Button from "../react/Button";
+import FormRadioGroup from "../react/FormRadioGroup";
 import NoteAutocomplete from "../react/NoteAutocomplete";
+import { useRef, useState, useEffect } from "preact/hooks";
+import tree from "../../services/tree";
+import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
+import { logError } from "../../services/ws";
+import FormGroup from "../react/FormGroup.js";
 import { refToJQuerySelector } from "../react/react_utils";
+import { useTriliumEvent } from "../react/hooks";
 
 type LinkType = "reference-link" | "external-link" | "hyper-link";
 
@@ -28,8 +26,6 @@ export default function AddLinkDialog() {
     const [ suggestion, setSuggestion ] = useState<Suggestion | null>(null);
     const [ shown, setShown ] = useState(false);
     const hasSubmittedRef = useRef(false);
-    const suggestionRef = useRef<Suggestion | null>(null);
-    const submitOnSelectionRef = useRef(false);
 
     useTriliumEvent("showAddLinkDialog", opts => {
         setOpts(opts);
@@ -89,44 +85,15 @@ export default function AddLinkDialog() {
             .trigger("select");
     }
 
-    function submitSelectedLink(selectedSuggestion: Suggestion | null) {
-        submitOnSelectionRef.current = false;
-        hasSubmittedRef.current = Boolean(selectedSuggestion);
-
-        if (!selectedSuggestion) {
-            logError("No link to add.");
-            return;
-        }
-
-        // Insertion logic in onHidden because it needs focus.
-        setShown(false);
-    }
-
-    function onSuggestionChange(nextSuggestion: Suggestion | null) {
-        suggestionRef.current = nextSuggestion;
-        setSuggestion(nextSuggestion);
-
-        if (submitOnSelectionRef.current && nextSuggestion) {
-            submitSelectedLink(nextSuggestion);
-        }
-    }
-
-    function onAutocompleteKeyDownCapture(e: JSX.TargetedKeyboardEvent<HTMLInputElement>) {
-        if (e.key !== "Enter" || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey || e.isComposing) {
-            return;
-        }
-
-        submitOnSelectionRef.current = true;
-    }
-
-    function onAutocompleteKeyUpCapture(e: JSX.TargetedKeyboardEvent<HTMLInputElement>) {
-        if (e.key === "Enter") {
-            submitOnSelectionRef.current = false;
-        }
-    }
-
     function onSubmit() {
-        submitSelectedLink(suggestionRef.current);
+        hasSubmittedRef.current = true;
+
+        if (suggestion) {
+            // Insertion logic in onHidden because it needs focus.
+            setShown(false);
+        } else {
+            logError("No link to add.");
+        }
     }
 
     const autocompleteRef = useRef<HTMLInputElement>(null);
@@ -142,22 +109,19 @@ export default function AddLinkDialog() {
             onSubmit={onSubmit}
             onShown={onShown}
             onHidden={() => {
-                submitOnSelectionRef.current = false;
-
                 // Insert the link.
-                if (hasSubmittedRef.current && suggestionRef.current && opts) {
+                if (hasSubmittedRef.current && suggestion && opts) {
                     hasSubmittedRef.current = false;
 
-                    if (suggestionRef.current.notePath) {
+                    if (suggestion.notePath) {
                         // Handle note link
-                        opts.addLink(suggestionRef.current.notePath, linkType === "reference-link" ? null : linkTitle);
-                    } else if (suggestionRef.current.externalLink) {
+                        opts.addLink(suggestion.notePath, linkType === "reference-link" ? null : linkTitle);
+                    } else if (suggestion.externalLink) {
                         // Handle external link
-                        opts.addLink(suggestionRef.current.externalLink, linkTitle, true);
+                        opts.addLink(suggestion.externalLink, linkTitle, true);
                     }
                 }
 
-                suggestionRef.current = null;
                 setSuggestion(null);
                 setShown(false);
             }}
@@ -166,9 +130,7 @@ export default function AddLinkDialog() {
             <FormGroup label={t("add_link.note")} name="note">
                 <NoteAutocomplete
                     inputRef={autocompleteRef}
-                    onChange={onSuggestionChange}
-                    onKeyDownCapture={onAutocompleteKeyDownCapture}
-                    onKeyUpCapture={onAutocompleteKeyUpCapture}
+                    onChange={setSuggestion}
                     opts={{
                         allowExternalLinks: true,
                         allowCreatingNotes: true

apps/client/src/widgets/dialogs/clone_to.tsx

@@ -108,4 +108,4 @@ async function cloneNotesTo(notePath: string, clonedNoteIds: string[], prefix?:
 
         toast.showMessage(t("clone_to.note_cloned", { clonedTitle: clonedNote.title, targetTitle: targetNote.title }));
     }
-}
+}

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

@@ -1,15 +1,14 @@
+import Modal from "../react/Modal";
+import Button from "../react/Button";
+import NoteAutocomplete from "../react/NoteAutocomplete";
+import { t } from "../../services/i18n";
 import { useRef, useState } from "preact/hooks";
-
+import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
 import appContext from "../../components/app_context";
 import commandRegistry from "../../services/command_registry";
-import { t } from "../../services/i18n";
-import note_autocomplete, { Suggestion } from "../../services/note_autocomplete";
-import shortcutService from "../../services/shortcuts";
-import Button from "../react/Button";
-import { useTriliumEvent } from "../react/hooks";
-import Modal from "../react/Modal";
-import NoteAutocomplete from "../react/NoteAutocomplete";
 import { refToJQuerySelector } from "../react/react_utils";
+import { useTriliumEvent } from "../react/hooks";
+import shortcutService from "../../services/shortcuts";
 
 const KEEP_LAST_SEARCH_FOR_X_SECONDS = 120;
 
@@ -24,14 +23,14 @@ export default function JumpToNoteDialogComponent() {
     const [ initialText, setInitialText ] = useState(isCommandMode ? "> " : "");
     const actualText = useRef<string>(initialText);
     const [ shown, setShown ] = useState(false);
-
-    async function openDialog(commandMode: boolean) {
+    
+    async function openDialog(commandMode: boolean) {        
         let newMode: Mode;
         let initialText = "";
 
         if (commandMode) {
             newMode = "commands";
-            initialText = ">";
+            initialText = ">";            
         } else if (Date.now() - lastOpenedTs <= KEEP_LAST_SEARCH_FOR_X_SECONDS * 1000 && actualText.current) {
             // 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)
@@ -59,7 +58,7 @@ export default function JumpToNoteDialogComponent() {
         if (!suggestion) {
             return;
         }
-
+        
         setShown(false);
         if (suggestion.notePath) {
             appContext.tabManager.getActiveContext()?.setNote(suggestion.notePath);
@@ -84,7 +83,7 @@ export default function JumpToNoteDialogComponent() {
         $autoComplete
             .trigger("focus")
             .trigger("select");
-
+            
         // Add keyboard shortcut for full search
         shortcutService.bindElShortcut($autoComplete, "ctrl+return", () => {
             if (!isCommandMode) {
@@ -92,7 +91,7 @@ export default function JumpToNoteDialogComponent() {
             }
         });
     }
-
+    
     async function showInFullSearch() {
         try {
             setShown(false);
@@ -127,18 +126,18 @@ export default function JumpToNoteDialogComponent() {
                     setIsCommandMode(text.startsWith(">"));
                 }}
                 onChange={onItemSelected}
-            />}
+                />}
             onShown={onShown}
             onHidden={() => setShown(false)}
-            footer={!isCommandMode && <Button
-                className="show-in-full-text-button"
-                text={t("jump_to_note.search_button")}
+            footer={!isCommandMode && <Button 
+                className="show-in-full-text-button" 
+                text={t("jump_to_note.search_button")} 
                 keyboardShortcut="Ctrl+Enter"
                 onClick={showInFullSearch}
             />}
             show={shown}
         >
-            <div className="jump-to-note-results" ref={containerRef} />
+            <div className="algolia-autocomplete-container jump-to-note-results" ref={containerRef}></div>
         </Modal>
     );
 }

apps/client/src/widgets/dialogs/move_to.tsx

@@ -75,4 +75,4 @@ async function moveNotesTo(movedBranchIds: string[] | undefined, parentBranchId:
     const parentNote = await parentBranch?.getNote();
 
     toast.showMessage(`${t("move_to.move_success_message")} ${parentNote?.title}`);
-}
+}

apps/client/src/widgets/dialogs/prompt.tsx

@@ -1,12 +1,11 @@
 import { useRef, useState } from "preact/hooks";
-
 import { t } from "../../services/i18n";
 import Button from "../react/Button";
-import FormGroup from "../react/FormGroup";
-import FormTextBox from "../react/FormTextBox";
-import { useTriliumEvent } from "../react/hooks";
 import Modal from "../react/Modal";
+import FormTextBox from "../react/FormTextBox";
+import FormGroup from "../react/FormGroup";
 import { refToJQuerySelector } from "../react/react_utils";
+import { useTriliumEvent } from "../react/hooks";
 
 // JQuery here is maintained for compatibility with existing code.
 interface ShownCallbackData {
@@ -41,7 +40,7 @@ export default function PromptDialog() {
         opts.current = newOpts;
         setValue(newOpts.defaultValue ?? "");
         setShown(true);
-    });
+    })
 
     return (
         <Modal
@@ -61,7 +60,7 @@ export default function PromptDialog() {
                 answerRef.current?.select();
             }}
             onSubmit={() => {
-                submitValue.current = answerRef.current?.value || value;
+                submitValue.current = value;
                 setShown(false);
             }}
             onHidden={() => {

apps/client/src/widgets/dialogs/revisions.tsx

@@ -272,8 +272,7 @@ function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }:
             return <FilePreview fullRevision={fullRevision} revisionItem={revisionItem} />;
         case "canvas":
         case "mindMap":
-        case "mermaid":
-        case "spreadsheet": {
+        case "mermaid": {
             const encodedTitle = encodeURIComponent(revisionItem.title);
             return <img
                 src={`api/revisions/${revisionItem.revisionId}/image/${encodedTitle}?${Math.random()}`}

apps/client/src/widgets/layout/NoteBadges.css

@@ -36,10 +36,6 @@
                 animation: fadeOut 250ms ease-in 5s forwards;
                 pointer-events: none;
             }
-
-            body#trilium-app.motion-disabled &.saved {
-                animation: fadeOut 0s 5s forwards !important;
-            }
         }
         &.active-content-badge { --color: var(--badge-active-content-background-color); }
         &.active-content-badge.disabled {

apps/client/src/widgets/layout/NoteContentSwitcher.css

@@ -1,19 +0,0 @@
-.note-content-switcher {
-    --badge-radius: 12px;
-    position: relative;
-    display: flex;
-    min-height: 35px;
-    gap: 5px;
-    padding: 5px;
-    flex-wrap: wrap;
-    flex-shrink: 0;
-    font-size: 0.9rem;
-    align-items: center;
-
-    .ext-badge {
-        --color: var(--input-background-color);
-        color: var(--main-text-color);
-        font-size: 1em;
-        flex-shrink: 0;
-    }
-}

apps/client/src/widgets/layout/NoteContentSwitcher.tsx

@@ -1,39 +0,0 @@
-import "./NoteContentSwitcher.css";
-
-import FNote from "../../entities/fnote";
-import server from "../../services/server";
-import { Badge } from "../react/Badge";
-import { useNoteSavedData } from "../react/hooks";
-
-export interface NoteContentTemplate {
-    name: string;
-    content: string;
-}
-
-interface NoteContentSwitcherProps {
-    text: string;
-    note: FNote;
-    templates: NoteContentTemplate[];
-}
-
-export default function NoteContentSwitcher({ text, note, templates }: NoteContentSwitcherProps) {
-    const blob = useNoteSavedData(note?.noteId);
-
-    return (blob?.trim().length === 0 &&
-        <div className="note-content-switcher">
-            {text}{" "}
-
-            {templates.map(sample => (
-                <Badge
-                    key={sample.name}
-                    text={sample.name}
-                    onClick={async () => {
-                        await server.put(`notes/${note.noteId}/data`, {
-                            content: sample.content
-                        });
-                    }}
-                />
-            ))}
-        </div>
-    );
-}

apps/client/src/widgets/note_types.tsx

@@ -84,7 +84,7 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
         printable: true
     },
     mermaid: {
-        view: () => import("./type_widgets/mermaid/Mermaid"),
+        view: () => import("./type_widgets/Mermaid"),
         className: "note-detail-mermaid",
         printable: true,
         isFullHeight: true
@@ -143,7 +143,7 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
         isFullHeight: true
     },
     spreadsheet: {
-        view: () => import("./type_widgets/spreadsheet/Spreadsheet"),
+        view: () => import("./type_widgets/Spreadsheet"),
         className: "note-detail-spreadsheet",
         printable: true,
         isFullHeight: true

apps/client/src/widgets/react/NoItems.css

@@ -8,7 +8,6 @@
     color: var(--muted-text-color);
     height: 100%;
     text-align: center;
-    white-space: pre-line;
 
     .tn-icon {
         font-size: 4em;

apps/client/src/widgets/react/NoteAutocomplete.spec.tsx

@@ -1,152 +0,0 @@
-import $ from "jquery";
-import { render } from "preact";
-import { act } from "preact/test-utils";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const {
-    initNoteAutocompleteSpy,
-    setTextSpy,
-    clearTextSpy,
-    destroyAutocompleteSpy
-} = vi.hoisted(() => ({
-    initNoteAutocompleteSpy: vi.fn(($el) => $el),
-    setTextSpy: vi.fn(),
-    clearTextSpy: vi.fn(),
-    destroyAutocompleteSpy: vi.fn()
-}));
-
-vi.mock("../../services/i18n", () => ({
-    t: (key: string) => key
-}));
-
-vi.mock("../../services/note_autocomplete", () => ({
-    __esModule: true,
-    default: {
-        initNoteAutocomplete: initNoteAutocompleteSpy,
-        setText: setTextSpy,
-        clearText: clearTextSpy,
-        destroyAutocomplete: destroyAutocompleteSpy
-    }
-}));
-
-import NoteAutocomplete from "./NoteAutocomplete";
-
-describe("NoteAutocomplete", () => {
-    let container: HTMLDivElement;
-    let setNoteSpy: ReturnType<typeof vi.fn>;
-    let getSelectedNoteIdSpy: ReturnType<typeof vi.fn>;
-
-    beforeEach(() => {
-        vi.clearAllMocks();
-        container = document.createElement("div");
-        document.body.appendChild(container);
-
-        setNoteSpy = vi.fn(() => Promise.resolve());
-        getSelectedNoteIdSpy = vi.fn(() => "selected-note-id");
-
-        ($.fn as any).setNote = setNoteSpy;
-        ($.fn as any).getSelectedNoteId = getSelectedNoteIdSpy;
-    });
-
-    afterEach(() => {
-        act(() => {
-            render(null, container);
-        });
-        container.remove();
-    });
-
-    it("syncs text props through the headless helper functions", () => {
-        act(() => {
-            render(<NoteAutocomplete text="hello" />, container);
-        });
-
-        const input = container.querySelector("input") as HTMLInputElement;
-
-        expect(initNoteAutocompleteSpy).toHaveBeenCalledTimes(1);
-        expect(initNoteAutocompleteSpy.mock.calls[0][0][0]).toBe(input);
-        expect(setTextSpy).toHaveBeenCalledTimes(1);
-        expect(setTextSpy.mock.calls[0][0][0]).toBe(input);
-        expect(setTextSpy).toHaveBeenCalledWith(expect.anything(), "hello");
-
-        act(() => {
-            render(<NoteAutocomplete text="" />, container);
-        });
-
-        expect(clearTextSpy).toHaveBeenCalled();
-    });
-
-    it("syncs noteId props through the jQuery setNote extension", () => {
-        act(() => {
-            render(<NoteAutocomplete noteId="note-123" />, container);
-        });
-
-        expect(setNoteSpy).toHaveBeenCalledWith("note-123");
-        expect(clearTextSpy).not.toHaveBeenCalled();
-    });
-
-    it("forwards autocomplete selection and clear events to consumers", () => {
-        const onChange = vi.fn();
-        const noteIdChanged = vi.fn();
-
-        act(() => {
-            render(<NoteAutocomplete onChange={onChange} noteIdChanged={noteIdChanged} />, container);
-        });
-
-        const input = container.querySelector("input") as HTMLInputElement;
-        const $input = $(input);
-        const suggestion = { notePath: "root/child-note", noteTitle: "Child note" };
-
-        $input.trigger("autocomplete:noteselected", [suggestion]);
-
-        expect(onChange).toHaveBeenCalledWith(suggestion);
-        expect(noteIdChanged).toHaveBeenCalledWith("child-note");
-
-        input.value = "";
-        $input.trigger("change");
-
-        expect(onChange).toHaveBeenCalledWith(null);
-    });
-
-    it("forwards onTextChange, onKeyDown and onBlur events", () => {
-        const onTextChange = vi.fn();
-        const onKeyDown = vi.fn();
-        const onBlur = vi.fn();
-
-        act(() => {
-            render(
-                <NoteAutocomplete
-                    onTextChange={onTextChange}
-                    onKeyDown={onKeyDown}
-                    onBlur={onBlur}
-                />,
-                container
-            );
-        });
-
-        const input = container.querySelector("input") as HTMLInputElement;
-        const $input = $(input);
-
-        input.value = "typed text";
-        $input.trigger("input");
-        $input.trigger($.Event("keydown", { originalEvent: new KeyboardEvent("keydown", { key: "Enter" }) }));
-        $input.trigger("blur");
-
-        expect(onTextChange).toHaveBeenCalledWith("typed text");
-        expect(onKeyDown).toHaveBeenCalledWith(expect.any(KeyboardEvent));
-        expect(onBlur).toHaveBeenCalledWith("selected-note-id");
-    });
-
-    it("destroys the autocomplete instance on unmount", () => {
-        act(() => {
-            render(<NoteAutocomplete />, container);
-        });
-
-        const input = container.querySelector("input") as HTMLInputElement;
-
-        act(() => {
-            render(null, container);
-        });
-
-        expect(destroyAutocompleteSpy).toHaveBeenCalledWith(input);
-    });
-});

apps/client/src/widgets/react/NoteAutocomplete.tsx

@@ -1,9 +1,8 @@
-import type { JSX,RefObject } from "preact";
-import type { CSSProperties } from "preact/compat";
-import { useEffect } from "preact/hooks";
-
 import { t } from "../../services/i18n";
+import { useEffect } from "preact/hooks";
 import note_autocomplete, { Options, type Suggestion } from "../../services/note_autocomplete";
+import type { RefObject } from "preact";
+import type { CSSProperties } from "preact/compat";
 import { useSyncedRef } from "./hooks";
 
 interface NoteAutocompleteProps {
@@ -17,118 +16,85 @@ interface NoteAutocompleteProps {
     onChange?: (suggestion: Suggestion | null) => void;
     onTextChange?: (text: string) => void;
     onKeyDown?: (e: KeyboardEvent) => void;
-    onKeyDownCapture?: JSX.KeyboardEventHandler<HTMLInputElement>;
-    onKeyUpCapture?: JSX.KeyboardEventHandler<HTMLInputElement>;
     onBlur?: (newValue: string) => void;
     noteIdChanged?: (noteId: string) => void;
     noteId?: string;
 }
 
-export default function NoteAutocomplete({ id, inputRef: externalInputRef, text, placeholder, onChange, onTextChange, container, containerStyle, opts, noteId, noteIdChanged, onKeyDown, onKeyDownCapture, onKeyUpCapture, onBlur }: NoteAutocompleteProps) {
+export default function NoteAutocomplete({ id, inputRef: externalInputRef, text, placeholder, onChange, onTextChange, container, containerStyle, opts, noteId, noteIdChanged, onKeyDown, onBlur }: NoteAutocompleteProps) {
     const ref = useSyncedRef<HTMLInputElement>(externalInputRef);
 
     useEffect(() => {
         if (!ref.current) return;
-        const inputEl = ref.current;
-        const $autoComplete = $(inputEl);
+        const $autoComplete = $(ref.current);
+
+        // clear any event listener added in previous invocation of this function
+        $autoComplete
+            .off("autocomplete:noteselected")
+            .off("autocomplete:commandselected")
 
-        // The headless autocomplete keeps internal state while the user types, so
-        // initialize it once per mount and drive updates through the helper methods below.
         note_autocomplete.initNoteAutocomplete($autoComplete, {
             ...opts,
             container: container?.current
         });
-
-        return () => {
-            note_autocomplete.destroyAutocomplete(inputEl);
-        };
-    }, []);
-
-    useEffect(() => {
-        if (!ref.current) return;
-        const $autoComplete = $(ref.current);
-        const inputListener = () => onTextChange?.($autoComplete[0].value);
-        const keyDownListener = (e) => e.originalEvent && onKeyDown?.(e.originalEvent);
-        const blurListener = () => onBlur?.($autoComplete.getSelectedNoteId() ?? "");
-
         if (onTextChange) {
-            $autoComplete.on("input", inputListener);
+            $autoComplete.on("input", () => onTextChange($autoComplete[0].value));
         }
         if (onKeyDown) {
-            $autoComplete.on("keydown", keyDownListener);
+            $autoComplete.on("keydown", (e) => e.originalEvent && onKeyDown(e.originalEvent));
         }
         if (onBlur) {
-            $autoComplete.on("blur", blurListener);
+            $autoComplete.on("blur", () => onBlur($autoComplete.getSelectedNoteId() ?? ""));
         }
+    }, [opts, container?.current]);
 
-        return () => {
-            if (onTextChange) {
-                $autoComplete.off("input", inputListener);
-            }
-            if (onKeyDown) {
-                $autoComplete.off("keydown", keyDownListener);
-            }
-            if (onBlur) {
-                $autoComplete.off("blur", blurListener);
-            }
-        };
-    }, [onBlur, onKeyDown, onTextChange]);
-
+    // On change event handlers.
     useEffect(() => {
         if (!ref.current) return;
         const $autoComplete = $(ref.current);
-        if (!(onChange || noteIdChanged)) {
-            return;
-        }
 
-        const autoCompleteListener = (_e, suggestion) => {
-            onChange?.(suggestion);
+        if (onChange || noteIdChanged) {
+            const autoCompleteListener = (_e, suggestion) => {
+                onChange?.(suggestion);
 
-            if (noteIdChanged) {
-                const noteId = suggestion?.notePath?.split("/")?.at(-1);
-                noteIdChanged(noteId);
-            }
-        };
-        const changeListener = (e) => {
-            if (!ref.current?.value) {
-                autoCompleteListener(e, null);
-            }
-        };
-
-        $autoComplete
-            .on("autocomplete:noteselected", autoCompleteListener)
-            .on("autocomplete:externallinkselected", autoCompleteListener)
-            .on("autocomplete:commandselected", autoCompleteListener)
-            .on("change", changeListener);
-
-        return () => {
+                if (noteIdChanged) {
+                    const noteId = suggestion?.notePath?.split("/")?.at(-1);
+                    noteIdChanged(noteId);
+                }
+            };
+            const changeListener = (e) => {
+                if (!ref.current?.value) {
+                    autoCompleteListener(e, null);
+                }
+            };
             $autoComplete
-                .off("autocomplete:noteselected", autoCompleteListener)
-                .off("autocomplete:externallinkselected", autoCompleteListener)
-                .off("autocomplete:commandselected", autoCompleteListener)
-                .off("change", changeListener);
-        };
-    }, [onChange, noteIdChanged]);
+                .on("autocomplete:noteselected", autoCompleteListener)
+                .on("autocomplete:externallinkselected", autoCompleteListener)
+                .on("autocomplete:commandselected", autoCompleteListener)
+                .on("change", changeListener);
+            return () => {
+                $autoComplete
+                    .off("autocomplete:noteselected", autoCompleteListener)
+                    .off("autocomplete:externallinkselected", autoCompleteListener)
+                    .off("autocomplete:commandselected", autoCompleteListener)
+                    .off("change", changeListener);
+            };
+        }
+    }, [opts, container?.current, onChange, noteIdChanged])
 
     useEffect(() => {
         if (!ref.current) return;
         const $autoComplete = $(ref.current);
 
         if (noteId) {
-            void $autoComplete.setNote(noteId);
-            return;
+            $autoComplete.setNote(noteId);
+        } else if (text) {
+            note_autocomplete.setText($autoComplete, text);
+        } else {
+            $autoComplete.setSelectedNotePath("");
+            $autoComplete.autocomplete("val", "");
+            ref.current.value = "";
         }
-
-        if (text !== undefined) {
-            if (text) {
-                note_autocomplete.setText($autoComplete, text);
-            } else {
-                note_autocomplete.clearText($autoComplete);
-            }
-            return;
-        }
-
-        note_autocomplete.clearText($autoComplete);
     }, [text, noteId]);
 
     return (
@@ -137,8 +103,6 @@ export default function NoteAutocomplete({ id, inputRef: externalInputRef, text,
                 id={id}
                 ref={ref}
                 className="note-autocomplete form-control"
-                onKeyDownCapture={onKeyDownCapture}
-                onKeyUpCapture={onKeyUpCapture}
                 placeholder={placeholder ?? t("add_link.search_note")} />
         </div>
     );