feat(docs): add some more documentation around features that previously weren't documented

Currently translated at 99.4% (376 of 378 strings)

Translation: Trilium Notes/Server
Translate-URL: https://hosted.weblate.org/projects/trilium/server/uk/

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

@@ -162,3 +162,25 @@ runs:
         echo "Found ZIP: $zip_file"
         echo "Note: ZIP files are not code signed, but their contents should be"
       fi
+
+  - name: Sign the RPM
+    if: inputs.os == 'linux'
+    shell: ${{ inputs.shell }}
+    run: |
+      echo -n "$GPG_SIGNING_KEY" | base64 --decode | gpg --import
+
+      # Import the key into RPM for verification
+      gpg --export -a > pubkey
+      rpm --import pubkey
+      rm pubkey
+
+      # Sign the RPM
+      rpm_file=$(find ./apps/desktop/upload -name "*.rpm" -print -quit)
+      rpmsign --define "_gpg_name Trilium Notes Signing Key <triliumnotes@outlook.com>" --addsign "$rpm_file"
+      rpm -Kv "$rpm_file"
+
+      # Validate code signing
+      if ! rpm -K "$rpm_file" | grep -q "digests signatures OK"; then
+        echo .rpm file not signed
+        exit 1
+      fi

.github/workflows/checks.yml

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

.github/workflows/nightly.yml

@@ -27,7 +27,7 @@ permissions:
 
 jobs:
   nightly-electron:
-    if: github.repository == 'TriliumNext/Trilium'
+    if: github.repository == ${{ vars.REPO_MAIN }}
     name: Deploy nightly
     strategy:
       fail-fast: false
@@ -76,6 +76,7 @@ jobs:
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
           WINDOWS_SIGN_EXECUTABLE: ${{ vars.WINDOWS_SIGN_EXECUTABLE }}
+          GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Publish release
         uses: softprops/action-gh-release@v2.3.2
@@ -97,7 +98,7 @@ jobs:
           path: apps/desktop/upload
 
   nightly-server:
-    if: github.repository == 'TriliumNext/Trilium'  
+    if: github.repository == ${{ vars.REPO_MAIN }}
     name: Deploy server nightly
     strategy:
       fail-fast: false

.github/workflows/release.yml

@@ -58,6 +58,7 @@ jobs:
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
           WINDOWS_SIGN_EXECUTABLE: ${{ vars.WINDOWS_SIGN_EXECUTABLE }}
+          GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}
 
       - name: Upload the artifact
         uses: actions/upload-artifact@v4

README.md

@@ -1,11 +1,11 @@
 # Trilium Notes
 
 ![GitHub Sponsors](https://img.shields.io/github/sponsors/eliandoran) ![LiberaPay patrons](https://img.shields.io/liberapay/patrons/ElianDoran)  
-![Docker Pulls](https://img.shields.io/docker/pulls/triliumnext/notes)
-![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/triliumnext/notes/total)  
+![Docker Pulls](https://img.shields.io/docker/pulls/triliumnext/trilium)
+![GitHub Downloads (all assets, all releases)](https://img.shields.io/github/downloads/triliumnext/trilium/total)  
 [![RelativeCI](https://badges.relative-ci.com/badges/Di5q7dz9daNDZ9UXi0Bp?branch=develop)](https://app.relative-ci.com/projects/Di5q7dz9daNDZ9UXi0Bp) [![Translation status](https://hosted.weblate.org/widget/trilium/svg-badge.svg)](https://hosted.weblate.org/engage/trilium/)
 
-[English](./README.md) | [Chinese](./docs/README-ZH_CN.md) | [Russian](./docs/README.ru.md) | [Japanese](./docs/README.ja.md) | [Italian](./docs/README.it.md) | [Spanish](./docs/README.es.md)
+[English](./README.md) | [Chinese (Simplified)](./docs/README-ZH_CN.md) | [Chinese (Traditional)](./docs/README-ZH_TW.md) | [Russian](./docs/README.ru.md) | [Japanese](./docs/README.ja.md) | [Italian](./docs/README.it.md) | [Spanish](./docs/README.es.md)
 
 Trilium Notes is a free and open-source, cross-platform hierarchical note taking application with focus on building large personal knowledge bases.
 
@@ -46,15 +46,15 @@ See [screenshots](https://triliumnext.github.io/Docs/Wiki/screenshot-tour) for q
 - [awesome-trilium](https://github.com/Nriver/awesome-trilium) for 3rd party themes, scripts, plugins and more.
 - [TriliumRocks!](https://trilium.rocks/) for tutorials, guides, and much more.
 
-## ⚠️ Why TriliumNext?
+## ❓Why TriliumNext?
 
-[The original Trilium project is in maintenance mode](https://github.com/zadam/trilium/issues/4620).
+The original Trilium developer ([Zadam](https://github.com/zadam)) has graciously given the Trilium repository to the community project which resides at https://github.com/TriliumNext
 
-### Migrating from Trilium?
+### ⬆️Migrating from Zadam/Trilium?
 
-There are no special migration steps to migrate from a zadam/Trilium instance to a TriliumNext/Notes instance. Simply [install TriliumNext/Notes](#-installation) as usual and it will use your existing database.
+There are no special migration steps to migrate from a zadam/Trilium instance to a TriliumNext/Trilium instance. Simply [install TriliumNext/Trilium](#-installation) as usual and it will use your existing database.
 
-Versions up to and including [v0.90.4](https://github.com/TriliumNext/Notes/releases/tag/v0.90.4) are compatible with the latest zadam/trilium version of [v0.63.7](https://github.com/zadam/trilium/releases/tag/v0.63.7). Any later versions of TriliumNext have their sync versions incremented.
+Versions up to and including [v0.90.4](https://github.com/TriliumNext/Trilium/releases/tag/v0.90.4) are compatible with the latest zadam/trilium version of [v0.63.7](https://github.com/zadam/trilium/releases/tag/v0.63.7). Any later versions of TriliumNext/Trilium have their sync versions incremented which prevents direct migration.
 
 ## 📖 Documentation
 
@@ -75,8 +75,8 @@ Feel free to join our official conversations. We would love to hear what feature
 
 - [Matrix](https://matrix.to/#/#triliumnext:matrix.org) (For synchronous discussions.)
   - The `General` Matrix room is also bridged to [XMPP](xmpp:discuss@trilium.thisgreat.party?join)
-- [Github Discussions](https://github.com/TriliumNext/Notes/discussions) (For asynchronous discussions.)
-- [Github Issues](https://github.com/TriliumNext/Notes/issues) (For bug reports and feature requests.)
+- [Github Discussions](https://github.com/TriliumNext/Trilium/discussions) (For asynchronous discussions.)
+- [Github Issues](https://github.com/TriliumNext/Trilium/issues) (For bug reports and feature requests.)
 
 ## 🏗 Installation
 
@@ -104,13 +104,15 @@ Currently only the latest versions of Chrome & Firefox are supported (and tested
 
 To use TriliumNext on a mobile device, you can use a mobile web browser to access the mobile interface of a server installation (see below).
 
-If you prefer a native Android app, you can use [TriliumDroid](https://apt.izzysoft.de/fdroid/index/apk/eu.fliegendewurst.triliumdroid). Report bugs and missing features at [their repository](https://github.com/FliegendeWurst/TriliumDroid).
+See issue https://github.com/TriliumNext/Trilium/issues/4962 for more information on mobile app support.
 
-See issue https://github.com/TriliumNext/Notes/issues/72 for more information on mobile app support.
+If you prefer a native Android app, you can use [TriliumDroid](https://apt.izzysoft.de/fdroid/index/apk/eu.fliegendewurst.triliumdroid).
+Report bugs and missing features at [their repository](https://github.com/FliegendeWurst/TriliumDroid).
+Note: It is best to disable automatic updates on your server installation (see below) when using TriliumDroid since the sync version must match between Trilium and TriliumDroid.
 
 ### Server
 
-To install TriliumNext on your own server (including via Docker from [Dockerhub](https://hub.docker.com/r/triliumnext/notes)) follow [the server installation docs](https://triliumnext.github.io/Docs/Wiki/server-installation).
+To install TriliumNext on your own server (including via Docker from [Dockerhub](https://hub.docker.com/r/triliumnext/trilium)) follow [the server installation docs](https://triliumnext.github.io/Docs/Wiki/server-installation).
 
 
 ## 💻 Contribute
@@ -152,11 +154,11 @@ pnpm install
 pnpm nx --project=desktop electron-forge:make -- --arch=x64 --platform=win32
 ```
 
-For more details, see the [development docs](https://github.com/TriliumNext/Notes/blob/develop/docs/Developer%20Guide/Developer%20Guide/Building%20and%20deployment/Running%20a%20development%20build.md).
+For more details, see the [development docs](https://github.com/TriliumNext/Trilium/tree/main/docs/Developer%20Guide/Developer%20Guide).
 
 ### Developer Documentation
 
-Please view the [documentation guide](./docs/Developer%20Guide/Developer%20Guide/Environment%20Setup.md) for details. If you have more questions, feel free to reach out via the links described in the "Discuss with us" section above.
+Please view the [documentation guide](https://github.com/TriliumNext/Trilium/blob/main/docs/Developer%20Guide/Developer%20Guide/Environment%20Setup.md) for details. If you have more questions, feel free to reach out via the links described in the "Discuss with us" section above.
 
 ## 👏 Shoutouts
 
@@ -168,7 +170,7 @@ Please view the [documentation guide](./docs/Developer%20Guide/Developer%20Guide
 ## 🤝 Support
 
 Support for the TriliumNext organization will be possible in the near future. For now, you can:
-- Support continued development on TriliumNext by supporting our developers: [eliandoran](https://github.com/sponsors/eliandoran) (See the [repository insights]([developers]([url](https://github.com/TriliumNext/Notes/graphs/contributors))) for a full list)
+- Support continued development on TriliumNext by supporting our developers: [eliandoran](https://github.com/sponsors/eliandoran) (See the [repository insights]([developers]([url](https://github.com/TriliumNext/trilium/graphs/contributors))) for a full list)
 - Show a token of gratitude to the original Trilium developer ([zadam](https://github.com/sponsors/zadam)) via [PayPal](https://paypal.me/za4am) or Bitcoin (bitcoin:bc1qv3svjn40v89mnkre5vyvs2xw6y8phaltl385d2).
 
 

_regroup/package.json

@@ -35,10 +35,10 @@
     "chore:generate-openapi": "tsx bin/generate-openapi.js"
   },
   "devDependencies": {    
-    "@playwright/test": "1.54.2",
+    "@playwright/test": "1.55.0",
     "@stylistic/eslint-plugin": "5.2.3",        
     "@types/express": "5.0.3",    
-    "@types/node": "22.17.1",    
+    "@types/node": "22.17.2",    
     "@types/yargs": "17.0.33",
     "@vitest/coverage-v8": "3.2.4",
     "eslint": "9.33.0",

apps/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@triliumnext/client",
-  "version": "0.97.2",
+  "version": "0.98.0",
   "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
   "private": true,
   "license": "AGPL-3.0-only",
@@ -19,7 +19,7 @@
     "@fullcalendar/multimonth": "6.1.19",
     "@fullcalendar/timegrid": "6.1.19",
     "@maplibre/maplibre-gl-leaflet": "0.1.3",
-    "@mermaid-js/layout-elk": "0.1.8",
+    "@mermaid-js/layout-elk": "0.1.9",
     "@mind-elixir/node-menu": "5.0.0",
     "@popperjs/core": "2.11.8",
     "@triliumnext/ckeditor5": "workspace:*",
@@ -36,7 +36,7 @@
     "draggabilly": "3.0.0",
     "force-graph": "1.50.1",
     "globals": "16.3.0",
-    "i18next": "25.3.4",
+    "i18next": "25.4.0",
     "i18next-http-backend": "3.0.2",
     "jquery": "3.7.1",
     "jquery.fancytree": "2.38.5",
@@ -46,17 +46,17 @@
     "leaflet": "1.9.4",
     "leaflet-gpx": "2.2.0",
     "mark.js": "8.11.1",
-    "marked": "16.1.2",
-    "mermaid": "11.9.0",
-    "mind-elixir": "5.0.5",
+    "marked": "16.2.0",
+    "mermaid": "11.10.0",
+    "mind-elixir": "5.0.6",
     "normalize.css": "8.0.1",
     "panzoom": "9.4.3",
-    "preact": "10.27.0",
+    "preact": "10.27.1",
+    "react-i18next": "15.7.0",
     "split.js": "1.6.5",
     "svg-pan-zoom": "3.6.2",
     "tabulator-tables": "6.3.1",
-    "vanilla-js-wheel-zoom": "9.0.4",
-    "photoswipe": "^5.4.4"
+    "vanilla-js-wheel-zoom": "9.0.4"
   },
   "devDependencies": {
     "@ckeditor/ckeditor5-inspector": "5.0.0",

apps/client/src/desktop.ts

@@ -13,8 +13,6 @@ import type ElectronRemote from "@electron/remote";
 import type Electron from "electron";
 import "./stylesheets/bootstrap.scss";
 import "boxicons/css/boxicons.min.css";
-import "./stylesheets/media-viewer.css";
-import "./styles/gallery.css";
 import "autocomplete.js/index_jquery.js";
 
 await appContext.earlyInit();

apps/client/src/menus/image_context_menu.ts

@@ -2,8 +2,6 @@ import { t } from "../services/i18n.js";
 import utils from "../services/utils.js";
 import contextMenu from "./context_menu.js";
 import imageService from "../services/image.js";
-import mediaViewer from "../services/media_viewer.js";
-import type { MediaItem } from "../services/media_viewer.js";
 
 const PROP_NAME = "imageContextMenuInstalled";
 
@@ -20,12 +18,6 @@ function setupContextMenu($image: JQuery<HTMLElement>) {
             x: e.pageX,
             y: e.pageY,
             items: [
-                {
-                    title: "View in Lightbox",
-                    command: "viewInLightbox",
-                    uiIcon: "bx bx-expand",
-                    enabled: true
-                },
                 {
                     title: t("image_context_menu.copy_reference_to_clipboard"),
                     command: "copyImageReferenceToClipboard",
@@ -38,48 +30,7 @@ function setupContextMenu($image: JQuery<HTMLElement>) {
                 }
             ],
             selectMenuItemHandler: async ({ command }) => {
-                if (command === "viewInLightbox") {
-                    const src = $image.attr("src");
-                    const alt = $image.attr("alt");
-                    const title = $image.attr("title");
-                    
-                    if (!src) {
-                        console.error("Missing image source");
-                        return;
-                    }
-                    
-                    const item: MediaItem = {
-                        src: src,
-                        alt: alt || "Image",
-                        title: title || alt,
-                        element: $image[0] as HTMLElement
-                    };
-                    
-                    // Try to get actual dimensions
-                    const imgElement = $image[0] as HTMLImageElement;
-                    if (imgElement.naturalWidth && imgElement.naturalHeight) {
-                        item.width = imgElement.naturalWidth;
-                        item.height = imgElement.naturalHeight;
-                    }
-                    
-                    mediaViewer.openSingle(item, {
-                        bgOpacity: 0.95,
-                        showHideOpacity: true,
-                        pinchToClose: true,
-                        closeOnScroll: false,
-                        closeOnVerticalDrag: true,
-                        wheelToZoom: true,
-                        getThumbBoundsFn: () => {
-                            // Get position for zoom animation
-                            const rect = imgElement.getBoundingClientRect();
-                            return {
-                                x: rect.left,
-                                y: rect.top,
-                                w: rect.width
-                            };
-                        }
-                    });
-                } else if (command === "copyImageReferenceToClipboard") {
+                if (command === "copyImageReferenceToClipboard") {
                     imageService.copyImageReferenceToClipboard($image);
                 } else if (command === "copyImageToClipboard") {
                     try {

apps/client/src/mobile.ts

@@ -3,7 +3,6 @@ import noteAutocompleteService from "./services/note_autocomplete.js";
 import glob from "./services/glob.js";
 import "./stylesheets/bootstrap.scss";
 import "boxicons/css/boxicons.min.css";
-import "./stylesheets/media-viewer.css";
 import "autocomplete.js/index_jquery.js";
 
 glob.setupGlobs();

apps/client/src/services/ckeditor_photoswipe_integration.ts

@@ -1,521 +0,0 @@
-/**
- * CKEditor PhotoSwipe Integration
- * Handles click-to-lightbox functionality for images in CKEditor content
- */
-
-import mediaViewer from './media_viewer.js';
-import galleryManager from './gallery_manager.js';
-import appContext from '../components/app_context.js';
-import type { MediaItem } from './media_viewer.js';
-import type { GalleryItem } from './gallery_manager.js';
-
-/**
- * Configuration for CKEditor PhotoSwipe integration
- */
-interface CKEditorPhotoSwipeConfig {
-    enableGalleryMode?: boolean;
-    showHints?: boolean;
-    hintDelay?: number;
-    excludeSelector?: string;
-}
-
-/**
- * Integration manager for CKEditor and PhotoSwipe
- */
-class CKEditorPhotoSwipeIntegration {
-    private static instance: CKEditorPhotoSwipeIntegration;
-    private config: Required<CKEditorPhotoSwipeConfig>;
-    private observers: Map<HTMLElement, MutationObserver> = new Map();
-    private processedImages: WeakSet<HTMLImageElement> = new WeakSet();
-    private containerGalleries: Map<HTMLElement, GalleryItem[]> = new Map();
-    private hintPool: HTMLElement[] = [];
-    private activeHints: Map<string, HTMLElement> = new Map();
-    private hintTimeouts: Map<string, number> = new Map();
-    
-    private constructor() {
-        this.config = {
-            enableGalleryMode: true,
-            showHints: true,
-            hintDelay: 2000,
-            excludeSelector: '.no-lightbox, .cke_widget_element'
-        };
-    }
-    
-    /**
-     * Get singleton instance
-     */
-    static getInstance(): CKEditorPhotoSwipeIntegration {
-        if (!CKEditorPhotoSwipeIntegration.instance) {
-            CKEditorPhotoSwipeIntegration.instance = new CKEditorPhotoSwipeIntegration();
-        }
-        return CKEditorPhotoSwipeIntegration.instance;
-    }
-    
-    /**
-     * Setup integration for a CKEditor content container
-     */
-    setupContainer(container: HTMLElement | JQuery<HTMLElement>, config?: Partial<CKEditorPhotoSwipeConfig>): void {
-        const element = container instanceof $ ? container[0] : container;
-        if (!element) return;
-        
-        // Merge configuration
-        if (config) {
-            this.config = { ...this.config, ...config };
-        }
-        
-        // Process existing images
-        this.processImages(element);
-        
-        // Setup mutation observer for dynamically added images
-        this.observeContainer(element);
-        
-        // Setup gallery if enabled
-        if (this.config.enableGalleryMode) {
-            this.setupGalleryMode(element);
-        }
-    }
-    
-    /**
-     * Process all images in a container
-     */
-    private processImages(container: HTMLElement): void {
-        const images = container.querySelectorAll<HTMLImageElement>(`img:not(${this.config.excludeSelector})`);
-        
-        images.forEach(img => {
-            if (!this.processedImages.has(img)) {
-                this.setupImageLightbox(img);
-                this.processedImages.add(img);
-            }
-        });
-    }
-    
-    /**
-     * Setup lightbox for a single image
-     */
-    private setupImageLightbox(img: HTMLImageElement): void {
-        // Skip if already processed or is a CKEditor widget element
-        if (img.closest('.cke_widget_element') || img.closest('.ck-widget')) {
-            return;
-        }
-        
-        // Make image clickable and mark it as PhotoSwipe-enabled
-        img.style.cursor = 'zoom-in';
-        img.style.transition = 'opacity 0.2s';
-        img.classList.add('photoswipe-enabled');
-        img.setAttribute('data-photoswipe', 'true');
-        
-        // Store event handlers for cleanup
-        const mouseEnterHandler = () => {
-            img.style.opacity = '0.9';
-            if (this.config.showHints) {
-                this.showHint(img);
-            }
-        };
-        
-        const mouseLeaveHandler = () => {
-            img.style.opacity = '1';
-            this.hideHint(img);
-        };
-        
-        // Add hover effect with cleanup tracking
-        img.addEventListener('mouseenter', mouseEnterHandler);
-        img.addEventListener('mouseleave', mouseLeaveHandler);
-        
-        // Store handlers for cleanup
-        (img as any)._photoswipeHandlers = { mouseEnterHandler, mouseLeaveHandler };
-        
-        // Add double-click handler to prevent default navigation behavior
-        const dblClickHandler = (e: MouseEvent) => {
-            // Only prevent double-click in specific contexts to avoid breaking other features
-            if (img.closest('.attachment-detail-wrapper') || 
-                img.closest('.note-detail-editable-text') ||
-                img.closest('.note-detail-readonly-text')) {
-                e.preventDefault();
-                e.stopPropagation();
-                e.stopImmediatePropagation();
-                
-                // Trigger the same behavior as single click (open lightbox)
-                img.click();
-            }
-        };
-        
-        img.addEventListener('dblclick', dblClickHandler, true); // Use capture phase to ensure we get it first
-        (img as any)._photoswipeHandlers.dblClickHandler = dblClickHandler;
-        
-        // Add click handler
-        img.addEventListener('click', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            
-            // Check if we should open as gallery
-            const container = img.closest('.note-detail-editable-text, .note-detail-readonly-text');
-            if (container && this.config.enableGalleryMode) {
-                const gallery = this.containerGalleries.get(container as HTMLElement);
-                if (gallery && gallery.length > 1) {
-                    // Find index of clicked image
-                    const index = gallery.findIndex(item => {
-                        const itemElement = document.querySelector(`img[src="${item.src}"]`);
-                        return itemElement === img;
-                    });
-                    
-                    galleryManager.openGallery(gallery, index >= 0 ? index : 0, {
-                        showThumbnails: true,
-                        showCounter: true,
-                        enableKeyboardNav: true,
-                        loop: true
-                    });
-                    return;
-                }
-            }
-            
-            // Open single image
-            this.openSingleImage(img);
-        });
-        
-        // Add keyboard support
-        img.setAttribute('tabindex', '0');
-        img.setAttribute('role', 'button');
-        img.setAttribute('aria-label', 'Click to view in lightbox');
-        
-        img.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                img.click();
-            }
-        });
-    }
-    
-    /**
-     * Open a single image in lightbox
-     */
-    private openSingleImage(img: HTMLImageElement): void {
-        const item: MediaItem = {
-            src: img.src,
-            alt: img.alt || 'Image',
-            title: img.title || img.alt,
-            element: img,
-            width: img.naturalWidth || undefined,
-            height: img.naturalHeight || undefined
-        };
-        
-        mediaViewer.openSingle(item, {
-            bgOpacity: 0.95,
-            showHideOpacity: true,
-            pinchToClose: true,
-            closeOnScroll: false,
-            closeOnVerticalDrag: true,
-            wheelToZoom: true,
-            getThumbBoundsFn: () => {
-                const rect = img.getBoundingClientRect();
-                return {
-                    x: rect.left,
-                    y: rect.top,
-                    w: rect.width
-                };
-            }
-        }, {
-            onClose: () => {
-                // Check if we're in attachment detail view and need to reset viewScope
-                const activeContext = appContext.tabManager.getActiveContext();
-                if (activeContext?.viewScope?.viewMode === 'attachments') {
-                    // Get the note ID from the image source
-                    const attachmentMatch = img.src.match(/\/api\/attachments\/([A-Za-z0-9_]+)\/image\//);
-                    if (attachmentMatch) {
-                        const currentAttachmentId = activeContext.viewScope.attachmentId;
-                        if (currentAttachmentId === attachmentMatch[1]) {
-                            // Actually reset the viewScope instead of just logging
-                            try {
-                                if (activeContext.note) {
-                                    activeContext.setNote(activeContext.note.noteId, { 
-                                        viewScope: { viewMode: 'default' } 
-                                    });
-                                }
-                            } catch (error) {
-                                console.error('Failed to reset viewScope after PhotoSwipe close:', error);
-                            }
-                        }
-                    }
-                }
-                // Restore focus to the image
-                img.focus();
-            }
-        });
-    }
-    
-    /**
-     * Setup gallery mode for a container
-     */
-    private setupGalleryMode(container: HTMLElement): void {
-        const images = container.querySelectorAll<HTMLImageElement>(`img:not(${this.config.excludeSelector})`);
-        if (images.length <= 1) return;
-        
-        const galleryItems: GalleryItem[] = [];
-        
-        images.forEach((img, index) => {
-            // Skip CKEditor widget elements
-            if (img.closest('.cke_widget_element') || img.closest('.ck-widget')) {
-                return;
-            }
-            
-            const item: GalleryItem = {
-                src: img.src,
-                alt: img.alt || `Image ${index + 1}`,
-                title: img.title || img.alt,
-                element: img,
-                index: index,
-                width: img.naturalWidth || undefined,
-                height: img.naturalHeight || undefined
-            };
-            
-            // Check for caption
-            const figure = img.closest('figure');
-            if (figure) {
-                const caption = figure.querySelector('figcaption');
-                if (caption) {
-                    item.caption = caption.textContent || undefined;
-                }
-            }
-            
-            galleryItems.push(item);
-        });
-        
-        if (galleryItems.length > 0) {
-            this.containerGalleries.set(container, galleryItems);
-        }
-    }
-    
-    /**
-     * Observe container for dynamic changes
-     */
-    private observeContainer(container: HTMLElement): void {
-        // Disconnect existing observer if any
-        const existingObserver = this.observers.get(container);
-        if (existingObserver) {
-            existingObserver.disconnect();
-        }
-        
-        const observer = new MutationObserver((mutations) => {
-            let hasNewImages = false;
-            
-            mutations.forEach(mutation => {
-                if (mutation.type === 'childList') {
-                    mutation.addedNodes.forEach(node => {
-                        if (node.nodeType === Node.ELEMENT_NODE) {
-                            const element = node as HTMLElement;
-                            if (element.tagName === 'IMG') {
-                                hasNewImages = true;
-                            } else if (element.querySelector('img')) {
-                                hasNewImages = true;
-                            }
-                        }
-                    });
-                }
-            });
-            
-            if (hasNewImages) {
-                // Process new images
-                this.processImages(container);
-                
-                // Update gallery if enabled
-                if (this.config.enableGalleryMode) {
-                    this.setupGalleryMode(container);
-                }
-            }
-        });
-        
-        observer.observe(container, {
-            childList: true,
-            subtree: true
-        });
-        
-        this.observers.set(container, observer);
-    }
-    
-    /**
-     * Get or create a hint element from the pool
-     */
-    private getHintFromPool(): HTMLElement {
-        let hint = this.hintPool.pop();
-        if (!hint) {
-            hint = document.createElement('div');
-            hint.className = 'ckeditor-image-hint';
-            hint.textContent = 'Click to view in lightbox';
-            hint.style.cssText = `
-                position: absolute;
-                background: rgba(0, 0, 0, 0.8);
-                color: white;
-                padding: 4px 8px;
-                border-radius: 4px;
-                font-size: 12px;
-                z-index: 1000;
-                pointer-events: none;
-                opacity: 0;
-                transition: opacity 0.3s;
-                display: none;
-            `;
-        }
-        return hint;
-    }
-    
-    /**
-     * Return hint to pool
-     */
-    private returnHintToPool(hint: HTMLElement): void {
-        hint.style.opacity = '0';
-        hint.style.display = 'none';
-        if (this.hintPool.length < 10) { // Keep max 10 hints in pool
-            this.hintPool.push(hint);
-        } else {
-            hint.remove();
-        }
-    }
-    
-    /**
-     * Show hint for an image
-     */
-    private showHint(img: HTMLImageElement): void {
-        // Check if hint already exists
-        const imgId = img.dataset.imgId || `img-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-        if (!img.dataset.imgId) {
-            img.dataset.imgId = imgId;
-        }
-        
-        // Clear any existing timeout
-        const existingTimeout = this.hintTimeouts.get(imgId);
-        if (existingTimeout) {
-            clearTimeout(existingTimeout);
-            this.hintTimeouts.delete(imgId);
-        }
-        
-        let hint = this.activeHints.get(imgId);
-        if (hint) {
-            hint.style.opacity = '1';
-            return;
-        }
-        
-        // Get hint from pool
-        hint = this.getHintFromPool();
-        this.activeHints.set(imgId, hint);
-        
-        // Position and show hint
-        if (!hint.parentElement) {
-            document.body.appendChild(hint);
-        }
-        
-        const imgRect = img.getBoundingClientRect();
-        hint.style.display = 'block';
-        hint.style.left = `${imgRect.left + (imgRect.width - hint.offsetWidth) / 2}px`;
-        hint.style.top = `${imgRect.top - hint.offsetHeight - 5}px`;
-        
-        // Show hint
-        requestAnimationFrame(() => {
-            hint.style.opacity = '1';
-        });
-        
-        // Auto-hide after delay
-        const timeout = window.setTimeout(() => {
-            this.hideHint(img);
-        }, this.config.hintDelay);
-        this.hintTimeouts.set(imgId, timeout);
-    }
-    
-    /**
-     * Hide hint for an image
-     */
-    private hideHint(img: HTMLImageElement): void {
-        const imgId = img.dataset.imgId;
-        if (!imgId) return;
-        
-        // Clear timeout
-        const timeout = this.hintTimeouts.get(imgId);
-        if (timeout) {
-            clearTimeout(timeout);
-            this.hintTimeouts.delete(imgId);
-        }
-        
-        const hint = this.activeHints.get(imgId);
-        if (hint) {
-            hint.style.opacity = '0';
-            this.activeHints.delete(imgId);
-            
-            setTimeout(() => {
-                this.returnHintToPool(hint);
-            }, 300);
-        }
-    }
-    
-    /**
-     * Cleanup integration for a container
-     */
-    cleanupContainer(container: HTMLElement | JQuery<HTMLElement>): void {
-        const element = container instanceof $ ? container[0] : container;
-        if (!element) return;
-        
-        // Disconnect observer
-        const observer = this.observers.get(element);
-        if (observer) {
-            observer.disconnect();
-            this.observers.delete(element);
-        }
-        
-        // Clear gallery
-        this.containerGalleries.delete(element);
-        
-        // Remove event handlers and hints
-        const images = element.querySelectorAll<HTMLImageElement>('img');
-        images.forEach(img => {
-            this.hideHint(img);
-            
-            // Remove event handlers
-            const handlers = (img as any)._photoswipeHandlers;
-            if (handlers) {
-                img.removeEventListener('mouseenter', handlers.mouseEnterHandler);
-                img.removeEventListener('mouseleave', handlers.mouseLeaveHandler);
-                if (handlers.dblClickHandler) {
-                    img.removeEventListener('dblclick', handlers.dblClickHandler, true);
-                }
-                delete (img as any)._photoswipeHandlers;
-            }
-            
-            // Mark as unprocessed
-            this.processedImages.delete(img);
-        });
-    }
-    
-    /**
-     * Update configuration
-     */
-    updateConfig(config: Partial<CKEditorPhotoSwipeConfig>): void {
-        this.config = { ...this.config, ...config };
-    }
-    
-    /**
-     * Cleanup all integrations
-     */
-    cleanup(): void {
-        // Disconnect all observers
-        this.observers.forEach(observer => observer.disconnect());
-        this.observers.clear();
-        
-        // Clear all galleries
-        this.containerGalleries.clear();
-        
-        // Clear all hints
-        this.activeHints.forEach(hint => hint.remove());
-        this.activeHints.clear();
-        
-        // Clear all timeouts
-        this.hintTimeouts.forEach(timeout => clearTimeout(timeout));
-        this.hintTimeouts.clear();
-        
-        // Clear hint pool
-        this.hintPool.forEach(hint => hint.remove());
-        this.hintPool = [];
-        
-        // Clear processed images
-        this.processedImages = new WeakSet();
-    }
-}
-
-// Export singleton instance
-export default CKEditorPhotoSwipeIntegration.getInstance();

apps/client/src/services/froca_updater.ts

@@ -35,8 +35,10 @@ async function processEntityChanges(entityChanges: EntityChange[]) {
                 loadResults.addOption(attributeEntity.name);
             } else if (ec.entityName === "attachments") {
                 processAttachment(loadResults, ec);
-            } else if (ec.entityName === "blobs" || ec.entityName === "etapi_tokens") {
+            } else if (ec.entityName === "blobs") {
                 // NOOP - these entities are handled at the backend level and don't require frontend processing
+            } else if (ec.entityName === "etapi_tokens") {
+                loadResults.hasEtapiTokenChanges = true;
             } else {
                 throw new Error(`Unknown entityName '${ec.entityName}'`);
             }
@@ -77,9 +79,7 @@ async function processEntityChanges(entityChanges: EntityChange[]) {
             noteAttributeCache.invalidate();
         }
 
-        // TODO: Remove after porting the file
-        // @ts-ignore
-        const appContext = (await import("../components/app_context.js")).default as any;
+        const appContext = (await import("../components/app_context.js")).default;
         await appContext.triggerEvent("entitiesReloaded", { loadResults });
     }
 }

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

@@ -1,387 +0,0 @@
-/**
- * Tests for Gallery Manager
- */
-
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-import galleryManager from './gallery_manager';
-import mediaViewer from './media_viewer';
-import type { GalleryItem, GalleryConfig } from './gallery_manager';
-import type { MediaViewerCallbacks } from './media_viewer';
-
-// Mock media viewer
-vi.mock('./media_viewer', () => ({
-    default: {
-        open: vi.fn(),
-        openSingle: vi.fn(),
-        close: vi.fn(),
-        next: vi.fn(),
-        prev: vi.fn(),
-        goTo: vi.fn(),
-        getCurrentIndex: vi.fn(() => 0),
-        isOpen: vi.fn(() => false),
-        getImageDimensions: vi.fn(() => Promise.resolve({ width: 800, height: 600 }))
-    }
-}));
-
-// Mock froca
-vi.mock('./froca', () => ({
-    default: {
-        getNoteComplement: vi.fn()
-    }
-}));
-
-// Mock utils
-vi.mock('./utils', () => ({
-    default: {
-        createImageSrcUrl: vi.fn((note: any) => `/api/images/${note.noteId}`),
-        randomString: vi.fn(() => 'test123')
-    }
-}));
-
-describe('GalleryManager', () => {
-    let mockItems: GalleryItem[];
-    
-    beforeEach(() => {
-        // Reset mocks
-        vi.clearAllMocks();
-        
-        // Create mock gallery items
-        mockItems = [
-            {
-                src: '/api/images/note1/image1.jpg',
-                alt: 'Image 1',
-                title: 'First Image',
-                noteId: 'note1',
-                index: 0,
-                width: 800,
-                height: 600
-            },
-            {
-                src: '/api/images/note1/image2.jpg',
-                alt: 'Image 2',
-                title: 'Second Image',
-                noteId: 'note1',
-                index: 1,
-                width: 1024,
-                height: 768
-            },
-            {
-                src: '/api/images/note1/image3.jpg',
-                alt: 'Image 3',
-                title: 'Third Image',
-                noteId: 'note1',
-                index: 2,
-                width: 1920,
-                height: 1080
-            }
-        ];
-        
-        // Setup DOM
-        document.body.innerHTML = '';
-    });
-    
-    afterEach(() => {
-        // Cleanup
-        galleryManager.cleanup();
-        document.body.innerHTML = '';
-    });
-    
-    describe('Gallery Creation', () => {
-        it('should create gallery from container with images', async () => {
-            // Create container with images
-            const container = document.createElement('div');
-            container.innerHTML = `
-                <img src="/api/images/note1/image1.jpg" alt="Image 1" />
-                <img src="/api/images/note1/image2.jpg" alt="Image 2" />
-                <img src="/api/images/note1/image3.jpg" alt="Image 3" />
-            `;
-            document.body.appendChild(container);
-            
-            // Create gallery from container
-            const items = await galleryManager.createGalleryFromContainer(container);
-            
-            expect(items).toHaveLength(3);
-            expect(items[0].src).toBe('/api/images/note1/image1.jpg');
-            expect(items[0].alt).toBe('Image 1');
-            expect(items[0].index).toBe(0);
-        });
-        
-        it('should extract captions from figure elements', async () => {
-            const container = document.createElement('div');
-            container.innerHTML = `
-                <figure>
-                    <img src="/api/images/note1/image1.jpg" alt="Image 1" />
-                    <figcaption>This is a caption</figcaption>
-                </figure>
-            `;
-            document.body.appendChild(container);
-            
-            const items = await galleryManager.createGalleryFromContainer(container);
-            
-            expect(items).toHaveLength(1);
-            expect(items[0].caption).toBe('This is a caption');
-        });
-        
-        it('should handle images without dimensions', async () => {
-            const container = document.createElement('div');
-            container.innerHTML = `<img src="/api/images/note1/image1.jpg" alt="Image 1" />`;
-            document.body.appendChild(container);
-            
-            const items = await galleryManager.createGalleryFromContainer(container);
-            
-            expect(items).toHaveLength(1);
-            expect(items[0].width).toBe(800); // From mocked getImageDimensions
-            expect(items[0].height).toBe(600);
-            expect(mediaViewer.getImageDimensions).toHaveBeenCalledWith('/api/images/note1/image1.jpg');
-        });
-    });
-    
-    describe('Gallery Opening', () => {
-        it('should open gallery with multiple items', () => {
-            const callbacks: MediaViewerCallbacks = {
-                onOpen: vi.fn(),
-                onClose: vi.fn(),
-                onChange: vi.fn()
-            };
-            
-            galleryManager.openGallery(mockItems, 0, {}, callbacks);
-            
-            expect(mediaViewer.open).toHaveBeenCalledWith(
-                mockItems,
-                0,
-                expect.objectContaining({
-                    loop: true,
-                    allowPanToNext: true,
-                    preload: [2, 2]
-                }),
-                expect.objectContaining({
-                    onOpen: expect.any(Function),
-                    onClose: expect.any(Function),
-                    onChange: expect.any(Function)
-                })
-            );
-        });
-        
-        it('should handle empty items array', () => {
-            galleryManager.openGallery([], 0);
-            expect(mediaViewer.open).not.toHaveBeenCalled();
-        });
-        
-        it('should apply custom configuration', () => {
-            const config: GalleryConfig = {
-                showThumbnails: false,
-                autoPlay: true,
-                slideInterval: 5000,
-                loop: false
-            };
-            
-            galleryManager.openGallery(mockItems, 0, config);
-            
-            expect(mediaViewer.open).toHaveBeenCalledWith(
-                mockItems,
-                0,
-                expect.objectContaining({
-                    loop: false
-                }),
-                expect.any(Object)
-            );
-        });
-    });
-    
-    describe('Gallery Navigation', () => {
-        beforeEach(() => {
-            // Open a gallery first
-            galleryManager.openGallery(mockItems, 0);
-        });
-        
-        it('should navigate to next slide', () => {
-            galleryManager.nextSlide();
-            expect(mediaViewer.next).toHaveBeenCalled();
-        });
-        
-        it('should navigate to previous slide', () => {
-            galleryManager.previousSlide();
-            expect(mediaViewer.prev).toHaveBeenCalled();
-        });
-        
-        it('should go to specific slide', () => {
-            galleryManager.goToSlide(2);
-            expect(mediaViewer.goTo).toHaveBeenCalledWith(2);
-        });
-        
-        it('should not navigate to invalid slide index', () => {
-            const state = galleryManager.getGalleryState();
-            if (state) {
-                // Try to go to invalid index
-                galleryManager.goToSlide(-1);
-                expect(mediaViewer.goTo).not.toHaveBeenCalled();
-                
-                galleryManager.goToSlide(10);
-                expect(mediaViewer.goTo).not.toHaveBeenCalled();
-            }
-        });
-    });
-    
-    describe('Slideshow Functionality', () => {
-        beforeEach(() => {
-            vi.useFakeTimers();
-            galleryManager.openGallery(mockItems, 0, { autoPlay: false });
-        });
-        
-        afterEach(() => {
-            vi.useRealTimers();
-        });
-        
-        it('should start slideshow', () => {
-            const state = galleryManager.getGalleryState();
-            expect(state?.isPlaying).toBe(false);
-            
-            galleryManager.startSlideshow();
-            
-            const updatedState = galleryManager.getGalleryState();
-            expect(updatedState?.isPlaying).toBe(true);
-        });
-        
-        it('should stop slideshow', () => {
-            galleryManager.startSlideshow();
-            galleryManager.stopSlideshow();
-            
-            const state = galleryManager.getGalleryState();
-            expect(state?.isPlaying).toBe(false);
-        });
-        
-        it('should toggle slideshow', () => {
-            const initialState = galleryManager.getGalleryState();
-            expect(initialState?.isPlaying).toBe(false);
-            
-            galleryManager.toggleSlideshow();
-            expect(galleryManager.getGalleryState()?.isPlaying).toBe(true);
-            
-            galleryManager.toggleSlideshow();
-            expect(galleryManager.getGalleryState()?.isPlaying).toBe(false);
-        });
-        
-        it('should advance slides automatically in slideshow', () => {
-            galleryManager.startSlideshow();
-            
-            // Fast-forward time
-            vi.advanceTimersByTime(4000); // Default interval
-            
-            expect(mediaViewer.goTo).toHaveBeenCalledWith(1);
-        });
-        
-        it('should update slideshow interval', () => {
-            galleryManager.startSlideshow();
-            galleryManager.updateSlideshowInterval(5000);
-            
-            const state = galleryManager.getGalleryState();
-            expect(state?.config.slideInterval).toBe(5000);
-        });
-    });
-    
-    describe('Gallery State', () => {
-        it('should track gallery state', () => {
-            expect(galleryManager.getGalleryState()).toBeNull();
-            
-            galleryManager.openGallery(mockItems, 1);
-            
-            const state = galleryManager.getGalleryState();
-            expect(state).not.toBeNull();
-            expect(state?.items).toEqual(mockItems);
-            expect(state?.currentIndex).toBe(1);
-        });
-        
-        it('should check if gallery is open', () => {
-            expect(galleryManager.isGalleryOpen()).toBe(false);
-            
-            vi.mocked(mediaViewer.isOpen).mockReturnValue(true);
-            galleryManager.openGallery(mockItems, 0);
-            
-            expect(galleryManager.isGalleryOpen()).toBe(true);
-        });
-    });
-    
-    describe('Gallery Cleanup', () => {
-        it('should close gallery on cleanup', () => {
-            galleryManager.openGallery(mockItems, 0);
-            galleryManager.cleanup();
-            
-            expect(mediaViewer.close).toHaveBeenCalled();
-            expect(galleryManager.getGalleryState()).toBeNull();
-        });
-        
-        it('should stop slideshow on close', () => {
-            galleryManager.openGallery(mockItems, 0, { autoPlay: true });
-            
-            const state = galleryManager.getGalleryState();
-            expect(state?.isPlaying).toBe(true);
-            
-            galleryManager.closeGallery();
-            expect(mediaViewer.close).toHaveBeenCalled();
-        });
-    });
-    
-    describe('UI Enhancements', () => {
-        beforeEach(() => {
-            // Create PhotoSwipe container mock
-            const pswpElement = document.createElement('div');
-            pswpElement.className = 'pswp';
-            document.body.appendChild(pswpElement);
-        });
-        
-        it('should add thumbnail strip when enabled', (done) => {
-            galleryManager.openGallery(mockItems, 0, { showThumbnails: true });
-            
-            // Wait for UI setup
-            setTimeout(() => {
-                const thumbnailStrip = document.querySelector('.gallery-thumbnail-strip');
-                expect(thumbnailStrip).toBeTruthy();
-                
-                const thumbnails = document.querySelectorAll('.gallery-thumbnail');
-                expect(thumbnails).toHaveLength(3);
-                
-                done();
-            }, 150);
-        });
-        
-        it('should add slideshow controls', (done) => {
-            galleryManager.openGallery(mockItems, 0);
-            
-            setTimeout(() => {
-                const controls = document.querySelector('.gallery-slideshow-controls');
-                expect(controls).toBeTruthy();
-                
-                const playPauseBtn = document.querySelector('.slideshow-play-pause');
-                expect(playPauseBtn).toBeTruthy();
-                
-                done();
-            }, 150);
-        });
-        
-        it('should add image counter when enabled', (done) => {
-            galleryManager.openGallery(mockItems, 0, { showCounter: true });
-            
-            setTimeout(() => {
-                const counter = document.querySelector('.gallery-counter');
-                expect(counter).toBeTruthy();
-                expect(counter?.textContent).toContain('1');
-                expect(counter?.textContent).toContain('3');
-                
-                done();
-            }, 150);
-        });
-        
-        it('should add keyboard hints', (done) => {
-            galleryManager.openGallery(mockItems, 0);
-            
-            setTimeout(() => {
-                const hints = document.querySelector('.gallery-keyboard-hints');
-                expect(hints).toBeTruthy();
-                expect(hints?.textContent).toContain('Navigate');
-                expect(hints?.textContent).toContain('ESC');
-                
-                done();
-            }, 150);
-        });
-    });
-});

apps/client/src/services/gallery_manager.ts

@@ -1,987 +0,0 @@
-/**
- * Gallery Manager for PhotoSwipe integration in Trilium Notes
- * Handles multi-image galleries, slideshow mode, and navigation features
- */
-
-import mediaViewer, { MediaItem, MediaViewerCallbacks, MediaViewerConfig } from './media_viewer.js';
-import utils from './utils.js';
-import froca from './froca.js';
-import type FNote from '../entities/fnote.js';
-
-/**
- * Gallery configuration options
- */
-export interface GalleryConfig {
-    showThumbnails?: boolean;
-    thumbnailHeight?: number;
-    autoPlay?: boolean;
-    slideInterval?: number; // in milliseconds
-    showCounter?: boolean;
-    enableKeyboardNav?: boolean;
-    enableSwipeGestures?: boolean;
-    preloadCount?: number;
-    loop?: boolean;
-}
-
-/**
- * Gallery item with additional metadata
- */
-export interface GalleryItem extends MediaItem {
-    noteId?: string;
-    attachmentId?: string;
-    caption?: string;
-    description?: string;
-    index?: number;
-}
-
-/**
- * Gallery state management
- */
-interface GalleryState {
-    items: GalleryItem[];
-    currentIndex: number;
-    isPlaying: boolean;
-    slideshowTimer?: number;
-    config: Required<GalleryConfig>;
-}
-
-/**
- * GalleryManager handles multi-image galleries with slideshow and navigation features
- */
-class GalleryManager {
-    private static instance: GalleryManager;
-    private currentGallery: GalleryState | null = null;
-    private defaultConfig: Required<GalleryConfig> = {
-        showThumbnails: true,
-        thumbnailHeight: 80,
-        autoPlay: false,
-        slideInterval: 4000,
-        showCounter: true,
-        enableKeyboardNav: true,
-        enableSwipeGestures: true,
-        preloadCount: 2,
-        loop: true
-    };
-    
-    private slideshowCallbacks: Set<() => void> = new Set();
-    private $thumbnailStrip?: JQuery<HTMLElement>;
-    private $slideshowControls?: JQuery<HTMLElement>;
-    
-    // Track all dynamically created elements for proper cleanup
-    private createdElements: Map<string, HTMLElement | JQuery<HTMLElement>> = new Map();
-    private setupTimeout?: number;
-
-    private constructor() {
-        // Cleanup on window unload
-        window.addEventListener('beforeunload', () => this.cleanup());
-    }
-
-    /**
-     * Get singleton instance
-     */
-    static getInstance(): GalleryManager {
-        if (!GalleryManager.instance) {
-            GalleryManager.instance = new GalleryManager();
-        }
-        return GalleryManager.instance;
-    }
-
-    /**
-     * Create gallery from images in a note's content
-     */
-    async createGalleryFromNote(note: FNote, config?: GalleryConfig): Promise<GalleryItem[]> {
-        const items: GalleryItem[] = [];
-        
-        try {
-            // Parse note content to find images
-            const parser = new DOMParser();
-            const content = await note.getContent();
-            const doc = parser.parseFromString(content || '', 'text/html');
-            const images = doc.querySelectorAll('img');
-            
-            for (let i = 0; i < images.length; i++) {
-                const img = images[i];
-                const src = img.getAttribute('src');
-                
-                if (!src) continue;
-                
-                // Convert relative URLs to absolute
-                const absoluteSrc = this.resolveImageSrc(src, note.noteId);
-                
-                const item: GalleryItem = {
-                    src: absoluteSrc,
-                    alt: img.getAttribute('alt') || `Image ${i + 1} from ${note.title}`,
-                    title: img.getAttribute('title') || img.getAttribute('alt') || undefined,
-                    caption: img.getAttribute('data-caption') || undefined,
-                    noteId: note.noteId,
-                    index: i,
-                    width: parseInt(img.getAttribute('width') || '0') || undefined,
-                    height: parseInt(img.getAttribute('height') || '0') || undefined
-                };
-                
-                // Try to get thumbnail from data attribute or create one
-                const thumbnailSrc = img.getAttribute('data-thumbnail');
-                if (thumbnailSrc) {
-                    item.msrc = this.resolveImageSrc(thumbnailSrc, note.noteId);
-                }
-                
-                items.push(item);
-            }
-            
-            // Also check for image attachments
-            const attachmentItems = await this.getAttachmentImages(note);
-            items.push(...attachmentItems);
-            
-        } catch (error) {
-            console.error('Failed to create gallery from note:', error);
-        }
-        
-        return items;
-    }
-
-    /**
-     * Get image attachments from a note
-     */
-    private async getAttachmentImages(note: FNote): Promise<GalleryItem[]> {
-        const items: GalleryItem[] = [];
-        
-        try {
-            // Get child notes that are images
-            const childNotes = await note.getChildNotes();
-            
-            for (const childNote of childNotes) {
-                if (childNote.type === 'image') {
-                    const item: GalleryItem = {
-                        src: utils.createImageSrcUrl(childNote),
-                        alt: childNote.title,
-                        title: childNote.title,
-                        noteId: childNote.noteId,
-                        index: items.length
-                    };
-                    
-                    items.push(item);
-                }
-            }
-        } catch (error) {
-            console.error('Failed to get attachment images:', error);
-        }
-        
-        return items;
-    }
-
-    /**
-     * Create gallery from a container element with images
-     */
-    async createGalleryFromContainer(
-        container: HTMLElement | JQuery<HTMLElement>, 
-        selector: string = 'img',
-        config?: GalleryConfig
-    ): Promise<GalleryItem[]> {
-        const $container = $(container);
-        const images = $container.find(selector);
-        const items: GalleryItem[] = [];
-        
-        for (let i = 0; i < images.length; i++) {
-            const img = images[i] as HTMLImageElement;
-            
-            const item: GalleryItem = {
-                src: img.src,
-                alt: img.alt || `Image ${i + 1}`,
-                title: img.title || img.alt || undefined,
-                element: img,
-                index: i,
-                width: img.naturalWidth || undefined,
-                height: img.naturalHeight || undefined
-            };
-            
-            // Try to extract caption from nearby elements
-            const $img = $(img);
-            const $figure = $img.closest('figure');
-            if ($figure.length) {
-                const $caption = $figure.find('figcaption');
-                if ($caption.length) {
-                    item.caption = $caption.text();
-                }
-            }
-            
-            // Check for data attributes
-            item.noteId = $img.data('note-id');
-            item.attachmentId = $img.data('attachment-id');
-            
-            items.push(item);
-        }
-        
-        return items;
-    }
-
-    /**
-     * Open gallery with specified items
-     */
-    openGallery(
-        items: GalleryItem[], 
-        startIndex: number = 0, 
-        config?: GalleryConfig,
-        callbacks?: MediaViewerCallbacks
-    ): void {
-        if (!items || items.length === 0) {
-            console.warn('No items provided to gallery');
-            return;
-        }
-        
-        // Close any existing gallery
-        this.closeGallery();
-        
-        // Merge configuration
-        const finalConfig = { ...this.defaultConfig, ...config };
-        
-        // Initialize gallery state
-        this.currentGallery = {
-            items,
-            currentIndex: startIndex,
-            isPlaying: finalConfig.autoPlay,
-            config: finalConfig
-        };
-        
-        // Enhanced PhotoSwipe configuration for gallery
-        const photoSwipeConfig: Partial<MediaViewerConfig> = {
-            bgOpacity: 0.95,
-            showHideOpacity: true,
-            allowPanToNext: true,
-            spacing: 0.12,
-            loop: finalConfig.loop,
-            arrowKeys: finalConfig.enableKeyboardNav,
-            pinchToClose: finalConfig.enableSwipeGestures,
-            closeOnVerticalDrag: finalConfig.enableSwipeGestures,
-            preload: [finalConfig.preloadCount, finalConfig.preloadCount],
-            wheelToZoom: true,
-            // Enable mobile and accessibility enhancements
-            mobileA11y: {
-                touch: {
-                    hapticFeedback: true,
-                    multiTouchEnabled: true
-                },
-                a11y: {
-                    enableKeyboardNav: finalConfig.enableKeyboardNav,
-                    enableScreenReaderAnnouncements: true,
-                    keyboardShortcutsEnabled: true
-                },
-                mobileUI: {
-                    bottomSheetEnabled: true,
-                    adaptiveToolbar: true,
-                    swipeIndicators: true,
-                    gestureHints: true
-                },
-                performance: {
-                    adaptiveQuality: true,
-                    batteryOptimization: true
-                }
-            }
-        };
-        
-        // Enhanced callbacks
-        const enhancedCallbacks: MediaViewerCallbacks = {
-            onOpen: () => {
-                this.onGalleryOpen();
-                callbacks?.onOpen?.();
-            },
-            onClose: () => {
-                this.onGalleryClose();
-                callbacks?.onClose?.();
-            },
-            onChange: (index) => {
-                this.onSlideChange(index);
-                callbacks?.onChange?.(index);
-            },
-            onImageLoad: callbacks?.onImageLoad,
-            onImageError: callbacks?.onImageError
-        };
-        
-        // Open with media viewer
-        mediaViewer.open(items, startIndex, photoSwipeConfig, enhancedCallbacks);
-        
-        // Setup gallery UI enhancements
-        this.setupGalleryUI();
-        
-        // Start slideshow if configured
-        if (finalConfig.autoPlay) {
-            this.startSlideshow();
-        }
-    }
-
-    /**
-     * Setup gallery UI enhancements
-     */
-    private setupGalleryUI(): void {
-        if (!this.currentGallery) return;
-        
-        // Clear any existing timeout
-        if (this.setupTimeout) {
-            clearTimeout(this.setupTimeout);
-        }
-        
-        // Add gallery-specific UI elements to PhotoSwipe
-        this.setupTimeout = window.setTimeout(() => {
-            // Validate gallery is still open before manipulating DOM
-            if (!this.currentGallery || !this.isGalleryOpen()) {
-                return;
-            }
-            
-            // PhotoSwipe needs a moment to initialize
-            const pswpElement = document.querySelector('.pswp');
-            if (!pswpElement) return;
-            
-            // Add thumbnail strip if enabled
-            if (this.currentGallery.config.showThumbnails) {
-                this.addThumbnailStrip(pswpElement);
-            }
-            
-            // Add slideshow controls
-            this.addSlideshowControls(pswpElement);
-            
-            // Add image counter if enabled
-            if (this.currentGallery.config.showCounter) {
-                this.addImageCounter(pswpElement);
-            }
-            
-            // Add keyboard hints
-            this.addKeyboardHints(pswpElement);
-        }, 100);
-    }
-
-    /**
-     * Add thumbnail strip navigation
-     */
-    private addThumbnailStrip(container: Element): void {
-        if (!this.currentGallery) return;
-        
-        // Create thumbnail strip container safely using DOM APIs
-        const stripDiv = document.createElement('div');
-        stripDiv.className = 'gallery-thumbnail-strip';
-        stripDiv.setAttribute('style', `
-            position: absolute;
-            bottom: 60px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: flex;
-            gap: 8px;
-            padding: 10px;
-            background: rgba(0, 0, 0, 0.7);
-            border-radius: 8px;
-            max-width: 90%;
-            overflow-x: auto;
-            z-index: 100;
-        `);
-        
-        // Create thumbnails safely
-        this.currentGallery.items.forEach((item, index) => {
-            const thumbDiv = document.createElement('div');
-            thumbDiv.className = 'gallery-thumbnail';
-            thumbDiv.dataset.index = index.toString();
-            thumbDiv.setAttribute('style', `
-                width: ${this.currentGallery!.config.thumbnailHeight}px;
-                height: ${this.currentGallery!.config.thumbnailHeight}px;
-                cursor: pointer;
-                border: 2px solid ${index === this.currentGallery!.currentIndex ? '#fff' : 'transparent'};
-                border-radius: 4px;
-                overflow: hidden;
-                flex-shrink: 0;
-                opacity: ${index === this.currentGallery!.currentIndex ? '1' : '0.6'};
-                transition: all 0.2s;
-            `);
-            
-            const img = document.createElement('img');
-            // Sanitize src URLs
-            const src = this.sanitizeUrl(item.msrc || item.src);
-            img.src = src;
-            // Use textContent for safe text insertion
-            img.alt = this.sanitizeText(item.alt || '');
-            img.setAttribute('style', `
-                width: 100%;
-                height: 100%;
-                object-fit: cover;
-            `);
-            
-            thumbDiv.appendChild(img);
-            stripDiv.appendChild(thumbDiv);
-        });
-        
-        this.$thumbnailStrip = $(stripDiv);
-        $(container).append(this.$thumbnailStrip);
-        this.createdElements.set('thumbnailStrip', this.$thumbnailStrip);
-        
-        // Handle thumbnail clicks
-        this.$thumbnailStrip.on('click', '.gallery-thumbnail', (e) => {
-            const index = parseInt($(e.currentTarget).data('index'));
-            this.goToSlide(index);
-        });
-        
-        // Handle hover effect
-        this.$thumbnailStrip.on('mouseenter', '.gallery-thumbnail', (e) => {
-            if (!$(e.currentTarget).hasClass('active')) {
-                $(e.currentTarget).css('opacity', '0.8');
-            }
-        });
-        
-        this.$thumbnailStrip.on('mouseleave', '.gallery-thumbnail', (e) => {
-            if (!$(e.currentTarget).hasClass('active')) {
-                $(e.currentTarget).css('opacity', '0.6');
-            }
-        });
-    }
-
-    /**
-     * Sanitize text content to prevent XSS
-     */
-    private sanitizeText(text: string): string {
-        // Remove any HTML tags and entities
-        const div = document.createElement('div');
-        div.textContent = text;
-        return div.innerHTML;
-    }
-    
-    /**
-     * Sanitize URL to prevent XSS
-     */
-    private sanitizeUrl(url: string): string {
-        // Only allow safe protocols
-        const allowedProtocols = ['http:', 'https:', 'data:'];
-        try {
-            const urlObj = new URL(url, window.location.href);
-            
-            // Special validation for data URLs
-            if (urlObj.protocol === 'data:') {
-                // Only allow image MIME types for data URLs
-                const allowedImageTypes = [
-                    'data:image/jpeg',
-                    'data:image/jpg',
-                    'data:image/png',
-                    'data:image/gif',
-                    'data:image/webp',
-                    'data:image/svg+xml',
-                    'data:image/bmp'
-                ];
-                
-                // Check if data URL starts with an allowed image type
-                const isAllowedImage = allowedImageTypes.some(type => 
-                    url.toLowerCase().startsWith(type)
-                );
-                
-                if (!isAllowedImage) {
-                    console.warn('Rejected non-image data URL:', url.substring(0, 50));
-                    return '';
-                }
-                
-                // Additional check for base64 encoding
-                if (!url.includes(';base64,') && !url.includes(';charset=')) {
-                    console.warn('Rejected data URL with invalid encoding');
-                    return '';
-                }
-            } else if (!allowedProtocols.includes(urlObj.protocol)) {
-                return '';
-            }
-            
-            return urlObj.href;
-        } catch {
-            // If URL parsing fails, check if it's a relative path
-            if (url.startsWith('/') || url.startsWith('api/')) {
-                return url;
-            }
-            return '';
-        }
-    }
-    
-    /**
-     * Add slideshow controls
-     */
-    private addSlideshowControls(container: Element): void {
-        if (!this.currentGallery) return;
-        
-        const controlsHtml = `
-            <div class="gallery-slideshow-controls" style="
-                position: absolute;
-                top: 20px;
-                right: 20px;
-                display: flex;
-                gap: 10px;
-                z-index: 100;
-            ">
-                <button class="slideshow-play-pause" style="
-                    background: rgba(255, 255, 255, 0.9);
-                    border: none;
-                    border-radius: 4px;
-                    width: 44px;
-                    height: 44px;
-                    cursor: pointer;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 20px;
-                " aria-label="${this.currentGallery.isPlaying ? 'Pause slideshow' : 'Play slideshow'}">
-                    <i class="bx ${this.currentGallery.isPlaying ? 'bx-pause' : 'bx-play'}"></i>
-                </button>
-                
-                <button class="slideshow-settings" style="
-                    background: rgba(255, 255, 255, 0.9);
-                    border: none;
-                    border-radius: 4px;
-                    width: 44px;
-                    height: 44px;
-                    cursor: pointer;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    font-size: 20px;
-                " aria-label="Slideshow settings">
-                    <i class="bx bx-cog"></i>
-                </button>
-            </div>
-            
-            <div class="slideshow-interval-selector" style="
-                position: absolute;
-                top: 80px;
-                right: 20px;
-                background: rgba(0, 0, 0, 0.8);
-                color: white;
-                padding: 10px;
-                border-radius: 4px;
-                display: none;
-                z-index: 101;
-            ">
-                <label style="display: block; margin-bottom: 5px;">Slide interval:</label>
-                <select class="interval-select" style="
-                    background: rgba(255, 255, 255, 0.1);
-                    color: white;
-                    border: 1px solid rgba(255, 255, 255, 0.3);
-                    padding: 4px;
-                    border-radius: 3px;
-                ">
-                    <option value="3000">3 seconds</option>
-                    <option value="4000" selected>4 seconds</option>
-                    <option value="5000">5 seconds</option>
-                    <option value="7000">7 seconds</option>
-                    <option value="10000">10 seconds</option>
-                </select>
-            </div>
-        `;
-        
-        this.$slideshowControls = $(controlsHtml);
-        $(container).append(this.$slideshowControls);
-        this.createdElements.set('slideshowControls', this.$slideshowControls);
-        
-        // Handle play/pause button
-        this.$slideshowControls.find('.slideshow-play-pause').on('click', () => {
-            this.toggleSlideshow();
-        });
-        
-        // Handle settings button
-        this.$slideshowControls.find('.slideshow-settings').on('click', () => {
-            const $selector = this.$slideshowControls?.find('.slideshow-interval-selector');
-            $selector?.toggle();
-        });
-        
-        // Handle interval change
-        this.$slideshowControls.find('.interval-select').on('change', (e) => {
-            const interval = parseInt($(e.target).val() as string);
-            this.updateSlideshowInterval(interval);
-        });
-    }
-
-    /**
-     * Add image counter
-     */
-    private addImageCounter(container: Element): void {
-        if (!this.currentGallery) return;
-        
-        // Create counter element safely
-        const counterDiv = document.createElement('div');
-        counterDiv.className = 'gallery-counter';
-        counterDiv.setAttribute('style', `
-            position: absolute;
-            top: 20px;
-            left: 20px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-size: 14px;
-            z-index: 100;
-        `);
-        
-        const currentSpan = document.createElement('span');
-        currentSpan.className = 'current-index';
-        currentSpan.textContent = String(this.currentGallery.currentIndex + 1);
-        
-        const separatorSpan = document.createElement('span');
-        separatorSpan.textContent = ' / ';
-        
-        const totalSpan = document.createElement('span');
-        totalSpan.className = 'total-count';
-        totalSpan.textContent = String(this.currentGallery.items.length);
-        
-        counterDiv.appendChild(currentSpan);
-        counterDiv.appendChild(separatorSpan);
-        counterDiv.appendChild(totalSpan);
-        
-        container.appendChild(counterDiv);
-        this.createdElements.set('counter', counterDiv);
-    }
-
-    /**
-     * Add keyboard hints overlay
-     */
-    private addKeyboardHints(container: Element): void {
-        // Create hints element safely
-        const hintsDiv = document.createElement('div');
-        hintsDiv.className = 'gallery-keyboard-hints';
-        hintsDiv.setAttribute('style', `
-            position: absolute;
-            bottom: 20px;
-            left: 20px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-size: 12px;
-            opacity: 0;
-            transition: opacity 0.3s;
-            z-index: 100;
-        `);
-        
-        // Create hint items
-        const hints = [
-            { key: '←/→', action: 'Navigate' },
-            { key: 'Space', action: 'Play/Pause' },
-            { key: 'ESC', action: 'Close' }
-        ];
-        
-        hints.forEach(hint => {
-            const hintItem = document.createElement('div');
-            const kbd = document.createElement('kbd');
-            kbd.style.cssText = 'background: rgba(255,255,255,0.2); padding: 2px 4px; border-radius: 2px;';
-            kbd.textContent = hint.key;
-            hintItem.appendChild(kbd);
-            hintItem.appendChild(document.createTextNode(' ' + hint.action));
-            hintsDiv.appendChild(hintItem);
-        });
-        
-        container.appendChild(hintsDiv);
-        this.createdElements.set('keyboardHints', hintsDiv);
-        
-        const $hints = $(hintsDiv);
-        
-        // Show hints on hover with scoped selector
-        const handleMouseEnter = () => {
-            if (this.currentGallery) {
-                $hints.css('opacity', '0.6');
-            }
-        };
-        
-        const handleMouseLeave = () => {
-            $hints.css('opacity', '0');
-        };
-        
-        $(container).on('mouseenter.galleryHints', handleMouseEnter);
-        $(container).on('mouseleave.galleryHints', handleMouseLeave);
-        
-        // Track cleanup callback
-        this.slideshowCallbacks.add(() => {
-            $(container).off('.galleryHints');
-        });
-    }
-
-    /**
-     * Handle gallery open event
-     */
-    private onGalleryOpen(): void {
-        // Add keyboard listener for slideshow control
-        const handleKeyDown = (e: KeyboardEvent) => {
-            if (e.key === ' ') {
-                e.preventDefault();
-                this.toggleSlideshow();
-            }
-        };
-        
-        document.addEventListener('keydown', handleKeyDown);
-        this.slideshowCallbacks.add(() => {
-            document.removeEventListener('keydown', handleKeyDown);
-        });
-    }
-
-    /**
-     * Handle gallery close event
-     */
-    private onGalleryClose(): void {
-        this.stopSlideshow();
-        
-        // Clear setup timeout if exists
-        if (this.setupTimeout) {
-            clearTimeout(this.setupTimeout);
-            this.setupTimeout = undefined;
-        }
-        
-        // Cleanup event listeners
-        this.slideshowCallbacks.forEach(callback => callback());
-        this.slideshowCallbacks.clear();
-        
-        // Remove all tracked UI elements
-        this.createdElements.forEach((element, key) => {
-            if (element instanceof HTMLElement) {
-                element.remove();
-            } else if (element instanceof $) {
-                element.remove();
-            }
-        });
-        this.createdElements.clear();
-        
-        // Clear jQuery references
-        this.$thumbnailStrip = undefined;
-        this.$slideshowControls = undefined;
-        
-        // Clear state
-        this.currentGallery = null;
-    }
-
-    /**
-     * Handle slide change event
-     */
-    private onSlideChange(index: number): void {
-        if (!this.currentGallery) return;
-        
-        this.currentGallery.currentIndex = index;
-        
-        // Update thumbnail highlighting
-        if (this.$thumbnailStrip) {
-            this.$thumbnailStrip.find('.gallery-thumbnail').each((i, el) => {
-                const $thumb = $(el);
-                if (i === index) {
-                    $thumb.css({
-                        'border-color': '#fff',
-                        'opacity': '1'
-                    });
-                    
-                    // Scroll thumbnail into view
-                    const thumbLeft = $thumb.position().left;
-                    const thumbWidth = $thumb.outerWidth() || 0;
-                    const stripWidth = this.$thumbnailStrip!.width() || 0;
-                    const scrollLeft = this.$thumbnailStrip!.scrollLeft() || 0;
-                    
-                    if (thumbLeft < 0) {
-                        this.$thumbnailStrip!.scrollLeft(scrollLeft + thumbLeft - 10);
-                    } else if (thumbLeft + thumbWidth > stripWidth) {
-                        this.$thumbnailStrip!.scrollLeft(scrollLeft + (thumbLeft + thumbWidth - stripWidth) + 10);
-                    }
-                } else {
-                    $thumb.css({
-                        'border-color': 'transparent',
-                        'opacity': '0.6'
-                    });
-                }
-            });
-        }
-        
-        // Update counter using tracked element
-        const counterElement = this.createdElements.get('counter');
-        if (counterElement instanceof HTMLElement) {
-            const currentIndexElement = counterElement.querySelector('.current-index');
-            if (currentIndexElement) {
-                currentIndexElement.textContent = String(index + 1);
-            }
-        }
-    }
-
-    /**
-     * Start slideshow
-     */
-    startSlideshow(): void {
-        if (!this.currentGallery || this.currentGallery.isPlaying) return;
-        
-        // Validate gallery state before starting slideshow
-        if (!this.isGalleryOpen() || this.currentGallery.items.length === 0) {
-            console.warn('Cannot start slideshow: gallery not ready');
-            return;
-        }
-        
-        // Ensure PhotoSwipe is ready
-        if (!mediaViewer.isOpen()) {
-            console.warn('Cannot start slideshow: PhotoSwipe not ready');
-            return;
-        }
-        
-        this.currentGallery.isPlaying = true;
-        
-        // Update button icon
-        this.$slideshowControls?.find('.slideshow-play-pause i')
-            .removeClass('bx-play')
-            .addClass('bx-pause');
-        
-        // Start timer
-        this.scheduleNextSlide();
-    }
-
-    /**
-     * Stop slideshow
-     */
-    stopSlideshow(): void {
-        if (!this.currentGallery) return;
-        
-        this.currentGallery.isPlaying = false;
-        
-        // Clear timer
-        if (this.currentGallery.slideshowTimer) {
-            clearTimeout(this.currentGallery.slideshowTimer);
-            this.currentGallery.slideshowTimer = undefined;
-        }
-        
-        // Update button icon
-        this.$slideshowControls?.find('.slideshow-play-pause i')
-            .removeClass('bx-pause')
-            .addClass('bx-play');
-    }
-
-    /**
-     * Toggle slideshow play/pause
-     */
-    toggleSlideshow(): void {
-        if (!this.currentGallery) return;
-        
-        if (this.currentGallery.isPlaying) {
-            this.stopSlideshow();
-        } else {
-            this.startSlideshow();
-        }
-    }
-
-    /**
-     * Schedule next slide in slideshow
-     */
-    private scheduleNextSlide(): void {
-        if (!this.currentGallery || !this.currentGallery.isPlaying) return;
-        
-        // Clear any existing timer
-        if (this.currentGallery.slideshowTimer) {
-            clearTimeout(this.currentGallery.slideshowTimer);
-        }
-        
-        this.currentGallery.slideshowTimer = window.setTimeout(() => {
-            if (!this.currentGallery || !this.currentGallery.isPlaying) return;
-            
-            // Go to next slide
-            const nextIndex = (this.currentGallery.currentIndex + 1) % this.currentGallery.items.length;
-            this.goToSlide(nextIndex);
-            
-            // Schedule next transition
-            this.scheduleNextSlide();
-        }, this.currentGallery.config.slideInterval);
-    }
-
-    /**
-     * Update slideshow interval
-     */
-    updateSlideshowInterval(interval: number): void {
-        if (!this.currentGallery) return;
-        
-        this.currentGallery.config.slideInterval = interval;
-        
-        // Restart slideshow with new interval if playing
-        if (this.currentGallery.isPlaying) {
-            this.stopSlideshow();
-            this.startSlideshow();
-        }
-    }
-
-    /**
-     * Go to specific slide
-     */
-    goToSlide(index: number): void {
-        if (!this.currentGallery) return;
-        
-        if (index >= 0 && index < this.currentGallery.items.length) {
-            mediaViewer.goTo(index);
-        }
-    }
-
-    /**
-     * Navigate to next slide
-     */
-    nextSlide(): void {
-        mediaViewer.next();
-    }
-
-    /**
-     * Navigate to previous slide
-     */
-    previousSlide(): void {
-        mediaViewer.prev();
-    }
-
-    /**
-     * Close gallery
-     */
-    closeGallery(): void {
-        mediaViewer.close();
-    }
-
-    /**
-     * Check if gallery is open
-     */
-    isGalleryOpen(): boolean {
-        return this.currentGallery !== null && mediaViewer.isOpen();
-    }
-
-    /**
-     * Get current gallery state
-     */
-    getGalleryState(): GalleryState | null {
-        return this.currentGallery;
-    }
-
-    /**
-     * Resolve image source URL
-     */
-    private resolveImageSrc(src: string, noteId: string): string {
-        // Handle different image source formats
-        if (src.startsWith('http://') || src.startsWith('https://')) {
-            return src;
-        }
-        
-        if (src.startsWith('api/images/')) {
-            return `/${src}`;
-        }
-        
-        if (src.startsWith('/')) {
-            return src;
-        }
-        
-        // Assume it's a note ID or attachment reference
-        return `/api/images/${noteId}/${src}`;
-    }
-
-    /**
-     * Cleanup resources
-     */
-    cleanup(): void {
-        // Clear any pending timeouts
-        if (this.setupTimeout) {
-            clearTimeout(this.setupTimeout);
-            this.setupTimeout = undefined;
-        }
-        
-        this.closeGallery();
-        
-        // Ensure all elements are removed
-        this.createdElements.forEach((element) => {
-            if (element instanceof HTMLElement) {
-                element.remove();
-            } else if (element instanceof $) {
-                element.remove();
-            }
-        });
-        this.createdElements.clear();
-        
-        this.slideshowCallbacks.clear();
-        this.currentGallery = null;
-    }
-}
-
-// Export singleton instance
-export default GalleryManager.getInstance();

apps/client/src/services/i18n.ts

@@ -3,6 +3,7 @@ import i18next from "i18next";
 import i18nextHttpBackend from "i18next-http-backend";
 import server from "./server.js";
 import type { Locale } from "@triliumnext/commons";
+import { initReactI18next } from "react-i18next";
 
 let locales: Locale[] | null;
 
@@ -16,6 +17,7 @@ export async function initLocale() {
 
     locales = await server.get<Locale[]>("options/locales");
 
+    i18next.use(initReactI18next);
     await i18next.use(i18nextHttpBackend).init({
         lng: locale,
         fallbackLng: "en",

apps/client/src/services/image_annotations.ts

@@ -1,597 +0,0 @@
-/**
- * Image Annotations Module for PhotoSwipe
- * Provides ability to add, display, and manage annotations on images
- */
-
-import froca from './froca.js';
-import server from './server.js';
-import type FNote from '../entities/fnote.js';
-import type FAttribute from '../entities/fattribute.js';
-import { ImageValidator, withErrorBoundary, ImageError, ImageErrorType } from './image_error_handler.js';
-
-/**
- * Annotation position and data
- */
-export interface ImageAnnotation {
-    id: string;
-    noteId: string;
-    x: number; // Percentage from left (0-100)
-    y: number; // Percentage from top (0-100)
-    text: string;
-    author?: string;
-    created: Date;
-    modified?: Date;
-    color?: string;
-    icon?: string;
-    type?: 'comment' | 'marker' | 'region';
-    width?: number; // For region type
-    height?: number; // For region type
-}
-
-/**
- * Annotation configuration
- */
-export interface AnnotationConfig {
-    enableAnnotations: boolean;
-    showByDefault: boolean;
-    allowEditing: boolean;
-    defaultColor: string;
-    defaultIcon: string;
-}
-
-/**
- * ImageAnnotationsService manages image annotations using Trilium's attribute system
- */
-class ImageAnnotationsService {
-    private static instance: ImageAnnotationsService;
-    private activeAnnotations: Map<string, ImageAnnotation[]> = new Map();
-    private annotationElements: Map<string, HTMLElement> = new Map();
-    private isEditMode: boolean = false;
-    private selectedAnnotation: ImageAnnotation | null = null;
-    
-    private config: AnnotationConfig = {
-        enableAnnotations: true,
-        showByDefault: true,
-        allowEditing: true,
-        defaultColor: '#ffeb3b',
-        defaultIcon: 'bx-comment'
-    };
-    
-    // Annotation attribute prefix in Trilium
-    private readonly ANNOTATION_PREFIX = 'imageAnnotation';
-
-    private constructor() {}
-
-    static getInstance(): ImageAnnotationsService {
-        if (!ImageAnnotationsService.instance) {
-            ImageAnnotationsService.instance = new ImageAnnotationsService();
-        }
-        return ImageAnnotationsService.instance;
-    }
-
-    /**
-     * Load annotations for an image note
-     */
-    async loadAnnotations(noteId: string): Promise<ImageAnnotation[]> {
-        return await withErrorBoundary(async () => {
-            // Validate note ID
-            if (!noteId || typeof noteId !== 'string') {
-                throw new ImageError(
-                    ImageErrorType.INVALID_INPUT,
-                    'Invalid note ID provided'
-                );
-            }
-            const note = await froca.getNote(noteId);
-            if (!note) return [];
-
-            const attributes = note.getAttributes();
-            const annotations: ImageAnnotation[] = [];
-
-            // Parse annotation attributes
-            for (const attr of attributes) {
-                if (attr.name.startsWith(this.ANNOTATION_PREFIX)) {
-                    try {
-                        const annotationData = JSON.parse(attr.value);
-                        annotations.push({
-                            ...annotationData,
-                            id: attr.attributeId,
-                            noteId: noteId,
-                            created: new Date(annotationData.created),
-                            modified: annotationData.modified ? new Date(annotationData.modified) : undefined
-                        });
-                    } catch (error) {
-                        console.error('Failed to parse annotation:', error);
-                    }
-                }
-            }
-
-            // Sort by creation date
-            annotations.sort((a, b) => a.created.getTime() - b.created.getTime());
-            
-            this.activeAnnotations.set(noteId, annotations);
-            return annotations;
-        }) || [];
-    }
-
-    /**
-     * Save a new annotation
-     */
-    async saveAnnotation(annotation: Omit<ImageAnnotation, 'id' | 'created'>): Promise<ImageAnnotation> {
-        return await withErrorBoundary(async () => {
-            // Validate annotation data
-            if (!annotation.text || !annotation.noteId) {
-                throw new ImageError(
-                    ImageErrorType.INVALID_INPUT,
-                    'Invalid annotation data'
-                );
-            }
-            
-            // Sanitize text
-            annotation.text = this.sanitizeText(annotation.text);
-            const note = await froca.getNote(annotation.noteId);
-            if (!note) {
-                throw new Error('Note not found');
-            }
-
-            const newAnnotation: ImageAnnotation = {
-                ...annotation,
-                id: this.generateId(),
-                created: new Date()
-            };
-
-            // Save as note attribute
-            const attributeName = `${this.ANNOTATION_PREFIX}_${newAnnotation.id}`;
-            const attributeValue = JSON.stringify({
-                x: newAnnotation.x,
-                y: newAnnotation.y,
-                text: newAnnotation.text,
-                author: newAnnotation.author,
-                created: newAnnotation.created.toISOString(),
-                color: newAnnotation.color,
-                icon: newAnnotation.icon,
-                type: newAnnotation.type,
-                width: newAnnotation.width,
-                height: newAnnotation.height
-            });
-
-            await server.put(`notes/${annotation.noteId}/attributes`, {
-                attributes: [{
-                    type: 'label',
-                    name: attributeName,
-                    value: attributeValue
-                }]
-            });
-
-            // Update cache
-            const annotations = this.activeAnnotations.get(annotation.noteId) || [];
-            annotations.push(newAnnotation);
-            this.activeAnnotations.set(annotation.noteId, annotations);
-
-            return newAnnotation;
-        }) as Promise<ImageAnnotation>;
-    }
-
-    /**
-     * Update an existing annotation
-     */
-    async updateAnnotation(annotation: ImageAnnotation): Promise<void> {
-        try {
-            const note = await froca.getNote(annotation.noteId);
-            if (!note) {
-                throw new Error('Note not found');
-            }
-
-            annotation.modified = new Date();
-
-            // Update attribute
-            const attributeName = `${this.ANNOTATION_PREFIX}_${annotation.id}`;
-            const attributeValue = JSON.stringify({
-                x: annotation.x,
-                y: annotation.y,
-                text: annotation.text,
-                author: annotation.author,
-                created: annotation.created.toISOString(),
-                modified: annotation.modified.toISOString(),
-                color: annotation.color,
-                icon: annotation.icon,
-                type: annotation.type,
-                width: annotation.width,
-                height: annotation.height
-            });
-
-            // Find and update the attribute
-            const attributes = note.getAttributes();
-            const attr = attributes.find(a => a.name === attributeName);
-            
-            if (attr) {
-                await server.put(`notes/${annotation.noteId}/attributes/${attr.attributeId}`, {
-                    value: attributeValue
-                });
-            }
-
-            // Update cache
-            const annotations = this.activeAnnotations.get(annotation.noteId) || [];
-            const index = annotations.findIndex(a => a.id === annotation.id);
-            if (index !== -1) {
-                annotations[index] = annotation;
-                this.activeAnnotations.set(annotation.noteId, annotations);
-            }
-        } catch (error) {
-            console.error('Failed to update annotation:', error);
-            throw error;
-        }
-    }
-
-    /**
-     * Delete an annotation
-     */
-    async deleteAnnotation(noteId: string, annotationId: string): Promise<void> {
-        try {
-            const note = await froca.getNote(noteId);
-            if (!note) return;
-
-            const attributeName = `${this.ANNOTATION_PREFIX}_${annotationId}`;
-            const attributes = note.getAttributes();
-            const attr = attributes.find(a => a.name === attributeName);
-            
-            if (attr) {
-                await server.remove(`notes/${noteId}/attributes/${attr.attributeId}`);
-            }
-
-            // Update cache
-            const annotations = this.activeAnnotations.get(noteId) || [];
-            const filtered = annotations.filter(a => a.id !== annotationId);
-            this.activeAnnotations.set(noteId, filtered);
-
-            // Remove element if exists
-            const element = this.annotationElements.get(annotationId);
-            if (element) {
-                element.remove();
-                this.annotationElements.delete(annotationId);
-            }
-        } catch (error) {
-            console.error('Failed to delete annotation:', error);
-            throw error;
-        }
-    }
-
-    /**
-     * Render annotations on an image container
-     */
-    renderAnnotations(container: HTMLElement, noteId: string, imageElement: HTMLImageElement): void {
-        const annotations = this.activeAnnotations.get(noteId) || [];
-        
-        // Clear existing annotation elements
-        this.clearAnnotationElements();
-
-        // Create annotation overlay container
-        const overlay = this.createOverlayContainer(container, imageElement);
-
-        // Render each annotation
-        annotations.forEach(annotation => {
-            const element = this.createAnnotationElement(annotation, overlay);
-            this.annotationElements.set(annotation.id, element);
-        });
-
-        // Add click handler for creating new annotations
-        if (this.config.allowEditing && this.isEditMode) {
-            this.setupAnnotationCreation(overlay, noteId);
-        }
-        
-        // Add ARIA attributes for accessibility
-        overlay.setAttribute('role', 'img');
-        overlay.setAttribute('aria-label', 'Image with annotations');
-    }
-
-    /**
-     * Create overlay container for annotations
-     */
-    private createOverlayContainer(container: HTMLElement, imageElement: HTMLImageElement): HTMLElement {
-        let overlay = container.querySelector('.annotation-overlay') as HTMLElement;
-        
-        if (!overlay) {
-            overlay = document.createElement('div');
-            overlay.className = 'annotation-overlay';
-            overlay.style.cssText = `
-                position: absolute;
-                top: 0;
-                left: 0;
-                width: 100%;
-                height: 100%;
-                pointer-events: ${this.isEditMode ? 'auto' : 'none'};
-                z-index: 10;
-            `;
-            
-            // Position overlay over the image
-            const rect = imageElement.getBoundingClientRect();
-            const containerRect = container.getBoundingClientRect();
-            overlay.style.top = `${rect.top - containerRect.top}px`;
-            overlay.style.left = `${rect.left - containerRect.left}px`;
-            overlay.style.width = `${rect.width}px`;
-            overlay.style.height = `${rect.height}px`;
-            
-            container.appendChild(overlay);
-        }
-
-        return overlay;
-    }
-
-    /**
-     * Create annotation element
-     */
-    private createAnnotationElement(annotation: ImageAnnotation, container: HTMLElement): HTMLElement {
-        const element = document.createElement('div');
-        element.className = `annotation-marker annotation-${annotation.type || 'comment'}`;
-        element.dataset.annotationId = annotation.id;
-        
-        // Position based on percentage
-        element.style.cssText = `
-            position: absolute;
-            left: ${annotation.x}%;
-            top: ${annotation.y}%;
-            transform: translate(-50%, -50%);
-            cursor: pointer;
-            z-index: 20;
-            pointer-events: auto;
-        `;
-
-        // Create marker based on type
-        if (annotation.type === 'region') {
-            // Region annotation
-            element.style.cssText += `
-                width: ${annotation.width || 20}%;
-                height: ${annotation.height || 20}%;
-                border: 2px solid ${annotation.color || this.config.defaultColor};
-                background: ${annotation.color || this.config.defaultColor}33;
-                border-radius: 4px;
-            `;
-        } else {
-            // Point annotation
-            const marker = document.createElement('div');
-            marker.style.cssText = `
-                width: 24px;
-                height: 24px;
-                background: ${annotation.color || this.config.defaultColor};
-                border-radius: 50%;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-            `;
-            
-            const icon = document.createElement('i');
-            icon.className = `bx ${annotation.icon || this.config.defaultIcon}`;
-            icon.style.cssText = `
-                color: #333;
-                font-size: 14px;
-            `;
-            
-            marker.appendChild(icon);
-            element.appendChild(marker);
-            
-            // Add ARIA attributes for accessibility
-            element.setAttribute('role', 'button');
-            element.setAttribute('aria-label', `Annotation: ${this.sanitizeText(annotation.text)}`);
-            element.setAttribute('tabindex', '0');
-        }
-
-        // Add tooltip
-        const tooltip = document.createElement('div');
-        tooltip.className = 'annotation-tooltip';
-        tooltip.style.cssText = `
-            position: absolute;
-            bottom: 100%;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0,0,0,0.9);
-            color: white;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-size: 12px;
-            white-space: nowrap;
-            max-width: 200px;
-            pointer-events: none;
-            opacity: 0;
-            transition: opacity 0.2s;
-            margin-bottom: 8px;
-        `;
-        // Use textContent to prevent XSS
-        tooltip.textContent = this.sanitizeText(annotation.text);
-        element.appendChild(tooltip);
-
-        // Show tooltip on hover
-        element.addEventListener('mouseenter', () => {
-            tooltip.style.opacity = '1';
-        });
-        
-        element.addEventListener('mouseleave', () => {
-            tooltip.style.opacity = '0';
-        });
-
-        // Handle click for editing
-        element.addEventListener('click', (e) => {
-            e.stopPropagation();
-            this.selectAnnotation(annotation);
-        });
-
-        container.appendChild(element);
-        return element;
-    }
-
-    /**
-     * Setup annotation creation on click
-     */
-    private setupAnnotationCreation(overlay: HTMLElement, noteId: string): void {
-        overlay.addEventListener('click', async (e) => {
-            if (!this.isEditMode) return;
-            
-            const rect = overlay.getBoundingClientRect();
-            const x = ((e.clientX - rect.left) / rect.width) * 100;
-            const y = ((e.clientY - rect.top) / rect.height) * 100;
-            
-            // Show annotation creation dialog
-            const text = prompt('Enter annotation text:');
-            if (text) {
-                await this.saveAnnotation({
-                    noteId,
-                    x,
-                    y,
-                    text,
-                    author: 'current_user', // TODO: Get from session
-                    type: 'comment'
-                });
-                
-                // Reload annotations
-                await this.loadAnnotations(noteId);
-                
-                // Re-render
-                const imageElement = overlay.parentElement?.querySelector('img') as HTMLImageElement;
-                if (imageElement && overlay.parentElement) {
-                    this.renderAnnotations(overlay.parentElement, noteId, imageElement);
-                }
-            }
-        });
-    }
-
-    /**
-     * Select an annotation for editing
-     */
-    private selectAnnotation(annotation: ImageAnnotation): void {
-        this.selectedAnnotation = annotation;
-        
-        // Highlight selected annotation
-        this.annotationElements.forEach((element, id) => {
-            if (id === annotation.id) {
-                element.classList.add('selected');
-                element.style.outline = '2px solid #2196F3';
-            } else {
-                element.classList.remove('selected');
-                element.style.outline = 'none';
-            }
-        });
-        
-        // Show edit options
-        if (this.isEditMode) {
-            this.showEditDialog(annotation);
-        }
-    }
-
-    /**
-     * Show edit dialog for annotation
-     */
-    private showEditDialog(annotation: ImageAnnotation): void {
-        // Simple implementation - could be replaced with a proper modal
-        const newText = prompt('Edit annotation:', annotation.text);
-        if (newText !== null) {
-            annotation.text = newText;
-            this.updateAnnotation(annotation);
-            
-            // Update tooltip with sanitized text
-            const element = this.annotationElements.get(annotation.id);
-            if (element) {
-                const tooltip = element.querySelector('.annotation-tooltip');
-                if (tooltip) {
-                    // Use textContent to prevent XSS
-                    tooltip.textContent = this.sanitizeText(newText);
-                }
-            }
-        }
-    }
-
-    /**
-     * Toggle edit mode
-     */
-    toggleEditMode(): void {
-        this.isEditMode = !this.isEditMode;
-        
-        // Update overlay pointer events
-        document.querySelectorAll('.annotation-overlay').forEach(overlay => {
-            (overlay as HTMLElement).style.pointerEvents = this.isEditMode ? 'auto' : 'none';
-        });
-    }
-
-    /**
-     * Clear all annotation elements
-     */
-    private clearAnnotationElements(): void {
-        this.annotationElements.forEach(element => element.remove());
-        this.annotationElements.clear();
-    }
-
-    /**
-     * Generate unique ID
-     */
-    private generateId(): string {
-        return `ann_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    }
-
-    /**
-     * Export annotations as JSON
-     */
-    exportAnnotations(noteId: string): string {
-        const annotations = this.activeAnnotations.get(noteId) || [];
-        return JSON.stringify(annotations, null, 2);
-    }
-
-    /**
-     * Import annotations from JSON
-     */
-    async importAnnotations(noteId: string, json: string): Promise<void> {
-        try {
-            const annotations = JSON.parse(json) as ImageAnnotation[];
-            
-            for (const annotation of annotations) {
-                await this.saveAnnotation({
-                    noteId,
-                    x: annotation.x,
-                    y: annotation.y,
-                    text: annotation.text,
-                    author: annotation.author,
-                    color: annotation.color,
-                    icon: annotation.icon,
-                    type: annotation.type,
-                    width: annotation.width,
-                    height: annotation.height
-                });
-            }
-            
-            await this.loadAnnotations(noteId);
-        } catch (error) {
-            console.error('Failed to import annotations:', error);
-            throw error;
-        }
-    }
-
-    /**
-     * Sanitize text to prevent XSS
-     */
-    private sanitizeText(text: string): string {
-        if (!text) return '';
-        
-        // Remove any HTML tags and dangerous characters
-        const div = document.createElement('div');
-        div.textContent = text;
-        
-        // Additional validation
-        const sanitized = div.textContent || '';
-        
-        // Remove any remaining special characters that could be dangerous
-        return sanitized
-            .replace(/<script[^>]*>.*?<\/script>/gi, '')
-            .replace(/<iframe[^>]*>.*?<\/iframe>/gi, '')
-            .replace(/javascript:/gi, '')
-            .replace(/on\w+\s*=/gi, '');
-    }
-    
-    /**
-     * Cleanup resources
-     */
-    cleanup(): void {
-        this.clearAnnotationElements();
-        this.activeAnnotations.clear();
-        this.selectedAnnotation = null;
-        this.isEditMode = false;
-    }
-}
-
-export default ImageAnnotationsService.getInstance();

apps/client/src/services/image_comparison.ts

@@ -1,877 +0,0 @@
-/**
- * Image Comparison Module for Trilium Notes
- * Provides side-by-side and overlay comparison modes for images
- */
-
-import mediaViewer from './media_viewer.js';
-import utils from './utils.js';
-
-/**
- * Comparison mode types
- */
-export type ComparisonMode = 'side-by-side' | 'overlay' | 'swipe' | 'difference';
-
-/**
- * Image comparison configuration
- */
-export interface ComparisonConfig {
-    mode: ComparisonMode;
-    syncZoom: boolean;
-    syncPan: boolean;
-    showLabels: boolean;
-    swipePosition?: number; // For swipe mode (0-100)
-    opacity?: number; // For overlay mode (0-1)
-    highlightDifferences?: boolean; // For difference mode
-}
-
-/**
- * Comparison state
- */
-interface ComparisonState {
-    leftImage: ComparisonImage;
-    rightImage: ComparisonImage;
-    config: ComparisonConfig;
-    container?: HTMLElement;
-    isActive: boolean;
-}
-
-/**
- * Image data for comparison
- */
-export interface ComparisonImage {
-    src: string;
-    title?: string;
-    noteId?: string;
-    width?: number;
-    height?: number;
-}
-
-/**
- * ImageComparisonService provides various comparison modes for images
- */
-class ImageComparisonService {
-    private static instance: ImageComparisonService;
-    private currentComparison: ComparisonState | null = null;
-    private comparisonContainer?: HTMLElement;
-    private leftCanvas?: HTMLCanvasElement;
-    private rightCanvas?: HTMLCanvasElement;
-    private leftContext?: CanvasRenderingContext2D;
-    private rightContext?: CanvasRenderingContext2D;
-    private swipeHandle?: HTMLElement;
-    private isDraggingSwipe: boolean = false;
-    private currentZoom: number = 1;
-    private panX: number = 0;
-    private panY: number = 0;
-    
-    private defaultConfig: ComparisonConfig = {
-        mode: 'side-by-side',
-        syncZoom: true,
-        syncPan: true,
-        showLabels: true,
-        swipePosition: 50,
-        opacity: 0.5,
-        highlightDifferences: false
-    };
-
-    private constructor() {}
-
-    static getInstance(): ImageComparisonService {
-        if (!ImageComparisonService.instance) {
-            ImageComparisonService.instance = new ImageComparisonService();
-        }
-        return ImageComparisonService.instance;
-    }
-
-    /**
-     * Start image comparison
-     */
-    async startComparison(
-        leftImage: ComparisonImage,
-        rightImage: ComparisonImage,
-        container: HTMLElement,
-        config?: Partial<ComparisonConfig>
-    ): Promise<void> {
-        try {
-            // Close any existing comparison
-            this.closeComparison();
-
-            // Merge configuration
-            const finalConfig = { ...this.defaultConfig, ...config };
-
-            // Initialize state
-            this.currentComparison = {
-                leftImage,
-                rightImage,
-                config: finalConfig,
-                container,
-                isActive: true
-            };
-
-            // Load images
-            await this.loadImages(leftImage, rightImage);
-
-            // Create comparison UI based on mode
-            switch (finalConfig.mode) {
-                case 'side-by-side':
-                    await this.createSideBySideComparison(container);
-                    break;
-                case 'overlay':
-                    await this.createOverlayComparison(container);
-                    break;
-                case 'swipe':
-                    await this.createSwipeComparison(container);
-                    break;
-                case 'difference':
-                    await this.createDifferenceComparison(container);
-                    break;
-            }
-
-            // Add controls
-            this.addComparisonControls(container);
-        } catch (error) {
-            console.error('Failed to start image comparison:', error);
-            this.closeComparison();
-            throw error;
-        }
-    }
-
-    /**
-     * Load images and get dimensions
-     */
-    private async loadImages(leftImage: ComparisonImage, rightImage: ComparisonImage): Promise<void> {
-        const loadImage = (src: string): Promise<HTMLImageElement> => {
-            return new Promise((resolve, reject) => {
-                const img = new Image();
-                img.onload = () => resolve(img);
-                img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
-                img.src = src;
-            });
-        };
-
-        const [leftImg, rightImg] = await Promise.all([
-            loadImage(leftImage.src),
-            loadImage(rightImage.src)
-        ]);
-
-        // Update dimensions
-        leftImage.width = leftImg.naturalWidth;
-        leftImage.height = leftImg.naturalHeight;
-        rightImage.width = rightImg.naturalWidth;
-        rightImage.height = rightImg.naturalHeight;
-    }
-
-    /**
-     * Create side-by-side comparison
-     */
-    private async createSideBySideComparison(container: HTMLElement): Promise<void> {
-        if (!this.currentComparison) return;
-
-        // Clear container
-        container.innerHTML = '';
-        container.style.cssText = `
-            display: flex;
-            width: 100%;
-            height: 100%;
-            position: relative;
-            background: #1a1a1a;
-        `;
-
-        // Create left panel
-        const leftPanel = document.createElement('div');
-        leftPanel.className = 'comparison-panel comparison-left';
-        leftPanel.style.cssText = `
-            flex: 1;
-            position: relative;
-            overflow: hidden;
-            border-right: 2px solid #333;
-        `;
-
-        // Create right panel
-        const rightPanel = document.createElement('div');
-        rightPanel.className = 'comparison-panel comparison-right';
-        rightPanel.style.cssText = `
-            flex: 1;
-            position: relative;
-            overflow: hidden;
-        `;
-
-        // Add images
-        const leftImg = await this.createImageElement(this.currentComparison.leftImage);
-        const rightImg = await this.createImageElement(this.currentComparison.rightImage);
-        
-        leftPanel.appendChild(leftImg);
-        rightPanel.appendChild(rightImg);
-
-        // Add labels if enabled
-        if (this.currentComparison.config.showLabels) {
-            this.addImageLabel(leftPanel, this.currentComparison.leftImage.title || 'Image 1');
-            this.addImageLabel(rightPanel, this.currentComparison.rightImage.title || 'Image 2');
-        }
-
-        container.appendChild(leftPanel);
-        container.appendChild(rightPanel);
-
-        // Setup synchronized zoom and pan if enabled
-        if (this.currentComparison.config.syncZoom || this.currentComparison.config.syncPan) {
-            this.setupSynchronizedControls(leftPanel, rightPanel);
-        }
-    }
-
-    /**
-     * Create overlay comparison
-     */
-    private async createOverlayComparison(container: HTMLElement): Promise<void> {
-        if (!this.currentComparison) return;
-
-        container.innerHTML = '';
-        container.style.cssText = `
-            position: relative;
-            width: 100%;
-            height: 100%;
-            background: #1a1a1a;
-            overflow: hidden;
-        `;
-
-        // Create base image
-        const baseImg = await this.createImageElement(this.currentComparison.leftImage);
-        baseImg.style.position = 'absolute';
-        baseImg.style.zIndex = '1';
-        
-        // Create overlay image
-        const overlayImg = await this.createImageElement(this.currentComparison.rightImage);
-        overlayImg.style.position = 'absolute';
-        overlayImg.style.zIndex = '2';
-        overlayImg.style.opacity = String(this.currentComparison.config.opacity || 0.5);
-        
-        container.appendChild(baseImg);
-        container.appendChild(overlayImg);
-
-        // Add opacity slider
-        this.addOpacityControl(container, overlayImg);
-
-        // Add labels
-        if (this.currentComparison.config.showLabels) {
-            const labelContainer = document.createElement('div');
-            labelContainer.style.cssText = `
-                position: absolute;
-                top: 10px;
-                left: 10px;
-                z-index: 10;
-                display: flex;
-                gap: 10px;
-            `;
-            
-            const baseLabel = this.createLabel(this.currentComparison.leftImage.title || 'Base', '#4CAF50');
-            const overlayLabel = this.createLabel(this.currentComparison.rightImage.title || 'Overlay', '#2196F3');
-            
-            labelContainer.appendChild(baseLabel);
-            labelContainer.appendChild(overlayLabel);
-            container.appendChild(labelContainer);
-        }
-    }
-
-    /**
-     * Create swipe comparison
-     */
-    private async createSwipeComparison(container: HTMLElement): Promise<void> {
-        if (!this.currentComparison) return;
-
-        container.innerHTML = '';
-        container.style.cssText = `
-            position: relative;
-            width: 100%;
-            height: 100%;
-            background: #1a1a1a;
-            overflow: hidden;
-            cursor: ew-resize;
-        `;
-
-        // Create images
-        const leftImg = await this.createImageElement(this.currentComparison.leftImage);
-        const rightImg = await this.createImageElement(this.currentComparison.rightImage);
-        
-        leftImg.style.position = 'absolute';
-        leftImg.style.zIndex = '1';
-        
-        // Create clipping container for right image
-        const clipContainer = document.createElement('div');
-        clipContainer.className = 'swipe-clip-container';
-        clipContainer.style.cssText = `
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: ${this.currentComparison.config.swipePosition}%;
-            height: 100%;
-            overflow: hidden;
-            z-index: 2;
-        `;
-        
-        rightImg.style.position = 'absolute';
-        clipContainer.appendChild(rightImg);
-        
-        // Create swipe handle
-        this.swipeHandle = document.createElement('div');
-        this.swipeHandle.className = 'swipe-handle';
-        this.swipeHandle.style.cssText = `
-            position: absolute;
-            top: 0;
-            left: ${this.currentComparison.config.swipePosition}%;
-            width: 4px;
-            height: 100%;
-            background: white;
-            cursor: ew-resize;
-            z-index: 3;
-            transform: translateX(-50%);
-            box-shadow: 0 0 10px rgba(0,0,0,0.5);
-        `;
-
-        // Add handle icon
-        const handleIcon = document.createElement('div');
-        handleIcon.style.cssText = `
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 40px;
-            height: 40px;
-            background: white;
-            border-radius: 50%;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-        `;
-        handleIcon.innerHTML = '<i class="bx bx-move-horizontal" style="font-size: 24px; color: #333;"></i>';
-        this.swipeHandle.appendChild(handleIcon);
-
-        container.appendChild(leftImg);
-        container.appendChild(clipContainer);
-        container.appendChild(this.swipeHandle);
-
-        // Setup swipe interaction
-        this.setupSwipeInteraction(container, clipContainer);
-
-        // Add labels
-        if (this.currentComparison.config.showLabels) {
-            this.addSwipeLabels(container);
-        }
-    }
-
-    /**
-     * Create difference comparison using canvas
-     */
-    private async createDifferenceComparison(container: HTMLElement): Promise<void> {
-        if (!this.currentComparison) return;
-
-        container.innerHTML = '';
-        container.style.cssText = `
-            position: relative;
-            width: 100%;
-            height: 100%;
-            background: #1a1a1a;
-            overflow: hidden;
-        `;
-
-        // Create canvas for difference visualization
-        const canvas = document.createElement('canvas');
-        canvas.className = 'difference-canvas';
-        const ctx = canvas.getContext('2d');
-        
-        if (!ctx) {
-            throw new Error('Failed to get canvas context');
-        }
-
-        // Load images
-        const leftImg = new Image();
-        const rightImg = new Image();
-        
-        await Promise.all([
-            new Promise((resolve) => {
-                leftImg.onload = resolve;
-                leftImg.src = this.currentComparison!.leftImage.src;
-            }),
-            new Promise((resolve) => {
-                rightImg.onload = resolve;
-                rightImg.src = this.currentComparison!.rightImage.src;
-            })
-        ]);
-
-        // Set canvas size
-        const maxWidth = Math.max(leftImg.width, rightImg.width);
-        const maxHeight = Math.max(leftImg.height, rightImg.height);
-        canvas.width = maxWidth;
-        canvas.height = maxHeight;
-
-        // Calculate difference
-        this.calculateImageDifference(ctx, leftImg, rightImg, maxWidth, maxHeight);
-
-        // Style canvas
-        canvas.style.cssText = `
-            max-width: 100%;
-            max-height: 100%;
-            object-fit: contain;
-        `;
-
-        container.appendChild(canvas);
-
-        // Add difference statistics
-        this.addDifferenceStatistics(container, ctx, maxWidth, maxHeight);
-    }
-
-    /**
-     * Calculate and visualize image difference
-     */
-    private calculateImageDifference(
-        ctx: CanvasRenderingContext2D,
-        leftImg: HTMLImageElement,
-        rightImg: HTMLImageElement,
-        width: number,
-        height: number
-    ): void {
-        // Draw left image
-        ctx.drawImage(leftImg, 0, 0, width, height);
-        const leftData = ctx.getImageData(0, 0, width, height);
-
-        // Draw right image
-        ctx.clearRect(0, 0, width, height);
-        ctx.drawImage(rightImg, 0, 0, width, height);
-        const rightData = ctx.getImageData(0, 0, width, height);
-
-        // Calculate difference
-        const diffData = ctx.createImageData(width, height);
-        let totalDiff = 0;
-
-        for (let i = 0; i < leftData.data.length; i += 4) {
-            const rDiff = Math.abs(leftData.data[i] - rightData.data[i]);
-            const gDiff = Math.abs(leftData.data[i + 1] - rightData.data[i + 1]);
-            const bDiff = Math.abs(leftData.data[i + 2] - rightData.data[i + 2]);
-            
-            const avgDiff = (rDiff + gDiff + bDiff) / 3;
-            totalDiff += avgDiff;
-
-            if (this.currentComparison?.config.highlightDifferences && avgDiff > 30) {
-                // Highlight differences in red
-                diffData.data[i] = 255; // Red
-                diffData.data[i + 1] = 0; // Green
-                diffData.data[i + 2] = 0; // Blue
-                diffData.data[i + 3] = Math.min(255, avgDiff * 2); // Alpha based on difference
-            } else {
-                // Show original image with reduced opacity for non-different areas
-                diffData.data[i] = leftData.data[i];
-                diffData.data[i + 1] = leftData.data[i + 1];
-                diffData.data[i + 2] = leftData.data[i + 2];
-                diffData.data[i + 3] = avgDiff > 10 ? 255 : 128;
-            }
-        }
-
-        ctx.putImageData(diffData, 0, 0);
-    }
-
-    /**
-     * Add difference statistics overlay
-     */
-    private addDifferenceStatistics(
-        container: HTMLElement,
-        ctx: CanvasRenderingContext2D,
-        width: number,
-        height: number
-    ): void {
-        const imageData = ctx.getImageData(0, 0, width, height);
-        let changedPixels = 0;
-        const threshold = 30;
-
-        for (let i = 0; i < imageData.data.length; i += 4) {
-            const r = imageData.data[i];
-            const g = imageData.data[i + 1];
-            const b = imageData.data[i + 2];
-            
-            if (r > threshold || g > threshold || b > threshold) {
-                changedPixels++;
-            }
-        }
-
-        const totalPixels = width * height;
-        const changePercentage = ((changedPixels / totalPixels) * 100).toFixed(2);
-
-        const statsDiv = document.createElement('div');
-        statsDiv.className = 'difference-stats';
-        statsDiv.style.cssText = `
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(0, 0, 0, 0.8);
-            color: white;
-            padding: 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-        `;
-        
-        statsDiv.innerHTML = `
-            <div><strong>Difference Analysis</strong></div>
-            <div>Changed pixels: ${changedPixels.toLocaleString()}</div>
-            <div>Total pixels: ${totalPixels.toLocaleString()}</div>
-            <div>Difference: ${changePercentage}%</div>
-        `;
-        
-        container.appendChild(statsDiv);
-    }
-
-    /**
-     * Create image element
-     */
-    private async createImageElement(image: ComparisonImage): Promise<HTMLImageElement> {
-        const img = document.createElement('img');
-        img.src = image.src;
-        img.alt = image.title || 'Comparison image';
-        img.style.cssText = `
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        `;
-        
-        await new Promise((resolve, reject) => {
-            img.onload = resolve;
-            img.onerror = reject;
-        });
-        
-        return img;
-    }
-
-    /**
-     * Add image label
-     */
-    private addImageLabel(container: HTMLElement, text: string): void {
-        const label = document.createElement('div');
-        label.className = 'image-label';
-        label.style.cssText = `
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 6px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-        `;
-        label.textContent = text;
-        container.appendChild(label);
-    }
-
-    /**
-     * Create label element
-     */
-    private createLabel(text: string, color: string): HTMLElement {
-        const label = document.createElement('div');
-        label.style.cssText = `
-            background: ${color};
-            color: white;
-            padding: 4px 8px;
-            border-radius: 3px;
-            font-size: 12px;
-        `;
-        label.textContent = text;
-        return label;
-    }
-
-    /**
-     * Add swipe labels
-     */
-    private addSwipeLabels(container: HTMLElement): void {
-        if (!this.currentComparison) return;
-
-        const leftLabel = document.createElement('div');
-        leftLabel.style.cssText = `
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background: rgba(76, 175, 80, 0.9);
-            color: white;
-            padding: 6px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-        `;
-        leftLabel.textContent = this.currentComparison.leftImage.title || 'Left';
-
-        const rightLabel = document.createElement('div');
-        rightLabel.style.cssText = `
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(33, 150, 243, 0.9);
-            color: white;
-            padding: 6px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-        `;
-        rightLabel.textContent = this.currentComparison.rightImage.title || 'Right';
-
-        container.appendChild(leftLabel);
-        container.appendChild(rightLabel);
-    }
-
-    /**
-     * Setup swipe interaction
-     */
-    private setupSwipeInteraction(container: HTMLElement, clipContainer: HTMLElement): void {
-        if (!this.swipeHandle) return;
-
-        let startX = 0;
-        let startPosition = this.currentComparison?.config.swipePosition || 50;
-
-        const handleMouseMove = (e: MouseEvent) => {
-            if (!this.isDraggingSwipe) return;
-            
-            const rect = container.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const percentage = Math.max(0, Math.min(100, (x / rect.width) * 100));
-            
-            clipContainer.style.width = `${percentage}%`;
-            if (this.swipeHandle) {
-                this.swipeHandle.style.left = `${percentage}%`;
-            }
-            
-            if (this.currentComparison) {
-                this.currentComparison.config.swipePosition = percentage;
-            }
-        };
-
-        const handleMouseUp = () => {
-            this.isDraggingSwipe = false;
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-            container.style.cursor = 'default';
-        };
-
-        this.swipeHandle.addEventListener('mousedown', (e) => {
-            this.isDraggingSwipe = true;
-            startX = e.clientX;
-            startPosition = this.currentComparison?.config.swipePosition || 50;
-            container.style.cursor = 'ew-resize';
-            
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
-        });
-
-        // Also allow dragging anywhere in the container
-        container.addEventListener('mousedown', (e) => {
-            if (e.target === this.swipeHandle || (e.target as HTMLElement).parentElement === this.swipeHandle) {
-                return;
-            }
-            
-            const rect = container.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const percentage = (x / rect.width) * 100;
-            
-            clipContainer.style.width = `${percentage}%`;
-            if (this.swipeHandle) {
-                this.swipeHandle.style.left = `${percentage}%`;
-            }
-            
-            if (this.currentComparison) {
-                this.currentComparison.config.swipePosition = percentage;
-            }
-        });
-    }
-
-    /**
-     * Add opacity control for overlay mode
-     */
-    private addOpacityControl(container: HTMLElement, overlayImg: HTMLImageElement): void {
-        const control = document.createElement('div');
-        control.className = 'opacity-control';
-        control.style.cssText = `
-            position: absolute;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background: rgba(0, 0, 0, 0.8);
-            padding: 10px 20px;
-            border-radius: 4px;
-            z-index: 10;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        `;
-
-        const label = document.createElement('label');
-        label.textContent = 'Opacity:';
-        label.style.color = 'white';
-        label.style.fontSize = '12px';
-
-        const slider = document.createElement('input');
-        slider.type = 'range';
-        slider.min = '0';
-        slider.max = '100';
-        slider.value = String((this.currentComparison?.config.opacity || 0.5) * 100);
-        slider.style.width = '150px';
-
-        const value = document.createElement('span');
-        value.textContent = `${slider.value}%`;
-        value.style.color = 'white';
-        value.style.fontSize = '12px';
-        value.style.minWidth = '35px';
-
-        slider.addEventListener('input', () => {
-            const opacity = parseInt(slider.value) / 100;
-            overlayImg.style.opacity = String(opacity);
-            value.textContent = `${slider.value}%`;
-            
-            if (this.currentComparison) {
-                this.currentComparison.config.opacity = opacity;
-            }
-        });
-
-        control.appendChild(label);
-        control.appendChild(slider);
-        control.appendChild(value);
-        container.appendChild(control);
-    }
-
-    /**
-     * Setup synchronized controls for side-by-side mode
-     */
-    private setupSynchronizedControls(leftPanel: HTMLElement, rightPanel: HTMLElement): void {
-        const leftImg = leftPanel.querySelector('img') as HTMLImageElement;
-        const rightImg = rightPanel.querySelector('img') as HTMLImageElement;
-        
-        if (!leftImg || !rightImg) return;
-
-        // Synchronize scroll
-        if (this.currentComparison?.config.syncPan) {
-            leftPanel.addEventListener('scroll', () => {
-                rightPanel.scrollLeft = leftPanel.scrollLeft;
-                rightPanel.scrollTop = leftPanel.scrollTop;
-            });
-            
-            rightPanel.addEventListener('scroll', () => {
-                leftPanel.scrollLeft = rightPanel.scrollLeft;
-                leftPanel.scrollTop = rightPanel.scrollTop;
-            });
-        }
-
-        // Synchronize zoom with wheel events
-        if (this.currentComparison?.config.syncZoom) {
-            const handleWheel = (e: WheelEvent) => {
-                e.preventDefault();
-                
-                const delta = e.deltaY < 0 ? 1.1 : 0.9;
-                this.currentZoom = Math.max(0.5, Math.min(5, this.currentZoom * delta));
-                
-                leftImg.style.transform = `scale(${this.currentZoom})`;
-                rightImg.style.transform = `scale(${this.currentZoom})`;
-            };
-            
-            leftPanel.addEventListener('wheel', handleWheel);
-            rightPanel.addEventListener('wheel', handleWheel);
-        }
-    }
-
-    /**
-     * Add comparison controls toolbar
-     */
-    private addComparisonControls(container: HTMLElement): void {
-        const toolbar = document.createElement('div');
-        toolbar.className = 'comparison-toolbar';
-        toolbar.style.cssText = `
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(0, 0, 0, 0.8);
-            border-radius: 4px;
-            padding: 8px;
-            display: flex;
-            gap: 8px;
-            z-index: 100;
-        `;
-
-        // Mode switcher
-        const modes: ComparisonMode[] = ['side-by-side', 'overlay', 'swipe', 'difference'];
-        modes.forEach(mode => {
-            const btn = document.createElement('button');
-            btn.className = `mode-btn mode-${mode}`;
-            btn.style.cssText = `
-                background: ${this.currentComparison?.config.mode === mode ? '#2196F3' : 'rgba(255,255,255,0.1)'};
-                color: white;
-                border: none;
-                padding: 6px 10px;
-                border-radius: 3px;
-                cursor: pointer;
-                font-size: 12px;
-            `;
-            btn.textContent = mode.replace('-', ' ').replace(/\b\w/g, l => l.toUpperCase());
-            
-            btn.addEventListener('click', async () => {
-                if (this.currentComparison && this.currentComparison.container) {
-                    this.currentComparison.config.mode = mode;
-                    await this.startComparison(
-                        this.currentComparison.leftImage,
-                        this.currentComparison.rightImage,
-                        this.currentComparison.container,
-                        this.currentComparison.config
-                    );
-                }
-            });
-            
-            toolbar.appendChild(btn);
-        });
-
-        // Close button
-        const closeBtn = document.createElement('button');
-        closeBtn.style.cssText = `
-            background: rgba(255,0,0,0.5);
-            color: white;
-            border: none;
-            padding: 6px 10px;
-            border-radius: 3px;
-            cursor: pointer;
-            font-size: 12px;
-            margin-left: 10px;
-        `;
-        closeBtn.textContent = 'Close';
-        closeBtn.addEventListener('click', () => this.closeComparison());
-        
-        toolbar.appendChild(closeBtn);
-        container.appendChild(toolbar);
-    }
-
-    /**
-     * Close comparison
-     */
-    closeComparison(): void {
-        if (this.currentComparison?.container) {
-            this.currentComparison.container.innerHTML = '';
-        }
-        
-        this.currentComparison = null;
-        this.comparisonContainer = undefined;
-        this.leftCanvas = undefined;
-        this.rightCanvas = undefined;
-        this.leftContext = undefined;
-        this.rightContext = undefined;
-        this.swipeHandle = undefined;
-        this.isDraggingSwipe = false;
-        this.currentZoom = 1;
-        this.panX = 0;
-        this.panY = 0;
-    }
-
-    /**
-     * Check if comparison is active
-     */
-    isComparisonActive(): boolean {
-        return this.currentComparison?.isActive || false;
-    }
-
-    /**
-     * Get current comparison state
-     */
-    getComparisonState(): ComparisonState | null {
-        return this.currentComparison;
-    }
-}
-
-export default ImageComparisonService.getInstance();

apps/client/src/services/image_editor.ts

@@ -1,874 +0,0 @@
-/**
- * Basic Image Editor Module for Trilium Notes
- * Provides non-destructive image editing capabilities
- */
-
-import server from './server.js';
-import toastService from './toast.js';
-import { ImageValidator, withErrorBoundary, MemoryMonitor, ImageError, ImageErrorType } from './image_error_handler.js';
-
-/**
- * Edit operation types
- */
-export type EditOperation = 
-    | 'rotate'
-    | 'crop'
-    | 'brightness'
-    | 'contrast'
-    | 'saturation'
-    | 'blur'
-    | 'sharpen';
-
-/**
- * Edit history entry
- */
-export interface EditHistoryEntry {
-    operation: EditOperation;
-    params: any;
-    timestamp: Date;
-}
-
-/**
- * Crop area definition
- */
-export interface CropArea {
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
-
-/**
- * Editor state
- */
-interface EditorState {
-    originalImage: HTMLImageElement | null;
-    currentImage: HTMLImageElement | null;
-    canvas: HTMLCanvasElement;
-    context: CanvasRenderingContext2D;
-    history: EditHistoryEntry[];
-    historyIndex: number;
-    isEditing: boolean;
-}
-
-/**
- * Filter parameters
- */
-export interface FilterParams {
-    brightness?: number; // -100 to 100
-    contrast?: number; // -100 to 100
-    saturation?: number; // -100 to 100
-    blur?: number; // 0 to 20
-    sharpen?: number; // 0 to 100
-}
-
-/**
- * ImageEditorService provides basic image editing capabilities
- */
-class ImageEditorService {
-    private static instance: ImageEditorService;
-    private editorState: EditorState;
-    private tempCanvas: HTMLCanvasElement;
-    private tempContext: CanvasRenderingContext2D;
-    private cropOverlay?: HTMLElement;
-    private cropHandles?: HTMLElement[];
-    private cropArea: CropArea | null = null;
-    private isDraggingCrop: boolean = false;
-    private dragStartX: number = 0;
-    private dragStartY: number = 0;
-    private currentFilters: FilterParams = {};
-    
-    // Canvas size limits for security and memory management
-    private readonly MAX_CANVAS_SIZE = 8192; // Maximum width/height
-    private readonly MAX_CANVAS_AREA = 50000000; // 50 megapixels
-
-    private constructor() {
-        // Initialize canvases
-        this.editorState = {
-            originalImage: null,
-            currentImage: null,
-            canvas: document.createElement('canvas'),
-            context: null as any,
-            history: [],
-            historyIndex: -1,
-            isEditing: false
-        };
-        
-        const ctx = this.editorState.canvas.getContext('2d');
-        if (!ctx) {
-            throw new Error('Failed to get canvas context');
-        }
-        this.editorState.context = ctx;
-        
-        this.tempCanvas = document.createElement('canvas');
-        const tempCtx = this.tempCanvas.getContext('2d');
-        if (!tempCtx) {
-            throw new Error('Failed to get temp canvas context');
-        }
-        this.tempContext = tempCtx;
-    }
-
-    static getInstance(): ImageEditorService {
-        if (!ImageEditorService.instance) {
-            ImageEditorService.instance = new ImageEditorService();
-        }
-        return ImageEditorService.instance;
-    }
-
-    /**
-     * Start editing an image
-     */
-    async startEditing(src: string | HTMLImageElement): Promise<HTMLCanvasElement> {
-        return await withErrorBoundary(async () => {
-            // Validate input
-            if (typeof src === 'string') {
-                ImageValidator.validateUrl(src);
-            }
-            // Load image
-            let img: HTMLImageElement;
-            if (typeof src === 'string') {
-                img = await this.loadImage(src);
-            } else {
-                img = src;
-            }
-            
-            // Validate image dimensions
-            ImageValidator.validateDimensions(img.naturalWidth, img.naturalHeight);
-            
-            // Check memory availability
-            const estimatedMemory = MemoryMonitor.estimateImageMemory(img.naturalWidth, img.naturalHeight);
-            if (!MemoryMonitor.checkMemoryAvailable(estimatedMemory)) {
-                throw new ImageError(
-                    ImageErrorType.MEMORY_ERROR,
-                    'Insufficient memory to process image',
-                    { estimatedMemory }
-                );
-            }
-            
-            if (img.naturalWidth > this.MAX_CANVAS_SIZE || 
-                img.naturalHeight > this.MAX_CANVAS_SIZE ||
-                img.naturalWidth * img.naturalHeight > this.MAX_CANVAS_AREA) {
-                
-                // Scale down if too large
-                const scale = Math.min(
-                    this.MAX_CANVAS_SIZE / Math.max(img.naturalWidth, img.naturalHeight),
-                    Math.sqrt(this.MAX_CANVAS_AREA / (img.naturalWidth * img.naturalHeight))
-                );
-                
-                const scaledWidth = Math.floor(img.naturalWidth * scale);
-                const scaledHeight = Math.floor(img.naturalHeight * scale);
-                
-                console.warn(`Image too large (${img.naturalWidth}x${img.naturalHeight}), scaling to ${scaledWidth}x${scaledHeight}`);
-                
-                // Create scaled image
-                const scaledCanvas = document.createElement('canvas');
-                scaledCanvas.width = scaledWidth;
-                scaledCanvas.height = scaledHeight;
-                const scaledCtx = scaledCanvas.getContext('2d');
-                if (!scaledCtx) throw new Error('Failed to get scaled canvas context');
-                
-                scaledCtx.drawImage(img, 0, 0, scaledWidth, scaledHeight);
-                
-                // Create new image from scaled canvas
-                const scaledImg = new Image();
-                scaledImg.src = scaledCanvas.toDataURL();
-                await new Promise(resolve => scaledImg.onload = resolve);
-                img = scaledImg;
-                
-                // Clean up scaled canvas
-                scaledCanvas.width = 0;
-                scaledCanvas.height = 0;
-            }
-            
-            // Store original
-            this.editorState.originalImage = img;
-            this.editorState.currentImage = img;
-            this.editorState.isEditing = true;
-            this.editorState.history = [];
-            this.editorState.historyIndex = -1;
-            this.currentFilters = {};
-            
-            // Setup canvas with validated dimensions
-            this.editorState.canvas.width = img.naturalWidth;
-            this.editorState.canvas.height = img.naturalHeight;
-            this.editorState.context.drawImage(img, 0, 0);
-            
-            return this.editorState.canvas;
-        }, (error) => {
-            this.stopEditing();
-            throw error;
-        }) || this.editorState.canvas;
-    }
-
-    /**
-     * Rotate image by degrees (90, 180, 270)
-     */
-    rotate(degrees: 90 | 180 | 270 | -90): void {
-        if (!this.editorState.isEditing) return;
-        
-        const { canvas, context } = this.editorState;
-        const { width, height } = canvas;
-        
-        // Setup temp canvas
-        if (degrees === 90 || degrees === -90 || degrees === 270) {
-            this.tempCanvas.width = height;
-            this.tempCanvas.height = width;
-        } else {
-            this.tempCanvas.width = width;
-            this.tempCanvas.height = height;
-        }
-        
-        // Clear temp canvas
-        this.tempContext.clearRect(0, 0, this.tempCanvas.width, this.tempCanvas.height);
-        
-        // Rotate
-        this.tempContext.save();
-        
-        if (degrees === 90) {
-            this.tempContext.translate(height, 0);
-            this.tempContext.rotate(Math.PI / 2);
-        } else if (degrees === 180) {
-            this.tempContext.translate(width, height);
-            this.tempContext.rotate(Math.PI);
-        } else if (degrees === 270 || degrees === -90) {
-            this.tempContext.translate(0, width);
-            this.tempContext.rotate(-Math.PI / 2);
-        }
-        
-        this.tempContext.drawImage(canvas, 0, 0);
-        this.tempContext.restore();
-        
-        // Copy back to main canvas
-        canvas.width = this.tempCanvas.width;
-        canvas.height = this.tempCanvas.height;
-        context.drawImage(this.tempCanvas, 0, 0);
-        
-        // Add to history
-        this.addToHistory('rotate', { degrees });
-    }
-
-    /**
-     * Start crop selection
-     */
-    startCrop(container: HTMLElement): void {
-        if (!this.editorState.isEditing) return;
-        
-        // Create crop overlay
-        this.cropOverlay = document.createElement('div');
-        this.cropOverlay.className = 'crop-overlay';
-        this.cropOverlay.style.cssText = `
-            position: absolute;
-            border: 2px dashed #fff;
-            background: rgba(0, 0, 0, 0.3);
-            cursor: move;
-            z-index: 1000;
-        `;
-        
-        // Create resize handles
-        this.cropHandles = [];
-        const handlePositions = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
-        
-        handlePositions.forEach(pos => {
-            const handle = document.createElement('div');
-            handle.className = `crop-handle crop-handle-${pos}`;
-            handle.dataset.position = pos;
-            handle.style.cssText = `
-                position: absolute;
-                width: 10px;
-                height: 10px;
-                background: white;
-                border: 1px solid #333;
-                z-index: 1001;
-            `;
-            
-            // Position handles
-            switch (pos) {
-                case 'nw':
-                    handle.style.top = '-5px';
-                    handle.style.left = '-5px';
-                    handle.style.cursor = 'nw-resize';
-                    break;
-                case 'n':
-                    handle.style.top = '-5px';
-                    handle.style.left = '50%';
-                    handle.style.transform = 'translateX(-50%)';
-                    handle.style.cursor = 'n-resize';
-                    break;
-                case 'ne':
-                    handle.style.top = '-5px';
-                    handle.style.right = '-5px';
-                    handle.style.cursor = 'ne-resize';
-                    break;
-                case 'e':
-                    handle.style.top = '50%';
-                    handle.style.right = '-5px';
-                    handle.style.transform = 'translateY(-50%)';
-                    handle.style.cursor = 'e-resize';
-                    break;
-                case 'se':
-                    handle.style.bottom = '-5px';
-                    handle.style.right = '-5px';
-                    handle.style.cursor = 'se-resize';
-                    break;
-                case 's':
-                    handle.style.bottom = '-5px';
-                    handle.style.left = '50%';
-                    handle.style.transform = 'translateX(-50%)';
-                    handle.style.cursor = 's-resize';
-                    break;
-                case 'sw':
-                    handle.style.bottom = '-5px';
-                    handle.style.left = '-5px';
-                    handle.style.cursor = 'sw-resize';
-                    break;
-                case 'w':
-                    handle.style.top = '50%';
-                    handle.style.left = '-5px';
-                    handle.style.transform = 'translateY(-50%)';
-                    handle.style.cursor = 'w-resize';
-                    break;
-            }
-            
-            this.cropOverlay.appendChild(handle);
-            this.cropHandles!.push(handle);
-        });
-        
-        // Set initial crop area (80% of image)
-        const canvasRect = this.editorState.canvas.getBoundingClientRect();
-        const initialSize = Math.min(canvasRect.width, canvasRect.height) * 0.8;
-        const initialX = (canvasRect.width - initialSize) / 2;
-        const initialY = (canvasRect.height - initialSize) / 2;
-        
-        this.cropArea = {
-            x: initialX,
-            y: initialY,
-            width: initialSize,
-            height: initialSize
-        };
-        
-        this.updateCropOverlay();
-        container.appendChild(this.cropOverlay);
-        
-        // Setup drag handlers
-        this.setupCropHandlers();
-    }
-
-    /**
-     * Setup crop interaction handlers
-     */
-    private setupCropHandlers(): void {
-        if (!this.cropOverlay) return;
-        
-        // Drag to move
-        this.cropOverlay.addEventListener('mousedown', (e) => {
-            if ((e.target as HTMLElement).classList.contains('crop-handle')) return;
-            
-            this.isDraggingCrop = true;
-            this.dragStartX = e.clientX;
-            this.dragStartY = e.clientY;
-            
-            const handleMove = (e: MouseEvent) => {
-                if (!this.isDraggingCrop || !this.cropArea) return;
-                
-                const deltaX = e.clientX - this.dragStartX;
-                const deltaY = e.clientY - this.dragStartY;
-                
-                this.cropArea.x += deltaX;
-                this.cropArea.y += deltaY;
-                
-                this.dragStartX = e.clientX;
-                this.dragStartY = e.clientY;
-                
-                this.updateCropOverlay();
-            };
-            
-            const handleUp = () => {
-                this.isDraggingCrop = false;
-                document.removeEventListener('mousemove', handleMove);
-                document.removeEventListener('mouseup', handleUp);
-            };
-            
-            document.addEventListener('mousemove', handleMove);
-            document.addEventListener('mouseup', handleUp);
-        });
-        
-        // Resize handles
-        this.cropHandles?.forEach(handle => {
-            handle.addEventListener('mousedown', (e) => {
-                e.stopPropagation();
-                
-                const position = handle.dataset.position!;
-                const startX = e.clientX;
-                const startY = e.clientY;
-                const startCrop = { ...this.cropArea! };
-                
-                const handleResize = (e: MouseEvent) => {
-                    if (!this.cropArea) return;
-                    
-                    const deltaX = e.clientX - startX;
-                    const deltaY = e.clientY - startY;
-                    
-                    switch (position) {
-                        case 'nw':
-                            this.cropArea.x = startCrop.x + deltaX;
-                            this.cropArea.y = startCrop.y + deltaY;
-                            this.cropArea.width = startCrop.width - deltaX;
-                            this.cropArea.height = startCrop.height - deltaY;
-                            break;
-                        case 'n':
-                            this.cropArea.y = startCrop.y + deltaY;
-                            this.cropArea.height = startCrop.height - deltaY;
-                            break;
-                        case 'ne':
-                            this.cropArea.y = startCrop.y + deltaY;
-                            this.cropArea.width = startCrop.width + deltaX;
-                            this.cropArea.height = startCrop.height - deltaY;
-                            break;
-                        case 'e':
-                            this.cropArea.width = startCrop.width + deltaX;
-                            break;
-                        case 'se':
-                            this.cropArea.width = startCrop.width + deltaX;
-                            this.cropArea.height = startCrop.height + deltaY;
-                            break;
-                        case 's':
-                            this.cropArea.height = startCrop.height + deltaY;
-                            break;
-                        case 'sw':
-                            this.cropArea.x = startCrop.x + deltaX;
-                            this.cropArea.width = startCrop.width - deltaX;
-                            this.cropArea.height = startCrop.height + deltaY;
-                            break;
-                        case 'w':
-                            this.cropArea.x = startCrop.x + deltaX;
-                            this.cropArea.width = startCrop.width - deltaX;
-                            break;
-                    }
-                    
-                    // Ensure minimum size
-                    this.cropArea.width = Math.max(50, this.cropArea.width);
-                    this.cropArea.height = Math.max(50, this.cropArea.height);
-                    
-                    this.updateCropOverlay();
-                };
-                
-                const handleUp = () => {
-                    document.removeEventListener('mousemove', handleResize);
-                    document.removeEventListener('mouseup', handleUp);
-                };
-                
-                document.addEventListener('mousemove', handleResize);
-                document.addEventListener('mouseup', handleUp);
-            });
-        });
-    }
-
-    /**
-     * Update crop overlay position
-     */
-    private updateCropOverlay(): void {
-        if (!this.cropOverlay || !this.cropArea) return;
-        
-        this.cropOverlay.style.left = `${this.cropArea.x}px`;
-        this.cropOverlay.style.top = `${this.cropArea.y}px`;
-        this.cropOverlay.style.width = `${this.cropArea.width}px`;
-        this.cropOverlay.style.height = `${this.cropArea.height}px`;
-    }
-
-    /**
-     * Apply crop
-     */
-    applyCrop(): void {
-        if (!this.editorState.isEditing || !this.cropArea) return;
-        
-        const { canvas, context } = this.editorState;
-        const canvasRect = canvas.getBoundingClientRect();
-        
-        // Convert crop area from screen to canvas coordinates
-        const scaleX = canvas.width / canvasRect.width;
-        const scaleY = canvas.height / canvasRect.height;
-        
-        const cropX = this.cropArea.x * scaleX;
-        const cropY = this.cropArea.y * scaleY;
-        const cropWidth = this.cropArea.width * scaleX;
-        const cropHeight = this.cropArea.height * scaleY;
-        
-        // Get cropped image data
-        const imageData = context.getImageData(cropX, cropY, cropWidth, cropHeight);
-        
-        // Resize canvas and put cropped image
-        canvas.width = cropWidth;
-        canvas.height = cropHeight;
-        context.putImageData(imageData, 0, 0);
-        
-        // Clean up crop overlay
-        this.cancelCrop();
-        
-        // Add to history
-        this.addToHistory('crop', {
-            x: cropX,
-            y: cropY,
-            width: cropWidth,
-            height: cropHeight
-        });
-    }
-
-    /**
-     * Cancel crop
-     */
-    cancelCrop(): void {
-        if (this.cropOverlay) {
-            this.cropOverlay.remove();
-            this.cropOverlay = undefined;
-        }
-        this.cropHandles = undefined;
-        this.cropArea = null;
-    }
-
-    /**
-     * Apply brightness adjustment
-     */
-    applyBrightness(value: number): void {
-        if (!this.editorState.isEditing) return;
-        
-        this.currentFilters.brightness = value;
-        this.applyFilters();
-    }
-
-    /**
-     * Apply contrast adjustment
-     */
-    applyContrast(value: number): void {
-        if (!this.editorState.isEditing) return;
-        
-        this.currentFilters.contrast = value;
-        this.applyFilters();
-    }
-
-    /**
-     * Apply saturation adjustment
-     */
-    applySaturation(value: number): void {
-        if (!this.editorState.isEditing) return;
-        
-        this.currentFilters.saturation = value;
-        this.applyFilters();
-    }
-
-    /**
-     * Apply all filters
-     */
-    private applyFilters(): void {
-        const { canvas, context, originalImage } = this.editorState;
-        
-        if (!originalImage) return;
-        
-        // Clear canvas and redraw original
-        context.clearRect(0, 0, canvas.width, canvas.height);
-        context.drawImage(originalImage, 0, 0, canvas.width, canvas.height);
-        
-        // Get image data
-        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-        const data = imageData.data;
-        
-        // Apply brightness
-        if (this.currentFilters.brightness) {
-            const brightness = this.currentFilters.brightness * 2.55; // Convert to 0-255 range
-            for (let i = 0; i < data.length; i += 4) {
-                data[i] = Math.min(255, Math.max(0, data[i] + brightness));
-                data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + brightness));
-                data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + brightness));
-            }
-        }
-        
-        // Apply contrast
-        if (this.currentFilters.contrast) {
-            const factor = (259 * (this.currentFilters.contrast + 255)) / (255 * (259 - this.currentFilters.contrast));
-            for (let i = 0; i < data.length; i += 4) {
-                data[i] = Math.min(255, Math.max(0, factor * (data[i] - 128) + 128));
-                data[i + 1] = Math.min(255, Math.max(0, factor * (data[i + 1] - 128) + 128));
-                data[i + 2] = Math.min(255, Math.max(0, factor * (data[i + 2] - 128) + 128));
-            }
-        }
-        
-        // Apply saturation
-        if (this.currentFilters.saturation) {
-            const saturation = this.currentFilters.saturation / 100;
-            for (let i = 0; i < data.length; i += 4) {
-                const gray = 0.2989 * data[i] + 0.5870 * data[i + 1] + 0.1140 * data[i + 2];
-                data[i] = Math.min(255, Math.max(0, gray + saturation * (data[i] - gray)));
-                data[i + 1] = Math.min(255, Math.max(0, gray + saturation * (data[i + 1] - gray)));
-                data[i + 2] = Math.min(255, Math.max(0, gray + saturation * (data[i + 2] - gray)));
-            }
-        }
-        
-        // Put modified image data back
-        context.putImageData(imageData, 0, 0);
-    }
-
-    /**
-     * Apply blur effect
-     */
-    applyBlur(radius: number): void {
-        if (!this.editorState.isEditing) return;
-        
-        const { canvas, context } = this.editorState;
-        
-        // Use CSS filter for performance
-        context.filter = `blur(${radius}px)`;
-        context.drawImage(canvas, 0, 0);
-        context.filter = 'none';
-        
-        this.addToHistory('blur', { radius });
-    }
-
-    /**
-     * Apply sharpen effect
-     */
-    applySharpen(amount: number): void {
-        if (!this.editorState.isEditing) return;
-        
-        const { canvas, context } = this.editorState;
-        const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-        const data = imageData.data;
-        const width = canvas.width;
-        const height = canvas.height;
-        
-        // Create copy of original data
-        const original = new Uint8ClampedArray(data);
-        
-        // Sharpen kernel
-        const kernel = [
-            0, -1, 0,
-            -1, 5 + amount / 25, -1,
-            0, -1, 0
-        ];
-        
-        // Apply convolution
-        for (let y = 1; y < height - 1; y++) {
-            for (let x = 1; x < width - 1; x++) {
-                const idx = (y * width + x) * 4;
-                
-                for (let c = 0; c < 3; c++) {
-                    let sum = 0;
-                    for (let ky = -1; ky <= 1; ky++) {
-                        for (let kx = -1; kx <= 1; kx++) {
-                            const kidx = ((y + ky) * width + (x + kx)) * 4;
-                            sum += original[kidx + c] * kernel[(ky + 1) * 3 + (kx + 1)];
-                        }
-                    }
-                    data[idx + c] = Math.min(255, Math.max(0, sum));
-                }
-            }
-        }
-        
-        context.putImageData(imageData, 0, 0);
-        this.addToHistory('sharpen', { amount });
-    }
-
-    /**
-     * Undo last operation
-     */
-    undo(): void {
-        if (!this.editorState.isEditing || this.editorState.historyIndex <= 0) return;
-        
-        this.editorState.historyIndex--;
-        this.replayHistory();
-    }
-
-    /**
-     * Redo operation
-     */
-    redo(): void {
-        if (!this.editorState.isEditing || 
-            this.editorState.historyIndex >= this.editorState.history.length - 1) return;
-        
-        this.editorState.historyIndex++;
-        this.replayHistory();
-    }
-
-    /**
-     * Replay history up to current index
-     */
-    private replayHistory(): void {
-        const { canvas, context, originalImage, history, historyIndex } = this.editorState;
-        
-        if (!originalImage) return;
-        
-        // Reset to original
-        canvas.width = originalImage.naturalWidth;
-        canvas.height = originalImage.naturalHeight;
-        context.drawImage(originalImage, 0, 0);
-        
-        // Replay operations
-        for (let i = 0; i <= historyIndex; i++) {
-            const entry = history[i];
-            // Apply operation based on entry
-            // Note: This is simplified - actual implementation would need to store and replay exact operations
-        }
-    }
-
-    /**
-     * Add operation to history
-     */
-    private addToHistory(operation: EditOperation, params: any): void {
-        // Remove any operations after current index
-        this.editorState.history = this.editorState.history.slice(0, this.editorState.historyIndex + 1);
-        
-        // Add new operation
-        this.editorState.history.push({
-            operation,
-            params,
-            timestamp: new Date()
-        });
-        
-        this.editorState.historyIndex++;
-        
-        // Limit history size
-        if (this.editorState.history.length > 50) {
-            this.editorState.history.shift();
-            this.editorState.historyIndex--;
-        }
-    }
-
-    /**
-     * Save edited image
-     */
-    async saveImage(noteId?: string): Promise<Blob> {
-        if (!this.editorState.isEditing) {
-            throw new ImageError(
-                ImageErrorType.INVALID_INPUT,
-                'No image being edited'
-            );
-        }
-        
-        return new Promise((resolve, reject) => {
-            this.editorState.canvas.toBlob((blob) => {
-                if (blob) {
-                    resolve(blob);
-                    
-                    if (noteId) {
-                        // Optionally save to server
-                        this.saveToServer(noteId, blob);
-                    }
-                } else {
-                    reject(new Error('Failed to create blob'));
-                }
-            }, 'image/png');
-        });
-    }
-
-    /**
-     * Save edited image to server
-     */
-    private async saveToServer(noteId: string, blob: Blob): Promise<void> {
-        try {
-            const formData = new FormData();
-            formData.append('image', blob, 'edited.png');
-            
-            await server.upload(`notes/${noteId}/image`, formData);
-            toastService.showMessage('Image saved successfully');
-        } catch (error) {
-            console.error('Failed to save image:', error);
-            toastService.showError('Failed to save image');
-        }
-    }
-
-    /**
-     * Reset to original image
-     */
-    reset(): void {
-        if (!this.editorState.isEditing || !this.editorState.originalImage) return;
-        
-        const { canvas, context, originalImage } = this.editorState;
-        
-        canvas.width = originalImage.naturalWidth;
-        canvas.height = originalImage.naturalHeight;
-        context.drawImage(originalImage, 0, 0);
-        
-        this.currentFilters = {};
-        this.editorState.history = [];
-        this.editorState.historyIndex = -1;
-    }
-
-    /**
-     * Stop editing and clean up resources
-     */
-    stopEditing(): void {
-        this.cancelCrop();
-        
-        // Request garbage collection after cleanup
-        MemoryMonitor.requestGarbageCollection();
-        
-        // Clean up canvas memory
-        if (this.editorState.canvas) {
-            this.editorState.context.clearRect(0, 0, this.editorState.canvas.width, this.editorState.canvas.height);
-            this.editorState.canvas.width = 0;
-            this.editorState.canvas.height = 0;
-        }
-        
-        if (this.tempCanvas) {
-            this.tempContext.clearRect(0, 0, this.tempCanvas.width, this.tempCanvas.height);
-            this.tempCanvas.width = 0;
-            this.tempCanvas.height = 0;
-        }
-        
-        // Release image references
-        if (this.editorState.originalImage) {
-            this.editorState.originalImage.src = '';
-        }
-        if (this.editorState.currentImage) {
-            this.editorState.currentImage.src = '';
-        }
-        
-        this.editorState.isEditing = false;
-        this.editorState.originalImage = null;
-        this.editorState.currentImage = null;
-        this.editorState.history = [];
-        this.editorState.historyIndex = -1;
-        this.currentFilters = {};
-    }
-
-    /**
-     * Load image from URL
-     */
-    private loadImage(src: string): Promise<HTMLImageElement> {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.crossOrigin = 'anonymous';
-            img.onload = () => resolve(img);
-            img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
-            img.src = src;
-        });
-    }
-
-    /**
-     * Check if can undo
-     */
-    canUndo(): boolean {
-        return this.editorState.historyIndex > 0;
-    }
-
-    /**
-     * Check if can redo
-     */
-    canRedo(): boolean {
-        return this.editorState.historyIndex < this.editorState.history.length - 1;
-    }
-
-    /**
-     * Get current canvas
-     */
-    getCanvas(): HTMLCanvasElement {
-        return this.editorState.canvas;
-    }
-
-    /**
-     * Check if editing
-     */
-    isEditing(): boolean {
-        return this.editorState.isEditing;
-    }
-}
-
-export default ImageEditorService.getInstance();

apps/client/src/services/image_error_handler.ts

@@ -1,369 +0,0 @@
-/**
- * Error Handler for Image Processing Operations
- * Provides error boundaries and validation for image-related operations
- */
-
-import toastService from './toast.js';
-
-/**
- * Error types for image operations
- */
-export enum ImageErrorType {
-    INVALID_INPUT = 'INVALID_INPUT',
-    SIZE_LIMIT_EXCEEDED = 'SIZE_LIMIT_EXCEEDED',
-    MEMORY_ERROR = 'MEMORY_ERROR',
-    PROCESSING_ERROR = 'PROCESSING_ERROR',
-    NETWORK_ERROR = 'NETWORK_ERROR',
-    SECURITY_ERROR = 'SECURITY_ERROR'
-}
-
-/**
- * Custom error class for image operations
- */
-export class ImageError extends Error {
-    constructor(
-        public type: ImageErrorType,
-        message: string,
-        public details?: any
-    ) {
-        super(message);
-        this.name = 'ImageError';
-    }
-}
-
-/**
- * Input validation utilities
- */
-export class ImageValidator {
-    private static readonly MAX_FILE_SIZE = 100 * 1024 * 1024; // 100MB
-    private static readonly ALLOWED_MIME_TYPES = [
-        'image/jpeg',
-        'image/jpg',
-        'image/png',
-        'image/gif',
-        'image/webp',
-        'image/svg+xml',
-        'image/bmp'
-    ];
-    private static readonly MAX_DIMENSION = 16384;
-    private static readonly MAX_AREA = 100000000; // 100 megapixels
-
-    /**
-     * Validate file input
-     */
-    static validateFile(file: File): void {
-        // Check file size
-        if (file.size > this.MAX_FILE_SIZE) {
-            throw new ImageError(
-                ImageErrorType.SIZE_LIMIT_EXCEEDED,
-                `File size exceeds maximum allowed size of ${this.MAX_FILE_SIZE / 1024 / 1024}MB`,
-                { fileSize: file.size, maxSize: this.MAX_FILE_SIZE }
-            );
-        }
-
-        // Check MIME type
-        if (!this.ALLOWED_MIME_TYPES.includes(file.type)) {
-            throw new ImageError(
-                ImageErrorType.INVALID_INPUT,
-                `File type ${file.type} is not supported`,
-                { fileType: file.type, allowedTypes: this.ALLOWED_MIME_TYPES }
-            );
-        }
-    }
-
-    /**
-     * Validate image dimensions
-     */
-    static validateDimensions(width: number, height: number): void {
-        if (width <= 0 || height <= 0) {
-            throw new ImageError(
-                ImageErrorType.INVALID_INPUT,
-                'Invalid image dimensions',
-                { width, height }
-            );
-        }
-
-        if (width > this.MAX_DIMENSION || height > this.MAX_DIMENSION) {
-            throw new ImageError(
-                ImageErrorType.SIZE_LIMIT_EXCEEDED,
-                `Image dimensions exceed maximum allowed size of ${this.MAX_DIMENSION}px`,
-                { width, height, maxDimension: this.MAX_DIMENSION }
-            );
-        }
-
-        if (width * height > this.MAX_AREA) {
-            throw new ImageError(
-                ImageErrorType.SIZE_LIMIT_EXCEEDED,
-                `Image area exceeds maximum allowed area of ${this.MAX_AREA / 1000000} megapixels`,
-                { area: width * height, maxArea: this.MAX_AREA }
-            );
-        }
-    }
-
-    /**
-     * Validate URL
-     */
-    static validateUrl(url: string): void {
-        try {
-            const parsedUrl = new URL(url);
-            
-            // Check protocol
-            if (!['http:', 'https:', 'data:', 'blob:'].includes(parsedUrl.protocol)) {
-                throw new ImageError(
-                    ImageErrorType.SECURITY_ERROR,
-                    `Unsupported protocol: ${parsedUrl.protocol}`,
-                    { url, protocol: parsedUrl.protocol }
-                );
-            }
-
-            // Additional security checks for data URLs
-            if (parsedUrl.protocol === 'data:') {
-                const [header] = url.split(',');
-                if (!header.includes('image/')) {
-                    throw new ImageError(
-                        ImageErrorType.INVALID_INPUT,
-                        'Data URL does not contain image data',
-                        { url: url.substring(0, 100) }
-                    );
-                }
-            }
-        } catch (error) {
-            if (error instanceof ImageError) {
-                throw error;
-            }
-            throw new ImageError(
-                ImageErrorType.INVALID_INPUT,
-                'Invalid URL format',
-                { url, originalError: error }
-            );
-        }
-    }
-
-    /**
-     * Sanitize filename
-     */
-    static sanitizeFilename(filename: string): string {
-        // Remove path traversal attempts
-        filename = filename.replace(/\.\./g, '');
-        filename = filename.replace(/[\/\\]/g, '_');
-        
-        // Remove special characters except dots and dashes
-        filename = filename.replace(/[^a-zA-Z0-9._-]/g, '_');
-        
-        // Limit length
-        if (filename.length > 255) {
-            const ext = filename.split('.').pop();
-            filename = filename.substring(0, 250) + '.' + ext;
-        }
-        
-        return filename;
-    }
-}
-
-/**
- * Error boundary wrapper for async operations
- */
-export async function withErrorBoundary<T>(
-    operation: () => Promise<T>,
-    errorHandler?: (error: Error) => void
-): Promise<T | null> {
-    try {
-        return await operation();
-    } catch (error) {
-        const imageError = error instanceof ImageError 
-            ? error 
-            : new ImageError(
-                ImageErrorType.PROCESSING_ERROR,
-                error instanceof Error ? error.message : 'Unknown error occurred',
-                { originalError: error }
-            );
-
-        // Log error
-        console.error('[Image Error]', imageError.type, imageError.message, imageError.details);
-
-        // Show user-friendly message
-        switch (imageError.type) {
-            case ImageErrorType.SIZE_LIMIT_EXCEEDED:
-                toastService.showError('Image is too large to process');
-                break;
-            case ImageErrorType.INVALID_INPUT:
-                toastService.showError('Invalid image or input provided');
-                break;
-            case ImageErrorType.MEMORY_ERROR:
-                toastService.showError('Not enough memory to process image');
-                break;
-            case ImageErrorType.SECURITY_ERROR:
-                toastService.showError('Security violation detected');
-                break;
-            case ImageErrorType.NETWORK_ERROR:
-                toastService.showError('Network error occurred');
-                break;
-            default:
-                toastService.showError('Failed to process image');
-        }
-
-        // Call custom error handler if provided
-        if (errorHandler) {
-            errorHandler(imageError);
-        }
-
-        return null;
-    }
-}
-
-/**
- * Memory monitoring utilities
- */
-export class MemoryMonitor {
-    private static readonly WARNING_THRESHOLD = 0.8; // 80% of available memory
-    
-    /**
-     * Check if memory is available for operation
-     */
-    static checkMemoryAvailable(estimatedBytes: number): boolean {
-        if ('memory' in performance && (performance as any).memory) {
-            const memory = (performance as any).memory;
-            const used = memory.usedJSHeapSize;
-            const limit = memory.jsHeapSizeLimit;
-            const available = limit - used;
-            
-            if (estimatedBytes > available * this.WARNING_THRESHOLD) {
-                console.warn(`Memory warning: Estimated ${estimatedBytes} bytes needed, ${available} bytes available`);
-                return false;
-            }
-        }
-        return true;
-    }
-
-    /**
-     * Estimate memory needed for image
-     */
-    static estimateImageMemory(width: number, height: number, channels: number = 4): number {
-        // Each pixel uses 4 bytes (RGBA) or specified channels
-        return width * height * channels;
-    }
-
-    /**
-     * Force garbage collection if available
-     */
-    static requestGarbageCollection(): void {
-        if (typeof (globalThis as any).gc === 'function') {
-            (globalThis as any).gc();
-        }
-    }
-}
-
-/**
- * Web Worker support for heavy operations
- */
-export class ImageWorkerPool {
-    private workers: Worker[] = [];
-    private taskQueue: Array<{
-        data: any;
-        resolve: (value: any) => void;
-        reject: (error: any) => void;
-    }> = [];
-    private busyWorkers = new Set<Worker>();
-
-    constructor(
-        private workerScript: string,
-        private poolSize: number = navigator.hardwareConcurrency || 4
-    ) {
-        this.initializeWorkers();
-    }
-
-    private initializeWorkers(): void {
-        for (let i = 0; i < this.poolSize; i++) {
-            try {
-                const worker = new Worker(this.workerScript);
-                worker.addEventListener('message', (e) => this.handleWorkerMessage(worker, e));
-                worker.addEventListener('error', (e) => this.handleWorkerError(worker, e));
-                this.workers.push(worker);
-            } catch (error) {
-                console.error('Failed to create worker:', error);
-            }
-        }
-    }
-
-    private handleWorkerMessage(worker: Worker, event: MessageEvent): void {
-        this.busyWorkers.delete(worker);
-        
-        // Process next task if available
-        if (this.taskQueue.length > 0) {
-            const task = this.taskQueue.shift()!;
-            this.executeTask(worker, task);
-        }
-    }
-
-    private handleWorkerError(worker: Worker, event: ErrorEvent): void {
-        this.busyWorkers.delete(worker);
-        console.error('Worker error:', event);
-    }
-
-    private executeTask(
-        worker: Worker,
-        task: { data: any; resolve: (value: any) => void; reject: (error: any) => void }
-    ): void {
-        this.busyWorkers.add(worker);
-        
-        const messageHandler = (e: MessageEvent) => {
-            worker.removeEventListener('message', messageHandler);
-            worker.removeEventListener('error', errorHandler);
-            this.busyWorkers.delete(worker);
-            task.resolve(e.data);
-            
-            // Process next task
-            if (this.taskQueue.length > 0) {
-                const nextTask = this.taskQueue.shift()!;
-                this.executeTask(worker, nextTask);
-            }
-        };
-        
-        const errorHandler = (e: ErrorEvent) => {
-            worker.removeEventListener('message', messageHandler);
-            worker.removeEventListener('error', errorHandler);
-            this.busyWorkers.delete(worker);
-            task.reject(e);
-            
-            // Process next task
-            if (this.taskQueue.length > 0) {
-                const nextTask = this.taskQueue.shift()!;
-                this.executeTask(worker, nextTask);
-            }
-        };
-        
-        worker.addEventListener('message', messageHandler);
-        worker.addEventListener('error', errorHandler);
-        worker.postMessage(task.data);
-    }
-
-    async process(data: any): Promise<any> {
-        return new Promise((resolve, reject) => {
-            // Find available worker
-            const availableWorker = this.workers.find(w => !this.busyWorkers.has(w));
-            
-            if (availableWorker) {
-                this.executeTask(availableWorker, { data, resolve, reject });
-            } else {
-                // Queue task
-                this.taskQueue.push({ data, resolve, reject });
-            }
-        });
-    }
-
-    terminate(): void {
-        this.workers.forEach(worker => worker.terminate());
-        this.workers = [];
-        this.taskQueue = [];
-        this.busyWorkers.clear();
-    }
-}
-
-export default {
-    ImageError,
-    ImageErrorType,
-    ImageValidator,
-    MemoryMonitor,
-    ImageWorkerPool,
-    withErrorBoundary
-};

apps/client/src/services/image_exif.ts

@@ -1,839 +0,0 @@
-/**
- * EXIF Data Viewer Module for Trilium Notes
- * Extracts and displays EXIF metadata from images
- */
-
-/**
- * EXIF data structure
- */
-export interface ExifData {
-    // Image information
-    make?: string;
-    model?: string;
-    software?: string;
-    dateTime?: Date;
-    dateTimeOriginal?: Date;
-    dateTimeDigitized?: Date;
-    
-    // Camera settings
-    exposureTime?: string;
-    fNumber?: number;
-    exposureProgram?: string;
-    iso?: number;
-    shutterSpeedValue?: string;
-    apertureValue?: number;
-    brightnessValue?: number;
-    exposureBiasValue?: number;
-    maxApertureValue?: number;
-    meteringMode?: string;
-    flash?: string;
-    focalLength?: number;
-    focalLengthIn35mm?: number;
-    
-    // Image properties
-    imageWidth?: number;
-    imageHeight?: number;
-    orientation?: number;
-    xResolution?: number;
-    yResolution?: number;
-    resolutionUnit?: string;
-    colorSpace?: string;
-    whiteBalance?: string;
-    
-    // GPS information
-    gpsLatitude?: number;
-    gpsLongitude?: number;
-    gpsAltitude?: number;
-    gpsTimestamp?: Date;
-    gpsSpeed?: number;
-    gpsDirection?: number;
-    
-    // Other metadata
-    artist?: string;
-    copyright?: string;
-    userComment?: string;
-    imageDescription?: string;
-    lensModel?: string;
-    lensMake?: string;
-    
-    // Raw data
-    raw?: Record<string, any>;
-}
-
-/**
- * EXIF tag definitions
- */
-const EXIF_TAGS: Record<number, string> = {
-    0x010F: 'make',
-    0x0110: 'model',
-    0x0131: 'software',
-    0x0132: 'dateTime',
-    0x829A: 'exposureTime',
-    0x829D: 'fNumber',
-    0x8822: 'exposureProgram',
-    0x8827: 'iso',
-    0x9003: 'dateTimeOriginal',
-    0x9004: 'dateTimeDigitized',
-    0x9201: 'shutterSpeedValue',
-    0x9202: 'apertureValue',
-    0x9203: 'brightnessValue',
-    0x9204: 'exposureBiasValue',
-    0x9205: 'maxApertureValue',
-    0x9207: 'meteringMode',
-    0x9209: 'flash',
-    0x920A: 'focalLength',
-    0xA002: 'imageWidth',
-    0xA003: 'imageHeight',
-    0x0112: 'orientation',
-    0x011A: 'xResolution',
-    0x011B: 'yResolution',
-    0x0128: 'resolutionUnit',
-    0xA001: 'colorSpace',
-    0xA403: 'whiteBalance',
-    0x8298: 'copyright',
-    0x013B: 'artist',
-    0x9286: 'userComment',
-    0x010E: 'imageDescription',
-    0xA434: 'lensModel',
-    0xA433: 'lensMake',
-    0xA432: 'focalLengthIn35mm'
-};
-
-/**
- * GPS tag definitions
- */
-const GPS_TAGS: Record<number, string> = {
-    0x0001: 'gpsLatitudeRef',
-    0x0002: 'gpsLatitude',
-    0x0003: 'gpsLongitudeRef',
-    0x0004: 'gpsLongitude',
-    0x0005: 'gpsAltitudeRef',
-    0x0006: 'gpsAltitude',
-    0x0007: 'gpsTimestamp',
-    0x000D: 'gpsSpeed',
-    0x0010: 'gpsDirection'
-};
-
-/**
- * ImageExifService extracts and manages EXIF metadata from images
- */
-class ImageExifService {
-    private static instance: ImageExifService;
-    private exifCache: Map<string, ExifData> = new Map();
-    private cacheOrder: string[] = []; // Track cache insertion order for LRU
-    private readonly MAX_CACHE_SIZE = 50; // Maximum number of cached entries
-    private readonly MAX_BUFFER_SIZE = 100 * 1024 * 1024; // 100MB max buffer size
-
-    private constructor() {}
-
-    static getInstance(): ImageExifService {
-        if (!ImageExifService.instance) {
-            ImageExifService.instance = new ImageExifService();
-        }
-        return ImageExifService.instance;
-    }
-
-    /**
-     * Extract EXIF data from image URL or file
-     */
-    async extractExifData(source: string | File | Blob): Promise<ExifData | null> {
-        try {
-            // Check cache if URL
-            if (typeof source === 'string' && this.exifCache.has(source)) {
-                // Move to end for LRU
-                this.updateCacheOrder(source);
-                return this.exifCache.get(source)!;
-            }
-
-            // Get array buffer with size validation
-            const buffer = await this.getArrayBuffer(source);
-            
-            // Validate buffer size
-            if (buffer.byteLength > this.MAX_BUFFER_SIZE) {
-                console.error('Buffer size exceeds maximum allowed size');
-                return null;
-            }
-            
-            // Parse EXIF data
-            const exifData = this.parseExifData(buffer);
-            
-            // Cache if URL with LRU eviction
-            if (typeof source === 'string' && exifData) {
-                this.addToCache(source, exifData);
-            }
-            
-            return exifData;
-        } catch (error) {
-            console.error('Failed to extract EXIF data:', error);
-            return null;
-        }
-    }
-
-    /**
-     * Get array buffer from various sources
-     */
-    private async getArrayBuffer(source: string | File | Blob): Promise<ArrayBuffer> {
-        if (source instanceof File || source instanceof Blob) {
-            return source.arrayBuffer();
-        } else {
-            const response = await fetch(source);
-            return response.arrayBuffer();
-        }
-    }
-
-    /**
-     * Parse EXIF data from array buffer
-     */
-    private parseExifData(buffer: ArrayBuffer): ExifData | null {
-        const dataView = new DataView(buffer);
-        
-        // Check for JPEG SOI marker
-        if (dataView.getUint16(0) !== 0xFFD8) {
-            return null; // Not a JPEG
-        }
-
-        // Find APP1 marker (EXIF)
-        let offset = 2;
-        let marker;
-        
-        while (offset < dataView.byteLength) {
-            marker = dataView.getUint16(offset);
-            
-            if (marker === 0xFFE1) {
-                // Found EXIF marker
-                return this.parseExifSegment(dataView, offset + 2);
-            }
-            
-            if ((marker & 0xFF00) !== 0xFF00) {
-                break; // Invalid marker
-            }
-            
-            offset += 2 + dataView.getUint16(offset + 2);
-        }
-        
-        return null;
-    }
-
-    /**
-     * Parse EXIF segment with bounds checking
-     */
-    private parseExifSegment(dataView: DataView, offset: number): ExifData | null {
-        // Bounds check
-        if (offset + 2 > dataView.byteLength) {
-            console.error('Invalid offset for EXIF segment');
-            return null;
-        }
-        
-        const length = dataView.getUint16(offset);
-        
-        // Validate segment length
-        if (offset + length > dataView.byteLength) {
-            console.error('EXIF segment length exceeds buffer size');
-            return null;
-        }
-        
-        // Check for "Exif\0\0" identifier with bounds check
-        if (offset + 6 > dataView.byteLength) {
-            console.error('Invalid EXIF header offset');
-            return null;
-        }
-        
-        const exifHeader = String.fromCharCode(
-            dataView.getUint8(offset + 2),
-            dataView.getUint8(offset + 3),
-            dataView.getUint8(offset + 4),
-            dataView.getUint8(offset + 5)
-        );
-        
-        if (exifHeader !== 'Exif') {
-            return null;
-        }
-        
-        // TIFF header offset
-        const tiffOffset = offset + 8;
-        
-        // Check byte order
-        const byteOrder = dataView.getUint16(tiffOffset);
-        const littleEndian = byteOrder === 0x4949; // 'II' for Intel
-        
-        if (byteOrder !== 0x4949 && byteOrder !== 0x4D4D) {
-            return null; // Invalid byte order
-        }
-        
-        // Parse IFD
-        const ifdOffset = this.getUint32(dataView, tiffOffset + 4, littleEndian);
-        const exifData = this.parseIFD(dataView, tiffOffset, tiffOffset + ifdOffset, littleEndian);
-        
-        // Parse GPS data if available
-        if (exifData.raw?.gpsIFDPointer) {
-            const gpsData = this.parseGPSIFD(
-                dataView,
-                tiffOffset,
-                tiffOffset + exifData.raw.gpsIFDPointer,
-                littleEndian
-            );
-            Object.assign(exifData, gpsData);
-        }
-        
-        return this.formatExifData(exifData);
-    }
-
-    /**
-     * Parse IFD (Image File Directory) with bounds checking
-     */
-    private parseIFD(
-        dataView: DataView,
-        tiffOffset: number,
-        ifdOffset: number,
-        littleEndian: boolean
-    ): ExifData {
-        // Bounds check for IFD offset
-        if (ifdOffset + 2 > dataView.byteLength) {
-            console.error('Invalid IFD offset');
-            return { raw: {} };
-        }
-        
-        const numEntries = this.getUint16(dataView, ifdOffset, littleEndian);
-        
-        // Validate number of entries
-        if (numEntries > 1000) { // Reasonable limit
-            console.error('Too many IFD entries');
-            return { raw: {} };
-        }
-        
-        const data: ExifData = { raw: {} };
-        
-        for (let i = 0; i < numEntries; i++) {
-            const entryOffset = ifdOffset + 2 + (i * 12);
-            
-            // Bounds check for entry
-            if (entryOffset + 12 > dataView.byteLength) {
-                console.warn('IFD entry exceeds buffer bounds');
-                break;
-            }
-            
-            const tag = this.getUint16(dataView, entryOffset, littleEndian);
-            const type = this.getUint16(dataView, entryOffset + 2, littleEndian);
-            const count = this.getUint32(dataView, entryOffset + 4, littleEndian);
-            const valueOffset = entryOffset + 8;
-            
-            const value = this.getTagValue(
-                dataView,
-                tiffOffset,
-                type,
-                count,
-                valueOffset,
-                littleEndian
-            );
-            
-            const tagName = EXIF_TAGS[tag];
-            if (tagName) {
-                (data as any)[tagName] = value;
-            }
-            
-            // Store raw value
-            data.raw![tag] = value;
-            
-            // Check for EXIF IFD pointer
-            if (tag === 0x8769) {
-                const exifIFDOffset = tiffOffset + value;
-                const exifData = this.parseIFD(dataView, tiffOffset, exifIFDOffset, littleEndian);
-                Object.assign(data, exifData);
-            }
-            
-            // Store GPS IFD pointer
-            if (tag === 0x8825) {
-                data.raw!.gpsIFDPointer = value;
-            }
-        }
-        
-        return data;
-    }
-
-    /**
-     * Parse GPS IFD
-     */
-    private parseGPSIFD(
-        dataView: DataView,
-        tiffOffset: number,
-        ifdOffset: number,
-        littleEndian: boolean
-    ): Partial<ExifData> {
-        const numEntries = this.getUint16(dataView, ifdOffset, littleEndian);
-        const gpsData: any = {};
-        
-        for (let i = 0; i < numEntries; i++) {
-            const entryOffset = ifdOffset + 2 + (i * 12);
-            
-            // Bounds check for entry
-            if (entryOffset + 12 > dataView.byteLength) {
-                console.warn('IFD entry exceeds buffer bounds');
-                break;
-            }
-            
-            const tag = this.getUint16(dataView, entryOffset, littleEndian);
-            const type = this.getUint16(dataView, entryOffset + 2, littleEndian);
-            const count = this.getUint32(dataView, entryOffset + 4, littleEndian);
-            const valueOffset = entryOffset + 8;
-            
-            const value = this.getTagValue(
-                dataView,
-                tiffOffset,
-                type,
-                count,
-                valueOffset,
-                littleEndian
-            );
-            
-            const tagName = GPS_TAGS[tag];
-            if (tagName) {
-                gpsData[tagName] = value;
-            }
-        }
-        
-        // Convert GPS coordinates
-        const result: Partial<ExifData> = {};
-        
-        if (gpsData.gpsLatitude && gpsData.gpsLatitudeRef) {
-            result.gpsLatitude = this.convertGPSCoordinate(
-                gpsData.gpsLatitude,
-                gpsData.gpsLatitudeRef
-            );
-        }
-        
-        if (gpsData.gpsLongitude && gpsData.gpsLongitudeRef) {
-            result.gpsLongitude = this.convertGPSCoordinate(
-                gpsData.gpsLongitude,
-                gpsData.gpsLongitudeRef
-            );
-        }
-        
-        if (gpsData.gpsAltitude) {
-            result.gpsAltitude = gpsData.gpsAltitude;
-        }
-        
-        return result;
-    }
-
-    /**
-     * Get tag value based on type
-     */
-    private getTagValue(
-        dataView: DataView,
-        tiffOffset: number,
-        type: number,
-        count: number,
-        offset: number,
-        littleEndian: boolean
-    ): any {
-        switch (type) {
-            case 1: // BYTE
-            case 7: // UNDEFINED
-                if (count === 1) {
-                    return dataView.getUint8(offset);
-                }
-                const bytes = [];
-                for (let i = 0; i < count; i++) {
-                    bytes.push(dataView.getUint8(offset + i));
-                }
-                return bytes;
-                
-            case 2: // ASCII
-                const stringOffset = count > 4 
-                    ? tiffOffset + this.getUint32(dataView, offset, littleEndian)
-                    : offset;
-                let str = '';
-                for (let i = 0; i < count - 1; i++) {
-                    const char = dataView.getUint8(stringOffset + i);
-                    if (char === 0) break;
-                    str += String.fromCharCode(char);
-                }
-                return str;
-                
-            case 3: // SHORT
-                if (count === 1) {
-                    return this.getUint16(dataView, offset, littleEndian);
-                }
-                const shorts = [];
-                const shortOffset = count > 2
-                    ? tiffOffset + this.getUint32(dataView, offset, littleEndian)
-                    : offset;
-                for (let i = 0; i < count; i++) {
-                    shorts.push(this.getUint16(dataView, shortOffset + i * 2, littleEndian));
-                }
-                return shorts;
-                
-            case 4: // LONG
-                if (count === 1) {
-                    return this.getUint32(dataView, offset, littleEndian);
-                }
-                const longs = [];
-                const longOffset = tiffOffset + this.getUint32(dataView, offset, littleEndian);
-                for (let i = 0; i < count; i++) {
-                    longs.push(this.getUint32(dataView, longOffset + i * 4, littleEndian));
-                }
-                return longs;
-                
-            case 5: // RATIONAL
-                const ratOffset = tiffOffset + this.getUint32(dataView, offset, littleEndian);
-                if (count === 1) {
-                    const num = this.getUint32(dataView, ratOffset, littleEndian);
-                    const den = this.getUint32(dataView, ratOffset + 4, littleEndian);
-                    return den === 0 ? 0 : num / den;
-                }
-                const rationals = [];
-                for (let i = 0; i < count; i++) {
-                    const num = this.getUint32(dataView, ratOffset + i * 8, littleEndian);
-                    const den = this.getUint32(dataView, ratOffset + i * 8 + 4, littleEndian);
-                    rationals.push(den === 0 ? 0 : num / den);
-                }
-                return rationals;
-                
-            default:
-                return null;
-        }
-    }
-
-    /**
-     * Convert GPS coordinate to decimal degrees
-     */
-    private convertGPSCoordinate(coord: number[], ref: string): number {
-        if (!coord || coord.length !== 3) return 0;
-        
-        const degrees = coord[0];
-        const minutes = coord[1];
-        const seconds = coord[2];
-        
-        let decimal = degrees + minutes / 60 + seconds / 3600;
-        
-        if (ref === 'S' || ref === 'W') {
-            decimal = -decimal;
-        }
-        
-        return decimal;
-    }
-
-    /**
-     * Format EXIF data for display
-     */
-    private formatExifData(data: ExifData): ExifData {
-        const formatted: ExifData = { ...data };
-        
-        // Format dates
-        if (formatted.dateTime) {
-            formatted.dateTime = this.parseExifDate(formatted.dateTime as any);
-        }
-        if (formatted.dateTimeOriginal) {
-            formatted.dateTimeOriginal = this.parseExifDate(formatted.dateTimeOriginal as any);
-        }
-        if (formatted.dateTimeDigitized) {
-            formatted.dateTimeDigitized = this.parseExifDate(formatted.dateTimeDigitized as any);
-        }
-        
-        // Format exposure time
-        if (formatted.exposureTime) {
-            const time = formatted.exposureTime as any;
-            if (typeof time === 'number') {
-                if (time < 1) {
-                    formatted.exposureTime = `1/${Math.round(1 / time)}`;
-                } else {
-                    formatted.exposureTime = `${time}s`;
-                }
-            }
-        }
-        
-        // Format exposure program
-        if (formatted.exposureProgram) {
-            const programs = [
-                'Not defined',
-                'Manual',
-                'Normal program',
-                'Aperture priority',
-                'Shutter priority',
-                'Creative program',
-                'Action program',
-                'Portrait mode',
-                'Landscape mode'
-            ];
-            const index = formatted.exposureProgram as any;
-            formatted.exposureProgram = programs[index] || 'Unknown';
-        }
-        
-        // Format metering mode
-        if (formatted.meteringMode) {
-            const modes = [
-                'Unknown',
-                'Average',
-                'Center-weighted average',
-                'Spot',
-                'Multi-spot',
-                'Pattern',
-                'Partial'
-            ];
-            const index = formatted.meteringMode as any;
-            formatted.meteringMode = modes[index] || 'Unknown';
-        }
-        
-        // Format flash
-        if (formatted.flash !== undefined) {
-            const flash = formatted.flash as any;
-            formatted.flash = (flash & 1) ? 'Flash fired' : 'Flash did not fire';
-        }
-        
-        return formatted;
-    }
-
-    /**
-     * Parse EXIF date string
-     */
-    private parseExifDate(dateStr: string): Date {
-        // EXIF date format: "YYYY:MM:DD HH:MM:SS"
-        const parts = dateStr.split(' ');
-        if (parts.length !== 2) return new Date(dateStr);
-        
-        const dateParts = parts[0].split(':');
-        const timeParts = parts[1].split(':');
-        
-        if (dateParts.length !== 3 || timeParts.length !== 3) {
-            return new Date(dateStr);
-        }
-        
-        return new Date(
-            parseInt(dateParts[0]),
-            parseInt(dateParts[1]) - 1,
-            parseInt(dateParts[2]),
-            parseInt(timeParts[0]),
-            parseInt(timeParts[1]),
-            parseInt(timeParts[2])
-        );
-    }
-
-    /**
-     * Get uint16 with endianness and bounds checking
-     */
-    private getUint16(dataView: DataView, offset: number, littleEndian: boolean): number {
-        if (offset + 2 > dataView.byteLength) {
-            console.error('Uint16 read exceeds buffer bounds');
-            return 0;
-        }
-        return dataView.getUint16(offset, littleEndian);
-    }
-
-    /**
-     * Get uint32 with endianness and bounds checking
-     */
-    private getUint32(dataView: DataView, offset: number, littleEndian: boolean): number {
-        if (offset + 4 > dataView.byteLength) {
-            console.error('Uint32 read exceeds buffer bounds');
-            return 0;
-        }
-        return dataView.getUint32(offset, littleEndian);
-    }
-
-    /**
-     * Create EXIF display panel
-     */
-    createExifPanel(exifData: ExifData): HTMLElement {
-        const panel = document.createElement('div');
-        panel.className = 'exif-panel';
-        panel.style.cssText = `
-            background: rgba(0, 0, 0, 0.9);
-            color: white;
-            padding: 15px;
-            border-radius: 8px;
-            max-width: 400px;
-            max-height: 500px;
-            overflow-y: auto;
-            font-size: 12px;
-        `;
-
-        const sections = [
-            {
-                title: 'Camera',
-                fields: ['make', 'model', 'lensModel']
-            },
-            {
-                title: 'Settings',
-                fields: ['exposureTime', 'fNumber', 'iso', 'focalLength', 'exposureProgram', 'meteringMode', 'flash']
-            },
-            {
-                title: 'Image',
-                fields: ['imageWidth', 'imageHeight', 'orientation', 'colorSpace', 'whiteBalance']
-            },
-            {
-                title: 'Date/Time',
-                fields: ['dateTimeOriginal', 'dateTime']
-            },
-            {
-                title: 'Location',
-                fields: ['gpsLatitude', 'gpsLongitude', 'gpsAltitude']
-            },
-            {
-                title: 'Other',
-                fields: ['software', 'artist', 'copyright', 'imageDescription']
-            }
-        ];
-
-        sections.forEach(section => {
-            const hasData = section.fields.some(field => (exifData as any)[field]);
-            if (!hasData) return;
-
-            const sectionDiv = document.createElement('div');
-            sectionDiv.style.marginBottom = '15px';
-            
-            const title = document.createElement('h4');
-            // Use textContent for safe title insertion
-            title.textContent = section.title;
-            title.style.cssText = 'margin: 0 0 8px 0; color: #4CAF50;';
-            title.setAttribute('aria-label', `Section: ${section.title}`);
-            sectionDiv.appendChild(title);
-
-            section.fields.forEach(field => {
-                const value = (exifData as any)[field];
-                if (!value) return;
-
-                const row = document.createElement('div');
-                row.style.cssText = 'display: flex; justify-content: space-between; margin: 4px 0;';
-                
-                const label = document.createElement('span');
-                // Use textContent for safe text insertion
-                label.textContent = this.formatFieldName(field) + ':';
-                label.style.color = '#aaa';
-                
-                const val = document.createElement('span');
-                // Use textContent for safe value insertion  
-                val.textContent = this.formatFieldValue(field, value);
-                val.style.textAlign = 'right';
-                
-                row.appendChild(label);
-                row.appendChild(val);
-                sectionDiv.appendChild(row);
-            });
-
-            panel.appendChild(sectionDiv);
-        });
-
-        // Add GPS map link if coordinates available
-        if (exifData.gpsLatitude && exifData.gpsLongitude) {
-            const mapLink = document.createElement('a');
-            mapLink.href = `https://www.google.com/maps?q=${exifData.gpsLatitude},${exifData.gpsLongitude}`;
-            mapLink.target = '_blank';
-            mapLink.textContent = 'View on Map';
-            mapLink.style.cssText = `
-                display: inline-block;
-                margin-top: 10px;
-                padding: 8px 12px;
-                background: #4CAF50;
-                color: white;
-                text-decoration: none;
-                border-radius: 4px;
-            `;
-            panel.appendChild(mapLink);
-        }
-
-        return panel;
-    }
-
-    /**
-     * Format field name for display
-     */
-    private formatFieldName(field: string): string {
-        const names: Record<string, string> = {
-            make: 'Camera Make',
-            model: 'Camera Model',
-            lensModel: 'Lens',
-            exposureTime: 'Shutter Speed',
-            fNumber: 'Aperture',
-            iso: 'ISO',
-            focalLength: 'Focal Length',
-            exposureProgram: 'Mode',
-            meteringMode: 'Metering',
-            flash: 'Flash',
-            imageWidth: 'Width',
-            imageHeight: 'Height',
-            orientation: 'Orientation',
-            colorSpace: 'Color Space',
-            whiteBalance: 'White Balance',
-            dateTimeOriginal: 'Date Taken',
-            dateTime: 'Date Modified',
-            gpsLatitude: 'Latitude',
-            gpsLongitude: 'Longitude',
-            gpsAltitude: 'Altitude',
-            software: 'Software',
-            artist: 'Artist',
-            copyright: 'Copyright',
-            imageDescription: 'Description'
-        };
-        return names[field] || field;
-    }
-
-    /**
-     * Format field value for display
-     */
-    private formatFieldValue(field: string, value: any): string {
-        if (value instanceof Date) {
-            return value.toLocaleString();
-        }
-        
-        switch (field) {
-            case 'fNumber':
-                return `f/${value}`;
-            case 'focalLength':
-                return `${value}mm`;
-            case 'gpsLatitude':
-            case 'gpsLongitude':
-                return value.toFixed(6) + '°';
-            case 'gpsAltitude':
-                return `${value.toFixed(1)}m`;
-            case 'imageWidth':
-            case 'imageHeight':
-                return `${value}px`;
-            default:
-                return String(value);
-        }
-    }
-
-    /**
-     * Add to cache with LRU eviction
-     */
-    private addToCache(key: string, data: ExifData): void {
-        // Remove from order if exists
-        const existingIndex = this.cacheOrder.indexOf(key);
-        if (existingIndex !== -1) {
-            this.cacheOrder.splice(existingIndex, 1);
-        }
-        
-        // Add to end
-        this.cacheOrder.push(key);
-        this.exifCache.set(key, data);
-        
-        // Evict oldest if over limit
-        while (this.cacheOrder.length > this.MAX_CACHE_SIZE) {
-            const oldestKey = this.cacheOrder.shift();
-            if (oldestKey) {
-                this.exifCache.delete(oldestKey);
-            }
-        }
-    }
-    
-    /**
-     * Update cache order for LRU
-     */
-    private updateCacheOrder(key: string): void {
-        const index = this.cacheOrder.indexOf(key);
-        if (index !== -1) {
-            this.cacheOrder.splice(index, 1);
-            this.cacheOrder.push(key);
-        }
-    }
-    
-    /**
-     * Clear EXIF cache
-     */
-    clearCache(): void {
-        this.exifCache.clear();
-        this.cacheOrder = [];
-    }
-}
-
-export default ImageExifService.getInstance();

apps/client/src/services/image_sharing.ts

@@ -1,681 +0,0 @@
-/**
- * Image Sharing and Export Module for Trilium Notes
- * Provides functionality for sharing, downloading, and exporting images
- */
-
-import server from './server.js';
-import utils from './utils.js';
-import toastService from './toast.js';
-import type FNote from '../entities/fnote.js';
-import { ImageValidator, withErrorBoundary, MemoryMonitor, ImageError, ImageErrorType } from './image_error_handler.js';
-
-/**
- * Export format options
- */
-export type ExportFormat = 'original' | 'jpeg' | 'png' | 'webp';
-
-/**
- * Export size presets
- */
-export type SizePreset = 'original' | 'thumbnail' | 'small' | 'medium' | 'large' | 'custom';
-
-/**
- * Export configuration
- */
-export interface ExportConfig {
-    format: ExportFormat;
-    quality: number; // 0-100 for JPEG/WebP
-    size: SizePreset;
-    customWidth?: number;
-    customHeight?: number;
-    maintainAspectRatio: boolean;
-    addWatermark: boolean;
-    watermarkText?: string;
-    watermarkPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
-    watermarkOpacity?: number;
-}
-
-/**
- * Share options
- */
-export interface ShareOptions {
-    method: 'link' | 'email' | 'social';
-    expiresIn?: number; // Hours
-    password?: string;
-    allowDownload: boolean;
-    trackViews: boolean;
-}
-
-/**
- * Share link data
- */
-export interface ShareLink {
-    url: string;
-    shortUrl?: string;
-    expiresAt?: Date;
-    password?: string;
-    views: number;
-    maxViews?: number;
-    created: Date;
-}
-
-/**
- * Size presets in pixels
- */
-const SIZE_PRESETS = {
-    thumbnail: { width: 150, height: 150 },
-    small: { width: 400, height: 400 },
-    medium: { width: 800, height: 800 },
-    large: { width: 1600, height: 1600 }
-};
-
-/**
- * ImageSharingService handles image sharing, downloading, and exporting
- */
-class ImageSharingService {
-    private static instance: ImageSharingService;
-    private activeShares: Map<string, ShareLink> = new Map();
-    private downloadCanvas?: HTMLCanvasElement;
-    private downloadContext?: CanvasRenderingContext2D;
-    
-    // Canvas size limits for security and memory management
-    private readonly MAX_CANVAS_SIZE = 8192; // Maximum width/height
-    private readonly MAX_CANVAS_AREA = 50000000; // 50 megapixels
-
-    private defaultExportConfig: ExportConfig = {
-        format: 'original',
-        quality: 90,
-        size: 'original',
-        maintainAspectRatio: true,
-        addWatermark: false,
-        watermarkPosition: 'bottom-right',
-        watermarkOpacity: 0.5
-    };
-
-    private constructor() {
-        // Initialize download canvas
-        this.downloadCanvas = document.createElement('canvas');
-        this.downloadContext = this.downloadCanvas.getContext('2d') || undefined;
-    }
-
-    static getInstance(): ImageSharingService {
-        if (!ImageSharingService.instance) {
-            ImageSharingService.instance = new ImageSharingService();
-        }
-        return ImageSharingService.instance;
-    }
-
-    /**
-     * Download image with options
-     */
-    async downloadImage(
-        src: string,
-        filename: string,
-        config?: Partial<ExportConfig>
-    ): Promise<void> {
-        await withErrorBoundary(async () => {
-            // Validate inputs
-            ImageValidator.validateUrl(src);
-            const sanitizedFilename = ImageValidator.sanitizeFilename(filename);
-            const finalConfig = { ...this.defaultExportConfig, ...config };
-            
-            // Load image
-            const img = await this.loadImage(src);
-            
-            // Process image based on config
-            const processedBlob = await this.processImage(img, finalConfig);
-            
-            // Create download link
-            const url = URL.createObjectURL(processedBlob);
-            const link = document.createElement('a');
-            link.href = url;
-            
-            // Determine filename with extension
-            const extension = finalConfig.format === 'original' 
-                ? this.getOriginalExtension(sanitizedFilename) 
-                : finalConfig.format;
-            const finalFilename = this.ensureExtension(sanitizedFilename, extension);
-            
-            link.download = finalFilename;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            
-            // Cleanup
-            URL.revokeObjectURL(url);
-            
-            toastService.showMessage(`Downloaded ${finalFilename}`);
-        });
-    }
-
-    /**
-     * Process image according to export configuration
-     */
-    private async processImage(img: HTMLImageElement, config: ExportConfig): Promise<Blob> {
-        if (!this.downloadCanvas || !this.downloadContext) {
-            throw new Error('Canvas not initialized');
-        }
-
-        // Calculate dimensions
-        const { width, height } = this.calculateDimensions(
-            img.naturalWidth,
-            img.naturalHeight,
-            config
-        );
-
-        // Validate canvas dimensions
-        ImageValidator.validateDimensions(width, height);
-        
-        // Check memory availability
-        const estimatedMemory = MemoryMonitor.estimateImageMemory(width, height);
-        if (!MemoryMonitor.checkMemoryAvailable(estimatedMemory)) {
-            throw new ImageError(
-                ImageErrorType.MEMORY_ERROR,
-                'Insufficient memory to process image',
-                { width, height, estimatedMemory }
-            );
-        }
-        
-        // Set canvas size
-        this.downloadCanvas.width = width;
-        this.downloadCanvas.height = height;
-
-        // Clear canvas
-        this.downloadContext.fillStyle = 'white';
-        this.downloadContext.fillRect(0, 0, width, height);
-
-        // Draw image
-        this.downloadContext.drawImage(img, 0, 0, width, height);
-
-        // Add watermark if enabled
-        if (config.addWatermark && config.watermarkText) {
-            this.addWatermark(this.downloadContext, width, height, config);
-        }
-
-        // Convert to blob
-        return new Promise((resolve, reject) => {
-            const mimeType = this.getMimeType(config.format);
-            const quality = config.quality / 100;
-            
-            this.downloadCanvas!.toBlob(
-                (blob) => {
-                    if (blob) {
-                        resolve(blob);
-                    } else {
-                        reject(new Error('Failed to create blob'));
-                    }
-                },
-                mimeType,
-                quality
-            );
-        });
-    }
-
-    /**
-     * Calculate dimensions based on size preset
-     */
-    private calculateDimensions(
-        originalWidth: number,
-        originalHeight: number,
-        config: ExportConfig
-    ): { width: number; height: number } {
-        if (config.size === 'original') {
-            return { width: originalWidth, height: originalHeight };
-        }
-
-        if (config.size === 'custom' && config.customWidth && config.customHeight) {
-            if (config.maintainAspectRatio) {
-                const aspectRatio = originalWidth / originalHeight;
-                const targetRatio = config.customWidth / config.customHeight;
-                
-                if (aspectRatio > targetRatio) {
-                    return {
-                        width: config.customWidth,
-                        height: Math.round(config.customWidth / aspectRatio)
-                    };
-                } else {
-                    return {
-                        width: Math.round(config.customHeight * aspectRatio),
-                        height: config.customHeight
-                    };
-                }
-            }
-            return { width: config.customWidth, height: config.customHeight };
-        }
-
-        // Use preset
-        const preset = SIZE_PRESETS[config.size as keyof typeof SIZE_PRESETS];
-        if (!preset) {
-            return { width: originalWidth, height: originalHeight };
-        }
-
-        if (config.maintainAspectRatio) {
-            const aspectRatio = originalWidth / originalHeight;
-            const maxWidth = preset.width;
-            const maxHeight = preset.height;
-            
-            let width = originalWidth;
-            let height = originalHeight;
-            
-            if (width > maxWidth) {
-                width = maxWidth;
-                height = Math.round(width / aspectRatio);
-            }
-            
-            if (height > maxHeight) {
-                height = maxHeight;
-                width = Math.round(height * aspectRatio);
-            }
-            
-            return { width, height };
-        }
-
-        return preset;
-    }
-
-    /**
-     * Add watermark to canvas
-     */
-    private addWatermark(
-        ctx: CanvasRenderingContext2D,
-        width: number,
-        height: number,
-        config: ExportConfig
-    ): void {
-        if (!config.watermarkText) return;
-
-        ctx.save();
-        
-        // Set watermark style
-        ctx.globalAlpha = config.watermarkOpacity || 0.5;
-        ctx.fillStyle = 'white';
-        ctx.strokeStyle = 'black';
-        ctx.lineWidth = 2;
-        ctx.font = `${Math.min(width, height) * 0.05}px Arial`;
-        ctx.textAlign = 'center';
-        ctx.textBaseline = 'middle';
-
-        // Calculate position
-        let x = width / 2;
-        let y = height / 2;
-        
-        switch (config.watermarkPosition) {
-            case 'top-left':
-                x = width * 0.1;
-                y = height * 0.1;
-                ctx.textAlign = 'left';
-                break;
-            case 'top-right':
-                x = width * 0.9;
-                y = height * 0.1;
-                ctx.textAlign = 'right';
-                break;
-            case 'bottom-left':
-                x = width * 0.1;
-                y = height * 0.9;
-                ctx.textAlign = 'left';
-                break;
-            case 'bottom-right':
-                x = width * 0.9;
-                y = height * 0.9;
-                ctx.textAlign = 'right';
-                break;
-        }
-
-        // Draw watermark with outline
-        ctx.strokeText(config.watermarkText, x, y);
-        ctx.fillText(config.watermarkText, x, y);
-        
-        ctx.restore();
-    }
-
-    /**
-     * Generate shareable link for image
-     */
-    async generateShareLink(
-        noteId: string,
-        options?: Partial<ShareOptions>
-    ): Promise<ShareLink> {
-        try {
-            const finalOptions = {
-                method: 'link' as const,
-                allowDownload: true,
-                trackViews: false,
-                ...options
-            };
-
-            // Create share token on server
-            const response = await server.post(`notes/${noteId}/share`, {
-                type: 'image',
-                expiresIn: finalOptions.expiresIn,
-                password: finalOptions.password,
-                allowDownload: finalOptions.allowDownload,
-                trackViews: finalOptions.trackViews
-            });
-
-            const shareLink: ShareLink = {
-                url: `${window.location.origin}/share/${response.token}`,
-                shortUrl: response.shortUrl,
-                expiresAt: response.expiresAt ? new Date(response.expiresAt) : undefined,
-                password: finalOptions.password,
-                views: 0,
-                maxViews: response.maxViews,
-                created: new Date()
-            };
-
-            // Store in active shares
-            this.activeShares.set(response.token, shareLink);
-
-            return shareLink;
-        } catch (error) {
-            console.error('Failed to generate share link:', error);
-            throw error;
-        }
-    }
-
-    /**
-     * Copy image or link to clipboard
-     */
-    async copyToClipboard(
-        src: string,
-        type: 'image' | 'link' = 'link'
-    ): Promise<void> {
-        await withErrorBoundary(async () => {
-            // Validate URL
-            ImageValidator.validateUrl(src);
-            if (type === 'link') {
-                // Copy URL to clipboard
-                await navigator.clipboard.writeText(src);
-                toastService.showMessage('Link copied to clipboard');
-            } else {
-                // Copy image data to clipboard
-                const img = await this.loadImage(src);
-                
-                if (!this.downloadCanvas || !this.downloadContext) {
-                    throw new Error('Canvas not initialized');
-                }
-                
-                // Validate dimensions before setting
-                ImageValidator.validateDimensions(img.naturalWidth, img.naturalHeight);
-                
-                this.downloadCanvas.width = img.naturalWidth;
-                this.downloadCanvas.height = img.naturalHeight;
-                this.downloadContext.drawImage(img, 0, 0);
-                
-                this.downloadCanvas.toBlob(async (blob) => {
-                    if (blob) {
-                        try {
-                            const item = new ClipboardItem({ 'image/png': blob });
-                            await navigator.clipboard.write([item]);
-                            toastService.showMessage('Image copied to clipboard');
-                        } catch (error) {
-                            console.error('Failed to copy image to clipboard:', error);
-                            // Fallback to copying link
-                            await navigator.clipboard.writeText(src);
-                            toastService.showMessage('Image link copied to clipboard');
-                        }
-                    }
-                });
-            }
-        });
-    }
-
-    /**
-     * Share via native share API (mobile)
-     */
-    async shareNative(
-        src: string,
-        title: string,
-        text?: string
-    ): Promise<void> {
-        if (!navigator.share) {
-            throw new Error('Native share not supported');
-        }
-
-        try {
-            // Try to share with file
-            const img = await this.loadImage(src);
-            const blob = await this.processImage(img, this.defaultExportConfig);
-            const file = new File([blob], `${title}.${this.defaultExportConfig.format}`, {
-                type: this.getMimeType(this.defaultExportConfig.format)
-            });
-
-            await navigator.share({
-                title,
-                text: text || `Check out this image: ${title}`,
-                files: [file]
-            });
-        } catch (error) {
-            // Fallback to sharing URL
-            try {
-                await navigator.share({
-                    title,
-                    text: text || `Check out this image: ${title}`,
-                    url: src
-                });
-            } catch (shareError) {
-                console.error('Failed to share:', shareError);
-                throw shareError;
-            }
-        }
-    }
-
-    /**
-     * Export multiple images as ZIP
-     */
-    async exportBatch(
-        images: Array<{ src: string; filename: string }>,
-        config?: Partial<ExportConfig>
-    ): Promise<void> {
-        try {
-            // Dynamic import of JSZip
-            const JSZip = (await import('jszip')).default;
-            const zip = new JSZip();
-            
-            const finalConfig = { ...this.defaultExportConfig, ...config };
-            
-            // Process each image
-            for (const { src, filename } of images) {
-                try {
-                    const img = await this.loadImage(src);
-                    const blob = await this.processImage(img, finalConfig);
-                    const extension = finalConfig.format === 'original' 
-                        ? this.getOriginalExtension(filename) 
-                        : finalConfig.format;
-                    const finalFilename = this.ensureExtension(filename, extension);
-                    
-                    zip.file(finalFilename, blob);
-                } catch (error) {
-                    console.error(`Failed to process image ${filename}:`, error);
-                }
-            }
-            
-            // Generate and download ZIP
-            const zipBlob = await zip.generateAsync({ type: 'blob' });
-            const url = URL.createObjectURL(zipBlob);
-            const link = document.createElement('a');
-            link.href = url;
-            link.download = `images_${Date.now()}.zip`;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-            URL.revokeObjectURL(url);
-            
-            toastService.showMessage(`Exported ${images.length} images`);
-        } catch (error) {
-            console.error('Failed to export images:', error);
-            toastService.showError('Failed to export images');
-            throw error;
-        }
-    }
-
-    /**
-     * Open share dialog
-     */
-    openShareDialog(
-        src: string,
-        title: string,
-        noteId?: string
-    ): void {
-        // Create modal dialog
-        const dialog = document.createElement('div');
-        dialog.className = 'share-dialog-overlay';
-        dialog.style.cssText = `
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0, 0, 0, 0.5);
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            z-index: 10000;
-        `;
-
-        const content = document.createElement('div');
-        content.className = 'share-dialog';
-        content.style.cssText = `
-            background: white;
-            border-radius: 8px;
-            padding: 20px;
-            width: 400px;
-            max-width: 90%;
-        `;
-
-        content.innerHTML = `
-            <h3 style="margin: 0 0 15px 0;">Share Image</h3>
-            <div class="share-options" style="display: flex; flex-direction: column; gap: 10px;">
-                <button class="share-copy-link" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">
-                    <i class="bx bx-link"></i> Copy Link
-                </button>
-                <button class="share-copy-image" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">
-                    <i class="bx bx-copy"></i> Copy Image
-                </button>
-                <button class="share-download" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">
-                    <i class="bx bx-download"></i> Download
-                </button>
-                ${navigator.share ? `
-                    <button class="share-native" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">
-                        <i class="bx bx-share"></i> Share...
-                    </button>
-                ` : ''}
-                ${noteId ? `
-                    <button class="share-generate-link" style="padding: 10px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer;">
-                        <i class="bx bx-link-external"></i> Generate Share Link
-                    </button>
-                ` : ''}
-            </div>
-            <button class="close-dialog" style="margin-top: 15px; padding: 8px 16px; background: #f0f0f0; border: none; border-radius: 4px; cursor: pointer;">
-                Close
-            </button>
-        `;
-
-        // Add event handlers
-        content.querySelector('.share-copy-link')?.addEventListener('click', () => {
-            this.copyToClipboard(src, 'link');
-            dialog.remove();
-        });
-
-        content.querySelector('.share-copy-image')?.addEventListener('click', () => {
-            this.copyToClipboard(src, 'image');
-            dialog.remove();
-        });
-
-        content.querySelector('.share-download')?.addEventListener('click', () => {
-            this.downloadImage(src, title);
-            dialog.remove();
-        });
-
-        content.querySelector('.share-native')?.addEventListener('click', () => {
-            this.shareNative(src, title);
-            dialog.remove();
-        });
-
-        content.querySelector('.share-generate-link')?.addEventListener('click', async () => {
-            if (noteId) {
-                const link = await this.generateShareLink(noteId);
-                await this.copyToClipboard(link.url, 'link');
-                dialog.remove();
-            }
-        });
-
-        content.querySelector('.close-dialog')?.addEventListener('click', () => {
-            dialog.remove();
-        });
-
-        dialog.appendChild(content);
-        document.body.appendChild(dialog);
-    }
-
-    /**
-     * Load image from URL
-     */
-    private loadImage(src: string): Promise<HTMLImageElement> {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            img.crossOrigin = 'anonymous';
-            img.onload = () => resolve(img);
-            img.onerror = () => reject(new Error(`Failed to load image: ${src}`));
-            img.src = src;
-        });
-    }
-
-    /**
-     * Get MIME type for format
-     */
-    private getMimeType(format: ExportFormat): string {
-        switch (format) {
-            case 'jpeg':
-                return 'image/jpeg';
-            case 'png':
-                return 'image/png';
-            case 'webp':
-                return 'image/webp';
-            default:
-                return 'image/png';
-        }
-    }
-
-    /**
-     * Get original extension from filename
-     */
-    private getOriginalExtension(filename: string): string {
-        const parts = filename.split('.');
-        if (parts.length > 1) {
-            return parts[parts.length - 1].toLowerCase();
-        }
-        return 'png';
-    }
-
-    /**
-     * Ensure filename has correct extension
-     */
-    private ensureExtension(filename: string, extension: string): string {
-        const parts = filename.split('.');
-        if (parts.length > 1) {
-            parts[parts.length - 1] = extension;
-            return parts.join('.');
-        }
-        return `${filename}.${extension}`;
-    }
-
-    /**
-     * Cleanup resources
-     */
-    cleanup(): void {
-        this.activeShares.clear();
-        
-        // Clean up canvas memory
-        if (this.downloadCanvas && this.downloadContext) {
-            this.downloadContext.clearRect(0, 0, this.downloadCanvas.width, this.downloadCanvas.height);
-            this.downloadCanvas.width = 0;
-            this.downloadCanvas.height = 0;
-        }
-        
-        this.downloadCanvas = undefined;
-        this.downloadContext = undefined;
-    }
-}
-
-export default ImageSharingService.getInstance();

apps/client/src/services/load_results.ts

@@ -1,4 +1,4 @@
-import type { AttachmentRow } from "@triliumnext/commons";
+import type { AttachmentRow, EtapiTokenRow } from "@triliumnext/commons";
 import type { AttributeType } from "../entities/fattribute.js";
 import type { EntityChange } from "../server_types.js";
 
@@ -53,6 +53,7 @@ type EntityRowMappings = {
     options: OptionRow;
     revisions: RevisionRow;
     note_reordering: NoteReorderingRow;
+    etapi_tokens: EtapiTokenRow;
 };
 
 export type EntityRowNames = keyof EntityRowMappings;
@@ -68,6 +69,7 @@ export default class LoadResults {
     private contentNoteIdToComponentId: ContentNoteIdToComponentIdRow[];
     private optionNames: string[];
     private attachmentRows: AttachmentRow[];
+    public hasEtapiTokenChanges: boolean = false;
 
     constructor(entityChanges: EntityChange[]) {
         const entities: Record<string, Record<string, any>> = {};
@@ -215,7 +217,8 @@ export default class LoadResults {
             this.revisionRows.length === 0 &&
             this.contentNoteIdToComponentId.length === 0 &&
             this.optionNames.length === 0 &&
-            this.attachmentRows.length === 0
+            this.attachmentRows.length === 0 &&
+            !this.hasEtapiTokenChanges
         );
     }
 

apps/client/src/services/media_viewer.ts

@@ -1,552 +0,0 @@
-import PhotoSwipe from 'photoswipe';
-import type PhotoSwipeOptions from 'photoswipe';
-import type { DataSource, SlideData } from 'photoswipe';
-import 'photoswipe/style.css';
-import '../styles/photoswipe-mobile-a11y.css';
-import mobileA11yService, { type MobileA11yConfig } from './photoswipe_mobile_a11y.js';
-
-// Define Content type locally since it's not exported by PhotoSwipe
-interface Content {
-    width?: number;
-    height?: number;
-    [key: string]: any;
-}
-
-// Define AugmentedEvent type locally
-interface AugmentedEvent<T extends string> {
-    content: Content;
-    slide?: any;
-    preventDefault?: () => void;
-    [key: string]: any;
-}
-
-/**
- * Media item interface for PhotoSwipe gallery
- */
-export interface MediaItem {
-    src: string;
-    width?: number;
-    height?: number;
-    alt?: string;
-    title?: string;
-    noteId?: string;
-    element?: HTMLElement;
-    msrc?: string; // Thumbnail source
-}
-
-/**
- * Configuration options for the media viewer
- */
-export interface MediaViewerConfig {
-    bgOpacity?: number;
-    showHideOpacity?: boolean;
-    showAnimationDuration?: number;
-    hideAnimationDuration?: number;
-    allowPanToNext?: boolean;
-    spacing?: number;
-    maxSpreadZoom?: number;
-    getThumbBoundsFn?: (index: number) => { x: number; y: number; w: number } | undefined;
-    pinchToClose?: boolean;
-    closeOnScroll?: boolean;
-    closeOnVerticalDrag?: boolean;
-    mouseMovePan?: boolean;
-    arrowKeys?: boolean;
-    returnFocus?: boolean;
-    escKey?: boolean;
-    errorMsg?: string;
-    preloadFirstSlide?: boolean;
-    preload?: [number, number];
-    loop?: boolean;
-    wheelToZoom?: boolean;
-    mobileA11y?: MobileA11yConfig; // Mobile and accessibility configuration
-}
-
-/**
- * Event callbacks for media viewer
- */
-export interface MediaViewerCallbacks {
-    onOpen?: () => void;
-    onClose?: () => void;
-    onChange?: (index: number) => void;
-    onImageLoad?: (index: number, item: MediaItem) => void;
-    onImageError?: (index: number, item: MediaItem, error?: Error) => void;
-}
-
-/**
- * PhotoSwipe data item with original item reference
- */
-interface PhotoSwipeDataItem extends SlideData {
-    _originalItem?: MediaItem;
-}
-
-/**
- * Error handler for media viewer operations
- */
-class MediaViewerError extends Error {
-    constructor(message: string, public readonly cause?: unknown) {
-        super(message);
-        this.name = 'MediaViewerError';
-    }
-}
-
-/**
- * MediaViewerService manages the PhotoSwipe lightbox for viewing images and media
- * in Trilium Notes. Implements singleton pattern for global access.
- */
-class MediaViewerService {
-    private static instance: MediaViewerService;
-    private photoSwipe: PhotoSwipe | null = null;
-    private defaultConfig: MediaViewerConfig;
-    private currentItems: MediaItem[] = [];
-    private callbacks: MediaViewerCallbacks = {};
-    private cleanupHandlers: Array<() => void> = [];
-
-    private constructor() {
-        // Default configuration optimized for Trilium
-        this.defaultConfig = {
-            bgOpacity: 0.95,
-            showHideOpacity: true,
-            showAnimationDuration: 250,
-            hideAnimationDuration: 250,
-            allowPanToNext: true,
-            spacing: 0.12,
-            maxSpreadZoom: 4,
-            pinchToClose: true,
-            closeOnScroll: false,
-            closeOnVerticalDrag: true,
-            mouseMovePan: true,
-            arrowKeys: true,
-            returnFocus: true,
-            escKey: true,
-            errorMsg: 'The image could not be loaded',
-            preloadFirstSlide: true,
-            preload: [1, 2],
-            loop: true,
-            wheelToZoom: true
-        };
-
-        // Setup global cleanup on window unload
-        window.addEventListener('beforeunload', () => this.destroy());
-    }
-
-    /**
-     * Get singleton instance of MediaViewerService
-     */
-    static getInstance(): MediaViewerService {
-        if (!MediaViewerService.instance) {
-            MediaViewerService.instance = new MediaViewerService();
-        }
-        return MediaViewerService.instance;
-    }
-
-    /**
-     * Open the media viewer with specified items
-     */
-    open(items: MediaItem[], startIndex: number = 0, config?: Partial<MediaViewerConfig>, callbacks?: MediaViewerCallbacks): void {
-        try {
-            // Validate inputs
-            if (!items || items.length === 0) {
-                throw new MediaViewerError('No items provided to media viewer');
-            }
-            
-            if (startIndex < 0 || startIndex >= items.length) {
-                console.warn(`Invalid start index ${startIndex}, using 0`);
-                startIndex = 0;
-            }
-
-            // Close any existing viewer
-            this.close();
-
-            this.currentItems = items;
-            this.callbacks = callbacks || {};
-
-            // Prepare data source for PhotoSwipe with error handling
-            const dataSource: DataSource = items.map((item, index) => {
-                try {
-                    return this.prepareItem(item);
-                } catch (error) {
-                    console.error(`Failed to prepare item at index ${index}:`, error);
-                    // Return a minimal valid item as fallback
-                    return {
-                        src: item.src,
-                        width: 800,
-                        height: 600,
-                        alt: item.alt || 'Error loading image'
-                    } as PhotoSwipeDataItem;
-                }
-            });
-
-            // Merge configurations
-            const finalConfig = {
-                ...this.defaultConfig,
-                ...config,
-                dataSource,
-                index: startIndex,
-                errorMsg: config?.errorMsg || 'The image could not be loaded. Please try again.'
-            };
-
-            // Create and initialize PhotoSwipe
-            this.photoSwipe = new PhotoSwipe(finalConfig);
-
-            // Setup event handlers
-            this.setupEventHandlers();
-            
-            // Apply mobile and accessibility enhancements
-            if (config?.mobileA11y || this.shouldAutoEnhance()) {
-                mobileA11yService.enhancePhotoSwipe(this.photoSwipe, config?.mobileA11y);
-            }
-
-            // Initialize the viewer
-            this.photoSwipe.init();
-        } catch (error) {
-            console.error('Failed to open media viewer:', error);
-            // Cleanup on error
-            this.close();
-            // Re-throw as MediaViewerError
-            throw error instanceof MediaViewerError ? error : new MediaViewerError('Failed to open media viewer', error);
-        }
-    }
-
-    /**
-     * Open a single image in the viewer
-     */
-    openSingle(item: MediaItem, config?: Partial<MediaViewerConfig>, callbacks?: MediaViewerCallbacks): void {
-        this.open([item], 0, config, callbacks);
-    }
-
-    /**
-     * Close the media viewer
-     */
-    close(): void {
-        if (this.photoSwipe) {
-            this.photoSwipe.destroy();
-            this.photoSwipe = null;
-            this.cleanupEventHandlers();
-        }
-    }
-
-    /**
-     * Navigate to next item
-     */
-    next(): void {
-        if (this.photoSwipe) {
-            this.photoSwipe.next();
-        }
-    }
-
-    /**
-     * Navigate to previous item
-     */
-    prev(): void {
-        if (this.photoSwipe) {
-            this.photoSwipe.prev();
-        }
-    }
-
-    /**
-     * Go to specific slide by index
-     */
-    goTo(index: number): void {
-        if (this.photoSwipe && index >= 0 && index < this.currentItems.length) {
-            this.photoSwipe.goTo(index);
-        }
-    }
-
-    /**
-     * Get current slide index
-     */
-    getCurrentIndex(): number {
-        return this.photoSwipe ? this.photoSwipe.currIndex : -1;
-    }
-
-    /**
-     * Check if viewer is open
-     */
-    isOpen(): boolean {
-        return this.photoSwipe !== null;
-    }
-
-    /**
-     * Update configuration dynamically
-     */
-    updateConfig(config: Partial<MediaViewerConfig>): void {
-        this.defaultConfig = {
-            ...this.defaultConfig,
-            ...config
-        };
-    }
-
-    /**
-     * Prepare item for PhotoSwipe
-     */
-    private prepareItem(item: MediaItem): PhotoSwipeDataItem {
-        const prepared: PhotoSwipeDataItem = {
-            src: item.src,
-            alt: item.alt || '',
-            title: item.title
-        };
-
-        // If dimensions are provided, use them
-        if (item.width && item.height) {
-            prepared.width = item.width;
-            prepared.height = item.height;
-        } else {
-            // Default dimensions - will be updated when image loads
-            prepared.width = 0;
-            prepared.height = 0;
-        }
-
-        // Add thumbnail if provided
-        if (item.msrc) {
-            prepared.msrc = item.msrc;
-        }
-
-        // Store original item reference
-        prepared._originalItem = item;
-
-        return prepared;
-    }
-
-    /**
-     * Setup event handlers for PhotoSwipe
-     */
-    private setupEventHandlers(): void {
-        if (!this.photoSwipe) return;
-
-        // Opening event
-        const openHandler = () => {
-            if (this.callbacks.onOpen) {
-                this.callbacks.onOpen();
-            }
-        };
-        this.photoSwipe.on('openingAnimationEnd', openHandler);
-        this.cleanupHandlers.push(() => this.photoSwipe?.off('openingAnimationEnd', openHandler));
-
-        // Closing event
-        const closeHandler = () => {
-            if (this.callbacks.onClose) {
-                this.callbacks.onClose();
-            }
-        };
-        this.photoSwipe.on('close', closeHandler);
-        this.cleanupHandlers.push(() => this.photoSwipe?.off('close', closeHandler));
-
-        // Change event
-        const changeHandler = () => {
-            if (this.callbacks.onChange && this.photoSwipe) {
-                this.callbacks.onChange(this.photoSwipe.currIndex);
-            }
-        };
-        this.photoSwipe.on('change', changeHandler);
-        this.cleanupHandlers.push(() => this.photoSwipe?.off('change', changeHandler));
-
-        // Image load event - also update dimensions if needed
-        const loadCompleteHandler = (e: any) => {
-            try {
-                const { content } = e;
-                const extContent = content as Content & { type?: string; data?: HTMLImageElement; index?: number; _originalItem?: MediaItem };
-                
-                if (extContent.type === 'image' && extContent.data) {
-                    // Update dimensions if they were not provided
-                    if (content.width === 0 || content.height === 0) {
-                        const img = extContent.data;
-                        content.width = img.naturalWidth;
-                        content.height = img.naturalHeight;
-                        if (typeof extContent.index === 'number') {
-                            this.photoSwipe?.refreshSlideContent(extContent.index);
-                        }
-                    }
-
-                    if (this.callbacks.onImageLoad && typeof extContent.index === 'number' && extContent._originalItem) {
-                        this.callbacks.onImageLoad(extContent.index, extContent._originalItem);
-                    }
-                }
-            } catch (error) {
-                console.error('Error in loadComplete handler:', error);
-            }
-        };
-        this.photoSwipe.on('loadComplete', loadCompleteHandler);
-        this.cleanupHandlers.push(() => this.photoSwipe?.off('loadComplete', loadCompleteHandler));
-
-        // Image error event
-        const errorHandler = (e: any) => {
-            try {
-                const { content } = e;
-                const extContent = content as Content & { index?: number; _originalItem?: MediaItem };
-                
-                if (this.callbacks.onImageError && typeof extContent.index === 'number' && extContent._originalItem) {
-                    const error = new MediaViewerError(`Failed to load image at index ${extContent.index}`);
-                    this.callbacks.onImageError(extContent.index, extContent._originalItem, error);
-                }
-            } catch (error) {
-                console.error('Error in errorHandler:', error);
-            }
-        };
-        this.photoSwipe.on('loadError', errorHandler);
-        this.cleanupHandlers.push(() => this.photoSwipe?.off('loadError', errorHandler));
-    }
-
-    /**
-     * Cleanup event handlers
-     */
-    private cleanupEventHandlers(): void {
-        this.cleanupHandlers.forEach(handler => handler());
-        this.cleanupHandlers = [];
-    }
-
-    /**
-     * Destroy the service and cleanup resources
-     */
-    destroy(): void {
-        this.close();
-        this.currentItems = [];
-        this.callbacks = {};
-        
-        // Cleanup mobile and accessibility enhancements
-        mobileA11yService.cleanup();
-    }
-
-    /**
-     * Get dimensions from image element or URL with proper resource cleanup
-     */
-    async getImageDimensions(src: string): Promise<{ width: number; height: number }> {
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            let resolved = false;
-            
-            const cleanup = () => {
-                img.onload = null;
-                img.onerror = null;
-                // Clear the src to help with garbage collection
-                if (!resolved) {
-                    img.src = '';
-                }
-            };
-            
-            img.onload = () => {
-                resolved = true;
-                const dimensions = {
-                    width: img.naturalWidth,
-                    height: img.naturalHeight
-                };
-                cleanup();
-                resolve(dimensions);
-            };
-            
-            img.onerror = () => {
-                const error = new MediaViewerError(`Failed to load image: ${src}`);
-                cleanup();
-                reject(error);
-            };
-            
-            // Set a timeout for image loading
-            const timeoutId = setTimeout(() => {
-                if (!resolved) {
-                    cleanup();
-                    reject(new MediaViewerError(`Image loading timeout: ${src}`));
-                }
-            }, 30000); // 30 second timeout
-            
-            img.src = src;
-            
-            // Clear timeout on success or error
-            // Store the original handlers with timeout cleanup
-            const originalOnload = img.onload;
-            const originalOnerror = img.onerror;
-            
-            img.onload = function(ev: Event) {
-                clearTimeout(timeoutId);
-                if (originalOnload) {
-                    originalOnload.call(img, ev);
-                }
-            };
-            
-            img.onerror = function(ev: Event | string) {
-                clearTimeout(timeoutId);
-                if (originalOnerror) {
-                    originalOnerror.call(img, ev);
-                }
-            };
-        });
-    }
-
-    /**
-     * Create items from image elements in a container with error isolation
-     */
-    async createItemsFromContainer(container: HTMLElement, selector: string = 'img'): Promise<MediaItem[]> {
-        const images = container.querySelectorAll<HTMLImageElement>(selector);
-        const items: MediaItem[] = [];
-
-        // Process each image with isolated error handling
-        const promises = Array.from(images).map(async (img) => {
-            try {
-                const item: MediaItem = {
-                    src: img.src,
-                    alt: img.alt || `Image ${items.length + 1}`,
-                    title: img.title || img.alt || `Image ${items.length + 1}`,
-                    element: img,
-                    width: img.naturalWidth || undefined,
-                    height: img.naturalHeight || undefined
-                };
-
-                // Try to get dimensions if not available
-                if (!item.width || !item.height) {
-                    try {
-                        const dimensions = await this.getImageDimensions(img.src);
-                        item.width = dimensions.width;
-                        item.height = dimensions.height;
-                    } catch (error) {
-                        // Log but don't fail - image will still be viewable
-                        console.warn(`Failed to get dimensions for image: ${img.src}`, error);
-                        // Set default dimensions as fallback
-                        item.width = 800;
-                        item.height = 600;
-                    }
-                }
-
-                return item;
-            } catch (error) {
-                // Log error but continue processing other images
-                console.error(`Failed to process image: ${img.src}`, error);
-                return null;
-            }
-        });
-
-        // Wait for all promises and filter out nulls
-        const results = await Promise.allSettled(promises);
-        for (const result of results) {
-            if (result.status === 'fulfilled' && result.value !== null) {
-                items.push(result.value);
-            }
-        }
-
-        return items;
-    }
-
-    /**
-     * Apply theme-specific styles
-     */
-    applyTheme(isDarkTheme: boolean): void {
-        // This will be expanded to modify PhotoSwipe's appearance based on Trilium's theme
-        const opacity = isDarkTheme ? 0.95 : 0.9;
-        this.updateConfig({ bgOpacity: opacity });
-    }
-    
-    /**
-     * Check if mobile/accessibility enhancements should be auto-enabled
-     */
-    private shouldAutoEnhance(): boolean {
-        // Auto-enable for touch devices
-        const isTouchDevice = 'ontouchstart' in window || 
-                             navigator.maxTouchPoints > 0;
-        
-        // Auto-enable if user has accessibility preferences
-        const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-        const prefersHighContrast = window.matchMedia('(prefers-contrast: high)').matches;
-        
-        return isTouchDevice || prefersReducedMotion || prefersHighContrast;
-    }
-}
-
-// Export singleton instance
-export default MediaViewerService.getInstance();

apps/client/src/services/options.ts

@@ -1,7 +1,8 @@
+import { OptionNames } from "@triliumnext/commons";
 import server from "./server.js";
 import { isShare } from "./utils.js";
 
-type OptionValue = number | string;
+export type OptionValue = number | string;
 
 class Options {
     initializedPromise: Promise<void>;
@@ -76,6 +77,14 @@ class Options {
         await server.put(`options`, payload);
     }
 
+    /**
+     * Saves multiple options at once, by supplying a record where the keys are the option names and the values represent the stringified value to set.
+     * @param newValues the record of keys and values.
+     */
+    async saveMany<T extends OptionNames>(newValues: Record<T, OptionValue>) {
+        await server.put<void>("options", newValues);
+    }
+
     async toggle(key: string) {
         await this.save(key, (!this.is(key)).toString());
     }

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

@@ -1,541 +0,0 @@
-/**
- * Tests for PhotoSwipe Mobile & Accessibility Enhancement Module
- */
-
-import { describe, it, expect, beforeEach, afterEach, jest } from '@jest/globals';
-import type PhotoSwipe from 'photoswipe';
-import mobileA11yService from './photoswipe_mobile_a11y.js';
-
-// Mock PhotoSwipe
-const mockPhotoSwipe = {
-    template: document.createElement('div'),
-    currSlide: {
-        currZoomLevel: 1,
-        zoomTo: jest.fn(),
-        data: {
-            src: 'test.jpg',
-            alt: 'Test image',
-            title: 'Test',
-            width: 800,
-            height: 600
-        }
-    },
-    currIndex: 0,
-    viewportSize: { x: 800, y: 600 },
-    ui: { toggle: jest.fn() },
-    next: jest.fn(),
-    prev: jest.fn(),
-    goTo: jest.fn(),
-    close: jest.fn(),
-    getNumItems: () => 5,
-    on: jest.fn(),
-    off: jest.fn(),
-    options: {
-        showAnimationDuration: 250,
-        hideAnimationDuration: 250
-    }
-} as unknown as PhotoSwipe;
-
-describe('PhotoSwipeMobileA11yService', () => {
-    beforeEach(() => {
-        // Reset DOM
-        document.body.innerHTML = '';
-        
-        // Reset mocks
-        jest.clearAllMocks();
-    });
-    
-    afterEach(() => {
-        // Cleanup
-        mobileA11yService.cleanup();
-    });
-    
-    describe('Device Capabilities Detection', () => {
-        it('should detect touch device capabilities', () => {
-            // Add touch support to window
-            Object.defineProperty(window, 'ontouchstart', {
-                value: () => {},
-                writable: true
-            });
-            
-            // Service should detect touch support on initialization
-            const service = mobileA11yService;
-            expect(service).toBeDefined();
-        });
-        
-        it('should detect accessibility preferences', () => {
-            // Mock matchMedia for reduced motion
-            const mockMatchMedia = jest.fn().mockImplementation(query => ({
-                matches: query === '(prefers-reduced-motion: reduce)',
-                media: query,
-                addListener: jest.fn(),
-                removeListener: jest.fn()
-            }));
-            
-            Object.defineProperty(window, 'matchMedia', {
-                value: mockMatchMedia,
-                writable: true
-            });
-            
-            const service = mobileA11yService;
-            expect(service).toBeDefined();
-        });
-    });
-    
-    describe('ARIA Live Region', () => {
-        it('should create ARIA live region for announcements', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const liveRegion = document.querySelector('[aria-live]');
-            expect(liveRegion).toBeTruthy();
-            expect(liveRegion?.getAttribute('aria-live')).toBe('polite');
-            expect(liveRegion?.getAttribute('role')).toBe('status');
-        });
-        
-        it('should announce changes to screen readers', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe, {
-                a11y: {
-                    enableScreenReaderAnnouncements: true
-                }
-            });
-            
-            const liveRegion = document.querySelector('[aria-live]');
-            
-            // Trigger navigation
-            const changeHandler = (mockPhotoSwipe.on as jest.Mock).mock.calls
-                .find(call => call[0] === 'change')?.[1];
-            
-            if (changeHandler) {
-                changeHandler();
-                
-                // Check if announcement was made
-                expect(liveRegion?.textContent).toContain('Image 1 of 5');
-            }
-        });
-    });
-    
-    describe('Keyboard Navigation', () => {
-        it('should handle arrow key navigation', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            // Simulate arrow key presses
-            const leftArrow = new KeyboardEvent('keydown', { key: 'ArrowLeft' });
-            const rightArrow = new KeyboardEvent('keydown', { key: 'ArrowRight' });
-            
-            document.dispatchEvent(leftArrow);
-            expect(mockPhotoSwipe.prev).toHaveBeenCalled();
-            
-            document.dispatchEvent(rightArrow);
-            expect(mockPhotoSwipe.next).toHaveBeenCalled();
-        });
-        
-        it('should handle zoom with arrow keys', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const upArrow = new KeyboardEvent('keydown', { key: 'ArrowUp' });
-            const downArrow = new KeyboardEvent('keydown', { key: 'ArrowDown' });
-            
-            document.dispatchEvent(upArrow);
-            expect(mockPhotoSwipe.currSlide?.zoomTo).toHaveBeenCalledWith(
-                expect.any(Number),
-                expect.any(Object),
-                333
-            );
-            
-            document.dispatchEvent(downArrow);
-            expect(mockPhotoSwipe.currSlide?.zoomTo).toHaveBeenCalledTimes(2);
-        });
-        
-        it('should show keyboard help on ? key', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const helpKey = new KeyboardEvent('keydown', { key: '?' });
-            document.dispatchEvent(helpKey);
-            
-            const helpDialog = document.querySelector('.photoswipe-keyboard-help');
-            expect(helpDialog).toBeTruthy();
-            expect(helpDialog?.getAttribute('role')).toBe('dialog');
-        });
-        
-        it('should support quick navigation with number keys', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const key3 = new KeyboardEvent('keydown', { key: '3' });
-            document.dispatchEvent(key3);
-            
-            expect(mockPhotoSwipe.goTo).toHaveBeenCalledWith(2); // 0-indexed
-        });
-    });
-    
-    describe('Touch Gestures', () => {
-        it('should handle pinch to zoom', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const element = mockPhotoSwipe.template;
-            
-            // Simulate pinch gesture
-            const touch1 = { clientX: 100, clientY: 100, identifier: 0 };
-            const touch2 = { clientX: 200, clientY: 200, identifier: 1 };
-            
-            const touchStart = new TouchEvent('touchstart', {
-                touches: [touch1, touch2] as any
-            });
-            
-            element?.dispatchEvent(touchStart);
-            
-            // Move touches apart (zoom in)
-            const touch1Move = { clientX: 50, clientY: 50, identifier: 0 };
-            const touch2Move = { clientX: 250, clientY: 250, identifier: 1 };
-            
-            const touchMove = new TouchEvent('touchmove', {
-                touches: [touch1Move, touch2Move] as any
-            });
-            
-            element?.dispatchEvent(touchMove);
-            
-            // Zoom should be triggered
-            expect(mockPhotoSwipe.currSlide?.zoomTo).toHaveBeenCalled();
-        });
-        
-        it('should handle double tap to zoom', (done) => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const element = mockPhotoSwipe.template;
-            const pos = { clientX: 400, clientY: 300 };
-            
-            // First tap
-            const firstTap = new TouchEvent('touchend', {
-                changedTouches: [{ ...pos, identifier: 0 }] as any
-            });
-            
-            element?.dispatchEvent(new TouchEvent('touchstart', {
-                touches: [{ ...pos, identifier: 0 }] as any
-            }));
-            element?.dispatchEvent(firstTap);
-            
-            // Second tap within double tap delay
-            setTimeout(() => {
-                element?.dispatchEvent(new TouchEvent('touchstart', {
-                    touches: [{ ...pos, identifier: 0 }] as any
-                }));
-                
-                const secondTap = new TouchEvent('touchend', {
-                    changedTouches: [{ ...pos, identifier: 0 }] as any
-                });
-                element?.dispatchEvent(secondTap);
-                
-                // Check zoom was triggered
-                expect(mockPhotoSwipe.currSlide?.zoomTo).toHaveBeenCalled();
-                done();
-            }, 100);
-        });
-        
-        it('should detect swipe gestures', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const element = mockPhotoSwipe.template;
-            
-            // Simulate swipe left
-            const touchStart = new TouchEvent('touchstart', {
-                touches: [{ clientX: 300, clientY: 300, identifier: 0 }] as any
-            });
-            
-            const touchEnd = new TouchEvent('touchend', {
-                changedTouches: [{ clientX: 100, clientY: 300, identifier: 0 }] as any
-            });
-            
-            element?.dispatchEvent(touchStart);
-            element?.dispatchEvent(touchEnd);
-            
-            // Should navigate to next image
-            expect(mockPhotoSwipe.next).toHaveBeenCalled();
-        });
-    });
-    
-    describe('Focus Management', () => {
-        it('should trap focus within gallery', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const element = mockPhotoSwipe.template;
-            
-            // Add focusable elements
-            const button1 = document.createElement('button');
-            const button2 = document.createElement('button');
-            element?.appendChild(button1);
-            element?.appendChild(button2);
-            
-            // Focus first button
-            button1.focus();
-            
-            // Simulate Tab on last focusable element
-            const tabEvent = new KeyboardEvent('keydown', {
-                key: 'Tab',
-                shiftKey: false
-            });
-            
-            button2.focus();
-            element?.dispatchEvent(tabEvent);
-            
-            // Focus should wrap to first element
-            expect(document.activeElement).toBe(button1);
-        });
-        
-        it('should restore focus on close', () => {
-            const originalFocus = document.createElement('button');
-            document.body.appendChild(originalFocus);
-            originalFocus.focus();
-            
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            // Trigger close handler
-            const closeHandler = (mockPhotoSwipe.on as jest.Mock).mock.calls
-                .find(call => call[0] === 'close')?.[1];
-            
-            if (closeHandler) {
-                closeHandler();
-                
-                // Focus should be restored
-                expect(document.activeElement).toBe(originalFocus);
-            }
-        });
-    });
-    
-    describe('ARIA Attributes', () => {
-        it('should add proper ARIA attributes to gallery', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const element = mockPhotoSwipe.template;
-            
-            expect(element?.getAttribute('role')).toBe('dialog');
-            expect(element?.getAttribute('aria-label')).toContain('Image gallery');
-            expect(element?.getAttribute('aria-modal')).toBe('true');
-        });
-        
-        it('should label controls for screen readers', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const element = mockPhotoSwipe.template;
-            
-            // Add mock controls
-            const prevBtn = document.createElement('button');
-            prevBtn.className = 'pswp__button--arrow--prev';
-            element?.appendChild(prevBtn);
-            
-            const nextBtn = document.createElement('button');
-            nextBtn.className = 'pswp__button--arrow--next';
-            element?.appendChild(nextBtn);
-            
-            // Enhance again to label the newly added controls
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            expect(prevBtn.getAttribute('aria-label')).toBe('Previous image');
-            expect(nextBtn.getAttribute('aria-label')).toBe('Next image');
-        });
-    });
-    
-    describe('Mobile UI Adaptations', () => {
-        it('should ensure minimum touch target size', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe, {
-                mobileUI: {
-                    minTouchTargetSize: 44
-                }
-            });
-            
-            const element = mockPhotoSwipe.template;
-            
-            // Add a button
-            const button = document.createElement('button');
-            button.className = 'pswp__button';
-            button.style.width = '30px';
-            button.style.height = '30px';
-            element?.appendChild(button);
-            
-            // Enhance to apply minimum sizes
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            // Button should be resized to meet minimum
-            expect(button.style.minWidth).toBe('44px');
-            expect(button.style.minHeight).toBe('44px');
-        });
-        
-        it('should add swipe indicators for mobile', () => {
-            // Mock as mobile device
-            Object.defineProperty(window, 'ontouchstart', {
-                value: () => {},
-                writable: true
-            });
-            
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe, {
-                mobileUI: {
-                    swipeIndicators: true
-                }
-            });
-            
-            const indicators = document.querySelector('.photoswipe-swipe-indicators');
-            expect(indicators).toBeTruthy();
-        });
-    });
-    
-    describe('Performance Optimizations', () => {
-        it('should adapt quality based on device capabilities', () => {
-            // Mock low memory device
-            Object.defineProperty(navigator, 'deviceMemory', {
-                value: 1,
-                writable: true
-            });
-            
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe, {
-                performance: {
-                    adaptiveQuality: true
-                }
-            });
-            
-            // Service should detect low memory and adjust settings
-            expect(mobileA11yService).toBeDefined();
-        });
-        
-        it('should apply reduced motion preferences', () => {
-            // Mock reduced motion preference
-            const mockMatchMedia = jest.fn().mockImplementation(query => ({
-                matches: query === '(prefers-reduced-motion: reduce)',
-                media: query,
-                addListener: jest.fn(),
-                removeListener: jest.fn()
-            }));
-            
-            Object.defineProperty(window, 'matchMedia', {
-                value: mockMatchMedia,
-                writable: true
-            });
-            
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            // Animations should be disabled
-            expect(mockPhotoSwipe.options.showAnimationDuration).toBe(0);
-            expect(mockPhotoSwipe.options.hideAnimationDuration).toBe(0);
-        });
-        
-        it('should optimize for battery saving', () => {
-            // Mock battery API
-            const mockBattery = {
-                charging: false,
-                level: 0.15,
-                addEventListener: jest.fn()
-            };
-            
-            (navigator as any).getBattery = jest.fn().mockResolvedValue(mockBattery);
-            
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe, {
-                performance: {
-                    batteryOptimization: true
-                }
-            });
-            
-            // Battery optimization should be enabled
-            expect((navigator as any).getBattery).toHaveBeenCalled();
-        });
-    });
-    
-    describe('High Contrast Mode', () => {
-        it('should apply high contrast styles when enabled', () => {
-            // Mock high contrast preference
-            const mockMatchMedia = jest.fn().mockImplementation(query => ({
-                matches: query === '(prefers-contrast: high)',
-                media: query,
-                addListener: jest.fn(),
-                removeListener: jest.fn()
-            }));
-            
-            Object.defineProperty(window, 'matchMedia', {
-                value: mockMatchMedia,
-                writable: true
-            });
-            
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            const element = mockPhotoSwipe.template;
-            
-            // Should have high contrast styles
-            expect(element?.style.outline).toContain('2px solid white');
-        });
-    });
-    
-    describe('Haptic Feedback', () => {
-        it('should trigger haptic feedback on supported devices', () => {
-            // Mock vibration API
-            const mockVibrate = jest.fn();
-            Object.defineProperty(navigator, 'vibrate', {
-                value: mockVibrate,
-                writable: true
-            });
-            
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe, {
-                touch: {
-                    hapticFeedback: true
-                }
-            });
-            
-            // Trigger a gesture that should cause haptic feedback
-            const element = mockPhotoSwipe.template;
-            
-            // Double tap
-            const tap = new TouchEvent('touchend', {
-                changedTouches: [{ clientX: 100, clientY: 100, identifier: 0 }] as any
-            });
-            
-            element?.dispatchEvent(new TouchEvent('touchstart', {
-                touches: [{ clientX: 100, clientY: 100, identifier: 0 }] as any
-            }));
-            element?.dispatchEvent(tap);
-            
-            // Quick second tap
-            setTimeout(() => {
-                element?.dispatchEvent(new TouchEvent('touchstart', {
-                    touches: [{ clientX: 100, clientY: 100, identifier: 0 }] as any
-                }));
-                element?.dispatchEvent(tap);
-                
-                // Haptic feedback should be triggered
-                expect(mockVibrate).toHaveBeenCalled();
-            }, 50);
-        });
-    });
-    
-    describe('Configuration Updates', () => {
-        it('should update configuration dynamically', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            // Update configuration
-            mobileA11yService.updateConfig({
-                a11y: {
-                    ariaLiveRegion: 'assertive'
-                },
-                touch: {
-                    hapticFeedback: false
-                }
-            });
-            
-            const liveRegion = document.querySelector('[aria-live]');
-            expect(liveRegion?.getAttribute('aria-live')).toBe('assertive');
-        });
-    });
-    
-    describe('Cleanup', () => {
-        it('should properly cleanup resources', () => {
-            mobileA11yService.enhancePhotoSwipe(mockPhotoSwipe);
-            
-            // Create some elements
-            const liveRegion = document.querySelector('[aria-live]');
-            const helpDialog = document.querySelector('.photoswipe-keyboard-help');
-            
-            expect(liveRegion).toBeTruthy();
-            
-            // Cleanup
-            mobileA11yService.cleanup();
-            
-            // Elements should be removed
-            expect(document.querySelector('[aria-live]')).toBeFalsy();
-            expect(document.querySelector('.photoswipe-keyboard-help')).toBeFalsy();
-        });
-    });
-});

apps/client/src/services/shortcuts.ts

@@ -14,6 +14,32 @@ interface ShortcutBinding {
 // Store all active shortcut bindings for management
 const activeBindings: Map<string, ShortcutBinding[]> = new Map();
 
+// Handle special key mappings and aliases
+const keyMap: { [key: string]: string[] } = {
+    'return': ['Enter'],
+    'enter': ['Enter'],  // alias for return
+    'del': ['Delete'],
+    'delete': ['Delete'], // alias for del
+    'esc': ['Escape'],
+    'escape': ['Escape'], // alias for esc
+    'space': [' ', 'Space'],
+    'tab': ['Tab'],
+    'backspace': ['Backspace'],
+    'home': ['Home'],
+    'end': ['End'],
+    'pageup': ['PageUp'],
+    'pagedown': ['PageDown'],
+    'up': ['ArrowUp'],
+    'down': ['ArrowDown'],
+    'left': ['ArrowLeft'],
+    'right': ['ArrowRight']
+};
+
+// Function keys
+for (let i = 1; i <= 19; i++) {
+    keyMap[`f${i}`] = [`F${i}`];
+}
+
 function removeGlobalShortcut(namespace: string) {
     bindGlobalShortcut("", null, namespace);
 }
@@ -124,32 +150,6 @@ export function keyMatches(e: KeyboardEvent, key: string): boolean {
         return false;
     }
 
-    // Handle special key mappings and aliases
-    const keyMap: { [key: string]: string[] } = {
-        'return': ['Enter'],
-        'enter': ['Enter'],  // alias for return
-        'del': ['Delete'],
-        'delete': ['Delete'], // alias for del
-        'esc': ['Escape'],
-        'escape': ['Escape'], // alias for esc
-        'space': [' ', 'Space'],
-        'tab': ['Tab'],
-        'backspace': ['Backspace'],
-        'home': ['Home'],
-        'end': ['End'],
-        'pageup': ['PageUp'],
-        'pagedown': ['PageDown'],
-        'up': ['ArrowUp'],
-        'down': ['ArrowDown'],
-        'left': ['ArrowLeft'],
-        'right': ['ArrowRight']
-    };
-
-    // Function keys
-    for (let i = 1; i <= 19; i++) {
-        keyMap[`f${i}`] = [`F${i}`];
-    }
-
     const mappedKeys = keyMap[key.toLowerCase()];
     if (mappedKeys) {
         return mappedKeys.includes(e.key) || mappedKeys.includes(e.code);
@@ -163,7 +163,7 @@ export function keyMatches(e: KeyboardEvent, key: string): boolean {
 
     // For letter keys, use the physical key code for consistency
     if (key.length === 1 && key >= 'a' && key <= 'z') {
-        return e.code === `Key${key.toUpperCase()}`;
+        return e.key.toLowerCase() === key.toLowerCase();
     }
 
     // For regular keys, check both key and code as fallback

apps/client/src/services/utils.ts

@@ -5,7 +5,7 @@ const SVG_MIME = "image/svg+xml";
 
 export const isShare = !window.glob;
 
-function reloadFrontendApp(reason?: string) {
+export function reloadFrontendApp(reason?: string) {
     if (reason) {
         logInfo(`Frontend app reload: ${reason}`);
     }
@@ -13,7 +13,7 @@ function reloadFrontendApp(reason?: string) {
     window.location.reload();
 }
 
-function restartDesktopApp() {
+export function restartDesktopApp() {
     if (!isElectron()) {
         reloadFrontendApp();
         return;
@@ -125,7 +125,7 @@ function formatDateISO(date: Date) {
     return `${date.getFullYear()}-${padNum(date.getMonth() + 1)}-${padNum(date.getDate())}`;
 }
 
-function formatDateTime(date: Date, userSuppliedFormat?: string): string {
+export function formatDateTime(date: Date, userSuppliedFormat?: string): string {
     if (userSuppliedFormat?.trim()) {
         return dayjs(date).format(userSuppliedFormat);
     } else {
@@ -144,7 +144,7 @@ function now() {
 /**
  * Returns `true` if the client is currently running under Electron, or `false` if running in a web browser.
  */
-function isElectron() {
+export function isElectron() {
     return !!(window && window.process && window.process.type);
 }
 
@@ -218,7 +218,7 @@ function randomString(len: number) {
     return text;
 }
 
-function isMobile() {
+export function isMobile() {
     return (
         window.glob?.device === "mobile" ||
         // window.glob.device is not available in setup
@@ -306,7 +306,7 @@ function copySelectionToClipboard() {
     }
 }
 
-function dynamicRequire(moduleName: string) {
+export function dynamicRequire(moduleName: string) {
     if (typeof __non_webpack_require__ !== "undefined") {
         return __non_webpack_require__(moduleName);
     } else {
@@ -374,33 +374,42 @@ async function openInAppHelp($button: JQuery<HTMLElement>) {
 
     const inAppHelpPage = $button.attr("data-in-app-help");
     if (inAppHelpPage) {
-        // Dynamic import to avoid import issues in tests.
-        const appContext = (await import("../components/app_context.js")).default;
-        const activeContext = appContext.tabManager.getActiveContext();
-        if (!activeContext) {
-            return;
-        }
-        const subContexts = activeContext.getSubContexts();
-        const targetNote = `_help_${inAppHelpPage}`;
-        const helpSubcontext = subContexts.find((s) => s.viewScope?.viewMode === "contextual-help");
-        const viewScope: ViewScope = {
-            viewMode: "contextual-help",
-        };
-        if (!helpSubcontext) {
-            // The help is not already open, open a new split with it.
-            const { ntxId } = subContexts[subContexts.length - 1];
-            appContext.triggerCommand("openNewNoteSplit", {
-                ntxId,
-                notePath: targetNote,
-                hoistedNoteId: "_help",
-                viewScope
-            })
-        } else {
-            // There is already a help window open, make sure it opens on the right note.
-            helpSubcontext.setNote(targetNote, { viewScope });
-        }
+        openInAppHelpFromUrl(inAppHelpPage);
+    }
+}
+
+/**
+ * Opens the in-app help at the given page in a split note. If there already is a split note open with a help page, it will be replaced by this one.
+ *
+ * @param inAppHelpPage the ID of the help note (excluding the `_help_` prefix).
+ * @returns a promise that resolves once the help has been opened.
+ */
+export async function openInAppHelpFromUrl(inAppHelpPage: string) {
+    // Dynamic import to avoid import issues in tests.
+    const appContext = (await import("../components/app_context.js")).default;
+    const activeContext = appContext.tabManager.getActiveContext();
+    if (!activeContext) {
         return;
     }
+    const subContexts = activeContext.getSubContexts();
+    const targetNote = `_help_${inAppHelpPage}`;
+    const helpSubcontext = subContexts.find((s) => s.viewScope?.viewMode === "contextual-help");
+    const viewScope: ViewScope = {
+        viewMode: "contextual-help",
+    };
+    if (!helpSubcontext) {
+        // The help is not already open, open a new split with it.
+        const { ntxId } = subContexts[subContexts.length - 1];
+        appContext.triggerCommand("openNewNoteSplit", {
+            ntxId,
+            notePath: targetNote,
+            hoistedNoteId: "_help",
+            viewScope
+        })
+    } else {
+        // There is already a help window open, make sure it opens on the right note.
+        helpSubcontext.setNote(targetNote, { viewScope });
+    }
 }
 
 function initHelpButtons($el: JQuery<HTMLElement> | JQuery<Window>) {
@@ -735,6 +744,50 @@ function isLaunchBarConfig(noteId: string) {
     return ["_lbRoot", "_lbAvailableLaunchers", "_lbVisibleLaunchers", "_lbMobileRoot", "_lbMobileAvailableLaunchers", "_lbMobileVisibleLaunchers"].includes(noteId);
 }
 
+/**
+ * Adds a class to the <body> of the page, where the class name is formed via a prefix and a value.
+ * Useful for configurable options such as `heading-style-markdown`, where `heading-style` is the prefix and `markdown` is the dynamic value.
+ * There is no separator between the prefix and the value, if needed it has to be supplied manually to the prefix.
+ *
+ * @param prefix the prefix.
+ * @param value the value to be appended to the prefix.
+ */
+export function toggleBodyClass(prefix: string, value: string) {
+    const $body = $("body");
+    for (const clazz of Array.from($body[0].classList)) {
+        // create copy to safely iterate over while removing classes
+        if (clazz.startsWith(prefix)) {
+            $body.removeClass(clazz);
+        }
+    }
+
+    $body.addClass(prefix + value);
+}
+
+/**
+ * Basic comparison for equality between the two arrays. The values are strictly checked via `===`.
+ *
+ * @param a the first array to compare.
+ * @param b the second array to compare.
+ * @returns `true` if both arrays are equals, `false` otherwise.
+ */
+export function arrayEqual<T>(a: T[], b: T[]) {
+    if (a === b) {
+        return true;
+    }
+    if (a.length !== b.length) {
+        return false;
+    }
+
+    for (let i=0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+            return false;
+        }
+    }
+
+    return true;
+}
+
 export default {
     reloadFrontendApp,
     restartDesktopApp,

apps/client/src/styles/gallery.css

@@ -1,284 +0,0 @@
-/**
- * Gallery styles for PhotoSwipe integration
- * Provides styling for gallery UI elements
- */
-
-/* Gallery thumbnail strip */
-.gallery-thumbnail-strip {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
-}
-
-.gallery-thumbnail-strip::-webkit-scrollbar {
-    height: 6px;
-}
-
-.gallery-thumbnail-strip::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-.gallery-thumbnail-strip::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 3px;
-}
-
-.gallery-thumbnail-strip::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
-}
-
-.gallery-thumbnail {
-    position: relative;
-    overflow: hidden;
-}
-
-.gallery-thumbnail.active::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    background: rgba(255, 255, 255, 0.1);
-    pointer-events: none;
-}
-
-/* Gallery controls animations */
-.gallery-slideshow-controls button {
-    transition: transform 0.2s, background 0.2s;
-}
-
-.gallery-slideshow-controls button:hover {
-    transform: scale(1.1);
-    background: rgba(255, 255, 255, 1) !important;
-}
-
-.gallery-slideshow-controls button:active {
-    transform: scale(0.95);
-}
-
-/* Slideshow progress indicator */
-.slideshow-progress {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 3px;
-    background: rgba(255, 255, 255, 0.2);
-    z-index: 101;
-}
-
-.slideshow-progress-bar {
-    height: 100%;
-    background: rgba(255, 255, 255, 0.8);
-    width: 0;
-    transition: width linear;
-}
-
-.slideshow-progress.active .slideshow-progress-bar {
-    animation: slideshow-progress var(--slideshow-interval) linear;
-}
-
-@keyframes slideshow-progress {
-    from { width: 0; }
-    to { width: 100%; }
-}
-
-/* Gallery counter styling */
-.gallery-counter {
-    font-family: var(--font-family-monospace);
-    letter-spacing: 0.05em;
-    user-select: none;
-}
-
-.gallery-counter .current-index {
-    font-weight: bold;
-    color: #fff;
-}
-
-.gallery-counter .total-count {
-    opacity: 0.8;
-}
-
-/* Enhanced image hover effects */
-.pswp__img {
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.pswp__img.pswp__img--zoomed {
-    cursor: move;
-}
-
-/* Gallery navigation arrows */
-.pswp__button--arrow--left,
-.pswp__button--arrow--right {
-    background: rgba(0, 0, 0, 0.5) !important;
-    backdrop-filter: blur(10px);
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    margin: 20px;
-}
-
-.pswp__button--arrow--left:hover,
-.pswp__button--arrow--right:hover {
-    background: rgba(0, 0, 0, 0.7) !important;
-}
-
-/* Touch-friendly tap areas */
-@media (pointer: coarse) {
-    .gallery-thumbnail {
-        min-width: 60px;
-        min-height: 60px;
-    }
-    
-    .gallery-slideshow-controls button {
-        min-width: 50px;
-        min-height: 50px;
-    }
-}
-
-/* Smooth transitions */
-.pswp--animate_opacity {
-    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-.pswp__bg {
-    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Loading state */
-.pswp__preloader {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-.pswp__preloader__icn {
-    width: 30px;
-    height: 30px;
-    border: 3px solid rgba(255, 255, 255, 0.3);
-    border-top-color: #fff;
-    border-radius: 50%;
-    animation: gallery-spin 1s linear infinite;
-}
-
-@keyframes gallery-spin {
-    to { transform: rotate(360deg); }
-}
-
-/* Error state */
-.pswp__error-msg {
-    background: rgba(0, 0, 0, 0.8);
-    color: #ff6b6b;
-    padding: 20px;
-    border-radius: 8px;
-    max-width: 400px;
-    text-align: center;
-}
-
-/* Accessibility improvements */
-.pswp__button:focus-visible {
-    outline: 2px solid #4a9eff;
-    outline-offset: 2px;
-}
-
-.gallery-thumbnail:focus-visible {
-    outline: 2px solid #4a9eff;
-    outline-offset: -2px;
-}
-
-/* Dark theme adjustments */
-body.theme-dark .gallery-thumbnail-strip {
-    background: rgba(0, 0, 0, 0.8);
-}
-
-body.theme-dark .gallery-slideshow-controls button {
-    background: rgba(255, 255, 255, 0.8);
-    color: #000;
-}
-
-body.theme-dark .gallery-slideshow-controls button:hover {
-    background: rgba(255, 255, 255, 0.95);
-}
-
-/* Light theme adjustments */
-body.theme-light .pswp__bg {
-    background: rgba(255, 255, 255, 0.95);
-}
-
-body.theme-light .gallery-counter,
-body.theme-light .gallery-keyboard-hints {
-    background: rgba(0, 0, 0, 0.8);
-    color: white;
-}
-
-/* Mobile-specific styles */
-@media (max-width: 768px) {
-    .gallery-thumbnail-strip {
-        bottom: 40px;
-        padding: 6px;
-        gap: 4px;
-    }
-    
-    .gallery-thumbnail {
-        width: 50px !important;
-        height: 50px !important;
-    }
-    
-    .gallery-slideshow-controls {
-        top: 10px;
-        right: 10px;
-    }
-    
-    .gallery-counter {
-        font-size: 12px;
-        padding: 6px 10px;
-    }
-    
-    .pswp__button--arrow--left,
-    .pswp__button--arrow--right {
-        width: 40px;
-        height: 40px;
-        margin: 10px;
-    }
-}
-
-/* Tablet-specific styles */
-@media (min-width: 769px) and (max-width: 1024px) {
-    .gallery-thumbnail-strip {
-        max-width: 80%;
-    }
-    
-    .gallery-thumbnail {
-        width: 70px !important;
-        height: 70px !important;
-    }
-}
-
-/* High-DPI display optimizations */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-    .gallery-thumbnail img {
-        image-rendering: -webkit-optimize-contrast;
-        image-rendering: crisp-edges;
-    }
-}
-
-/* Reduced motion support */
-@media (prefers-reduced-motion: reduce) {
-    .gallery-thumbnail,
-    .gallery-slideshow-controls button,
-    .pswp__img,
-    .pswp--animate_opacity,
-    .pswp__bg {
-        transition: none !important;
-        animation: none !important;
-    }
-}
-
-/* Print styles */
-@media print {
-    .gallery-thumbnail-strip,
-    .gallery-slideshow-controls,
-    .gallery-counter,
-    .gallery-keyboard-hints {
-        display: none !important;
-    }
-}

apps/client/src/styles/photoswipe-mobile-a11y.css

@@ -1,528 +0,0 @@
-/**
- * PhotoSwipe Mobile & Accessibility Styles
- * Phase 6: Complete mobile optimization and WCAG 2.1 AA compliance
- */
-
-/* ==========================================================================
-   Touch Target Optimization (WCAG 2.1 Success Criterion 2.5.5)
-   ========================================================================== */
-
-/* Ensure all interactive elements meet minimum 44x44px touch target */
-.pswp__button,
-.pswp__button--arrow--left,
-.pswp__button--arrow--right,
-.pswp__button--close,
-.pswp__button--zoom,
-.pswp__button--fs,
-.gallery-thumbnail,
-.photoswipe-bottom-sheet button {
-    min-width: 44px !important;
-    min-height: 44px !important;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-/* Increase touch target padding on mobile */
-@media (pointer: coarse) {
-    .pswp__button {
-        padding: 12px;
-    }
-    
-    /* Larger hit areas for navigation arrows */
-    .pswp__button--arrow--left,
-    .pswp__button--arrow--right {
-        width: 60px !important;
-        height: 100px !important;
-    }
-}
-
-/* ==========================================================================
-   Focus Indicators (WCAG 2.1 Success Criterion 2.4.7)
-   ========================================================================== */
-
-/* High visibility focus indicators */
-.pswp__button:focus,
-.pswp__button:focus-visible,
-.gallery-thumbnail:focus,
-.photoswipe-bottom-sheet button:focus,
-.photoswipe-focused {
-    outline: 3px solid #4A90E2 !important;
-    outline-offset: 2px !important;
-    box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.3);
-}
-
-/* Remove default browser outline */
-.pswp__button:focus:not(:focus-visible) {
-    outline: none;
-}
-
-/* Focus indicator for images */
-.pswp__img:focus {
-    outline: 3px solid #4A90E2;
-    outline-offset: -3px;
-}
-
-/* Skip link styles */
-.photoswipe-skip-link {
-    position: absolute;
-    left: -10000px;
-    top: 0;
-    background: #000;
-    color: #fff;
-    padding: 8px 16px;
-    text-decoration: none;
-    z-index: 100000;
-    border-radius: 4px;
-}
-
-.photoswipe-skip-link:focus {
-    left: 10px !important;
-    top: 10px !important;
-    width: auto !important;
-    height: auto !important;
-}
-
-/* ==========================================================================
-   Mobile UI Adaptations
-   ========================================================================== */
-
-/* Mobile-optimized toolbar */
-@media (max-width: 768px) {
-    .pswp__top-bar {
-        height: 60px;
-        background: rgba(0, 0, 0, 0.8);
-    }
-    
-    .pswp__button {
-        width: 50px;
-        height: 50px;
-    }
-    
-    /* Reposition counter for mobile */
-    .pswp__counter {
-        top: auto;
-        bottom: 70px;
-        left: 50%;
-        transform: translateX(-50%);
-        background: rgba(0, 0, 0, 0.7);
-        padding: 8px 16px;
-        border-radius: 20px;
-        font-size: 14px;
-    }
-}
-
-/* Bottom sheet for mobile controls */
-.photoswipe-bottom-sheet {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: rgba(0, 0, 0, 0.95);
-    padding: env(safe-area-inset-bottom, 20px) 20px;
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    z-index: 100;
-    transform: translateY(100%);
-    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    border-top: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.photoswipe-bottom-sheet.active {
-    transform: translateY(0);
-}
-
-.photoswipe-bottom-sheet button {
-    background: none;
-    border: 2px solid transparent;
-    color: white;
-    font-size: 24px;
-    padding: 10px;
-    border-radius: 50%;
-    transition: all 0.2s;
-}
-
-.photoswipe-bottom-sheet button:active {
-    background: rgba(255, 255, 255, 0.1);
-    transform: scale(0.95);
-}
-
-/* Swipe indicators */
-.photoswipe-swipe-indicators {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-    animation: fadeInOut 3s ease-in-out;
-}
-
-@keyframes fadeInOut {
-    0%, 100% { opacity: 0; }
-    20%, 80% { opacity: 0.7; }
-}
-
-/* Gesture hints */
-.photoswipe-gesture-hints {
-    position: absolute;
-    top: 60px;
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(0, 0, 0, 0.85);
-    color: white;
-    padding: 12px 24px;
-    border-radius: 24px;
-    font-size: 14px;
-    font-weight: 500;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    pointer-events: none;
-}
-
-/* Context menu for long press */
-.photoswipe-context-menu {
-    background: var(--theme-background-color, white);
-    border: 1px solid var(--theme-border-color, #ccc);
-    border-radius: 8px;
-    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-    overflow: hidden;
-    min-width: 200px;
-}
-
-.photoswipe-context-menu button {
-    display: block;
-    width: 100%;
-    padding: 12px 16px;
-    border: none;
-    background: none;
-    text-align: left;
-    cursor: pointer;
-    font-size: 16px;
-    transition: background 0.2s;
-}
-
-.photoswipe-context-menu button:hover,
-.photoswipe-context-menu button:focus {
-    background: var(--theme-hover-background, rgba(0, 0, 0, 0.05));
-}
-
-/* ==========================================================================
-   Responsive Breakpoints
-   ========================================================================== */
-
-/* Small phones (< 375px) */
-@media (max-width: 374px) {
-    .pswp__button {
-        width: 40px;
-        height: 40px;
-    }
-    
-    .gallery-thumbnail-strip {
-        padding: 5px !important;
-    }
-    
-    .gallery-thumbnail {
-        width: 60px !important;
-        height: 60px !important;
-    }
-}
-
-/* Tablets (768px - 1024px) */
-@media (min-width: 768px) and (max-width: 1024px) {
-    .pswp__button {
-        width: 48px;
-        height: 48px;
-    }
-    
-    .gallery-thumbnail {
-        width: 90px !important;
-        height: 90px !important;
-    }
-}
-
-/* Landscape orientation adjustments */
-@media (orientation: landscape) and (max-height: 500px) {
-    .pswp__top-bar {
-        height: 44px;
-    }
-    
-    .pswp__button {
-        width: 44px;
-        height: 44px;
-    }
-    
-    .gallery-thumbnail-strip {
-        bottom: 40px !important;
-        max-height: 60px;
-    }
-    
-    .gallery-thumbnail {
-        width: 50px !important;
-        height: 50px !important;
-    }
-}
-
-/* ==========================================================================
-   Accessibility Enhancements
-   ========================================================================== */
-
-/* Screen reader only content */
-.photoswipe-sr-only,
-.photoswipe-live-region,
-.photoswipe-aria-live {
-    position: absolute !important;
-    left: -10000px !important;
-    width: 1px !important;
-    height: 1px !important;
-    overflow: hidden !important;
-}
-
-/* Keyboard help dialog */
-.photoswipe-keyboard-help {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background: var(--theme-background-color, white);
-    color: var(--theme-text-color, black);
-    padding: 30px;
-    border-radius: 12px;
-    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-    z-index: 10001;
-    max-width: 500px;
-    max-height: 80vh;
-    overflow-y: auto;
-}
-
-.photoswipe-keyboard-help h2 {
-    margin: 0 0 20px 0;
-    font-size: 20px;
-    font-weight: 600;
-}
-
-.photoswipe-keyboard-help dl {
-    margin: 0;
-    padding: 0;
-}
-
-.photoswipe-keyboard-help dt {
-    float: left;
-    clear: left;
-    width: 120px;
-    margin-bottom: 10px;
-}
-
-.photoswipe-keyboard-help dd {
-    margin-left: 140px;
-    margin-bottom: 10px;
-}
-
-.photoswipe-keyboard-help kbd {
-    display: inline-block;
-    padding: 3px 8px;
-    background: var(--theme-kbd-background, #f0f0f0);
-    border: 1px solid var(--theme-border-color, #ccc);
-    border-radius: 4px;
-    font-family: monospace;
-    font-size: 14px;
-    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
-}
-
-.photoswipe-keyboard-help .close-help {
-    margin-top: 20px;
-    padding: 10px 20px;
-    background: var(--theme-primary-color, #4A90E2);
-    color: white;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    font-size: 16px;
-    transition: background 0.2s;
-}
-
-.photoswipe-keyboard-help .close-help:hover,
-.photoswipe-keyboard-help .close-help:focus {
-    background: var(--theme-primary-hover, #357ABD);
-}
-
-/* ==========================================================================
-   High Contrast Mode Support
-   ========================================================================== */
-
-@media (prefers-contrast: high) {
-    .pswp__bg {
-        background: #000 !important;
-    }
-    
-    .pswp__button {
-        background: #000 !important;
-        border: 2px solid #fff !important;
-    }
-    
-    .pswp__button svg {
-        fill: #fff !important;
-    }
-    
-    .pswp__counter {
-        background: #000 !important;
-        color: #fff !important;
-        border: 2px solid #fff !important;
-    }
-    
-    .gallery-thumbnail {
-        border-width: 3px !important;
-    }
-    
-    .photoswipe-keyboard-help {
-        background: #000 !important;
-        color: #fff !important;
-        border: 2px solid #fff !important;
-    }
-    
-    .photoswipe-keyboard-help kbd {
-        background: #fff !important;
-        color: #000 !important;
-        border-color: #fff !important;
-    }
-}
-
-/* Windows High Contrast Mode */
-@media (-ms-high-contrast: active) {
-    .pswp__button {
-        border: 2px solid WindowText !important;
-    }
-    
-    .pswp__counter {
-        border: 2px solid WindowText !important;
-    }
-}
-
-/* ==========================================================================
-   Reduced Motion Support (WCAG 2.1 Success Criterion 2.3.3)
-   ========================================================================== */
-
-@media (prefers-reduced-motion: reduce) {
-    /* Disable all animations */
-    .pswp *,
-    .pswp *::before,
-    .pswp *::after {
-        animation-duration: 0.01ms !important;
-        animation-iteration-count: 1 !important;
-        transition-duration: 0.01ms !important;
-    }
-    
-    /* Remove slide transitions */
-    .pswp__container {
-        transition: none !important;
-    }
-    
-    /* Remove zoom animations */
-    .pswp__img {
-        transition: none !important;
-    }
-    
-    /* Instant show/hide for indicators */
-    .photoswipe-swipe-indicators,
-    .photoswipe-gesture-hints {
-        animation: none !important;
-        transition: none !important;
-    }
-}
-
-/* ==========================================================================
-   Performance Optimizations
-   ========================================================================== */
-
-/* GPU acceleration for smooth animations */
-.pswp__container,
-.pswp__img,
-.pswp__zoom-wrap {
-    will-change: transform;
-    transform: translateZ(0);
-}
-
-/* Optimize rendering for low-end devices */
-@media (max-width: 768px) and (max-resolution: 2dppx) {
-    .pswp__img {
-        image-rendering: -webkit-optimize-contrast;
-        image-rendering: crisp-edges;
-    }
-}
-
-/* Reduce visual complexity on low-end devices */
-.low-performance-mode .pswp__button {
-    box-shadow: none !important;
-}
-
-.low-performance-mode .gallery-thumbnail {
-    box-shadow: none !important;
-    transition: none !important;
-}
-
-/* ==========================================================================
-   Battery Optimization Mode
-   ========================================================================== */
-
-.battery-saver-mode .pswp__img {
-    filter: brightness(0.9);
-}
-
-.battery-saver-mode .pswp__button {
-    opacity: 0.8;
-}
-
-.battery-saver-mode .gallery-thumbnail-strip {
-    display: none;
-}
-
-/* ==========================================================================
-   Print Styles
-   ========================================================================== */
-
-@media print {
-    .pswp {
-        display: none !important;
-    }
-}
-
-/* ==========================================================================
-   Custom Scrollbar for Mobile
-   ========================================================================== */
-
-.gallery-thumbnail-strip::-webkit-scrollbar {
-    height: 4px;
-}
-
-.gallery-thumbnail-strip::-webkit-scrollbar-track {
-    background: rgba(255, 255, 255, 0.1);
-    border-radius: 2px;
-}
-
-.gallery-thumbnail-strip::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.3);
-    border-radius: 2px;
-}
-
-.gallery-thumbnail-strip::-webkit-scrollbar-thumb:hover {
-    background: rgba(255, 255, 255, 0.5);
-}
-
-/* ==========================================================================
-   Safe Area Insets (for devices with notches)
-   ========================================================================== */
-
-.pswp__top-bar {
-    padding-top: env(safe-area-inset-top);
-}
-
-.photoswipe-bottom-sheet {
-    padding-bottom: env(safe-area-inset-bottom);
-}
-
-.pswp__button--arrow--left {
-    left: env(safe-area-inset-left, 10px);
-}
-
-.pswp__button--arrow--right {
-    right: env(safe-area-inset-right, 10px);
-}

apps/client/src/stylesheets/media-viewer.css

@@ -1,253 +0,0 @@
-/**
- * Media Viewer Styles for Trilium Notes
- * Customizes PhotoSwipe appearance to match Trilium's theme
- */
-
-/* Base PhotoSwipe container customization */
-.pswp {
-    --pswp-bg: rgba(0, 0, 0, 0.95);
-    --pswp-placeholder-bg: rgba(30, 30, 30, 0.9);
-    --pswp-icon-color: #fff;
-    --pswp-icon-color-secondary: rgba(255, 255, 255, 0.75);
-    --pswp-icon-stroke-color: #fff;
-    --pswp-icon-stroke-width: 1px;
-    --pswp-error-text-color: #f44336;
-}
-
-/* Dark theme adjustments */
-body.theme-dark .pswp,
-body.theme-next-dark .pswp {
-    --pswp-bg: rgba(0, 0, 0, 0.95);
-    --pswp-placeholder-bg: rgba(30, 30, 30, 0.9);
-}
-
-/* Light theme adjustments */
-body.theme-light .pswp,
-body.theme-next-light .pswp {
-    --pswp-bg: rgba(0, 0, 0, 0.9);
-    --pswp-placeholder-bg: rgba(50, 50, 50, 0.8);
-}
-
-/* Toolbar and controls styling */
-.pswp__top-bar {
-    background-color: rgba(0, 0, 0, 0.5);
-    backdrop-filter: blur(10px);
-}
-
-.pswp__button {
-    transition: opacity 0.2s ease-in-out;
-}
-
-.pswp__button:hover {
-    opacity: 1;
-}
-
-/* Counter styling */
-.pswp__counter {
-    font-family: var(--main-font-family);
-    font-size: 14px;
-    color: rgba(255, 255, 255, 0.9);
-    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-}
-
-/* Caption styling */
-.pswp__caption {
-    background-color: rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(10px);
-}
-
-.pswp__caption__center {
-    text-align: center;
-    font-family: var(--main-font-family);
-    font-size: 14px;
-    color: rgba(255, 255, 255, 0.9);
-    padding: 10px 20px;
-}
-
-/* Image styling */
-.pswp__img {
-    cursor: zoom-in;
-}
-
-.pswp__img--placeholder {
-    background-color: var(--pswp-placeholder-bg);
-}
-
-.pswp--zoomed-in .pswp__img {
-    cursor: grab;
-}
-
-.pswp--dragging .pswp__img {
-    cursor: grabbing;
-}
-
-/* Loading indicator */
-.pswp__preloader {
-    width: 44px;
-    height: 44px;
-}
-
-.pswp__preloader__icn {
-    width: 20px;
-    height: 20px;
-}
-
-/* Error message styling */
-.pswp__error-msg {
-    font-family: var(--main-font-family);
-    font-size: 14px;
-    color: var(--pswp-error-text-color);
-    text-align: center;
-    padding: 20px;
-}
-
-/* Thumbnails strip (for future implementation) */
-.pswp__thumbnails {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 80px;
-    background-color: rgba(0, 0, 0, 0.7);
-    backdrop-filter: blur(10px);
-    display: flex;
-    align-items: center;
-    padding: 10px;
-    gap: 10px;
-    overflow-x: auto;
-    z-index: 1;
-}
-
-.pswp__thumbnail {
-    width: 60px;
-    height: 60px;
-    cursor: pointer;
-    opacity: 0.6;
-    transition: opacity 0.2s;
-    object-fit: cover;
-    border: 2px solid transparent;
-}
-
-.pswp__thumbnail:hover {
-    opacity: 0.9;
-}
-
-.pswp__thumbnail--active {
-    opacity: 1;
-    border-color: var(--main-border-color);
-}
-
-/* Animations */
-.pswp--open {
-    animation: pswpFadeIn 0.25s ease-out;
-}
-
-.pswp--closing {
-    animation: pswpFadeOut 0.25s ease-out;
-}
-
-@keyframes pswpFadeIn {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
-}
-
-@keyframes pswpFadeOut {
-    from {
-        opacity: 1;
-    }
-    to {
-        opacity: 0;
-    }
-}
-
-/* Zoom animation */
-.pswp__zoom-wrap {
-    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
-}
-
-/* Mobile-specific adjustments */
-@media (max-width: 768px) {
-    .pswp__caption__center {
-        font-size: 12px;
-        padding: 8px 16px;
-    }
-    
-    .pswp__counter {
-        font-size: 12px;
-    }
-    
-    .pswp__thumbnails {
-        height: 60px;
-    }
-    
-    .pswp__thumbnail {
-        width: 45px;
-        height: 45px;
-    }
-}
-
-/* Integration with Trilium's note context */
-.media-viewer-trigger {
-    cursor: zoom-in;
-    transition: opacity 0.2s;
-}
-
-.media-viewer-trigger:hover {
-    opacity: 0.9;
-}
-
-/* Gallery mode indicators */
-.media-viewer-gallery-indicator {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background-color: rgba(0, 0, 0, 0.6);
-    color: white;
-    padding: 4px 8px;
-    border-radius: 4px;
-    font-size: 12px;
-    font-family: var(--main-font-family);
-    pointer-events: none;
-    z-index: 1;
-}
-
-/* Fullscreen mode adjustments */
-.pswp--fs {
-    background-color: black;
-}
-
-.pswp--fs .pswp__top-bar {
-    background-color: rgba(0, 0, 0, 0.7);
-}
-
-/* Accessibility improvements */
-.pswp__button:focus {
-    outline: 2px solid var(--main-border-color);
-    outline-offset: 2px;
-}
-
-.pswp__img:focus {
-    outline: none;
-}
-
-/* Custom toolbar buttons */
-.pswp__button--download {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'%3E%3C/path%3E%3Cpolyline points='7 10 12 15 17 10'%3E%3C/polyline%3E%3Cline x1='12' y1='15' x2='12' y2='3'%3E%3C/line%3E%3C/svg%3E");
-    background-size: 24px 24px;
-}
-
-.pswp__button--info {
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
-    background-size: 24px 24px;
-}
-
-/* Print styles */
-@media print {
-    .pswp {
-        display: none !important;
-    }
-}

apps/client/src/stylesheets/style.css

@@ -139,6 +139,15 @@ textarea,
     color: var(--muted-text-color);
 }
 
+.form-group.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
 /* Add a gap between consecutive radios / check boxes */
 label.tn-radio + label.tn-radio,
 label.tn-checkbox + label.tn-checkbox {
@@ -1738,16 +1747,12 @@ button.close:hover {
     margin-bottom: 10px;
 }
 
-.options-number-input {
+.options-section input[type="number"] {
     /* overriding settings from .form-control */
     width: 10em !important;
     flex-grow: 0 !important;
 }
 
-.options-mime-types {
-    column-width: 250px;
-}
-
 textarea {
     cursor: auto;
 }

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

@@ -181,9 +181,7 @@ div.note-detail-empty {
 }
 
 .options-section:not(.tn-no-card) {
-    margin: auto;
-    min-width: var(--options-card-min-width);
-    max-width: var(--options-card-max-width);
+    margin: auto;    
     border-radius: 12px;
     border: 1px solid var(--card-border-color) !important;
     box-shadow: var(--card-box-shadow);
@@ -192,6 +190,11 @@ div.note-detail-empty {
     margin-bottom: calc(var(--options-title-offset) + 26px) !important;
 }
 
+body.desktop .option-section:not(.tn-no-card) {
+    min-width: var(--options-card-min-width);
+    max-width: var(--options-card-max-width);
+}
+
 .note-detail-content-widget-content.options {
     --default-padding: 15px;
     padding-top: calc(var(--default-padding) + var(--options-title-offset) + var(--options-title-font-size));
@@ -233,11 +236,6 @@ div.note-detail-empty {
     margin-bottom: 0;
 }
 
-.options-section .options-mime-types {
-    padding: 0;
-    margin: 0;
-}
-
 .options-section .form-group {
     margin-bottom: 1em;
 }

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

@@ -967,7 +967,7 @@
   },
   "protected_session": {
     "enter_password_instruction": "显示受保护的笔记需要输入您的密码：",
-    "start_session_button": "开始受保护的会话",
+    "start_session_button": "开始受保护的会话 <kbd>Enter</kbd>",
     "started": "受保护的会话已启动。",
     "wrong_password": "密码错误。",
     "protecting-finished-successfully": "保护操作已成功完成。",
@@ -1028,7 +1028,7 @@
     "error_creating_anonymized_database": "无法创建匿名化数据库，请检查后端日志以获取详细信息",
     "successfully_created_fully_anonymized_database": "成功创建完全匿名化的数据库，路径为 {{anonymizedFilePath}}",
     "successfully_created_lightly_anonymized_database": "成功创建轻度匿名化的数据库，路径为 {{anonymizedFilePath}}",
-    "no_anonymized_database_yet": "尚无匿名化数据库"
+    "no_anonymized_database_yet": "尚无匿名化数据库。"
   },
   "database_integrity_check": {
     "title": "数据库完整性检查",
@@ -1165,7 +1165,7 @@
   },
   "revisions_snapshot_interval": {
     "note_revisions_snapshot_interval_title": "笔记修订快照间隔",
-    "note_revisions_snapshot_description": "笔记修订快照间隔是创建新笔记修订的时间。有关更多信息，请参见 <a href=\"https://triliumnext.github.io/Docs/Wiki/note-revisions.html\" class=\"external\">wiki</a>。",
+    "note_revisions_snapshot_description": "笔记修订快照间隔是创建新笔记修订的时间。有关更多信息，请参见 <doc>wiki</doc>。",
     "snapshot_time_interval_label": "笔记修订快照时间间隔："
   },
   "revisions_snapshot_limit": {
@@ -1333,9 +1333,9 @@
     "oauth_title": "OAuth/OpenID 认证",
     "oauth_description": "OpenID 是一种标准化方式，允许您使用其他服务（如 Google）的账号登录网站来验证您的身份。默认的身份提供者是 Google，但您可以更改为任何其他 OpenID 提供者。点击<a href=\"#root/_hidden/_help/_help_Otzi9La2YAUX/_help_WOcw2SLH6tbX/_help_7DAiwaf8Z7Rz\">这里</a>了解更多信息。请参阅这些 <a href=\"https://developers.google.com/identity/openid-connect/openid-connect\">指南</a> 通过 Google 设置 OpenID 服务。",
     "oauth_description_warning": "要启用 OAuth/OpenID，您需要设置 config.ini 文件中的 OAuth/OpenID 基础 URL、客户端 ID 和客户端密钥，并重新启动应用程序。如果要从环境变量设置，请设置 TRILIUM_OAUTH_BASE_URL、TRILIUM_OAUTH_CLIENT_ID 和 TRILIUM_OAUTH_CLIENT_SECRET 环境变量。",
-    "oauth_missing_vars": "缺少以下设置项: {{missingVars}}",
-    "oauth_user_account": "用户账号：",
-    "oauth_user_email": "用户邮箱：",
+    "oauth_missing_vars": "缺少以下设置项：{{variables}}",
+    "oauth_user_account": "用户账号： ",
+    "oauth_user_email": "用户邮箱： ",
     "oauth_user_not_logged_in": "未登录！"
   },
   "shortcuts": {
@@ -1357,7 +1357,7 @@
     "enable": "启用拼写检查",
     "language_code_label": "语言代码",
     "language_code_placeholder": "例如 \"en-US\", \"de-AT\"",
-    "multiple_languages_info": "多种语言可以用逗号分隔，例如 \"en-US, de-DE, cs\"。",
+    "multiple_languages_info": "多种语言可以用逗号分隔，例如 \"en-US, de-DE, cs\"。 ",
     "available_language_codes_label": "可用的语言代码：",
     "restart-required": "拼写检查选项的更改将在应用重启后生效。"
   },
@@ -1878,7 +1878,7 @@
   },
   "custom_date_time_format": {
     "title": "自定义日期/时间格式",
-    "description": "通过<kbd></kbd>或工具栏的方式可自定义日期和时间格式，有关日期/时间格式字符串中各个字符的含义，请参阅<a href=\"https://day.js.org/docs/en/display/format\" target=\"_blank\" rel=\"noopener noreferrer\">Day.js docs</a>。",
+    "description": "通过<shortcut />或工具栏的方式可自定义日期和时间格式，有关日期/时间格式字符串中各个字符的含义，请参阅<doc>Day.js docs</doc>。",
     "format_string": "日期/时间格式字符串：",
     "formatted_time": "格式化后日期/时间："
   },
@@ -1992,11 +1992,12 @@
     "help_title": "显示关于此画面的更多信息"
   },
   "call_to_action": {
-    "next_theme_title": "新的 Trilium 主题已进入稳定版",
-    "next_theme_message": "有一段时间，我们一直在设计新的主题，为了让应用程序看起来更加现代。",
-    "next_theme_button": "切换至新的 Trilium 主题",
     "background_effects_title": "背景效果现已推出稳定版本",
     "background_effects_message": "在 Windows 装置上，背景效果现在已完全稳定。背景效果通过模糊背后的背景，为使用者界面增添一抹色彩。此技术也用于其他应用程序，例如 Windows 资源管理器。",
-    "background_effects_button": "启用背景效果"
+    "background_effects_button": "启用背景效果",
+    "next_theme_title": "试用新 Trilium 主题",
+    "next_theme_message": "当前使用旧版主题，要试用新主题吗？",
+    "next_theme_button": "试用新主题",
+    "dismiss": "关闭"
   }
 }

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

@@ -1253,7 +1253,12 @@
     "selected_provider": "Selected Provider",
     "selected_provider_description": "Choose the AI provider for chat and completion features",
     "select_model": "Select model...",
-    "select_provider": "Select provider..."
+    "select_provider": "Select provider...",
+    "ai_enabled": "AI features enabled",
+    "ai_disabled": "AI features disabled",
+    "no_models_found_online": "No models found. Please check your API key and settings.",
+    "no_models_found_ollama": "No Ollama models found. Please check if Ollama is running.",
+    "error_fetching": "Error fetching models: {{error}}"
   },
   "zoom_factor": {
     "title": "Zoom Factor (desktop build only)",
@@ -1310,7 +1315,7 @@
   },
   "revisions_snapshot_interval": {
     "note_revisions_snapshot_interval_title": "Note Revision Snapshot Interval",
-    "note_revisions_snapshot_description": "The Note revision snapshot interval is the time after which a new note revision will be created for the note. See <a href=\"https://triliumnext.github.io/Docs/Wiki/note-revisions.html\" class=\"external\">wiki</a> for more info.",
+    "note_revisions_snapshot_description": "The Note revision snapshot interval is the time after which a new note revision will be created for the note. See <doc>wiki</doc> for more info.",
     "snapshot_time_interval_label": "Note revision snapshot time interval:"
   },
   "revisions_snapshot_limit": {
@@ -1372,7 +1377,7 @@
   },
   "custom_date_time_format": {
     "title": "Custom Date/Time Format",
-    "description": "Customize the format of the date and time inserted via <kbd></kbd> or the toolbar. See <a href=\"https://day.js.org/docs/en/display/format\" target=\"_blank\" rel=\"noopener noreferrer\">Day.js docs</a> for available format tokens.",
+    "description": "Customize the format of the date and time inserted via <shortcut /> or the toolbar. See <doc>Day.js docs</doc> for available format tokens.",
     "format_string": "Format string:",
     "formatted_time": "Formatted date/time:"
   },
@@ -1994,11 +1999,22 @@
     "help_title": "Display more information about this screen"
   },
   "call_to_action": {
-    "next_theme_title": "The new Trilium theme is now stable",
-    "next_theme_message": "For a while now, we've been working on a new theme to give the application a more modern look.",
-    "next_theme_button": "Switch to the new Trilium theme",
+    "next_theme_title": "Try the new Trilium theme",
+    "next_theme_message": "You are currently using the legacy theme, would you like to try the new theme?",
+    "next_theme_button": "Try the new theme",
     "background_effects_title": "Background effects are now stable",
     "background_effects_message": "On Windows devices, background effects are now fully stable. The background effects adds a touch of color to the user interface by blurring the background behind it. This technique is also used in other applications such as Windows Explorer.",
-    "background_effects_button": "Enable background effects"
+    "background_effects_button": "Enable background effects",
+    "dismiss": "Dismiss"
+  },
+  "settings": {
+    "related_settings": "Related settings"
+  },
+  "settings_appearance": {
+    "related_code_blocks": "Color scheme for code blocks in text notes",
+    "related_code_notes": "Color scheme for code notes"
+  },
+  "units": {
+    "percentage": "%"
   }
 }

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

@@ -0,0 +1,22 @@
+{
+  "about": {
+    "title": "درباره Trilium Notes",
+    "homepage": "صفحه اصلی:",
+    "app_version": "نسخه برنامه:",
+    "db_version": "نسخه پایگاه داده:",
+    "sync_version": "نسخه منطبق:",
+    "build_date": "تاریخ ساخت:",
+    "build_revision": "نسخه بازنگری شده:",
+    "data_directory": "دایرکتوری داده:"
+  },
+  "toast": {
+    "critical-error": {
+      "title": "خطای بحرانی",
+      "message": "خطای بحرانی رخ داده که مانع از اجرای برنامه می شود\n\n {{message}}\n\nبه احتمال زیاد ناشی از خطای غیرمنتظره در اجرای ناموفق یک اسکریپت است. برنامه را در مد ایمن اجرا کنید و خطا را بررسی نمایید."
+    }
+  },
+  "add_link": {
+    "add_link": "افزودن لینک",
+    "note": "یادداشت"
+  }
+}

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

@@ -0,0 +1,147 @@
+{
+  "about": {
+    "title": "Lisätietoja Trilium Notes:ista",
+    "homepage": "Kotisivu:",
+    "app_version": "Sovelluksen versio:",
+    "db_version": "Tietokannan versio:",
+    "build_date": "Koontipäivämäärä:",
+    "data_directory": "Datakansio:",
+    "sync_version": "Synkronoinnin versio:",
+    "build_revision": "Sovelluksen versio:"
+  },
+  "toast": {
+    "critical-error": {
+      "title": "Kriittinen virhe"
+    },
+    "widget-error": {
+      "title": "Widgetin luonti epäonnistui"
+    }
+  },
+  "add_link": {
+    "add_link": "Lisää linkki",
+    "link_title": "Linkin otsikko",
+    "button_add_link": "Lisää linkki",
+    "note": "Muistio",
+    "search_note": "etsi muistiota sen nimellä"
+  },
+  "branch_prefix": {
+    "prefix": "Etuliite: ",
+    "save": "Tallenna"
+  },
+  "bulk_actions": {
+    "bulk_actions": "Massatoiminnot",
+    "available_actions": "Saatavilla olevat toiminnot",
+    "chosen_actions": "Valitut toiminnot",
+    "execute_bulk_actions": "Toteuta massatoiminnot",
+    "bulk_actions_executed": "Massatoiminnot on toteutettu onnistuneesti.",
+    "none_yet": "Ei vielä... lisää toiminto klikkaamalla jotiain yllä saatavilla olevaa yltä.",
+    "labels": "Merkit",
+    "relations": "Suhteet",
+    "notes": "Muistiot",
+    "other": "Muut",
+    "affected_notes": "Vaikuttaa muistioihin"
+  },
+  "clone_to": {
+    "clone_notes_to": "Kopioi muistiot...",
+    "help_on_links": "Apua linkkeihin",
+    "notes_to_clone": "Kopioitavat muistiot",
+    "target_parent_note": "Kohteen päämuistio",
+    "search_for_note_by_its_name": "ensi muistiota sen nimellä",
+    "cloned_note_prefix_title": "Kopioitu muistia näytetään puussa annetulla etuliitteellä",
+    "prefix_optional": "Etuliite (valinnainen)",
+    "clone_to_selected_note": "Kopioi valittuun muistioon",
+    "note_cloned": "Muistio \"{{clonedTitle}}\" on kopioitu \"{{targetTitle}}\""
+  },
+  "confirm": {
+    "confirmation": "Vahvistus",
+    "cancel": "Peruuta",
+    "ok": "OK",
+    "also_delete_note": "Poista myös muistio"
+  },
+  "delete_notes": {
+    "delete_notes_preview": "Poista muistion esikatselu",
+    "close": "Sulje",
+    "notes_to_be_deleted": "Seuraavat muistiot tullaan poistamaan ({{notesCount}})",
+    "no_note_to_delete": "Muistioita ei poisteta (vain kopiot).",
+    "cancel": "Peruuta",
+    "ok": "OK"
+  },
+  "export": {
+    "export_note_title": "Vie muistio",
+    "close": "Sulje",
+    "format_html": "HTML - suositeltu, sillä se säilyttää kaikki formatoinnit",
+    "format_markdown": "Markdown - tämä säilyttää suurimman osan formatoinneista.",
+    "opml_version_1": "OPML v1.0 - pelkkä teksti",
+    "opml_version_2": "OPML v2.0 - sallii myös HTML:n",
+    "export": "Vie",
+    "choose_export_type": "Valitse ensin viennin tyyppi",
+    "export_status": "Viennin tila",
+    "export_in_progress": "Vienti käynnissä: {{progressCount}}",
+    "export_finished_successfully": "Vienti valmistui onnistuneesti.",
+    "format_pdf": "PDF - tulostukseen ja jakamiseen."
+  },
+  "help": {
+    "title": "Lunttilappu",
+    "noteNavigation": "Muistion navigointi",
+    "goUpDown": "mene ylös/alas muistioiden listassa",
+    "collapseExpand": "pienennä/suurenna solmu",
+    "notSet": "ei asetettu",
+    "goBackForwards": "mene taaksepäin/eteenpäin historiassa",
+    "jumpToParentNote": "Hyppää ylempään muistioon",
+    "collapseWholeTree": "pienennä koko muistio puu",
+    "onlyInDesktop": "Vain työpöytänäkymässä (Electron build)",
+    "openEmptyTab": "Avaa tyhjä välilehti",
+    "closeActiveTab": "sulje aktiivinen välilehti",
+    "activateNextTab": "aktivoi seuraava välilehti",
+    "activatePreviousTab": "aktivoi edellinen välilehti",
+    "creatingNotes": "Luo muistiota",
+    "movingCloningNotes": "Siirrä / kopioi muistioita",
+    "moveNoteUpHierarchy": "siirrä muistio ylöspäin listassa",
+    "selectNote": "valitse muistio",
+    "editingNotes": "Muokkaa solmua",
+    "createEditLink": "luo / muokkaa ulkoista linkkiä",
+    "createInternalLink": "luo sisäinen linkki",
+    "insertDateTime": "lisää nykyinen päivämäärä ja aika hiiren kohdalle",
+    "troubleshooting": "Vianmääritys",
+    "reloadFrontend": "lataa Trilium:in käyttöliittymä",
+    "showDevTools": "näytä kehittäjätyökalut",
+    "showSQLConsole": "näytä SQL konsoli",
+    "other": "Muut"
+  },
+  "import": {
+    "importIntoNote": "Tuo muistioon",
+    "chooseImportFile": "Valitse tuonnin tiedosto",
+    "options": "Valinnat",
+    "safeImport": "Turvallinen tuonti",
+    "shrinkImages": "Kutista kuvat",
+    "replaceUnderscoresWithSpaces": "Korvaa alaviivat väleillä tuotujen muistioiden tiedostonimissä",
+    "import": "Tuo",
+    "failed": "Tuonti epäonnistui: {{message}}.",
+    "html_import_tags": {
+      "title": "HTML Tuonnin Tunnisteet",
+      "placeholder": "Lisää HTML tunnisteet, yksi per rivi"
+    },
+    "import-status": "Tuonnin tila",
+    "in-progress": "Tuonti vaiheessa: {{progress}}",
+    "successful": "Tuonti valmistui onnistuneesti."
+  },
+  "include_note": {
+    "dialog_title": "Sisällytä muistio",
+    "label_note": "Muistio",
+    "placeholder_search": "etsi muistiota sen nimellä",
+    "box_size_small": "pieni (~ 10 riviä)",
+    "box_size_medium": "keskisuuri (~ 30 riviä)",
+    "button_include": "Sisällytä muistio"
+  },
+  "info": {
+    "modalTitle": "Info viesti",
+    "closeButton": "Sulje",
+    "okButton": "OK"
+  },
+  "jump_to_note": {
+    "search_button": "Etsi koko tekstistä"
+  },
+  "call_to_action": {
+    "dismiss": "Hylkää"
+  }
+}

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

@@ -0,0 +1 @@
+{}

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

@@ -0,0 +1 @@
+{}

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

@@ -0,0 +1,41 @@
+{
+  "about": {
+    "title": "O notatkach Trilium",
+    "homepage": "Strona główna:",
+    "app_version": "Wersja aplikacji:",
+    "db_version": "Wersja bazy danych:",
+    "sync_version": "Wersja synchronizacji:",
+    "build_date": "Zbudowano:",
+    "build_revision": "Rewizja zbudowania:",
+    "data_directory": "Katalog z danymi:"
+  },
+  "toast": {
+    "critical-error": {
+      "title": "Błąd krytyczny",
+      "message": "Wystąpił krytyczny błąd uniemożliwiający uruchomienie aplikacji:\n\n{{message}}\n\nJest to spowodowane najprawdopodobniej niespodziewanym błędem skryptu. Spróbuj uruchomić aplikację ponownie w trybie bezpiecznym i zaadresuj problem."
+    }
+  },
+  "add_link": {
+    "add_link": "Dodaj link"
+  },
+  "branch_prefix": {
+    "save": "Zapisz"
+  },
+  "bulk_actions": {
+    "labels": "Etykiety",
+    "notes": "Notatki",
+    "other": "Inne",
+    "relations": "Powiązania"
+  },
+  "confirm": {
+    "ok": "OK",
+    "cancel": "Anuluj"
+  },
+  "delete_notes": {
+    "cancel": "Anuluj",
+    "close": "Zamknij"
+  },
+  "export": {
+    "close": "Zamknij"
+  }
+}

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

@@ -249,7 +249,7 @@
   },
   "prompt": {
     "title": "Prompt",
-    "ok": "OK <kbd>enter</kbd>",
+    "ok": "OK",
     "defaultTitle": "Prompt"
   },
   "protected_session_password": {
@@ -257,7 +257,7 @@
     "help_title": "Ajuda sobre notas protegidas",
     "close_label": "Fechar",
     "form_label": "Para prosseguir com a ação solicitada, você precisa iniciar uma sessão protegida digitando a senha:",
-    "start_button": "Iniciar sessão protegida <kbd>enter</kbd>"
+    "start_button": "Iniciar sessão protegida"
   },
   "recent_changes": {
     "title": "Alterações recentes",
@@ -306,12 +306,12 @@
     "sort_with_respect_to_different_character_sorting": "classificar de acordo com diferentes regras de ordenação de caracteres e colação em diferentes idiomas ou regiões.",
     "natural_sort_language": "Linguagem da ordenação natural",
     "the_language_code_for_natural_sort": "O código do idioma para ordenação natural, por exemplo, \"zh-CN\" para chinês.",
-    "sort": "Ordenar <kbd>enter</kbd>"
+    "sort": "Ordenar"
   },
   "upload_attachments": {
     "upload_attachments_to_note": "Enviar anexos para a nota",
     "choose_files": "Escolher arquivos",
-    "files_will_be_uploaded": "Os arquivos serão enviados como anexos para",
+    "files_will_be_uploaded": "Os arquivos serão enviados como anexos para {{noteTitle}}",
     "options": "Opções",
     "shrink_images": "Reduzir imagens",
     "upload": "Enviar",
@@ -409,6 +409,11 @@
     "template": "Esta nota aparecerá na seleção de modelos disponíveis ao criar uma nova nota",
     "toc": "<code>#toc</code> ou <code>#toc=show</code> irá forçar a exibição do Sumário, <code>#toc=hide</code> irá forçar que ele fique oculto. Se o rótulo não existir, será considerado o ajuste global",
     "color": "define a cor da nota na árvore de notas, links etc. Use qualquer valor de cor CSS válido, como 'red' ou #a13d5f",
-    "keyboard_shortcut": "Define um atalho de teclado que irá pular imediatamente para esta nota. Exemplo: 'ctrl+alt+e'. É necessário recarregar o frontend para que a alteração tenha efeito."
+    "keyboard_shortcut": "Define um atalho de teclado que irá pular imediatamente para esta nota. Exemplo: 'ctrl+alt+e'. É necessário recarregar o frontend para que a alteração tenha efeito.",
+    "hide_highlight_widget": "Ocultar o widget da lista de destaques",
+    "keep_current_hoisting": "Abrir este link não alterará o destaque, mesmo que a nota não seja exibível na subárvore destacada atual.",
+    "execute_button": "Titulo do botão que executará a nota de código atual",
+    "exclude_from_note_map": "Notas com este rótulo ficarão ocultas no Mapa de Notas",
+    "new_notes_on_top": "Novas notas serão criadas no topo da nota raiz, não na parte inferior."
   }
 }

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

@@ -0,0 +1,730 @@
+{
+  "add_link": {
+    "add_link": "Додати посилання",
+    "help_on_links": "Довідка щодо посилань",
+    "note": "Нотатка",
+    "search_note": "пошук нотатки за її назвою",
+    "link_title_mirrors": "заголовок посилання відображає поточний заголовок нотатки",
+    "link_title_arbitrary": "заголовок посилання можна змінювати довільно",
+    "link_title": "Заголовок посилання",
+    "button_add_link": "Додати посилання"
+  },
+  "branch_prefix": {
+    "save": "Зберегти",
+    "edit_branch_prefix": "Редагувати префікс гілки",
+    "help_on_tree_prefix": "Довідка щодо префіксу дерева",
+    "prefix": "Префікс: ",
+    "branch_prefix_saved": "Префікс гілки збережено."
+  },
+  "about": {
+    "app_version": "Версія програми:",
+    "db_version": "Версія БД:",
+    "build_date": "Дата збірки:",
+    "build_revision": "Ревізія збірки:",
+    "data_directory": "Каталог даних:",
+    "homepage": "Домашня сторінка:",
+    "title": "Про Trilium Notes",
+    "sync_version": "Версія синхронізації:"
+  },
+  "global_menu": {
+    "about": "Про Trilium Notes",
+    "menu": "Меню",
+    "options": "Параметри",
+    "open_new_window": "Відкрити Нове вікно",
+    "switch_to_mobile_version": "Перейти на мобільну версію",
+    "switch_to_desktop_version": "Перейти на версію для ПК",
+    "zoom": "Масштаб",
+    "toggle_fullscreen": "Увімкнути повноекранний режим",
+    "zoom_out": "Зменшити масштаб",
+    "reset_zoom_level": "Скинути масштабування",
+    "zoom_in": "Збільшити масштаб",
+    "configure_launchbar": "Налаштувати панель запуску",
+    "show_shared_notes_subtree": "Показати піддерево спільних нотаток",
+    "advanced": "Розширені",
+    "open_dev_tools": "Відкрити інструменти розробника",
+    "open_sql_console": "Відкрити консоль SQL",
+    "open_sql_console_history": "Відкрити історію консолі SQL",
+    "open_search_history": "Відкрити історію пошуку",
+    "show_backend_log": "Показати Backend Log",
+    "reload_hint": "Перезавантаження може допомогти з деякими візуальними збоями без перезавантаження всієї програми.",
+    "reload_frontend": "Перезавантажити інтерфейс",
+    "show_hidden_subtree": "Показати приховане піддерево",
+    "show_help": "Показати довідку",
+    "logout": "Вийти",
+    "show-cheatsheet": "Показати Шпаргалку",
+    "toggle-zen-mode": "Дзен-режим"
+  },
+  "modal": {
+    "help_title": "Показати більше інформації про це вікно"
+  },
+  "toast": {
+    "critical-error": {
+      "title": "Критична помилка",
+      "message": "Сталася критична помилка, яка перешкоджає запуску клієнтської програми:\n\n{{message}}\n\nНайімовірніше, це спричинено несподіваною помилкою скрипту. Спробуйте запустити програму в безпечному режимі та вирішити проблему."
+    },
+    "widget-error": {
+      "title": "Не вдалася ініціалізація віджета",
+      "message-custom": "Не вдалося ініціалізувати користувацький віджет із нотатки з ID \"{{id}}\" під назвою \"{{title}}\" через:\n\n{{message}}",
+      "message-unknown": "Невідомий віджет не вдалося ініціалізувати через:\n\n{{message}}"
+    },
+    "bundle-error": {
+      "title": "Не вдалося завантажити користувацький скрипт",
+      "message": "Скрипт з нотатки з ID \"{{id}}\" з заголовком \"{{title}}\" не вдалося виконати через:\n\n{{message}}"
+    }
+  },
+  "bulk_actions": {
+    "bulk_actions": "Масові дії",
+    "affected_notes": "Застосовані нотатки",
+    "available_actions": "Доступні дії",
+    "chosen_actions": "Обрані дії",
+    "execute_bulk_actions": "Виконання масових дій",
+    "bulk_actions_executed": "Масові дії успішно виконано.",
+    "none_yet": "Поки що немає... додайте дію, натиснувши одну з доступних вище.",
+    "include_descendants": "Включити нащадків вибраних нотаток",
+    "labels": "Мітки",
+    "relations": "Зв'язки",
+    "notes": "Нотатки",
+    "other": "Інше"
+  },
+  "clone_to": {
+    "clone_notes_to": "Клонувати нотатки до...",
+    "target_parent_note": "Цільова батьківська нотатка",
+    "search_for_note_by_its_name": "пошук нотатки за назвою",
+    "help_on_links": "Довідка щодо посилань",
+    "notes_to_clone": "Нотатки для клонування",
+    "cloned_note_prefix_title": "Клонована нотатка буде відображатися в дереві нотаток із заданим префіксом",
+    "prefix_optional": "Префікс (необов'язково)",
+    "clone_to_selected_note": "Клонувати до вибраної нотатки",
+    "no_path_to_clone_to": "Немає шляху для клонування.",
+    "note_cloned": "Нотатку \"{{clonedTitle}}\" було клоновано в \"{{targetTitle}}\""
+  },
+  "clipboard": {
+    "copied": "Нотатку(-и) було скопійовано в буфер.",
+    "copy_failed": "Не вдалося скопіювати в буфер через проблеми з дозволами.",
+    "copy_success": "Скопійовано в буфер."
+  },
+  "entrypoints": {
+    "sql-error": "Виникла помилка при виконанні запиту SQL: {{message}}"
+  },
+  "branches": {
+    "undeleting-notes-finished-successfully": "Нотатки вдало відновлено.",
+    "undeleting-notes-in-progress": "Відновлюємо нотатки: {{count}}",
+    "delete-notes-in-progress": "Видаляємо нотатки: {{count}}",
+    "delete-finished-successfully": "Нотатки вдало видалено."
+  },
+  "launcher_context_menu": {
+    "add-spacer": "Додати розділювач",
+    "reset": "Скинути"
+  },
+  "editable-text": {
+    "auto-detect-language": "Автовизначена"
+  },
+  "highlighting": {
+    "color-scheme": "Схема кольорів"
+  },
+  "code_block": {
+    "copy_title": "Скопіювати в буфер"
+  },
+  "classic_editor_toolbar": {
+    "title": "Форматування"
+  },
+  "editor": {
+    "title": "Редактор"
+  },
+  "editing": {
+    "editor_type": {
+      "label": "Панель інструментів форматування"
+    }
+  },
+  "confirm": {
+    "confirmation": "Підтвердження",
+    "cancel": "Скасувати",
+    "ok": "ОК",
+    "are_you_sure_remove_note": "Ви впевнені, що хочете видалити нотатку \"{{title}}\" з карти зв'язків? ",
+    "if_you_dont_check": "Якщо ви не позначите цей пункт, нотатку буде видалено лише з карти зв'язків.",
+    "also_delete_note": "Також видалити нотатку"
+  },
+  "delete_notes": {
+    "delete_notes_preview": "Видалити попередній перегляд нотаток",
+    "close": "Закрити",
+    "delete_all_clones_description": "Видалити також усі клони (можна скасувати в останніх змінах)",
+    "erase_notes_description": "Звичайне (м’яке) видалення лише позначає нотатки як видалені і їх можна відновити (у діалоговому вікні останніх змін) протягом певного періоду часу. Якщо позначити цю опцію, нотатки будуть видалені негайно і їх неможливо буде відновити.",
+    "erase_notes_warning": "Стерти нотатки назавжди (скасувати не можна), включаючи всі клони. Це призведе до перезавантаження програми.",
+    "notes_to_be_deleted": "Наступні нотатки будуть видалені ({{notesCount}})",
+    "no_note_to_delete": "Жодну нотатку не буде видалено (лише клони).",
+    "broken_relations_to_be_deleted": "Наступні зв'язки будуть розірвані та видалені ({{ relationCount}})",
+    "cancel": "Скасувати",
+    "ok": "ОК",
+    "deleted_relation_text": "Нотатка {{- note}} (буде видалена) посилається на зв'язок {{- relation}}, що походить з {{- source}}."
+  },
+  "export": {
+    "export_note_title": "Експорт нотатки",
+    "close": "Закрити",
+    "export_type_subtree": "Ця нотатка та всі її нащадки",
+    "format_html": "HTML – рекомендовано, оскільки зберігає форматування",
+    "format_html_zip": "HTML у ZIP-архіві – рекомендовано, зберігає форматування.",
+    "format_markdown": "Markdown – зберігає більшу частину форматування.",
+    "format_opml": "OPML – формат обміну структурами лише для тексту. Форматування, зображення та файли не включено.",
+    "opml_version_1": "OPML версії 1.0 – лише звичайний текст",
+    "opml_version_2": "OPML v2.0 - також дозволяє HTML",
+    "export_type_single": "Тільки ця нотатка без її нащадків",
+    "export": "Експорт",
+    "choose_export_type": "Спочатку виберіть тип експорту",
+    "export_status": "Статус експорту",
+    "export_in_progress": "Триває експорт: {{progressCount}}",
+    "export_finished_successfully": "Експорт успішно завершено.",
+    "format_pdf": "PDF – для друку або спільного використання."
+  },
+  "help": {
+    "title": "Шпаргалка",
+    "noteNavigation": "Навігація по нотатках",
+    "goUpDown": "переміститись вгору/вниз у списку нотаток",
+    "collapseExpand": "згорнути/розгорнути вузол",
+    "notSet": "не встановлено",
+    "goBackForwards": "повернутися назад / вперед в історії",
+    "showJumpToNoteDialog": "показати <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">діалогове вікно \"Перейти до\"</a>",
+    "scrollToActiveNote": "прокрутити до активної нотатки",
+    "jumpToParentNote": "перейти до батьківської нотатки",
+    "collapseWholeTree": "згорнути все дерево нотаток",
+    "collapseSubTree": "згорнути піддерево",
+    "tabShortcuts": "Швидкі клавіші вкладки",
+    "newTabNoteLink": "посилання на нотатку відкриває нотатку в новій вкладці",
+    "newTabWithActivationNoteLink": "посилання на нотатку відкривається та активує нотатку в новій вкладці",
+    "onlyInDesktop": "Тільки для ПК (збірка Electron)",
+    "openEmptyTab": "відкрити порожню вкладку",
+    "closeActiveTab": "закрити активну вкладку",
+    "activateNextTab": "активувати наступну вкладку",
+    "activatePreviousTab": "активувати попередню вкладку",
+    "creatingNotes": "Створення нотаток",
+    "createNoteAfter": "створити нову нотатку після активної нотатки",
+    "createNoteInto": "створити нову піднотатку в активній нотатці",
+    "editBranchPrefix": "редагувати <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/tree-concepts.html#prefix\">префікс</a> активного клону нотатки",
+    "movingCloningNotes": "Переміщення / клонування нотаток",
+    "moveNoteUpDown": "переміщення нотатки вгору/вниз у списку нотаток",
+    "moveNoteUpHierarchy": "перемістити нотатку вище в ієрархії",
+    "multiSelectNote": "множинний вибір нотатки вище/нижче",
+    "selectAllNotes": "вибрати всі нотатки на поточному рівні",
+    "selectNote": "вибрати нотатку",
+    "copyNotes": "копіювати активну нотатку (або поточний вибір) у буфер обміну (використовується для <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/cloning-notes.html#cloning-notes\">клонування</a>)",
+    "cutNotes": "вирізати поточну нотатку (або поточний вибір) у буфер обміну (використовується для переміщення нотаток)",
+    "pasteNotes": "вставити нотатку(и) як піднотатку в активну нотатку (яка або переміщується, або клонується залежно від того, чи була вона скопійована, чи вирізана в буфер обміну)",
+    "deleteNotes": "видалити нотатку / піддерево",
+    "editingNotes": "Редагування нотаток",
+    "editNoteTitle": "на панелі дерева перемкнеться з панелі дерева на заголовок нотатки. Введення з заголовку нотатки перемкне фокус на текстовий редактор. <kbd>Ctrl+.</kbd> перемкнеться назад з редактора на панель дерева.",
+    "createEditLink": "створити / редагувати зовнішнє посилання",
+    "createInternalLink": "створити внутрішнє посилання",
+    "followLink": "перейти за посиланням під курсором",
+    "insertDateTime": "вставити поточну дату та час у позицію курсору",
+    "jumpToTreePane": "перейти до панелі дерева та прокрутити до активної нотатки",
+    "markdownAutoformat": "Автоформатування, подібне до Markdown",
+    "headings": "<code>##</code>, <code>###</code>, <code>####</code> тощо, а потім пробіл для заголовків",
+    "bulletList": "<code>*</code> або <code>-</code> з пробілом для маркованого списку",
+    "numberedList": "<code>1.</code> або <code>1)</code>, а потім пробіл для нумерованого списку",
+    "blockQuote": "починайте рядок з <code>></code>, а потім пробіл для цитування блоку",
+    "troubleshooting": "Усунення несправностей",
+    "reloadFrontend": "перезавантажити інтерфейс Trilium",
+    "showDevTools": "показати інструменти розробника",
+    "showSQLConsole": "показати консоль SQL",
+    "other": "Інше",
+    "quickSearch": "фокус на швидкому введенні пошуку",
+    "inPageSearch": "пошук на сторінці"
+  },
+  "import": {
+    "importIntoNote": "Імпортувати в нотатку",
+    "chooseImportFile": "Вибрати файл імпорту",
+    "importDescription": "Вміст вибраного(их) файлу(ів) буде імпортовано як дочірню(і) нотатку(и) до",
+    "options": "Параметри",
+    "safeImportTooltip": "Експортовані файли Trilium <code>.zip</code> можуть містити виконувані скрипти, які можуть мати шкідливу поведінку. Безпечний імпорт деактивує автоматичне виконання всіх імпортованих скриптів. Зніміть позначку \"Безпечний імпорт\", лише якщо імпортований архів має містити виконувані скрипти, і ви повністю довіряєте вмісту файлу імпорту.",
+    "safeImport": "Безпечний імпорт",
+    "explodeArchivesTooltip": "Якщо цей прапорець позначено, Trilium читатиме файли <code>.zip</code>, <code>.enex</code> та <code>.opml</code> і створюватиме нотатки з файлів усередині цих архівів. Якщо прапорець знято, Trilium додаватиме самі архіви до нотатки.",
+    "explodeArchives": "Зчитати вміст архівів <code>.zip</code>, <code>.enex</code> та <code>.opml</code>.",
+    "shrinkImagesTooltip": "<p>Якщо ви позначите цей параметр, Trilium спробує зменшити імпортовані зображення шляхом масштабування та оптимізації, що може вплинути на сприйняту якість зображення. Якщо не позначити, зображення будуть імпортовані без змін.</p><p>Це не стосується імпорту <code>.zip</code> з метаданими, оскільки передбачається, що ці файли вже оптимізовані.</p>",
+    "shrinkImages": "Зменшити зображення",
+    "textImportedAsText": "Імпортувати HTML, Markdown та TXT як текстові нотатки, якщо це незрозуміло з метаданих",
+    "codeImportedAsCode": "Імпортувати розпізнані файли коду (наприклад, <code>.json</code>) як нотатки з кодом, якщо це незрозуміло з метаданих",
+    "replaceUnderscoresWithSpaces": "Замінити підкреслення пробілами в назвах імпортованих нотаток",
+    "import": "Імпорт",
+    "failed": "Помилка імпорту: {{message}}.",
+    "html_import_tags": {
+      "title": "Теги імпорту HTML",
+      "description": "Налаштуйте, які теги HTML слід зберігати під час імпорту нотаток. Теги, яких немає в цьому списку, будуть видалені під час імпорту. Деякі теги (наприклад, 'script') завжди видаляються з міркувань безпеки.",
+      "placeholder": "Введіть теги HTML, по одному на рядок",
+      "reset_button": "Скинути до Список за замовчуванням"
+    },
+    "import-status": "Статус імпорту",
+    "in-progress": "Триває імпорт: {{progress}}",
+    "successful": "Імпорт успішно завершено."
+  },
+  "prompt": {
+    "title": "Підказка",
+    "ok": "ОК",
+    "defaultTitle": "Підказка"
+  },
+  "protected_session_password": {
+    "modal_title": "Захищений сеанс",
+    "help_title": "Довідка щодо захищених нотаток",
+    "close_label": "Закрити",
+    "form_label": "Щоб продовжити запитувану дію, вам потрібно розпочати захищений сеанс, ввівши пароль:",
+    "start_button": "Розпочати захищений сеанс"
+  },
+  "recent_changes": {
+    "title": "Останні зміни",
+    "erase_notes_button": "Стерти видалені нотатки зараз",
+    "deleted_notes_message": "Видалені нотатки стерто.",
+    "no_changes_message": "Поки що жодних змін...",
+    "undelete_link": "відновити",
+    "confirm_undelete": "Ви хочете відновити цю нотатку та її піднотатки?"
+  },
+  "revisions": {
+    "note_revisions": "Версії нотаток",
+    "delete_all_revisions": "Видалити всі версії цієї нотатки",
+    "delete_all_button": "Видалити всі версії",
+    "help_title": "Довідка щодо версій нотаток",
+    "revision_last_edited": "Цю версію востаннє редагували {{date}}",
+    "confirm_delete_all": "Ви хочете видалити всі версії цієї нотатки?",
+    "no_revisions": "Поки що немає версій цієї нотатки...",
+    "restore_button": "Відновити",
+    "confirm_restore": "Ви хочете відновити цю версію? Це замінить поточний заголовок та вміст нотатки цієї версії.",
+    "delete_button": "Видалити",
+    "confirm_delete": "Ви хочете видалити цю версію?",
+    "revisions_deleted": "Версії нотаток видалено.",
+    "revision_restored": "Версію нотатки відновлено.",
+    "revision_deleted": "Версію нотатки видалено.",
+    "snapshot_interval": "Інтервал знімків версій нотатки: {{seconds}}s.",
+    "maximum_revisions": "Ліміт знімків версій нотатки: {{number}}.",
+    "settings": "Налаштування версій нотатки",
+    "download_button": "Завантажити",
+    "mime": "МІМЕ: ",
+    "file_size": "Розмір файлу:",
+    "preview": "Попередній перегляд:",
+    "preview_not_available": "Попередній перегляд недоступний для цього типу нотатки."
+  },
+  "include_note": {
+    "dialog_title": "Включити нотатку",
+    "label_note": "Нотатка",
+    "placeholder_search": "пошук нотатки за її назвою",
+    "box_size_prompt": "Розмір вмісту з вкладеною нотаткою:",
+    "box_size_small": "маленький (~ 10 рядків)",
+    "box_size_medium": "середній (~ 30 рядків)",
+    "box_size_full": "повний (вміст показує повний текст)",
+    "button_include": "Включити Нотатку"
+  },
+  "info": {
+    "modalTitle": "Інформаційне повідомлення",
+    "closeButton": "Закрити",
+    "okButton": "ОК"
+  },
+  "jump_to_note": {
+    "search_placeholder": "Пошук нотатки за її назвою або типом > для команд...",
+    "search_button": "Повнотекстовий Пошук"
+  },
+  "markdown_import": {
+    "dialog_title": "Імпорт з Markdown",
+    "modal_body_text": "Через \"пісочницю\" браузера неможливо безпосередньо зчитувати буфер обміну з JavaScript. Будь ласка, вставте код Markdown для імпорту в текстове поле нижче та натисніть кнопку \"Імпортувати\"",
+    "import_button": "Імпорт",
+    "import_success": "Вміст Markdown імпортовано в документ."
+  },
+  "move_to": {
+    "dialog_title": "Перемістити нотатки до ...",
+    "notes_to_move": "Нотатки для переміщення",
+    "search_placeholder": "пошук нотатки за її назвою",
+    "move_button": "Перейти до вибраної нотатки",
+    "error_no_path": "Немає шляху для переміщення.",
+    "move_success_message": "Вибрані нотатки переміщено до ",
+    "target_parent_note": "Цільова батьківська нотатка"
+  },
+  "note_type_chooser": {
+    "change_path_prompt": "Змінити місце створення нової нотатки:",
+    "search_placeholder": "пошук шляху за назвою (за замовчуванням, якщо порожня)",
+    "modal_title": "Вибрати тип нотатки",
+    "modal_body": "Вибрати тип/шаблон нової нотатки:",
+    "templates": "Шаблони",
+    "builtin_templates": "Вбудовані Шаблони"
+  },
+  "password_not_set": {
+    "title": "Пароль не встановлено",
+    "body1": "Захищені нотатки шифруються за допомогою пароля користувача, але пароль ще не встановлено.",
+    "body2": "Щоб захистити нотатки, натисніть кнопку нижче, щоб відкрити діалогове вікно Параметри та встановити пароль.",
+    "go_to_password_options": "Перейти до параметрів пароля"
+  },
+  "sort_child_notes": {
+    "sort_children_by": "Сортування дочірніх за...",
+    "sorting_criteria": "Критерії сортування",
+    "title": "заголовок",
+    "date_created": "дата створення",
+    "date_modified": "дата зміни",
+    "sorting_direction": "Напрямок сортування",
+    "ascending": "зростання",
+    "descending": "спадний",
+    "folders": "Папки",
+    "sort_folders_at_top": "сортувати папки зверху",
+    "natural_sort": "Нативне сортування",
+    "sort_with_respect_to_different_character_sorting": "сортувати з урахуванням різних правил сортування та порівняння символів у різних мовах або регіонах.",
+    "natural_sort_language": "Мова нативного сортування",
+    "the_language_code_for_natural_sort": "Код мови для нативного сортування, наприклад, \"zh-CN\" для китайської.",
+    "sort": "Сортування"
+  },
+  "upload_attachments": {
+    "upload_attachments_to_note": "Завантажити вкладення до нотатки",
+    "choose_files": "Вибрати файли",
+    "files_will_be_uploaded": "Файли будуть завантажені як вкладення до {{noteTitle}}",
+    "options": "Параметри",
+    "shrink_images": "Зменшити зображення",
+    "upload": "Скачати",
+    "tooltip": "Якщо ви позначите цей параметр, Trilium спробує зменшити розмір завантажених зображень шляхом масштабування та оптимізації, що може вплинути на сприйняту якість зображення. Якщо вимкнути цей параметр, зображення будуть завантажені без змін."
+  },
+  "attribute_detail": {
+    "attr_detail_title": "Деталі Атрибуту Заголовок",
+    "close_button_title": "Скасувати зміни та закрити",
+    "attr_is_owned_by": "Атрибут належить",
+    "attr_name_title": "Ім'я атрибута може складатися лише з буквено-цифрових символів, двокрапки та символу підкреслення",
+    "name": "Назва",
+    "value": "Значення",
+    "target_note_title": "Зв'язок — це іменований зв'язок між джерелом та цільовою нотаткою.",
+    "target_note": "Цільова нотатка",
+    "promoted_title": "Просунутий атрибут відображається на нотатці у помітному вигляді.",
+    "promoted": "Просунуті",
+    "promoted_alias_title": "Назва, яка відображатиметься в інтерфейсі просунутих атрибутів.",
+    "promoted_alias": "Псевдонім",
+    "multiplicity_title": "Множинність визначає, скільки атрибутів з однаковою назвою можна створити — максимум 1 або більше 1.",
+    "multiplicity": "Множинність",
+    "single_value": "Одне значення",
+    "multi_value": "Декілька значень",
+    "label_type_title": "Тип мітки допоможе Trilium вибрати відповідний інтерфейс для введення значення мітки.",
+    "label_type": "Тип",
+    "text": "Текст",
+    "number": "Номер",
+    "boolean": "Булева",
+    "date": "Дата",
+    "date_time": "Дата & Час",
+    "time": "Час",
+    "url": "URL",
+    "precision_title": "Яка кількість цифр після числа з плаваючою комою має бути доступна в інтерфейсі налаштування значень.",
+    "precision": "Точність",
+    "digits": "цифри",
+    "inverse_relation_title": "Додаткове налаштування для визначення, який зв'язок є зворотнім цьому зв'язку. Приклад: Батьківська - Дочірня інверсним зв'язком одне до одного.",
+    "inverse_relation": "Інверсний зв'язок",
+    "inheritable_title": "Спадковий атрибут буде успадкований усіма нащадками в цьому дереві.",
+    "inheritable": "Спадковий",
+    "save_and_close": "Зберегти & закрити <kbd>Ctrl+Enter</kbd>",
+    "delete": "Видалити",
+    "related_notes_title": "Інші нотатки з цією міткою",
+    "more_notes": "Більше нотаток",
+    "label": "Деталі Мітки",
+    "label_definition": "Деталі визначення мітки",
+    "relation": "Деталі зв'язку",
+    "relation_definition": "Деталі визначення зв'язку",
+    "disable_versioning": "вимикає автоматичне керування версіями. Корисно, наприклад, для великих, але неважливих нотаток, наприклад, великих JS-бібліотек, що використовуються для написання скриптів",
+    "calendar_root": "позначити нотатку, яка буде використовуватись для щоденника за замовчуванням. Тільки одна може бути такою.",
+    "archived": "нотатки з цією міткою не будуть видимими за замовчуванням у результатах пошуку (також у діалогових вікнах Перейти до..., Додати посилання... тощо).",
+    "exclude_from_export": "нотатки (з їхнім піддеревом) не будуть включені до жодного експорту нотаток",
+    "run": "визначає, за яких подій має запускатися скрипт. Можливі значення:\n<ul>\n<li>frontendStartup – коли запускається (або оновлюється) інтерфейс Trilium, але не на мобільному пристрої.</li>\n<li>mobileStartup – коли запускається (або оновлюється) інтерфейс Trilium на мобільному пристрої.</li>\n<li>backendStartup – коли запускається бекенд Trilium</li>\n<li>hourly – запускається раз на годину. Ви можете використовувати додаткову мітку <code>runAtHour</code>, щоб вказати, о котрій годині.</li>\n<li>daily – запускається раз на день</li>\n</ul>",
+    "run_on_instance": "Визначити, на якому екземплярі Trilium це має бути запущено. За замовчуванням використовувати всі екземпляри.",
+    "run_at_hour": "О котрій годині це має запускатися? Слід використовувати разом з <code>#run=hourly</code>. Можна визначити кілька разів для більшої кількості запусків протягом дня.",
+    "disable_inclusion": "скрипти з цією міткою не будуть включені до виконання базового скрипта.",
+    "sorted": "зберігає дочірні нотатки, відсортовані за заголовком в алфавітному порядку",
+    "sort_direction": "ASC (за замовчуванням) або DESC",
+    "sort_folders_first": "Папки (нотатки з дочірніми) слід сортувати зверху",
+    "top": "зберегти задану нотатку зверху в батьківській (застосовується лише до відсортованих батьківських)",
+    "hide_promoted_attributes": "Сховати просунуті атрибути для цієї нотатки",
+    "read_only": "редактор перебуває в режимі лише для читання. Працює лише для тексту та нотаток з кодом.",
+    "auto_read_only_disabled": "текстові/кодові нотатки можна автоматично перевести в режим читання, якщо вони занадто великі. Ви можете вимкнути цю поведінку для кожної окремої нотатки, додавши до неї цю позначку",
+    "app_css": "позначає CSS-нотатки, які завантажуються в програму Trilium і, таким чином, можуть бути використані для зміни зовнішнього вигляду Trilium.",
+    "app_theme": "позначає CSS-нотатки, які є повноцінними темами Trilium і тому доступні в параметрах Trilium.",
+    "app_theme_base": "встановіть значення \"наступна\", \"наступна-світла\" або \"наступна-темна\", щоб використовувати відповідну тему TriliumNext (автоматичну, світлу або темну) як основу для власної теми, замість застарілої.",
+    "css_class": "значення цієї мітки потім додається як CSS-клас до вузла, що представляє задану нотатку в дереві. Це може бути корисним для розширеного налаштування тем. Можна використовувати в шаблонах нотаток.",
+    "icon_class": "значення цієї мітки додається як CSS-клас до значка на дереві, що може допомогти візуально розрізнити нотатки в дереві. Прикладом може бути bx bx-home - значки взяті з boxicons. Можна використовувати в шаблонах нотаток.",
+    "page_size": "кількість елементів на сторінці у списку нотаток",
+    "custom_request_handler": "див. <a href=\"javascript:\" data-help-page=\"custom-request-handler.html\">Спеціальний обробник запитів</a>",
+    "custom_resource_provider": "див. <a href=\"javascript:\" data-help-page=\"custom-request-handler.html\">Спеціальний обробник запитів</a>",
+    "widget": "позначає цю нотатку як користувацький віджет, який буде додано до дерева компонентів Trilium",
+    "workspace": "позначає цю нотатку як робочу область, що дозволяє легко хостити",
+    "workspace_icon_class": "визначає значка CSS-класу, який буде використовуватися у вкладці при хостингу цієї нотатки",
+    "workspace_tab_background_color": "Колір CSS, що використовується у вкладці нотатки під час перенесення до цієї нотатки",
+    "workspace_calendar_root": "Визначає календар для кожного робочого простору",
+    "workspace_template": "Ця нотатка з'явиться у списку доступних шаблонів під час створення нової нотатки, але лише після перенесення її в робочу область, що містить цей шаблон",
+    "search_home": "нові пошукові нотатки будуть створені як дочірні елементи цієї нотатки",
+    "workspace_search_home": "нові пошукові нотатки будуть створені як дочірні елементи цієї нотатки після хостингу до якогось предка цієї нотатки робочої області",
+    "inbox": "розташування Вхідних за замовчуванням для нових нотаток – під час створення нотатки за допомогою кнопки Нова нотатка на бічній панелі, нотатки будуть створені як дочірні нотатки в нотатці з міткою <code>#inbox</code>.",
+    "workspace_inbox": "розташування Вхідні за замовчуванням для нових нотаток, коли вони переносяться до якоїсь батьківської нотатки в робочій області",
+    "sql_console_home": "розташування нотаток консолі SQL за замовчуванням",
+    "bookmark_folder": "нотатка з цією міткою відображатиметься в закладках як папка (що дозволить доступ до її дочірніх елементів)",
+    "share_hidden_from_tree": "ця нотатка прихована в лівому дереві навігації, але все ще доступна за її URL-адресою",
+    "share_external_link": "нотатка діятиме як посилання на зовнішній вебсайт у дереві спільного доступу",
+    "share_alias": "визначає псевдонім, за допомогою якого нотатка буде доступна за адресою https://your_trilium_host/share/[your_alias]",
+    "share_omit_default_css": "CSS сторінки спільного доступу за замовчуванням буде пропущено. Використовуйте, коли ви вносите значні зміни стилю.",
+    "share_description": "визначити текст, який буде додано до метатегу HTML для опису",
+    "share_raw": "нотатка буде надаватися у необробленому форматі, без HTML-оболонки",
+    "share_disallow_robot_indexing": "заборонити індексацію цієї нотатки роботами через заголовок <code>X-Robots-Tag: noindex</code>",
+    "share_credentials": "потрібні облікові дані для доступу до цієї спільної нотатки. Значення повинно бути у форматі «ім'я користувача:пароль». Не забудьте зробити це спадковим, щоб застосувати до дочірніх нотаток/зображень.",
+    "share_index": "нотатка з цією міткою відобразить список усіх коренів спільних нотаток",
+    "display_relations": "назви зв'язків, розділені комами, які слід відображати. Усі інші будуть приховані.",
+    "hide_relations": "назви зв'язків, розділені комами, які слід приховати. Усі інші будуть відображені.",
+    "title_template": "заголовок нотаток за замовчуванням, створених як дочірні елементи цієї нотатки. Значення оцінюється як рядок JavaScript\nі таким чином може бути збагачене динамічним контентом за допомогою вставлених змінних <code>now</code> та <code>parentNote</code>. Приклади:\n\n<ul>\nЛітературні твори <li><code>${parentNote.getLabelValue('authorName')}</code></li>\n<li><code>Журнал для ${now.format('РРРР-ММ-ДД ГГ:мм:сс')</code></li>\n</ul>\n\nДив. <a href=\"https://triliumnext.github.io/Docs/Wiki/default-note-title.html\">вікі з деталями</a>, документацію API для <a href=\"https://zadam.github.io/trilium/backend_api/Note.html\">parentNote</a> та <a href=\"https://day.js.org/docs/en/display/format\">now</a> для отримання детальної інформації.",
+    "template": "Ця нотатка з'явиться у списку доступних шаблонів під час створення нової нотатки",
+    "toc": "<code>#toc</code> або <code>#toc=show</code> примусово покаже Зміст, <code>#toc=hide</code> примусово приховає його. Якщо мітка не існує, дотримується глобального налаштування",
+    "color": "визначає колір нотатки в дереві нотаток, посиланнях тощо. Використовуйте будь-яке дійсне значення кольору CSS, наприклад, 'red' або #a13d5f",
+    "keyboard_shortcut": "Визначає комбінацію клавіш, щоб негайно перейти до цієї нотатки. Приклад: «ctrl+alt+e». Щоб зміни набули чинності, потрібне перезавантаження інтерфейсу.",
+    "keep_current_hoisting": "Відкриття цього посилання не змінить хостинг, навіть якщо нотатка не відображається в поточному піддереві хостінгу.",
+    "execute_button": "Назва кнопки, яка виконає поточну нотатку з кодом",
+    "execute_description": "Більш детальний опис поточного коду, що відображається разом із кнопкою виконання",
+    "exclude_from_note_map": "Нотатки з цією міткою будуть приховані на Карті Нотатки",
+    "new_notes_on_top": "Нові нотатки будуть створені зверху батьківської нотатки, а не знизу.",
+    "hide_highlight_widget": "Приховати віджет Списку виділення",
+    "run_on_note_creation": "виконується, коли нотатка створюється на серверній частині. Використовуйте цей зв'язок, якщо потрібно запустити скрипт для всіх нотаток, створених у певному піддереві. У такому випадку створіть його на батьківській нотатці піддерева та зробіть його успадковуваним. Нова нотатка, створена в піддереві (будь-якої глибини), запустить скрипт.",
+    "run_on_child_note_creation": "виконується, коли створюється нова нотатка під нотаткою, де визначено цей зв'язок",
+    "run_on_note_title_change": "виконується, коли змінюється заголовок нотатки (включає також створення нотатки)",
+    "run_on_note_content_change": "виконується, коли змінюється вміст нотатки (включаючи також створення нотатки).",
+    "run_on_note_change": "виконується, коли нотатку змінено (включає також створення нотатки). Не включає зміни вмісту",
+    "run_on_note_deletion": "виконується під час видалення нотатки",
+    "run_on_branch_creation": "виконується під час створення гілки. Гілка — це зв'язок між батьківською та дочірньою нотаткою та створюється, наприклад, під час клонування або переміщення нотатки.",
+    "run_on_branch_change": "виконується, коли гілка оновлюється.",
+    "run_on_branch_deletion": "виконується, коли гілку видаляють. Гілка — це зв'язок між батьківською та дочірньою нотатками та видаляється, наприклад, під час переміщення нотатки (стара гілка/посилання видаляється).",
+    "share_root": "позначає нотатку, яка подається на кореневому каталозі /share.",
+    "run_on_attribute_creation": "виконується, коли для нотатки створюється новий атрибут, який визначає цей зв'язок",
+    "run_on_attribute_change": " виконується, коли змінюється атрибут нотатки, яка визначає цей зв'язок. Це також спрацьовує, коли атрибут видаляється",
+    "relation_template": "атрибути нотатки будуть успадковані навіть без зв'язку \"батьківський-дочірній\", вміст нотатки та піддерево будуть додані до екземпляра нотатки, якщо він порожній. Див. документацію для отримання детальної інформації.",
+    "inherit": "атрибути нотатки будуть успадковані навіть без зв'язку «батьківський-дочірній». Див. шаблон зв'язку для подібної концепції. Див. успадкування атрибутів у документації.",
+    "render_note": "нотатки типу \"render HTML note\" будуть відображатися за допомогою нотатки з кодом (HTML або скрипта), і необхідно вказати за допомогою цього зв'язку, яку нотатку слід відображати",
+    "widget_relation": "ціль цього зв'язку буде виконано та відображено як віджет на бічній панелі",
+    "share_css": "CSS-нотатка, яка буде вставлена на сторінку спільного доступу. CSS-нотатка також має бути в спільному піддереві. Також розгляньте можливість використання 'share_hidden_from_tree' та 'share_omit_default_css'.",
+    "share_js": "JavaScript-нотатка, яка буде вставлена на сторінку спільного доступу. JS-нотатка також має бути в спільному піддереві. Розгляньте можливість використання 'share_hidden_from_tree'.",
+    "share_template": "Вбудована нотатка JavaScript, яка використовуватиметься як шаблон для відображення спільної нотатки. Повертатиметься до шаблону за замовчуванням. Розгляньте можливість використання 'share_hidden_from_tree'.",
+    "share_favicon": "Нотатку до значка веб-сторінки, яку потрібно встановити на спільній сторінці. Зазвичай потрібно встановити її як спільний кореневий каталог і зробити успадковуваною. Нотатку до значка веб-сторінки також потрібно розмістити у спільному піддереві. Розгляньте можливість використання 'share_hidden_from_tree'.",
+    "is_owned_by_note": "належить до нотатки",
+    "other_notes_with_name": "Інші нотатки з назвою {{attributeType}} \"{{attributeName}}\"",
+    "and_more": "... та ще {{count}}.",
+    "print_landscape": "Під час експорту в PDF змінює орієнтацію сторінки на альбомну замість портретної.",
+    "print_page_size": "Під час експорту в PDF змінює розмір сторінки. Підтримувані значення: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.",
+    "color_type": "Колір"
+  },
+  "multi_factor_authentication": {
+    "mfa_method": "Метод МФА"
+  },
+  "attribute_editor": {
+    "help_text_body1": "Щоб додати мітку, просто введіть, наприклад, <code>#rock</code> або, якщо ви хочете додати також значення, то, наприклад, <code>#year = 2020</code>",
+    "help_text_body2": "Для зв'язку введіть <code>~author = @</code>, що має викликати автозаповнення, де ви зможете знайти потрібну нотатку.",
+    "help_text_body3": "Або ж ви можете додати мітку та зв'язок за допомогою кнопки <code>+</code> праворуч.",
+    "save_attributes": "Зберегти атрибути <enter>",
+    "add_a_new_attribute": "Додати новий атрибут",
+    "add_new_label": "Додати нову мітку <kbd data-command=\"addNewLabel\"></kbd>",
+    "add_new_relation": "Додати новий зв'язок <kbd data-command=\"addNewRelation\"></kbd>",
+    "add_new_label_definition": "Додати нове визначення мітки",
+    "add_new_relation_definition": "Додати нове визначення зв'язку",
+    "placeholder": "Введіть мітки та зв'язки тут"
+  },
+  "abstract_bulk_action": {
+    "remove_this_search_action": "Видалити цю дію пошуку"
+  },
+  "execute_script": {
+    "execute_script": "Виконати скрипт",
+    "help_text": "Ви можете виконувати прості скрипти у нотатках, що збігаються.",
+    "example_1": "Наприклад, щоб додати рядок до заголовка нотатки, використовуйте цей невеликий скрипт:",
+    "example_2": "Більш складним прикладом може бути видалення всіх атрибутів нотаток, що збігаються:"
+  },
+  "add_label": {
+    "add_label": "Додати мітку",
+    "label_name_placeholder": "назва мітки",
+    "label_name_title": "Дозволено використовувати буквено-цифрові символи, підкреслення та двокрапку.",
+    "to_value": "до значення",
+    "new_value_placeholder": "нове значення",
+    "help_text": "У всіх нотатках, що збігаються:",
+    "help_text_item1": "створити вказану мітку, якщо нотатка ще її не має",
+    "help_text_item2": "або змінити значення існуючої мітки",
+    "help_text_note": "Ви також можете викликати цей метод без значення, у такому випадку мітку буде присвоєно нотатці без значення."
+  },
+  "delete_label": {
+    "delete_label": "Видалити мітку",
+    "label_name_placeholder": "назва мітки",
+    "label_name_title": "Дозволено використовувати буквено-цифрові символи, підкреслення та двокрапку."
+  },
+  "rename_label": {
+    "rename_label": "Перейменувати мітку",
+    "rename_label_from": "Перейменувати мітку з",
+    "old_name_placeholder": "стара назва",
+    "to": "До",
+    "new_name_placeholder": "нова назва",
+    "name_title": "Дозволено використовувати буквено-цифрові символи, підкреслення та двокрапку."
+  },
+  "update_label_value": {
+    "update_label_value": "Оновити значення мітки",
+    "label_name_placeholder": "назва мітки",
+    "label_name_title": "Дозволено використовувати буквено-цифрові символи, підкреслення та двокрапку.",
+    "to_value": "до значення",
+    "new_value_placeholder": "нове значення",
+    "help_text": "Для всіх нотаток, що збігаються, змініть значення існуючої мітки.",
+    "help_text_note": "Ви також можете викликати цей метод без значення, у такому випадку мітку буде присвоєно нотатці без значення."
+  },
+  "delete_note": {
+    "delete_note": "Видалити нотатку",
+    "delete_matched_notes": "Видалити нотатки, що збігаються",
+    "delete_matched_notes_description": "Це видалить нотатки, що збігаються.",
+    "undelete_notes_instruction": "Після видалення їх можна відновити в діалоговому вікні «Останні зміни».",
+    "erase_notes_instruction": "Щоб остаточно видалити нотатки, після видалення перейдіть до меню Опції -> Інше та натисніть кнопку «Стерти видалені нотатки зараз»."
+  },
+  "delete_revisions": {
+    "all_past_note_revisions": "Усі попередні версії нотаток, що збігаються, будуть видалені. Сама нотатка буде повністю збережена. Іншими словами, історія нотатки буде видалена.",
+    "delete_note_revisions": "Видалити версії нотаток"
+  },
+  "move_note": {
+    "on_all_matched_notes": "У всіх нотатках, що збігаються",
+    "move_note": "Перемістити нотатку",
+    "to": "до",
+    "target_parent_note": "цільова батьківська нотатка",
+    "move_note_new_parent": "перемістити нотатку до нового батьківського елемента, якщо нотатка має лише один батьківський елемент (тобто стара гілка видаляється, а нова гілка в новому батьківському елементі створюється)",
+    "clone_note_new_parent": "клонувати нотатку до нового батьківського елемента, якщо нотатка має кілька клонів/гілок (незрозуміло, яку гілку слід видалити)",
+    "nothing_will_happen": "нічого не станеться, якщо нотатку не можна перемістити до цільової нотатки (тобто це створить деревоподібний цикл)"
+  },
+  "rename_note": {
+    "example_note": "<code>Нотатка</code> – усі нотатки, що збігаються будуть перейменовані на \"Нотатка\"",
+    "example_new_title": "<code>NEW: ${note.title}</code> – назви нотаток, що збігаються, мають префікс 'НОВА:'",
+    "example_date_prefix": "<code>${note.dateCreatedObj.format('MM-DD:')}: ${note. Title}</code> - нотатки, що збігаються мають префікс у вигляді місяця та дати створення нотатки",
+    "rename_note": "Перейменувати нотатку",
+    "rename_note_title_to": "Перейменувати заголовок нотатки на",
+    "new_note_title": "новий заголовок нотатки",
+    "click_help_icon": "Натисніть значок довідки праворуч, щоб переглянути всі опції",
+    "evaluated_as_js_string": "Надане значення обчислюється як рядок JavaScript і тому може бути доповнено динамічним контентом за допомогою вставленої змінної <code>note</code> (нотатка перейменовується). Приклади:",
+    "api_docs": "Див. документацію API для <a href='https://zadam.github.io/trilium/backend_api/Note.html'>note</a> та її <a href='https://day.js.org/docs/en/display/format'>властивостей dateCreatedObj / utcDateCreatedObj</a> для отримання детальної інформації."
+  },
+  "add_relation": {
+    "create_relation_on_all_matched_notes": "Для всіх нотаток, що збігаються, створити задані зв'язки.",
+    "add_relation": "Додати зв'язок",
+    "relation_name": "назва зв'язку",
+    "allowed_characters": "Дозволено використовувати буквено-цифрові символи, підкреслення та двокрапку.",
+    "to": "до",
+    "target_note": "цільова нотатка"
+  },
+  "update_relation_target": {
+    "on_all_matched_notes": "У всіх нотатках, що збігаються",
+    "update_relation": "Оновити зв'язок",
+    "relation_name": "назва зв'язку",
+    "allowed_characters": "Дозволено використовувати буквено-цифрові символи, підкреслення та двокрапку.",
+    "to": "до",
+    "target_note": "цільова нотатка",
+    "change_target_note": "змінити цільову нотатку існуючого зв'язку",
+    "update_relation_target": "Оновити ціль зв'язку"
+  },
+  "search_script": {
+    "example_code": "// 1. попередня фільтрація за допомогою стандартного пошуку\nconst candidateNotes = api.searchForNotes(\"#journal\");\n\n// 2. застосування користувацьких критеріїв пошуку\nconst matchedNotes = candidateNotes\n    .filter(note => note.title.match(/[0-9]{1,2}\\. ?[0-9]{1,2}\\. ?[0-9]{4}/));\n\nreturn matchedNotes;"
+  },
+  "delete_relation": {
+    "delete_relation": "Видалити зв'язок",
+    "relation_name": "назва зв'язку",
+    "allowed_characters": "Дозволено використовувати буквено-цифрові символи, підкреслення та двокрапку."
+  },
+  "rename_relation": {
+    "rename_relation": "Перейменувати зв'язок",
+    "rename_relation_from": "Перейменувати зв'язок з",
+    "old_name": "стара назва",
+    "to": "До",
+    "new_name": "нова назва",
+    "allowed_characters": "Дозволено використовувати буквено-цифрові символи, підкреслення та двокрапку."
+  },
+  "attachments_actions": {
+    "open_externally": "Відкрити у зовнішній програмі",
+    "open_externally_title": "Файл буде відкрито в зовнішній програмі та відстежуватися на наявність змін. Після цього ви зможете завантажити змінену версію назад до Trilium.",
+    "open_custom": "Відкрити користувацький",
+    "open_custom_title": "Файл буде відкрито в зовнішній програмі та відстежуватися на наявність змін. Після цього ви зможете завантажити змінену версію назад до Trilium.",
+    "download": "Завантажити",
+    "rename_attachment": "Перейменувати вкладення",
+    "upload_new_revision": "Завантажити нову версію",
+    "copy_link_to_clipboard": "Копіювати посилання в буфер обміну",
+    "convert_attachment_into_note": "Перетворити вкладення на нотатку",
+    "delete_attachment": "Видалити вкладення",
+    "upload_success": "Нову версію вкладеного файлу завантажено.",
+    "upload_failed": "Не вдалося завантажити нову версію вкладеного файлу.",
+    "open_externally_detail_page": "Відкриття вкладення ззовні доступне лише зі сторінки з деталями, спочатку натисніть на деталі вкладення та повторіть дію.",
+    "open_custom_client_only": "Налаштування відкриття вкладень можна виконати лише з клієнтської версії для ПК.",
+    "delete_confirm": "Ви впевнені, що хочете видалити вкладення '{{title}}'?",
+    "delete_success": "Вкладення '{{title}}' видалено.",
+    "convert_confirm": "Ви впевнені, що хочете перетворити вкладення '{{title}}' на окрему нотатку?",
+    "convert_success": "Вкладення '{{title}}' перетворено на нотатку.",
+    "enter_new_name": "Будь ласка, введіть назву нового вкладення"
+  },
+  "calendar": {
+    "mon": "Пн",
+    "tue": "Вт",
+    "wed": "Ср",
+    "thu": "Чт",
+    "fri": "Пт",
+    "sat": "Сб",
+    "sun": "Нд",
+    "cannot_find_day_note": "Не вдається знайти денну нотатку",
+    "cannot_find_week_note": "Не вдається знайти нотатку тижня",
+    "january": "Січень",
+    "febuary": "Лютий",
+    "march": "Березень",
+    "april": "Квітень",
+    "may": "Травень",
+    "june": "Червень",
+    "july": "Липень",
+    "august": "Серпень",
+    "september": "Вересень",
+    "october": "Жовтень",
+    "november": "Листопад",
+    "december": "Грудень"
+  },
+  "close_pane_button": {
+    "close_this_pane": "Закрити цю панель"
+  },
+  "create_pane_button": {
+    "create_new_split": "Створити новий поділ"
+  },
+  "edit_button": {
+    "edit_this_note": "Редагувати цю нотатку"
+  },
+  "show_toc_widget_button": {
+    "show_toc": "Показати зміст"
+  },
+  "show_highlights_list_widget_button": {
+    "show_highlights_list": "Показати Список основних моментів"
+  },
+  "zen_mode": {
+    "button_exit": "Вихід з Дзен-режиму"
+  },
+  "sync_status": {
+    "unknown": "<p>Стан синхронізації буде відомий після початку наступної спроби синхронізації.</p><p>Натисніть, щоб запустити синхронізацію зараз.</p>",
+    "connected_with_changes": "<p>Підключено до сервера синхронізації. <br>Є деякі невиконані зміни, які ще потрібно синхронізувати.</p><p>Натисніть, щоб розпочати синхронізацію.</p>",
+    "connected_no_changes": "<p>Підключено до сервера синхронізації.<br>Усі зміни вже синхронізовано.</p><p>Натисніть, щоб розпочати синхронізацію.</p>",
+    "disconnected_with_changes": "<p>Встановлення з’єднання із сервером синхронізації не вдалося.<br>Є деякі невиконані зміни, які ще потрібно синхронізувати.</p><p>Натисніть, щоб розпочати синхронізацію.</p>",
+    "disconnected_no_changes": "<p>Встановлення з’єднання із сервером синхронізації не вдалося.<br>Усі відомі зміни синхронізовано.</p><p>Натисніть, щоб розпочати синхронізацію.</p>",
+    "in_progress": "Триває синхронізація із сервером."
+  },
+  "left_pane_toggle": {
+    "show_panel": "Показати панель",
+    "hide_panel": "Приховати панель"
+  },
+  "move_pane_button": {
+    "move_left": "Переміститися вліво",
+    "move_right": "Переміститися вправо"
+  },
+  "note_actions": {
+    "convert_into_attachment": "Перетворити на вкладення",
+    "re_render_note": "Повторно відобразити нотатку",
+    "search_in_note": "Пошук у нотатці",
+    "note_source": "Джерело нотатки",
+    "note_attachments": "Вкладення нотатки",
+    "open_note_externally": "Відкрити нотатку у зовнішній програмі",
+    "open_note_externally_title": "Файл буде відкрито в зовнішній програмі та відстежуватися на наявність змін. Після цього ви зможете завантажити змінену версію назад до Trilium.",
+    "open_note_custom": "Відкрити нотатку користувача",
+    "import_files": "Імпорт файлів",
+    "export_note": "Експорт нотатки",
+    "delete_note": "Видалити нотатку",
+    "print_note": "Друк нотатки",
+    "save_revision": "Зберегти версію",
+    "convert_into_attachment_failed": "Не вдалося конвертувати нотатку '{{title}}'.",
+    "convert_into_attachment_successful": "Нотатку '{{title}}' перетворено на вкладення.",
+    "convert_into_attachment_prompt": "Ви впевнені, що хочете перетворити нотатку '{{title}}' на вкладення батьківської нотатки?",
+    "print_pdf": "Експортувати як PDF..."
+  },
+  "onclick_button": {
+    "no_click_handler": "Віджет кнопки '{{componentId}}' не має визначеного обробника кліків"
+  },
+  "protected_session_status": {
+    "active": "Захищений сеанс активний. Натисніть, щоб вийти з захищеного сеансу.",
+    "inactive": "Натисніть, щоб увійти до захищеного сеансу"
+  },
+  "revisions_button": {
+    "note_revisions": "Версії нотатки"
+  }
+}

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

@@ -1,69 +1,80 @@
 {
-    "about": {
-        "homepage": "Trang chủ:",
-        "title": "Về Trilium Notes"
-    },
-    "add_link": {
-        "add_link": "Thêm liên kết",
-        "button_add_link": "Thêm liên kết"
-    },
-    "bulk_actions": {
-        "other": "Khác"
-    },
-    "branch_prefix": {
-        "save": "Lưu"
-    },
-    "confirm": {
-        "ok": "OK",
-        "cancel": "Huỷ"
-    },
-    "delete_notes": {
-        "close": "Đóng",
-        "ok": "OK",
-        "cancel": "Huỷ"
-    },
-    "export": {
-        "close": "Đóng"
-    },
-    "help": {
-        "other": "Khác"
-    },
-    "toast": {
-        "critical-error": {
-            "title": "Lỗi nghiêm trọng"
-        }
-    },
-    "import": {
-        "options": "Tuỳ chọn"
-    },
-    "info": {
-        "okButton": "OK",
-        "closeButton": "Đóng"
-    },
-    "move_to": {
-        "dialog_title": "Chuyển ghi chép tới..."
-    },
-    "prompt": {
-        "ok": "OK"
-    },
-    "protected_session_password": {
-        "close_label": "Đóng"
-    },
-    "revisions": {
-        "restore_button": "Khôi phục",
-        "delete_button": "Xoá"
-    },
-    "upload_attachments": {
-        "options": "Tuỳ chọn"
-    },
-    "attribute_detail": {
-        "name": "Tên",
-        "value": "Giá trị",
-        "text": "Văn bản",
-        "number": "Số",
-        "delete": "Xoá"
-    },
-    "rename_note": {
-        "rename_note": "Đổi tên ghi chép"
+  "about": {
+    "homepage": "Trang chủ:",
+    "title": "Về Trilium Notes"
+  },
+  "add_link": {
+    "add_link": "Thêm liên kết",
+    "button_add_link": "Thêm liên kết"
+  },
+  "bulk_actions": {
+    "other": "Khác"
+  },
+  "branch_prefix": {
+    "save": "Lưu"
+  },
+  "confirm": {
+    "ok": "OK",
+    "cancel": "Huỷ"
+  },
+  "delete_notes": {
+    "close": "Đóng",
+    "ok": "OK",
+    "cancel": "Huỷ"
+  },
+  "export": {
+    "close": "Đóng"
+  },
+  "help": {
+    "other": "Khác"
+  },
+  "toast": {
+    "critical-error": {
+      "title": "Lỗi nghiêm trọng"
     }
+  },
+  "import": {
+    "options": "Tuỳ chọn"
+  },
+  "info": {
+    "okButton": "OK",
+    "closeButton": "Đóng"
+  },
+  "move_to": {
+    "dialog_title": "Chuyển ghi chép tới..."
+  },
+  "prompt": {
+    "ok": "OK"
+  },
+  "protected_session_password": {
+    "close_label": "Đóng"
+  },
+  "revisions": {
+    "restore_button": "Khôi phục",
+    "delete_button": "Xoá"
+  },
+  "upload_attachments": {
+    "options": "Tuỳ chọn"
+  },
+  "attribute_detail": {
+    "name": "Tên",
+    "value": "Giá trị",
+    "text": "Văn bản",
+    "number": "Số",
+    "delete": "Xoá"
+  },
+  "rename_note": {
+    "rename_note": "Đổi tên ghi chép"
+  },
+  "add_label": {
+    "add_label": "Thêm nhãn",
+    "label_name_placeholder": "tên nhãn",
+    "help_text_item2": "hoặc thay đổi giá trị của nhãn có sẵn"
+  },
+  "rename_label": {
+    "rename_label": "Đặt lại tên nhãn"
+  },
+  "call_to_action": {
+    "dismiss": "Bỏ qua"
+  }
 }

apps/client/src/widgets/attachment_detail.ts

@@ -9,9 +9,6 @@ import contentRenderer from "../services/content_renderer.js";
 import toastService from "../services/toast.js";
 import type FAttachment from "../entities/fattachment.js";
 import type { EventData } from "../components/app_context.js";
-import appContext from "../components/app_context.js";
-import mediaViewer from "../services/media_viewer.js";
-import type { MediaItem } from "../services/media_viewer.js";
 
 const TPL = /*html*/`
 <div class="attachment-detail-widget">
@@ -68,12 +65,6 @@ const TPL = /*html*/`
 
         .attachment-content-wrapper img {
             margin: 10px;
-            cursor: zoom-in;
-            transition: opacity 0.2s;
-        }
-        
-        .attachment-content-wrapper img:hover {
-            opacity: 0.9;
         }
 
         .attachment-detail-wrapper.list-view .attachment-content-wrapper img, .attachment-detail-wrapper.list-view .attachment-content-wrapper video {
@@ -86,24 +77,6 @@ const TPL = /*html*/`
             max-width: 90%;
             object-fit: contain;
         }
-        
-        .attachment-lightbox-hint {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 5px 10px;
-            border-radius: 4px;
-            font-size: 12px;
-            opacity: 0;
-            transition: opacity 0.3s;
-            pointer-events: none;
-        }
-        
-        .attachment-content-wrapper:hover .attachment-lightbox-hint {
-            opacity: 1;
-        }
 
         .attachment-detail-wrapper.scheduled-for-deletion .attachment-content-wrapper img {
             filter: contrast(10%);
@@ -115,9 +88,7 @@ const TPL = /*html*/`
             <div class="attachment-actions-container"></div>
             <h4 class="attachment-title"></h4>
             <div class="attachment-details"></div>
-            <button class="btn btn-sm back-to-note-btn" style="margin-left: auto;" title="Back to Note">
-                <span class="bx bx-arrow-back"></span> Back to Note
-            </button>
+            <div style="flex: 1 1;"></div>
         </div>
 
         <div class="attachment-deletion-warning alert alert-info" style="margin-top: 15px;"></div>
@@ -153,14 +124,6 @@ export default class AttachmentDetailWidget extends BasicWidget {
         this.$widget.find(".attachment-detail-wrapper").empty().append($(TPL).find(".attachment-detail-wrapper").html());
         this.$wrapper = this.$widget.find(".attachment-detail-wrapper");
         this.$wrapper.addClass(this.isFullDetail ? "full-detail" : "list-view");
-        
-        // Setup back to note button (only show in full detail mode)
-        if (this.isFullDetail) {
-            const $backBtn = this.$wrapper.find('.back-to-note-btn');
-            $backBtn.on('click', () => this.handleBackToNote());
-        } else {
-            this.$wrapper.find('.back-to-note-btn').hide();
-        }
 
         if (!this.isFullDetail) {
             const $link = await linkService.createLink(this.attachment.ownerId, {
@@ -207,92 +170,7 @@ export default class AttachmentDetailWidget extends BasicWidget {
         this.$wrapper.find(".attachment-actions-container").append(this.attachmentActionsWidget.render());
 
         const { $renderedContent } = await contentRenderer.getRenderedContent(this.attachment, { imageHasZoom: this.isFullDetail });
-        const $contentWrapper = this.$wrapper.find(".attachment-content-wrapper");
-        $contentWrapper.append($renderedContent);
-        
-        // Add PhotoSwipe integration for image attachments
-        if (this.attachment.role === 'image') {
-            this.setupPhotoSwipeIntegration($contentWrapper);
-        }
-    }
-
-    setupPhotoSwipeIntegration($contentWrapper: JQuery<HTMLElement>) {
-        // Add lightbox hint
-        const $hint = $('<div class="attachment-lightbox-hint">Click to view in lightbox</div>');
-        $contentWrapper.css('position', 'relative').append($hint);
-        
-        // Find the image element
-        const $img = $contentWrapper.find('img');
-        if (!$img.length) return;
-        
-        // Setup click handler for lightbox with namespace for proper cleanup
-        $img.off('click.photoswipe').on('click.photoswipe', (e) => {
-            e.preventDefault();
-            e.stopPropagation();
-            
-            const item: MediaItem = {
-                src: $img.attr('src') || '',
-                alt: this.attachment.title,
-                title: this.attachment.title,
-                noteId: this.attachment.ownerId,
-                element: $img[0] as HTMLElement
-            };
-            
-            // Try to get actual dimensions
-            const imgElement = $img[0] as HTMLImageElement;
-            if (imgElement.naturalWidth && imgElement.naturalHeight) {
-                item.width = imgElement.naturalWidth;
-                item.height = imgElement.naturalHeight;
-            }
-            
-            mediaViewer.openSingle(item, {
-                bgOpacity: 0.95,
-                showHideOpacity: true,
-                pinchToClose: true,
-                closeOnScroll: false,
-                closeOnVerticalDrag: true,
-                wheelToZoom: true,
-                getThumbBoundsFn: () => {
-                    // Get position for zoom animation
-                    const rect = imgElement.getBoundingClientRect();
-                    return {
-                        x: rect.left,
-                        y: rect.top,
-                        w: rect.width
-                    };
-                }
-            }, {
-                onOpen: () => {
-                    console.log('Attachment image opened in lightbox');
-                },
-                onClose: () => {
-                    // Check if we're in attachment detail view and reset viewScope if needed
-                    const activeContext = appContext.tabManager.getActiveContext();
-                    if (activeContext?.viewScope?.viewMode === 'attachments' && 
-                        activeContext?.viewScope?.attachmentId === this.attachment.attachmentId) {
-                        // Reset to normal note view when closing lightbox from attachment detail
-                        activeContext.setNote(this.attachment.ownerId, { 
-                            viewScope: { viewMode: 'default' } 
-                        });
-                    }
-                    // Restore focus to the image
-                    $img.focus();
-                }
-            });
-        });
-        
-        // Add keyboard support
-        $img.attr('tabindex', '0')
-            .attr('role', 'button')
-            .attr('aria-label', 'Click to view in lightbox');
-        
-        // Use namespaced event for proper cleanup
-        $img.off('keydown.photoswipe').on('keydown.photoswipe', (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-                e.preventDefault();
-                $img.trigger('click');
-            }
-        });
+        this.$wrapper.find(".attachment-content-wrapper").append($renderedContent);
     }
 
     async copyAttachmentLinkToClipboard() {
@@ -326,43 +204,4 @@ export default class AttachmentDetailWidget extends BasicWidget {
             }
         }
     }
-    
-    async handleBackToNote() {
-        try {
-            const activeContext = appContext.tabManager.getActiveContext();
-            if (!activeContext) {
-                console.warn('No active context available for navigation');
-                return;
-            }
-            
-            if (!this.attachment.ownerId) {
-                console.error('Cannot navigate back: no owner ID available');
-                return;
-            }
-            
-            await activeContext.setNote(this.attachment.ownerId, { 
-                viewScope: { viewMode: 'default' } 
-            });
-        } catch (error) {
-            console.error('Failed to navigate back to note:', error);
-            toastService.showError('Failed to navigate back to note');
-        }
-    }
-    
-    cleanup() {
-        // Remove all event handlers before cleanup
-        const $contentWrapper = this.$wrapper?.find('.attachment-content-wrapper');
-        if ($contentWrapper?.length) {
-            const $img = $contentWrapper.find('img');
-            if ($img.length) {
-                // Remove namespaced event handlers
-                $img.off('.photoswipe');
-            }
-        }
-        
-        // Remove back button handler
-        this.$wrapper?.find('.back-to-note-btn').off('click');
-        
-        super.cleanup();
-    }
 }

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

@@ -414,7 +414,7 @@ export default class GlobalMenuWidget extends BasicWidget {
     }
 
     async fetchLatestVersion() {
-        const RELEASES_API_URL = "https://api.github.com/repos/TriliumNext/Notes/releases/latest";
+        const RELEASES_API_URL = "https://api.github.com/repos/TriliumNext/Trilium/releases/latest";
 
         const resp = await fetch(RELEASES_API_URL);
         const data = await resp.json();

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

@@ -2,6 +2,7 @@ import FlexContainer from "./flex_container.js";
 import appContext, { type CommandData, type CommandListenerData, type EventData, type EventNames, type NoteSwitchedContext } from "../../components/app_context.js";
 import type BasicWidget from "../basic_widget.js";
 import type NoteContext from "../../components/note_context.js";
+import Component from "../../components/component.js";
 
 interface NoteContextEvent {
     noteContext: NoteContext;
@@ -152,6 +153,8 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
         for (const ntxId of ntxIds) {
             this.$widget.find(`[data-ntx-id="${ntxId}"]`).remove();
 
+            const widget = this.widgets[ntxId];
+            recursiveCleanup(widget);
             delete this.widgets[ntxId];
         }
     }
@@ -237,3 +240,12 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
         return Promise.all(promises);
     }
 }
+
+function recursiveCleanup(widget: Component) {
+    for (const child of widget.children) {
+        recursiveCleanup(child);
+    }
+    if ("cleanup" in widget && typeof widget.cleanup === "function") {
+        widget.cleanup();
+    }
+}

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

@@ -107,7 +107,7 @@ function AddLinkDialogComponent() {
             }}
             show={shown}
         >
-            <FormGroup label={t("add_link.note")}>
+            <FormGroup label={t("add_link.note")} name="note">
                 <NoteAutocomplete
                     inputRef={autocompleteRef}
                     onChange={setSuggestion}

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

@@ -64,7 +64,7 @@ function BranchPrefixDialogComponent() {
             footer={<Button text={t("branch_prefix.save")} />}
             show={shown}
         >
-            <FormGroup label={t("branch_prefix.prefix")}>
+            <FormGroup label={t("branch_prefix.prefix")} name="prefix">
                 <div class="input-group">
                     <input class="branch-prefix-input form-control" value={prefix} ref={branchInput}
                         onChange={(e) => setPrefix((e.target as HTMLInputElement).value)} />

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

@@ -94,7 +94,8 @@ function AvailableActionsList() {
                     <td>{ actionGroup.title }:</td>
                     {actionGroup.actions.map(({ actionName, actionTitle }) =>
                         <Button
-                            small text={actionTitle}
+                            size="small"
+                            text={actionTitle}
                             onClick={() => bulk_action.addAction("_bulkAction", actionName)}
                         />
                     )}

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

@@ -3,6 +3,7 @@ import Button from "../react/Button";
 import Modal from "../react/Modal";
 import ReactBasicWidget from "../react/ReactBasicWidget";
 import { CallToAction, dismissCallToAction, getCallToActions } from "./call_to_action_definitions";
+import { t } from "../../services/i18n";
 
 function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActions: CallToAction[] }) {
     if (!activeCallToActions.length) {
@@ -25,12 +26,12 @@ function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActi
         <Modal
             className="call-to-action"
             size="md"
-            title="New features"
+            title={activeItem.title}
             show={shown}
             onHidden={() => setShown(false)}
             footerAlignment="between"
             footer={<>
-                <Button text="Dismiss" onClick={async () => {
+                <Button text={t("call_to_action.dismiss")} onClick={async () => {
                     await dismissCallToAction(activeItem.id);
                     goToNext();
                 }} />
@@ -43,7 +44,6 @@ function CallToActionDialogComponent({ activeCallToActions }: { activeCallToActi
                 )}
             </>}
         >
-            <h4>{activeItem.title}</h4>
             <p>{activeItem.message}</p>
         </Modal>
     )

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

@@ -65,7 +65,7 @@ const CALL_TO_ACTIONS: CallToAction[] = [
         id: "background_effects",
         title: t("call_to_action.background_effects_title"),
         message: t("call_to_action.background_effects_message"),
-        enabled: () => utils.isElectron() && window.glob.platform === "win32" && isNextTheme() && !options.is("backgroundEffects"),
+        enabled: () => false,
         buttons: [
             {
                 text: t("call_to_action.background_effects_button"),

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

@@ -69,15 +69,15 @@ function CloneToDialogComponent() {
         >
             <h5>{t("clone_to.notes_to_clone")}</h5>
             <NoteList style={{ maxHeight: "200px", overflow: "auto" }} noteIds={clonedNoteIds} />
-            <FormGroup label={t("clone_to.target_parent_note")}>
+            <FormGroup name="target-parent-note" label={t("clone_to.target_parent_note")}>
                 <NoteAutocomplete
                     placeholder={t("clone_to.search_for_note_by_its_name")}
                     onChange={setSuggestion}
                     inputRef={autoCompleteRef}
                 />      
             </FormGroup>
-            <FormGroup label={t("clone_to.prefix_optional")} title={t("clone_to.cloned_note_prefix_title")}>
-                <FormTextBox name="clone-prefix" onChange={setPrefix} />
+            <FormGroup name="clone-prefix" label={t("clone_to.prefix_optional")} title={t("clone_to.cloned_note_prefix_title")}>
+                <FormTextBox onChange={setPrefix} />
             </FormGroup>
         </Modal>
     )

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

@@ -4,7 +4,7 @@ import tree from "../../services/tree";
 import Button from "../react/Button";
 import FormCheckbox from "../react/FormCheckbox";
 import FormFileUpload from "../react/FormFileUpload";
-import FormGroup from "../react/FormGroup";
+import FormGroup, { FormMultiGroup } from "../react/FormGroup";
 import Modal from "../react/Modal";
 import RawHtml from "../react/RawHtml";
 import ReactBasicWidget from "../react/ReactBasicWidget";
@@ -55,11 +55,11 @@ function ImportDialogComponent() {
             footer={<Button text={t("import.import")} primary disabled={!files} />}
             show={shown}
         >
-            <FormGroup label={t("import.chooseImportFile")} description={<>{t("import.importDescription")} <strong>{ noteTitle }</strong></>}>
+            <FormGroup name="files" label={t("import.chooseImportFile")} description={<>{t("import.importDescription")} <strong>{ noteTitle }</strong></>}>
                 <FormFileUpload multiple onChange={setFiles} />
             </FormGroup>
 
-            <FormGroup label={t("import.options")}>
+            <FormMultiGroup label={t("import.options")}>
                 <FormCheckbox
                     name="safe-import" hint={t("import.safeImportTooltip")} label={t("import.safeImport")}
                     currentValue={safeImport} onChange={setSafeImport}
@@ -84,7 +84,7 @@ function ImportDialogComponent() {
                     name="replace-underscores-with-spaces" label={t("import.replaceUnderscoresWithSpaces")} 
                     currentValue={replaceUnderscoresWithSpaces} onChange={setReplaceUnderscoresWithSpaces}
                 />
-            </FormGroup>
+            </FormMultiGroup>
         </Modal>
     );
 }

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

@@ -43,7 +43,7 @@ function IncludeNoteDialogComponent() {
             footer={<Button text={t("include_note.button_include")} keyboardShortcut="Enter" />}
             show={shown}
         >
-            <FormGroup label={t("include_note.label_note")}>
+            <FormGroup name="note" label={t("include_note.label_note")}>
                 <NoteAutocomplete
                     placeholder={t("include_note.placeholder_search")}
                     onChange={setSuggestion}
@@ -55,8 +55,9 @@ function IncludeNoteDialogComponent() {
                 />
             </FormGroup>
 
-            <FormGroup label={t("include_note.box_size_prompt")}>
-                <FormRadioGroup name="include-note-box-size"
+            <FormGroup name="include-note-box-size" label={t("include_note.box_size_prompt")}>
+                <FormRadioGroup
+                    name="include-note-box-size"
                     currentValue={boxSize} onChange={setBoxSize}
                     values={[
                         { label: t("include_note.box_size_small"), value: "small" },

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

@@ -57,7 +57,7 @@ function MoveToDialogComponent() {
             <h5>{t("move_to.notes_to_move")}</h5>
             <NoteList branchIds={movedBranchIds} />
 
-            <FormGroup label={t("move_to.target_parent_note")}>
+            <FormGroup name="parent-note" label={t("move_to.target_parent_note")}>
                 <NoteAutocomplete
                     onChange={setSuggestion}
                     inputRef={autoCompleteRef}

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

@@ -83,7 +83,7 @@ function NoteTypeChooserDialogComponent() {
             show={shown}
             stackable
         >
-            <FormGroup label={t("note_type_chooser.change_path_prompt")}>
+            <FormGroup name="parent-note" label={t("note_type_chooser.change_path_prompt")}>
                 <NoteAutocomplete
                     onChange={setParentNote}
                     placeholder={t("note_type_chooser.search_placeholder")}
@@ -95,7 +95,7 @@ function NoteTypeChooserDialogComponent() {
                 />
             </FormGroup>
 
-            <FormGroup label={t("note_type_chooser.modal_body")}>
+            <FormGroup name="note-type" label={t("note_type_chooser.modal_body")}>
                 <FormList onSelect={onNoteTypeSelected}>
                     {noteTypes.map((_item) => {
                         if (_item.title === "----") {     

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

@@ -25,6 +25,7 @@ export interface PromptDialogOptions {
     defaultValue?: string;
     shown?: PromptShownDialogCallback;
     callback?: (value: string | null) => void;
+    readOnly?: boolean;
 }
 
 function PromptDialogComponent() {    
@@ -32,24 +33,26 @@ function PromptDialogComponent() {
     const formRef = useRef<HTMLFormElement>(null);
     const labelRef = useRef<HTMLLabelElement>(null);
     const answerRef = useRef<HTMLInputElement>(null);
-    const [ opts, setOpts ] = useState<PromptDialogOptions>();
-    const [ value, setValue ] = useState("");    
+    const opts = useRef<PromptDialogOptions>();
+    const [ value, setValue ] = useState("");
     const [ shown, setShown ] = useState(false);
+    const submitValue = useRef<string>(null);
     
-    useTriliumEvent("showPromptDialog", (opts) => {
-        setOpts(opts);
+    useTriliumEvent("showPromptDialog", (newOpts) => {
+        opts.current = newOpts;
+        setValue(newOpts.defaultValue ?? "");
         setShown(true);
     })
 
     return (
         <Modal
             className="prompt-dialog"
-            title={opts?.title ?? t("prompt.title")}
+            title={opts.current?.title ?? t("prompt.title")}
             size="lg"
             zIndex={2000}
             modalRef={modalRef} formRef={formRef}            
             onShown={() => {
-                opts?.shown?.({
+                opts.current?.shown?.({
                     $dialog: refToJQuerySelector(modalRef),
                     $question: refToJQuerySelector(labelRef),
                     $answer: refToJQuerySelector(answerRef),
@@ -58,24 +61,25 @@ function PromptDialogComponent() {
                 answerRef.current?.focus();
             }}
             onSubmit={() => {
-                const modal = BootstrapModal.getOrCreateInstance(modalRef.current!);
-                modal.hide();
-
-                opts?.callback?.(value);
+                submitValue.current = value;
+                setShown(false);
             }}
             onHidden={() => {
-                opts?.callback?.(null);
                 setShown(false);
+                opts.current?.callback?.(submitValue.current);
+                submitValue.current = null;
+                opts.current = undefined;
             }}
             footer={<Button text={t("prompt.ok")} keyboardShortcut="Enter" primary />}
             show={shown}
             stackable
         >
-            <FormGroup label={opts?.message} labelRef={labelRef}>
+            <FormGroup name="prompt-dialog-answer" label={opts.current?.message} labelRef={labelRef}>
                 <FormTextBox
-                    name="prompt-dialog-answer"
                     inputRef={answerRef}
-                    currentValue={value} onChange={setValue} />
+                    currentValue={value} onChange={setValue}
+                    readOnly={opts.current?.readOnly}
+                />
             </FormGroup>
         </Modal>
     );

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

@@ -57,7 +57,8 @@ function RecentChangesDialogComponent() {
             header={
                 <Button
                     text={t("recent_changes.erase_notes_button")}
-                    small style={{ padding: "0 10px" }}
+                    size="small"
+                    style={{ padding: "0 10px" }}
                     onClick={() => {
                         server.post("notes/erase-deleted-notes-now").then(() => {
                             setNeedsRefresh(true);

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

@@ -55,7 +55,7 @@ function RevisionsDialogComponent() {
             helpPageId="vZWERwf8U3nx"
             bodyStyle={{ display: "flex", height: "80vh" }}
             header={
-                (!!revisions?.length && <Button text={t("revisions.delete_all_revisions")} small style={{ padding: "0 10px" }}
+                (!!revisions?.length && <Button text={t("revisions.delete_all_revisions")} size="small" style={{ padding: "0 10px" }}
                     onClick={async () => {
                         const text = t("revisions.confirm_delete_all");
 

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

@@ -83,11 +83,8 @@ function SortChildNotesDialogComponent() {
                 label={t("sort_child_notes.sort_with_respect_to_different_character_sorting")}
                 currentValue={sortNatural} onChange={setSortNatural}
             />
-            <FormGroup className="form-check" label={t("sort_child_notes.natural_sort_language")} description={t("sort_child_notes.the_language_code_for_natural_sort")}>
-                <FormTextBox
-                    name="sort-locale"                                        
-                    currentValue={sortLocale} onChange={setSortLocale}
-                />
+            <FormGroup name="sort-locale" className="form-check" label={t("sort_child_notes.natural_sort_language")} description={t("sort_child_notes.the_language_code_for_natural_sort")}>
+                <FormTextBox currentValue={sortLocale} onChange={setSortLocale} />
             </FormGroup>
         </Modal>
     )

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

@@ -51,13 +51,12 @@ function UploadAttachmentsDialogComponent() {
             onHidden={() => setShown(false)}
             show={shown}
         >
-            <FormGroup label={t("upload_attachments.choose_files")} description={description}>
+            <FormGroup name="files" label={t("upload_attachments.choose_files")} description={description}>
                 <FormFileUpload onChange={setFiles} multiple />
             </FormGroup>
 
-            <FormGroup label={t("upload_attachments.options")}>
-                <FormCheckbox
-                    name="shrink-images"
+            <FormGroup name="shrink-images" label={t("upload_attachments.options")}>
+                <FormCheckbox                    
                     hint={t("upload_attachments.tooltip")} label={t("upload_attachments.shrink_images")}
                     currentValue={shrinkImages} onChange={setShrinkImages}
                 />

apps/client/src/widgets/embedded_image_gallery.ts

@@ -1,549 +0,0 @@
-/**
- * Embedded Image Gallery Widget
- * Handles image galleries within text notes and other content types
- */
-
-import BasicWidget from "./basic_widget.js";
-import galleryManager from "../services/gallery_manager.js";
-import mediaViewer from "../services/media_viewer.js";
-import type { GalleryItem, GalleryConfig } from "../services/gallery_manager.js";
-import type { MediaViewerCallbacks } from "../services/media_viewer.js";
-import utils from "../services/utils.js";
-
-const TPL = /*html*/`
-<style>
-    .embedded-gallery-trigger {
-        position: relative;
-        display: inline-block;
-        cursor: pointer;
-        user-select: none;
-    }
-    
-    .embedded-gallery-trigger::after {
-        content: '';
-        position: absolute;
-        top: 8px;
-        right: 8px;
-        width: 32px;
-        height: 32px;
-        background: rgba(0, 0, 0, 0.6);
-        border-radius: 4px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        opacity: 0;
-        transition: opacity 0.2s;
-        pointer-events: none;
-    }
-    
-    .embedded-gallery-trigger:hover::after {
-        opacity: 1;
-    }
-    
-    .embedded-gallery-trigger.has-gallery::after {
-        content: '\\f0660'; /* Gallery icon from boxicons font */
-        font-family: 'boxicons';
-        color: white;
-        font-size: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        line-height: 32px;
-        text-align: center;
-    }
-    
-    .gallery-indicator {
-        position: absolute;
-        top: 8px;
-        left: 8px;
-        background: rgba(0, 0, 0, 0.7);
-        color: white;
-        padding: 4px 8px;
-        border-radius: 4px;
-        font-size: 12px;
-        font-weight: bold;
-        pointer-events: none;
-        z-index: 1;
-    }
-    
-    .image-grid-view {
-        display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-        gap: 16px;
-        padding: 16px;
-    }
-    
-    .image-grid-item {
-        position: relative;
-        aspect-ratio: 1;
-        overflow: hidden;
-        border-radius: 8px;
-        cursor: pointer;
-        transition: transform 0.2s, box-shadow 0.2s;
-        background: var(--accented-background-color);
-    }
-    
-    .image-grid-item:hover {
-        transform: scale(1.05);
-        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
-    }
-    
-    .image-grid-item img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
-    
-    .image-grid-caption {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
-        color: white;
-        padding: 8px;
-        font-size: 12px;
-        opacity: 0;
-        transition: opacity 0.2s;
-    }
-    
-    .image-grid-item:hover .image-grid-caption {
-        opacity: 1;
-    }
-    
-    /* Mobile optimizations */
-    @media (max-width: 768px) {
-        .image-grid-view {
-            grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-            gap: 8px;
-            padding: 8px;
-        }
-        
-        .gallery-indicator {
-            font-size: 10px;
-            padding: 2px 4px;
-        }
-    }
-</style>
-`;
-
-interface ImageElement {
-    element: HTMLImageElement;
-    src: string;
-    alt?: string;
-    title?: string;
-    caption?: string;
-    noteId?: string;
-    index: number;
-}
-
-export default class EmbeddedImageGallery extends BasicWidget {
-    private galleryItems: GalleryItem[] = [];
-    private imageElements: Map<HTMLElement, ImageElement> = new Map();
-    private observer?: MutationObserver;
-    private processingQueue: Set<HTMLElement> = new Set();
-    
-    doRender(): JQuery<HTMLElement> {
-        this.$widget = $(TPL);
-        this.setupMutationObserver();
-        return this.$widget;
-    }
-    
-    /**
-     * Initialize gallery for a container element
-     */
-    async initializeGallery(
-        container: HTMLElement | JQuery<HTMLElement>,
-        options?: {
-            selector?: string;
-            autoEnhance?: boolean;
-            gridView?: boolean;
-            galleryConfig?: GalleryConfig;
-        }
-    ): Promise<void> {
-        const $container = $(container);
-        const selector = options?.selector || 'img';
-        const autoEnhance = options?.autoEnhance !== false;
-        const gridView = options?.gridView || false;
-        
-        // Find all images in the container
-        const images = $container.find(selector).toArray() as HTMLImageElement[];
-        
-        if (images.length === 0) {
-            return;
-        }
-        
-        // Create gallery items
-        this.galleryItems = await this.createGalleryItems(images, $container);
-        
-        if (gridView) {
-            // Create grid view
-            this.createGridView($container, this.galleryItems);
-        } else if (autoEnhance) {
-            // Enhance individual images
-            this.enhanceImages(images);
-        }
-    }
-    
-    /**
-     * Create gallery items from image elements
-     */
-    private async createGalleryItems(
-        images: HTMLImageElement[],
-        $container: JQuery<HTMLElement>
-    ): Promise<GalleryItem[]> {
-        const items: GalleryItem[] = [];
-        
-        for (let i = 0; i < images.length; i++) {
-            const img = images[i];
-            
-            // Skip already processed images
-            if (img.dataset.galleryProcessed === 'true') {
-                continue;
-            }
-            
-            const item: GalleryItem = {
-                src: img.src,
-                alt: img.alt || `Image ${i + 1}`,
-                title: img.title || img.alt,
-                element: img,
-                index: i,
-                width: img.naturalWidth || undefined,
-                height: img.naturalHeight || undefined
-            };
-            
-            // Extract caption from figure element
-            const $img = $(img);
-            const $figure = $img.closest('figure');
-            if ($figure.length) {
-                const $caption = $figure.find('figcaption');
-                if ($caption.length) {
-                    item.caption = $caption.text();
-                }
-            }
-            
-            // Check for note ID in data attributes or URL
-            item.noteId = this.extractNoteId(img);
-            
-            // Get dimensions if not available
-            if (!item.width || !item.height) {
-                try {
-                    const dimensions = await mediaViewer.getImageDimensions(img.src);
-                    item.width = dimensions.width;
-                    item.height = dimensions.height;
-                } catch (error) {
-                    console.warn('Failed to get image dimensions:', error);
-                }
-            }
-            
-            items.push(item);
-            
-            // Store image element data
-            this.imageElements.set(img, {
-                element: img,
-                src: img.src,
-                alt: item.alt,
-                title: item.title,
-                caption: item.caption,
-                noteId: item.noteId,
-                index: i
-            });
-            
-            // Mark as processed
-            img.dataset.galleryProcessed = 'true';
-        }
-        
-        return items;
-    }
-    
-    /**
-     * Enhance individual images with gallery functionality
-     */
-    private enhanceImages(images: HTMLImageElement[]): void {
-        images.forEach((img, index) => {
-            const $img = $(img);
-            
-            // Wrap image in a trigger container if not already wrapped
-            if (!$img.parent().hasClass('embedded-gallery-trigger')) {
-                $img.wrap('<span class="embedded-gallery-trigger"></span>');
-            }
-            
-            const $trigger = $img.parent();
-            
-            // Add gallery indicator if multiple images
-            if (this.galleryItems.length > 1) {
-                $trigger.addClass('has-gallery');
-                
-                // Add count indicator
-                if (!$trigger.find('.gallery-indicator').length) {
-                    $trigger.prepend(`
-                        <span class="gallery-indicator" aria-label="Image ${index + 1} of ${this.galleryItems.length}">
-                            ${index + 1}/${this.galleryItems.length}
-                        </span>
-                    `);
-                }
-            }
-            
-            // Remove any existing click handlers
-            $img.off('click.gallery');
-            
-            // Add click handler to open gallery
-            $img.on('click.gallery', (e) => {
-                e.preventDefault();
-                e.stopPropagation();
-                this.openGallery(index);
-            });
-            
-            // Add keyboard support
-            $img.attr('tabindex', '0');
-            $img.attr('role', 'button');
-            $img.attr('aria-label', `${img.alt || 'Image'} - Click to open in gallery`);
-            
-            $img.on('keydown.gallery', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    this.openGallery(index);
-                }
-            });
-        });
-    }
-    
-    /**
-     * Create grid view of images
-     */
-    private createGridView($container: JQuery<HTMLElement>, items: GalleryItem[]): void {
-        const $grid = $('<div class="image-grid-view"></div>');
-        
-        items.forEach((item, index) => {
-            const $gridItem = $(`
-                <div class="image-grid-item" data-index="${index}" tabindex="0" role="button">
-                    <img src="${item.src}" alt="${item.alt}" loading="lazy" />
-                    ${item.caption ? `<div class="image-grid-caption">${item.caption}</div>` : ''}
-                </div>
-            `);
-            
-            $gridItem.on('click', () => this.openGallery(index));
-            $gridItem.on('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    this.openGallery(index);
-                }
-            });
-            
-            $grid.append($gridItem);
-        });
-        
-        // Replace container content with grid
-        $container.empty().append($grid);
-    }
-    
-    /**
-     * Open gallery at specified index
-     */
-    private openGallery(startIndex: number = 0): void {
-        if (this.galleryItems.length === 0) {
-            return;
-        }
-        
-        const config: GalleryConfig = {
-            showThumbnails: this.galleryItems.length > 1,
-            thumbnailHeight: 80,
-            autoPlay: false,
-            slideInterval: 4000,
-            showCounter: this.galleryItems.length > 1,
-            enableKeyboardNav: true,
-            enableSwipeGestures: true,
-            preloadCount: 2,
-            loop: true
-        };
-        
-        const callbacks: MediaViewerCallbacks = {
-            onOpen: () => {
-                console.log('Embedded gallery opened');
-                this.trigger('galleryOpened', { items: this.galleryItems, startIndex });
-            },
-            onClose: () => {
-                console.log('Embedded gallery closed');
-                this.trigger('galleryClosed');
-                
-                // Restore focus to the trigger element
-                const currentItem = this.galleryItems[galleryManager.getGalleryState()?.currentIndex || startIndex];
-                if (currentItem?.element) {
-                    (currentItem.element as HTMLElement).focus();
-                }
-            },
-            onChange: (index) => {
-                console.log('Gallery slide changed to:', index);
-                this.trigger('gallerySlideChanged', { index, item: this.galleryItems[index] });
-            },
-            onImageLoad: (index, item) => {
-                console.log('Gallery image loaded:', item.title);
-            },
-            onImageError: (index, item, error) => {
-                console.error('Failed to load gallery image:', error);
-            }
-        };
-        
-        if (this.galleryItems.length === 1) {
-            // Open single image
-            mediaViewer.openSingle(this.galleryItems[0], {
-                bgOpacity: 0.95,
-                showHideOpacity: true,
-                wheelToZoom: true,
-                pinchToClose: true
-            }, callbacks);
-        } else {
-            // Open gallery
-            galleryManager.openGallery(this.galleryItems, startIndex, config, callbacks);
-        }
-    }
-    
-    /**
-     * Extract note ID from image element
-     */
-    private extractNoteId(img: HTMLImageElement): string | undefined {
-        // Check data attribute
-        if (img.dataset.noteId) {
-            return img.dataset.noteId;
-        }
-        
-        // Try to extract from URL
-        const match = img.src.match(/\/api\/images\/([a-zA-Z0-9_]+)/);
-        if (match) {
-            return match[1];
-        }
-        
-        return undefined;
-    }
-    
-    /**
-     * Setup mutation observer to detect dynamically added images
-     */
-    private setupMutationObserver(): void {
-        this.observer = new MutationObserver((mutations) => {
-            const imagesToProcess: HTMLImageElement[] = [];
-            
-            mutations.forEach((mutation) => {
-                mutation.addedNodes.forEach((node) => {
-                    if (node.nodeType === Node.ELEMENT_NODE) {
-                        const element = node as HTMLElement;
-                        
-                        // Check if it's an image
-                        if (element.tagName === 'IMG') {
-                            imagesToProcess.push(element as HTMLImageElement);
-                        }
-                        
-                        // Check for images within the added element
-                        const images = element.querySelectorAll('img');
-                        images.forEach(img => imagesToProcess.push(img as HTMLImageElement));
-                    }
-                });
-            });
-            
-            if (imagesToProcess.length > 0) {
-                this.processNewImages(imagesToProcess);
-            }
-        });
-    }
-    
-    /**
-     * Process newly added images
-     */
-    private async processNewImages(images: HTMLImageElement[]): Promise<void> {
-        // Filter out already processed images
-        const newImages = images.filter(img => 
-            img.dataset.galleryProcessed !== 'true' && 
-            !this.processingQueue.has(img)
-        );
-        
-        if (newImages.length === 0) {
-            return;
-        }
-        
-        // Add to processing queue
-        newImages.forEach(img => this.processingQueue.add(img));
-        
-        try {
-            // Create gallery items for new images
-            const newItems = await this.createGalleryItems(newImages, $(document.body));
-            
-            // Add to existing gallery
-            this.galleryItems.push(...newItems);
-            
-            // Enhance the new images
-            this.enhanceImages(newImages);
-        } finally {
-            // Remove from processing queue
-            newImages.forEach(img => this.processingQueue.delete(img));
-        }
-    }
-    
-    /**
-     * Start observing a container for new images
-     */
-    observeContainer(container: HTMLElement): void {
-        if (!this.observer) {
-            this.setupMutationObserver();
-        }
-        
-        this.observer?.observe(container, {
-            childList: true,
-            subtree: true
-        });
-    }
-    
-    /**
-     * Stop observing
-     */
-    stopObserving(): void {
-        this.observer?.disconnect();
-    }
-    
-    /**
-     * Refresh gallery items
-     */
-    async refresh(): Promise<void> {
-        // Clear existing items
-        this.galleryItems = [];
-        this.imageElements.clear();
-        
-        // Mark all images as unprocessed
-        $('[data-gallery-processed="true"]').removeAttr('data-gallery-processed');
-        
-        // Re-initialize if there's a container
-        const $container = this.$widget?.parent();
-        if ($container?.length) {
-            await this.initializeGallery($container);
-        }
-    }
-    
-    /**
-     * Get current gallery items
-     */
-    getGalleryItems(): GalleryItem[] {
-        return this.galleryItems;
-    }
-    
-    /**
-     * Cleanup
-     */
-    cleanup(): void {
-        // Stop observing
-        this.stopObserving();
-        
-        // Close gallery if open
-        if (galleryManager.isGalleryOpen()) {
-            galleryManager.closeGallery();
-        }
-        
-        // Remove event handlers
-        $('[data-gallery-processed="true"]').off('.gallery');
-        
-        // Clear data
-        this.galleryItems = [];
-        this.imageElements.clear();
-        this.processingQueue.clear();
-        
-        super.cleanup();
-    }
-}

apps/client/src/widgets/media_viewer_widget.ts

@@ -1,573 +0,0 @@
-import { TypedBasicWidget } from "./basic_widget.js";
-import Component from "../components/component.js";
-import mediaViewerService from "../services/media_viewer.js";
-import type { MediaItem, MediaViewerConfig, MediaViewerCallbacks } from "../services/media_viewer.js";
-import type FNote from "../entities/fnote.js";
-import type { EventData } from "../components/app_context.js";
-import froca from "../services/froca.js";
-import utils from "../services/utils.js";
-import server from "../services/server.js";
-import toastService from "../services/toast.js";
-
-/**
- * MediaViewerWidget provides a modern lightbox experience for viewing images
- * and other media in Trilium Notes using PhotoSwipe 5.
- * 
- * This widget can be used in two modes:
- * 1. As a standalone viewer for a single note's media
- * 2. As a gallery viewer for multiple media items
- */
-export class MediaViewerWidget extends TypedBasicWidget<Component> {
-    private currentNoteId: string | null = null;
-    private galleryItems: MediaItem[] = [];
-    private isGalleryMode: boolean = false;
-    private clickHandlers: Map<HTMLElement, () => void> = new Map();
-    private boundKeyboardHandler: ((event: KeyboardEvent) => void) | null = null;
-
-    constructor() {
-        super();
-        this.setupGlobalHandlers();
-    }
-
-    /**
-     * Setup global event handlers for media viewing
-     */
-    private setupGlobalHandlers(): void {
-        // Store bound handler for proper cleanup
-        this.boundKeyboardHandler = this.handleKeyboard.bind(this);
-        document.addEventListener('keydown', this.boundKeyboardHandler);
-        
-        // Cleanup will be called by parent class
-    }
-
-    /**
-     * Handle keyboard shortcuts with error boundary
-     */
-    private handleKeyboard(event: KeyboardEvent): void {
-        try {
-            // Only handle if viewer is open
-            if (!mediaViewerService.isOpen()) {
-                return;
-            }
-
-            switch (event.key) {
-                case 'ArrowLeft':
-                    mediaViewerService.prev();
-                    event.preventDefault();
-                    break;
-                case 'ArrowRight':
-                    mediaViewerService.next();
-                    event.preventDefault();
-                    break;
-                case 'Escape':
-                    mediaViewerService.close();
-                    event.preventDefault();
-                    break;
-            }
-        } catch (error) {
-            console.error('Error handling keyboard event:', error);
-        }
-    }
-
-    /**
-     * Open viewer for a single image note with comprehensive error handling
-     */
-    async openImageNote(noteId: string, config?: Partial<MediaViewerConfig>): Promise<void> {
-        try {
-            const note = await froca.getNote(noteId);
-            if (!note || note.type !== 'image') {
-                toastService.showError('Note is not an image');
-                return;
-            }
-
-            const item: MediaItem = {
-                src: utils.createImageSrcUrl(note),
-                alt: note.title || `Image ${noteId}`,
-                title: note.title || `Image ${noteId}`,
-                noteId: noteId
-            };
-
-            // Try to get image dimensions from attributes
-            const widthAttr = note.getAttribute('label', 'imageWidth');
-            const heightAttr = note.getAttribute('label', 'imageHeight');
-            
-            if (widthAttr && heightAttr) {
-                const width = parseInt(widthAttr.value);
-                const height = parseInt(heightAttr.value);
-                if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) {
-                    item.width = width;
-                    item.height = height;
-                }
-            }
-            
-            // Get dimensions dynamically if not available
-            if (!item.width || !item.height) {
-                try {
-                    const dimensions = await mediaViewerService.getImageDimensions(item.src);
-                    item.width = dimensions.width;
-                    item.height = dimensions.height;
-                } catch (error) {
-                    console.warn('Failed to get image dimensions, using defaults:', error);
-                    // Use default dimensions as fallback
-                    item.width = 800;
-                    item.height = 600;
-                }
-            }
-
-            const callbacks: MediaViewerCallbacks = {
-                onOpen: () => this.onViewerOpen(noteId),
-                onClose: () => this.onViewerClose(noteId),
-                onImageError: (index, errorItem, error) => this.onImageError(errorItem, error)
-            };
-
-            mediaViewerService.openSingle(item, config, callbacks);
-            this.currentNoteId = noteId;
-
-        } catch (error) {
-            console.error('Failed to open image note:', error);
-            const errorMessage = error instanceof Error ? error.message : 'Failed to open image';
-            toastService.showError(errorMessage);
-        }
-    }
-
-    /**
-     * Open viewer for multiple images (gallery mode) with isolated error handling
-     */
-    async openGallery(noteIds: string[], startIndex: number = 0, config?: Partial<MediaViewerConfig>): Promise<void> {
-        try {
-            const items: MediaItem[] = [];
-            const errors: Array<{ noteId: string; error: unknown }> = [];
-
-            // Process each note with isolated error handling
-            await Promise.all(noteIds.map(async (noteId) => {
-                try {
-                    const note = await froca.getNote(noteId);
-                    if (!note || note.type !== 'image') {
-                        return; // Skip non-image notes silently
-                    }
-
-                    const item: MediaItem = {
-                        src: utils.createImageSrcUrl(note),
-                        alt: note.title || `Image ${noteId}`,
-                        title: note.title || `Image ${noteId}`,
-                        noteId: noteId
-                    };
-
-                    // Try to get dimensions
-                    const widthAttr = note.getAttribute('label', 'imageWidth');
-                    const heightAttr = note.getAttribute('label', 'imageHeight');
-                    
-                    if (widthAttr && heightAttr) {
-                        const width = parseInt(widthAttr.value);
-                        const height = parseInt(heightAttr.value);
-                        if (!isNaN(width) && !isNaN(height) && width > 0 && height > 0) {
-                            item.width = width;
-                            item.height = height;
-                        }
-                    }
-
-                    // Use default dimensions if not available
-                    if (!item.width || !item.height) {
-                        item.width = 800;
-                        item.height = 600;
-                    }
-
-                    items.push(item);
-                } catch (error) {
-                    console.error(`Failed to process note ${noteId}:`, error);
-                    errors.push({ noteId, error });
-                }
-            }));
-
-            if (items.length === 0) {
-                if (errors.length > 0) {
-                    toastService.showError('Failed to load any images');
-                } else {
-                    toastService.showMessage('No images to display');
-                }
-                return;
-            }
-
-            // Show warning if some images failed
-            if (errors.length > 0) {
-                toastService.showMessage(`Loaded ${items.length} images (${errors.length} failed)`);
-            }
-
-            // Validate and adjust start index
-            if (startIndex < 0 || startIndex >= items.length) {
-                console.warn(`Invalid start index ${startIndex}, using 0`);
-                startIndex = 0;
-            }
-
-            const callbacks: MediaViewerCallbacks = {
-                onOpen: () => this.onGalleryOpen(),
-                onClose: () => this.onGalleryClose(),
-                onChange: (index) => this.onGalleryChange(index),
-                onImageError: (index, item, error) => this.onImageError(item, error)
-            };
-
-            mediaViewerService.open(items, startIndex, config, callbacks);
-            this.galleryItems = items;
-            this.isGalleryMode = true;
-
-        } catch (error) {
-            console.error('Failed to open gallery:', error);
-            const errorMessage = error instanceof Error ? error.message : 'Failed to open gallery';
-            toastService.showError(errorMessage);
-        }
-    }
-
-    /**
-     * Open viewer for images in note content
-     */
-    async openContentImages(noteId: string, container: HTMLElement, startIndex: number = 0): Promise<void> {
-        try {
-            const note = await froca.getNote(noteId);
-            if (!note) {
-                toastService.showError('Note not found');
-                return;
-            }
-
-            // Find all images in the container
-            const items = await mediaViewerService.createItemsFromContainer(container, 'img:not(.note-icon)');
-            
-            if (items.length === 0) {
-                toastService.showMessage('No images found in content');
-                return;
-            }
-
-            // Add note context to items
-            items.forEach(item => {
-                item.noteId = noteId;
-            });
-
-            const callbacks: MediaViewerCallbacks = {
-                onOpen: () => this.onContentViewerOpen(noteId),
-                onClose: () => this.onContentViewerClose(noteId),
-                onChange: (index) => this.onContentImageChange(index, items),
-                onImageError: (index, item, error) => this.onImageError(item, error)
-            };
-
-            const config: Partial<MediaViewerConfig> = {
-                getThumbBoundsFn: (index) => {
-                    // Get thumbnail bounds for zoom animation
-                    const item = items[index];
-                    if (item.element) {
-                        const rect = item.element.getBoundingClientRect();
-                        return { x: rect.left, y: rect.top, w: rect.width };
-                    }
-                    return undefined;
-                }
-            };
-
-            mediaViewerService.open(items, startIndex, config, callbacks);
-            this.currentNoteId = noteId;
-
-        } catch (error) {
-            console.error('Failed to open content images:', error);
-            toastService.showError('Failed to open images');
-        }
-    }
-
-    /**
-     * Attach click handlers to images in a container with accessibility
-     */
-    attachToContainer(container: HTMLElement, noteId: string): void {
-        try {
-            const images = container.querySelectorAll<HTMLImageElement>('img:not(.note-icon)');
-            
-            images.forEach((img, index) => {
-                // Skip if already has handler
-                if (this.clickHandlers.has(img)) {
-                    return;
-                }
-
-                const handler = () => {
-                    this.openContentImages(noteId, container, index).catch(error => {
-                        console.error('Failed to open content images:', error);
-                        toastService.showError('Failed to open image viewer');
-                    });
-                };
-
-                img.addEventListener('click', handler);
-                img.classList.add('media-viewer-trigger');
-                img.style.cursor = 'zoom-in';
-                
-                // Add accessibility attributes
-                img.setAttribute('role', 'button');
-                img.setAttribute('tabindex', '0');
-                img.setAttribute('aria-label', img.alt || 'Click to view image in fullscreen');
-                
-                // Add keyboard support for accessibility
-                const keyHandler = (event: KeyboardEvent) => {
-                    if (event.key === 'Enter' || event.key === ' ') {
-                        event.preventDefault();
-                        handler();
-                    }
-                };
-                img.addEventListener('keydown', keyHandler);
-                
-                // Store both handlers
-                this.clickHandlers.set(img, handler);
-            });
-        } catch (error) {
-            console.error('Failed to attach container handlers:', error);
-        }
-    }
-
-    /**
-     * Detach click handlers from a container
-     */
-    detachFromContainer(container: HTMLElement): void {
-        const images = container.querySelectorAll<HTMLImageElement>('img.media-viewer-trigger');
-        
-        images.forEach(img => {
-            const handler = this.clickHandlers.get(img);
-            if (handler) {
-                img.removeEventListener('click', handler);
-                img.classList.remove('media-viewer-trigger');
-                img.style.cursor = '';
-                this.clickHandlers.delete(img);
-            }
-        });
-    }
-
-    /**
-     * Called when viewer opens for a single image
-     */
-    private onViewerOpen(noteId: string): void {
-        // Log for debugging purposes
-        console.debug('Media viewer opened for note:', noteId);
-    }
-
-    /**
-     * Called when viewer closes for a single image
-     */
-    private onViewerClose(noteId: string): void {
-        this.currentNoteId = null;
-        console.debug('Media viewer closed for note:', noteId);
-    }
-
-    /**
-     * Called when gallery opens
-     */
-    private onGalleryOpen(): void {
-        console.debug('Gallery opened with', this.galleryItems.length, 'items');
-    }
-
-    /**
-     * Called when gallery closes
-     */
-    private onGalleryClose(): void {
-        this.isGalleryMode = false;
-        this.galleryItems = [];
-        console.debug('Gallery closed');
-    }
-
-    /**
-     * Called when gallery slide changes
-     */
-    private onGalleryChange(index: number): void {
-        const item = this.galleryItems[index];
-        if (item && item.noteId) {
-            console.debug('Gallery slide changed to index:', index, 'noteId:', item.noteId);
-        }
-    }
-
-    /**
-     * Called when content viewer opens
-     */
-    private onContentViewerOpen(noteId: string): void {
-        console.debug('Content viewer opened for note:', noteId);
-    }
-
-    /**
-     * Called when content viewer closes
-     */
-    private onContentViewerClose(noteId: string): void {
-        this.currentNoteId = null;
-        console.debug('Content viewer closed for note:', noteId);
-    }
-
-    /**
-     * Called when content image changes
-     */
-    private onContentImageChange(index: number, items: MediaItem[]): void {
-        console.debug('Content image changed to index:', index, 'of', items.length);
-    }
-
-    /**
-     * Handle image loading errors with graceful degradation
-     */
-    private onImageError(item: MediaItem, error?: Error): void {
-        const errorMessage = `Failed to load image: ${item.title || 'Unknown'}`;
-        console.error(errorMessage, { src: item.src, error });
-        
-        // Show user-friendly error message
-        toastService.showError(errorMessage);
-        
-        // Log the error for debugging
-        console.debug('Image load error:', { 
-            item, 
-            error: error?.message || 'Unknown error' 
-        });
-    }
-
-    /**
-     * Download current image
-     */
-    async downloadCurrent(): Promise<void> {
-        if (!mediaViewerService.isOpen()) {
-            return;
-        }
-
-        const index = mediaViewerService.getCurrentIndex();
-        const item = this.isGalleryMode ? this.galleryItems[index] : null;
-
-        if (item && item.noteId) {
-            try {
-                const note = await froca.getNote(item.noteId);
-                if (note) {
-                    const url = `api/notes/${note.noteId}/download`;
-                    window.open(url);
-                }
-            } catch (error) {
-                console.error('Failed to download image:', error);
-                toastService.showError('Failed to download image');
-            }
-        }
-    }
-
-    /**
-     * Copy image reference to clipboard
-     */
-    async copyImageReference(): Promise<void> {
-        if (!mediaViewerService.isOpen()) {
-            return;
-        }
-
-        const index = mediaViewerService.getCurrentIndex();
-        const item = this.isGalleryMode ? this.galleryItems[index] : null;
-
-        if (item && item.noteId) {
-            try {
-                const reference = `![](api/images/${item.noteId}/view)`;
-                await navigator.clipboard.writeText(reference);
-                toastService.showMessage('Image reference copied to clipboard');
-            } catch (error) {
-                console.error('Failed to copy image reference:', error);
-                toastService.showError('Failed to copy image reference');
-            }
-        }
-    }
-
-    /**
-     * Get metadata for current image with type safety
-     */
-    async getCurrentMetadata(): Promise<{
-        noteId: string;
-        title: string;
-        mime?: string;
-        fileSize?: string;
-        width?: number;
-        height?: number;
-        dateCreated?: string;
-        dateModified?: string;
-    } | null> {
-        try {
-            if (!mediaViewerService.isOpen()) {
-                return null;
-            }
-
-            const index = mediaViewerService.getCurrentIndex();
-            const item = this.isGalleryMode ? this.galleryItems[index] : null;
-
-            if (item && item.noteId) {
-                const note = await froca.getNote(item.noteId);
-                if (note) {
-                    const metadata = await note.getMetadata();
-                    return {
-                        noteId: note.noteId,
-                        title: note.title || 'Untitled',
-                        mime: note.mime,
-                        fileSize: note.getAttribute('label', 'fileSize')?.value,
-                        width: item.width,
-                        height: item.height,
-                        dateCreated: metadata.dateCreated,
-                        dateModified: metadata.dateModified
-                    };
-                }
-            }
-        } catch (error) {
-            console.error('Failed to get image metadata:', error);
-        }
-
-        return null;
-    }
-
-    /**
-     * Cleanup handlers and resources
-     */
-    cleanup(): void {
-        try {
-            // Close viewer if open
-            mediaViewerService.close();
-
-            // Remove all click handlers
-            this.clickHandlers.forEach((handler, element) => {
-                element.removeEventListener('click', handler);
-                element.classList.remove('media-viewer-trigger');
-                element.style.cursor = '';
-            });
-            this.clickHandlers.clear();
-
-            // Remove keyboard handler with proper reference
-            if (this.boundKeyboardHandler) {
-                document.removeEventListener('keydown', this.boundKeyboardHandler);
-                this.boundKeyboardHandler = null;
-            }
-
-            // Clear references
-            this.currentNoteId = null;
-            this.galleryItems = [];
-            this.isGalleryMode = false;
-        } catch (error) {
-            console.error('Error during MediaViewerWidget cleanup:', error);
-        }
-    }
-
-    /**
-     * Handle note changes
-     */
-    async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">): Promise<void> {
-        // Refresh viewer if current note was reloaded
-        if (this.currentNoteId && loadResults.isNoteReloaded(this.currentNoteId)) {
-            // Close and reopen with updated data
-            if (mediaViewerService.isOpen()) {
-                const index = mediaViewerService.getCurrentIndex();
-                mediaViewerService.close();
-                
-                if (this.isGalleryMode) {
-                    const noteIds = this.galleryItems.map(item => item.noteId).filter(Boolean) as string[];
-                    await this.openGallery(noteIds, index);
-                } else {
-                    await this.openImageNote(this.currentNoteId);
-                }
-            }
-        }
-    }
-
-    /**
-     * Apply theme changes
-     */
-    themeChangedEvent(): void {
-        const isDarkTheme = document.body.classList.contains('theme-dark') || 
-                           document.body.classList.contains('theme-next-dark');
-        mediaViewerService.applyTheme(isDarkTheme);
-    }
-}
-
-// Create global instance for easy access
-const mediaViewerWidget = new MediaViewerWidget();
-
-export default mediaViewerWidget;

apps/client/src/widgets/quick_search.ts

@@ -93,6 +93,8 @@ interface QuickSearchResponse {
         highlightedNotePathTitle: string;
         contentSnippet?: string;
         highlightedContentSnippet?: string;
+        attributeSnippet?: string;
+        highlightedAttributeSnippet?: string;
         icon: string;
     }>;
     error: string;
@@ -241,7 +243,12 @@ export default class QuickSearchWidget extends BasicWidget {
                         <span style="flex: 1;" class="search-result-title">${result.highlightedNotePathTitle}</span>
                     </div>`;
                 
-                // Add content snippet below the title if available
+                // Add attribute snippet (tags/attributes) below the title if available
+                if (result.highlightedAttributeSnippet) {
+                    itemHtml += `<div style="font-size: 0.75em; color: var(--muted-text-color); opacity: 0.5; margin-left: 20px; margin-top: 2px; line-height: 1.2;" class="search-result-attributes">${result.highlightedAttributeSnippet}</div>`;
+                }
+                
+                // Add content snippet below the attributes if available
                 if (result.highlightedContentSnippet) {
                     itemHtml += `<div style="font-size: 0.85em; color: var(--main-text-color); opacity: 0.7; margin-left: 20px; margin-top: 4px; line-height: 1.3;" class="search-result-content">${result.highlightedContentSnippet}</div>`;
                 }

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

@@ -0,0 +1,14 @@
+import { ComponentChildren } from "preact";
+
+interface AdmonitionProps {
+    type: "warning" | "note" | "caution";
+    children: ComponentChildren;
+}
+
+export default function Admonition({ type, children }: AdmonitionProps) {
+    return (
+        <div className={`admonition ${type}`} role="alert">
+            {children}
+        </div>
+    )
+}

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

@@ -1,7 +1,7 @@
 import { ComponentChildren } from "preact";
 
 interface AlertProps {
-    type: "info" | "danger";
+    type: "info" | "danger" | "warning";
     title?: string;
     children: ComponentChildren;
 }

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

@@ -4,6 +4,7 @@ import { useRef, useMemo } from "preact/hooks";
 import { memo } from "preact/compat";
 
 interface ButtonProps {
+    name?: string;
     /** Reference to the button element. Mostly useful for requesting focus. */
     buttonRef?: RefObject<HTMLButtonElement>;
     text: string;
@@ -14,11 +15,11 @@ interface ButtonProps {
     onClick?: () => void;
     primary?: boolean;
     disabled?: boolean;
-    small?: boolean;
+    size?: "normal" | "small" | "micro";
     style?: CSSProperties;
 }
 
-const Button = memo(({ buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, small, style }: ButtonProps) => {
+const Button = memo(({ name, buttonRef: _buttonRef, className, text, onClick, keyboardShortcut, icon, primary, disabled, size, style }: ButtonProps) => {
     // Memoize classes array to prevent recreation
     const classes = useMemo(() => {
         const classList: string[] = ["btn"];
@@ -30,11 +31,13 @@ const Button = memo(({ buttonRef: _buttonRef, className, text, onClick, keyboard
         if (className) {
             classList.push(className);
         }
-        if (small) {
+        if (size === "small") {
             classList.push("btn-sm");
+        } else if (size === "micro") {
+            classList.push("btn-micro");
         }
         return classList.join(" ");
-    }, [primary, className, small]);
+    }, [primary, className, size]);
 
     const buttonRef = _buttonRef ?? useRef<HTMLButtonElement>(null);
     
@@ -52,6 +55,7 @@ const Button = memo(({ buttonRef: _buttonRef, className, text, onClick, keyboard
 
     return (
         <button
+            name={name}
             className={classes}
             type={onClick ? "button" : "submit"}
             onClick={onClick}

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

@@ -0,0 +1,17 @@
+import type { ComponentChildren } from "preact";
+import { CSSProperties } from "preact/compat";
+
+interface ColumnProps {
+    md?: number;
+    children: ComponentChildren;
+    className?: string;
+    style?: CSSProperties;
+}
+
+export default function Column({ md, children, className, style }: ColumnProps) {
+    return (
+        <div className={`col-md-${md ?? 6} ${className ?? ""}`} style={style}>
+            {children}
+        </div>
+    )
+}

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

@@ -2,10 +2,12 @@ import { Tooltip } from "bootstrap";
 import { useEffect, useRef, useMemo, useCallback } from "preact/hooks";
 import { escapeQuotes } from "../../services/utils";
 import { ComponentChildren } from "preact";
-import { memo } from "preact/compat";
+import { CSSProperties, memo } from "preact/compat";
+import { useUniqueName } from "./hooks";
 
 interface FormCheckboxProps {
-    name: string;
+    id?: string;
+    name?: string;
     label: string | ComponentChildren;
     /**
      * If set, the checkbox label will be underlined and dotted, indicating a hint. When hovered, it will show the hint text.
@@ -14,9 +16,11 @@ interface FormCheckboxProps {
     currentValue: boolean;
     disabled?: boolean;
     onChange(newValue: boolean): void;
+    containerStyle?: CSSProperties;
 }
 
-const FormCheckbox = memo(({ name, disabled, label, currentValue, onChange, hint }: FormCheckboxProps) => {
+const FormCheckbox = memo(({ name, id: _id, disabled, label, currentValue, onChange, hint, containerStyle }: FormCheckboxProps) => {
+    const id = _id ?? useUniqueName(name);
     const labelRef = useRef<HTMLLabelElement>(null);
 
     // Fix: Move useEffect outside conditional
@@ -46,7 +50,7 @@ const FormCheckbox = memo(({ name, disabled, label, currentValue, onChange, hint
     const titleText = useMemo(() => hint ? escapeQuotes(hint) : undefined, [hint]);
 
     return (
-        <div className="form-checkbox">
+        <div className="form-checkbox" style={containerStyle}>
             <label
                 className="form-check-label tn-checkbox"
                 style={labelStyle}
@@ -54,9 +58,10 @@ const FormCheckbox = memo(({ name, disabled, label, currentValue, onChange, hint
                 ref={labelRef}
             >
                 <input
+                    id={id}
                     className="form-check-input"
                     type="checkbox"
-                    name={name}
+                    name={id}
                     checked={currentValue || false}
                     value="1"
                     disabled={disabled}

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

@@ -1,24 +1,43 @@
-import { ComponentChildren, RefObject } from "preact";
+import { cloneElement, ComponentChildren, RefObject, VNode } from "preact";
+import { CSSProperties } from "preact/compat";
+import { useUniqueName } from "./hooks";
 
 interface FormGroupProps {
+    name: string;
     labelRef?: RefObject<HTMLLabelElement>;
     label?: string;
     title?: string;
     className?: string;
-    children: ComponentChildren;
+    children: VNode<any>;
     description?: string | ComponentChildren;
+    disabled?: boolean;
+    style?: CSSProperties;
 }
 
-export default function FormGroup({ label, title, className, children, description, labelRef }: FormGroupProps) {
+export default function FormGroup({ name, label, title, className, children, description, labelRef, disabled, style }: FormGroupProps) {
+    const id = useUniqueName(name);
+    const childWithId = cloneElement(children, { id });
+
     return (
-        <div className={`form-group ${className}`} title={title}
-            style={{ "margin-bottom": "15px" }}>
-            <label style={{ width: "100%" }} ref={labelRef}>
-                {label && <div style={{ "margin-bottom": "10px" }}>{label}</div> }
-                {children}
-            </label>
+        <div className={`form-group ${className} ${disabled ? "disabled" : ""}`} title={title} style={style}>
+            { label &&
+            <label style={{ width: "100%" }} ref={labelRef} htmlFor={id}>{label}</label>}
+
+            {childWithId}
 
             {description && <small className="form-text">{description}</small>}
         </div>
     );
+}
+
+/**
+ * Similar to {@link FormGroup} but allows more than one child. Due to this behaviour, there is no automatic ID assignment.
+ */
+export function FormMultiGroup({ label, children }: { label: string, children: ComponentChildren }) {
+    return (
+        <div className={`form-group`}>
+            {label && <label>{label}</label>}
+            {children}
+        </div>
+    );
 }

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

@@ -1,30 +1,56 @@
+import type { ComponentChildren } from "preact";
+import { useUniqueName } from "./hooks";
+
 interface FormRadioProps {
     name: string;
     currentValue?: string;
     values: {
         value: string;
-        label: string;
+        label: string | ComponentChildren;
+        inlineDescription?: string | ComponentChildren;
     }[];
     onChange(newValue: string): void;
 }
 
-export default function FormRadioGroup({ name, values, currentValue, onChange }: FormRadioProps) {
+export default function FormRadioGroup({ values, ...restProps }: FormRadioProps) {
     return (
-        <>
-            {(values || []).map(({ value, label }) => (
-                <div className="form-check">
-                    <label className="form-check-label tn-radio">
-                        <input
-                            className="form-check-input"
-                            type="radio"
-                            name={name}
-                            value={value}
-                            checked={value === currentValue}
-                        onChange={e => onChange((e.target as HTMLInputElement).value)} />
-                        {label}
-                    </label>
+        <div role="group">
+            {(values || []).map(({ value, label, inlineDescription }) => (
+                <div className="form-checkbox">
+                    <FormRadio
+                        value={value}
+                        label={label} inlineDescription={inlineDescription}
+                        labelClassName="form-check-label"
+                        {...restProps}
+                    />
                 </div>
             ))}
-        </>
+        </div>
     );
+}
+
+export function FormInlineRadioGroup({ values, ...restProps }: FormRadioProps) {
+    return (
+        <div role="group">
+            {values.map(({ value, label }) => (<FormRadio value={value} label={label} {...restProps} />))}
+        </div>
+    )
+}
+
+function FormRadio({ name, value, label, currentValue, onChange, labelClassName, inlineDescription }: Omit<FormRadioProps, "values"> & { value: string, label: ComponentChildren, inlineDescription?: ComponentChildren, labelClassName?: string }) {
+    return (
+        <label className={`tn-radio ${labelClassName ?? ""}`}>
+            <input
+                className="form-check-input"
+                type="radio"
+                name={useUniqueName(name)}
+                value={value}
+                checked={value === currentValue}
+                onChange={e => onChange((e.target as HTMLInputElement).value)}
+            />
+            {inlineDescription ?
+                <><strong>{label}</strong> - {inlineDescription}</>
+            : label}
+        </label>
+    )
 }

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

@@ -0,0 +1,79 @@
+import type { ComponentChildren } from "preact";
+import { CSSProperties } from "preact/compat";
+
+type OnChangeListener = (newValue: string) => void;
+
+export interface FormSelectGroup<T> {
+    title: string;
+    items: T[];
+}
+
+interface ValueConfig<T, Q> {
+    values: Q[];
+    /** The property of an item of {@link values} to be used as the key, uniquely identifying it. The key will be passed to the change listener. */
+    keyProperty: keyof T;
+    /** The property of an item of {@link values} to be used as the label, representing a human-readable version of the key. If missing, {@link keyProperty} will be used instead. */
+    titleProperty?: keyof T; 
+    /** The current value of the combobox. The value will be looked up by going through {@link values} and looking an item whose {@link #keyProperty} value matches this one */
+    currentValue?: string;
+}
+
+interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
+    id?: string;
+    onChange: OnChangeListener;
+    style?: CSSProperties;
+}
+
+/**
+ * Combobox component that takes in any object array as data. Each item of the array is rendered as an item, and the key and values are obtained by looking into the object by a specified key.
+ */
+export default function FormSelect<T>({ id, onChange, style, ...restProps }: FormSelectProps<T, T>) {
+    return (
+        <FormSelectBody id={id} onChange={onChange} style={style}>
+            <FormSelectGroup {...restProps} />
+        </FormSelectBody>
+    );
+}
+
+/**
+ * Similar to {@link FormSelect}, but the top-level elements are actually groups.
+ */
+export function FormSelectWithGroups<T>({ id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps<T, FormSelectGroup<T>>) {
+    return (
+        <FormSelectBody id={id} onChange={onChange}>
+            {values.map(({ title, items }) => {
+                return (
+                    <optgroup label={title}>
+                        <FormSelectGroup values={items} keyProperty={keyProperty} titleProperty={titleProperty} currentValue={currentValue} />
+                    </optgroup>
+                );
+            })}
+        </FormSelectBody>
+    )
+}
+
+function FormSelectBody({ id, children, onChange, style }: { id?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) {
+    return (
+        <select
+            id={id}
+            class="form-select"
+            onChange={e => onChange((e.target as HTMLInputElement).value)}
+            style={style}
+        >
+            {children}
+        </select>
+    )
+}
+
+function FormSelectGroup<T>({ values, keyProperty, titleProperty, currentValue }: ValueConfig<T, T>) {
+    return values.map(item => {
+        return (
+            <option
+                value={item[keyProperty] as any}
+                selected={item[keyProperty] === currentValue}
+            >
+                {item[titleProperty ?? keyProperty] ?? item[keyProperty] as any}
+            </option>
+        );
+    });
+}

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

@@ -0,0 +1,5 @@
+import { ComponentChildren } from "preact";
+
+export default function FormText({ children }: { children: ComponentChildren }) {
+    return <p className="form-text use-tn-links">{children}</p>
+}

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

@@ -0,0 +1,18 @@
+interface FormTextAreaProps {
+    id?: string;
+    currentValue: string;
+    onBlur?(newValue: string): void;
+    rows: number;
+}
+export default function FormTextArea({ id, onBlur, rows, currentValue }: FormTextAreaProps) {
+    return (
+        <textarea
+            id={id}
+            rows={rows}
+            onBlur={(e) => {
+                onBlur?.(e.currentTarget.value);
+            }}
+            style={{ width: "100%" }}
+        >{currentValue}</textarea>
+    )
+}

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

@@ -1,27 +1,48 @@
 import type { InputHTMLAttributes, RefObject } from "preact/compat";
 
-interface FormTextBoxProps extends Pick<InputHTMLAttributes<HTMLInputElement>, "placeholder" | "autoComplete" | "className" | "type" | "name" | "pattern" | "title" | "style"> {
+interface FormTextBoxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "onBlur" | "value"> {
     id?: string;
     currentValue?: string;
-    onChange?(newValue: string): void;
+    onChange?(newValue: string, validity: ValidityState): void;
+    onBlur?(newValue: string): void;
     inputRef?: RefObject<HTMLInputElement>;
 }
 
-export default function FormTextBox({ id, type, name, className, currentValue, onChange, autoComplete, inputRef, placeholder, title, pattern, style }: FormTextBoxProps) {
+export default function FormTextBox({ inputRef, className, type, currentValue, onChange, onBlur,...rest}: FormTextBoxProps) {
+    if (type === "number" && currentValue) {
+        const { min, max } = rest;
+        const currentValueNum = parseInt(currentValue, 10);
+        if (min && currentValueNum < parseInt(String(min), 10)) {
+            currentValue = String(min);
+        } else if (max && currentValueNum > parseInt(String(max), 10)) {
+            currentValue = String(max);
+        }
+    }
+
     return (
         <input
             ref={inputRef}
-            type={type ?? "text"}
             className={`form-control ${className ?? ""}`}
-            id={id}
-            name={name}
+            type={type ?? "text"}
             value={currentValue}
-            autoComplete={autoComplete}
-            placeholder={placeholder}
-            title={title}
-            pattern={pattern}
-            onInput={e => onChange?.(e.currentTarget.value)}
-            style={style}
+            onInput={onChange && (e => {
+                const target = e.currentTarget;
+                onChange?.(target.value, target.validity);
+            })}
+            onBlur={onBlur && (e => {
+                const target = e.currentTarget;
+                onBlur(target.value);
+            })}
+            {...rest}
         />
     );
+}
+
+export function FormTextBoxWithUnit(props: FormTextBoxProps & { unit: string }) {
+    return (
+        <label class="input-group tn-number-unit-pair">
+            <FormTextBox {...props} />
+            <span class="input-group-text">{props.unit}</span>
+        </label>        
+    )
 }

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

@@ -0,0 +1,33 @@
+import { ActionKeyboardShortcut, KeyboardActionNames } from "@triliumnext/commons";
+import { useEffect, useState } from "preact/hooks";
+import keyboard_actions from "../../services/keyboard_actions";
+
+interface KeyboardShortcutProps {
+    actionName: KeyboardActionNames;
+}
+
+export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps) {
+
+    const [ action, setAction ] = useState<ActionKeyboardShortcut>();
+    useEffect(() => {
+        keyboard_actions.getAction(actionName).then(setAction);
+    }, []);
+
+    if (!action) {
+        return <></>;
+    }
+
+    return (
+        <>
+            {action.effectiveShortcuts?.map((shortcut, i) => {
+                const keys = shortcut.split("+");
+                return keys
+                    .map((key, i) => (
+                        <>
+                            <kbd>{key}</kbd> {i + 1 < keys.length && "+ "}
+                        </>
+                    ))
+            }).reduce<any>((acc, item) => (acc.length ? [...acc, ", ", item] : [item]), [])}
+        </>
+    );
+}

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

@@ -0,0 +1,17 @@
+import { ComponentChild } from "preact";
+
+interface LinkButtonProps {
+    onClick: () => void;
+    text: ComponentChild;
+}
+
+export default function LinkButton({ onClick, text }: LinkButtonProps) {
+    return (
+        <a class="tn-link" href="javascript:" onClick={(e) => {
+            e.preventDefault();
+            onClick();
+        }}>
+            {text}
+        </a>
+    )
+}

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

@@ -6,6 +6,7 @@ import type { RefObject } from "preact";
 import type { CSSProperties } from "preact/compat";
 
 interface NoteAutocompleteProps {    
+    id?: string;
     inputRef?: RefObject<HTMLInputElement>;
     text?: string;
     placeholder?: string;
@@ -18,7 +19,7 @@ interface NoteAutocompleteProps {
     noteId?: string;
 }
 
-export default function NoteAutocomplete({ inputRef: _ref, text, placeholder, onChange, onTextChange, container, containerStyle, opts, noteId, noteIdChanged }: NoteAutocompleteProps) {
+export default function NoteAutocomplete({ id, inputRef: _ref, text, placeholder, onChange, onTextChange, container, containerStyle, opts, noteId, noteIdChanged }: NoteAutocompleteProps) {
     const ref = _ref ?? useRef<HTMLInputElement>(null);
     
     useEffect(() => {
@@ -74,6 +75,7 @@ export default function NoteAutocomplete({ inputRef: _ref, text, placeholder, on
     return (
         <div className="input-group" style={containerStyle}>
             <input
+                id={id}
                 ref={ref}
                 className="note-autocomplete form-control"
                 placeholder={placeholder ?? t("add_link.search_note")} />

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

@@ -24,7 +24,7 @@ function getProps({ className, html, style }: RawHtmlProps) {
     }
 }
 
-function getHtml(html: string | HTMLElement | JQuery<HTMLElement>) {
+export function getHtml(html: string | HTMLElement | JQuery<HTMLElement>) {
     if (typeof html === "object" && "length" in html) {
         html = html[0];
     }

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

@@ -22,11 +22,18 @@ export default abstract class ReactBasicWidget extends BasicWidget {
  * @returns the rendered wrapped DOM element.
  */
 export function renderReactWidget(parentComponent: Component, el: JSX.Element) {
-    const renderContainer = new DocumentFragment();
+    return renderReactWidgetAtElement(parentComponent, el, new DocumentFragment()).children();
+}
+
+export function renderReactWidgetAtElement(parentComponent: Component, el: JSX.Element, container: Element | DocumentFragment) {
     render((
         <ParentComponent.Provider value={parentComponent}>
             {el}
         </ParentComponent.Provider>
-    ), renderContainer);
-    return $(renderContainer.firstChild as HTMLElement);
+    ), container);
+    return $(container) as JQuery<HTMLElement>;
+}
+
+export function disposeReactWidget(container: Element) {
+    render(null, container);
 }

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

@@ -1,7 +1,15 @@
-import { useContext, useEffect, useRef } from "preact/hooks";
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from "preact/hooks";
 import { EventData, EventNames } from "../../components/app_context";
 import { ParentComponent } from "./ReactBasicWidget";
 import SpacedUpdate from "../../services/spaced_update";
+import { OptionNames } from "@triliumnext/commons";
+import options, { type OptionValue } from "../../services/options";
+import utils, { reloadFrontendApp } from "../../services/utils";
+import Component from "../../components/component";
+import server from "../../services/server";
+
+type TriliumEventHandler<T extends EventNames> = (data: EventData<T>) => void;
+const registeredHandlers: Map<Component, Map<EventNames, TriliumEventHandler<any>[]>> = new Map();
 
 /**
  * Allows a React component to react to Trilium events (e.g. `entitiesReloaded`). When the desired event is triggered, the handler is invoked with the event parameters.
@@ -12,32 +20,67 @@ import SpacedUpdate from "../../services/spaced_update";
  * @param handler the handler to be invoked when the event is triggered.
  * @param enabled determines whether the event should be listened to or not. Useful to conditionally limit the listener based on a state (e.g. a modal being displayed).
  */
-export default function useTriliumEvent<T extends EventNames>(eventName: T, handler: (data: EventData<T>) => void, enabled = true) {
+export default function useTriliumEvent<T extends EventNames>(eventName: T, handler: TriliumEventHandler<T>, enabled = true) {
     const parentWidget = useContext(ParentComponent);
-    useEffect(() => {
-        if (!parentWidget || !enabled) {            
-            return;
-        }        
-
-        // Create a unique handler name for this specific event listener
-        const handlerName = `${eventName}Event`;
-        const originalHandler = parentWidget[handlerName];
-
-        // Override the event handler to call our handler
-        parentWidget[handlerName] = async function(data: EventData<T>) {
-            // Call original handler if it exists
-            if (originalHandler) {
-                await originalHandler.call(parentWidget, data);
+    if (!parentWidget) {
+        return;
+    }
+    
+    const handlerName = `${eventName}Event`;
+    const customHandler  = useMemo(() => {
+        return async (data: EventData<T>) => {
+            // Inform the attached event listeners.
+            const eventHandlers = registeredHandlers.get(parentWidget)?.get(eventName) ?? [];
+            for (const eventHandler of eventHandlers) {
+                eventHandler(data);
             }
-            // Call our React component's handler
-            handler(data);
-        };
+        }
+    }, [ eventName, parentWidget ]);    
 
-        // Cleanup: restore original handler on unmount or when disabled
+    useEffect(() => {
+        // Attach to the list of handlers.
+        let handlersByWidget = registeredHandlers.get(parentWidget);
+        if (!handlersByWidget) {
+            handlersByWidget = new Map();
+            registeredHandlers.set(parentWidget, handlersByWidget);
+        }
+
+        let handlersByWidgetAndEventName = handlersByWidget.get(eventName);
+        if (!handlersByWidgetAndEventName) {
+            handlersByWidgetAndEventName = [];
+            handlersByWidget.set(eventName, handlersByWidgetAndEventName);
+        }
+
+        if (!handlersByWidgetAndEventName.includes(handler)) {
+            handlersByWidgetAndEventName.push(handler);
+        }
+
+        // Apply the custom event handler.
+        if (parentWidget[handlerName] && parentWidget[handlerName] !== customHandler) {
+            console.warn(`Widget ${parentWidget.componentId} already had an event listener and it was replaced by the React one.`);
+        }
+        
+        parentWidget[handlerName] = customHandler;
+    
         return () => {
-            parentWidget[handlerName] = originalHandler;
+            const eventHandlers = registeredHandlers.get(parentWidget)?.get(eventName);
+            if (!eventHandlers || !eventHandlers.includes(handler)) {
+                return;
+            }
+    
+            // Remove the event handler from the array.            
+            const newEventHandlers = eventHandlers.filter(e => e !== handler);            
+            if (newEventHandlers.length) {
+                registeredHandlers.get(parentWidget)?.set(eventName, newEventHandlers);        
+            } else {
+                registeredHandlers.get(parentWidget)?.delete(eventName);
+            }
+
+            if (!registeredHandlers.get(parentWidget)?.size) {
+                registeredHandlers.delete(parentWidget);
+            }
         };
-    }, [parentWidget, enabled, eventName, handler]);
+    }, [ eventName, parentWidget, handler ]);
 }
 
 export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000) {
@@ -63,4 +106,116 @@ export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000)
     }, [interval]);
 
     return spacedUpdateRef.current;
+}
+
+/**
+ * Allows a React component to read and write a Trilium option, while also watching for external changes.
+ * 
+ * Conceptually, `useTriliumOption` works just like `useState`, but the value is also automatically updated if
+ * the option is changed somewhere else in the client.
+ * 
+ * @param name the name of the option to listen for.
+ * @param needsRefresh whether to reload the frontend whenever the value is changed.
+ * @returns an array where the first value is the current option value and the second value is the setter.
+ */
+export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [string, (newValue: OptionValue) => Promise<void>] {
+    const initialValue = options.get(name);
+    const [ value, setValue ] = useState(initialValue);
+
+    const wrappedSetValue = useMemo(() => {
+        return async (newValue: OptionValue) => {
+            await options.save(name, newValue);
+
+            if (needsRefresh) {
+                reloadFrontendApp(`option change: ${name}`);
+            }
+        }
+    }, [ name, needsRefresh ]);
+
+    useTriliumEvent("entitiesReloaded", useCallback(({ loadResults }) => {
+        if (loadResults.getOptionNames().includes(name)) {
+            const newValue = options.get(name);
+            setValue(newValue);
+        }
+     }, [ name ]));
+
+    return [
+        value,
+        wrappedSetValue
+    ]
+}
+
+/**
+ * Similar to {@link useTriliumOption}, but the value is converted to and from a boolean instead of a string.
+ * 
+ * @param name the name of the option to listen for.
+ * @param needsRefresh whether to reload the frontend whenever the value is changed.
+ * @returns an array where the first value is the current option value and the second value is the setter.
+ */
+export function useTriliumOptionBool(name: OptionNames, needsRefresh?: boolean): [boolean, (newValue: boolean) => Promise<void>] {
+    const [ value, setValue ] = useTriliumOption(name, needsRefresh);
+    return [
+        (value === "true"),
+        (newValue) => setValue(newValue ? "true" : "false")
+    ]
+}
+
+/**
+ * Similar to {@link useTriliumOption}, but the value is converted to and from a int instead of a string.
+ * 
+ * @param name the name of the option to listen for.
+ * @param needsRefresh whether to reload the frontend whenever the value is changed.
+ * @returns an array where the first value is the current option value and the second value is the setter.
+ */
+export function useTriliumOptionInt(name: OptionNames): [number, (newValue: number) => Promise<void>] {
+    const [ value, setValue ] = useTriliumOption(name);
+    return [
+        (parseInt(value, 10)),
+        (newValue) => setValue(newValue)
+    ]
+}
+
+/**
+ * Similar to {@link useTriliumOption}, but the object value is parsed to and from a JSON instead of a string.
+ * 
+ * @param name the name of the option to listen for.
+ * @returns an array where the first value is the current option value and the second value is the setter.
+ */
+export function useTriliumOptionJson<T>(name: OptionNames): [ T, (newValue: T) => Promise<void> ] {
+    const [ value, setValue ] = useTriliumOption(name);
+    return [
+        (JSON.parse(value) as T),
+        (newValue => setValue(JSON.stringify(newValue)))
+    ];
+}
+
+/**
+ * Similar to {@link useTriliumOption}, but operates with multiple options at once. 
+ * 
+ * @param names the name of the option to listen for.
+ * @returns an array where the first value is a map where the keys are the option names and the values, and the second value is the setter which takes in the same type of map and saves them all at once.
+ */
+export function useTriliumOptions<T extends OptionNames>(...names: T[]) {
+    const values: Record<string, string> = {};
+    for (const name of names) {
+        values[name] = options.get(name);
+    }
+
+    return [
+        values as Record<T, string>,
+        options.saveMany
+    ] as const;
+}
+
+/**
+ * Generates a unique name via a random alphanumeric string of a fixed length.
+ * 
+ * <p>
+ * Generally used to assign names to inputs that are unique, especially useful for widgets inside tabs.
+ * 
+ * @param prefix a prefix to add to the unique name.
+ * @returns a name with the given prefix and a random alpanumeric string appended to it.
+ */
+export function useUniqueName(prefix?: string) {
+    return useMemo(() => (prefix ? prefix + "-" : "") + utils.randomString(10), [ prefix ]);
 }

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

@@ -6,7 +6,6 @@ import contentRenderer from "../../services/content_renderer.js";
 import utils from "../../services/utils.js";
 import options from "../../services/options.js";
 import attributes from "../../services/attributes.js";
-import ckeditorPhotoswipeIntegration from "../../services/ckeditor_photoswipe_integration.js";
 
 export default class AbstractTextTypeWidget extends TypeWidget {
     doRender() {
@@ -36,29 +35,7 @@ export default class AbstractTextTypeWidget extends TypeWidget {
         const parsedImage  = await this.parseFromImage($img);
 
         if (parsedImage) {
-            // Check if this is an attachment image and PhotoSwipe is available
-            if (parsedImage.viewScope?.attachmentId) {
-                // Instead of navigating to attachment detail, trigger PhotoSwipe
-                // Check if the image is already processed by PhotoSwipe
-                const imgElement = $img[0] as HTMLImageElement;
-                
-                // Check if PhotoSwipe is integrated with this image using multiple reliable indicators
-                const hasPhotoSwipe = imgElement.classList.contains('photoswipe-enabled') || 
-                                      imgElement.hasAttribute('data-photoswipe') ||
-                                      imgElement.style.cursor === 'zoom-in';
-                
-                if (hasPhotoSwipe) {
-                    // Image has PhotoSwipe integration, trigger click to open lightbox
-                    $img.trigger('click');
-                    return;
-                }
-                
-                // Otherwise, fall back to opening attachment detail (but with improved navigation)
-                appContext.tabManager.getActiveContext()?.setNote(parsedImage.noteId, { viewScope: parsedImage.viewScope });
-            } else {
-                // Regular note image, navigate normally
-                appContext.tabManager.getActiveContext()?.setNote(parsedImage.noteId, { viewScope: parsedImage.viewScope });
-            }
+            appContext.tabManager.getActiveContext()?.setNote(parsedImage.noteId, { viewScope: parsedImage.viewScope });
         } else {
             window.open($img.prop("src"), "_blank");
         }

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

@@ -4,8 +4,6 @@ import linkService from "../../services/link.js";
 import utils from "../../services/utils.js";
 import { t } from "../../services/i18n.js";
 import type { EventData } from "../../components/app_context.js";
-import galleryManager from "../../services/gallery_manager.js";
-import type { GalleryItem } from "../../services/gallery_manager.js";
 
 const TPL = /*html*/`
 <div class="attachment-list note-detail-printable">
@@ -22,81 +20,17 @@ const TPL = /*html*/`
             justify-content: space-between;
             align-items: baseline;
         }
-        
-        .attachment-list .gallery-toolbar {
-            display: flex;
-            gap: 5px;
-            margin-bottom: 10px;
-        }
-        
-        .attachment-list .gallery-toolbar button {
-            padding: 5px 10px;
-            font-size: 12px;
-        }
-        
-        .attachment-list .image-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-            gap: 10px;
-            margin-bottom: 20px;
-        }
-        
-        .attachment-list .image-grid .image-thumbnail {
-            position: relative;
-            width: 100%;
-            padding-bottom: 100%; /* 1:1 aspect ratio */
-            overflow: hidden;
-            border-radius: 4px;
-            cursor: pointer;
-            background: var(--accented-background-color);
-        }
-        
-        .attachment-list .image-grid .image-thumbnail img {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            transition: transform 0.2s;
-        }
-        
-        .attachment-list .image-grid .image-thumbnail:hover img {
-            transform: scale(1.05);
-        }
-        
-        .attachment-list .image-grid .image-thumbnail .overlay {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
-            color: white;
-            padding: 5px;
-            font-size: 11px;
-            opacity: 0;
-            transition: opacity 0.2s;
-        }
-        
-        .attachment-list .image-grid .image-thumbnail:hover .overlay {
-            opacity: 1;
-        }
     </style>
 
     <div class="links-wrapper"></div>
-    <div class="gallery-toolbar" style="display: none;"></div>
-    <div class="image-grid" style="display: none;"></div>
+
     <div class="attachment-list-wrapper"></div>
 </div>`;
 
 export default class AttachmentListTypeWidget extends TypeWidget {
     $list!: JQuery<HTMLElement>;
     $linksWrapper!: JQuery<HTMLElement>;
-    $galleryToolbar!: JQuery<HTMLElement>;
-    $imageGrid!: JQuery<HTMLElement>;
     renderedAttachmentIds!: Set<string>;
-    imageAttachments: GalleryItem[] = [];
-    otherAttachments: any[] = [];
 
     static getType() {
         return "attachmentList";
@@ -106,8 +40,6 @@ export default class AttachmentListTypeWidget extends TypeWidget {
         this.$widget = $(TPL);
         this.$list = this.$widget.find(".attachment-list-wrapper");
         this.$linksWrapper = this.$widget.find(".links-wrapper");
-        this.$galleryToolbar = this.$widget.find(".gallery-toolbar");
-        this.$imageGrid = this.$widget.find(".image-grid");
 
         super.doRender();
     }
@@ -143,12 +75,8 @@ export default class AttachmentListTypeWidget extends TypeWidget {
         );
 
         this.$list.empty();
-        this.$imageGrid.empty().hide();
-        this.$galleryToolbar.empty().hide();
         this.children = [];
         this.renderedAttachmentIds = new Set();
-        this.imageAttachments = [];
-        this.otherAttachments = [];
 
         const attachments = await note.getAttachments();
 
@@ -157,122 +85,17 @@ export default class AttachmentListTypeWidget extends TypeWidget {
             return;
         }
 
-        // Separate image and non-image attachments
         for (const attachment of attachments) {
-            if (attachment.role === 'image') {
-                const galleryItem: GalleryItem = {
-                    src: `/api/attachments/${attachment.attachmentId}/image`,
-                    alt: attachment.title,
-                    title: attachment.title,
-                    attachmentId: attachment.attachmentId,
-                    noteId: attachment.ownerId,
-                    index: this.imageAttachments.length
-                };
-                this.imageAttachments.push(galleryItem);
-            } else {
-                this.otherAttachments.push(attachment);
-            }
-        }
-
-        // If we have image attachments, show gallery view
-        if (this.imageAttachments.length > 0) {
-            this.setupGalleryView();
-        }
-
-        // Render non-image attachments in the traditional list
-        for (const attachment of this.otherAttachments) {
             const attachmentDetailWidget = new AttachmentDetailWidget(attachment, false);
+
             this.child(attachmentDetailWidget);
+
             this.renderedAttachmentIds.add(attachment.attachmentId);
+
             this.$list.append(attachmentDetailWidget.render());
         }
     }
 
-    setupGalleryView() {
-        // Show gallery toolbar
-        this.$galleryToolbar.show();
-        
-        // Add gallery action buttons
-        const $viewAllButton = $(`
-            <button class="btn btn-sm view-gallery-btn">
-                <span class="bx bx-images"></span>
-                View as Gallery (${this.imageAttachments.length} images)
-            </button>
-        `);
-        
-        const $slideshowButton = $(`
-            <button class="btn btn-sm slideshow-btn">
-                <span class="bx bx-play-circle"></span>
-                Start Slideshow
-            </button>
-        `);
-        
-        this.$galleryToolbar.append($viewAllButton, $slideshowButton);
-        
-        // Handle gallery view button
-        $viewAllButton.on('click', () => {
-            galleryManager.openGallery(this.imageAttachments, 0, {
-                showThumbnails: true,
-                showCounter: true,
-                enableKeyboardNav: true,
-                loop: true
-            });
-        });
-        
-        // Handle slideshow button
-        $slideshowButton.on('click', () => {
-            galleryManager.openGallery(this.imageAttachments, 0, {
-                showThumbnails: false,
-                autoPlay: true,
-                slideInterval: 4000,
-                showCounter: true,
-                loop: true
-            });
-        });
-        
-        // Create image grid
-        this.$imageGrid.show();
-        
-        this.imageAttachments.forEach((item, index) => {
-            const $thumbnail = $(`
-                <div class="image-thumbnail" 
-                     data-index="${index}"
-                     role="button"
-                     tabindex="0"
-                     aria-label="View ${item.alt || item.title || 'image'} in gallery">
-                    <img src="${item.src}" 
-                         alt="${item.alt || item.title || `Image ${index + 1}`}" 
-                         loading="lazy"
-                         aria-describedby="thumb-desc-${index}">
-                    <div class="overlay" id="thumb-desc-${index}">${item.title || ''}</div>
-                </div>
-            `);
-            
-            // Add click handler
-            $thumbnail.on('click', () => {
-                galleryManager.openGallery(this.imageAttachments, index, {
-                    showThumbnails: true,
-                    showCounter: true,
-                    enableKeyboardNav: true
-                });
-            });
-            
-            // Add keyboard support for accessibility
-            $thumbnail.on('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    galleryManager.openGallery(this.imageAttachments, index, {
-                        showThumbnails: true,
-                        showCounter: true,
-                        enableKeyboardNav: true
-                    });
-                }
-            });
-            
-            this.$imageGrid.append($thumbnail);
-        });
-    }
-
     async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         // updates and deletions are handled by the detail, for new attachments the whole list has to be refreshed
         const attachmentsAdded = loadResults.getAttachmentRows().some((att) => att.attachmentId && !this.renderedAttachmentIds.has(att.attachmentId));
@@ -281,16 +104,4 @@ export default class AttachmentListTypeWidget extends TypeWidget {
             this.refresh();
         }
     }
-    
-    cleanup() {
-        // Clean up event handlers
-        if (this.$galleryToolbar) {
-            this.$galleryToolbar.find('button').off();
-        }
-        if (this.$imageGrid) {
-            this.$imageGrid.find('.image-thumbnail').off();
-        }
-        
-        super.cleanup();
-    }
 }

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

@@ -1,199 +0,0 @@
-import TypeWidget from "./type_widget.js";
-import ElectronIntegrationOptions from "./options/appearance/electron_integration.js";
-import ThemeOptions from "./options/appearance/theme.js";
-import FontsOptions from "./options/appearance/fonts.js";
-import MaxContentWidthOptions from "./options/appearance/max_content_width.js";
-import KeyboardShortcutsOptions from "./options/shortcuts.js";
-import HeadingStyleOptions from "./options/text_notes/heading_style.js";
-import TableOfContentsOptions from "./options/text_notes/table_of_contents.js";
-import HighlightsListOptions from "./options/text_notes/highlights_list.js";
-import TextAutoReadOnlySizeOptions from "./options/text_notes/text_auto_read_only_size.js";
-import DateTimeFormatOptions from "./options/text_notes/date_time_format.js";
-import CodeEditorOptions from "./options/code_notes/code_editor.js";
-import CodeAutoReadOnlySizeOptions from "./options/code_notes/code_auto_read_only_size.js";
-import CodeMimeTypesOptions from "./options/code_notes/code_mime_types.js";
-import ImageOptions from "./options/images/images.js";
-import SpellcheckOptions from "./options/spellcheck.js";
-import PasswordOptions from "./options/password/password.js";
-import ProtectedSessionTimeoutOptions from "./options/password/protected_session_timeout.js";
-import EtapiOptions from "./options/etapi.js";
-import BackupOptions from "./options/backup.js";
-import SyncOptions from "./options/sync.js";
-import SearchEngineOptions from "./options/other/search_engine.js";
-import TrayOptions from "./options/other/tray.js";
-import NoteErasureTimeoutOptions from "./options/other/note_erasure_timeout.js";
-import RevisionsSnapshotIntervalOptions from "./options/other/revisions_snapshot_interval.js";
-import RevisionSnapshotsLimitOptions from "./options/other/revision_snapshots_limit.js";
-import NetworkConnectionsOptions from "./options/other/network_connections.js";
-import HtmlImportTagsOptions from "./options/other/html_import_tags.js";
-import AdvancedSyncOptions from "./options/advanced/sync.js";
-import DatabaseIntegrityCheckOptions from "./options/advanced/database_integrity_check.js";
-import VacuumDatabaseOptions from "./options/advanced/vacuum_database.js";
-import DatabaseAnonymizationOptions from "./options/advanced/database_anonymization.js";
-import BackendLogWidget from "./content/backend_log.js";
-import AttachmentErasureTimeoutOptions from "./options/other/attachment_erasure_timeout.js";
-import RibbonOptions from "./options/appearance/ribbon.js";
-import MultiFactorAuthenticationOptions from './options/multi_factor_authentication.js';
-import LocalizationOptions from "./options/i18n/i18n.js";
-import CodeBlockOptions from "./options/text_notes/code_block.js";
-import EditorOptions from "./options/text_notes/editor.js";
-import ShareSettingsOptions from "./options/other/share_settings.js";
-import AiSettingsOptions from "./options/ai_settings.js";
-import type FNote from "../../entities/fnote.js";
-import type NoteContextAwareWidget from "../note_context_aware_widget.js";
-import { t } from "../../services/i18n.js";
-import LanguageOptions from "./options/i18n/language.js";
-import type BasicWidget from "../basic_widget.js";
-import CodeTheme from "./options/code_notes/code_theme.js";
-import RelatedSettings from "./options/appearance/related_settings.js";
-import EditorFeaturesOptions from "./options/text_notes/features.js";
-
-const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
-    <style>
-        .type-contentWidget .note-detail {
-            height: 100%;
-        }
-
-        .note-detail-content-widget {
-            height: 100%;
-        }
-
-        .note-detail-content-widget-content {
-            padding: 15px;
-            height: 100%;
-        }
-
-        .note-detail.full-height .note-detail-content-widget-content {
-            padding: 0;
-        }
-    </style>
-
-    <div class="note-detail-content-widget-content"></div>
-</div>`;
-
-export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsAi" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced";
-
-const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", (typeof NoteContextAwareWidget)[]> = {
-    _optionsAppearance: [
-        ThemeOptions,
-        FontsOptions,
-        ElectronIntegrationOptions,
-        MaxContentWidthOptions,
-        RibbonOptions
-    ],
-    _optionsShortcuts: [
-        KeyboardShortcutsOptions
-    ],
-    _optionsTextNotes: [
-        EditorOptions,
-        EditorFeaturesOptions,
-        HeadingStyleOptions,
-        CodeBlockOptions,
-        TableOfContentsOptions,
-        HighlightsListOptions,
-        TextAutoReadOnlySizeOptions,
-        DateTimeFormatOptions
-    ],
-    _optionsCodeNotes: [
-        CodeEditorOptions,
-        CodeTheme,
-        CodeMimeTypesOptions,
-        CodeAutoReadOnlySizeOptions
-    ],
-    _optionsImages: [
-        ImageOptions
-    ],
-    _optionsSpellcheck: [
-        SpellcheckOptions
-    ],
-    _optionsPassword: [
-        PasswordOptions,
-        ProtectedSessionTimeoutOptions
-    ],
-    _optionsMFA: [MultiFactorAuthenticationOptions],
-    _optionsEtapi: [
-        EtapiOptions
-    ],
-    _optionsBackup: [
-        BackupOptions
-    ],
-    _optionsSync: [
-        SyncOptions
-    ],
-    _optionsAi: [AiSettingsOptions],
-    _optionsOther: [
-        SearchEngineOptions,
-        TrayOptions,
-        NoteErasureTimeoutOptions,
-        AttachmentErasureTimeoutOptions,
-        RevisionsSnapshotIntervalOptions,
-        RevisionSnapshotsLimitOptions,
-        HtmlImportTagsOptions,
-        ShareSettingsOptions,
-        NetworkConnectionsOptions
-    ],
-    _optionsLocalization: [
-        LocalizationOptions,
-        LanguageOptions
-    ],
-    _optionsAdvanced: [
-        AdvancedSyncOptions,
-        DatabaseIntegrityCheckOptions,
-        DatabaseAnonymizationOptions,
-        VacuumDatabaseOptions
-    ],
-    _backendLog: [
-        BackendLogWidget
-    ]
-};
-
-/**
- * Type widget that displays one or more widgets based on the type of note, generally used for options and other interactive notes such as the backend log.
- *
- * One important aspect is that, like its parent {@link TypeWidget}, the content widgets don't receive all events by default and they must be manually added
- * to the propagation list in {@link TypeWidget.handleEventInChildren}.
- */
-export default class ContentWidgetTypeWidget extends TypeWidget {
-    private $content!: JQuery<HTMLElement>;
-    private widget?: BasicWidget;
-
-    static getType() {
-        return "contentWidget";
-    }
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$content = this.$widget.find(".note-detail-content-widget-content");
-
-        super.doRender();
-    }
-
-    async doRefresh(note: FNote) {
-        this.$content.empty();
-        this.children = [];
-
-        const contentWidgets = [
-            ...((CONTENT_WIDGETS as Record<string, typeof NoteContextAwareWidget[]>)[note.noteId]),
-            RelatedSettings
-        ];
-        this.$content.toggleClass("options", note.noteId.startsWith("_options"));
-
-        if (contentWidgets) {
-            for (const clazz of contentWidgets) {
-                const widget = new clazz();
-
-                if (this.noteContext) {
-                    await widget.handleEvent("setNoteContext", { noteContext: this.noteContext });
-                }
-                this.child(widget);
-
-                this.$content.append(widget.render());
-                this.widget = widget;
-                await widget.refresh();
-            }
-        } else {
-            this.$content.append(t("content_widget.unknown_widget", { id: note.noteId }));
-        }
-    }
-
-}

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

@@ -0,0 +1,137 @@
+import TypeWidget from "./type_widget.js";
+import type FNote from "../../entities/fnote.js";
+import type NoteContextAwareWidget from "../note_context_aware_widget.js";
+import { t } from "../../services/i18n.js";
+import type BasicWidget from "../basic_widget.js";
+import type { JSX } from "preact/jsx-runtime";
+import AppearanceSettings from "./options/appearance.jsx";
+import { disposeReactWidget, renderReactWidget, renderReactWidgetAtElement } from "../react/ReactBasicWidget.jsx";
+import ImageSettings from "./options/images.jsx";
+import AdvancedSettings from "./options/advanced.jsx";
+import InternationalizationOptions from "./options/i18n.jsx";
+import SyncOptions from "./options/sync.jsx";
+import EtapiSettings from "./options/etapi.js";
+import BackupSettings from "./options/backup.js";
+import SpellcheckSettings from "./options/spellcheck.js";
+import PasswordSettings from "./options/password.jsx";
+import ShortcutSettings from "./options/shortcuts.js";
+import TextNoteSettings from "./options/text_notes.jsx";
+import CodeNoteSettings from "./options/code_notes.jsx";
+import OtherSettings from "./options/other.jsx";
+import BackendLogWidget from "./content/backend_log.js";
+import MultiFactorAuthenticationSettings from "./options/multi_factor_authentication.js";
+import AiSettings from "./options/ai_settings.jsx";
+
+const TPL = /*html*/`<div class="note-detail-content-widget note-detail-printable">
+    <style>
+        .type-contentWidget .note-detail {
+            height: 100%;
+        }
+
+        .note-detail-content-widget {
+            height: 100%;
+        }
+
+        .note-detail-content-widget-content {
+            padding: 15px;
+            height: 100%;
+        }
+
+        .note-detail.full-height .note-detail-content-widget-content {
+            padding: 0;
+        }
+    </style>
+
+    <div class="note-detail-content-widget-content"></div>
+</div>`;
+
+export type OptionPages = "_optionsAppearance" | "_optionsShortcuts" | "_optionsTextNotes" | "_optionsCodeNotes" | "_optionsImages" | "_optionsSpellcheck" | "_optionsPassword" | "_optionsMFA" | "_optionsEtapi" | "_optionsBackup" | "_optionsSync" | "_optionsAi" | "_optionsOther" | "_optionsLocalization" | "_optionsAdvanced";
+
+const CONTENT_WIDGETS: Record<OptionPages | "_backendLog", ((typeof NoteContextAwareWidget)[] | JSX.Element)> = {
+    _optionsAppearance: <AppearanceSettings />,
+    _optionsShortcuts: <ShortcutSettings />,
+    _optionsTextNotes: <TextNoteSettings />,
+    _optionsCodeNotes: <CodeNoteSettings />,
+    _optionsImages: <ImageSettings />,
+    _optionsSpellcheck: <SpellcheckSettings />,
+    _optionsPassword: <PasswordSettings />,
+    _optionsMFA: <MultiFactorAuthenticationSettings />,
+    _optionsEtapi: <EtapiSettings />,
+    _optionsBackup: <BackupSettings />,
+    _optionsSync: <SyncOptions />,
+    _optionsAi: <AiSettings />,
+    _optionsOther: <OtherSettings />,
+    _optionsLocalization: <InternationalizationOptions />,
+    _optionsAdvanced: <AdvancedSettings />,
+    _backendLog: [
+        BackendLogWidget
+    ]
+};
+
+/**
+ * Type widget that displays one or more widgets based on the type of note, generally used for options and other interactive notes such as the backend log.
+ *
+ * One important aspect is that, like its parent {@link TypeWidget}, the content widgets don't receive all events by default and they must be manually added
+ * to the propagation list in {@link TypeWidget.handleEventInChildren}.
+ */
+export default class ContentWidgetTypeWidget extends TypeWidget {
+    private $content!: JQuery<HTMLElement>;
+    private widget?: BasicWidget;
+
+    static getType() {
+        return "contentWidget";
+    }
+
+    doRender() {
+        this.$widget = $(TPL);
+        this.$content = this.$widget.find(".note-detail-content-widget-content");
+
+        super.doRender();
+    }
+
+    async doRefresh(note: FNote) {
+        this.$content.empty();
+        this.children = [];
+
+        const contentWidgets = (CONTENT_WIDGETS as Record<string, (typeof NoteContextAwareWidget[] | JSX.Element)>)[note.noteId];
+        this.$content.toggleClass("options", note.noteId.startsWith("_options"));
+
+        // Unknown widget.
+        if (!contentWidgets) {
+            this.$content.append(t("content_widget.unknown_widget", { id: note.noteId }));
+            return;
+        }
+
+        // Legacy widget.
+        if (Array.isArray(contentWidgets)) {
+            for (const clazz of contentWidgets) {
+                const widget = new clazz();
+
+                if (this.noteContext) {
+                    await widget.handleEvent("setNoteContext", { noteContext: this.noteContext });
+                }
+                this.child(widget);
+
+                this.$content.append(widget.render());
+                this.widget = widget;
+                await widget.refresh();
+            }
+            return;
+        }
+
+        // React widget.
+        renderReactWidgetAtElement(this, contentWidgets, this.$content[0]);
+    }
+
+    cleanup(): void {
+        if (this.noteId) {
+            const contentWidgets = (CONTENT_WIDGETS as Record<string, (typeof NoteContextAwareWidget[] | JSX.Element)>)[this.noteId];
+            if (contentWidgets && !Array.isArray(contentWidgets)) {
+                disposeReactWidget(this.$content[0]);
+            }
+        }
+
+        super.cleanup();
+    }
+
+}

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

@@ -14,7 +14,6 @@ import type FNote from "../../entities/fnote.js";
 import { PopupEditor, ClassicEditor, EditorWatchdog, type CKTextEditor, type MentionFeed, type WatchdogConfig, EditorConfig } from "@triliumnext/ckeditor5";
 import "@triliumnext/ckeditor5/index.css";
 import { updateTemplateCache } from "./ckeditor/snippets.js";
-import ckeditorPhotoSwipe from "../../services/ckeditor_photoswipe_integration.js";
 
 const TPL = /*html*/`
 <div class="note-detail-editable-text note-detail-printable">
@@ -163,19 +162,6 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
                 isClassicEditor
             };
             const editor = await buildEditor(this.$editor[0], isClassicEditor, opts);
-            
-            // Setup PhotoSwipe integration for images in the editor
-            setTimeout(() => {
-                const editorElement = this.$editor[0];
-                if (editorElement) {
-                    ckeditorPhotoSwipe.setupContainer(editorElement, {
-                        enableGalleryMode: true,
-                        showHints: true,
-                        hintDelay: 2000,
-                        excludeSelector: '.cke_widget_element, .ck-widget'
-                    });
-                }
-            }, 100);
 
             const notificationsPlugin = editor.plugins.get("Notification");
             notificationsPlugin.on("show:warning", (evt, data) => {
@@ -305,25 +291,11 @@ export default class EditableTextTypeWidget extends AbstractTextTypeWidget {
     }
 
     cleanup() {
-        // Cleanup PhotoSwipe integration
-        if (this.$editor?.[0]) {
-            ckeditorPhotoSwipe.cleanupContainer(this.$editor[0]);
-        }
-        
         if (this.watchdog?.editor) {
             this.spacedUpdate.allowUpdateWithoutChange(() => {
                 this.watchdog.editor?.setData("");
             });
         }
-        
-        // Destroy the watchdog to clean up all CKEditor resources
-        if (this.watchdog) {
-            this.watchdog.destroy().catch((error: any) => {
-                console.error('Error destroying CKEditor watchdog:', error);
-            });
-        }
-        
-        super.cleanup();
     }
 
     insertDateTimeToTextCommand() {

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

@@ -1,5 +1,5 @@
 import openService from "../../services/open.js";
-import { ImageViewerBase } from "./image_viewer_base.js";
+import TypeWidget from "./type_widget.js";
 import { t } from "../../services/i18n.js";
 import type { EventData } from "../../components/app_context.js";
 import type FNote from "../../entities/fnote.js";
@@ -23,8 +23,7 @@ const TPL = /*html*/`
         }
 
         .note-detail.full-height .note-detail-file[data-preview-type="pdf"],
-        .note-detail.full-height .note-detail-file[data-preview-type="video"],
-        .note-detail.full-height .note-detail-file[data-preview-type="image"] {
+        .note-detail.full-height .note-detail-file[data-preview-type="video"] {
             overflow: hidden;
         }
 
@@ -40,133 +39,6 @@ const TPL = /*html*/`
             width: 100%;
             height: 100%;
         }
-
-        .image-file-preview {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            height: 100%;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .image-file-view {
-            max-width: 100%;
-            max-height: 90%;
-            cursor: zoom-in;
-            transition: opacity 0.2s ease;
-        }
-
-        .image-file-view:hover {
-            opacity: 0.95;
-        }
-
-        .image-file-controls {
-            position: absolute;
-            bottom: 20px;
-            right: 20px;
-            display: flex;
-            gap: 10px;
-            background: rgba(0, 0, 0, 0.6);
-            border-radius: 8px;
-            padding: 8px;
-            z-index: 10;
-        }
-
-        .image-file-control-btn {
-            background: rgba(255, 255, 255, 0.9);
-            border: none;
-            border-radius: 4px;
-            min-width: 44px;
-            min-height: 44px;
-            width: 44px;
-            height: 44px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-
-        .image-file-control-btn:hover:not(:disabled) {
-            background: rgba(255, 255, 255, 1);
-        }
-
-        .image-file-control-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .image-file-control-btn i {
-            font-size: 20px;
-            color: #333;
-        }
-
-        .image-file-info {
-            position: absolute;
-            top: 10px;
-            left: 10px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-        }
-
-        /* Loading indicator */
-        .image-loading-indicator {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 100;
-        }
-
-        /* Zoom indicator */
-        .zoom-indicator {
-            position: absolute;
-            bottom: 80px;
-            right: 20px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-            pointer-events: none;
-        }
-
-        /* Mobile optimizations */
-        @media (max-width: 768px) {
-            .image-file-controls {
-                bottom: 10px;
-                right: 10px;
-                padding: 6px;
-                gap: 8px;
-            }
-
-            .image-file-info {
-                font-size: 11px;
-                padding: 6px 10px;
-            }
-        }
-
-        /* High contrast mode support */
-        @media (prefers-contrast: high) {
-            .image-file-control-btn {
-                border: 2px solid currentColor;
-            }
-        }
-
-        /* Reduced motion support */
-        @media (prefers-reduced-motion: reduce) {
-            .image-file-view,
-            .image-file-control-btn {
-                transition: none;
-            }
-        }
     </style>
 
     <div class="file-preview-too-big alert alert-info hidden-ext">
@@ -184,66 +56,21 @@ const TPL = /*html*/`
     <video class="video-preview" controls></video>
 
     <audio class="audio-preview" controls></audio>
-
-    <div class="image-file-preview" style="display: none;">
-        <div class="image-file-info">
-            <span class="image-dimensions"></span>
-        </div>
-        <img class="image-file-view" />
-        <div class="image-file-controls">
-            <button class="image-file-control-btn zoom-in" type="button" aria-label="Zoom In" title="Zoom In (+ key)">
-                <i class="bx bx-zoom-in" aria-hidden="true"></i>
-            </button>
-            <button class="image-file-control-btn zoom-out" type="button" aria-label="Zoom Out" title="Zoom Out (- key)">
-                <i class="bx bx-zoom-out" aria-hidden="true"></i>
-            </button>
-            <button class="image-file-control-btn reset-zoom" type="button" aria-label="Reset Zoom" title="Reset Zoom (0 key or double-click)">
-                <i class="bx bx-reset" aria-hidden="true"></i>
-            </button>
-            <button class="image-file-control-btn fullscreen" type="button" aria-label="Open in Lightbox" title="Open in Lightbox (Enter or Space key)">
-                <i class="bx bx-fullscreen" aria-hidden="true"></i>
-            </button>
-            <button class="image-file-control-btn download" type="button" aria-label="Download" title="Download File">
-                <i class="bx bx-download" aria-hidden="true"></i>
-            </button>
-        </div>
-    </div>
 </div>`;
 
-export default class FileTypeWidget extends ImageViewerBase {
+export default class FileTypeWidget extends TypeWidget {
+
     private $previewContent!: JQuery<HTMLElement>;
     private $previewNotAvailable!: JQuery<HTMLElement>;
     private $previewTooBig!: JQuery<HTMLElement>;
     private $pdfPreview!: JQuery<HTMLElement>;
     private $videoPreview!: JQuery<HTMLElement>;
     private $audioPreview!: JQuery<HTMLElement>;
-    private $imageFilePreview!: JQuery<HTMLElement>;
-    private $imageFileView!: JQuery<HTMLElement>;
-    private $imageDimensions!: JQuery<HTMLElement>;
-    private $fullscreenBtn!: JQuery<HTMLElement>;
-    private $downloadBtn!: JQuery<HTMLElement>;
-    private $zoomInBtn!: JQuery<HTMLElement>;
-    private $zoomOutBtn!: JQuery<HTMLElement>;
-    private $resetZoomBtn!: JQuery<HTMLElement>;
-    private wheelHandler?: (e: JQuery.TriggeredEvent) => void;
-    private currentPreviewType?: string;
 
     static getType() {
         return "file";
     }
 
-    constructor() {
-        super();
-        // Apply custom configuration for file viewer
-        this.applyConfig({
-            minZoom: 0.5,
-            maxZoom: 5,
-            zoomStep: 0.25,
-            debounceDelay: 16,
-            touchTargetSize: 44
-        });
-    }
-
     doRender() {
         this.$widget = $(TPL);
         this.$previewContent = this.$widget.find(".file-preview-content");
@@ -252,204 +79,60 @@ export default class FileTypeWidget extends ImageViewerBase {
         this.$pdfPreview = this.$widget.find(".pdf-preview");
         this.$videoPreview = this.$widget.find(".video-preview");
         this.$audioPreview = this.$widget.find(".audio-preview");
-        this.$imageFilePreview = this.$widget.find(".image-file-preview");
-        this.$imageFileView = this.$widget.find(".image-file-view");
-        this.$imageDimensions = this.$widget.find(".image-dimensions");
-        
-        // Image controls
-        this.$zoomInBtn = this.$widget.find(".zoom-in");
-        this.$zoomOutBtn = this.$widget.find(".zoom-out");
-        this.$resetZoomBtn = this.$widget.find(".reset-zoom");
-        this.$fullscreenBtn = this.$widget.find(".fullscreen");
-        this.$downloadBtn = this.$widget.find(".download");
-
-        // Set image wrapper and view for base class
-        this.$imageWrapper = this.$imageFilePreview;
-        this.$imageView = this.$imageFileView;
-
-        this.setupImageControls();
 
         super.doRender();
     }
 
-    private setupImageControls(): void {
-        // Image click to open lightbox
-        this.$imageFileView?.on("click", (e) => {
-            e.preventDefault();
-            this.openImageInLightbox();
-        });
-
-        // Control button handlers
-        this.$zoomInBtn?.on("click", () => this.zoomIn());
-        this.$zoomOutBtn?.on("click", () => this.zoomOut());
-        this.$resetZoomBtn?.on("click", () => this.resetZoom());
-        this.$fullscreenBtn?.on("click", () => this.openImageInLightbox());
-        this.$downloadBtn?.on("click", () => this.downloadFile());
-
-        // Mouse wheel zoom with focus check
-        this.wheelHandler = (e: JQuery.TriggeredEvent) => {
-            // Only handle if image preview is visible and has focus
-            if (!this.$imageFilePreview?.is(':visible') || !this.$widget?.is(':focus-within')) {
-                return;
-            }
-
-            e.preventDefault();
-            const originalEvent = e.originalEvent as WheelEvent | undefined;
-            const delta = originalEvent?.deltaY;
-            
-            if (delta) {
-                if (delta < 0) {
-                    this.zoomIn();
-                } else {
-                    this.zoomOut();
-                }
-            }
-        };
-
-        this.$imageFilePreview?.on("wheel", this.wheelHandler);
-    }
-
     async doRefresh(note: FNote) {
-        this.$widget?.show();
+        this.$widget.show();
 
         const blob = await this.note?.getBlob();
 
-        // Hide all preview types
-        this.$previewContent?.empty().hide();
-        this.$pdfPreview?.attr("src", "").empty().hide();
-        this.$previewNotAvailable?.hide();
-        this.$previewTooBig?.addClass("hidden-ext");
-        this.$videoPreview?.hide();
-        this.$audioPreview?.hide();
-        this.$imageFilePreview?.hide();
+        this.$previewContent.empty().hide();
+        this.$pdfPreview.attr("src", "").empty().hide();
+        this.$previewNotAvailable.hide();
+        this.$previewTooBig.addClass("hidden-ext");
+        this.$videoPreview.hide();
+        this.$audioPreview.hide();
 
         let previewType: string;
 
-        // Check if this is an image file
-        if (note.mime.startsWith("image/")) {
-            this.$imageFilePreview?.show();
-            const src = openService.getUrlForDownload(`api/notes/${this.noteId}/open`);
-            
-            // Reset zoom for new image
-            this.resetZoom();
-            
-            // Setup pan, keyboard navigation, and other features
-            this.setupPanFunctionality();
-            this.setupKeyboardNavigation();
-            this.setupDoubleClickReset();
-            this.setupContextMenu();
-            this.addAccessibilityLabels();
-            
-            // Load image with loading state and error handling
-            try {
-                await this.setupImage(src, this.$imageFileView!);
-                await this.loadImageDimensions(src);
-            } catch (error) {
-                console.error("Failed to load image file:", error);
-            }
-            
-            previewType = "image";
-        } else if (blob?.content) {
-            this.$previewContent?.show().scrollTop(0);
+        if (blob?.content) {
+            this.$previewContent.show().scrollTop(0);
             const trimmedContent = blob.content.substring(0, TEXT_MAX_NUM_CHARS);
             if (trimmedContent.length !== blob.content.length) {
-                this.$previewTooBig?.removeClass("hidden-ext");
+                this.$previewTooBig.removeClass("hidden-ext");
             }
-            this.$previewContent?.text(trimmedContent);
+            this.$previewContent.text(trimmedContent);
             previewType = "text";
         } else if (note.mime === "application/pdf") {
-            this.$pdfPreview?.show().attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open`));
+            this.$pdfPreview.show().attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open`));
             previewType = "pdf";
         } else if (note.mime.startsWith("video/")) {
             this.$videoPreview
-                ?.show()
+                .show()
                 .attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open-partial`))
                 .attr("type", this.note?.mime ?? "")
-                .css("width", this.$widget?.width() ?? 0);
+                .css("width", this.$widget.width() ?? 0);
             previewType = "video";
         } else if (note.mime.startsWith("audio/")) {
             this.$audioPreview
-                ?.show()
+                .show()
                 .attr("src", openService.getUrlForDownload(`api/notes/${this.noteId}/open-partial`))
                 .attr("type", this.note?.mime ?? "")
-                .css("width", this.$widget?.width() ?? 0);
+                .css("width", this.$widget.width() ?? 0);
             previewType = "audio";
         } else {
-            this.$previewNotAvailable?.show();
+            this.$previewNotAvailable.show();
             previewType = "not-available";
         }
 
-        this.currentPreviewType = previewType;
-        this.$widget?.attr("data-preview-type", previewType ?? "");
-    }
-
-    private async loadImageDimensions(src: string): Promise<void> {
-        try {
-            // Use a new Image object to get dimensions
-            const img = new Image();
-            
-            await new Promise<void>((resolve, reject) => {
-                img.onload = () => {
-                    this.$imageDimensions?.text(`${img.width} × ${img.height}px`);
-                    resolve();
-                };
-                img.onerror = () => {
-                    this.$imageDimensions?.text("Image");
-                    reject(new Error("Failed to load image dimensions"));
-                };
-                img.src = src;
-            });
-        } catch (error) {
-            console.warn("Failed to get image dimensions:", error);
-            this.$imageDimensions?.text("Image");
-        }
-    }
-
-    private openImageInLightbox(): void {
-        if (!this.note || !this.$imageFileView?.length) return;
-        
-        const src = this.$imageFileView.attr("src") || this.$imageFileView.prop("src");
-        if (!src) return;
-
-        this.openInLightbox(
-            src,
-            this.note.title || "Image File",
-            this.noteId,
-            this.$imageFileView.get(0)
-        );
-    }
-
-    private downloadFile(): void {
-        if (!this.note) return;
-        
-        try {
-            const link = document.createElement('a');
-            link.href = openService.getUrlForDownload(`api/notes/${this.noteId}/open`);
-            link.download = this.note.title || 'file';
-            
-            // Add to document, click, and remove
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        } catch (error) {
-            console.error("Failed to download file:", error);
-            alert("Failed to download file. Please try again.");
-        }
+        this.$widget.attr("data-preview-type", previewType ?? "");
     }
 
     async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (loadResults.isNoteReloaded(this.noteId)) {
-            await this.refresh();
+            this.refresh();
         }
     }
-
-    cleanup() {
-        // Remove wheel handler if it exists
-        if (this.wheelHandler && this.$imageFilePreview?.length) {
-            this.$imageFilePreview.off("wheel", this.wheelHandler);
-        }
-        
-        // Call parent cleanup
-        super.cleanup();
-    }
-}
+}

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

@@ -1,8 +1,10 @@
 import utils from "../../services/utils.js";
-import { ImageViewerBase } from "./image_viewer_base.js";
+import TypeWidget from "./type_widget.js";
+import imageContextMenuService from "../../menus/image_context_menu.js";
 import imageService from "../../services/image.js";
 import type FNote from "../../entities/fnote.js";
 import type { EventData } from "../../components/app_context.js";
+import WheelZoom from 'vanilla-js-wheel-zoom';
 
 const TPL = /*html*/`
 <div class="note-detail-image note-detail-printable">
@@ -13,7 +15,6 @@ const TPL = /*html*/`
 
         .note-detail-image {
             height: 100%;
-            position: relative;
         }
 
         .note-detail-image-wrapper {
@@ -27,314 +28,53 @@ const TPL = /*html*/`
 
         .note-detail-image-view {
             display: block;
-            max-width: 100%;
-            max-height: 100%;
             width: auto;
             height: auto;
             align-self: center;
             flex-shrink: 0;
-            cursor: zoom-in;
-            transition: opacity 0.2s ease;
-        }
-
-        .note-detail-image-view:hover {
-            opacity: 0.95;
-        }
-
-        .image-controls {
-            position: absolute;
-            bottom: 20px;
-            right: 20px;
-            display: flex;
-            gap: 10px;
-            z-index: 10;
-            background: rgba(0, 0, 0, 0.6);
-            border-radius: 8px;
-            padding: 8px;
-        }
-
-        .image-control-btn {
-            background: rgba(255, 255, 255, 0.9);
-            border: none;
-            border-radius: 4px;
-            min-width: 44px;
-            min-height: 44px;
-            width: 44px;
-            height: 44px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-
-        .image-control-btn:hover:not(:disabled) {
-            background: rgba(255, 255, 255, 1);
-        }
-
-        .image-control-btn:disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-        }
-
-        .image-control-btn i {
-            font-size: 20px;
-            color: #333;
-        }
-
-        /* Keyboard hints overlay */
-        .keyboard-hints {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 8px 12px;
-            border-radius: 4px;
-            font-size: 12px;
-            opacity: 0;
-            transition: opacity 0.3s;
-            pointer-events: none;
-            z-index: 10;
-        }
-
-        .note-detail-image:hover .keyboard-hints {
-            opacity: 0.8;
-        }
-
-        .keyboard-hints .hint {
-            margin: 2px 0;
-        }
-
-        .keyboard-hints .key {
-            background: rgba(255, 255, 255, 0.2);
-            padding: 2px 6px;
-            border-radius: 3px;
-            margin-right: 4px;
-            font-family: monospace;
-        }
-
-        /* Loading indicator */
-        .image-loading-indicator {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            z-index: 100;
-        }
-
-        /* Zoom indicator */
-        .zoom-indicator {
-            position: absolute;
-            bottom: 80px;
-            right: 20px;
-            background: rgba(0, 0, 0, 0.7);
-            color: white;
-            padding: 4px 8px;
-            border-radius: 4px;
-            font-size: 12px;
-            z-index: 10;
-            pointer-events: none;
-        }
-
-        /* Mobile optimizations */
-        @media (max-width: 768px) {
-            .image-controls {
-                bottom: 10px;
-                right: 10px;
-                padding: 6px;
-                gap: 8px;
-            }
-
-            .keyboard-hints {
-                display: none;
-            }
-        }
-
-        /* High contrast mode support */
-        @media (prefers-contrast: high) {
-            .image-control-btn {
-                border: 2px solid currentColor;
-            }
-        }
-
-        /* Reduced motion support */
-        @media (prefers-reduced-motion: reduce) {
-            .note-detail-image-view,
-            .image-control-btn {
-                transition: none;
-            }
         }
     </style>
 
     <div class="note-detail-image-wrapper">
         <img class="note-detail-image-view" />
     </div>
-    
-    <div class="image-controls">
-        <button class="image-control-btn zoom-in" type="button" aria-label="Zoom In" title="Zoom In (+ key)">
-            <i class="bx bx-zoom-in" aria-hidden="true"></i>
-        </button>
-        <button class="image-control-btn zoom-out" type="button" aria-label="Zoom Out" title="Zoom Out (- key)">
-            <i class="bx bx-zoom-out" aria-hidden="true"></i>
-        </button>
-        <button class="image-control-btn reset-zoom" type="button" aria-label="Reset Zoom" title="Reset Zoom (0 key or double-click)">
-            <i class="bx bx-reset" aria-hidden="true"></i>
-        </button>
-        <button class="image-control-btn fullscreen" type="button" aria-label="Fullscreen" title="Fullscreen (Enter or Space key)">
-            <i class="bx bx-fullscreen" aria-hidden="true"></i>
-        </button>
-        <button class="image-control-btn download" type="button" aria-label="Download" title="Download Image">
-            <i class="bx bx-download" aria-hidden="true"></i>
-        </button>
-    </div>
-    
-    <div class="keyboard-hints" aria-hidden="true">
-        <div class="hint"><span class="key">Click</span> Open lightbox</div>
-        <div class="hint"><span class="key">Double-click</span> Reset zoom</div>
-        <div class="hint"><span class="key">Scroll</span> Zoom</div>
-        <div class="hint"><span class="key">+/-</span> Zoom in/out</div>
-        <div class="hint"><span class="key">0</span> Reset zoom</div>
-        <div class="hint"><span class="key">ESC</span> Close lightbox</div>
-        <div class="hint"><span class="key">Arrow keys</span> Pan (when zoomed)</div>
-    </div>
 </div>`;
 
-class ImageTypeWidget extends ImageViewerBase {
-    private $zoomInBtn!: JQuery<HTMLElement>;
-    private $zoomOutBtn!: JQuery<HTMLElement>;
-    private $resetZoomBtn!: JQuery<HTMLElement>;
-    private $fullscreenBtn!: JQuery<HTMLElement>;
-    private $downloadBtn!: JQuery<HTMLElement>;
-    private wheelHandler?: (e: JQuery.TriggeredEvent) => void;
+class ImageTypeWidget extends TypeWidget {
+
+    private $imageWrapper!: JQuery<HTMLElement>;
+    private $imageView!: JQuery<HTMLElement>;
 
     static getType() {
         return "image";
     }
 
-    constructor() {
-        super();
-        // Apply custom configuration if needed
-        this.applyConfig({
-            minZoom: 0.5,
-            maxZoom: 5,
-            zoomStep: 0.25,
-            debounceDelay: 16,
-            touchTargetSize: 44
-        });
-    }
-
     doRender() {
         this.$widget = $(TPL);
         this.$imageWrapper = this.$widget.find(".note-detail-image-wrapper");
-        this.$imageView = this.$widget.find(".note-detail-image-view");
-        
-        // Generate unique ID for image element
-        const imageId = `image-view-${utils.randomString(10)}`;
-        this.$imageView.attr("id", imageId);
-        
-        // Get control buttons
-        this.$zoomInBtn = this.$widget.find(".zoom-in");
-        this.$zoomOutBtn = this.$widget.find(".zoom-out");
-        this.$resetZoomBtn = this.$widget.find(".reset-zoom");
-        this.$fullscreenBtn = this.$widget.find(".fullscreen");
-        this.$downloadBtn = this.$widget.find(".download");
+        this.$imageView = this.$widget.find(".note-detail-image-view").attr("id", `image-view-${utils.randomString(10)}`);
 
-        this.setupEventHandlers();
-        this.setupPanFunctionality();
-        this.setupKeyboardNavigation();
-        this.setupDoubleClickReset();
-        this.setupContextMenu();
-        this.addAccessibilityLabels();
+        const initZoom = async () => {
+            const element = document.querySelector(`#${this.$imageView.attr("id")}`);
+            if (element) {
+                WheelZoom.create(`#${this.$imageView.attr("id")}`, {
+                    maxScale: 50,
+                    speed: 1.3,
+                    zoomOnClick: false
+                });
+            } else {
+                requestAnimationFrame(initZoom);
+            }
+        };
+        initZoom();
+
+        imageContextMenuService.setupContextMenu(this.$imageView);
 
         super.doRender();
     }
 
-    private setupEventHandlers(): void {
-        // Image click to open lightbox
-        this.$imageView?.on("click", async (e) => {
-            e.preventDefault();
-            await this.handleOpenLightbox();
-        });
-
-        // Control button handlers
-        this.$zoomInBtn?.on("click", () => this.zoomIn());
-        this.$zoomOutBtn?.on("click", () => this.zoomOut());
-        this.$resetZoomBtn?.on("click", () => this.resetZoom());
-        this.$fullscreenBtn?.on("click", async () => await this.handleOpenLightbox());
-        this.$downloadBtn?.on("click", () => this.downloadImage());
-
-        // Mouse wheel zoom with debouncing
-        this.wheelHandler = (e: JQuery.TriggeredEvent) => {
-            // Only handle if widget has focus
-            if (!this.$widget?.is(':focus-within')) {
-                return;
-            }
-
-            e.preventDefault();
-            const originalEvent = e.originalEvent as WheelEvent | undefined;
-            const delta = originalEvent?.deltaY;
-            
-            if (delta) {
-                if (delta < 0) {
-                    this.zoomIn();
-                } else {
-                    this.zoomOut();
-                }
-            }
-        };
-
-        this.$imageWrapper?.on("wheel", this.wheelHandler);
-    }
-
-    private async handleOpenLightbox(): Promise<void> {
-        if (!this.$imageView?.length) return;
-        
-        const src = this.$imageView.attr('src') || this.$imageView.prop('src');
-        if (!src) return;
-
-        await this.openInLightbox(
-            src,
-            this.note?.title,
-            this.noteId,
-            this.$imageView.get(0)
-        );
-    }
-
     async doRefresh(note: FNote) {
-        const src = utils.createImageSrcUrl(note);
-        
-        // Reset zoom when image changes
-        this.resetZoom();
-        
-        // Refresh gallery items when note changes
-        await this.refreshGalleryItems();
-        
-        // Setup image with loading state and error handling
-        try {
-            await this.setupImage(src, this.$imageView!);
-        } catch (error) {
-            console.error("Failed to load image:", error);
-            // Error message is already shown by setupImage
-        }
-    }
-
-    private downloadImage(): void {
-        if (!this.note) return;
-        
-        try {
-            const link = document.createElement('a');
-            link.href = utils.createImageSrcUrl(this.note);
-            link.download = this.note.title || 'image';
-            
-            // Add to document, click, and remove
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        } catch (error) {
-            console.error("Failed to download image:", error);
-            alert("Failed to download image. Please try again.");
-        }
+        this.$imageView.prop("src", utils.createImageSrcUrl(note));
     }
 
     copyImageReferenceToClipboardEvent({ ntxId }: EventData<"copyImageReferenceToClipboard">) {
@@ -342,26 +82,14 @@ class ImageTypeWidget extends ImageViewerBase {
             return;
         }
 
-        if (this.$imageWrapper?.length) {
-            imageService.copyImageReferenceToClipboard(this.$imageWrapper);
-        }
+        imageService.copyImageReferenceToClipboard(this.$imageWrapper);
     }
 
     async entitiesReloadedEvent({ loadResults }: EventData<"entitiesReloaded">) {
         if (loadResults.isNoteReloaded(this.noteId)) {
-            await this.refresh();
+            this.refresh();
         }
     }
-
-    cleanup() {
-        // Remove wheel handler if it exists
-        if (this.wheelHandler && this.$imageWrapper?.length) {
-            this.$imageWrapper.off("wheel", this.wheelHandler);
-        }
-        
-        // Call parent cleanup
-        super.cleanup();
-    }
 }
 
-export default ImageTypeWidget;
+export default ImageTypeWidget;

apps/client/src/widgets/type_widgets/image_viewer_base.spec.ts

@@ -1,352 +0,0 @@
-import { ImageViewerBase } from './image_viewer_base.js';
-import mediaViewer from '../../services/media_viewer.js';
-
-// Mock mediaViewer
-jest.mock('../../services/media_viewer.js', () => ({
-    default: {
-        isOpen: jest.fn().mockReturnValue(false),
-        close: jest.fn(),
-        openSingle: jest.fn(),
-        getImageDimensions: jest.fn().mockResolvedValue({ width: 1920, height: 1080 })
-    }
-}));
-
-// Create a concrete test class
-class TestImageViewer extends ImageViewerBase {
-    static getType() {
-        return 'test';
-    }
-
-    doRender() {
-        this.$widget = $('<div class="test-widget" tabindex="0"></div>');
-        this.$imageWrapper = $('<div class="image-wrapper"></div>');
-        this.$imageView = $('<img class="image-view" />');
-        this.$widget.append(this.$imageWrapper.append(this.$imageView));
-        super.doRender();
-    }
-
-    async doRefresh() {
-        // Test implementation
-    }
-}
-
-describe('ImageViewerBase', () => {
-    let widget: TestImageViewer;
-    let $container: JQuery<HTMLElement>;
-
-    beforeEach(() => {
-        // Setup DOM container
-        $container = $('<div id="test-container"></div>');
-        $('body').append($container);
-        
-        widget = new TestImageViewer();
-        widget.doRender();
-        $container.append(widget.$widget!);
-    });
-
-    afterEach(() => {
-        widget.cleanup();
-        $container.remove();
-        jest.clearAllMocks();
-    });
-
-    describe('PhotoSwipe Verification', () => {
-        it('should verify PhotoSwipe availability on initialization', () => {
-            expect(widget['isPhotoSwipeAvailable']).toBe(true);
-        });
-
-        it('should handle PhotoSwipe not being available gracefully', () => {
-            const originalMediaViewer = mediaViewer;
-            // @ts-ignore - Temporarily set to undefined for testing
-            window.mediaViewer = undefined;
-            
-            const newWidget = new TestImageViewer();
-            expect(newWidget['isPhotoSwipeAvailable']).toBe(false);
-            
-            // @ts-ignore - Restore
-            window.mediaViewer = originalMediaViewer;
-        });
-    });
-
-    describe('Configuration', () => {
-        it('should have default configuration values', () => {
-            expect(widget['config'].minZoom).toBe(0.5);
-            expect(widget['config'].maxZoom).toBe(5);
-            expect(widget['config'].zoomStep).toBe(0.25);
-            expect(widget['config'].debounceDelay).toBe(16);
-            expect(widget['config'].touchTargetSize).toBe(44);
-        });
-
-        it('should allow configuration overrides', () => {
-            widget['applyConfig']({
-                minZoom: 0.2,
-                maxZoom: 10,
-                zoomStep: 0.5
-            });
-            
-            expect(widget['config'].minZoom).toBe(0.2);
-            expect(widget['config'].maxZoom).toBe(10);
-            expect(widget['config'].zoomStep).toBe(0.5);
-            expect(widget['config'].debounceDelay).toBe(16); // Unchanged
-        });
-    });
-
-    describe('Loading States', () => {
-        it('should show loading indicator when loading image', () => {
-            widget['showLoadingIndicator']();
-            expect(widget.$imageWrapper?.find('.image-loading-indicator').length).toBe(1);
-        });
-
-        it('should hide loading indicator after loading', () => {
-            widget['showLoadingIndicator']();
-            widget['hideLoadingIndicator']();
-            expect(widget.$imageWrapper?.find('.image-loading-indicator').length).toBe(0);
-        });
-
-        it('should handle image load errors gracefully', async () => {
-            const mockImage = {
-                onload: null as any,
-                onerror: null as any,
-                src: ''
-            };
-            
-            // @ts-ignore
-            global.Image = jest.fn(() => mockImage);
-            
-            const setupPromise = widget['setupImage']('test.jpg', widget.$imageView!);
-            
-            // Trigger error
-            mockImage.onerror(new Error('Failed to load'));
-            
-            await expect(setupPromise).rejects.toThrow('Failed to load image');
-            expect(widget.$imageWrapper?.find('.alert-danger').length).toBe(1);
-        });
-    });
-
-    describe('Zoom Functionality', () => {
-        it('should zoom in correctly', () => {
-            const initialZoom = widget['currentZoom'];
-            widget['zoomIn']();
-            
-            // Wait for debounce
-            jest.advanceTimersByTime(20);
-            
-            expect(widget['currentZoom']).toBeGreaterThan(initialZoom);
-        });
-
-        it('should zoom out correctly', () => {
-            widget['currentZoom'] = 2;
-            widget['zoomOut']();
-            
-            // Wait for debounce
-            jest.advanceTimersByTime(20);
-            
-            expect(widget['currentZoom']).toBeLessThan(2);
-        });
-
-        it('should respect zoom limits', () => {
-            // Test max zoom
-            widget['currentZoom'] = widget['config'].maxZoom;
-            widget['zoomIn']();
-            jest.advanceTimersByTime(20);
-            expect(widget['currentZoom']).toBe(widget['config'].maxZoom);
-            
-            // Test min zoom
-            widget['currentZoom'] = widget['config'].minZoom;
-            widget['zoomOut']();
-            jest.advanceTimersByTime(20);
-            expect(widget['currentZoom']).toBe(widget['config'].minZoom);
-        });
-
-        it('should reset zoom to 100%', () => {
-            widget['currentZoom'] = 3;
-            widget['resetZoom']();
-            expect(widget['currentZoom']).toBe(1);
-        });
-
-        it('should show zoom indicator when zooming', () => {
-            widget['updateZoomIndicator']();
-            expect(widget.$widget?.find('.zoom-indicator').length).toBe(1);
-            expect(widget.$widget?.find('.zoom-indicator').text()).toBe('100%');
-        });
-    });
-
-    describe('Keyboard Navigation', () => {
-        it('should only handle keyboard events when widget has focus', () => {
-            const preventDefaultSpy = jest.fn();
-            const stopPropagationSpy = jest.fn();
-            
-            // Simulate widget not having focus
-            widget.$widget?.blur();
-            
-            const event = $.Event('keydown', {
-                key: '+',
-                preventDefault: preventDefaultSpy,
-                stopPropagation: stopPropagationSpy
-            });
-            
-            widget.$widget?.trigger(event);
-            
-            expect(preventDefaultSpy).not.toHaveBeenCalled();
-            expect(stopPropagationSpy).not.toHaveBeenCalled();
-        });
-
-        it('should handle zoom keyboard shortcuts when focused', () => {
-            // Focus the widget
-            widget.$widget?.focus();
-            jest.spyOn(widget.$widget!, 'is').mockImplementation((selector) => {
-                if (selector === ':focus-within') return true;
-                return false;
-            });
-            
-            const zoomInSpy = jest.spyOn(widget as any, 'zoomIn');
-            
-            const event = $.Event('keydown', { key: '+' });
-            widget.$widget?.trigger(event);
-            
-            expect(zoomInSpy).toHaveBeenCalled();
-        });
-    });
-
-    describe('Pan Functionality', () => {
-        it('should setup pan event handlers', () => {
-            widget['setupPanFunctionality']();
-            expect(widget['boundHandlers'].size).toBeGreaterThan(0);
-        });
-
-        it('should only allow panning when zoomed in', () => {
-            widget['currentZoom'] = 1; // Not zoomed
-            const mouseDownEvent = $.Event('mousedown', { pageX: 100, pageY: 100 });
-            widget.$imageWrapper?.trigger(mouseDownEvent);
-            
-            expect(widget['isDragging']).toBe(false);
-            
-            // Now zoom in and try again
-            widget['currentZoom'] = 2;
-            widget.$imageWrapper?.trigger(mouseDownEvent);
-            
-            expect(widget['isDragging']).toBe(true);
-        });
-    });
-
-    describe('Accessibility', () => {
-        it('should add ARIA labels to buttons', () => {
-            const $button = $('<button class="zoom-in"></button>');
-            widget.$widget?.append($button);
-            
-            widget['addAccessibilityLabels']();
-            
-            expect($button.attr('aria-label')).toBe('Zoom in');
-            expect($button.attr('role')).toBe('button');
-        });
-
-        it('should make widget focusable with proper ARIA attributes', () => {
-            widget['setupKeyboardNavigation']();
-            
-            expect(widget.$widget?.attr('tabindex')).toBe('0');
-            expect(widget.$widget?.attr('role')).toBe('application');
-            expect(widget.$widget?.attr('aria-label')).toBeTruthy();
-        });
-    });
-
-    describe('Lightbox Integration', () => {
-        it('should open lightbox when PhotoSwipe is available', () => {
-            const openSingleSpy = jest.spyOn(mediaViewer, 'openSingle');
-            
-            widget['openInLightbox']('test.jpg', 'Test Image', 'note123');
-            
-            expect(openSingleSpy).toHaveBeenCalledWith(
-                expect.objectContaining({
-                    src: 'test.jpg',
-                    alt: 'Test Image',
-                    title: 'Test Image',
-                    noteId: 'note123'
-                }),
-                expect.any(Object),
-                expect.any(Object)
-            );
-        });
-
-        it('should fallback to opening in new tab when PhotoSwipe is not available', () => {
-            widget['isPhotoSwipeAvailable'] = false;
-            const windowOpenSpy = jest.spyOn(window, 'open').mockImplementation();
-            
-            widget['openInLightbox']('test.jpg', 'Test Image');
-            
-            expect(windowOpenSpy).toHaveBeenCalledWith('test.jpg', '_blank');
-            expect(mediaViewer.openSingle).not.toHaveBeenCalled();
-        });
-    });
-
-    describe('Memory Leak Prevention', () => {
-        it('should cleanup all event handlers on cleanup', () => {
-            widget['setupPanFunctionality']();
-            widget['setupKeyboardNavigation']();
-            
-            const initialHandlerCount = widget['boundHandlers'].size;
-            expect(initialHandlerCount).toBeGreaterThan(0);
-            
-            widget.cleanup();
-            
-            expect(widget['boundHandlers'].size).toBe(0);
-        });
-
-        it('should cancel animation frames on cleanup', () => {
-            const cancelAnimationFrameSpy = jest.spyOn(window, 'cancelAnimationFrame');
-            widget['rafId'] = 123;
-            
-            widget.cleanup();
-            
-            expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(123);
-            expect(widget['rafId']).toBeNull();
-        });
-
-        it('should clear timers on cleanup', () => {
-            const clearTimeoutSpy = jest.spyOn(window, 'clearTimeout');
-            widget['zoomDebounceTimer'] = 456;
-            
-            widget.cleanup();
-            
-            expect(clearTimeoutSpy).toHaveBeenCalledWith(456);
-            expect(widget['zoomDebounceTimer']).toBeNull();
-        });
-
-        it('should close lightbox if open on cleanup', () => {
-            jest.spyOn(mediaViewer, 'isOpen').mockReturnValue(true);
-            const closeSpy = jest.spyOn(mediaViewer, 'close');
-            
-            widget.cleanup();
-            
-            expect(closeSpy).toHaveBeenCalled();
-        });
-    });
-
-    describe('Double-click Reset', () => {
-        it('should reset zoom on double-click', () => {
-            widget['currentZoom'] = 3;
-            widget['setupDoubleClickReset']();
-            
-            const dblClickEvent = $.Event('dblclick');
-            widget.$imageView?.trigger(dblClickEvent);
-            
-            expect(widget['currentZoom']).toBe(1);
-        });
-    });
-
-    describe('Error Handling', () => {
-        it('should show error message to user on failure', () => {
-            widget['showErrorMessage']('Test error message');
-            
-            const $error = widget.$imageWrapper?.find('.alert-danger');
-            expect($error?.length).toBe(1);
-            expect($error?.text()).toBe('Test error message');
-        });
-
-        it('should handle null/undefined elements safely', () => {
-            widget.$imageView = undefined;
-            
-            // Should not throw
-            expect(() => widget['setupImage']('test.jpg', widget.$imageView!)).not.toThrow();
-        });
-    });
-});

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

@@ -1,787 +0,0 @@
-/**
- * Base class for widgets that display images with zoom, pan, and lightbox functionality.
- * Provides shared image viewing logic to avoid code duplication.
- */
-import TypeWidget from "./type_widget.js";
-import mediaViewer from "../../services/media_viewer.js";
-import type { MediaItem, MediaViewerCallbacks } from "../../services/media_viewer.js";
-import imageContextMenuService from "../../menus/image_context_menu.js";
-import galleryManager from "../../services/gallery_manager.js";
-import type { GalleryItem, GalleryConfig } from "../../services/gallery_manager.js";
-
-export interface ImageViewerConfig {
-    minZoom?: number;
-    maxZoom?: number;
-    zoomStep?: number;
-    debounceDelay?: number;
-    touchTargetSize?: number;
-}
-
-export abstract class ImageViewerBase extends TypeWidget {
-    // Configuration
-    protected config: Required<ImageViewerConfig> = {
-        minZoom: 0.5,
-        maxZoom: 5,
-        zoomStep: 0.25,
-        debounceDelay: 16, // ~60fps
-        touchTargetSize: 44 // WCAG recommended minimum
-    };
-
-    // State
-    protected currentZoom: number = 1;
-    protected isDragging: boolean = false;
-    protected startX: number = 0;
-    protected startY: number = 0;
-    protected scrollLeft: number = 0;
-    protected scrollTop: number = 0;
-    protected isPhotoSwipeAvailable: boolean = false;
-    protected isLoadingImage: boolean = false;
-    protected galleryItems: GalleryItem[] = [];
-    protected currentImageIndex: number = 0;
-
-    // Elements
-    protected $imageWrapper?: JQuery<HTMLElement>;
-    protected $imageView?: JQuery<HTMLElement>;
-    protected $zoomIndicator?: JQuery<HTMLElement>;
-    protected $loadingIndicator?: JQuery<HTMLElement>;
-
-    // Event handler references for cleanup
-    private boundHandlers: Map<string, Function> = new Map();
-    private rafId: number | null = null;
-    private zoomDebounceTimer: number | null = null;
-
-    constructor() {
-        super();
-        this.verifyPhotoSwipe();
-    }
-
-    /**
-     * Verify PhotoSwipe is available
-     */
-    protected verifyPhotoSwipe(): void {
-        try {
-            // Check if PhotoSwipe is loaded
-            if (typeof mediaViewer !== 'undefined' && mediaViewer) {
-                this.isPhotoSwipeAvailable = true;
-            } else {
-                console.warn("PhotoSwipe/mediaViewer not available, lightbox features disabled");
-                this.isPhotoSwipeAvailable = false;
-            }
-        } catch (error) {
-            console.error("Error checking PhotoSwipe availability:", error);
-            this.isPhotoSwipeAvailable = false;
-        }
-    }
-
-    /**
-     * Apply configuration overrides
-     */
-    protected applyConfig(overrides?: ImageViewerConfig): void {
-        if (overrides) {
-            this.config = { ...this.config, ...overrides };
-        }
-    }
-
-    /**
-     * Show loading indicator
-     */
-    protected showLoadingIndicator(): void {
-        if (!this.$loadingIndicator) {
-            this.$loadingIndicator = $('<div class="image-loading-indicator">')
-                .html('<div class="spinner-border spinner-border-sm" role="status"><span class="sr-only">Loading...</span></div>')
-                .css({
-                    position: 'absolute',
-                    top: '50%',
-                    left: '50%',
-                    transform: 'translate(-50%, -50%)',
-                    zIndex: 100
-                });
-        }
-        this.$imageWrapper?.append(this.$loadingIndicator);
-        this.isLoadingImage = true;
-    }
-
-    /**
-     * Hide loading indicator
-     */
-    protected hideLoadingIndicator(): void {
-        this.$loadingIndicator?.remove();
-        this.isLoadingImage = false;
-    }
-
-    /**
-     * Setup image with loading state and error handling
-     */
-    protected async setupImage(src: string, $image: JQuery<HTMLElement>): Promise<void> {
-        if (!$image || !$image.length) {
-            console.error("Image element not provided");
-            return;
-        }
-
-        this.showLoadingIndicator();
-
-        return new Promise((resolve, reject) => {
-            const img = new Image();
-            
-            img.onload = () => {
-                this.hideLoadingIndicator();
-                $image.attr('src', src);
-                
-                // Preload dimensions for PhotoSwipe if available
-                if (this.isPhotoSwipeAvailable) {
-                    this.preloadImageDimensions(src).catch(console.warn);
-                }
-                
-                resolve();
-            };
-            
-            img.onerror = (error) => {
-                this.hideLoadingIndicator();
-                console.error("Failed to load image:", error);
-                this.showErrorMessage("Failed to load image");
-                reject(new Error("Failed to load image"));
-            };
-            
-            img.src = src;
-        });
-    }
-
-    /**
-     * Show error message to user
-     */
-    protected showErrorMessage(message: string): void {
-        const $error = $('<div class="alert alert-danger">')
-            .text(message)
-            .css({
-                position: 'absolute',
-                top: '50%',
-                left: '50%',
-                transform: 'translate(-50%, -50%)',
-                maxWidth: '80%'
-            });
-        
-        this.$imageWrapper?.empty().append($error);
-    }
-
-    /**
-     * Preload image dimensions for PhotoSwipe
-     */
-    protected async preloadImageDimensions(src: string): Promise<void> {
-        if (!this.isPhotoSwipeAvailable) return;
-        
-        try {
-            await mediaViewer.getImageDimensions(src);
-        } catch (error) {
-            console.warn("Failed to preload image dimensions:", error);
-        }
-    }
-
-    /**
-     * Detect and collect gallery items from the current context
-     */
-    protected async detectGalleryItems(): Promise<GalleryItem[]> {
-        // Default implementation - can be overridden by subclasses
-        if (this.note && this.note.type === 'text') {
-            // For text notes, scan for all images
-            return await galleryManager.createGalleryFromNote(this.note);
-        }
-        
-        // For single image notes, return just the current image
-        const src = this.$imageView?.attr('src') || this.$imageView?.prop('src');
-        if (src) {
-            return [{
-                src: src,
-                alt: this.note?.title || 'Image',
-                title: this.note?.title,
-                noteId: this.noteId,
-                index: 0
-            }];
-        }
-        
-        return [];
-    }
-
-    /**
-     * Open image in lightbox with gallery support
-     */
-    protected async openInLightbox(src: string, title?: string, noteId?: string, element?: HTMLElement): Promise<void> {
-        if (!this.isPhotoSwipeAvailable) {
-            console.warn("PhotoSwipe not available, cannot open lightbox");
-            // Fallback: open image in new tab
-            window.open(src, '_blank');
-            return;
-        }
-
-        if (!src) {
-            console.error("No image source provided for lightbox");
-            return;
-        }
-
-        try {
-            // Detect if we should open as a gallery
-            if (this.galleryItems.length === 0) {
-                this.galleryItems = await this.detectGalleryItems();
-            }
-            
-            // Find the index of the current image in the gallery
-            let startIndex = 0;
-            if (this.galleryItems.length > 1) {
-                startIndex = this.galleryItems.findIndex(item => item.src === src);
-                if (startIndex === -1) startIndex = 0;
-            }
-            
-            // Open as gallery if multiple items, otherwise single image
-            if (this.galleryItems.length > 1) {
-                // Open gallery with all images
-                const galleryConfig: GalleryConfig = {
-                    showThumbnails: true,
-                    thumbnailHeight: 80,
-                    autoPlay: false,
-                    slideInterval: 4000,
-                    showCounter: true,
-                    enableKeyboardNav: true,
-                    enableSwipeGestures: true,
-                    preloadCount: 2,
-                    loop: true
-                };
-                
-                const callbacks: MediaViewerCallbacks = {
-                    onOpen: () => {
-                        console.log("Gallery opened with", this.galleryItems.length, "images");
-                    },
-                    onClose: () => {
-                        console.log("Gallery closed");
-                        // Restore focus to the image element
-                        element?.focus();
-                    },
-                    onChange: (index) => {
-                        console.log("Gallery slide changed to:", index);
-                        this.currentImageIndex = index;
-                    },
-                    onImageLoad: (index, mediaItem) => {
-                        console.log("Gallery image loaded:", mediaItem.title);
-                    },
-                    onImageError: (index, mediaItem, error) => {
-                        console.error("Failed to load gallery image:", error);
-                    }
-                };
-                
-                galleryManager.openGallery(this.galleryItems, startIndex, galleryConfig, callbacks);
-            } else {
-                // Open single image
-                const item: MediaItem = {
-                    src: src,
-                    alt: title || "Image",
-                    title: title,
-                    noteId: noteId,
-                    element: element
-                };
-
-            const callbacks: MediaViewerCallbacks = {
-                onOpen: () => {
-                    console.log("Image lightbox opened");
-                },
-                onClose: () => {
-                    console.log("Image lightbox closed");
-                    // Restore focus to the image element
-                    element?.focus();
-                },
-                onImageLoad: (index, mediaItem) => {
-                    console.log("Image loaded in lightbox:", mediaItem.title);
-                },
-                onImageError: (index, mediaItem, error) => {
-                    console.error("Failed to load image in lightbox:", error);
-                }
-            };
-
-                // Open with enhanced configuration
-                mediaViewer.openSingle(item, {
-                bgOpacity: 0.95,
-                showHideOpacity: true,
-                pinchToClose: true,
-                closeOnScroll: false,
-                closeOnVerticalDrag: true,
-                wheelToZoom: true,
-                arrowKeys: false,
-                loop: false,
-                maxSpreadZoom: 10,
-                getThumbBoundsFn: (index: number) => {
-                    // Get position of thumbnail for zoom animation
-                    if (element) {
-                        const rect = element.getBoundingClientRect();
-                        return {
-                            x: rect.left,
-                            y: rect.top,
-                            w: rect.width
-                        };
-                    }
-                    return undefined;
-                }
-                }, callbacks);
-            }
-        } catch (error) {
-            console.error("Failed to open lightbox:", error);
-            // Fallback: open image in new tab
-            window.open(src, '_blank');
-        }
-    }
-
-    /**
-     * Zoom in with debouncing
-     */
-    protected zoomIn(): void {
-        if (this.zoomDebounceTimer) {
-            clearTimeout(this.zoomDebounceTimer);
-        }
-        
-        this.zoomDebounceTimer = window.setTimeout(() => {
-            this.currentZoom = Math.min(this.currentZoom + this.config.zoomStep, this.config.maxZoom);
-            this.applyZoom();
-        }, this.config.debounceDelay);
-    }
-
-    /**
-     * Zoom out with debouncing
-     */
-    protected zoomOut(): void {
-        if (this.zoomDebounceTimer) {
-            clearTimeout(this.zoomDebounceTimer);
-        }
-        
-        this.zoomDebounceTimer = window.setTimeout(() => {
-            this.currentZoom = Math.max(this.currentZoom - this.config.zoomStep, this.config.minZoom);
-            this.applyZoom();
-        }, this.config.debounceDelay);
-    }
-
-    /**
-     * Reset zoom to 100%
-     */
-    protected resetZoom(): void {
-        this.currentZoom = 1;
-        this.applyZoom();
-        
-        if (this.$imageWrapper?.length) {
-            this.$imageWrapper.scrollLeft(0).scrollTop(0);
-        }
-    }
-
-    /**
-     * Apply zoom with requestAnimationFrame for smooth performance
-     */
-    protected applyZoom(): void {
-        if (this.rafId) {
-            cancelAnimationFrame(this.rafId);
-        }
-        
-        this.rafId = requestAnimationFrame(() => {
-            if (!this.$imageView?.length) return;
-            
-            this.$imageView.css({
-                transform: `scale(${this.currentZoom})`,
-                transformOrigin: 'center center'
-            });
-            
-            // Update zoom indicator
-            this.updateZoomIndicator();
-            
-            // Update button states
-            this.updateZoomButtonStates();
-            
-            // Update cursor based on zoom level
-            if (this.currentZoom > 1) {
-                this.$imageView.css('cursor', 'move');
-            } else {
-                this.$imageView.css('cursor', 'zoom-in');
-            }
-        });
-    }
-
-    /**
-     * Update zoom percentage indicator
-     */
-    protected updateZoomIndicator(): void {
-        const percentage = Math.round(this.currentZoom * 100);
-        
-        if (!this.$zoomIndicator) {
-            this.$zoomIndicator = $('<div class="zoom-indicator">')
-                .css({
-                    position: 'absolute',
-                    bottom: '60px',
-                    right: '20px',
-                    background: 'rgba(0, 0, 0, 0.7)',
-                    color: 'white',
-                    padding: '4px 8px',
-                    borderRadius: '4px',
-                    fontSize: '12px',
-                    zIndex: 10
-                })
-                .attr('aria-live', 'polite')
-                .attr('aria-label', 'Zoom level');
-            
-            this.$widget?.append(this.$zoomIndicator);
-        }
-        
-        this.$zoomIndicator.text(`${percentage}%`);
-        
-        // Hide indicator after 2 seconds
-        if (this.$zoomIndicator.data('hideTimer')) {
-            clearTimeout(this.$zoomIndicator.data('hideTimer'));
-        }
-        
-        this.$zoomIndicator.show();
-        const hideTimer = setTimeout(() => {
-            this.$zoomIndicator?.fadeOut();
-        }, 2000);
-        
-        this.$zoomIndicator.data('hideTimer', hideTimer);
-    }
-
-    /**
-     * Update zoom button states
-     */
-    protected updateZoomButtonStates(): void {
-        const $zoomInBtn = this.$widget?.find('.zoom-in, .image-control-btn.zoom-in');
-        const $zoomOutBtn = this.$widget?.find('.zoom-out, .image-control-btn.zoom-out');
-        
-        if ($zoomInBtn?.length) {
-            $zoomInBtn.prop('disabled', this.currentZoom >= this.config.maxZoom);
-            $zoomInBtn.attr('aria-disabled', (this.currentZoom >= this.config.maxZoom).toString());
-        }
-        
-        if ($zoomOutBtn?.length) {
-            $zoomOutBtn.prop('disabled', this.currentZoom <= this.config.minZoom);
-            $zoomOutBtn.attr('aria-disabled', (this.currentZoom <= this.config.minZoom).toString());
-        }
-    }
-
-    /**
-     * Setup pan functionality with proper event cleanup
-     */
-    protected setupPanFunctionality(): void {
-        if (!this.$imageWrapper?.length) return;
-
-        // Create bound handlers for cleanup
-        const handleMouseDown = this.handleMouseDown.bind(this);
-        const handleMouseMove = this.handleMouseMove.bind(this);
-        const handleMouseUp = this.handleMouseUp.bind(this);
-        const handleTouchStart = this.handleTouchStart.bind(this);
-        const handleTouchMove = this.handleTouchMove.bind(this);
-        const handlePinchZoom = this.handlePinchZoom.bind(this);
-
-        // Store references for cleanup
-        this.boundHandlers.set('mousedown', handleMouseDown);
-        this.boundHandlers.set('mousemove', handleMouseMove);
-        this.boundHandlers.set('mouseup', handleMouseUp);
-        this.boundHandlers.set('touchstart', handleTouchStart);
-        this.boundHandlers.set('touchmove', handleTouchMove);
-        this.boundHandlers.set('pinchzoom', handlePinchZoom);
-
-        // Mouse events
-        this.$imageWrapper.on('mousedown', handleMouseDown);
-        
-        // Document-level mouse events (for dragging outside wrapper)
-        $(document).on('mousemove', handleMouseMove);
-        $(document).on('mouseup', handleMouseUp);
-
-        // Touch events
-        this.$imageWrapper.on('touchstart', handleTouchStart);
-        this.$imageWrapper.on('touchmove', handleTouchMove);
-        
-        // Pinch zoom
-        this.$imageWrapper.on('touchstart', handlePinchZoom);
-        this.$imageWrapper.on('touchmove', handlePinchZoom);
-    }
-
-    private handleMouseDown(e: JQuery.MouseDownEvent): void {
-        if (this.currentZoom <= 1 || !this.$imageWrapper) return;
-        
-        this.isDragging = true;
-        
-        const offset = this.$imageWrapper.offset();
-        if (offset) {
-            this.startX = e.pageX - offset.left;
-            this.startY = e.pageY - offset.top;
-        }
-        
-        this.scrollLeft = this.$imageWrapper.scrollLeft() ?? 0;
-        this.scrollTop = this.$imageWrapper.scrollTop() ?? 0;
-        
-        this.$imageWrapper.css('cursor', 'grabbing');
-        e.preventDefault();
-    }
-
-    private handleMouseMove(e: JQuery.MouseMoveEvent): void {
-        if (!this.isDragging || !this.$imageWrapper) return;
-        
-        e.preventDefault();
-        
-        const offset = this.$imageWrapper.offset();
-        if (offset) {
-            const x = e.pageX - offset.left;
-            const y = e.pageY - offset.top;
-            const walkX = (x - this.startX) * 2;
-            const walkY = (y - this.startY) * 2;
-            
-            this.$imageWrapper.scrollLeft(this.scrollLeft - walkX);
-            this.$imageWrapper.scrollTop(this.scrollTop - walkY);
-        }
-    }
-
-    private handleMouseUp(): void {
-        if (this.isDragging) {
-            this.isDragging = false;
-            if (this.currentZoom > 1 && this.$imageWrapper) {
-                this.$imageWrapper.css('cursor', 'move');
-            }
-        }
-    }
-
-    private handleTouchStart(e: JQuery.TouchStartEvent): void {
-        if (this.currentZoom <= 1 || !this.$imageWrapper) return;
-        
-        const touch = e.originalEvent?.touches[0];
-        if (touch) {
-            this.startX = touch.clientX;
-            this.startY = touch.clientY;
-            this.scrollLeft = this.$imageWrapper.scrollLeft() ?? 0;
-            this.scrollTop = this.$imageWrapper.scrollTop() ?? 0;
-        }
-    }
-
-    private handleTouchMove(e: JQuery.TouchMoveEvent): void {
-        if (this.currentZoom <= 1 || !this.$imageWrapper) return;
-        
-        const touches = e.originalEvent?.touches;
-        if (touches && touches.length === 1) {
-            e.preventDefault();
-            const touch = touches[0];
-            const deltaX = this.startX - touch.clientX;
-            const deltaY = this.startY - touch.clientY;
-            
-            this.$imageWrapper.scrollLeft(this.scrollLeft + deltaX);
-            this.$imageWrapper.scrollTop(this.scrollTop + deltaY);
-        }
-    }
-
-    private initialDistance: number = 0;
-    private initialZoom: number = 1;
-
-    private handlePinchZoom(e: JQuery.TriggeredEvent): void {
-        const touches = e.originalEvent?.touches;
-        if (!touches || touches.length !== 2) return;
-
-        if (e.type === 'touchstart') {
-            this.initialDistance = Math.hypot(
-                touches[0].clientX - touches[1].clientX,
-                touches[0].clientY - touches[1].clientY
-            );
-            this.initialZoom = this.currentZoom;
-        } else if (e.type === 'touchmove') {
-            e.preventDefault();
-            
-            const distance = Math.hypot(
-                touches[0].clientX - touches[1].clientX,
-                touches[0].clientY - touches[1].clientY
-            );
-            
-            const scale = distance / this.initialDistance;
-            this.currentZoom = Math.min(Math.max(this.initialZoom * scale, this.config.minZoom), this.config.maxZoom);
-            this.applyZoom();
-        }
-    }
-
-    /**
-     * Setup keyboard navigation with focus check
-     */
-    protected setupKeyboardNavigation(): void {
-        if (!this.$widget?.length) return;
-
-        // Make widget focusable
-        this.$widget.attr('tabindex', '0');
-        this.$widget.attr('role', 'application');
-        this.$widget.attr('aria-label', 'Image viewer with zoom controls');
-        
-        const handleKeyDown = (e: JQuery.KeyDownEvent) => {
-            // Only handle keyboard events when widget has focus
-            if (!this.$widget?.is(':focus-within')) {
-                return;
-            }
-            
-            switch(e.key) {
-                case '+':
-                case '=':
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this.zoomIn();
-                    break;
-                case '-':
-                case '_':
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this.zoomOut();
-                    break;
-                case '0':
-                    e.preventDefault();
-                    e.stopPropagation();
-                    this.resetZoom();
-                    break;
-                case 'Enter':
-                case ' ':
-                    if (this.isPhotoSwipeAvailable && this.$imageView?.length) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        const src = this.$imageView.attr('src') || this.$imageView.prop('src');
-                        if (src) {
-                            this.openInLightbox(src, this.note?.title, this.noteId, this.$imageView.get(0));
-                        }
-                    }
-                    break;
-                case 'Escape':
-                    if (this.isPhotoSwipeAvailable && mediaViewer.isOpen()) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        mediaViewer.close();
-                    }
-                    break;
-                case 'ArrowLeft':
-                    if (this.currentZoom > 1 && this.$imageWrapper) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        this.$imageWrapper.scrollLeft((this.$imageWrapper.scrollLeft() ?? 0) - 50);
-                    }
-                    break;
-                case 'ArrowRight':
-                    if (this.currentZoom > 1 && this.$imageWrapper) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        this.$imageWrapper.scrollLeft((this.$imageWrapper.scrollLeft() ?? 0) + 50);
-                    }
-                    break;
-                case 'ArrowUp':
-                    if (this.currentZoom > 1 && this.$imageWrapper) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        this.$imageWrapper.scrollTop((this.$imageWrapper.scrollTop() ?? 0) - 50);
-                    }
-                    break;
-                case 'ArrowDown':
-                    if (this.currentZoom > 1 && this.$imageWrapper) {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        this.$imageWrapper.scrollTop((this.$imageWrapper.scrollTop() ?? 0) + 50);
-                    }
-                    break;
-            }
-        };
-
-        this.boundHandlers.set('keydown', handleKeyDown);
-        this.$widget.on('keydown', handleKeyDown);
-    }
-
-    /**
-     * Refresh gallery items when content changes
-     */
-    protected async refreshGalleryItems(): Promise<void> {
-        this.galleryItems = await this.detectGalleryItems();
-        this.currentImageIndex = 0;
-    }
-
-    /**
-     * Setup double-click to reset zoom
-     */
-    protected setupDoubleClickReset(): void {
-        if (!this.$imageView?.length) return;
-
-        this.$imageView.on('dblclick', (e) => {
-            e.preventDefault();
-            this.resetZoom();
-        });
-    }
-
-    /**
-     * Setup context menu for image
-     */
-    protected setupContextMenu(): void {
-        if (this.$imageView?.length) {
-            imageContextMenuService.setupContextMenu(this.$imageView);
-        }
-    }
-
-    /**
-     * Add ARIA labels for accessibility
-     */
-    protected addAccessibilityLabels(): void {
-        // Add ARIA labels to control buttons
-        this.$widget?.find('.zoom-in, .image-control-btn.zoom-in')
-            .attr('aria-label', 'Zoom in')
-            .attr('role', 'button');
-        
-        this.$widget?.find('.zoom-out, .image-control-btn.zoom-out')
-            .attr('aria-label', 'Zoom out')
-            .attr('role', 'button');
-        
-        this.$widget?.find('.fullscreen, .image-control-btn.fullscreen')
-            .attr('aria-label', 'Open in fullscreen lightbox')
-            .attr('role', 'button');
-        
-        this.$widget?.find('.download, .image-control-btn.download')
-            .attr('aria-label', 'Download image')
-            .attr('role', 'button');
-        
-        // Add alt text to image
-        if (this.$imageView?.length && this.note?.title) {
-            this.$imageView.attr('alt', this.note.title);
-        }
-    }
-
-    /**
-     * Cleanup all event handlers and resources
-     */
-    cleanup() {
-        // Close gallery or lightbox if open
-        if (this.isPhotoSwipeAvailable) {
-            if (galleryManager.isGalleryOpen()) {
-                galleryManager.closeGallery();
-            } else if (mediaViewer.isOpen()) {
-                mediaViewer.close();
-            }
-        }
-        
-        // Clear gallery items
-        this.galleryItems = [];
-        this.currentImageIndex = 0;
-        
-        // Remove document-level event listeners
-        if (this.boundHandlers.has('mousemove')) {
-            $(document).off('mousemove', this.boundHandlers.get('mousemove') as any);
-        }
-        if (this.boundHandlers.has('mouseup')) {
-            $(document).off('mouseup', this.boundHandlers.get('mouseup') as any);
-        }
-        
-        // Clear all bound handlers
-        this.boundHandlers.clear();
-        
-        // Cancel any pending animations
-        if (this.rafId) {
-            cancelAnimationFrame(this.rafId);
-            this.rafId = null;
-        }
-        
-        // Clear zoom debounce timer
-        if (this.zoomDebounceTimer) {
-            clearTimeout(this.zoomDebounceTimer);
-            this.zoomDebounceTimer = null;
-        }
-        
-        // Clear zoom indicator timer
-        if (this.$zoomIndicator?.data('hideTimer')) {
-            clearTimeout(this.$zoomIndicator.data('hideTimer'));
-        }
-        
-        super.cleanup();
-    }
-}
-
-export default ImageViewerBase;

apps/client/src/widgets/type_widgets/options/advanced.tsx

@@ -0,0 +1,175 @@
+import { AnonymizedDbResponse, DatabaseAnonymizeResponse, DatabaseCheckIntegrityResponse } from "@triliumnext/commons";
+import { t } from "../../../services/i18n";
+import server from "../../../services/server";
+import toast from "../../../services/toast";
+import Button from "../../react/Button";
+import FormText from "../../react/FormText";
+import OptionsSection from "./components/OptionsSection"
+import Column from "../../react/Column";
+import { useEffect, useState } from "preact/hooks";
+
+export default function AdvancedSettings() {
+    return <>
+        <AdvancedSyncOptions />
+        <DatabaseIntegrityOptions />
+        <DatabaseAnonymizationOptions />
+        <VacuumDatabaseOptions />
+    </>;
+}
+
+function AdvancedSyncOptions() {
+    return (
+        <OptionsSection title={t("sync.title")}>
+            <Button
+                text={t("sync.force_full_sync_button")}
+                onClick={async () => {
+                    await server.post("sync/force-full-sync");
+                    toast.showMessage(t("sync.full_sync_triggered"));
+                }}
+            />
+
+            <Button
+                text={t("sync.fill_entity_changes_button")}
+                onClick={async () => {
+                    toast.showMessage(t("sync.filling_entity_changes"));
+                    await server.post("sync/fill-entity-changes");
+                    toast.showMessage(t("sync.sync_rows_filled_successfully"));
+                }}
+            />
+        </OptionsSection>
+    );
+}
+
+function DatabaseIntegrityOptions() {
+    return (
+        <OptionsSection title={t("database_integrity_check.title")}>
+            <FormText>{t("database_integrity_check.description")}</FormText>
+            
+            <Button
+                text={t("database_integrity_check.check_button")}
+                onClick={async () => {
+                    toast.showMessage(t("database_integrity_check.checking_integrity"));
+                    
+                    const { results } = await server.get<DatabaseCheckIntegrityResponse>("database/check-integrity");
+        
+                    if (results.length === 1 && results[0].integrity_check === "ok") {
+                        toast.showMessage(t("database_integrity_check.integrity_check_succeeded"));
+                    } else {
+                        toast.showMessage(t("database_integrity_check.integrity_check_failed", { results: JSON.stringify(results, null, 2) }), 15000);
+                    }
+                }}
+            />
+
+            <Button
+                text={t("consistency_checks.find_and_fix_button")}
+                onClick={async () => {
+                    toast.showMessage(t("consistency_checks.finding_and_fixing_message"));
+                    await server.post("database/find-and-fix-consistency-issues");
+                    toast.showMessage(t("consistency_checks.issues_fixed_message"));
+                }}
+            />
+        </OptionsSection>
+    )
+}
+
+function DatabaseAnonymizationOptions() {
+    const [ existingAnonymizedDatabases, setExistingAnonymizedDatabases ] = useState<AnonymizedDbResponse[]>([]);
+
+    function refreshAnonymizedDatabase() {
+        server.get<AnonymizedDbResponse[]>("database/anonymized-databases").then(setExistingAnonymizedDatabases);
+    }
+
+    useEffect(refreshAnonymizedDatabase, []);
+
+    return (
+        <OptionsSection title={t("database_anonymization.title")}>
+            <FormText>{t("database_anonymization.choose_anonymization")}</FormText>
+
+            <div className="row">
+                <DatabaseAnonymizationOption
+                    title={t("database_anonymization.full_anonymization")}
+                    description={t("database_anonymization.full_anonymization_description")}
+                    buttonText={t("database_anonymization.save_fully_anonymized_database")}
+                    buttonClick={async () => {
+                        toast.showMessage(t("database_anonymization.creating_fully_anonymized_database"));
+                        const resp = await server.post<DatabaseAnonymizeResponse>("database/anonymize/full");
+            
+                        if (!resp.success) {
+                            toast.showError(t("database_anonymization.error_creating_anonymized_database"));
+                        } else {
+                            toast.showMessage(t("database_anonymization.successfully_created_fully_anonymized_database", { anonymizedFilePath: resp.anonymizedFilePath }), 10000);
+                            refreshAnonymizedDatabase();
+                        }
+                    }}
+                />
+                <DatabaseAnonymizationOption
+                    title={t("database_anonymization.light_anonymization")}
+                    description={t("database_anonymization.light_anonymization_description")}
+                    buttonText={t("database_anonymization.save_lightly_anonymized_database")}
+                    buttonClick={async () => {
+                        toast.showMessage(t("database_anonymization.creating_lightly_anonymized_database"));
+                        const resp = await server.post<DatabaseAnonymizeResponse>("database/anonymize/light");
+
+                        if (!resp.success) {
+                            toast.showError(t("database_anonymization.error_creating_anonymized_database"));
+                        } else {
+                            toast.showMessage(t("database_anonymization.successfully_created_lightly_anonymized_database", { anonymizedFilePath: resp.anonymizedFilePath }), 10000);
+                            refreshAnonymizedDatabase();
+                        }
+                    }}
+                />
+            </div>
+
+            <hr />
+            <ExistingAnonymizedDatabases databases={existingAnonymizedDatabases} />
+        </OptionsSection>
+    )
+}
+
+function DatabaseAnonymizationOption({ title, description, buttonText, buttonClick }: { title: string, description: string, buttonText: string, buttonClick: () => void }) {
+    return (
+        <Column md={6} style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", marginTop: "1em" }}>
+            <h5>{title}</h5>
+            <FormText>{description}</FormText>
+            <Button text={buttonText} onClick={buttonClick} />
+        </Column>
+    )
+}
+
+function ExistingAnonymizedDatabases({ databases }: { databases: AnonymizedDbResponse[] }) {
+    if (!databases.length) {
+        return <FormText>{t("database_anonymization.no_anonymized_database_yet")}</FormText>
+    }
+
+    return (    
+        <table className="table table-stripped">
+            <thead>
+                <th>{t("database_anonymization.existing_anonymized_databases")}</th>
+            </thead>
+            <tbody>
+                {databases.map(({ filePath }) => (
+                    <tr>
+                        <td>{filePath}</td>
+                    </tr>
+                ))}
+            </tbody>
+        </table>
+    )
+}
+
+function VacuumDatabaseOptions() {
+    return (
+        <OptionsSection title={t("vacuum_database.title")}>
+            <FormText>{t("vacuum_database.description")}</FormText>
+
+            <Button
+                text={t("vacuum_database.button_text")}
+                onClick={async () => {
+                    toast.showMessage(t("vacuum_database.vacuuming_database"));
+                    await server.post("database/vacuum-database");
+                    toast.showMessage(t("vacuum_database.database_vacuumed"));
+                }}
+            />
+        </OptionsSection>
+    )
+}

apps/client/src/widgets/type_widgets/options/advanced/database_anonymization.ts

@@ -1,119 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import toastService from "../../../../services/toast.js";
-import server from "../../../../services/server.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <style>
-        .database-database-anonymization-option {
-            display: flex;
-            flex-direction: column;
-            align-items: flex-start;
-            margin-top: 1em;
-        }
-
-        .database-database-anonymization-option p {
-            margin-top: .75em;
-            flex-grow: 1;
-        }
-    </style>
-
-    <h4>${t("database_anonymization.title")}</h4>
-
-    <div class="row">
-        <p class="form-text">${t("database_anonymization.choose_anonymization")}</p>
-
-        <div class="col-md-6 database-database-anonymization-option">
-            <h5>${t("database_anonymization.full_anonymization")}</h5>
-
-            <p class="form-text">${t("database_anonymization.full_anonymization_description")}</p>
-            <button class="anonymize-full-button btn btn-secondary">${t("database_anonymization.save_fully_anonymized_database")}</button>
-        </div>
-
-        <div class="col-md-6 database-database-anonymization-option">
-            <h5>${t("database_anonymization.light_anonymization")}</h5>
-
-            <p class="form-text">${t("database_anonymization.light_anonymization_description")}</p>
-
-            <button class="anonymize-light-button btn btn-secondary">${t("database_anonymization.save_lightly_anonymized_database")}</button>
-        </div>
-    </div>
-
-    <hr />
-
-    <table class="existing-anonymized-databases-table table table-stripped">
-        <thead>
-            <th>${t("database_anonymization.existing_anonymized_databases")}</th>
-        </thead>
-        <tbody class="existing-anonymized-databases">
-        </tbody>
-    </table>
-</div>`;
-
-// TODO: Deduplicate with server
-interface AnonymizeResponse {
-    success: boolean;
-    anonymizedFilePath: string;
-}
-
-interface AnonymizedDbResponse {
-    filePath: string;
-}
-
-export default class DatabaseAnonymizationOptions extends OptionsWidget {
-
-    private $anonymizeFullButton!: JQuery<HTMLElement>;
-    private $anonymizeLightButton!: JQuery<HTMLElement>;
-    private $existingAnonymizedDatabases!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$anonymizeFullButton = this.$widget.find(".anonymize-full-button");
-        this.$anonymizeLightButton = this.$widget.find(".anonymize-light-button");
-        this.$anonymizeFullButton.on("click", async () => {
-            toastService.showMessage(t("database_anonymization.creating_fully_anonymized_database"));
-
-            const resp = await server.post<AnonymizeResponse>("database/anonymize/full");
-
-            if (!resp.success) {
-                toastService.showError(t("database_anonymization.error_creating_anonymized_database"));
-            } else {
-                toastService.showMessage(t("database_anonymization.successfully_created_fully_anonymized_database", { anonymizedFilePath: resp.anonymizedFilePath }), 10000);
-            }
-
-            this.refresh();
-        });
-
-        this.$anonymizeLightButton.on("click", async () => {
-            toastService.showMessage(t("database_anonymization.creating_lightly_anonymized_database"));
-
-            const resp = await server.post<AnonymizeResponse>("database/anonymize/light");
-
-            if (!resp.success) {
-                toastService.showError(t("database_anonymization.error_creating_anonymized_database"));
-            } else {
-                toastService.showMessage(t("database_anonymization.successfully_created_lightly_anonymized_database", { anonymizedFilePath: resp.anonymizedFilePath }), 10000);
-            }
-
-            this.refresh();
-        });
-
-        this.$existingAnonymizedDatabases = this.$widget.find(".existing-anonymized-databases");
-    }
-
-    optionsLoaded(options: OptionMap) {
-        server.get<AnonymizedDbResponse[]>("database/anonymized-databases").then((anonymizedDatabases) => {
-            this.$existingAnonymizedDatabases.empty();
-
-            if (!anonymizedDatabases.length) {
-                anonymizedDatabases = [{ filePath: t("database_anonymization.no_anonymized_database_yet") }];
-            }
-
-            for (const { filePath } of anonymizedDatabases) {
-                this.$existingAnonymizedDatabases.append($("<tr>").append($("<td>").text(filePath)));
-            }
-        });
-    }
-}

apps/client/src/widgets/type_widgets/options/advanced/database_integrity_check.ts

@@ -1,53 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import toastService from "../../../../services/toast.js";
-import server from "../../../../services/server.js";
-import { t } from "../../../../services/i18n.js";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("database_integrity_check.title")}</h4>
-
-    <p class="form-text">${t("database_integrity_check.description")}</p>
-
-    <button class="check-integrity-button btn btn-secondary">${t("database_integrity_check.check_button")}</button>
-    <button class="find-and-fix-consistency-issues-button btn btn-secondary">${t("consistency_checks.find_and_fix_button")}</button>
-</div>
-`;
-
-// TODO: Deduplicate with server
-interface Response {
-    results: {
-        integrity_check: string;
-    }[];
-}
-
-export default class DatabaseIntegrityCheckOptions extends OptionsWidget {
-
-    private $checkIntegrityButton!: JQuery<HTMLElement>;
-    private $findAndFixConsistencyIssuesButton!: JQuery<HTMLElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$checkIntegrityButton = this.$widget.find(".check-integrity-button");
-        this.$checkIntegrityButton.on("click", async () => {
-            toastService.showMessage(t("database_integrity_check.checking_integrity"));
-
-            const { results } = await server.get<Response>("database/check-integrity");
-
-            if (results.length === 1 && results[0].integrity_check === "ok") {
-                toastService.showMessage(t("database_integrity_check.integrity_check_succeeded"));
-            } else {
-                toastService.showMessage(t("database_integrity_check.integrity_check_failed", { results: JSON.stringify(results, null, 2) }), 15000);
-            }
-        });
-
-        this.$findAndFixConsistencyIssuesButton = this.$widget.find(".find-and-fix-consistency-issues-button");
-        this.$findAndFixConsistencyIssuesButton.on("click", async () => {
-            toastService.showMessage(t("consistency_checks.finding_and_fixing_message"));
-
-            await server.post("database/find-and-fix-consistency-issues");
-
-            toastService.showMessage(t("consistency_checks.issues_fixed_message"));
-        });
-    }
-}