chore(client): address requested changes

The commit f44b47ec added a hasTabBeenActive guard in NoteDetail that defers rendering until the tab has been active at least once. It initializes via noteContext?.isActive() and then listens for activeNoteChanged events.

The popup editor creates its own NoteContext("_popup-editor") which is never the activeNtxId in the tab manager — isActive() always returns false, and activeNoteChanged never fires for it. So hasTabBeenActive stays false forever, and the if (!type || !hasTabBeenActive) return guard at NoteDetail.tsx:64 prevents the note type widget from ever loading.

apps/build-docs/package.json

@@ -14,7 +14,7 @@
   "keywords": [],
   "author": "Elian Doran <contact@eliandoran.me>",
   "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.31.0",
+  "packageManager": "pnpm@10.32.0",
   "devDependencies": {
     "@redocly/cli": "2.20.2",
     "archiver": "7.0.1",

apps/client/package.json

@@ -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,7 +25,7 @@
     "@fullcalendar/rrule": "6.1.20",
     "@fullcalendar/timegrid": "6.1.20",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
-    "@mermaid-js/layout-elk": "0.2.0",
+    "@mermaid-js/layout-elk": "0.2.1",
     "@mind-elixir/node-menu": "5.0.1",
     "@popperjs/core": "2.11.8",
     "@preact/signals": "2.8.2",
@@ -45,6 +44,7 @@
     "@univerjs/preset-sheets-sort": "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",
@@ -93,4 +93,4 @@
     "script-loader": "0.7.2",
     "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/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/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/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/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/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;

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/en/translation.json

@@ -1036,6 +1036,25 @@
     "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."
   },
+  "video": {
+    "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": "Video preview is not available for this file format.",
+    "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",

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

@@ -41,7 +41,9 @@ export default function NoteDetail() {
     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).
-    const [ hasTabBeenActive, setHasTabBeenActive ] = useState(() => noteContext?.isActive() ?? false);
+    // 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);

apps/client/src/widgets/PromotedAttributes.tsx

@@ -8,7 +8,6 @@ import { Dispatch, StateUpdater, useCallback, useEffect, useRef, useState } from
 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, 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();
@@ -200,7 +200,11 @@ function LabelInput(props: CellProps & { inputId: string }) {
     }, [ cell, componentId, note, setCells ]);
     const extraInputProps: InputHTMLAttributes = {};
 
-    useTextLabelAutocomplete(inputId, valueAttr, definition, setDraft);
+    useTextLabelAutocomplete(inputId, valueAttr, definition, (e) => {
+        if (e.currentTarget instanceof HTMLInputElement) {
+            setDraft(e.currentTarget.value);
+        }
+    });
 
     // React to model changes.
     useEffect(() => {
@@ -254,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) {
@@ -409,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">
@@ -373,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
             });
         });
 
@@ -392,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())
             });
         });
 
@@ -478,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();
             }
         });

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

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

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

@@ -1,160 +0,0 @@
-import $ from "jquery";
-import type { ComponentChildren } from "preact";
-import { render } from "preact";
-import { act } from "preact/test-utils";
-import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
-
-const {
-    triliumEventHandlers,
-    latestModalPropsRef,
-    latestNoteAutocompletePropsRef,
-    addLinkSpy,
-    logErrorSpy,
-    showRecentNotesSpy,
-    setTextSpy
-} = vi.hoisted(() => ({
-    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()
-}));
-
-vi.mock("../../services/i18n", () => ({
-    t: (key: string) => key
-}));
-
-vi.mock("../../services/tree", () => ({
-    default: {
-        getNoteIdFromUrl: (notePath: string) => notePath.split("/").at(-1),
-        getNoteTitle: vi.fn(async () => "Target note")
-    }
-}));
-
-vi.mock("../../services/ws", () => ({
-    logError: logErrorSpy
-}));
-
-vi.mock("../../services/note_autocomplete", () => ({
-    __esModule: true,
-    default: {
-        showRecentNotes: showRecentNotesSpy,
-        setText: setTextSpy
-    }
-}));
-
-vi.mock("../react/react_utils", () => ({
-    refToJQuerySelector: (ref: { current: HTMLInputElement | null }) => ref.current ? $(ref.current) : $()
-}));
-
-vi.mock("../react/hooks", () => ({
-    useTriliumEvent: (name: string, handler: (payload: any) => void) => {
-        triliumEventHandlers.set(name, handler);
-    }
-}));
-
-vi.mock("../react/Modal", () => ({
-    default: (props: any) => {
-        latestModalPropsRef.current = props;
-
-        if (!props.show) {
-            return null;
-        }
-
-        return (
-            <form onSubmit={(e) => {
-                e.preventDefault();
-                props.onSubmit?.();
-            }}>
-                {props.children}
-                {props.footer}
-            </form>
-        );
-    }
-}));
-
-vi.mock("../react/FormGroup", () => ({
-    default: ({ children }: { children: ComponentChildren }) => <div>{children}</div>
-}));
-
-vi.mock("../react/Button", () => ({
-    default: ({ text }: { text: string }) => <button type="submit">{text}</button>
-}));
-
-vi.mock("../react/FormRadioGroup", () => ({
-    default: () => null
-}));
-
-vi.mock("../react/NoteAutocomplete", () => ({
-    default: (props: any) => {
-        latestNoteAutocompletePropsRef.current = props;
-        return <input ref={props.inputRef} />;
-    }
-}));
-
-import AddLinkDialog from "./add_link";
-
-describe("AddLinkDialog", () => {
-    let container: HTMLDivElement;
-
-    beforeEach(() => {
-        vi.clearAllMocks();
-        latestModalPropsRef.current = null;
-        latestNoteAutocompletePropsRef.current = null;
-        triliumEventHandlers.clear();
-        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 = triliumEventHandlers.get("showAddLinkDialog");
-        expect(showDialog).toBeTypeOf("function");
-
-        await act(async () => {
-            showDialog?.({
-                text: "",
-                hasSelection: false,
-                addLink: addLinkSpy
-            });
-        });
-
-        const suggestion = {
-            notePath: "root/target-note",
-            noteTitle: "Target note"
-        };
-
-        act(() => {
-            latestNoteAutocompletePropsRef.current.onKeyDownCapture({
-                key: "Enter",
-                ctrlKey: false,
-                metaKey: false,
-                shiftKey: false,
-                altKey: false,
-                isComposing: false
-            });
-            latestNoteAutocompletePropsRef.current.onChange(suggestion);
-        });
-
-        expect(latestModalPropsRef.current.show).toBe(false);
-        expect(logErrorSpy).not.toHaveBeenCalled();
-
-        await act(async () => {
-            latestModalPropsRef.current.onHidden();
-        });
-
-        expect(addLinkSpy).toHaveBeenCalledWith("root/target-note", null);
-    });
-});

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/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/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/layout/NoteBadges.css

@@ -36,6 +36,10 @@
                 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/react/NoteAutocomplete.spec.tsx

@@ -1,135 +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
-} = vi.hoisted(() => ({
-    initNoteAutocompleteSpy: vi.fn(($el) => $el),
-    setTextSpy: vi.fn(),
-    clearTextSpy: vi.fn()
-}));
-
-vi.mock("../../services/i18n", () => ({
-    t: (key: string) => key
-}));
-
-vi.mock("../../services/note_autocomplete", () => ({
-    __esModule: true,
-    default: {
-        initNoteAutocomplete: initNoteAutocompleteSpy,
-        setText: setTextSpy,
-        clearText: clearTextSpy
-    }
-}));
-
-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");
-    });
-});

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,111 +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 $autoComplete = $(ref.current);
 
+        // clear any event listener added in previous invocation of this function
+        $autoComplete
+            .off("autocomplete:noteselected")
+            .off("autocomplete:commandselected")
+
         note_autocomplete.initNoteAutocomplete($autoComplete, {
             ...opts,
             container: container?.current
         });
-    }, [opts, container?.current]);
-
-    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 (
@@ -130,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>
     );

apps/client/src/widgets/sidebar/TableOfContents.tsx

@@ -1,6 +1,6 @@
 import "./TableOfContents.css";
 
-import { CKTextEditor, ModelElement } from "@triliumnext/ckeditor5";
+import { attributeChangeAffectsHeading, CKTextEditor, ModelElement } from "@triliumnext/ckeditor5";
 import clsx from "clsx";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";
 
@@ -170,11 +170,14 @@ function EditableTextTableOfContents() {
 
             const affectsHeadings = changes.some( change => {
                 return (
-                    change.type === 'insert' || change.type === 'remove' || (change.type === 'attribute' && change.attributeKey === 'headingLevel')
+                    change.type === 'insert' || change.type === 'remove' ||
+                    (change.type === 'attribute' && attributeChangeAffectsHeading(change, textEditor))
                 );
             });
             if (affectsHeadings) {
-                setHeadings(extractTocFromTextEditor(textEditor));
+                requestAnimationFrame(() => {
+                    setHeadings(extractTocFromTextEditor(textEditor));
+                });
             }
         };
 

apps/client/src/widgets/type_widgets/Empty.css

@@ -50,8 +50,9 @@ body.desktop {
     border-radius: 8px;
 }
 
-.note-detail-empty-results .aa-core-panel--contained {
-    border: 0;
+.note-detail-empty-results .aa-dropdown-menu {
+    border: var(--bs-border-width) solid var(--bs-border-color);
+    border-top: 0;
 }
 
 .empty-tab-search label {

apps/client/src/widgets/type_widgets/File.css

@@ -24,8 +24,7 @@
     margin: 10px;
 }
 
-.note-detail-file > .pdf-preview,
-.note-detail-file > .video-preview {
+.note-detail-file > .pdf-preview {
     width: 100%;
     height: 100%;
     flex-grow: 100;
@@ -38,4 +37,4 @@
     right: 15px;
     width: calc(100% - 30px);
     transform: translateY(-50%);
-}
+}

apps/client/src/widgets/type_widgets/File.tsx

@@ -6,6 +6,7 @@ import { getUrlForDownload } from "../../services/open";
 import Alert from "../react/Alert";
 import { useNoteBlob } from "../react/hooks";
 import PdfPreview from "./file/Pdf";
+import VideoPreview from "./file/Video";
 import { TypeWidgetProps } from "./type_widget";
 
 const TEXT_MAX_NUM_CHARS = 5000;
@@ -42,17 +43,6 @@ function TextPreview({ content }: { content: string }) {
     );
 }
 
-function VideoPreview({ note }: { note: FNote }) {
-    return (
-        <video
-            class="video-preview"
-            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-            datatype={note?.mime}
-            controls
-        />
-    );
-}
-
 function AudioPreview({ note }: { note: FNote }) {
     return (
         <audio

apps/client/src/widgets/type_widgets/file/Video.css

@@ -0,0 +1,114 @@
+.note-detail-file > .video-preview-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    background-color: black;
+
+    .video-preview {
+        background-color: black;
+        width: 100%;
+        height: 100%;
+    }
+
+    &.controls-hidden {
+        cursor: pointer;
+
+        .video-preview-controls {
+            opacity: 0;
+            pointer-events: none;
+        }
+    }
+
+    .video-preview-controls {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        padding: 1.25em;
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+        background: rgba(0, 0, 0, 0.5);
+        color: white;
+        --icon-button-hover-color: white;
+        --icon-button-hover-background: rgba(255, 255, 255, 0.2);
+        opacity: 1;
+        transition: opacity 300ms ease;
+
+        .video-buttons-row {
+            display: flex;
+
+            > * {
+                flex: 1;
+                align-items: center;
+                gap: 0.5em;
+                display: flex;
+            }
+
+            .spacer {
+                width: var(--icon-button-size, 32px);
+                height: var(--icon-button-size, 32px);
+            }
+
+            .center {
+                justify-content: center;
+            }
+
+            .right {
+                display: flex;
+                justify-content: flex-end;
+            }
+
+            .play-button {
+                --icon-button-size: 48px;
+            }
+        }
+    }
+
+    .video-seekbar-row {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+    }
+
+    .video-trackbar {
+        flex: 1;
+        cursor: pointer;
+    }
+
+    .video-time {
+        font-size: 0.85em;
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+    }
+
+    .video-volume-row {
+        display: flex;
+        align-items: center;
+        gap: 0.25em;
+    }
+
+    .video-volume-slider {
+        width: 80px;
+        cursor: pointer;
+    }
+
+    .speed-dropdown {
+        position: relative;
+
+        .tn-icon {
+            transform: translateY(-10%);
+        }
+
+        .video-speed-label {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            transform: translateY(15%);
+            text-align: center;
+            font-size: 0.6rem;
+            font-variant-numeric: tabular-nums;
+        }
+    }
+}

apps/client/src/widgets/type_widgets/file/Video.tsx

@@ -0,0 +1,514 @@
+import "./Video.css";
+
+import { RefObject } from "preact";
+import { useCallback, useEffect, useRef, useState } from "preact/hooks";
+
+import FNote from "../../../entities/fnote";
+import { t } from "../../../services/i18n";
+import { getUrlForDownload } from "../../../services/open";
+import ActionButton from "../../react/ActionButton";
+import Dropdown from "../../react/Dropdown";
+import Icon from "../../react/Icon";
+import NoItems from "../../react/NoItems";
+
+function formatTime(seconds: number): string {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+}
+
+const AUTO_HIDE_DELAY = 3000;
+
+export default function VideoPreview({ note }: { note: FNote }) {
+    const wrapperRef = useRef<HTMLDivElement>(null);
+    const videoRef = useRef<HTMLVideoElement>(null);
+    const [playing, setPlaying] = useState(false);
+    const [error, setError] = useState(false);
+    const { visible: controlsVisible, onMouseMove, flash: flashControls } = useAutoHideControls(videoRef, playing);
+
+    useEffect(() => setError(false), [note.noteId]);
+    const onError = useCallback(() => setError(true), []);
+
+    const togglePlayback = useCallback(() => {
+        const video = videoRef.current;
+        if (!video) return;
+        if (video.paused) {
+            video.play();
+        } else {
+            video.pause();
+        }
+    }, []);
+
+    const onVideoClick = useCallback((e: MouseEvent) => {
+        if ((e.target as HTMLElement).closest(".video-preview-controls")) return;
+        togglePlayback();
+    }, [togglePlayback]);
+
+    const onKeyDown = useCallback((e: KeyboardEvent) => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        switch (e.key) {
+            case " ":
+                e.preventDefault();
+                togglePlayback();
+                flashControls();
+                break;
+            case "ArrowLeft":
+                e.preventDefault();
+                video.currentTime = Math.max(0, video.currentTime - (e.ctrlKey ? 60 : 10));
+                flashControls();
+                break;
+            case "ArrowRight":
+                e.preventDefault();
+                video.currentTime = Math.min(video.duration, video.currentTime + (e.ctrlKey ? 60 : 10));
+                flashControls();
+                break;
+            case "f":
+            case "F":
+                e.preventDefault();
+                if (document.fullscreenElement) {
+                    document.exitFullscreen();
+                } else {
+                    wrapperRef.current?.requestFullscreen();
+                }
+                break;
+            case "m":
+            case "M":
+                e.preventDefault();
+                video.muted = !video.muted;
+                flashControls();
+                break;
+            case "ArrowUp":
+                e.preventDefault();
+                video.volume = Math.min(1, video.volume + 0.05);
+                flashControls();
+                break;
+            case "ArrowDown":
+                e.preventDefault();
+                video.volume = Math.max(0, video.volume - 0.05);
+                flashControls();
+                break;
+            case "Home":
+                e.preventDefault();
+                video.currentTime = 0;
+                flashControls();
+                break;
+            case "End":
+                e.preventDefault();
+                video.currentTime = video.duration;
+                flashControls();
+                break;
+        }
+    }, [togglePlayback, flashControls]);
+
+    if (error) {
+        return <NoItems icon="bx bx-video-off" text={t("video.unsupported-format")} />;
+    }
+
+    return (
+        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
+            <video
+                ref={videoRef}
+                class="video-preview"
+                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+                datatype={note?.mime}
+                onPlay={() => setPlaying(true)}
+                onPause={() => setPlaying(false)}
+                onError={onError}
+            />
+
+            <div className="video-preview-controls">
+                <SeekBar videoRef={videoRef} />
+                <div class="video-buttons-row">
+                    <div className="left">
+                        <PlaybackSpeed videoRef={videoRef} />
+                        <RotateButton videoRef={videoRef} />
+                    </div>
+                    <div className="center">
+                        <div className="spacer" />
+                        <SkipButton videoRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("video.back-10s")} />
+                        <PlayPauseButton videoRef={videoRef} playing={playing} />
+                        <SkipButton videoRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("video.forward-30s")} />
+                        <LoopButton videoRef={videoRef} />
+                    </div>
+                    <div className="right">
+                        <VolumeControl videoRef={videoRef} />
+                        <ZoomToFitButton videoRef={videoRef} />
+                        <PictureInPictureButton videoRef={videoRef} />
+                        <FullscreenButton targetRef={wrapperRef} />
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boolean) {
+    const [visible, setVisible] = useState(true);
+    const hideTimerRef = useRef<ReturnType<typeof setTimeout>>();
+
+    const scheduleHide = useCallback(() => {
+        clearTimeout(hideTimerRef.current);
+        if (videoRef.current && !videoRef.current.paused) {
+            hideTimerRef.current = setTimeout(() => setVisible(false), AUTO_HIDE_DELAY);
+        }
+    }, []);
+
+    const onMouseMove = useCallback(() => {
+        setVisible(true);
+        scheduleHide();
+    }, [scheduleHide]);
+
+    // Hide immediately when playback starts, show when paused.
+    useEffect(() => {
+        if (playing) {
+            setVisible(false);
+        } else {
+            clearTimeout(hideTimerRef.current);
+            setVisible(true);
+        }
+        return () => clearTimeout(hideTimerRef.current);
+    }, [playing, scheduleHide]);
+
+    return { visible, onMouseMove, flash: onMouseMove };
+}
+
+function PlayPauseButton({ videoRef, playing }: { videoRef: RefObject<HTMLVideoElement>, playing: boolean }) {
+    const togglePlayback = () => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        if (video.paused) {
+            video.play();
+        } else {
+            video.pause();
+        }
+    };
+
+    return (
+        <ActionButton
+            className="play-button"
+            icon={playing ? "bx bx-pause" : "bx bx-play"}
+            text={playing ? t("video.pause") : t("video.play")}
+            onClick={togglePlayback}
+        />
+    );
+}
+
+function SkipButton({ videoRef, seconds, icon, text }: { videoRef: RefObject<HTMLVideoElement>, seconds: number, icon: string, text: string }) {
+    const skip = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.currentTime = Math.max(0, Math.min(video.duration, video.currentTime + seconds));
+    };
+
+    return (
+        <ActionButton icon={icon} text={text} onClick={skip} />
+    );
+}
+
+function SeekBar({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [currentTime, setCurrentTime] = useState(0);
+    const [duration, setDuration] = useState(0);
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        const onTimeUpdate = () => setCurrentTime(video.currentTime);
+        const onDurationChange = () => setDuration(video.duration);
+
+        video.addEventListener("timeupdate", onTimeUpdate);
+        video.addEventListener("durationchange", onDurationChange);
+        return () => {
+            video.removeEventListener("timeupdate", onTimeUpdate);
+            video.removeEventListener("durationchange", onDurationChange);
+        };
+    }, []);
+
+    const onSeek = (e: Event) => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.currentTime = parseFloat((e.target as HTMLInputElement).value);
+    };
+
+    return (
+        <div class="video-seekbar-row">
+            <span class="video-time">{formatTime(currentTime)}</span>
+            <input
+                type="range"
+                class="video-trackbar"
+                min={0}
+                max={duration || 0}
+                step={0.1}
+                value={currentTime}
+                onInput={onSeek}
+            />
+            <span class="video-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
+        </div>
+    );
+}
+
+function VolumeControl({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [volume, setVolume] = useState(() => videoRef.current?.volume ?? 1);
+    const [muted, setMuted] = useState(() => videoRef.current?.muted ?? false);
+
+    // Sync state when the video element changes volume externally.
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        setVolume(video.volume);
+        setMuted(video.muted);
+
+        const onVolumeChange = () => {
+            setVolume(video.volume);
+            setMuted(video.muted);
+        };
+        video.addEventListener("volumechange", onVolumeChange);
+        return () => video.removeEventListener("volumechange", onVolumeChange);
+    }, []);
+
+    const onVolumeChange = (e: Event) => {
+        const video = videoRef.current;
+        if (!video) return;
+        const val = parseFloat((e.target as HTMLInputElement).value);
+        video.volume = val;
+        setVolume(val);
+        if (val > 0 && video.muted) {
+            video.muted = false;
+            setMuted(false);
+        }
+    };
+
+    const toggleMute = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.muted = !video.muted;
+        setMuted(video.muted);
+    };
+
+    return (
+        <div class="video-volume-row">
+            <ActionButton
+                icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
+                text={muted ? t("video.unmute") : t("video.mute")}
+                onClick={toggleMute}
+            />
+            <input
+                type="range"
+                class="video-volume-slider"
+                min={0}
+                max={1}
+                step={0.05}
+                value={muted ? 0 : volume}
+                onInput={onVolumeChange}
+            />
+        </div>
+    );
+}
+
+const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
+
+function PlaybackSpeed({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [speed, setSpeed] = useState(() => videoRef.current?.playbackRate ?? 1);
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        setSpeed(video.playbackRate);
+
+        const onRateChange = () => setSpeed(video.playbackRate);
+        video.addEventListener("ratechange", onRateChange);
+        return () => video.removeEventListener("ratechange", onRateChange);
+    }, []);
+
+    const selectSpeed = (rate: number) => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.playbackRate = rate;
+        setSpeed(rate);
+    };
+
+    return (
+        <Dropdown
+            iconAction
+            hideToggleArrow
+            buttonClassName="speed-dropdown"
+            text={<>
+                <Icon icon="bx bx-tachometer" />
+                <span class="video-speed-label">{speed}x</span>
+            </>}
+            title={t("video.playback-speed")}
+        >
+            {PLAYBACK_SPEEDS.map((rate) => (
+                <li key={rate}>
+                    <button
+                        class={`dropdown-item ${rate === speed ? "active" : ""}`}
+                        onClick={() => selectSpeed(rate)}
+                    >
+                        {rate}x
+                    </button>
+                </li>
+            ))}
+        </Dropdown>
+    );
+}
+
+function LoopButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [loop, setLoop] = useState(() => videoRef.current?.loop ?? false);
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video) return;
+        setLoop(video.loop);
+
+        const observer = new MutationObserver(() => setLoop(video.loop));
+        observer.observe(video, { attributes: true, attributeFilter: ["loop"] });
+        return () => observer.disconnect();
+    }, []);
+
+    const toggle = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        video.loop = !video.loop;
+        setLoop(video.loop);
+    };
+
+    return (
+        <ActionButton
+            className={loop ? "active" : ""}
+            icon="bx bx-repeat"
+            text={loop ? t("video.disable-loop") : t("video.loop")}
+            onClick={toggle}
+        />
+    );
+}
+
+function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [rotation, setRotation] = useState(0);
+
+    const rotate = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        const next = (rotation + 90) % 360;
+        setRotation(next);
+
+        const isSideways = next === 90 || next === 270;
+        if (isSideways) {
+            // Scale down so the rotated video fits within its container.
+            const container = video.parentElement;
+            if (container) {
+                const ratio = container.clientWidth / container.clientHeight;
+                video.style.transform = `rotate(${next}deg) scale(${1 / ratio})`;
+            } else {
+                video.style.transform = `rotate(${next}deg)`;
+            }
+        } else {
+            video.style.transform = next === 0 ? "" : `rotate(${next}deg)`;
+        }
+    };
+
+    return (
+        <ActionButton
+            icon="bx bx-rotate-right"
+            text={t("video.rotate")}
+            onClick={rotate}
+        />
+    );
+}
+
+function ZoomToFitButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [fitted, setFitted] = useState(false);
+
+    const toggle = () => {
+        const video = videoRef.current;
+        if (!video) return;
+        const next = !fitted;
+        video.style.objectFit = next ? "cover" : "";
+        setFitted(next);
+    };
+
+    return (
+        <ActionButton
+            className={fitted ? "active" : ""}
+            icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
+            text={fitted ? t("video.zoom-reset") : t("video.zoom-to-fit")}
+            onClick={toggle}
+        />
+    );
+}
+
+function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
+    const [active, setActive] = useState(false);
+    // The standard PiP API is only supported in Chromium-based browsers.
+    // Firefox uses its own proprietary PiP implementation.
+    const supported = "requestPictureInPicture" in HTMLVideoElement.prototype;
+
+    useEffect(() => {
+        const video = videoRef.current;
+        if (!video || !supported) return;
+
+        const onEnter = () => setActive(true);
+        const onLeave = () => setActive(false);
+
+        video.addEventListener("enterpictureinpicture", onEnter);
+        video.addEventListener("leavepictureinpicture", onLeave);
+        return () => {
+            video.removeEventListener("enterpictureinpicture", onEnter);
+            video.removeEventListener("leavepictureinpicture", onLeave);
+        };
+    }, [supported]);
+
+    if (!supported) return null;
+
+    const toggle = () => {
+        const video = videoRef.current;
+        if (!video) return;
+
+        if (document.pictureInPictureElement) {
+            document.exitPictureInPicture();
+        } else {
+            video.requestPictureInPicture();
+        }
+    };
+
+    return (
+        <ActionButton
+            icon={active ? "bx bx-exit" : "bx bx-window-open"}
+            text={active ? t("video.exit-picture-in-picture") : t("video.picture-in-picture")}
+            onClick={toggle}
+        />
+    );
+}
+
+function FullscreenButton({ targetRef }: { targetRef: RefObject<HTMLElement> }) {
+    const [isFullscreen, setIsFullscreen] = useState(false);
+
+    useEffect(() => {
+        const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
+        document.addEventListener("fullscreenchange", onFullscreenChange);
+        return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
+    }, []);
+
+    const toggleFullscreen = () => {
+        const target = targetRef.current;
+        if (!target) return;
+
+        if (document.fullscreenElement) {
+            document.exitFullscreen();
+        } else {
+            target.requestFullscreen();
+        }
+    };
+
+    return (
+        <ActionButton
+            icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
+            text={isFullscreen ? t("video.exit-fullscreen") : t("video.fullscreen")}
+            onClick={toggleFullscreen}
+        />
+    );
+}

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

@@ -1,5 +1,4 @@
-import { expect,test } from "@playwright/test";
-
+import { test, expect } from "@playwright/test";
 import App from "../support/app";
 
 const TEXT_NOTE_TITLE = "Text notes";
@@ -33,7 +32,8 @@ test("Open the note in the correct split pane", async ({ page, context }) => {
     await noteContent.focus();
 
     // Click the search result in the second split.
-    await app.getNoteAutocompleteSuggestion(resultsSelector, CODE_NOTE_TITLE).click();
+    await resultsSelector.locator(".aa-suggestion", { hasText: CODE_NOTE_TITLE })
+        .nth(1).click();
 
     await expect(split2).toContainText(CODE_NOTE_TITLE);
 });
@@ -69,4 +69,4 @@ test("Can directly focus the autocomplete input within the split", async ({ page
 
     await page.waitForTimeout(100);
     await expect(autocomplete).toBeFocused();
-});
+});

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

@@ -27,7 +27,6 @@ export default class App {
     readonly currentNoteSplitContent: Locator;
     readonly sidebar: Locator;
     private isMobile: boolean = false;
-    private readonly noteAutocompleteSuggestionSelector = ".aa-suggestion:not(.create-note-action):not(.search-notes-action):not(.command-action):not(.external-link-action)";
 
     constructor(page: Page, context: BrowserContext) {
         this.page = page;
@@ -77,19 +76,12 @@ export default class App {
 
         const resultsSelector = this.currentNoteSplit.locator(".note-detail-empty-results");
         await expect(resultsSelector).toContainText(noteTitle);
-        const suggestionSelector = resultsSelector
-            .locator(this.noteAutocompleteSuggestionSelector, { hasText: noteTitle })
-            .first();
+        const suggestionSelector = resultsSelector.locator(".aa-suggestion")
+            .nth(1); // Select the second one (best candidate), as the first one is "Create a new note"
         await expect(suggestionSelector).toContainText(noteTitle);
         await suggestionSelector.click();
     }
 
-    getNoteAutocompleteSuggestion(resultsContainer: Locator, noteTitle: string) {
-        return resultsContainer
-            .locator(this.noteAutocompleteSuggestionSelector, { hasText: noteTitle })
-            .first();
-    }
-
     async goToSettings() {
         await this.page.locator(".launcher-button.bx-cog").click();
     }

apps/server/package.json

@@ -89,7 +89,7 @@
     "express": "5.2.1",
     "express-http-proxy": "2.1.2",
     "express-openid-connect": "2.19.4",
-    "express-rate-limit": "8.3.0",
+    "express-rate-limit": "8.3.1",
     "express-session": "1.19.0",
     "file-uri-to-path": "2.0.0",
     "fs-extra": "11.3.4",

apps/server/src/services/attributes.ts

@@ -71,27 +71,6 @@ function getAttributeNames(type: string, nameLike: string) {
         [type, `%${nameLike}%`]
     );
 
-    // Also include attribute definitions (e.g. 'relation:*' or 'label:*') which are saved as type='label'
-    if (type === "relation" || type === "label") {
-        const prefix = `${type}:`;
-        const defNames = sql.getColumn<string>(
-            /*sql*/`SELECT DISTINCT name
-                FROM attributes
-                WHERE isDeleted = 0
-                    AND type = 'label'
-                    AND name LIKE ?`,
-            [`${prefix}%${nameLike}%`]
-        );
-        for (const dn of defNames) {
-            if (dn.startsWith(prefix)) {
-                const stripped = dn.substring(prefix.length);
-                if (!names.includes(stripped)) {
-                    names.push(stripped);
-                }
-            }
-        }
-    }
-
     for (const attr of BUILTIN_ATTRIBUTES) {
         if (attr.type === type && attr.name.toLowerCase().includes(nameLike) && !names.includes(attr.name)) {
             names.push(attr.name);

apps/server/src/services/icon_pack_boxicons-v2.json

@@ -10449,6 +10449,12 @@
       "terms": [
         "virus-block"
       ]
+    },
+    "bx-empty": {
+      "glyph": "",
+      "terms": [
+        "empty"
+      ]
     }
   }
 }

apps/web-clipper/package.json

@@ -13,7 +13,7 @@
     "postinstall": "wxt prepare"
   },
   "keywords": [],
-  "packageManager": "pnpm@10.31.0",
+  "packageManager": "pnpm@10.32.0",
   "devDependencies": {
     "@wxt-dev/auto-icons": "1.1.1",
     "wxt": "0.20.18"

package.json

@@ -73,7 +73,7 @@
     "tslib": "2.8.1",
     "tsx": "4.21.0",
     "typescript": "5.9.3",
-    "typescript-eslint": "8.56.1",
+    "typescript-eslint": "8.57.0",
     "upath": "2.0.1",
     "vite": "7.3.1",
     "vite-plugin-dts": "4.5.4",
@@ -93,7 +93,7 @@
     "url": "https://github.com/TriliumNext/Trilium/issues"
   },
   "homepage": "https://triliumnotes.org",
-  "packageManager": "pnpm@10.31.0",
+  "packageManager": "pnpm@10.32.0",
   "pnpm": {
     "patchedDependencies": {
       "@ckeditor/ckeditor5-mention": "patches/@ckeditor__ckeditor5-mention.patch",

packages/ckeditor5-admonition/package.json

@@ -24,8 +24,8 @@
     "@ckeditor/ckeditor5-dev-build-tools": "54.3.3",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.0.1",
-    "@typescript-eslint/eslint-plugin": "8.56.1",
-    "@typescript-eslint/parser": "8.56.1",
+    "@typescript-eslint/eslint-plugin": "8.57.0",
+    "@typescript-eslint/parser": "8.57.0",
     "@vitest/browser": "4.0.18",
     "@vitest/coverage-istanbul": "4.0.18",
     "ckeditor5": "47.4.0",

packages/ckeditor5-footnotes/package.json

@@ -25,8 +25,8 @@
     "@ckeditor/ckeditor5-dev-build-tools": "54.3.3",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.0.1",
-    "@typescript-eslint/eslint-plugin": "8.56.1",
-    "@typescript-eslint/parser": "8.56.1",
+    "@typescript-eslint/eslint-plugin": "8.57.0",
+    "@typescript-eslint/parser": "8.57.0",
     "@vitest/browser": "4.0.18",
     "@vitest/coverage-istanbul": "4.0.18",
     "ckeditor5": "47.4.0",

packages/ckeditor5-keyboard-marker/package.json

@@ -27,8 +27,8 @@
     "@ckeditor/ckeditor5-dev-build-tools": "54.3.3",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.0.1",
-    "@typescript-eslint/eslint-plugin": "8.56.1",
-    "@typescript-eslint/parser": "8.56.1",
+    "@typescript-eslint/eslint-plugin": "8.57.0",
+    "@typescript-eslint/parser": "8.57.0",
     "@vitest/browser": "4.0.18",
     "@vitest/coverage-istanbul": "4.0.18",
     "ckeditor5": "47.4.0",

packages/ckeditor5-math/package.json

@@ -27,8 +27,8 @@
     "@ckeditor/ckeditor5-dev-build-tools": "54.3.3",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.0.1",
-    "@typescript-eslint/eslint-plugin": "8.56.1",
-    "@typescript-eslint/parser": "8.56.1",
+    "@typescript-eslint/eslint-plugin": "8.57.0",
+    "@typescript-eslint/parser": "8.57.0",
     "@vitest/browser": "4.0.18",
     "@vitest/coverage-istanbul": "4.0.18",
     "ckeditor5": "47.4.0",

packages/ckeditor5-mermaid/package.json

@@ -27,8 +27,8 @@
     "@ckeditor/ckeditor5-dev-build-tools": "54.3.3",
     "@ckeditor/ckeditor5-inspector": ">=4.1.0",
     "@ckeditor/ckeditor5-package-tools": "5.0.1",
-    "@typescript-eslint/eslint-plugin": "8.56.1",
-    "@typescript-eslint/parser": "8.56.1",
+    "@typescript-eslint/eslint-plugin": "8.57.0",
+    "@typescript-eslint/parser": "8.57.0",
     "@vitest/browser": "4.0.18",
     "@vitest/coverage-istanbul": "4.0.18",
     "ckeditor5": "47.4.0",

packages/ckeditor5/src/index.ts

@@ -11,6 +11,7 @@ export type { EditorConfig, MentionFeed, MentionFeedObjectItem, ModelNode, Model
 export type { TemplateDefinition } from "ckeditor5-premium-features";
 export { default as buildExtraCommands } from "./extra_slash_commands.js";
 export { default as getCkLocale } from "./i18n.js";
+export * from "./utils.js";
 
 // Import with sideffects to ensure that type augmentations are present.
 import "@triliumnext/ckeditor5-math";

packages/ckeditor5/src/utils.ts

@@ -0,0 +1,28 @@
+import type { DifferItemAttribute, Editor, ModelDocumentFragment, ModelElement, ModelNode } from "ckeditor5";
+
+function hasHeadingAncestor(node: ModelElement | ModelNode | ModelDocumentFragment | null): boolean {
+    let current: ModelElement | ModelNode | ModelDocumentFragment | null = node;
+    while (current) {
+        if (!!current && current.is('element') && (current as ModelElement).name.startsWith("heading")) return true;
+        current = current.parent;
+    }
+    return false;
+}
+
+export function attributeChangeAffectsHeading(change: DifferItemAttribute, editor: Editor): boolean {
+    if (change.type !== "attribute") return false;
+
+    // Fast checks on range boundaries
+    if (hasHeadingAncestor(change.range.start.parent) || hasHeadingAncestor(change.range.end.parent)) {
+        return true;
+    }
+
+    // Robust check across the whole changed range
+    const range = editor.model.createRange(change.range.start, change.range.end);
+    for (const item of range.getItems()) {
+        const baseNode = item.is("$textProxy") ? item.parent : item;
+        if (hasHeadingAncestor(baseNode)) return true;
+    }
+
+    return false;
+}

packages/share-theme/package.json

@@ -31,8 +31,8 @@
   "devDependencies": {
     "@digitak/esrun": "3.2.26",
     "@triliumnext/ckeditor5": "workspace:*",
-    "@typescript-eslint/eslint-plugin": "8.56.1",
-    "@typescript-eslint/parser": "8.56.1",
+    "@typescript-eslint/eslint-plugin": "8.57.0",
+    "@typescript-eslint/parser": "8.57.0",
     "dotenv": "17.3.1",
     "esbuild": "0.27.3",
     "eslint": "10.0.3",