chore(react): add backup

chore(react): integrate mobile layout as well
chore(react): port desktop version of note wrapper
2026-03-25 05:10:12 +01:00 · 2026-03-05 21:03:43 +02:00 · 2026-03-05 20:59:59 +02:00 · 2026-03-05 20:17:23 +02:00 · 2026-03-05 20:10:26 +02:00
280 changed files with 9050 additions and 15955 deletions
--- a/.github/actions/build-server/action.yml
+++ b/.github/actions/build-server/action.yml
@@ -8,7 +8,7 @@ inputs:
 runs:
  using: composite
  steps:
-  - uses: pnpm/action-setup@v5
+  - uses: pnpm/action-setup@v4
  - name: Set up node & dependencies
    uses: actions/setup-node@v6
    with:
--- a/.github/actions/report-size/action.yml
+++ b/.github/actions/report-size/action.yml
@@ -69,7 +69,7 @@ runs:

    # Post github action comment
    - name: Post comment
-      uses: marocchino/sticky-pull-request-comment@v3
+      uses: marocchino/sticky-pull-request-comment@v2
      if: ${{ steps.bundleSize.outputs.hasDifferences == 'true' }} # post only in case of changes
      with:
        number: ${{ github.event.pull_request.number }}
--- a/.github/workflows/deploy-docs.yml
+++ b/.github/workflows/deploy-docs.yml
@@ -45,7 +45,7 @@ jobs:
        uses: actions/checkout@v6

      - name: Setup pnpm
-        uses: pnpm/action-setup@v5
+        uses: pnpm/action-setup@v4

      - name: Setup Node.js
        uses: actions/setup-node@v6
--- a/.github/workflows/dev.yml
+++ b/.github/workflows/dev.yml
@@ -26,7 +26,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v6

-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
      - name: Set up node & dependencies
        uses: actions/setup-node@v6
        with:
@@ -40,32 +40,11 @@ jobs:
      - name: Run the client-side tests
        run: pnpm run --filter=client test

-      - name: Upload client test report
-        uses: actions/upload-artifact@v7
-        if: always()
-        with:
-          name: client-test-report
-          path: apps/client/test-output/vitest/html/
-          retention-days: 30
-
      - name: Run the server-side tests
        run: pnpm run --filter=server test

-      - name: Upload server test report
-        uses: actions/upload-artifact@v7
-        if: always()
-        with:
-          name: server-test-report
-          path: apps/server/test-output/vitest/html/
-          retention-days: 30
-
-      - name: Run CKEditor e2e tests
-        run: |
-          pnpm run --filter=ckeditor5-mermaid test
-          pnpm run --filter=ckeditor5-math test
-
      - name: Run the rest of the tests
-        run: pnpm run --filter=\!client --filter=\!server --filter=\!ckeditor5-mermaid --filter=\!ckeditor5-math test
+        run: pnpm run --filter=\!client --filter=\!server test"

  build_docker:
    name: Build Docker image
@@ -74,7 +53,7 @@ jobs:
      - test_dev
    steps:
      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
      - name: Install dependencies
        run: pnpm install --frozen-lockfile
      - name: Update build info
@@ -89,8 +68,8 @@ jobs:
          key: ${{ secrets.RELATIVE_CI_CLIENT_KEY }}
      - name: Trigger server build
        run: pnpm run server:build
-      - uses: docker/setup-buildx-action@v4
-      - uses: docker/build-push-action@v7
+      - uses: docker/setup-buildx-action@v3
+      - uses: docker/build-push-action@v6
        with:
          context: apps/server
          cache-from: type=gha
@@ -109,7 +88,7 @@ jobs:
      - name: Checkout the repository
        uses: actions/checkout@v6

-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
      - name: Install dependencies
        run: pnpm install --frozen-lockfile

@@ -124,10 +103,10 @@ jobs:
        run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3

      - name: Build and export to Docker
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
        with:
          context: apps/server
          file: apps/server/${{ matrix.dockerfile }}
--- a/.github/workflows/i18n.yml
+++ b/.github/workflows/i18n.yml
@@ -18,7 +18,7 @@ jobs:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
      - name: Set up node & dependencies
        uses: actions/setup-node@v6
        with:
--- a/.github/workflows/main-docker.yml
+++ b/.github/workflows/main-docker.yml
@@ -40,9 +40,9 @@ jobs:
        run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3

-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
      - name: Set up node & dependencies
        uses: actions/setup-node@v6
        with:
@@ -59,7 +59,7 @@ jobs:
        run: pnpm run server:build

      - name: Build and export to Docker
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
        with:
          context: apps/server
          file: apps/server/${{ matrix.dockerfile }}
@@ -142,7 +142,7 @@ jobs:

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

      - name: Docker meta
        id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
        with:
          images: ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
          tags: |
@@ -175,13 +175,13 @@ jobs:
            latest=false

      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v4
+        uses: docker/setup-qemu-action@v3

      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v4
+        uses: docker/setup-buildx-action@v3

      - name: Login to GHCR
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
        with:
          registry: ${{ env.GHCR_REGISTRY }}
          username: ${{ github.actor }}
@@ -189,7 +189,7 @@ jobs:

      - name: Build and push by digest
        id: build
-        uses: docker/build-push-action@v7
+        uses: docker/build-push-action@v6
        with:
          context: apps/server
          file: apps/server/${{ matrix.dockerfile }}
@@ -229,17 +229,17 @@ jobs:
        run: echo "TEST_TAG=${TEST_TAG,,}" >> $GITHUB_ENV

      - name: Set up crane
-        uses: imjasonh/setup-crane@v0.5
+        uses: imjasonh/setup-crane@v0.4

      - name: Login to GHCR
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
        with:
          registry: ${{ env.GHCR_REGISTRY }}
          username: ${{ github.actor }}
          password: ${{ secrets.GITHUB_TOKEN }}

      - name: Login to DockerHub
-        uses: docker/login-action@v4
+        uses: docker/login-action@v3
        with:
          registry: ${{ env.DOCKERHUB_REGISTRY }}
          username: ${{ secrets.DOCKERHUB_USERNAME }}
@@ -247,7 +247,7 @@ jobs:

      - name: Docker meta
        id: meta
-        uses: docker/metadata-action@v6
+        uses: docker/metadata-action@v5
        with:
          images: ${{ env.GHCR_REGISTRY }}/${{ env.IMAGE_NAME }}
          tags: |
--- a/.github/workflows/nightly.yml
+++ b/.github/workflows/nightly.yml
@@ -61,7 +61,7 @@ jobs:
    runs-on: ${{ matrix.os.image }}
    steps:
      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
      - name: Set up node & dependencies
        uses: actions/setup-node@v6
        with:
@@ -91,7 +91,7 @@ jobs:
          GPG_SIGNING_KEY: ${{ secrets.GPG_SIGN_KEY }}

      - name: Publish release
-        uses: softprops/action-gh-release@v2.6.1
+        uses: softprops/action-gh-release@v2.5.0
        if: ${{ github.event_name != 'pull_request' }}
        with:
          make_latest: false
@@ -132,7 +132,7 @@ jobs:
          arch: ${{ matrix.arch }}

      - name: Publish release
-        uses: softprops/action-gh-release@v2.6.1
+        uses: softprops/action-gh-release@v2.5.0
        if: ${{ github.event_name != 'pull_request' }}
        with:
          make_latest: false
--- a/.github/workflows/playwright.yml
+++ b/.github/workflows/playwright.yml
@@ -38,7 +38,7 @@ jobs:
          filter: tree:0
          fetch-depth: 0

-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v6
        with:
          node-version: 24
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -17,7 +17,7 @@ jobs:
    steps:
      - uses: actions/checkout@v6

-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
      - name: Set up node & dependencies
        uses: actions/setup-node@v6
        with:
@@ -66,7 +66,7 @@ jobs:
    runs-on: ${{ matrix.os.image }}
    steps:
      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
      - name: Set up node & dependencies
        uses: actions/setup-node@v6
        with:
@@ -150,7 +150,7 @@ jobs:
          path: upload

      - name: Publish stable release
-        uses: softprops/action-gh-release@v2.6.1
+        uses: softprops/action-gh-release@v2.5.0
        with:
          draft: false
          body_path: docs/Release Notes/Release Notes/${{ github.ref_name }}.md
--- a/.github/workflows/web-clipper.yml
+++ b/.github/workflows/web-clipper.yml
@@ -32,7 +32,7 @@ jobs:

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

      - name: Release web clipper extension
-        uses: softprops/action-gh-release@v2.6.1
+        uses: softprops/action-gh-release@v2.5.0
        if: ${{ startsWith(github.ref, 'refs/tags/web-clipper-v') }}
        with:
          draft: false
--- a/.github/workflows/website.yml
+++ b/.github/workflows/website.yml
@@ -26,7 +26,7 @@ jobs:

    steps:
      - uses: actions/checkout@v6
-      - uses: pnpm/action-setup@v5
+      - uses: pnpm/action-setup@v4
      - name: Set up node & dependencies
        uses: actions/setup-node@v6
        with:
--- a/.gitignore
+++ b/.gitignore
@@ -46,6 +46,7 @@ upload

 /.direnv
 /result
+.svelte-kit

 # docs
 site/
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-24.14.1
+24.14.0
--- a/apps/build-docs/package.json
+++ b/apps/build-docs/package.json
@@ -14,15 +14,15 @@
  "keywords": [],
  "author": "Elian Doran <contact@eliandoran.me>",
  "license": "AGPL-3.0-only",
-  "packageManager": "pnpm@10.32.1",
+  "packageManager": "pnpm@10.30.3",
  "devDependencies": {
-    "@redocly/cli": "2.24.1",
+    "@redocly/cli": "2.20.2",
    "archiver": "7.0.1",
    "fs-extra": "11.3.4",
    "js-yaml": "4.1.1",
    "react": "19.2.4",
    "react-dom": "19.2.4",
-    "typedoc": "0.28.18",
+    "typedoc": "0.28.17",
    "typedoc-plugin-missing-exports": "4.1.2"
  }
 }
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@triliumnext/client",
-  "version": "0.102.1",
+  "version": "0.102.0",
  "description": "JQuery-based client for TriliumNext, used for both web and desktop (via Electron)",
  "private": true,
  "license": "AGPL-3.0-only",
@@ -25,25 +25,19 @@
    "@fullcalendar/rrule": "6.1.20",
    "@fullcalendar/timegrid": "6.1.20",
    "@maplibre/maplibre-gl-leaflet": "0.1.3",
-    "@mermaid-js/layout-elk": "0.2.1",
+    "@mermaid-js/layout-elk": "0.2.0",
    "@mind-elixir/node-menu": "5.0.1",
    "@popperjs/core": "2.11.8",
-    "@preact/signals": "2.8.2",
+    "@preact/signals": "2.8.1",
    "@triliumnext/ckeditor5": "workspace:*",
    "@triliumnext/codemirror": "workspace:*",
    "@triliumnext/commons": "workspace:*",
    "@triliumnext/highlightjs": "workspace:*",
    "@triliumnext/share-theme": "workspace:*",
    "@triliumnext/split.js": "workspace:*",
-    "@univerjs/preset-sheets-conditional-formatting": "0.18.0",
-    "@univerjs/preset-sheets-core": "0.18.0",
-    "@univerjs/preset-sheets-data-validation": "0.18.0",
-    "@univerjs/preset-sheets-filter": "0.18.0",
-    "@univerjs/preset-sheets-find-replace": "0.18.0",
-    "@univerjs/preset-sheets-note": "0.18.0",
-    "@univerjs/preset-sheets-sort": "0.18.0",
-    "@univerjs/presets": "0.18.0",
-    "@zumer/snapdom": "2.6.0",
+    "@univerjs/preset-sheets-core": "0.16.1",
+    "@univerjs/presets": "0.16.1",
+    "@zumer/snapdom": "2.0.2",
    "autocomplete.js": "0.38.1",
    "bootstrap": "5.3.8",
    "boxicons": "2.1.4",
@@ -51,29 +45,30 @@
    "color": "5.0.3",
    "debounce": "3.0.0",
    "draggabilly": "3.0.0",
-    "force-graph": "1.51.2",
+    "force-graph": "1.51.1",
    "globals": "17.4.0",
-    "i18next": "25.10.5",
+    "i18next": "25.8.13",
    "i18next-http-backend": "3.0.2",
    "jquery": "4.0.0",
    "jquery.fancytree": "2.38.5",
    "jsplumb": "2.15.6",
-    "katex": "0.16.40",
+    "katex": "0.16.33",
+    "knockout": "3.5.1",
    "leaflet": "1.9.4",
    "leaflet-gpx": "2.2.0",
    "mark.js": "8.11.1",
-    "marked": "17.0.5",
-    "mermaid": "11.13.0",
-    "mind-elixir": "5.9.3",
+    "marked": "17.0.3",
+    "mermaid": "11.12.3",
+    "mind-elixir": "5.9.1",
    "normalize.css": "8.0.1",
    "panzoom": "9.4.3",
-    "preact": "10.29.0",
-    "react-i18next": "16.6.2",
+    "preact": "10.28.4",
+    "react-i18next": "16.5.4",
    "react-window": "2.2.7",
-    "reveal.js": "6.0.0",
+    "reveal.js": "5.2.1",
    "rrule": "2.8.1",
    "svg-pan-zoom": "3.6.2",
-    "tabulator-tables": "6.4.0",
+    "tabulator-tables": "6.3.1",
    "vanilla-js-wheel-zoom": "9.0.4"
  },
  "devDependencies": {
@@ -84,11 +79,12 @@
    "@types/leaflet": "1.9.21",
    "@types/leaflet-gpx": "1.3.8",
    "@types/mark.js": "8.11.12",
+    "@types/reveal.js": "5.2.2",
    "@types/tabulator-tables": "6.3.1",
    "copy-webpack-plugin": "14.0.0",
-    "happy-dom": "20.8.7",
-    "lightningcss": "1.32.0",
+    "happy-dom": "20.8.3",
+    "lightningcss": "1.31.1",
    "script-loader": "0.7.2",
-    "vite-plugin-static-copy": "3.4.0"
+    "vite-plugin-static-copy": "3.2.0"
  }
-}
+}
--- a/apps/client/src/components/note_context.ts
+++ b/apps/client/src/components/note_context.ts
@@ -381,10 +381,6 @@ class NoteContext extends Component implements EventListener<"entitiesReloaded">

        // Collections must always display a note list, even if no children.
        if (note.type === "book") {
-            if (note.isProtected && !protectedSessionHolder.isProtectedSessionAvailable()) {
-                return false;
-            }
-
            const viewType = note.getLabelValue("viewType") ?? "grid";
            if (!["list", "grid"].includes(viewType)) {
                return true;
--- a/apps/client/src/layouts/desktop_layout.tsx
+++ b/apps/client/src/layouts/desktop_layout.tsx
@@ -3,54 +3,29 @@ import type { WidgetsByParent } from "../services/bundle.js";
 import { isExperimentalFeatureEnabled } from "../services/experimental_features.js";
 import options from "../services/options.js";
 import utils from "../services/utils.js";
-import ApiLog from "../widgets/api_log.jsx";
-import ClosePaneButton from "../widgets/buttons/close_pane_button.js";
-import CreatePaneButton from "../widgets/buttons/create_pane_button.js";
 import GlobalMenu from "../widgets/buttons/global_menu.jsx";
 import LeftPaneToggle from "../widgets/buttons/left_pane_toggle.js";
-import MovePaneButton from "../widgets/buttons/move_pane_button.js";
 import RightPaneToggle from "../widgets/buttons/right_pane_toggle.jsx";
 import CloseZenModeButton from "../widgets/close_zen_button.jsx";
-import NoteList from "../widgets/collections/NoteList.jsx";
-import ContentHeader from "../widgets/containers/content_header.js";
 import FlexContainer from "../widgets/containers/flex_container.js";
 import LeftPaneContainer from "../widgets/containers/left_pane_container.js";
 import RightPaneContainer from "../widgets/containers/right_pane_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
 import PasswordNoteSetDialog from "../widgets/dialogs/password_not_set.js";
 import UploadAttachmentsDialog from "../widgets/dialogs/upload_attachments.js";
-import FindWidget from "../widgets/find.js";
-import FloatingButtons from "../widgets/FloatingButtons.jsx";
-import { DESKTOP_FLOATING_BUTTONS } from "../widgets/FloatingButtonsDefinitions.jsx";
 import HighlightsListWidget from "../widgets/highlights_list.js";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
-import SpacerWidget from "../widgets/launch_bar/SpacerWidget.jsx";
-import InlineTitle from "../widgets/layout/InlineTitle.jsx";
-import NoteBadges from "../widgets/layout/NoteBadges.jsx";
-import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
 import StatusBar from "../widgets/layout/StatusBar.jsx";
-import NoteIconWidget from "../widgets/note_icon.jsx";
-import NoteTitleWidget from "../widgets/note_title.jsx";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import NoteDetail from "../widgets/NoteDetail.jsx";
-import PromotedAttributes from "../widgets/PromotedAttributes.jsx";
+import NoteWrapperWidget from "../widgets/NoteWrapper.js";
 import QuickSearchWidget from "../widgets/quick_search.js";
-import ReadOnlyNoteInfoBar from "../widgets/ReadOnlyNoteInfoBar.jsx";
 import { FixedFormattingToolbar } from "../widgets/ribbon/FormattingToolbar.jsx";
-import NoteActions from "../widgets/ribbon/NoteActions.jsx";
-import Ribbon from "../widgets/ribbon/Ribbon.jsx";
-import ScrollPadding from "../widgets/scroll_padding.js";
-import SearchResult from "../widgets/search_result.jsx";
-import SharedInfo from "../widgets/shared_info.jsx";
 import RightPanelContainer from "../widgets/sidebar/RightPanelContainer.jsx";
 import TabRowWidget from "../widgets/tab_row.js";
 import TabHistoryNavigationButtons from "../widgets/TabHistoryNavigationButtons.jsx";
 import TitleBarButtons from "../widgets/title_bar_buttons.jsx";
 import TocWidget from "../widgets/toc.js";
-import WatchedFileUpdateStatusWidget from "../widgets/watched_file_update_status.js";
 import { applyModals } from "./layout_commons.js";

 export default class DesktopLayout {
@@ -133,44 +108,7 @@ export default class DesktopLayout {
                                            .filling()
                                            .collapsible()
                                            .id("center-pane")
-                                            .child(
-                                                new SplitNoteContainer(() =>
-                                                    new NoteWrapperWidget()
-                                                        .child(new FlexContainer("row")
-                                                            .class("title-row note-split-title")
-                                                            .cssBlock(".title-row > * { margin: 5px; }")
-                                                            .child(<NoteIconWidget />)
-                                                            .child(<NoteTitleWidget />)
-                                                            .optChild(isNewLayout, <NoteBadges />)
-                                                            .child(<SpacerWidget baseSize={0} growthFactor={1} />)
-                                                            .optChild(!isNewLayout, <MovePaneButton direction="left" />)
-                                                            .optChild(!isNewLayout, <MovePaneButton direction="right" />)
-                                                            .optChild(!isNewLayout, <ClosePaneButton />)
-                                                            .optChild(!isNewLayout, <CreatePaneButton />)
-                                                            .optChild(isNewLayout, <NoteActions />))
-                                                        .optChild(!isNewLayout, <Ribbon />)
-                                                        .child(new WatchedFileUpdateStatusWidget())
-                                                        .optChild(!isNewLayout, <FloatingButtons items={DESKTOP_FLOATING_BUTTONS} />)
-                                                        .child(
-                                                            new ScrollingContainer()
-                                                                .filling()
-                                                                .optChild(isNewLayout, <InlineTitle />)
-                                                                .optChild(isNewLayout, <NoteTitleActions />)
-                                                                .optChild(!isNewLayout, new ContentHeader()
-                                                                    .child(<ReadOnlyNoteInfoBar />)
-                                                                    .child(<SharedInfo />)
-                                                                )
-                                                                .optChild(!isNewLayout, <PromotedAttributes />)
-                                                                .child(<NoteDetail />)
-                                                                .child(<NoteList media="screen" />)
-                                                                .child(<SearchResult />)
-                                                                .child(<ScrollPadding />)
-                                                        )
-                                                        .child(<ApiLog />)
-                                                        .child(new FindWidget())
-                                                        .child(...this.customWidgets.get("note-detail-pane"))
-                                                )
-                                            )
+                                            .child(new SplitNoteContainer(() => <NoteWrapperWidget />))
                                            .child(...this.customWidgets.get("center-pane"))

                                    )
--- a/apps/client/src/layouts/mobile_layout.tsx
+++ b/apps/client/src/layouts/mobile_layout.tsx
@@ -3,29 +3,15 @@ import "./mobile_layout.css";
 import type AppContext from "../components/app_context.js";
 import GlobalMenuWidget from "../widgets/buttons/global_menu.js";
 import CloseZenModeButton from "../widgets/close_zen_button.js";
-import NoteList from "../widgets/collections/NoteList.jsx";
 import FlexContainer from "../widgets/containers/flex_container.js";
 import RootContainer from "../widgets/containers/root_container.js";
-import ScrollingContainer from "../widgets/containers/scrolling_container.js";
 import SplitNoteContainer from "../widgets/containers/split_note_container.js";
-import FindWidget from "../widgets/find.js";
 import LauncherContainer from "../widgets/launch_bar/LauncherContainer.jsx";
-import InlineTitle from "../widgets/layout/InlineTitle.jsx";
-import NoteBadges from "../widgets/layout/NoteBadges.jsx";
-import NoteTitleActions from "../widgets/layout/NoteTitleActions.jsx";
-import MobileDetailMenu from "../widgets/mobile_widgets/mobile_detail_menu.js";
 import ScreenContainer from "../widgets/mobile_widgets/screen_container.js";
 import SidebarContainer from "../widgets/mobile_widgets/sidebar_container.js";
-import ToggleSidebarButton from "../widgets/mobile_widgets/toggle_sidebar_button.jsx";
-import NoteIconWidget from "../widgets/note_icon.jsx";
-import NoteTitleWidget from "../widgets/note_title.js";
 import NoteTreeWidget from "../widgets/note_tree.js";
-import NoteWrapperWidget from "../widgets/note_wrapper.js";
-import NoteDetail from "../widgets/NoteDetail.jsx";
+import NoteWrapperWidget from "../widgets/NoteWrapper";
 import QuickSearchWidget from "../widgets/quick_search.js";
-import ScrollPadding from "../widgets/scroll_padding";
-import SearchResult from "../widgets/search_result.jsx";
-import MobileEditorToolbar from "../widgets/type_widgets/text/mobile_editor_toolbar.jsx";
 import { applyModals } from "./layout_commons.js";

 export default class MobileLayout {
@@ -52,35 +38,7 @@ export default class MobileLayout {
                        new ScreenContainer("detail", "row")
                            .id("detail-container")
                            .class("d-sm-flex d-md-flex d-lg-flex d-xl-flex col-12 col-sm-7 col-md-8 col-lg-9")
-                            .child(
-                                new SplitNoteContainer(() =>
-                                    new NoteWrapperWidget()
-                                        .child(
-                                            new FlexContainer("row")
-                                                .class("title-row note-split-title")
-                                                .contentSized()
-                                                .css("align-items", "center")
-                                                .child(<ToggleSidebarButton />)
-                                                .child(<NoteIconWidget />)
-                                                .child(<NoteTitleWidget />)
-                                                .child(<NoteBadges />)
-                                                .child(<MobileDetailMenu />)
-                                        )
-                                        .child(
-                                            new ScrollingContainer()
-                                                .filling()
-                                                .contentSized()
-                                                .child(<InlineTitle />)
-                                                .child(<NoteTitleActions />)
-                                                .child(<NoteDetail />)
-                                                .child(<NoteList media="screen" />)
-                                                .child(<SearchResult />)
-                                                .child(<ScrollPadding />)
-                                        )
-                                        .child(<MobileEditorToolbar />)
-                                        .child(new FindWidget())
-                                )
-                            )
+                            .child(new SplitNoteContainer(() => <NoteWrapperWidget />))
                    )
            )
            .child(
--- a/apps/client/src/services/content_renderer.ts
+++ b/apps/client/src/services/content_renderer.ts
@@ -54,7 +54,7 @@ export async function getRenderedContent(this: {} | { ctx: string }, entity: FNo
        await renderText(entity, $renderedContent, options);
    } else if (type === "code") {
        await renderCode(entity, $renderedContent);
-    } else if (["image", "canvas", "mindMap", "spreadsheet"].includes(type)) {
+    } else if (["image", "canvas", "mindMap"].includes(type)) {
        renderImage(entity, $renderedContent, options);
    } else if (!options.tooltip && ["file", "pdf", "audio", "video"].includes(type)) {
        await renderFile(entity, type, $renderedContent);
--- a/apps/client/src/services/froca_updater.ts
+++ b/apps/client/src/services/froca_updater.ts
@@ -110,12 +110,7 @@ function processNoteChange(loadResults: LoadResults, ec: EntityChange) {
                }
            }

-            // Only register as a content change if the protection status didn't change.
-            // When isProtected changes, the blobId change is a side effect of re-encryption,
-            // not a content edit. Registering it as content would cause the tree's content-only
-            // filter to incorrectly skip the note update (since both changes share the same
-            // componentId).
-            if (ec.componentId && note.isProtected === (ec.entity as FNoteRow).isProtected) {
+            if (ec.componentId) {
                loadResults.addNoteContent(note.noteId, ec.componentId);
            }
        }
--- a/apps/client/src/services/note_create.ts
+++ b/apps/client/src/services/note_create.ts
@@ -1,17 +1,15 @@
-import type { CKTextEditor } from "@triliumnext/ckeditor5";
-import { AttributeRow } from "@triliumnext/commons";
-
 import appContext from "../components/app_context.js";
-import type FBranch from "../entities/fbranch.js";
-import type FNote from "../entities/fnote.js";
-import type { ChooseNoteTypeResponse } from "../widgets/dialogs/note_type_chooser.js";
-import froca from "./froca.js";
-import { t } from "./i18n.js";
 import protectedSessionHolder from "./protected_session_holder.js";
 import server from "./server.js";
-import toastService from "./toast.js";
-import treeService from "./tree.js";
 import ws from "./ws.js";
+import froca from "./froca.js";
+import treeService from "./tree.js";
+import toastService from "./toast.js";
+import { t } from "./i18n.js";
+import type FNote from "../entities/fnote.js";
+import type FBranch from "../entities/fbranch.js";
+import type { ChooseNoteTypeResponse } from "../widgets/dialogs/note_type_chooser.js";
+import type { CKTextEditor } from "@triliumnext/ckeditor5";

 export interface CreateNoteOpts {
    isProtected?: boolean;
@@ -26,8 +24,6 @@ export interface CreateNoteOpts {
    target?: string;
    targetBranchId?: string;
    textEditor?: CKTextEditor;
-    /** Attributes to be set on the note. These are set atomically on note creation, so entity changes are not sent for attributes defined here. */
-    attributes?: Omit<AttributeRow, "noteId" | "attributeId">[];
 }

 interface Response {
@@ -41,7 +37,7 @@ interface DuplicateResponse {
    note: FNote;
 }

-async function createNote(parentNotePath: string | undefined, options: CreateNoteOpts = {}, componentId?: string) {
+async function createNote(parentNotePath: string | undefined, options: CreateNoteOpts = {}) {
    options = Object.assign(
        {
            activate: true,
@@ -67,15 +63,22 @@ async function createNote(parentNotePath: string | undefined, options: CreateNot

    const parentNoteId = treeService.getNoteIdFromUrl(parentNotePath);

+    if (options.type === "mermaid" && !options.content && !options.templateNoteId) {
+        options.content = `graph TD;
+    A-->B;
+    A-->C;
+    B-->D;
+    C-->D;`;
+    }
+
    const { note, branch } = await server.post<Response>(`notes/${parentNoteId}/children?target=${options.target}&targetBranchId=${options.targetBranchId || ""}`, {
        title: options.title,
        content: options.content || "",
        isProtected: options.isProtected,
        type: options.type,
        mime: options.mime,
-        templateNoteId: options.templateNoteId,
-        attributes: options.attributes
-    }, componentId);
+        templateNoteId: options.templateNoteId
+    });

    if (options.saveSelection) {
        // we remove the selection only after it was saved to server to make sure we don't lose anything
@@ -137,8 +140,9 @@ function parseSelectedHtml(selectedHtml: string) {
        const content = selectedHtml.replace(dom[0].outerHTML, "");

        return [title, content];
+    } else {
+        return [null, selectedHtml];
    }
-    return [null, selectedHtml];
 }

 async function duplicateSubtree(noteId: string, parentNotePath: string) {
--- a/apps/client/src/services/promoted_attribute_definition_parser.ts
+++ b/apps/client/src/services/promoted_attribute_definition_parser.ts
@@ -1,4 +1,4 @@
-export type LabelType = "text" | "textarea" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
+export type LabelType = "text" | "number" | "boolean" | "date" | "datetime" | "time" | "url" | "color";
 type Multiplicity = "single" | "multi";

 export interface DefinitionObject {
@@ -17,7 +17,7 @@ function parse(value: string) {
    for (const token of tokens) {
        if (token === "promoted") {
            defObj.isPromoted = true;
-        } else if (["text", "textarea", "number", "boolean", "date", "datetime", "time", "url", "color"].includes(token)) {
+        } else if (["text", "number", "boolean", "date", "datetime", "time", "url", "color"].includes(token)) {
            defObj.labelType = token as LabelType;
        } else if (["single", "multi"].includes(token)) {
            defObj.multiplicity = token as Multiplicity;
--- a/apps/client/src/services/server.ts
+++ b/apps/client/src/services/server.ts
@@ -89,33 +89,21 @@ async function remove<T>(url: string, componentId?: string) {
    return await call<T>("DELETE", url, componentId);
 }

-async function upload(url: string, fileToUpload: File, componentId?: string, method = "PUT") {
+async function upload(url: string, fileToUpload: File, componentId?: string) {
    const formData = new FormData();
    formData.append("upload", fileToUpload);

-    const doUpload = async () => $.ajax({
+    return await $.ajax({
        url: window.glob.baseApiUrl + url,
        headers: await getHeaders(componentId ? {
            "trilium-component-id": componentId
        } : undefined),
        data: formData,
-        type: method,
+        type: "PUT",
        timeout: 60 * 60 * 1000,
        contentType: false, // NEEDED, DON'T REMOVE THIS
        processData: false // NEEDED, DON'T REMOVE THIS
    });
-
-    try {
-        return await doUpload();
-    } catch (e: unknown) {
-        // jQuery rejects with the jqXHR object
-        const jqXhr = e as JQuery.jqXHR;
-        if (jqXhr?.status && isCsrfError(jqXhr.status, jqXhr.responseText)) {
-            await refreshCsrfToken();
-            return await doUpload();
-        }
-        throw e;
-    }
 }

 let idCounter = 1;
@@ -124,55 +112,12 @@ const idToRequestMap: Record<string, RequestData> = {};

 let maxKnownEntityChangeId = 0;

-let csrfRefreshInProgress: Promise<void> | null = null;
-
-/**
- * Re-fetches /bootstrap to obtain a fresh CSRF token. This is needed when the
- * server session expires (e.g. mobile tab backgrounded for a long time) and the
- * existing CSRF token is no longer valid.
- *
- * Coalesces concurrent calls so only one bootstrap request is in-flight at a time.
- */
-async function refreshCsrfToken(): Promise<void> {
-    if (csrfRefreshInProgress) {
-        return csrfRefreshInProgress;
-    }
-
-    csrfRefreshInProgress = (async () => {
-        try {
-            const response = await fetch(`./bootstrap${window.location.search}`, { cache: "no-store" });
-            if (response.ok) {
-                const json = await response.json();
-                glob.csrfToken = json.csrfToken;
-            }
-        } finally {
-            csrfRefreshInProgress = null;
-        }
-    })();
-
-    return csrfRefreshInProgress;
-}
-
-function isCsrfError(status: number, responseText: string): boolean {
-    if (status !== 403) {
-        return false;
-    }
-    try {
-        const body = JSON.parse(responseText);
-        return body.message === "Invalid CSRF token";
-    } catch {
-        return false;
-    }
-}
-
 interface CallOptions {
    data?: unknown;
    silentNotFound?: boolean;
    silentInternalServerError?: boolean;
    // If `true`, the value will be returned as a string instead of a JavaScript object if JSON, XMLDocument if XML, etc.
    raw?: boolean;
-    /** Used internally to prevent infinite retry loops on CSRF refresh. */
-    csrfRetried?: boolean;
 }

 async function call<T>(method: string, url: string, componentId?: string, options: CallOptions = {}) {
@@ -222,7 +167,7 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, opts
            type: method,
            headers,
            timeout: 60000,
-            success: (body, _textStatus, jqXhr) => {
+            success: (body, textStatus, jqXhr) => {
                const respHeaders: Headers = {};

                jqXhr
@@ -247,25 +192,7 @@ function ajax(url: string, method: string, data: unknown, headers: Headers, opts
                    // don't report requests that are rejected by the browser, usually when the user is refreshing or going to a different page.
                    rej("rejected by browser");
                    return;
-                }
-
-                // If the CSRF token is stale (e.g. session expired while tab was backgrounded),
-                // refresh it and retry the request once.
-                if (!opts.csrfRetried && isCsrfError(jqXhr.status, jqXhr.responseText)) {
-                    try {
-                        await refreshCsrfToken();
-                        // Rebuild headers so the fresh glob.csrfToken is picked up
-                        const retryHeaders = await getHeaders({ "trilium-component-id": headers["trilium-component-id"] });
-                        const retryResult = await ajax(url, method, data, retryHeaders, { ...opts, csrfRetried: true });
-                        res(retryResult);
-                        return;
-                    } catch (retryErr) {
-                        rej(retryErr);
-                        return;
-                    }
-                }
-
-                if (opts.silentNotFound && jqXhr.status === 404) {
+                } else if (opts.silentNotFound && jqXhr.status === 404) {
                    // report nothing
                } else if (opts.silentInternalServerError && jqXhr.status === 500) {
                    // report nothing
--- a/apps/client/src/setup.ts
+++ b/apps/client/src/setup.ts
@@ -1,107 +1,66 @@
 import "jquery";
-
 import utils from "./services/utils.js";
+import ko from "knockout";

-type SetupStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop" | "sync-from-server";
-type SetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
+// TriliumNextTODO: properly make use of below types
+// type SetupModelSetupType = "new-document" | "sync-from-desktop" | "sync-from-server" | "";
+// type SetupModelStep = "sync-in-progress" | "setup-type" | "new-document-in-progress" | "sync-from-desktop";

-class SetupController {
-    private step: SetupStep;
-    private setupType: SetupType = "";
-    private syncPollIntervalId: number | null = null;
-    private rootNode: HTMLElement;
-    private setupTypeForm: HTMLFormElement;
-    private syncFromServerForm: HTMLFormElement;
-    private setupTypeNextButton: HTMLButtonElement;
-    private setupTypeInputs: HTMLInputElement[];
-    private syncServerHostInput: HTMLInputElement;
-    private syncProxyInput: HTMLInputElement;
-    private passwordInput: HTMLInputElement;
-    private sections: Record<SetupStep, HTMLElement>;
+class SetupModel {
+    syncInProgress: boolean;
+    step: ko.Observable<string>;
+    setupType: ko.Observable<string>;
+    setupNewDocument: ko.Observable<boolean>;
+    setupSyncFromDesktop: ko.Observable<boolean>;
+    setupSyncFromServer: ko.Observable<boolean>;
+    syncServerHost: ko.Observable<string | undefined>;
+    syncProxy: ko.Observable<string | undefined>;
+    password: ko.Observable<string | undefined>;

-    constructor(rootNode: HTMLElement, syncInProgress: boolean) {
-        this.rootNode = rootNode;
-        this.step = syncInProgress ? "sync-in-progress" : "setup-type";
-        this.setupTypeForm = mustGetElement("setup-type-form", HTMLFormElement);
-        this.syncFromServerForm = mustGetElement("sync-from-server-form", HTMLFormElement);
-        this.setupTypeNextButton = mustGetElement("setup-type-next", HTMLButtonElement);
-        this.setupTypeInputs = Array.from(document.querySelectorAll<HTMLInputElement>("input[name='setup-type']"));
-        this.syncServerHostInput = mustGetElement("sync-server-host", HTMLInputElement);
-        this.syncProxyInput = mustGetElement("sync-proxy", HTMLInputElement);
-        this.passwordInput = mustGetElement("password", HTMLInputElement);
-        this.sections = {
-            "setup-type": mustGetElement("setup-type-section", HTMLElement),
-            "new-document-in-progress": mustGetElement("new-document-in-progress-section", HTMLElement),
-            "sync-from-desktop": mustGetElement("sync-from-desktop-section", HTMLElement),
-            "sync-from-server": mustGetElement("sync-from-server-section", HTMLElement),
-            "sync-in-progress": mustGetElement("sync-in-progress-section", HTMLElement)
-        };
-    }
+    constructor(syncInProgress: boolean) {
+        this.syncInProgress = syncInProgress;
+        this.step = ko.observable(syncInProgress ? "sync-in-progress" : "setup-type");
+        this.setupType = ko.observable("");
+        this.setupNewDocument = ko.observable(false);
+        this.setupSyncFromDesktop = ko.observable(false);
+        this.setupSyncFromServer = ko.observable(false);
+        this.syncServerHost = ko.observable();
+        this.syncProxy = ko.observable();
+        this.password = ko.observable();

-    init() {
-        this.setupTypeForm.addEventListener("submit", (event) => {
-            event.preventDefault();
-            void this.selectSetupType();
-        });
-
-        this.syncFromServerForm.addEventListener("submit", (event) => {
-            event.preventDefault();
-            void this.finish();
-        });
-
-        for (const input of this.setupTypeInputs) {
-            input.addEventListener("change", () => {
-                this.setupType = input.value as SetupType;
-                this.render();
-            });
+        if (this.syncInProgress) {
+            setInterval(checkOutstandingSyncs, 1000);
        }
-
-        for (const backButton of document.querySelectorAll<HTMLElement>("[data-action='back']")) {
-            backButton.addEventListener("click", () => {
-                this.back();
-            });
-        }
-
        const serverAddress = `${location.protocol}//${location.host}`;
        $("#current-host").html(serverAddress);
-
-        if (this.step === "sync-in-progress") {
-            this.startSyncPolling();
-        }
-
-        this.render();
-        this.rootNode.style.display = "";
    }

-    private async selectSetupType() {
-        if (this.setupType === "new-document") {
-            this.setStep("new-document-in-progress");
+    // this is called in setup.ejs
+    setupTypeSelected() {
+        return !!this.setupType();
+    }

-            await $.post("api/setup/new-document");
-            window.location.replace("./setup");
-            return;
-        }
+    selectSetupType() {
+        if (this.setupType() === "new-document") {
+            this.step("new-document-in-progress");

-        if (this.setupType) {
-            this.setStep(this.setupType);
+            $.post("api/setup/new-document").then(() => {
+                window.location.replace("./setup");
+            });
+        } else {
+            this.step(this.setupType());
        }
    }

-    private back() {
-        this.setStep("setup-type");
-        this.setupType = "";
-
-        for (const input of this.setupTypeInputs) {
-            input.checked = false;
-        }
-
-        this.render();
+    back() {
+        this.step("setup-type");
+        this.setupType("");
    }

-    private async finish() {
-        const syncServerHost = this.syncServerHostInput.value.trim();
-        const syncProxy = this.syncProxyInput.value.trim();
-        const password = this.passwordInput.value;
+    async finish() {
+        const syncServerHost = this.syncServerHost();
+        const syncProxy = this.syncProxy();
+        const password = this.password();

        if (!syncServerHost) {
            showAlert("Trilium server address can't be empty");
@@ -115,44 +74,21 @@ class SetupController {

        // not using server.js because it loads too many dependencies
        const resp = await $.post("api/setup/sync-from-server", {
-            syncServerHost,
-            syncProxy,
-            password
+            syncServerHost: syncServerHost,
+            syncProxy: syncProxy,
+            password: password
        });

        if (resp.result === "success") {
+            this.step("sync-in-progress");
+
+            setInterval(checkOutstandingSyncs, 1000);
+
            hideAlert();
-            this.setStep("sync-in-progress");
-            this.startSyncPolling();
        } else {
            showAlert(`Sync setup failed: ${resp.error}`);
        }
    }
-
-    private setStep(step: SetupStep) {
-        this.step = step;
-        this.render();
-    }
-
-    private render() {
-        for (const [step, section] of Object.entries(this.sections) as [SetupStep, HTMLElement][]) {
-            section.style.display = step === this.step ? "" : "none";
-        }
-
-        this.setupTypeNextButton.disabled = !this.setupType;
-    }
-
-    private getSelectedSetupType(): SetupType {
-        return (this.setupTypeInputs.find((input) => input.checked)?.value ?? "") as SetupType;
-    }
-
-    private startSyncPolling() {
-        if (this.syncPollIntervalId !== null) {
-            return;
-        }
-
-        this.syncPollIntervalId = window.setInterval(checkOutstandingSyncs, 1000);
-    }
 }

 async function checkOutstandingSyncs() {
@@ -186,19 +122,7 @@ function getSyncInProgress() {
    return !!parseInt(el.content);
 }

-function mustGetElement<T extends typeof HTMLElement>(id: string, ctor: T): InstanceType<T> {
-    const element = document.getElementById(id);
-
-    if (!element || !(element instanceof ctor)) {
-        throw new Error(`Expected element #${id}`);
-    }
-
-    return element as InstanceType<T>;
-}
-
 addEventListener("DOMContentLoaded", (event) => {
-    const rootNode = document.getElementById("setup-dialog");
-    if (!rootNode || !(rootNode instanceof HTMLElement)) return;
-
-    new SetupController(rootNode, getSyncInProgress()).init();
+    ko.applyBindings(new SetupModel(getSyncInProgress()), document.getElementById("setup-dialog"));
+    $("#setup-dialog").show();
 });
--- a/apps/client/src/stylesheets/style.css
+++ b/apps/client/src/stylesheets/style.css
@@ -1612,7 +1612,11 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
    }

    body.mobile #launcher-container {
-        justify-content: space-evenly;
+        justify-content: center;
+    }
+
+    body.mobile #launcher-container button {
+        margin: 0 16px;
    }

    body.mobile .modal.show {
--- a/apps/client/src/stylesheets/theme-next/base.css
+++ b/apps/client/src/stylesheets/theme-next/base.css
@@ -675,11 +675,10 @@ li.dropdown-item a.dropdown-item-button:focus-visible {
 div.alert {
    margin-bottom: 8px;
    background: var(--alert-bar-background) !important;
-    color: var(--main-text-color);
    border-radius: 8px;
    font-size: .85em;
 }

 div.alert p + p {
    margin-block: 1em 0;
-}
+}
--- a/apps/client/src/translations/ar/translation.json
+++ b/apps/client/src/translations/ar/translation.json
@@ -803,13 +803,12 @@
    "web-view": "عرض الويب",
    "mind-map": "خريطة ذهنية",
    "geo-map": "خريطة جغرافية",
-    "task-list": "قائمة المهام",
-    "spreadsheet": "جدول البيانات"
+    "task-list": "قائمة المهام"
  },
  "shared_switch": {
    "shared": "مشترك",
    "toggle-on-title": "مشاركة الملاحظة",
-    "toggle-off-title": "إلغاء مشاركة الملاحظة"
+    "toggle-off-title": "الغاء مشاركة الملاحظة"
  },
  "template_switch": {
    "template": "قالب"
@@ -1069,6 +1068,7 @@
    "rename_note": "اعادة تسمية الملاحظة",
    "remove_relation": "حذف العلاقة",
    "default_new_note_title": "ملاحظة جديدة",
+    "open_in_new_tab": "فتح في تبويب جديد",
    "enter_new_title": "ادخل عنوان ملاحظة جديدة:",
    "note_not_found": "الملاحظة {{noteId}} غير موجودة!",
    "cannot_match_transform": "تعذر مطابقة التحويل: {{transform}}"
@@ -1286,10 +1286,8 @@
    "search-for": "بحث ل \"{{term}}\""
  },
  "protect_note": {
-    "toggle-off": "إزالة الحماية عن الملاحظة",
-    "toggle-on": "حماية الملاحظة",
-    "toggle-on-hint": "الملاحظة غير محمة، انقر لحمايتها",
-    "toggle-off-hint": "الملاحظة محمية، انقر لإزالة الحماية منها"
+    "toggle-off": "ازالة الحماية عن الملاحظة",
+    "toggle-on": "حماية الملاحظة"
  },
  "open-help-page": "فتح صفحة المساعدة",
  "empty": {
--- a/apps/client/src/translations/cn/translation.json
+++ b/apps/client/src/translations/cn/translation.json
@@ -1047,6 +1047,7 @@
    "unprotecting-title": "解除保护状态"
  },
  "relation_map": {
+    "open_in_new_tab": "在新标签页中打开",
    "remove_note": "删除笔记",
    "edit_title": "编辑标题",
    "rename_note": "重命名笔记",
@@ -1534,8 +1535,7 @@
    "new-feature": "新建",
    "collections": "集合",
    "book": "集合",
-    "ai-chat": "AI聊天",
-    "spreadsheet": "电子表格"
+    "ai-chat": "AI聊天"
  },
  "protect_note": {
    "toggle-on": "保护笔记",
--- a/apps/client/src/translations/de/translation.json
+++ b/apps/client/src/translations/de/translation.json
@@ -446,8 +446,7 @@
    "and_more": "... und {{count}} mehr.",
    "print_landscape": "Beim Export als PDF, wird die Seitenausrichtung Querformat anstatt Hochformat verwendet.",
    "print_page_size": "Beim Export als PDF, wird die Größe der Seite angepasst. Unterstützte Größen: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.",
-    "color_type": "Farbe",
-    "textarea": "Mehrzeilen-Text"
+    "color_type": "Farbe"
  },
  "attribute_editor": {
    "help_text_body1": "Um ein Label hinzuzufügen, gebe einfach z.B. ein. <code>#rock</code> oder wenn du auch einen Wert hinzufügen möchten, dann z.B. <code>#year = 2024</code>",
@@ -1047,6 +1046,7 @@
    "unprotecting-title": "Ungeschützt-Status"
  },
  "relation_map": {
+    "open_in_new_tab": "In neuem Tab öffnen",
    "remove_note": "Notiz entfernen",
    "edit_title": "Titel bearbeiten",
    "rename_note": "Notiz umbenennen",
@@ -1488,21 +1488,20 @@
    "mermaid-diagram": "Mermaid Diagramm",
    "canvas": "Leinwand",
    "web-view": "Webansicht",
-    "mind-map": "Mindmap",
+    "mind-map": "Mind Map",
    "file": "Datei",
    "image": "Bild",
    "launcher": "Starter",
    "doc": "Dokument",
    "widget": "Widget",
-    "confirm-change": "Es ist nicht empfehlenswert den Notiz-Typ zu ändern, wenn der Inhalt der Notiz nicht leer ist. Möchtest du dennoch fortfahren?",
+    "confirm-change": "Es is nicht empfehlenswert den Notiz-Typ zu ändern, wenn der Inhalt der Notiz nicht leer ist. Möchtest du dennoch fortfahren?",
    "geo-map": "Geo-Karte",
    "beta-feature": "Beta",
    "book": "Sammlung",
-    "ai-chat": "KI-Chat",
+    "ai-chat": "KI Chat",
    "task-list": "Aufgabenliste",
    "new-feature": "Neu",
-    "collections": "Sammlungen",
-    "spreadsheet": "Tabelle"
+    "collections": "Sammlungen"
  },
  "protect_note": {
    "toggle-on": "Notiz schützen",
@@ -2183,52 +2182,5 @@
  },
  "setup_form": {
    "more_info": "Mehr erfahren"
-  },
-  "media": {
-    "play": "Abspielen (Arbeitsbereich)",
-    "pause": "Pausieren (Arbeitsbereich)",
-    "back-10s": "10 s zurück (Linke Pfeiltaste)",
-    "forward-30s": "30 s vorwärts",
-    "mute": "Stumm (M)",
-    "unmute": "Stummschaltung aufheben (M)",
-    "playback-speed": "Wiedergabegeschwindigkeit",
-    "loop": "Schleife",
-    "disable-loop": "Schleife deaktivieren",
-    "rotate": "Rotieren",
-    "picture-in-picture": "Bild-in-Bild",
-    "exit-picture-in-picture": "Bild-in-Bild verlassen",
-    "fullscreen": "Vollbild (F)",
-    "exit-fullscreen": "Vollbild verlassen",
-    "unsupported-format": "Medienvorschau ist für dieses Format nicht verfügbar:\n{{mime}}",
-    "zoom-to-fit": "Zoomen um auszufüllen",
-    "zoom-reset": "Zoomen um auszufüllen zurücksetzen"
-  },
-  "mermaid": {
-    "placeholder": "Geben den Inhalt des Mermaid-Diagramms ein oder verwenden eine der folgenden Beispieldiagramme.",
-    "sample_diagrams": "Beispieldiagramme:",
-    "sample_flowchart": "Flussdiagramm",
-    "sample_class": "Klasse",
-    "sample_sequence": "Abfolge",
-    "sample_entity_relationship": "Entität Beziehung",
-    "sample_state": "Zustandsübergangsdiagramm",
-    "sample_mindmap": "Mindmap",
-    "sample_architecture": "Architektur",
-    "sample_block": "Block",
-    "sample_c4": "C4",
-    "sample_gantt": "Gantt",
-    "sample_git": "GitGraph",
-    "sample_kanban": "Kanban",
-    "sample_packet": "Paket",
-    "sample_pie": "Kuchen",
-    "sample_quadrant": "Quadrant",
-    "sample_radar": "Radar",
-    "sample_requirement": "Anforderung",
-    "sample_sankey": "Sankey",
-    "sample_timeline": "Zeitstrahl",
-    "sample_treemap": "Kachel",
-    "sample_user_journey": "Benutzererfahrung",
-    "sample_xy": "XY",
-    "sample_venn": "Mengen",
-    "sample_ishikawa": "Ursache-Wirkung"
  }
 }
--- a/apps/client/src/translations/el/translation.json
+++ b/apps/client/src/translations/el/translation.json
@@ -1,6 +1,6 @@
 {
  "about": {
-    "title": "Σχετικά με το Trilium Notes",
+    "title": "Πληροφορίες για το Trilium Notes",
    "homepage": "Αρχική Σελίδα:",
    "app_version": "Έκδοση εφαρμογής:",
    "db_version": "Έκδοση βάσης δεδομένων:",
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -343,7 +343,6 @@
    "label_type_title": "Type of the label will help Trilium to choose suitable interface to enter the label value.",
    "label_type": "Type",
    "text": "Text",
-    "textarea": "Multi-line Text",
    "number": "Number",
    "boolean": "Boolean",
    "date": "Date",
@@ -1037,25 +1036,6 @@
    "file_preview_not_available": "File preview is not available for this file format.",
    "too_big": "The preview only shows the first {{maxNumChars}} characters of the file for performance reasons. Download the file and open it externally to be able to see the entire content."
  },
-  "media": {
-    "play": "Play (Space)",
-    "pause": "Pause (Space)",
-    "back-10s": "Back 10s (Left arrow key)",
-    "forward-30s": "Forward 30s",
-    "mute": "Mute (M)",
-    "unmute": "Unmute (M)",
-    "playback-speed": "Playback speed",
-    "loop": "Loop",
-    "disable-loop": "Disable loop",
-    "rotate": "Rotate",
-    "picture-in-picture": "Picture-in-picture",
-    "exit-picture-in-picture": "Exit picture-in-picture",
-    "fullscreen": "Fullscreen (F)",
-    "exit-fullscreen": "Exit fullscreen",
-    "unsupported-format": "Media preview is not available for this file format:\n{{mime}}",
-    "zoom-to-fit": "Zoom to fill",
-    "zoom-reset": "Reset zoom to fill"
-  },
  "protected_session": {
    "enter_password_instruction": "Showing protected note requires entering your password:",
    "start_session_button": "Start protected session",
@@ -1069,6 +1049,7 @@
    "unprotecting-title": "Unprotecting status"
  },
  "relation_map": {
+    "open_in_new_tab": "Open in new tab",
    "remove_note": "Remove note",
    "edit_title": "Edit title",
    "rename_note": "Rename note",
@@ -2202,33 +2183,5 @@
  },
  "setup_form": {
    "more_info": "Learn more"
-  },
-  "mermaid": {
-    "placeholder": "Type the content of your Mermaid diagram or use one of the sample diagrams below.",
-    "sample_diagrams": "Sample diagrams:",
-    "sample_flowchart": "Flowchart",
-    "sample_class": "Class",
-    "sample_sequence": "Sequence",
-    "sample_entity_relationship": "Entity Relationship",
-    "sample_state": "State",
-    "sample_mindmap": "Mindmap",
-    "sample_architecture": "Architecture",
-    "sample_block": "Block",
-    "sample_c4": "C4",
-    "sample_gantt": "Gantt",
-    "sample_git": "Git",
-    "sample_kanban": "Kanban",
-    "sample_packet": "Packet",
-    "sample_pie": "Pie",
-    "sample_quadrant": "Quadrant",
-    "sample_radar": "Radar",
-    "sample_requirement": "Requirement",
-    "sample_sankey": "Sankey",
-    "sample_timeline": "Timeline",
-    "sample_treemap": "Treemap",
-    "sample_user_journey": "User Journey",
-    "sample_xy": "XY",
-    "sample_venn": "Venn",
-    "sample_ishikawa": "Ishikawa"
  }
 }
--- a/apps/client/src/translations/es/translation.json
+++ b/apps/client/src/translations/es/translation.json
@@ -1051,6 +1051,7 @@
    "unprotecting-title": "Estado de desprotección"
  },
  "relation_map": {
+    "open_in_new_tab": "Abrir en nueva pestaña",
    "remove_note": "Quitar nota",
    "edit_title": "Editar título",
    "rename_note": "Cambiar nombre de nota",
@@ -1547,8 +1548,7 @@
    "task-list": "Lista de tareas",
    "book": "Colección",
    "new-feature": "Nuevo",
-    "collections": "Colecciones",
-    "spreadsheet": "Hoja de cálculo"
+    "collections": "Colecciones"
  },
  "protect_note": {
    "toggle-on": "Proteger la nota",
@@ -1650,8 +1650,7 @@
  },
  "search_result": {
    "no_notes_found": "No se han encontrado notas para los parámetros de búsqueda dados.",
-    "search_not_executed": "La búsqueda aún no se ha ejecutado.",
-    "search_now": "Buscar ahora"
+    "search_not_executed": "La búsqueda aún no se ha ejecutado. Dé clic en el botón «Buscar» para ver los resultados."
  },
  "spacer": {
    "configure_launchbar": "Configurar barra de lanzamiento"
@@ -2197,52 +2196,5 @@
  },
  "setup_form": {
    "more_info": "Para saber más"
-  },
-  "media": {
-    "play": "Reproducir (Espacio)",
-    "pause": "Pausa (Espacio)",
-    "back-10s": "Retroceder 10s (tecla de flecha izquierda)",
-    "forward-30s": "Adelantar 30s",
-    "mute": "Silenciar (M)",
-    "unmute": "Activar sonido (M)",
-    "playback-speed": "Velocidad de reproducción",
-    "loop": "Bucle",
-    "disable-loop": "Deshabilitar bucle",
-    "rotate": "Rotar",
-    "picture-in-picture": "Imagen en imagen",
-    "exit-picture-in-picture": "Salir del modo imagen en imagen",
-    "fullscreen": "Pantalla completa (F)",
-    "exit-fullscreen": "Salir de la pantalla completa",
-    "unsupported-format": "La vista previa del medio no está disponible para este formato de archivo:\n{{mime}}",
-    "zoom-to-fit": "Acercamiento para llenar",
-    "zoom-reset": "Reiniciar acercamiento para llenar"
-  },
-  "mermaid": {
-    "placeholder": "Ingrese el contenido de su diagrama Mermaid o utilice uno de los diagramas de muestra a continuación.",
-    "sample_diagrams": "Diagramas de muestra:",
-    "sample_flowchart": "Diagrama de flujo",
-    "sample_class": "Clase",
-    "sample_sequence": "Secuencia",
-    "sample_entity_relationship": "Relación entre entidades",
-    "sample_state": "Estado",
-    "sample_mindmap": "Mapa mental",
-    "sample_architecture": "Arquitectura",
-    "sample_block": "Bloque",
-    "sample_c4": "C4",
-    "sample_gantt": "Gantt",
-    "sample_git": "Git",
-    "sample_kanban": "Kanban",
-    "sample_packet": "Paquete",
-    "sample_pie": "Pastel",
-    "sample_quadrant": "Cuadrante",
-    "sample_radar": "Radar",
-    "sample_requirement": "Requerimiento",
-    "sample_sankey": "Sankey",
-    "sample_timeline": "Línea de tiempo",
-    "sample_user_journey": "Jornada de usuario",
-    "sample_xy": "XY",
-    "sample_venn": "Venn",
-    "sample_ishikawa": "Ishikawa",
-    "sample_treemap": "Mapa de árbol"
  }
 }
--- a/apps/client/src/translations/fr/translation.json
+++ b/apps/client/src/translations/fr/translation.json
@@ -1036,6 +1036,7 @@
    "unprotecting-title": "Statut de la non-protection"
  },
  "relation_map": {
+    "open_in_new_tab": "Ouvrir dans un nouvel onglet",
    "remove_note": "Supprimer la note",
    "edit_title": "Modifier le titre",
    "rename_note": "Renommer la note",
--- a/apps/client/src/translations/ga/translation.json
+++ b/apps/client/src/translations/ga/translation.json
@@ -477,8 +477,7 @@
    "and_more": "... agus {{count}} eile.",
    "print_landscape": "Agus é á onnmhairiú go PDF, athraítear treoshuíomh an leathanaigh go tírdhreach seachas portráid.",
    "print_page_size": "Agus é á easpórtáil go PDF, athraítear méid an leathanaigh. Luachanna tacaithe: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>.",
-    "color_type": "Dath",
-    "textarea": "Téacs Il-líne"
+    "color_type": "Dath"
  },
  "attribute_editor": {
    "help_text_body1": "Chun lipéad a chur leis, clóscríobh m.sh. <code>#rock</code> nó más mian leat luach a chur leis freisin ansin m.sh. <code>#year = 2020</code>",
@@ -1056,6 +1055,7 @@
    "unprotecting-title": "Stádas díchosanta"
  },
  "relation_map": {
+    "open_in_new_tab": "Oscail i gcluaisín nua",
    "remove_note": "Bain nóta",
    "edit_title": "Cuir an teideal in eagar",
    "rename_note": "Athainmnigh an nóta",
@@ -1571,8 +1571,7 @@
    "ai-chat": "Comhrá AI",
    "task-list": "Liosta Tascanna",
    "new-feature": "Nua",
-    "collections": "Bailiúcháin",
-    "spreadsheet": "Scarbhileog"
+    "collections": "Bailiúcháin"
  },
  "protect_note": {
    "toggle-on": "Cosain an nóta",
@@ -2228,52 +2227,5 @@
  },
  "setup_form": {
    "more_info": "Foghlaim níos mó"
-  },
-  "media": {
-    "play": "Seinn (Spás)",
-    "pause": "Sos (Spás)",
-    "back-10s": "10 soicind ar ais (eochair saighead chlé)",
-    "forward-30s": "Ar aghaidh 30s",
-    "mute": "Balbhaigh (M)",
-    "unmute": "Díbhalbhaigh (M)",
-    "playback-speed": "Luas athsheinm",
-    "loop": "Lúb",
-    "disable-loop": "Díchumasaigh an lúb",
-    "rotate": "Rothlaigh",
-    "picture-in-picture": "Pictiúr i bpictiúr",
-    "exit-picture-in-picture": "Scoir pictiúr-i-bpictiúr",
-    "fullscreen": "Lánscáileán (F)",
-    "exit-fullscreen": "Scoir lánscáileáin",
-    "unsupported-format": "Níl réamhamharc meán ar fáil don fhormáid comhaid seo:\n{{mime}}",
-    "zoom-to-fit": "Zúmáil chun líonadh",
-    "zoom-reset": "Athshocraigh súmáil chun líonadh"
-  },
-  "mermaid": {
-    "placeholder": "Clóscríobh ábhar do léaráid Maighdean Mhara nó bain úsáid as ceann de na léaráidí samplacha thíos.",
-    "sample_diagrams": "Léaráidí samplacha:",
-    "sample_flowchart": "Cairt Sreabhadh",
-    "sample_class": "Rang",
-    "sample_sequence": "Seicheamh",
-    "sample_entity_relationship": "Gaol Eintitis",
-    "sample_state": "Stát",
-    "sample_mindmap": "Léarscáil intinne",
-    "sample_architecture": "Ailtireacht",
-    "sample_block": "Bloc",
-    "sample_c4": "C4",
-    "sample_gantt": "Gantt",
-    "sample_git": "Git",
-    "sample_kanban": "Kanban",
-    "sample_packet": "Paicéad",
-    "sample_pie": "Pióg",
-    "sample_quadrant": "Ceathrú",
-    "sample_radar": "Radar",
-    "sample_requirement": "Riachtanas",
-    "sample_sankey": "Sankey",
-    "sample_timeline": "Amlíne",
-    "sample_treemap": "Léarscáil Crann",
-    "sample_user_journey": "Turas Úsáideora",
-    "sample_xy": "XY",
-    "sample_venn": "Venn",
-    "sample_ishikawa": "Ishikawa"
  }
 }
--- a/apps/client/src/translations/hi/translation.json
+++ b/apps/client/src/translations/hi/translation.json
@@ -1049,6 +1049,7 @@
    "unprotecting-title": "अन-प्रोटेक्ट स्टेटस"
  },
  "relation_map": {
+    "open_in_new_tab": "नए टैब में खोलें",
    "remove_note": "नोट हटाएं",
    "edit_title": "टाइटल एडिट करें",
    "rename_note": "नोट का नाम बदलें",
--- a/apps/client/src/translations/it/translation.json
+++ b/apps/client/src/translations/it/translation.json
@@ -520,7 +520,7 @@
    "custom_name_label": "Nome del motore di ricerca personalizzato",
    "custom_name_placeholder": "Personalizza il nome del motore di ricerca",
    "custom_url_label": "L'URL del motore di ricerca personalizzato deve includere {keyword} come segnaposto per il termine di ricerca.",
-    "custom_url_placeholder": "Personalizza l'URL del motore di ricerca"
+"custom_url_placeholder": "Personalizza l'URL del motore di ricerca"
  },
  "sql_table_schemas": {
    "tables": "Tabelle"
@@ -1424,6 +1424,7 @@
    "unprotecting-title": "Stato non protetto"
  },
  "relation_map": {
+    "open_in_new_tab": "Apri in una nuova scheda",
    "remove_note": "Rimuovi nota",
    "edit_title": "Modifica titolo",
    "rename_note": "Rinomina nota",
@@ -1716,8 +1717,7 @@
    "task-list": "Elenco delle attività",
    "new-feature": "Nuovo",
    "collections": "Collezioni",
-    "ai-chat": "Chat con IA",
-    "spreadsheet": "Foglio di calcolo"
+    "ai-chat": "Chat con IA"
  },
  "protect_note": {
    "toggle-on": "Proteggi la nota",
--- a/apps/client/src/translations/ja/translation.json
+++ b/apps/client/src/translations/ja/translation.json
@@ -588,7 +588,7 @@
    "note-map": "ノートマップ",
    "render-note": "レンダリングノート",
    "book": "コレクション",
-    "mermaid-diagram": "マーメイド図",
+    "mermaid-diagram": "Mermaidダイアグラム",
    "canvas": "キャンバス",
    "web-view": "Web ビュー",
    "mind-map": "マインドマップ",
@@ -600,8 +600,7 @@
    "task-list": "タスクリスト",
    "new-feature": "New",
    "collections": "コレクション",
-    "ai-chat": "AI チャット",
-    "spreadsheet": "スプレッドシート"
+    "ai-chat": "AI チャット"
  },
  "edited_notes": {
    "no_edited_notes_found": "この日の編集されたノートはまだありません...",
@@ -1180,8 +1179,7 @@
    "is_owned_by_note": "ノートによって所有されています",
    "and_more": "...その他 {{count}} 件。",
    "print_landscape": "PDF にエクスポートするときに、ページの向きを縦向きではなく横向きに変更します。",
-    "print_page_size": "PDF にエクスポートするときに、ページのサイズを変更します。サポートされる値: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>。",
-    "textarea": "複数行テキスト"
+    "print_page_size": "PDF にエクスポートするときに、ページのサイズを変更します。サポートされる値: <code>A0</code>, <code>A1</code>, <code>A2</code>, <code>A3</code>, <code>A4</code>, <code>A5</code>, <code>A6</code>, <code>Legal</code>, <code>Letter</code>, <code>Tabloid</code>, <code>Ledger</code>。"
  },
  "link_context_menu": {
    "open_note_in_popup": "クイック編集",
@@ -1538,6 +1536,7 @@
    "url_placeholder": "http://web サイト..."
  },
  "relation_map": {
+    "open_in_new_tab": "新しいタブで開く",
    "remove_note": "ノートを削除",
    "edit_title": "タイトルを編集",
    "rename_note": "ノート名を変更",
@@ -2168,52 +2167,5 @@
  },
  "setup_form": {
    "more_info": "さらに詳しく"
-  },
-  "media": {
-    "play": "再生 (スペース)",
-    "pause": "一時停止 (スペース)",
-    "back-10s": "10 秒戻る (左矢印キー)",
-    "forward-30s": "30 秒進む",
-    "mute": "ミュート (M)",
-    "unmute": "ミュート解除 (M)",
-    "playback-speed": "再生速度",
-    "loop": "ループ",
-    "disable-loop": "ループを解除",
-    "rotate": "回転",
-    "picture-in-picture": "ピクチャーインピクチャー",
-    "exit-picture-in-picture": "ピクチャーインピクチャーを終了",
-    "fullscreen": "全画面表示 (F)",
-    "exit-fullscreen": "全画面表示を終了",
-    "unsupported-format": "このファイル形式ではメディアプレビューはご利用いただけません:\n{{mime}}",
-    "zoom-to-fit": "ズームして全体を表示",
-    "zoom-reset": "ズーム設定をリセット"
-  },
-  "mermaid": {
-    "placeholder": "マーメイド図の内容を入力するか、以下のサンプル図のいずれかを使用してください。",
-    "sample_diagrams": "サンプル図：",
-    "sample_flowchart": "フローチャート",
-    "sample_class": "クラス図",
-    "sample_sequence": "シーケンス図",
-    "sample_entity_relationship": "ER 図",
-    "sample_state": "状態遷移図",
-    "sample_mindmap": "マインドマップ",
-    "sample_architecture": "アーキテクチャ図",
-    "sample_block": "ブロック図",
-    "sample_c4": "C4 図",
-    "sample_gantt": "ガントチャート",
-    "sample_git": "Git グラフ",
-    "sample_kanban": "カンバン",
-    "sample_packet": "パケット図",
-    "sample_pie": "円グラフ",
-    "sample_quadrant": "4象限図",
-    "sample_radar": "レーダーチャート",
-    "sample_requirement": "要件図",
-    "sample_sankey": "サンキー図",
-    "sample_timeline": "タイムライン",
-    "sample_treemap": "ツリーマップ",
-    "sample_user_journey": "ユーザージャーニー図",
-    "sample_xy": "XY チャート",
-    "sample_venn": "ベン図",
-    "sample_ishikawa": "石川図"
  }
 }
--- a/apps/client/src/translations/ko/translation.json
+++ b/apps/client/src/translations/ko/translation.json
@@ -51,7 +51,7 @@
    "branch_prefix_saved": "브랜치 접두사가 저장되었습니다.",
    "edit_branch_prefix_multiple": "{{count}}개의 지점 접두사 편집",
    "branch_prefix_saved_multiple": "{{count}}개의 지점에 대해 지점 접두사가 저장되었습니다.",
-    "affected_branches": "영향을 받은 분기 수({{count}}):"
+    "affected_branches": "영향을 받는 브랜치 수 ({{count}}):"
  },
  "bulk_actions": {
    "bulk_actions": "대량 작업",
@@ -134,27 +134,6 @@
    "notSet": "미설정",
    "goBackForwards": "히스토리에서 뒤로/앞으로 이동",
    "showJumpToNoteDialog": "<a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">\"노트로 이동\" 대화 상자</a> 표시",
-    "scrollToActiveNote": "활성화된 노트로 스크롤 이동",
-    "collapseWholeTree": "모든 노트 트리를 접기",
-    "collapseSubTree": "하위 트리 접기",
-    "tabShortcuts": "탭 단축키",
-    "onlyInDesktop": "데스크톱에서만(일렉트론 빌드)",
-    "openEmptyTab": "빈 탭 열기",
-    "closeActiveTab": "활성 탭 닫기",
-    "jumpToParentNote": "부모 노트로 이동하기",
-    "activateNextTab": "다음 탭 활성화",
-    "activatePreviousTab": "이전 탭 활성화",
-    "creatingNotes": "노트 만들기",
-    "createNoteInto": "활성 노트에 새로운 하위 노트 추가",
-    "movingCloningNotes": "노트 이동/복제",
-    "moveNoteUpDown": "노트 목록에서 노트 위/아래 이동",
-    "selectAllNotes": "현재 레벨의 모든 노트 선택",
-    "selectNote": "노트 선택",
-    "deleteNotes": "노트/하위트리 삭제",
-    "editingNotes": "노트 편집",
-    "createEditLink": "외부 링크 생성/편집",
-    "createInternalLink": "내부 링크 생성",
-    "followLink": "커서아래 링크 따라가기",
-    "insertDateTime": "커서위치에 현재 날짜와 시간 삽입"
+    "scrollToActiveNote": "활성화된 노트로 스크롤 이동"
  }
 }
--- a/apps/client/src/translations/pl/translation.json
+++ b/apps/client/src/translations/pl/translation.json
@@ -29,7 +29,7 @@
    "widget-render-error": {
      "title": "Nie udało się wyrenderować niestandardowego widżetu React"
    },
-    "widget-missing-parent": "Niestandardowy widżet nie ma zdefiniowanej obowiązkowej właściwości „{{property}}”.\n\nJeśli skrypt ma działać bez interfejsu użytkownika (UI) wyłącz go: '#run=frontendStartup'.",
+    "widget-missing-parent": "Niestandardowy widżet nie ma zdefiniowanej obowiązkowej właściwości „{{property}}”.\nJeśli skrypt ma działać bez interfejsu użytkownika (UI) wyłącz go:  '#run=frontendStartup'.",
    "open-script-note": "Otwórz notatkę ze skryptem",
    "scripting-error": "Błąd skryptu użytkownika: {{title}}"
  },
@@ -1275,6 +1275,7 @@
    "unprotecting-title": "Status zdejmowania ochrony"
  },
  "relation_map": {
+    "open_in_new_tab": "Otwórz w nowej karcie",
    "remove_note": "Usuń notatkę",
    "edit_title": "Edytuj tytuł",
    "rename_note": "Zmień nazwę notatki",
@@ -1486,7 +1487,7 @@
    "custom_name_label": "Nazwa niestandardowej wyszukiwarki",
    "custom_name_placeholder": "Dostosuj nazwę wyszukiwarki",
    "custom_url_label": "URL niestandardowej wyszukiwarki powinien zawierać {keyword} jako symbol zastępczy dla wyszukiwanej frazy.",
-    "custom_url_placeholder": "Dostosuj url wyszukiwarki",
+    "custom_url_placeholder": "Dostosuj URL wyszukiwarki",
    "save_button": "Zapisz"
  },
  "tray": {
@@ -1779,8 +1780,7 @@
    "ai-chat": "Czat AI",
    "task-list": "Lista zadań",
    "new-feature": "Nowość",
-    "collections": "Kolekcje",
-    "spreadsheet": "Arkusz"
+    "collections": "Kolekcje"
  },
  "protect_note": {
    "toggle-on": "Chroń notatkę",
@@ -2197,52 +2197,5 @@
  },
  "setup_form": {
    "more_info": "Dowiedz się więcej"
-  },
-  "media": {
-    "fullscreen": "Pełny ekran (F)",
-    "mute": "Wycisz (M)",
-    "unmute": "Wyłącz wyciszenie (M)",
-    "exit-fullscreen": "Wyłącz pełny ekran",
-    "loop": "Pętla",
-    "disable-loop": "Wyłącz pętle",
-    "rotate": "Obróć",
-    "picture-in-picture": "Obraz w obrazie",
-    "pause": "Zatrzymaj (Space)",
-    "back-10s": "Cofnij 10s (Lewa strzałka)",
-    "forward-30s": "Do przodu 30s",
-    "playback-speed": "Szybkość odtwarzania",
-    "exit-picture-in-picture": "Wyjdź z obrazu w obrazie",
-    "zoom-to-fit": "Powiększ aby wypełnić",
-    "unsupported-format": "Podgląd multimediów nie jest dostępny dla tego formatu pliku\n{{mime}}",
-    "play": "Odtwórz (Space)",
-    "zoom-reset": "Zresetuj powiększenie"
-  },
-  "mermaid": {
-    "sample_architecture": "Architektura",
-    "sample_diagrams": "Przykład diagramu:",
-    "sample_flowchart": "Schemat blokowy",
-    "sample_class": "Klasa",
-    "sample_sequence": "Sekwencja",
-    "sample_timeline": "Oś czasu",
-    "sample_treemap": "Mapa drzewa",
-    "sample_xy": "XY",
-    "sample_venn": "Diagram Venna",
-    "sample_ishikawa": "Diagram Ishikawa",
-    "placeholder": "Wpisz treść swojego diagramu lub skorzystaj z jednego z przykładowych diagramów poniżej.",
-    "sample_entity_relationship": "Diagram związków encji",
-    "sample_state": "Diagram stanów",
-    "sample_mindmap": "Mapa myśli",
-    "sample_block": "Diagram blokowy",
-    "sample_c4": "C4",
-    "sample_gantt": "Wykres Gantta",
-    "sample_git": "Diagram Git",
-    "sample_kanban": "Kanban",
-    "sample_packet": "Diagram pakietów",
-    "sample_pie": "Wykres kołowy",
-    "sample_quadrant": "Diagram kwadrantowy",
-    "sample_radar": "Wykres radarowy",
-    "sample_requirement": "Diagram wymagań",
-    "sample_sankey": "Wykres Sankeya",
-    "sample_user_journey": "Mapa Podróży Użytkownika"
  }
 }
--- a/apps/client/src/translations/pt/translation.json
+++ b/apps/client/src/translations/pt/translation.json
@@ -1047,6 +1047,7 @@
    "unprotecting-title": "Estado da remoção de proteção"
  },
  "relation_map": {
+    "open_in_new_tab": "Abrir em nova guia",
    "remove_note": "Remover nota",
    "edit_title": "Editar título",
    "rename_note": "Renomear nota",
--- a/apps/client/src/translations/pt_br/translation.json
+++ b/apps/client/src/translations/pt_br/translation.json
@@ -1111,6 +1111,7 @@
    "start_session_button": "Iniciar sessão protegida"
  },
  "relation_map": {
+    "open_in_new_tab": "Abrir em nova aba",
    "remove_note": "Remover nota",
    "edit_title": "Editar título",
    "rename_note": "Renomear nota",
--- a/apps/client/src/translations/ro/translation.json
+++ b/apps/client/src/translations/ro/translation.json
@@ -1054,6 +1054,7 @@
    "enter_title_of_new_note": "Introduceți titlul noii notițe",
    "note_already_in_diagram": "Notița „{{title}}” deja se află pe diagramă.",
    "note_not_found": "Notița „{{noteId}}” nu a putut fi găsită!",
+    "open_in_new_tab": "Deschide într-un tab nou",
    "remove_note": "Șterge notița",
    "remove_relation": "Șterge relația",
    "rename_note": "Redenumește notița",
--- a/apps/client/src/translations/ru/translation.json
+++ b/apps/client/src/translations/ru/translation.json
@@ -257,7 +257,7 @@
    "collapseExpand": "свернуть/развернуть узел",
    "notSet": "не установлено",
    "goBackForwards": "назад / вперед в истории",
-    "showJumpToNoteDialog": "Перейти к <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">\"Перейти к\" окно</a>",
+    "showJumpToNoteDialog": "показать <a class=\"external\" href=\"https://triliumnext.github.io/Docs/Wiki/note-navigation.html#jump-to-note\">окно \"Перейти к\"</a>",
    "scrollToActiveNote": "прокрутка к активной заметке",
    "jumpToParentNote": "переход к родительской заметке",
    "collapseWholeTree": "свернуть все дерево заметок",
@@ -471,7 +471,7 @@
    "calendar_root": "отмечает заметку, которая должна использоваться в качестве корневой для заметок дня. Только одна должна быть отмечена как таковая.",
    "archived": "заметки с этой меткой не будут отображаться в результатах поиска по умолчанию (а также в диалоговых окнах «Перейти к», «Добавить ссылку» и т. д.).",
    "exclude_from_export": "заметки (с их поддеревьями) не будут включены ни в один экспорт заметок",
-    "run": "определяет, при каких событиях должен запускаться скрипт. Возможные значения:<ul>\n<li>frontendStartup — при запуске (или обновлении) фронтенда Trilium, но не на мобильном устройстве.</li>\n<li>mobileStartup — при запуске (или обновлении) фронтенда Trilium на мобильном устройстве.</li>\n<li>backendStartup — при запуске бэкенда Trilium.</li>\n<li>hourly — запускать каждый час. Для указания времени можно использовать дополнительную метку <code>runAtHour</code>.</li>\n<li>daily — запускать раз в день.</li></ul>",
+    "run": "определяет, при каких событиях должен запускаться скрипт. Возможные значения:\n<ul>\n<li>frontendStartup — при запуске (или обновлении) фронтенда Trilium, но не на мобильном устройстве.</li>\n<li>mobileStartup — при запуске (или обновлении) фронтенда Trilium на мобильном устройстве.</li>\n<li>backendStartup — при запуске бэкенда Trilium.</li>\n<li>hourly — запускать каждый час. Для указания времени можно использовать дополнительную метку <code>runAtHour</code>.</li>\n<li>daily — запускать раз в день.</li>\n</ul>",
    "run_on_instance": "Определить, на каком экземпляре Trilium это должно выполняться. По умолчанию — для всех экземпляров.",
    "run_at_hour": "В какой час это должно выполняться? Следует использовать вместе с <code>#run=hourly</code>. Можно задать несколько раз для большего количества запусков в течение дня.",
    "disable_inclusion": "скрипты с этой меткой не будут включены в выполнение родительского скрипта.",
@@ -594,8 +594,7 @@
    "display-week-numbers": "Отображать номера недель",
    "hide-weekends": "Скрыть выходные",
    "raster": "Растр",
-    "show-scale": "Показать масштаб",
-    "show-labels": "Показать названия маркеров"
+    "show-scale": "Показать масштаб"
  },
  "editorfeatures": {
    "note_completion_enabled": "Включить автодополнение",
@@ -783,13 +782,7 @@
    "shared-indicator-tooltip": "Эта заметка опубликована",
    "shared-indicator-tooltip-with-url": "Эта заметка доступно публично по адресу: {{- url}}",
    "subtree-hidden-moved-description-other": "В дереве, к которому относится эта заметка, скрыты дочерние заметки.",
-    "subtree-hidden-moved-description-collection": "Эта коллекция скрывает свои дочерние заметки в дереве.",
-    "clone-indicator-tooltip": "У этой заметки {{- count}} родителей: {{- parents}}",
-    "clone-indicator-tooltip-single": "Эта заметка клонирована (1 дополнительный родитель: {{- parent}})",
-    "subtree-hidden-moved-title": "Добавлено в {{title}}",
-    "subtree-hidden-tooltip_one": "{{count}} дочерняя заметка скрыта",
-    "subtree-hidden-tooltip_few": "Скрыто {{count}} дочерних заметок",
-    "subtree-hidden-tooltip_many": "Скрыто {{count}} дочерних заметок"
+    "subtree-hidden-moved-description-collection": "Эта коллекция скрывает свои дочерние заметки в дереве."
  },
  "quick-search": {
    "no-results": "Результаты не найдены",
@@ -833,9 +826,7 @@
    "mind-map": "Mind Map",
    "geo-map": "Географическая карта",
    "task-list": "Список задач",
-    "confirm-change": "Не рекомендуется менять тип заметки, если её содержимое не пустое. Вы всё равно хотите продолжить?",
-    "ai-chat": "Чат с ИИ",
-    "spreadsheet": "Электронная таблица"
+    "confirm-change": "Не рекомендуется менять тип заметки, если её содержимое не пустое. Вы всё равно хотите продолжить?"
  },
  "tree-context-menu": {
    "open-in-popup": "Быстрое редактирование",
@@ -1162,8 +1153,7 @@
    "search_note_saved": "Заметка с настройкой поиска сохранена в {{- notePathTitle}}",
    "unknown_search_option": "Неизвестный параметр поиска {{searchOptionName}}",
    "actions_executed": "Действия выполнены.",
-    "view_options": "Просмотреть опции:",
-    "option": "опция"
+    "view_options": "Просмотреть опции:"
  },
  "ancestor": {
    "depth_label": "глубина",
@@ -1413,8 +1403,7 @@
    "type_text_to_filter": "Введите текст для фильтрации сочетаний клавиш...",
    "reload_app": "Перезагрузить приложение, чтобы применить изменения",
    "confirm_reset": "Вы действительно хотите сбросить все сочетания клавиш до значений по умолчанию?",
-    "set_all_to_default": "Установить все сочетания клавиш по умолчанию",
-    "no_results": "Не найдено ярлыков, соответствующих '{{filter}}'"
+    "set_all_to_default": "Установить все сочетания клавиш по умолчанию"
  },
  "sync_2": {
    "timeout_unit": "миллисекунд",
@@ -1625,6 +1614,7 @@
    "rename_note": "Переименовать заметку",
    "remove_relation": "Удалить отношение",
    "default_new_note_title": "новая заметка",
+    "open_in_new_tab": "Открыть в новой вкладке",
    "confirm_remove_relation": "Вы уверены, что хотите удалить связь?",
    "enter_new_title": "Введите новое название заметки:",
    "note_not_found": "Заметка {{noteId}} не найдена!",
@@ -1723,8 +1713,7 @@
    "delete_this_note": "Удалить эту заметку",
    "insert_child_note": "Вставить дочернюю заметку",
    "note_revisions": "История изменений",
-    "content_language_switcher": "Язык содержимого: {{language}}",
-    "backlinks": "Ссылки"
+    "content_language_switcher": "Язык содержимого: {{language}}"
  },
  "svg_export_button": {
    "button_title": "Экспортировать диаграмму как SVG"
@@ -1801,8 +1790,7 @@
  },
  "search_result": {
    "no_notes_found": "По заданным параметрам поиска заметки не найдены.",
-    "search_not_executed": "Поиск ещё не выполнен.",
-    "search_now": "Искать сейчас"
+    "search_not_executed": "Поиск ещё не выполнен. Нажмите кнопку «Поиск» выше, чтобы увидеть результаты."
  },
  "empty": {
    "search_placeholder": "поиск заметки по ее названию",
@@ -2000,12 +1988,10 @@
    "print_report_collection_content_few": "{{count}} заметки в коллекции не удалось распечатать, поскольку они не поддерживаются или защищены.",
    "print_report_collection_content_many": "{{count}} заметок в коллекции не удалось распечатать, поскольку они не поддерживаются или защищены.",
    "print_report_collection_details_button": "Подробнее",
-    "print_report_collection_details_ignored_notes": "Пропущенные заметки",
-    "print_report_error_title": "Не удалось напечатать",
-    "print_report_stack_trace": "Трассировка стека"
+    "print_report_collection_details_ignored_notes": "Пропущенные заметки"
  },
  "book": {
-    "no_children_help": "В этой коллекции нет дочерних заметок, поэтому отображать нечего.",
+    "no_children_help": "В этой коллекции нет дочерних заметок, поэтому отображать нечего. Подробности см. в <a href=\"https://triliumnext.github.io/Docs/Wiki/book-note.html\">wiki</a>.",
    "drag_locked_title": "Защищено от изменения",
    "drag_locked_message": "Перетаскивание не допускается, так как коллекция защищена от редактирования."
  },
@@ -2021,9 +2007,7 @@
    "rendering_error": "Невозможно отобразить содержимое из-за ошибки."
  },
  "pagination": {
-    "total_notes": "{{count}} заметок",
-    "prev_page": "Предыдущая страница",
-    "next_page": "Следующая страница"
+    "total_notes": "{{count}} заметок"
  },
  "status_bar": {
    "attributes_one": "{{count}} атрибут",
@@ -2153,49 +2137,5 @@
  },
  "platform_indicator": {
    "available_on": "Доступно для {{platform}}"
-  },
-  "render": {
-    "setup_title": "Отобразить настраиваемый HTML или Preact JSX в этой заметке",
-    "setup_create_sample_preact": "Создать образец заметки с помощью Preact",
-    "setup_create_sample_html": "Создать образец заметки с помощью HTML",
-    "setup_sample_created": "Образец заметки был создан в качестве дочерней записи.",
-    "disabled_description": "Эти заметки для рендера поступают из внешнего источника. Чтобы защитить вас от вредоносного содержимого, они не включены по умолчанию. Убедитесь, что вы доверяете источнику до его включения.",
-    "disabled_button_enable": "Включить заметки для рендера"
-  },
-  "web_view_setup": {
-    "title": "Создайте живой просмотр веб-страницы прямо в Trilium",
-    "url_placeholder": "Введите или вставьте адрес сайта, например https://triliumnotes.org",
-    "create_button": "Создать веб-просмотр",
-    "invalid_url_title": "Неверный адрес",
-    "invalid_url_message": "Введите корректный веб-адрес, например https://triliumnotes.org.",
-    "disabled_description": "Этот веб-просмотр был импортирован из внешнего источника. Чтобы защитить вас от фишинга или вредоносного контента, он не загружается автоматически. Вы можете включить его, если доверяете источнику.",
-    "disabled_button_enable": "Включить просмотр веб-страниц"
-  },
-  "active_content_badges": {
-    "type_icon_pack": "Набор иконок",
-    "type_backend_script": "Бэкенд скрипт",
-    "type_frontend_script": "Фронтенд скрипт",
-    "type_widget": "Виджет",
-    "type_app_css": "Пользовательский CSS",
-    "type_render_note": "Заметка для рендера",
-    "type_web_view": "Просмотр веб-страницы",
-    "type_app_theme": "Пользовательская тема",
-    "toggle_tooltip_enable_tooltip": "Нажмите, чтобы включить этот {{type}}.",
-    "toggle_tooltip_disable_tooltip": "Нажмите, чтобы выключить этот {{type}}.",
-    "menu_docs": "Открытая документация",
-    "menu_execute_now": "Выполнить скрипт сейчас",
-    "menu_run": "Выполнять автоматически",
-    "menu_run_disabled": "Вручную",
-    "menu_run_backend_startup": "При запуске бэкенда",
-    "menu_run_hourly": "Ежечасно",
-    "menu_run_daily": "Ежедневно",
-    "menu_run_frontend_startup": "Когда запускается интерфейс ПК",
-    "menu_run_mobile_startup": "При запуске мобильного интерфейса",
-    "menu_change_to_widget": "Изменить виджет",
-    "menu_change_to_frontend_script": "Перейти к фронтенд скрипту",
-    "menu_theme_base": "Базовая тема"
-  },
-  "setup_form": {
-    "more_info": "Узнать больше"
  }
 }
--- a/apps/client/src/translations/sv/translation.json
+++ b/apps/client/src/translations/sv/translation.json
@@ -3,38 +3,6 @@
    "title": "Om Trilium Notes",
    "homepage": "Hemsida:",
    "app_version": "App version:",
-    "db_version": "DB version:",
-    "sync_version": "Sync version:",
-    "build_date": "Bygg datum:",
-    "build_revision": "Bygg version:",
-    "data_directory": "Data sökväg:"
-  },
-  "toast": {
-    "critical-error": {
-      "title": "Kritiskt fel",
-      "message": "Ett kritiskt fel har inträffat som förhindrar klientprogrammet från att starta:\n\n{{message}}\n\nDetta beror troligen på att ett skript har misslyckats på ett oväntat sätt. Försök att starta programmet i felsäkert läge och åtgärda problemet."
-    },
-    "widget-error": {
-      "title": "Misslyckades att starta widget",
-      "message-custom": "Anpassad widget från anteckning med ID \"{{id}}\", med rubrik \"{{title}}\" kunde inte startas på grund av:\n\n{{message}}",
-      "message-unknown": "Okänd widget kunde inte startas på grund av:\n\n{{message}}"
-    },
-    "bundle-error": {
-      "title": "Misslyckades att starta ett anpassat skript",
-      "message": "Skript kunde inte startas på grund av:\n\n{{message}}"
-    },
-    "widget-list-error": {
-      "title": "Misslyckades att hämta widget-listan från servern"
-    },
-    "widget-render-error": {
-      "title": "Misslyckades att renderera en anpassad React-widget"
-    },
-    "widget-missing-parent": "Anpassad widget saknar '{{property}}', som måste vara definierad.\n\nOm skriptet är avsett att köras utan gränssnitt, använd '#run-frontendStartup' istället.",
-    "open-script-note": "Öppna skriptanteckning",
-    "scripting-error": "Fel i anpassat skript: {{title}}"
-  },
-  "add_link": {
-    "add_link": "Infoga länk",
-    "help_on_links": "Hjälp om länkar"
+    "db_version": "DB version:"
  }
 }
--- a/apps/client/src/translations/tw/translation.json
+++ b/apps/client/src/translations/tw/translation.json
@@ -446,8 +446,7 @@
    "app_theme_base": "設定為 \"next\"、\"next-light \" 或 \"next-dark\"，以使用相應的 TriliumNext 主題（自動、淺色或深色）作為自訂主題的基礎，而非傳統主題。",
    "print_landscape": "匯出為 PDF 時，將頁面方向更改為橫向而非縱向。",
    "print_page_size": "在匯出 PDF 時更改頁面大小。支援的值：<code>A0</code>、<code>A1</code>、<code>A2</code>、<code>A3</code>、<code>A4</code>、<code>A5</code>、<code>A6</code>、<code>Legal</code>、<code>Letter</code>、<code>Tabloid</code>、<code>Ledger</code>。",
-    "color_type": "顏色",
-    "textarea": "多行文字"
+    "color_type": "顏色"
  },
  "attribute_editor": {
    "help_text_body1": "要新增標籤，只需輸入例如 <code>#rock</code> 或者如果您還想新增值，則例如 <code>#year = 2020</code>",
@@ -1047,6 +1046,7 @@
    "unprotecting-title": "解除保護狀態"
  },
  "relation_map": {
+    "open_in_new_tab": "在新分頁中打開",
    "remove_note": "刪除筆記",
    "edit_title": "編輯標題",
    "rename_note": "重新命名筆記",
@@ -1496,8 +1496,7 @@
    "task-list": "任務列表",
    "new-feature": "新增",
    "collections": "集合",
-    "ai-chat": "AI 聊天",
-    "spreadsheet": "試算表"
+    "ai-chat": "AI 聊天"
  },
  "protect_note": {
    "toggle-on": "保護筆記",
@@ -2183,52 +2182,5 @@
  },
  "setup_form": {
    "more_info": "了解更多"
-  },
-  "media": {
-    "play": "播放 (空白鍵)",
-    "pause": "暫停 (空白鍵)",
-    "back-10s": "往前 10 秒 (左方向鍵)",
-    "forward-30s": "往後 30 秒",
-    "mute": "靜音 (M)",
-    "unmute": "解除靜音 (M)",
-    "playback-speed": "播放速度",
-    "loop": "循環",
-    "disable-loop": "解除循環",
-    "rotate": "旋轉",
-    "picture-in-picture": "畫中畫",
-    "exit-picture-in-picture": "退出畫中畫",
-    "fullscreen": "全螢幕 (F)",
-    "exit-fullscreen": "退出全螢幕",
-    "unsupported-format": "此檔案格式不支援媒體預覽：\n{{mime}}",
-    "zoom-to-fit": "放大至填滿畫面",
-    "zoom-reset": "重設放大至填滿畫面"
-  },
-  "mermaid": {
-    "placeholder": "請輸入您的美人魚圖表內容，或選用下方其中一個範例圖表。",
-    "sample_diagrams": "範例圖表：",
-    "sample_flowchart": "流程圖",
-    "sample_class": "階層圖",
-    "sample_sequence": "時序圖",
-    "sample_entity_relationship": "實體關係圖",
-    "sample_state": "狀態圖",
-    "sample_mindmap": "心智圖",
-    "sample_architecture": "架構圖",
-    "sample_block": "區塊圖",
-    "sample_c4": "C4 圖",
-    "sample_gantt": "甘特圖",
-    "sample_git": "Git 分支圖",
-    "sample_kanban": "看板圖",
-    "sample_packet": "數據包圖",
-    "sample_pie": "圓餅圖",
-    "sample_quadrant": "象限圖",
-    "sample_radar": "雷達圖",
-    "sample_requirement": "需求圖",
-    "sample_sankey": "桑基圖",
-    "sample_timeline": "時間軸",
-    "sample_treemap": "樹狀圖",
-    "sample_user_journey": "用戶旅程",
-    "sample_xy": "XY 圖表",
-    "sample_venn": "韋恩圖",
-    "sample_ishikawa": "魚骨圖"
  }
 }
--- a/apps/client/src/translations/uk/translation.json
+++ b/apps/client/src/translations/uk/translation.json
@@ -1151,6 +1151,7 @@
    "unprotecting-title": "Статус зняття захисту"
  },
  "relation_map": {
+    "open_in_new_tab": "Відкрити в новій вкладці",
    "remove_note": "Видалити нотатку",
    "edit_title": "Редагувати заголовок",
    "rename_note": "Перейменувати нотатку",
--- a/apps/client/src/widgets/NoteDetail.tsx
+++ b/apps/client/src/widgets/NoteDetail.tsx
@@ -40,21 +40,6 @@ export default function NoteDetail() {
    const widgetRequestId = useRef(0);
    const hasFixedTree = note && noteContext?.hoistedNoteId === "_lbMobileRoot" && isMobile() && note.noteId.startsWith("_lbMobile");

-    // Defer loading for tabs that haven't been active yet (e.g. on app refresh).
-    // Special contexts (ntxId starting with "_", e.g. popup editor) are always considered active.
-    const isSpecialContext = ntxId?.startsWith("_") ?? false;
-    const [ hasTabBeenActive, setHasTabBeenActive ] = useState(() => isSpecialContext || (noteContext?.isActive() ?? false));
-    useEffect(() => {
-        if (!hasTabBeenActive && noteContext?.isActive()) {
-            setHasTabBeenActive(true);
-        }
-    }, [ noteContext, hasTabBeenActive ]);
-    useTriliumEvent("activeNoteChanged", ({ ntxId: eventNtxId }) => {
-        if (eventNtxId === ntxId && !hasTabBeenActive) {
-            setHasTabBeenActive(true);
-        }
-    });
-
    const props: TypeWidgetProps = {
        note: note!,
        viewScope,
@@ -64,7 +49,7 @@ export default function NoteDetail() {
    };

    useEffect(() => {
-        if (!type || !hasTabBeenActive) return;
+        if (!type) return;
        const requestId = ++widgetRequestId.current;

        if (!noteTypesToRender[type]) {
@@ -83,7 +68,7 @@ export default function NoteDetail() {
        } else {
            setActiveNoteType(type);
        }
-    }, [ note, viewScope, type, noteTypesToRender, hasTabBeenActive ]);
+    }, [ note, viewScope, type, noteTypesToRender ]);

    // Detect note type changes.
    useTriliumEvent("entitiesReloaded", async ({ loadResults }) => {
@@ -262,8 +247,9 @@ function NoteDetailWrapper({ Element, type, isVisible, isFullHeight, props }: {
    useEffect(() => {
        if (isVisible) {
            setCachedProps(props);
+        } else {
+            // Do nothing, keep the old props.
        }
-        // When not visible, keep the old props to avoid re-rendering in the background.
    }, [ props, isVisible ]);

    const typeMapping = TYPE_MAPPINGS[type];
@@ -274,7 +260,7 @@ function NoteDetailWrapper({ Element, type, isVisible, isFullHeight, props }: {
                height: isFullHeight ? "100%" : ""
            }}
        >
-            <Element {...cachedProps} />
+            { <Element {...cachedProps} /> }
        </div>
    );
 }
--- a/apps/client/src/widgets/NoteWrapper.bak
+++ b/apps/client/src/widgets/NoteWrapper.bak
@@ -11,12 +11,6 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {

    private noteContext?: NoteContext;

-    constructor() {
-        super("column");
-
-        this.css("flex-grow", "1").collapsible();
-    }
-
    setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
        this.noteContext = noteContext;

@@ -53,8 +47,6 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
            this.$widget.addClass("active");
        }

-        this.$widget.addClass("component note-split");
-
        const note = this.noteContext?.note;
        if (!note) {
            this.$widget.addClass("bgfx empty-note");
@@ -83,7 +75,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
            return true;
        }

-        if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/") || note.mime.startsWith("audio/"))) {
+        if (note.type === "file" && (note.mime === "application/pdf" || note.mime.startsWith("video/"))) {
            return true;
        }

@@ -108,7 +100,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
            return true;
        }

-        if (note.type === "file" && (MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime) || note.mime.startsWith("audio/"))) {
+        if (note.type === "file" && MIME_TYPES_WITH_BACKGROUND_EFFECTS.includes(note.mime)) {
            return true;
        }

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

 import { UpdateAttributeResponse } from "@triliumnext/commons";
 import clsx from "clsx";
-import { ComponentChild, createElement, HTMLInputTypeAttribute, InputHTMLAttributes, MouseEventHandler, TargetedEvent, TargetedInputEvent } from "preact";
+import { ComponentChild, HTMLInputTypeAttribute, InputHTMLAttributes, MouseEventHandler, TargetedEvent, TargetedInputEvent } from "preact";
 import { Dispatch, StateUpdater, useCallback, useEffect, useRef, useState } from "preact/hooks";

 import NoteContext from "../components/note_context";
@@ -36,7 +36,7 @@ interface CellProps {
    setCellToFocus(cell: Cell): void;
 }

-type OnChangeEventData = TargetedEvent<HTMLInputElement | HTMLTextAreaElement, Event> | InputEvent | JQuery.TriggeredEvent<HTMLInputElement, undefined, HTMLInputElement, HTMLInputElement>;
+type OnChangeEventData = TargetedEvent<HTMLInputElement, Event> | InputEvent | JQuery.TriggeredEvent<HTMLInputElement, undefined, HTMLInputElement, HTMLInputElement>;
 type OnChangeListener = (e: OnChangeEventData) => void | Promise<void>;

 export default function PromotedAttributes() {
@@ -171,9 +171,8 @@ function PromotedAttributeCell(props: CellProps) {
    );
 }

-const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute | undefined> = {
+const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute> = {
    text: "text",
-    textarea: undefined,
    number: "number",
    boolean: "checkbox",
    date: "date",
@@ -227,21 +226,20 @@ function LabelInput(props: CellProps & { inputId: string }) {
        }
    }

-
-    const inputNode = createElement(definition.labelType === "textarea" ? "textarea" : "input", {
-        className: "form-control promoted-attribute-input",
-        tabIndex: 200 + definitionAttr.position,
-        id: inputId,
-        type: LABEL_MAPPINGS[definition.labelType ?? "text"],
-        value: valueDraft,
-        checked: definition.labelType === "boolean" ? valueAttr.value === "true" : undefined,
-        placeholder: t("promoted_attributes.unset-field-placeholder"),
-        "data-attribute-id": valueAttr.attributeId,
-        "data-attribute-type": valueAttr.type,
-        "data-attribute-name": valueAttr.name,
-        onBlur: onChangeListener,
-        ...extraInputProps
-    });
+    const inputNode = <input
+        className="form-control promoted-attribute-input"
+        tabIndex={200 + definitionAttr.position}
+        id={inputId}
+        type={LABEL_MAPPINGS[definition.labelType ?? "text"]}
+        value={valueDraft}
+        checked={definition.labelType === "boolean" ? valueAttr.value === "true" : undefined}
+        placeholder={t("promoted_attributes.unset-field-placeholder")}
+        data-attribute-id={valueAttr.attributeId}
+        data-attribute-type={valueAttr.type}
+        data-attribute-name={valueAttr.name}
+        onBlur={onChangeListener}
+        {...extraInputProps}
+    />;

    if (definition.labelType === "boolean") {
        return <>
--- a/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
+++ b/apps/client/src/widgets/attribute_widgets/attribute_detail.ts
@@ -1,18 +1,18 @@
-import appContext from "../../components/app_context.js";
-import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
-import type { Attribute } from "../../services/attribute_parser.js";
-import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";
-import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
-import froca from "../../services/froca.js";
 import { t } from "../../services/i18n.js";
+import server from "../../services/server.js";
+import froca from "../../services/froca.js";
 import linkService from "../../services/link.js";
+import attributeAutocompleteService from "../../services/attribute_autocomplete.js";
 import noteAutocompleteService from "../../services/note_autocomplete.js";
 import promotedAttributeDefinitionParser from "../../services/promoted_attribute_definition_parser.js";
-import server from "../../services/server.js";
-import shortcutService from "../../services/shortcuts.js";
+import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import SpacedUpdate from "../../services/spaced_update.js";
 import utils from "../../services/utils.js";
-import NoteContextAwareWidget from "../note_context_aware_widget.js";
+import shortcutService from "../../services/shortcuts.js";
+import appContext from "../../components/app_context.js";
+import type { Attribute } from "../../services/attribute_parser.js";
+import { focusSavedElement, saveFocusedElement } from "../../services/focus.js";
+import { isExperimentalFeatureEnabled } from "../../services/experimental_features.js";

 const TPL = /*html*/`
 <div class="attr-detail tn-tool-dialog">
@@ -29,7 +29,6 @@ const TPL = /*html*/`
            max-height: 600px;
            overflow: auto;
            box-shadow: 10px 10px 93px -25px black;
-            contain: none;
        }

        .attr-help td {
@@ -138,7 +137,6 @@ const TPL = /*html*/`
            <td>
                <select class="attr-input-label-type form-control">
                  <option value="text">${t("attribute_detail.text")}</option>
-                  <option value="textarea">${t("attribute_detail.textarea")}</option>
                  <option value="number">${t("attribute_detail.number")}</option>
                  <option value="boolean">${t("attribute_detail.boolean")}</option>
                  <option value="date">${t("attribute_detail.date")}</option>
@@ -344,7 +342,6 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
    private $relatedNotesList!: JQuery<HTMLElement>;
    private $relatedNotesMoreNotes!: JQuery<HTMLElement>;
    private $attrHelp!: JQuery<HTMLElement>;
-    private $statusBar?: JQuery<HTMLElement>;

    private relatedNotesSpacedUpdate!: SpacedUpdate;
    private attribute!: Attribute;
@@ -579,24 +576,17 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
            return;
        }

-        if (isNewLayout) {
-            if (!this.$statusBar) {
-                this.$statusBar = $(document.body).find(".component.status-bar");
-            }
+        this.$widget
+            .css("left", detPosition.left)
+            .css("right", detPosition.right)
+            .css("top", y - offset.top + 70)
+            .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);

-            const statusBarHeight = this.$statusBar.outerHeight() ?? 0;
-            const maxHeight = document.body.clientHeight - statusBarHeight;
+        if (isNewLayout) {
            this.$widget
-                .css("left", offset.left + (typeof detPosition.left === "number" ? detPosition.left : 0))
                .css("top", "unset")
-                .css("bottom", statusBarHeight ?? 0)
-                .css("max-height", maxHeight);
-        } else {
-            this.$widget
-                .css("left", detPosition.left)
-                .css("right", detPosition.right)
-                .css("top", y - offset.top + 70)
-                .css("max-height", outerHeight + y > height - 50 ? height - y - 50 : 10000);
+                .css("bottom", 70)
+                .css("max-height", "80vh");
        }

        if (focus === "name") {
@@ -704,14 +694,14 @@ export default class AttributeDetailWidget extends NoteContextAwareWidget {
                return "label-definition";
            } else if (attribute.name.startsWith("relation:")) {
                return "relation-definition";
+            } else {
+                return "label";
            }
-            return "label";
-
        } else if (attribute.type === "relation") {
            return "relation";
+        } else {
+            this.$title.text("");
        }
-        this.$title.text("");
-
    }

    updateAttributeInEditor() {
--- a/apps/client/src/widgets/collections/board/api.ts
+++ b/apps/client/src/widgets/collections/board/api.ts
@@ -1,5 +1,5 @@
 import { BulkAction } from "@triliumnext/commons";
-
+import { BoardViewData } from ".";
 import appContext from "../../../components/app_context";
 import FNote from "../../../entities/fnote";
 import attributes from "../../../services/attributes";
@@ -9,7 +9,6 @@ import froca from "../../../services/froca";
 import { t } from "../../../services/i18n";
 import note_create from "../../../services/note_create";
 import server from "../../../services/server";
-import { BoardViewData } from ".";
 import { ColumnMap } from "./data";

 export default class BoardApi {
@@ -36,11 +35,13 @@ export default class BoardApi {

    async createNewItem(column: string, title: string) {
        try {
+            // Get the parent note path
+            const parentNotePath = this.parentNote.noteId;
+
            // Create a new note as a child of the parent note
-            const { note: newNote, branch: newBranch } = await note_create.createNote(this.parentNote.noteId, {
+            const { note: newNote, branch: newBranch } = await note_create.createNote(parentNotePath, {
                activate: false,
-                title,
-                isProtected: this.parentNote.isProtected
+                title
            });

            if (newNote && newBranch) {
@@ -86,7 +87,7 @@ export default class BoardApi {

        const action: BulkAction = this.isRelationMode
            ? { name: "deleteRelation", relationName: this.statusAttribute }
-            : { name: "deleteLabel", labelName: this.statusAttribute };
+            : { name: "deleteLabel", labelName: this.statusAttribute }
        await executeBulkActions(noteIds, [ action ]);
        this.viewConfig.columns = (this.viewConfig.columns ?? []).filter(col => col.value !== column);
        this.saveConfig(this.viewConfig);
@@ -98,7 +99,7 @@ export default class BoardApi {
        // Change the value in the notes.
        const action: BulkAction = this.isRelationMode
            ? { name: "updateRelationTarget", relationName: this.statusAttribute, targetNoteId: newValue }
-            : { name: "updateLabelValue", labelName: this.statusAttribute, labelValue: newValue };
+            : { name: "updateLabelValue", labelName: this.statusAttribute, labelValue: newValue }
        await executeBulkActions(noteIds, [ action ]);

        // Rename the column in the persisted data.
@@ -136,9 +137,9 @@ export default class BoardApi {
    }

    async insertRowAtPosition(
-        column: string,
-        relativeToBranchId: string,
-        direction: "before" | "after") {
+            column: string,
+            relativeToBranchId: string,
+            direction: "before" | "after") {
        const { note, branch } = await note_create.createNote(this.parentNote.noteId, {
            activate: false,
            targetBranchId: relativeToBranchId,
@@ -178,8 +179,9 @@ export default class BoardApi {
        if (!note) return;
        if (this.isRelationMode) {
            return attributes.removeOwnedRelationByName(note, this.statusAttribute);
+        } else {
+            return attributes.removeOwnedLabelByName(note, this.statusAttribute);
        }
-        return attributes.removeOwnedLabelByName(note, this.statusAttribute);
    }

    async moveWithinBoard(noteId: string, sourceBranchId: string, sourceIndex: number, targetIndex: number, sourceColumn: string, targetColumn: string) {
--- a/apps/client/src/widgets/collections/board/index.css
+++ b/apps/client/src/widgets/collections/board/index.css
@@ -14,7 +14,8 @@
  height: 100%;
  display: flex;
  gap: 1em;
-  padding: 4px var(--content-margin-inline);
+  margin-inline: var(--content-margin-inline);
+  padding-block: 4px;
  align-items: flex-start;
  overflow-x: auto;
 }
@@ -41,11 +42,7 @@ body.mobile .board-view-container {
 body.mobile .board-view-container .board-column {
  width: 75vw;
  max-width: 300px;
-}
-
-body.mobile .board-view-container .board-column,
-body.mobile .board-view-container .board-add-column {
-    scroll-snap-align: center;
+  scroll-snap-align: center;
 }

 .board-view-container .board-column.drag-over {
--- a/apps/client/src/widgets/collections/calendar/api.ts
+++ b/apps/client/src/widgets/collections/calendar/api.ts
@@ -1,8 +1,8 @@
-import { AttributeRow } from "@triliumnext/commons";
+import { AttributeRow, CreateChildrenResponse } from "@triliumnext/commons";

 import FNote from "../../../entities/fnote";
 import { setAttribute, setLabel } from "../../../services/attributes";
-import note_create from "../../../services/note_create";
+import server from "../../../services/server";

 interface NewEventOpts {
    title: string;
@@ -51,13 +51,11 @@ export async function newEvent(parentNote: FNote, { title, startDate, endDate, s
    }

    // Create the note.
-    await note_create.createNote(parentNote.noteId, {
+    await server.post<CreateChildrenResponse>(`notes/${parentNote.noteId}/children?target=into`, {
        title,
-        isProtected: parentNote.isProtected,
        content: "",
        type: "text",
-        attributes,
-        activate: false
+        attributes
    }, componentId);
 }

--- a/apps/client/src/widgets/collections/geomap/api.ts
+++ b/apps/client/src/widgets/collections/geomap/api.ts
@@ -1,11 +1,10 @@
 import type { LatLng, LeafletMouseEvent } from "leaflet";
-
-import FNote from "../../../entities/fnote";
+import { LOCATION_ATTRIBUTE } from ".";
 import attributes from "../../../services/attributes";
 import { prompt } from "../../../services/dialog";
+import server from "../../../services/server";
 import { t } from "../../../services/i18n";
-import note_create from "../../../services/note_create";
-import { LOCATION_ATTRIBUTE } from ".";
+import { CreateChildrenResponse } from "@triliumnext/commons";

 const CHILD_NOTE_ICON = "bx bx-pin";

@@ -14,20 +13,16 @@ export async function moveMarker(noteId: string, latLng: LatLng | null) {
    await attributes.setLabel(noteId, LOCATION_ATTRIBUTE, value);
 }

-export async function createNewNote(parentNote: FNote, e: LeafletMouseEvent) {
+export async function createNewNote(noteId: string, e: LeafletMouseEvent) {
    const title = await prompt({ message: t("relation_map.enter_title_of_new_note"), defaultValue: t("relation_map.default_new_note_title") });

    if (title?.trim()) {
-        await note_create.createNote(parentNote.noteId, {
+        const { note } = await server.post<CreateChildrenResponse>(`notes/${noteId}/children?target=into`, {
            title,
            content: "",
-            type: "text",
-            activate: false,
-            isProtected: parentNote.isProtected,
-            attributes: [
-                { type: "label", name: LOCATION_ATTRIBUTE, value: [e.latlng.lat, e.latlng.lng].join(",") },
-                { type: "label", name: "iconClass", value: CHILD_NOTE_ICON }
-            ]
+            type: "text"
        });
+        attributes.setLabel(note.noteId, "iconClass", CHILD_NOTE_ICON);
+        moveMarker(note.noteId, e.latlng);
    }
 }
--- a/apps/client/src/widgets/collections/geomap/context_menu.ts
+++ b/apps/client/src/widgets/collections/geomap/context_menu.ts
@@ -1,14 +1,12 @@
 import type { LatLng, LeafletMouseEvent } from "leaflet";
-
 import appContext, { type CommandMappings } from "../../../components/app_context.js";
-import FNote from "../../../entities/fnote.js";
 import contextMenu, { type MenuItem } from "../../../menus/context_menu.js";
-import NoteColorPicker from "../../../menus/custom-items/NoteColorPicker.jsx";
 import linkContextMenu from "../../../menus/link_context_menu.js";
-import { copyTextWithToast } from "../../../services/clipboard_ext.js";
+import NoteColorPicker from "../../../menus/custom-items/NoteColorPicker.jsx";
 import { t } from "../../../services/i18n.js";
-import link from "../../../services/link.js";
 import { createNewNote } from "./api.js";
+import { copyTextWithToast } from "../../../services/clipboard_ext.js";
+import link from "../../../services/link.js";

 export default function openContextMenu(noteId: string, e: LeafletMouseEvent, isEditable: boolean) {
    let items: MenuItem<keyof CommandMappings>[] = [
@@ -46,7 +44,7 @@ export default function openContextMenu(noteId: string, e: LeafletMouseEvent, is
    });
 }

-export function openMapContextMenu(note: FNote, e: LeafletMouseEvent, isEditable: boolean) {
+export function openMapContextMenu(noteId: string, e: LeafletMouseEvent, isEditable: boolean) {
    let items: MenuItem<keyof CommandMappings>[] = [
        ...buildGeoLocationItem(e)
    ];
@@ -57,10 +55,10 @@ export function openMapContextMenu(note: FNote, e: LeafletMouseEvent, isEditable
            { kind: "separator" },
            {
                title: t("geo-map-context.add-note"),
-                handler: () => createNewNote(note, e),
+                handler: () => createNewNote(noteId, e),
                uiIcon: "bx bx-plus"
            }
-        ];
+        ]
    }

    contextMenu.show({
--- a/apps/client/src/widgets/collections/geomap/index.tsx
+++ b/apps/client/src/widgets/collections/geomap/index.tsx
@@ -93,14 +93,14 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM
    const onClick = useCallback(async (e: LeafletMouseEvent) => {
        if (state === State.NewNote) {
            toast.closePersistent("geo-new-note");
-            await createNewNote(note, e);
+            await createNewNote(note.noteId, e);
            setState(State.Normal);
        }
-    }, [ note, state ]);
+    }, [ state ]);

    const onContextMenu = useCallback((e: LeafletMouseEvent) => {
-        openMapContextMenu(note, e, !isReadOnly);
-    }, [ note, isReadOnly ]);
+        openMapContextMenu(note.noteId, e, !isReadOnly);
+    }, [ note.noteId, isReadOnly ]);

    // Dragging
    const containerRef = useRef<HTMLDivElement>(null);
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -364,19 +364,23 @@
        mask-repeat: no-repeat;
        mask-size: 100% 100%;
    }
-
+    
    .ck-content p {
        margin-bottom: 0.5em;
        line-height: 1.3;
    }

+    .ck-content figure.image {
+        width: 25%;
+    }
+
    .ck-content .table {
        display: flex;
        flex-direction: column-reverse;
        overflow-x: scroll;
        --scrollbar-thickness: 0;
        scrollbar-width: none;
-
+        
        table {
            width: max-content;
            table-layout: auto;
@@ -431,4 +435,4 @@
    }
 }

-/* #endregion */
+/* #endregion */
--- a/apps/client/src/widgets/collections/presentation/index.tsx
+++ b/apps/client/src/widgets/collections/presentation/index.tsx
@@ -2,8 +2,8 @@ import "./index.css";

 import { RefObject } from "preact";
 import { useEffect, useLayoutEffect, useRef, useState } from "preact/hooks";
-import Reveal, { RevealApi } from "reveal.js";
-import slideBaseStylesheet from "reveal.js/reveal.css?raw";
+import Reveal from "reveal.js";
+import slideBaseStylesheet from "reveal.js/dist/reveal.css?raw";

 import { openInCurrentNoteContext } from "../../../components/note_context";
 import FNote from "../../../entities/fnote";
@@ -20,7 +20,7 @@ import { DEFAULT_THEME, loadPresentationTheme } from "./themes";
 export default function PresentationView({ note, noteIds, media, onReady, onProgressChanged }: ViewModeProps<{}>) {
    const [ presentation, setPresentation ] = useState<PresentationModel>();
    const containerRef = useRef<HTMLDivElement>(null);
-    const [ api, setApi ] = useState<RevealApi>();
+    const [ api, setApi ] = useState<Reveal.Api>();
    const stylesheets = usePresentationStylesheets(note, media);

    function refresh() {
@@ -98,7 +98,7 @@ function usePresentationStylesheets(note: FNote, media: ViewModeMedia) {
    return stylesheets;
 }

-function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivElement>, api: RevealApi | undefined }) {
+function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivElement>, api: Reveal.Api | undefined }) {
    const [ isOverviewActive, setIsOverviewActive ] = useState(false);
    useEffect(() => {
        if (!api) return;
@@ -144,9 +144,9 @@ function ButtonOverlay({ containerRef, api }: { containerRef: RefObject<HTMLDivE
    );
 }

-function Presentation({ presentation, setApi } : { presentation: PresentationModel, setApi: (api: RevealApi | undefined) => void }) {
+function Presentation({ presentation, setApi } : { presentation: PresentationModel, setApi: (api: Reveal.Api | undefined) => void }) {
    const containerRef = useRef<HTMLDivElement>(null);
-    const [revealApi, setRevealApi] = useState<RevealApi>();
+    const [revealApi, setRevealApi] = useState<Reveal.Api>();

    useEffect(() => {
        if (!containerRef.current) return;
@@ -222,7 +222,7 @@ function getNoteIdFromSlide(slide: HTMLElement | undefined) {
    return slide.dataset.noteId;
 }

-function rewireLinks(container: HTMLElement, api: RevealApi) {
+function rewireLinks(container: HTMLElement, api: Reveal.Api) {
    const links = container.querySelectorAll<HTMLLinkElement>("a.reference-link");
    for (const link of links) {
        link.addEventListener("click", () => {
--- a/apps/client/src/widgets/collections/presentation/themes.ts
+++ b/apps/client/src/widgets/collections/presentation/themes.ts
@@ -3,49 +3,49 @@ export const DEFAULT_THEME = "white";
 const themes = {
    black: {
        name: "Black",
-        loadTheme: () => import("reveal.js/theme/black.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/black.css?raw")
    },
    white: {
        name: "White",
-        loadTheme: () => import("reveal.js/theme/white.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/white.css?raw")
    },
    beige: {
        name: "Beige",
-        loadTheme: () => import("reveal.js/theme/beige.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/beige.css?raw")
    },
    serif: {
        name: "Serif",
-        loadTheme: () => import("reveal.js/theme/serif.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/serif.css?raw")
    },
    simple: {
        name: "Simple",
-        loadTheme: () => import("reveal.js/theme/simple.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/simple.css?raw")
    },
    solarized: {
        name: "Solarized",
-        loadTheme: () => import("reveal.js/theme/solarized.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/solarized.css?raw")
    },
    moon: {
        name: "Moon",
-        loadTheme: () => import("reveal.js/theme/moon.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/moon.css?raw")
    },
    dracula: {
        name: "Dracula",
-        loadTheme: () => import("reveal.js/theme/dracula.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/dracula.css?raw")
    },
    sky: {
        name: "Sky",
-        loadTheme: () => import("reveal.js/theme/sky.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/sky.css?raw")
    },
    blood: {
        name: "Blood",
-        loadTheme: () => import("reveal.js/theme/blood.css?raw")
+        loadTheme: () => import("reveal.js/dist/theme/blood.css?raw")
    }
 } as const;

 export function getPresentationThemes() {
    return Object.entries(themes).map(([ id, theme ]) => ({
-        id,
+        id: id,
        name: theme.name
    }));
 }
--- a/apps/client/src/widgets/collections/table/columns.tsx
+++ b/apps/client/src/widgets/collections/table/columns.tsx
@@ -19,13 +19,6 @@ const labelTypeMappings: Record<ColumnType, Partial<ColumnDefinition>> = {
    text: {
        editor: "input"
    },
-    textarea: {
-        editor: "textarea",
-        formatter: "textarea",
-        editorParams: {
-            shiftEnterSubmit: true
-        }
-    },
    boolean: {
        formatter: "tickCross",
        editor: "tickCross"
--- a/apps/client/src/widgets/collections/table/index.css
+++ b/apps/client/src/widgets/collections/table/index.css
@@ -75,9 +75,3 @@
    font-size: 1.5em;
    transform: translateY(-50%);
 }
-
-.tabulator .tabulator-editable {
-    textarea {
-        padding: 7px !important;
-    }
-}
--- a/apps/client/src/widgets/collections/table/index.tsx
+++ b/apps/client/src/widgets/collections/table/index.tsx
@@ -18,14 +18,14 @@ import useRowTableEditing from "./row_editing";
 import { TableData } from "./rows";
 import Tabulator from "./tabulator";

-export default function TableView({ note, noteIds, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
+export default function TableView({ note, noteIds, notePath, viewConfig, saveConfig }: ViewModeProps<TableConfig>) {
    const tabulatorRef = useRef<VanillaTabulator>(null);
    const parentComponent = useContext(ParentComponent);

    const [ attributeDetailWidgetEl, attributeDetailWidget ] = useLegacyWidget(() => new AttributeDetailWidget().contentSized());
    const contextMenuEvents = useContextMenu(note, parentComponent, tabulatorRef);
    const persistenceProps = usePersistence(viewConfig, saveConfig);
-    const rowEditingEvents = useRowTableEditing(tabulatorRef, attributeDetailWidget, note);
+    const rowEditingEvents = useRowTableEditing(tabulatorRef, attributeDetailWidget, notePath);
    const { newAttributePosition, resetNewAttributePosition } = useColTableEditing(tabulatorRef, attributeDetailWidget, note);
    const { columnDefs, rowData, movableRows, hasChildren } = useData(note, noteIds, viewConfig, newAttributePosition, resetNewAttributePosition);
    const dataTreeProps = useMemo<Options>(() => {
--- a/apps/client/src/widgets/collections/table/row_editing.ts
+++ b/apps/client/src/widgets/collections/table/row_editing.ts
@@ -1,27 +1,24 @@
-import { RefObject } from "preact";
 import { EventCallBackMethods, RowComponent, Tabulator } from "tabulator-tables";
-
 import { CommandListenerData } from "../../../components/app_context";
-import FNote from "../../../entities/fnote";
-import { setAttribute, setLabel } from "../../../services/attributes";
-import branches from "../../../services/branches";
-import froca from "../../../services/froca";
 import note_create, { CreateNoteOpts } from "../../../services/note_create";
-import server from "../../../services/server";
-import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";
 import { useLegacyImperativeHandlers } from "../../react/hooks";
+import { RefObject } from "preact";
+import { setAttribute, setLabel } from "../../../services/attributes";
+import froca from "../../../services/froca";
+import server from "../../../services/server";
+import branches from "../../../services/branches";
+import AttributeDetailWidget from "../../attribute_widgets/attribute_detail";

-export default function useRowTableEditing(api: RefObject<Tabulator>, attributeDetailWidget: AttributeDetailWidget, parentNote: FNote): Partial<EventCallBackMethods> {
+export default function useRowTableEditing(api: RefObject<Tabulator>, attributeDetailWidget: AttributeDetailWidget, parentNotePath: string): Partial<EventCallBackMethods> {
    // Adding new rows
    useLegacyImperativeHandlers({
        addNewRowCommand({ customOpts, parentNotePath: customNotePath }: CommandListenerData<"addNewRow">) {
-            const notePath = customNotePath ?? parentNote.noteId;
+            const notePath = customNotePath ?? parentNotePath;
            if (notePath) {
                const opts: CreateNoteOpts = {
                    activate: false,
-                    isProtected: parentNote.isProtected,
                    ...customOpts
-                };
+                }
                note_create.createNote(notePath, opts).then(({ branch }) => {
                    if (branch) {
                        setTimeout(() => {
@@ -29,7 +26,7 @@ export default function useRowTableEditing(api: RefObject<Tabulator>, attributeD
                            focusOnBranch(api.current, branch?.branchId);
                        }, 100);
                    }
-                });
+                })
            }
        }
    });
@@ -94,14 +91,14 @@ function focusOnBranch(api: Tabulator, branchId: string) {
 }

 function findRowDataById(rows: RowComponent[], branchId: string): RowComponent | null {
-    for (const row of rows) {
+    for (let row of rows) {
        const item = row.getIndex() as string;

        if (item === branchId) {
            return row;
        }

-        const found = findRowDataById(row.getTreeChildren(), branchId);
+        let found = findRowDataById(row.getTreeChildren(), branchId);
        if (found) return found;
    }
    return null;
--- a/apps/client/src/widgets/containers/ScrollingContainer.bak.ts
+++ b/apps/client/src/widgets/containers/ScrollingContainer.bak.ts
@@ -10,8 +10,6 @@ export default class ScrollingContainer extends Container<BasicWidget> {

    constructor() {
        super();
-
-        this.class("scrolling-container");
    }

    setNoteContextEvent({ noteContext }: EventData<"setNoteContext">) {
--- a/apps/client/src/widgets/containers/scrolling_container.css
+++ b/apps/client/src/widgets/containers/scrolling_container.css
@@ -4,6 +4,7 @@
    overflow: auto;
    scroll-behavior: smooth;
    position: relative;
+    flex-grow: 1;

    > .note-detail > .note-detail-editable-text > .note-detail-editable-text-editor,
    > .note-list-widget:not(.full-height) .note-list-wrapper {
--- a/apps/client/src/widgets/containers/ScrollingContainer.tsx
+++ b/apps/client/src/widgets/containers/ScrollingContainer.tsx
@@ -0,0 +1,9 @@
+import { ComponentChildren } from "preact";
+
+export default function ScrollingContainer({ children }: { children: ComponentChildren }) {
+    return (
+        <div className="scrolling-container">
+            {children}
+        </div>
+    );
+}
--- a/apps/client/src/widgets/containers/split_note_container.ts
+++ b/apps/client/src/widgets/containers/split_note_container.ts
@@ -1,9 +1,12 @@
+import { VNode } from "preact";
+
 import appContext, { type CommandData, type CommandListenerData, type EventData, type EventNames, type NoteSwitchedContext } from "../../components/app_context.js";
 import Component from "../../components/component.js";
 import NoteContext from "../../components/note_context.js";
 import splitService from "../../services/resizer.js";
 import { isMobile } from "../../services/utils.js";
 import type BasicWidget from "../basic_widget.js";
+import { wrapReactWidgets } from "../basic_widget.js";
 import NoteContextAwareWidget from "../note_context_aware_widget.js";
 import FlexContainer from "./flex_container.js";

@@ -12,7 +15,7 @@ interface SplitNoteWidget extends BasicWidget {
    ntxId?: string;
 }

-type WidgetFactory = () => SplitNoteWidget;
+type WidgetFactory = () => (SplitNoteWidget | VNode);

 export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {

@@ -31,7 +34,7 @@ export default class SplitNoteContainer extends FlexContainer<SplitNoteWidget> {
    }

    async newNoteContextCreatedEvent({ noteContext }: EventData<"newNoteContextCreated">) {
-        const widget = this.widgetFactory();
+        const widget = wrapReactWidgets([ this.widgetFactory() ])[0];

        const $renderedWidget = widget.render();

--- a/apps/client/src/widgets/dialogs/revisions.tsx
+++ b/apps/client/src/widgets/dialogs/revisions.tsx
@@ -272,8 +272,7 @@ function RevisionContent({ noteContent, revisionItem, fullRevision, showDiff }:
            return <FilePreview fullRevision={fullRevision} revisionItem={revisionItem} />;
        case "canvas":
        case "mindMap":
-        case "mermaid":
-        case "spreadsheet": {
+        case "mermaid": {
            const encodedTitle = encodeURIComponent(revisionItem.title);
            return <img
                src={`api/revisions/${revisionItem.revisionId}/image/${encodedTitle}?${Math.random()}`}
--- a/apps/client/src/widgets/layout/NoteBadges.css
+++ b/apps/client/src/widgets/layout/NoteBadges.css
@@ -36,10 +36,6 @@
                animation: fadeOut 250ms ease-in 5s forwards;
                pointer-events: none;
            }
-
-            body#trilium-app.motion-disabled &.saved {
-                animation: fadeOut 0s 5s forwards !important;
-            }
        }
        &.active-content-badge { --color: var(--badge-active-content-background-color); }
        &.active-content-badge.disabled {
--- a/apps/client/src/widgets/layout/NoteContentSwitcher.css
+++ b/apps/client/src/widgets/layout/NoteContentSwitcher.css
@@ -1,19 +0,0 @@
-.note-content-switcher {
-    --badge-radius: 12px;
-    position: relative;
-    display: flex;
-    min-height: 35px;
-    gap: 5px;
-    padding: 5px;
-    flex-wrap: wrap;
-    flex-shrink: 0;
-    font-size: 0.9rem;
-    align-items: center;
-
-    .ext-badge {
-        --color: var(--input-background-color);
-        color: var(--main-text-color);
-        font-size: 1em;
-        flex-shrink: 0;
-    }
-}
--- a/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
+++ b/apps/client/src/widgets/layout/NoteContentSwitcher.tsx
@@ -1,39 +0,0 @@
-import "./NoteContentSwitcher.css";
-
-import FNote from "../../entities/fnote";
-import server from "../../services/server";
-import { Badge } from "../react/Badge";
-import { useNoteSavedData } from "../react/hooks";
-
-export interface NoteContentTemplate {
-    name: string;
-    content: string;
-}
-
-interface NoteContentSwitcherProps {
-    text: string;
-    note: FNote;
-    templates: NoteContentTemplate[];
-}
-
-export default function NoteContentSwitcher({ text, note, templates }: NoteContentSwitcherProps) {
-    const blob = useNoteSavedData(note?.noteId);
-
-    return (blob?.trim().length === 0 &&
-        <div className="note-content-switcher">
-            {text}{" "}
-
-            {templates.map(sample => (
-                <Badge
-                    key={sample.name}
-                    text={sample.name}
-                    onClick={async () => {
-                        await server.put(`notes/${note.noteId}/data`, {
-                            content: sample.content
-                        });
-                    }}
-                />
-            ))}
-        </div>
-    );
-}
--- a/apps/client/src/widgets/note_types.tsx
+++ b/apps/client/src/widgets/note_types.tsx
@@ -84,7 +84,7 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
        printable: true
    },
    mermaid: {
-        view: () => import("./type_widgets/mermaid/Mermaid"),
+        view: () => import("./type_widgets/Mermaid"),
        className: "note-detail-mermaid",
        printable: true,
        isFullHeight: true
@@ -143,7 +143,7 @@ export const TYPE_MAPPINGS: Record<ExtendedNoteType, NoteTypeMapping> = {
        isFullHeight: true
    },
    spreadsheet: {
-        view: () => import("./type_widgets/spreadsheet/Spreadsheet"),
+        view: () => import("./type_widgets/Spreadsheet"),
        className: "note-detail-spreadsheet",
        printable: true,
        isFullHeight: true
--- a/apps/client/src/widgets/react/NoItems.css
+++ b/apps/client/src/widgets/react/NoItems.css
@@ -8,7 +8,6 @@
    color: var(--muted-text-color);
    height: 100%;
    text-align: center;
-    white-space: pre-line;

    .tn-icon {
        font-size: 4em;
--- a/apps/client/src/widgets/react/hooks.tsx
+++ b/apps/client/src/widgets/react/hooks.tsx
@@ -98,7 +98,6 @@ export interface SavedData {
        mime: string;
        content: string;
        position: number;
-        encoding?: "base64";
    }[];
 }

--- a/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx
+++ b/apps/client/src/widgets/ribbon/InheritedAttributesTab.tsx
@@ -1,4 +1,3 @@
-import { createPortal } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";

 import FAttribute from "../../entities/fattribute";
@@ -75,7 +74,7 @@ export default function InheritedAttributesTab({ note, componentId, emptyListStr
                )}
            </div>

-            {createPortal(attributeDetailWidgetEl, document.body)}
+            {attributeDetailWidgetEl}
        </div>
    );
 }
--- a/apps/client/src/widgets/ribbon/NoteActions.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActions.tsx
@@ -75,7 +75,7 @@ export function NoteContextMenu({ note, noteContext, itemsAtStart, itemsNearNote
    const noteType = useNoteProperty(note, "type") ?? "";
    const [viewType] = useNoteLabel(note, "viewType");
    const canBeConvertedToAttachment = note?.isEligibleForConversionToAttachment();
-    const isSearchable = ["text", "code", "book", "mindMap", "doc", "spreadsheet"].includes(noteType);
+    const isSearchable = ["text", "code", "book", "mindMap", "doc"].includes(noteType);
    const isInOptionsOrHelp = note?.noteId.startsWith("_options") || note?.noteId.startsWith("_help");
    const isExportableToImage = ["mermaid", "mindMap"].includes(noteType);
    const isContentAvailable = note.isContentAvailable();
--- a/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
+++ b/apps/client/src/widgets/ribbon/NoteActionsCustom.tsx
@@ -189,7 +189,7 @@ function SwitchSplitOrientationButton({ note, isReadOnly, isDefaultViewMode }: N
 export function ToggleReadOnlyButton({ note, isDefaultViewMode }: NoteActionsCustomInnerProps) {
    const [ isReadOnly, setReadOnly ] = useNoteLabelBoolean(note, "readOnly");
    const isSavedSqlite = note.isTriliumSqlite() && !note.isHiddenCompletely();
-    const isEnabled = ([ "mermaid", "mindMap", "canvas", "spreadsheet" ].includes(note.type) || isSavedSqlite)
+    const isEnabled = ([ "mermaid", "mindMap", "canvas" ].includes(note.type) || isSavedSqlite)
            && note.isContentAvailable() && isDefaultViewMode;

    return isEnabled && <NoteAction
--- a/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
+++ b/apps/client/src/widgets/ribbon/components/AttributeEditor.tsx
@@ -1,6 +1,5 @@
 import { AttributeEditor as CKEditorAttributeEditor, MentionFeed, ModelElement, ModelNode, ModelPosition } from "@triliumnext/ckeditor5";
 import { AttributeType } from "@triliumnext/commons";
-import { createPortal } from "preact/compat";
 import { MutableRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from "preact/hooks";

 import type { CommandData, FilteredCommandNames } from "../../../components/app_context";
@@ -337,8 +336,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                                let matchedAttr: Attribute | null = null;

                                for (const attr of parsedAttrs) {
-                                    if (attr.startIndex !== undefined && clickIndex > attr.startIndex &&
-                                        attr.endIndex !== undefined && clickIndex <= attr.endIndex) {
+                                    if (attr.startIndex && clickIndex > attr.startIndex && attr.endIndex && clickIndex <= attr.endIndex) {
                                        matchedAttr = attr;
                                        break;
                                    }
@@ -409,7 +407,7 @@ export default function AttributeEditor({ api, note, componentId, notePath, ntxI
                )}
            </div>}

-            {createPortal(attributeDetailWidgetEl, document.body)}
+            {attributeDetailWidgetEl}
        </>
    );
 }
--- a/apps/client/src/widgets/sidebar/TableOfContents.tsx
+++ b/apps/client/src/widgets/sidebar/TableOfContents.tsx
@@ -1,6 +1,6 @@
 import "./TableOfContents.css";

-import { attributeChangeAffectsHeading, CKTextEditor, ModelElement } from "@triliumnext/ckeditor5";
+import { CKTextEditor, ModelElement } from "@triliumnext/ckeditor5";
 import clsx from "clsx";
 import { useCallback, useEffect, useRef, useState } from "preact/hooks";

@@ -170,14 +170,11 @@ function EditableTextTableOfContents() {

            const affectsHeadings = changes.some( change => {
                return (
-                    change.type === 'insert' || change.type === 'remove' ||
-                    (change.type === 'attribute' && attributeChangeAffectsHeading(change, textEditor))
+                    change.type === 'insert' || change.type === 'remove' || (change.type === 'attribute' && change.attributeKey === 'headingLevel')
                );
            });
            if (affectsHeadings) {
-                requestAnimationFrame(() => {
-                    setHeadings(extractTocFromTextEditor(textEditor));
-                });
+                setHeadings(extractTocFromTextEditor(textEditor));
            }
        };

--- a/apps/client/src/widgets/type_widgets/File.css
+++ b/apps/client/src/widgets/type_widgets/File.css
@@ -24,7 +24,8 @@
    margin: 10px;
 }

-.note-detail-file > .pdf-preview {
+.note-detail-file > .pdf-preview,
+.note-detail-file > .video-preview {
    width: 100%;
    height: 100%;
    flex-grow: 100;
@@ -37,4 +38,4 @@
    right: 15px;
    width: calc(100% - 30px);
    transform: translateY(-50%);
-}
+}
--- a/apps/client/src/widgets/type_widgets/File.tsx
+++ b/apps/client/src/widgets/type_widgets/File.tsx
@@ -1,11 +1,11 @@
 import "./File.css";

+import FNote from "../../entities/fnote";
 import { t } from "../../services/i18n";
+import { getUrlForDownload } from "../../services/open";
 import Alert from "../react/Alert";
 import { useNoteBlob } from "../react/hooks";
-import AudioPreview from "./file/Audio";
 import PdfPreview from "./file/Pdf";
-import VideoPreview from "./file/Video";
 import { TypeWidgetProps } from "./type_widget";

 const TEXT_MAX_NUM_CHARS = 5000;
@@ -42,6 +42,27 @@ function TextPreview({ content }: { content: string }) {
    );
 }

+function VideoPreview({ note }: { note: FNote }) {
+    return (
+        <video
+            class="video-preview"
+            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+            datatype={note?.mime}
+            controls
+        />
+    );
+}
+
+function AudioPreview({ note }: { note: FNote }) {
+    return (
+        <audio
+            class="audio-preview"
+            src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
+            controls
+        />
+    );
+}
+
 function NoPreview() {
    return (
        <Alert className="file-preview-not-available" type="info">
--- a/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx
+++ b/apps/client/src/widgets/type_widgets/mermaid/Mermaid.tsx
@@ -1,11 +1,7 @@
 import { useCallback } from "preact/hooks";
-
-import { t } from "../../../services/i18n";
-import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../../services/mermaid";
-import NoteContentSwitcher from "../../layout/NoteContentSwitcher";
-import SvgSplitEditor from "../helpers/SvgSplitEditor";
-import { TypeWidgetProps } from "../type_widget";
-import SAMPLE_DIAGRAMS from "./sample_diagrams";
+import SvgSplitEditor from "./helpers/SvgSplitEditor";
+import { TypeWidgetProps } from "./type_widget";
+import { getMermaidConfig, loadElkIfNeeded, postprocessMermaidSvg } from "../../services/mermaid";

 let idCounter = 1;
 let registeredErrorReporter = false;
@@ -19,10 +15,6 @@ export default function Mermaid(props: TypeWidgetProps) {
            registeredErrorReporter = true;
        }

-        if (!content.trim()) {
-            return "";
-        }
-
        mermaid.initialize({
            startOnLoad: false,
            ...(getMermaidConfig() as any),
@@ -38,12 +30,6 @@ export default function Mermaid(props: TypeWidgetProps) {
            attachmentName="mermaid-export"
            renderSvg={renderSvg}
            noteType="mermaid"
-            extraContent={(
-                <NoteContentSwitcher
-                    text={t("mermaid.sample_diagrams")}
-                    note={props.note}
-                    templates={SAMPLE_DIAGRAMS} />
-            )}
            {...props}
        />
    );
--- a/apps/client/src/widgets/type_widgets/MindMap.tsx
+++ b/apps/client/src/widgets/type_widgets/MindMap.tsx
@@ -6,7 +6,7 @@ import "./MindMap.css";
 import nodeMenu from "@mind-elixir/node-menu";
 import { DISPLAYABLE_LOCALE_IDS } from "@triliumnext/commons";
 import { snapdom } from "@zumer/snapdom";
-import { DARK_THEME, default as VanillaMindElixir, MindElixirData, MindElixirInstance, Operation, Options, THEME as LIGHT_THEME } from "mind-elixir";
+import { default as VanillaMindElixir,MindElixirData, MindElixirInstance, Operation, Options, THEME as LIGHT_THEME, DARK_THEME } from "mind-elixir";
 import { HTMLAttributes, RefObject } from "preact";
 import { useCallback, useEffect, useRef } from "preact/hooks";

@@ -154,7 +154,6 @@ function MindElixir({ containerRef: externalContainerRef, containerProps, apiRef
    const apiRef = useRef<MindElixirInstance>(null);
    const [ locale ] = useTriliumOption("locale");
    const colorScheme = useColorScheme();
-    const defaultColorScheme = useRef(colorScheme);

    function reinitialize() {
        if (!containerRef.current) return;
@@ -163,7 +162,7 @@ function MindElixir({ containerRef: externalContainerRef, containerProps, apiRef
            el: containerRef.current,
            locale: LOCALE_MAPPINGS[locale as DISPLAYABLE_LOCALE_IDS] ?? undefined,
            editable,
-            theme: defaultColorScheme.current === "dark" ? DARK_THEME : LIGHT_THEME
+            theme: LIGHT_THEME
        });

        if (editable) {
@@ -189,11 +188,7 @@ function MindElixir({ containerRef: externalContainerRef, containerProps, apiRef
        if (!apiRef.current) return;
        const newTheme = colorScheme === "dark" ? DARK_THEME : LIGHT_THEME;
        if (apiRef.current.theme === newTheme) return; // Avoid unnecessary theme changes, which can be expensive to render.
-        try {
-            apiRef.current.changeTheme(newTheme);
-        } catch (e) {
-            console.warn("Failed to change mind map theme:", e);
-        }
+        apiRef.current.changeTheme(newTheme);
    }, [ colorScheme ]);

    useEffect(() => {
--- a/apps/client/src/widgets/type_widgets/spreadsheet/Spreadsheet.css
+++ b/apps/client/src/widgets/type_widgets/spreadsheet/Spreadsheet.css
--- a/apps/client/src/widgets/type_widgets/Spreadsheet.tsx
+++ b/apps/client/src/widgets/type_widgets/Spreadsheet.tsx
@@ -0,0 +1,125 @@
+import "@univerjs/preset-sheets-core/lib/index.css";
+import "./Spreadsheet.css";
+
+import { UniverSheetsCorePreset } from '@univerjs/preset-sheets-core';
+import UniverPresetSheetsCoreEnUS from '@univerjs/preset-sheets-core/locales/en-US';
+import { CommandType, createUniver, FUniver, IDisposable, IWorkbookData, LocaleType, mergeLocales } from '@univerjs/presets';
+import { MutableRef, useEffect, useRef } from "preact/hooks";
+
+import NoteContext from "../../components/note_context";
+import FNote from "../../entities/fnote";
+import { useColorScheme, useEditorSpacedUpdate } from "../react/hooks";
+import { TypeWidgetProps } from "./type_widget";
+
+interface PersistedData {
+    version: number;
+    workbook: Parameters<FUniver["createWorkbook"]>[0];
+}
+
+export default function Spreadsheet({ note, noteContext }: TypeWidgetProps) {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const apiRef = useRef<FUniver>();
+
+    useInitializeSpreadsheet(containerRef, apiRef);
+    useDarkMode(apiRef);
+    usePersistence(note, noteContext, apiRef);
+
+    return <div ref={containerRef} className="spreadsheet" />;
+}
+
+function useInitializeSpreadsheet(containerRef: MutableRef<HTMLDivElement | null>, apiRef: MutableRef<FUniver | undefined>) {
+    useEffect(() => {
+        if (!containerRef.current) return;
+
+        const { univerAPI } = createUniver({
+            locale: LocaleType.EN_US,
+            locales: {
+                [LocaleType.EN_US]: mergeLocales(
+                    UniverPresetSheetsCoreEnUS
+                ),
+            },
+            presets: [
+                UniverSheetsCorePreset({
+                    container: containerRef.current,
+                })
+            ]
+        });
+        apiRef.current = univerAPI;
+        return () => univerAPI.dispose();
+    }, [ apiRef, containerRef ]);
+}
+
+function useDarkMode(apiRef: MutableRef<FUniver | undefined>) {
+    const colorScheme = useColorScheme();
+
+    // React to dark mode.
+    useEffect(() => {
+        const univerAPI = apiRef.current;
+        if (!univerAPI) return;
+        univerAPI.toggleDarkMode(colorScheme === 'dark');
+    }, [ colorScheme, apiRef ]);
+}
+
+function usePersistence(note: FNote, noteContext: NoteContext | null | undefined, apiRef: MutableRef<FUniver | undefined>) {
+    const changeListener = useRef<IDisposable>(null);
+
+    const spacedUpdate = useEditorSpacedUpdate({
+        noteType: "spreadsheet",
+        note,
+        noteContext,
+        getData() {
+            const univerAPI = apiRef.current;
+            if (!univerAPI) return undefined;
+            const workbook = univerAPI.getActiveWorkbook();
+            if (!workbook) return undefined;
+            const content = {
+                version: 1,
+                workbook: workbook.save()
+            };
+            return {
+                content: JSON.stringify(content)
+            };
+        },
+        onContentChange(newContent) {
+            const univerAPI = apiRef.current;
+            if (!univerAPI) return undefined;
+
+            // Dispose the existing workbook.
+            const existingWorkbook = univerAPI.getActiveWorkbook();
+            if (existingWorkbook) {
+                univerAPI.disposeUnit(existingWorkbook.getId());
+            }
+
+            let workbookData: Partial<IWorkbookData> = {};
+            if (newContent) {
+                try {
+                    const parsedContent = JSON.parse(newContent) as unknown;
+                    if (parsedContent && typeof parsedContent === "object" && "workbook" in parsedContent) {
+                        const persistedData = parsedContent as PersistedData;
+                        workbookData = persistedData.workbook;
+                    }
+                } catch (e) {
+                    console.error("Failed to parse spreadsheet content", e);
+                }
+            }
+
+            const workbook = univerAPI.createWorkbook(workbookData);
+            if (changeListener.current) {
+                changeListener.current.dispose();
+            }
+            changeListener.current = workbook.onCommandExecuted(command => {
+                if (command.type !== CommandType.MUTATION) return;
+                spacedUpdate.scheduleUpdate();
+            });
+        },
+    });
+
+    useEffect(() => {
+        return () => {
+            if (changeListener.current) {
+                changeListener.current.dispose();
+                changeListener.current = null;
+            }
+        };
+    }, []);
+}
--- a/apps/client/src/widgets/type_widgets/code/Code.tsx
+++ b/apps/client/src/widgets/type_widgets/code/Code.tsx
@@ -30,7 +30,6 @@ export interface EditableCodeProps extends TypeWidgetProps, Omit<CodeEditorProps
    onContentChanged?: (content: string) => void;
    /** Invoked after the content of the note has been uploaded to the server, using a spaced update. */
    dataSaved?: () => void;
-    placeholder?: string;
 }

 export function ReadOnlyCode({ note, viewScope, ntxId, parentComponent }: TypeWidgetProps) {
@@ -75,7 +74,7 @@ function formatViewSource(note: FNote, content: string) {
    return content;
 }

-export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, noteType = "code", onContentChanged, dataSaved, placeholder, ...editorProps }: EditableCodeProps) {
+export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentComponent, updateInterval, noteType = "code", onContentChanged, dataSaved, ...editorProps }: EditableCodeProps) {
    const editorRef = useRef<VanillaCodeMirror>(null);
    const containerRef = useRef<HTMLPreElement>(null);
    const [ vimKeymapEnabled ] = useTriliumOptionBool("vimKeymapEnabled");
@@ -116,7 +115,7 @@ export function EditableCode({ note, ntxId, noteContext, debounceUpdate, parentC
                editorRef={editorRef} containerRef={containerRef}
                mime={mime ?? "text/plain"}
                className="note-detail-code-editor"
-                placeholder={placeholder ?? t("editable_code.placeholder")}
+                placeholder={t("editable_code.placeholder")}
                vimKeybindings={vimKeymapEnabled}
                tabIndex={300}
                onContentChanged={() => {
--- a/apps/client/src/widgets/type_widgets/file/Audio.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Audio.tsx
@@ -1,112 +0,0 @@
-import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
-
-import FNote from "../../../entities/fnote";
-import { t } from "../../../services/i18n";
-import { getUrlForDownload } from "../../../services/open";
-import Icon from "../../react/Icon";
-import NoItems from "../../react/NoItems";
-import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
-
-export default function AudioPreview({ note }: { note: FNote }) {
-    const wrapperRef = useRef<HTMLDivElement>(null);
-    const audioRef = useRef<HTMLAudioElement>(null);
-    const [playing, setPlaying] = useState(false);
-    const [error, setError] = useState(false);
-    const togglePlayback = useCallback(() => {
-        const audio = audioRef.current;
-        if (!audio) return;
-        if (audio.paused) {
-            audio.play();
-        } else {
-            audio.pause();
-        }
-    }, []);
-    const onKeyDown = useKeyboardShortcuts(audioRef, togglePlayback);
-
-    useEffect(() => setError(false), [note.noteId]);
-    const onError = useCallback(() => setError(true), []);
-
-    if (error) {
-        return <NoItems icon="bx bx-volume-mute" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
-    }
-
-    return (
-        <div ref={wrapperRef} className="audio-preview-wrapper" onKeyDown={onKeyDown} tabIndex={0}>
-            <audio
-                class="audio-preview"
-                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-                ref={audioRef}
-                onPlay={() => setPlaying(true)}
-                onPause={() => setPlaying(false)}
-                onError={onError}
-            />
-            <div className="audio-preview-icon-wrapper">
-                <Icon icon="bx bx-music" className="audio-preview-icon" />
-            </div>
-            <div className="media-preview-controls">
-                <SeekBar mediaRef={audioRef} />
-
-                <div class="media-buttons-row">
-                    <div className="left">
-                        <PlaybackSpeed mediaRef={audioRef} />
-                    </div>
-
-                    <div className="center">
-                        <div className="spacer" />
-                        <SkipButton mediaRef={audioRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
-                        <PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
-                        <SkipButton mediaRef={audioRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
-                        <LoopButton mediaRef={audioRef} />
-                    </div>
-
-                    <div className="right">
-                        <VolumeControl mediaRef={audioRef} />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-function useKeyboardShortcuts(audioRef: MutableRef<HTMLAudioElement | null>, togglePlayback: () => void) {
-    return useCallback((e: KeyboardEvent) => {
-        const audio = audioRef.current;
-        if (!audio) return;
-
-        switch (e.key) {
-            case " ":
-                e.preventDefault();
-                togglePlayback();
-                break;
-            case "ArrowLeft":
-                e.preventDefault();
-                audio.currentTime = Math.max(0, audio.currentTime - (e.ctrlKey ? 60 : 10));
-                break;
-            case "ArrowRight":
-                e.preventDefault();
-                audio.currentTime = Math.min(audio.duration, audio.currentTime + (e.ctrlKey ? 60 : 10));
-                break;
-            case "m":
-            case "M":
-                e.preventDefault();
-                audio.muted = !audio.muted;
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                audio.volume = Math.min(1, audio.volume + 0.05);
-                break;
-            case "ArrowDown":
-                e.preventDefault();
-                audio.volume = Math.max(0, audio.volume - 0.05);
-                break;
-            case "Home":
-                e.preventDefault();
-                audio.currentTime = 0;
-                break;
-            case "End":
-                e.preventDefault();
-                audio.currentTime = audio.duration;
-                break;
-        }
-    }, [ audioRef, togglePlayback ]);
-}
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.css
@@ -1,98 +0,0 @@
-.media-preview-controls {
-    padding: 1.25em;
-    display: flex;
-    flex-direction: column;
-    gap: 0.5em;
-
-    .media-buttons-row {
-        display: flex;
-
-        > * {
-            flex: 1;
-            align-items: center;
-            gap: 0.5em;
-            display: flex;
-        }
-
-        .spacer {
-            width: var(--icon-button-size, 32px);
-            height: var(--icon-button-size, 32px);
-        }
-
-        .center {
-            justify-content: center;
-        }
-
-        .right {
-            display: flex;
-            justify-content: flex-end;
-        }
-
-        .play-button {
-            --icon-button-size: 48px;
-        }
-    }
-
-    .media-seekbar-row {
-        display: flex;
-        align-items: center;
-        gap: 0.5em;
-
-        .media-time {
-            font-size: 0.85em;
-            font-variant-numeric: tabular-nums;
-            white-space: nowrap;
-        }
-
-        .media-trackbar {
-            flex: 1;
-            cursor: pointer;
-        }
-    }
-
-    .media-volume-row {
-        display: flex;
-        align-items: center;
-        gap: 0.25em;
-
-        .media-volume-slider {
-            width: 80px;
-            cursor: pointer;
-        }
-    }
-
-    .speed-dropdown {
-        position: relative;
-
-        .tn-icon {
-            transform: translateY(-10%);
-        }
-
-        .media-speed-label {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            transform: translateY(15%);
-            text-align: center;
-            font-size: 0.6rem;
-            font-variant-numeric: tabular-nums;
-        }
-    }
-}
-
-.audio-preview-wrapper {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    .audio-preview-icon-wrapper {
-        flex-grow: 1;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 8em;
-        opacity: 0.6;
-    }
-}
--- a/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/MediaPlayer.tsx
@@ -1,220 +0,0 @@
-import "./MediaPlayer.css";
-
-import { RefObject } from "preact";
-import { useEffect, useState } from "preact/hooks";
-
-import { t } from "../../../services/i18n";
-import ActionButton from "../../react/ActionButton";
-import Dropdown from "../../react/Dropdown";
-import Icon from "../../react/Icon";
-
-export function SeekBar({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
-    const [currentTime, setCurrentTime] = useState(0);
-    const [duration, setDuration] = useState(0);
-
-    useEffect(() => {
-        const media = mediaRef.current;
-        if (!media) return;
-
-        const onTimeUpdate = () => setCurrentTime(media.currentTime);
-        const onDurationChange = () => setDuration(media.duration);
-
-        media.addEventListener("timeupdate", onTimeUpdate);
-        media.addEventListener("durationchange", onDurationChange);
-        return () => {
-            media.removeEventListener("timeupdate", onTimeUpdate);
-            media.removeEventListener("durationchange", onDurationChange);
-        };
-    }, [ mediaRef ]);
-
-    const onSeek = (e: Event) => {
-        const media = mediaRef.current;
-        if (!media) return;
-        media.currentTime = parseFloat((e.target as HTMLInputElement).value);
-    };
-
-    return (
-        <div class="media-seekbar-row">
-            <span class="media-time">{formatTime(currentTime)}</span>
-            <input
-                type="range"
-                class="media-trackbar"
-                min={0}
-                max={duration || 0}
-                step={0.1}
-                value={currentTime}
-                onInput={onSeek}
-            />
-            <span class="media-time">-{formatTime(Math.max(0, duration - currentTime))}</span>
-        </div>
-    );
-}
-
-function formatTime(seconds: number): string {
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs.toString().padStart(2, "0")}`;
-}
-
-export function PlayPauseButton({ playing, togglePlayback }: {    
-    playing: boolean,
-    togglePlayback: () => void
-}) {
-    return (
-        <ActionButton
-            className="play-button"
-            icon={playing ? "bx bx-pause" : "bx bx-play"}
-            text={playing ? t("media.pause") : t("media.play")}
-            onClick={togglePlayback}
-        />
-    );
-}
-
-export function VolumeControl({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
-    const [volume, setVolume] = useState(() => mediaRef.current?.volume ?? 1);
-    const [muted, setMuted] = useState(() => mediaRef.current?.muted ?? false);
-
-    // Sync state when the media element changes volume externally.
-    useEffect(() => {
-        const media = mediaRef.current;
-        if (!media) return;
-
-        setVolume(media.volume);
-        setMuted(media.muted);
-
-        const onVolumeChange = () => {
-            setVolume(media.volume);
-            setMuted(media.muted);
-        };
-        media.addEventListener("volumechange", onVolumeChange);
-        return () => media.removeEventListener("volumechange", onVolumeChange);
-    }, [ mediaRef ]);
-
-    const onVolumeChange = (e: Event) => {
-        const media = mediaRef.current;
-        if (!media) return;
-        const val = parseFloat((e.target as HTMLInputElement).value);
-        media.volume = val;
-        setVolume(val);
-        if (val > 0 && media.muted) {
-            media.muted = false;
-            setMuted(false);
-        }
-    };
-
-    const toggleMute = () => {
-        const media = mediaRef.current;
-        if (!media) return;
-        media.muted = !media.muted;
-        setMuted(media.muted);
-    };
-
-    return (
-        <div class="media-volume-row">
-            <ActionButton
-                icon={muted || volume === 0 ? "bx bx-volume-mute" : volume < 0.5 ? "bx bx-volume-low" : "bx bx-volume-full"}
-                text={muted ? t("media.unmute") : t("media.mute")}
-                onClick={toggleMute}
-            />
-            <input
-                type="range"
-                class="media-volume-slider"
-                min={0}
-                max={1}
-                step={0.05}
-                value={muted ? 0 : volume}
-                onInput={onVolumeChange}
-            />
-        </div>
-    );
-}
-
-export function SkipButton({ mediaRef, seconds, icon, text }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>, seconds: number, icon: string, text: string }) {
-    const skip = () => {
-        const media = mediaRef.current;
-        if (!media) return;
-        media.currentTime = Math.max(0, Math.min(media.duration, media.currentTime + seconds));
-    };
-
-    return (
-        <ActionButton icon={icon} text={text} onClick={skip} />
-    );
-}
-
-export function LoopButton({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
-    const [loop, setLoop] = useState(() => mediaRef.current?.loop ?? false);
-
-    useEffect(() => {
-        const media = mediaRef.current;
-        if (!media) return;
-        setLoop(media.loop);
-
-        const observer = new MutationObserver(() => setLoop(media.loop));
-        observer.observe(media, { attributes: true, attributeFilter: ["loop"] });
-        return () => observer.disconnect();
-    }, [ mediaRef ]);
-
-    const toggle = () => {
-        const media = mediaRef.current;
-        if (!media) return;
-        media.loop = !media.loop;
-        setLoop(media.loop);
-    };
-
-    return (
-        <ActionButton
-            className={loop ? "active" : ""}
-            icon="bx bx-repeat"
-            text={loop ? t("media.disable-loop") : t("media.loop")}
-            onClick={toggle}
-        />
-    );
-}
-
-const PLAYBACK_SPEEDS = [0.5, 1, 1.25, 1.5, 2];
-
-export function PlaybackSpeed({ mediaRef }: { mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement> }) {
-    const [speed, setSpeed] = useState(() => mediaRef.current?.playbackRate ?? 1);
-
-    useEffect(() => {
-        const media = mediaRef.current;
-        if (!media) return;
-
-        setSpeed(media.playbackRate);
-
-        const onRateChange = () => setSpeed(media.playbackRate);
-        media.addEventListener("ratechange", onRateChange);
-        return () => media.removeEventListener("ratechange", onRateChange);
-    }, [ mediaRef ]);
-
-    const selectSpeed = (rate: number) => {
-        const media = mediaRef.current;
-        if (!media) return;
-        media.playbackRate = rate;
-        setSpeed(rate);
-    };
-
-    return (
-        <Dropdown
-            iconAction
-            hideToggleArrow
-            buttonClassName="speed-dropdown"
-            text={<>
-                <Icon icon="bx bx-tachometer" />
-                <span class="media-speed-label">{speed}x</span>
-            </>}
-            title={t("media.playback-speed")}
-        >
-            {PLAYBACK_SPEEDS.map((rate) => (
-                <li key={rate}>
-                    <button
-                        class={`dropdown-item ${rate === speed ? "active" : ""}`}
-                        onClick={() => selectSpeed(rate)}
-                    >
-                        {rate}x
-                    </button>
-                </li>
-            ))}
-        </Dropdown>
-    );
-}
--- a/apps/client/src/widgets/type_widgets/file/Pdf.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Pdf.tsx
@@ -184,7 +184,7 @@ export default function PdfPreview({ note, blob, componentId, noteContext }: {
        <PdfViewer
            iframeRef={iframeRef}
            tabIndex={300}
-            pdfUrl={new URL(`${window.glob.baseApiUrl}notes/${note.noteId}/open`, window.location.href).pathname}
+            pdfUrl={`../../api/notes/${note.noteId}/open`}
            onLoad={() => {
                const win = iframeRef.current?.contentWindow;
                if (win) {
--- a/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx
+++ b/apps/client/src/widgets/type_widgets/file/PdfViewer.tsx
@@ -1,8 +1,7 @@
 import type { HTMLAttributes, RefObject } from "preact";
 import { useCallback, useEffect, useRef } from "preact/hooks";
-
-import { useSyncedRef, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
 import Inter from "./../../../fonts/Inter/Inter-VariableFont_opsz,wght.ttf";
+import { useSyncedRef, useTriliumOption, useTriliumOptionBool } from "../../react/hooks";

 interface FontDefinition {
    name: string;
@@ -11,11 +10,11 @@ interface FontDefinition {

 const FONTS: FontDefinition[] = [
    {name: "Inter", url: Inter},
-];
+]

 interface PdfViewerProps extends Pick<HTMLAttributes<HTMLIFrameElement>, "tabIndex"> {
    iframeRef?: RefObject<HTMLIFrameElement>;
-    /** Note: URLs are relative to /pdfjs/web, ideally use absolute paths (but without domain name) to avoid issues with some proxies. */
+    /** Note: URLs are relative to /pdfjs/web. */
    pdfUrl: string;
    onLoad?(): void;
    /**
@@ -38,7 +37,7 @@ export default function PdfViewer({ iframeRef: externalIframeRef, pdfUrl, onLoad
            ref={iframeRef}
            class="pdf-preview"
            style={{width: "100%", height: "100%"}}
-            src={`pdfjs/web/viewer.html?v=${glob.triliumVersion}&file=${pdfUrl}&lang=${locale}&sidebar=${newLayout ? "0" : "1"}&editable=${editable ? "1" : "0"}`}
+            src={`pdfjs/web/viewer.html?file=${pdfUrl}&lang=${locale}&sidebar=${newLayout ? "0" : "1"}&editable=${editable ? "1" : "0"}`}
            onLoad={() => {
                injectStyles();
                onLoad?.();
@@ -64,7 +63,7 @@ function useStyleInjection(iframeRef: RefObject<HTMLIFrameElement>) {
        const fontStyles = doc.createElement("style");
        fontStyles.textContent = FONTS.map(injectFont).join("\n");
        doc.head.appendChild(fontStyles);
-
+        
    }, [ iframeRef ]);

    // React to changes.
@@ -108,4 +107,4 @@ function injectFont(font: FontDefinition) {
            src: url('${font.url}');
        }
    `;
-}
+}
--- a/apps/client/src/widgets/type_widgets/file/Video.css
+++ b/apps/client/src/widgets/type_widgets/file/Video.css
@@ -1,35 +0,0 @@
-.note-detail-file > .video-preview-wrapper {
-    width: 100%;
-    height: 100%;
-    position: relative;
-    background-color: black;    
-
-    .video-preview {
-        background-color: black;
-        width: 100%;
-        height: 100%;
-    }
-
-    &.controls-hidden {
-        cursor: pointer;
-
-        .media-preview-controls {
-            opacity: 0;
-            pointer-events: none;
-        }
-    }
-
-    .media-preview-controls {
-        --icon-button-hover-color: white;
-        --icon-button-hover-background: rgba(255, 255, 255, 0.2);
-        opacity: 1;
-        transition: opacity 300ms ease;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        right: 0;
-        background: rgba(0, 0, 0, 0.5);
-        backdrop-filter: blur(6px);
-        color: white;
-    }
-}
--- a/apps/client/src/widgets/type_widgets/file/Video.tsx
+++ b/apps/client/src/widgets/type_widgets/file/Video.tsx
@@ -1,298 +0,0 @@
-import "./Video.css";
-
-import { RefObject } from "preact";
-import { MutableRef, useCallback, useEffect, useRef, useState } from "preact/hooks";
-
-import FNote from "../../../entities/fnote";
-import { t } from "../../../services/i18n";
-import { getUrlForDownload } from "../../../services/open";
-import ActionButton from "../../react/ActionButton";
-import NoItems from "../../react/NoItems";
-import { LoopButton, PlaybackSpeed, PlayPauseButton, SeekBar, SkipButton, VolumeControl } from "./MediaPlayer";
-
-const AUTO_HIDE_DELAY = 3000;
-
-export default function VideoPreview({ note }: { note: FNote }) {
-    const wrapperRef = useRef<HTMLDivElement>(null);
-    const videoRef = useRef<HTMLVideoElement>(null);
-    const [playing, setPlaying] = useState(false);
-    const [error, setError] = useState(false);
-    const { visible: controlsVisible, onMouseMove, flash: flashControls } = useAutoHideControls(videoRef, playing);
-
-    useEffect(() => setError(false), [note.noteId]);
-    const onError = useCallback(() => setError(true), []);
-
-    const togglePlayback = useCallback(() => {
-        const video = videoRef.current;
-        if (!video) return;
-        if (video.paused) {
-            video.play();
-        } else {
-            video.pause();
-        }
-    }, []);
-
-    const onVideoClick = useCallback((e: MouseEvent) => {
-        if ((e.target as HTMLElement).closest(".media-preview-controls")) return;
-        togglePlayback();
-    }, [togglePlayback]);
-
-    const onKeyDown = useKeyboardShortcuts(videoRef, wrapperRef, togglePlayback, flashControls);
-
-    if (error) {
-        return <NoItems icon="bx bx-video-off" text={t("media.unsupported-format", { mime: note.mime.replace("/", "-") })} />;
-    }
-
-    return (
-        <div ref={wrapperRef} className={`video-preview-wrapper ${controlsVisible ? "" : "controls-hidden"}`} tabIndex={0} onClick={onVideoClick} onKeyDown={onKeyDown} onMouseMove={onMouseMove}>
-            <video
-                ref={videoRef}
-                class="video-preview"
-                src={getUrlForDownload(`api/notes/${note.noteId}/open-partial`)}
-                datatype={note?.mime}
-                onPlay={() => setPlaying(true)}
-                onPause={() => setPlaying(false)}
-                onError={onError}
-            />
-
-            <div className="media-preview-controls">
-                <SeekBar mediaRef={videoRef} />
-                <div class="media-buttons-row">
-                    <div className="left">
-                        <PlaybackSpeed mediaRef={videoRef} />
-                        <RotateButton videoRef={videoRef} />
-                    </div>
-                    <div className="center">
-                        <div className="spacer" />
-                        <SkipButton mediaRef={videoRef} seconds={-10} icon="bx bx-rewind" text={t("media.back-10s")} />
-                        <PlayPauseButton playing={playing} togglePlayback={togglePlayback} />
-                        <SkipButton mediaRef={videoRef} seconds={30} icon="bx bx-fast-forward" text={t("media.forward-30s")} />
-                        <LoopButton mediaRef={videoRef} />
-                    </div>
-                    <div className="right">
-                        <VolumeControl mediaRef={videoRef} />
-                        <ZoomToFitButton videoRef={videoRef} />
-                        <PictureInPictureButton videoRef={videoRef} />
-                        <FullscreenButton targetRef={wrapperRef} />
-                    </div>
-                </div>
-            </div>
-        </div>
-    );
-}
-
-function useKeyboardShortcuts(videoRef: MutableRef<HTMLVideoElement | null>, wrapperRef: MutableRef<HTMLDivElement | null>, togglePlayback: () => void, flashControls: () => void) {
-    return useCallback((e: KeyboardEvent) => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        switch (e.key) {
-            case " ":
-                e.preventDefault();
-                togglePlayback();
-                flashControls();
-                break;
-            case "ArrowLeft":
-                e.preventDefault();
-                video.currentTime = Math.max(0, video.currentTime - (e.ctrlKey ? 60 : 10));
-                flashControls();
-                break;
-            case "ArrowRight":
-                e.preventDefault();
-                video.currentTime = Math.min(video.duration, video.currentTime + (e.ctrlKey ? 60 : 10));
-                flashControls();
-                break;
-            case "f":
-            case "F":
-                e.preventDefault();
-                if (document.fullscreenElement) {
-                    document.exitFullscreen();
-                } else {
-                    wrapperRef.current?.requestFullscreen();
-                }
-                break;
-            case "m":
-            case "M":
-                e.preventDefault();
-                video.muted = !video.muted;
-                flashControls();
-                break;
-            case "ArrowUp":
-                e.preventDefault();
-                video.volume = Math.min(1, video.volume + 0.05);
-                flashControls();
-                break;
-            case "ArrowDown":
-                e.preventDefault();
-                video.volume = Math.max(0, video.volume - 0.05);
-                flashControls();
-                break;
-            case "Home":
-                e.preventDefault();
-                video.currentTime = 0;
-                flashControls();
-                break;
-            case "End":
-                e.preventDefault();
-                video.currentTime = video.duration;
-                flashControls();
-                break;
-        }
-    }, [ wrapperRef, videoRef, togglePlayback, flashControls ]);
-}
-
-function useAutoHideControls(videoRef: RefObject<HTMLVideoElement>, playing: boolean) {
-    const [visible, setVisible] = useState(true);
-    const hideTimerRef = useRef<ReturnType<typeof setTimeout>>();
-
-    const scheduleHide = useCallback(() => {
-        clearTimeout(hideTimerRef.current);
-        if (videoRef.current && !videoRef.current.paused) {
-            hideTimerRef.current = setTimeout(() => setVisible(false), AUTO_HIDE_DELAY);
-        }
-    }, [ videoRef]);
-
-    const onMouseMove = useCallback(() => {
-        setVisible(true);
-        scheduleHide();
-    }, [scheduleHide]);
-
-    // Hide immediately when playback starts, show when paused.
-    useEffect(() => {
-        if (playing) {
-            setVisible(false);
-        } else {
-            clearTimeout(hideTimerRef.current);
-            setVisible(true);
-        }
-        return () => clearTimeout(hideTimerRef.current);
-    }, [playing, scheduleHide]);
-
-    return { visible, onMouseMove, flash: onMouseMove };
-}
-
-function RotateButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [rotation, setRotation] = useState(0);
-
-    const rotate = () => {
-        const video = videoRef.current;
-        if (!video) return;
-        const next = (rotation + 90) % 360;
-        setRotation(next);
-
-        const isSideways = next === 90 || next === 270;
-        if (isSideways) {
-            // Scale down so the rotated video fits within its container.
-            const container = video.parentElement;
-            if (container) {
-                const ratio = container.clientWidth / container.clientHeight;
-                video.style.transform = `rotate(${next}deg) scale(${1 / ratio})`;
-            } else {
-                video.style.transform = `rotate(${next}deg)`;
-            }
-        } else {
-            video.style.transform = next === 0 ? "" : `rotate(${next}deg)`;
-        }
-    };
-
-    return (
-        <ActionButton
-            icon="bx bx-rotate-right"
-            text={t("media.rotate")}
-            onClick={rotate}
-        />
-    );
-}
-
-function ZoomToFitButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [fitted, setFitted] = useState(false);
-
-    const toggle = () => {
-        const video = videoRef.current;
-        if (!video) return;
-        const next = !fitted;
-        video.style.objectFit = next ? "cover" : "";
-        setFitted(next);
-    };
-
-    return (
-        <ActionButton
-            className={fitted ? "active" : ""}
-            icon={fitted ? "bx bx-collapse" : "bx bx-expand"}
-            text={fitted ? t("media.zoom-reset") : t("media.zoom-to-fit")}
-            onClick={toggle}
-        />
-    );
-}
-
-function PictureInPictureButton({ videoRef }: { videoRef: RefObject<HTMLVideoElement> }) {
-    const [active, setActive] = useState(false);
-    // The standard PiP API is only supported in Chromium-based browsers.
-    // Firefox uses its own proprietary PiP implementation.
-    const supported = "requestPictureInPicture" in HTMLVideoElement.prototype;
-
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video || !supported) return;
-
-        const onEnter = () => setActive(true);
-        const onLeave = () => setActive(false);
-
-        video.addEventListener("enterpictureinpicture", onEnter);
-        video.addEventListener("leavepictureinpicture", onLeave);
-        return () => {
-            video.removeEventListener("enterpictureinpicture", onEnter);
-            video.removeEventListener("leavepictureinpicture", onLeave);
-        };
-    }, [ videoRef, supported ]);
-
-    if (!supported) return null;
-
-    const toggle = () => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        if (document.pictureInPictureElement) {
-            document.exitPictureInPicture();
-        } else {
-            video.requestPictureInPicture();
-        }
-    };
-
-    return (
-        <ActionButton
-            icon={active ? "bx bx-exit" : "bx bx-window-open"}
-            text={active ? t("media.exit-picture-in-picture") : t("media.picture-in-picture")}
-            onClick={toggle}
-        />
-    );
-}
-
-function FullscreenButton({ targetRef }: { targetRef: RefObject<HTMLElement> }) {
-    const [isFullscreen, setIsFullscreen] = useState(false);
-
-    useEffect(() => {
-        const onFullscreenChange = () => setIsFullscreen(!!document.fullscreenElement);
-        document.addEventListener("fullscreenchange", onFullscreenChange);
-        return () => document.removeEventListener("fullscreenchange", onFullscreenChange);
-    }, []);
-
-    const toggleFullscreen = () => {
-        const target = targetRef.current;
-        if (!target) return;
-
-        if (document.fullscreenElement) {
-            document.exitFullscreen();
-        } else {
-            target.requestFullscreen();
-        }
-    };
-
-    return (
-        <ActionButton
-            icon={isFullscreen ? "bx bx-exit-fullscreen" : "bx bx-fullscreen"}
-            text={isFullscreen ? t("media.exit-fullscreen") : t("media.fullscreen")}
-            onClick={toggleFullscreen}
-        />
-    );
-}
--- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css
+++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.css
@@ -27,18 +27,12 @@
    margin: 0 !important;
 }

-body.desktop .note-detail-split .note-detail-code-editor {
-    border-radius: 6px;
-    margin-top: 1px;
-}
-
 .note-detail-split .note-detail-error-container {
    font-family: var(--monospace-font-family);
    margin: 5px;
    white-space: pre-wrap;
    font-size: 0.85em;
    overflow: auto;
-    user-select: text;
 }

 .note-detail-split .note-detail-split-preview {
--- a/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SplitEditor.tsx
@@ -19,7 +19,6 @@ export interface SplitEditorProps extends EditableCodeProps {
    previewButtons?: ComponentChildren;
    editorBefore?: ComponentChildren;
    forceOrientation?: "horizontal" | "vertical";
-    extraContent?: ComponentChildren;
 }

 /**
@@ -42,7 +41,7 @@ export default function SplitEditor(props: SplitEditorProps) {

 }

-function EditorWithSplit({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, extraContent, ...editorProps }: SplitEditorProps) {
+function EditorWithSplit({ note, error, splitOptions, previewContent, previewButtons, className, editorBefore, forceOrientation, ...editorProps }: SplitEditorProps) {
    const containerRef = useRef<HTMLDivElement>(null);
    const splitEditorOrientation = useSplitOrientation(forceOrientation);

@@ -58,12 +57,9 @@ function EditorWithSplit({ note, error, splitOptions, previewContent, previewBut
                    {...editorProps}
                />
            </div>
-            {error && (
-                <Admonition type="caution" className="note-detail-error-container">
-                    {error}
-                </Admonition>
-            )}
-            {extraContent}
+            {error && <Admonition type="caution" className="note-detail-error-container">
+                {error}
+            </Admonition>}
        </div>
    );

--- a/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
+++ b/apps/client/src/widgets/type_widgets/helpers/SvgSplitEditor.tsx
@@ -117,7 +117,6 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
            error={error}
            onContentChanged={onContentChanged}
            dataSaved={onSave}
-            placeholder={t("mermaid.placeholder")}
            previewContent={(
                <RawHtmlBlock
                    className="render-container"
@@ -152,7 +151,6 @@ export default function SvgSplitEditor({ ntxId, note, attachmentName, renderSvg,
 function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg: string | undefined) {
    const lastPanZoom = useRef<{ pan: SvgPanZoom.Point, zoom: number }>();
    const lastNoteId = useRef<string>();
-    const wasEmpty = useRef<boolean>(false);
    const zoomRef = useRef<SvgPanZoom.Instance>();
    const width = useElementSize(containerRef);

@@ -160,14 +158,9 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
    useEffect(() => {
        if (zoomRef.current || width?.width === 0) return;

-        const shouldPreservePanZoom = (lastNoteId.current === noteId) && !wasEmpty.current;
+        const shouldPreservePanZoom = (lastNoteId.current === noteId);
        const svgEl = containerRef.current?.querySelector("svg");
-        if (!svgEl) {
-            if (svg?.trim().length === 0) {
-                wasEmpty.current = true;
-            }
-            return;
-        };
+        if (!svgEl) return;

        const zoomInstance = svgPanZoom(svgEl, {
            zoomEnabled: true,
@@ -193,7 +186,7 @@ function useResizer(containerRef: RefObject<HTMLDivElement>, noteId: string, svg
            zoomRef.current = undefined;
            zoomInstance.destroy();
        };
-    }, [ containerRef, noteId, svg, width ]);
+    }, [ svg, width ]);

    // React to container changes.
    useEffect(() => {
--- a/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts
+++ b/apps/client/src/widgets/type_widgets/mermaid/sample_diagrams.ts
@@ -1,512 +0,0 @@
-import { t } from "../../../services/i18n";
-import type { NoteContentTemplate } from "../../layout/NoteContentSwitcher";
-
-const SAMPLE_DIAGRAMS: NoteContentTemplate[] = [
-    {
-        name: t("mermaid.sample_flowchart"),
-        content: `\
-flowchart TD
-    A[Christmas] -->|Get money| B(Go shopping)
-    B --> C{Let me think}
-    C -->|One| D[Laptop]
-    C -->|Two| E[iPhone]
-    C -->|Three| F[fa:fa-car Car]
-`
-    },
-    {
-        name: t("mermaid.sample_class"),
-        content: `\
-classDiagram
-    Animal <|-- Duck
-    Animal <|-- Fish
-    Animal <|-- Zebra
-    Animal : +int age
-    Animal : +String gender
-    Animal: +isMammal()
-    Animal: +mate()
-    class Duck{
-      +String beakColor
-      +swim()
-      +quack()
-    }
-    class Fish{
-      -int sizeInFeet
-      -canEat()
-    }
-    class Zebra{
-      +bool is_wild
-      +run()
-    }
-`
-    },
-    {
-        name: t("mermaid.sample_sequence"),
-        content: `\
-sequenceDiagram
-    Alice->>+John: Hello John, how are you?
-    Alice->>+John: John, can you hear me?
-    John-->>-Alice: Hi Alice, I can hear you!
-    John-->>-Alice: I feel great!
-`
-    },
-    {
-        name: t("mermaid.sample_entity_relationship"),
-        content: `\
-erDiagram
-    CUSTOMER ||--o{ ORDER : places
-    ORDER ||--|{ ORDER_ITEM : contains
-    PRODUCT ||--o{ ORDER_ITEM : includes
-    CUSTOMER {
-        string id
-        string name
-        string email
-    }
-    ORDER {
-        string id
-        date orderDate
-        string status
-    }
-    PRODUCT {
-        string id
-        string name
-        float price
-    }
-    ORDER_ITEM {
-        int quantity
-        float price
-    }
-`
-    },
-    {
-        name: t("mermaid.sample_state"),
-        content: `\
-stateDiagram-v2
-    [*] --> Still
-    Still --> [*]
-    Still --> Moving
-    Moving --> Still
-    Moving --> Crash
-    Crash --> [*]
-`
-    },
-    {
-        name: t("mermaid.sample_mindmap"),
-        content: `\
-mindmap
-  root((mindmap))
-    Origins
-      Long history
-      ::icon(fa fa-book)
-      Popularisation
-        British popular psychology author Tony Buzan
-    Research
-      On effectiveness<br/>and features
-      On Automatic creation
-        Uses
-            Creative techniques
-            Strategic planning
-            Argument mapping
-    Tools
-      Pen and paper
-      Mermaid
-`
-    },
-    {
-        name: t("mermaid.sample_architecture"),
-        content: `\
-architecture-beta
-    group api(cloud)[API]
-
-    service db(database)[Database] in api
-    service disk1(disk)[Storage] in api
-    service disk2(disk)[Storage] in api
-    service server(server)[Server] in api
-
-    db:L -- R:server
-    disk1:T -- B:server
-    disk2:T -- B:db
-`
-    },
-    {
-        name: t("mermaid.sample_block"),
-        content: `\
-block-beta
-columns 1
-  db(("DB"))
-  blockArrowId6<["&nbsp;&nbsp;&nbsp;"]>(down)
-  block:ID
-    A
-    B["A wide one in the middle"]
-    C
-  end
-  space
-  D
-  ID --> D
-  C --> D
-  style B fill:#969,stroke:#333,stroke-width:4px
-`
-    },
-    {
-        name: t("mermaid.sample_c4"),
-        content: `\
-C4Context
-    title System Context diagram for Internet Banking System
-    Enterprise_Boundary(b0, "BankBoundary0") {
-        Person(customerA, "Banking Customer A", "A customer of the bank, with personal bank accounts.")
-        Person(customerB, "Banking Customer B")
-        Person_Ext(customerC, "Banking Customer C", "desc")
-
-        Person(customerD, "Banking Customer D", "A customer of the bank, <br/> with personal bank accounts.")
-
-        System(SystemAA, "Internet Banking System", "Allows customers to view information about their bank accounts, and make payments.")
-
-        Enterprise_Boundary(b1, "BankBoundary") {
-            SystemDb_Ext(SystemE, "Mainframe Banking System", "Stores all of the core banking information about customers, accounts, transactions, etc.")
-
-            System_Boundary(b2, "BankBoundary2") {
-                System(SystemA, "Banking System A")
-                System(SystemB, "Banking System B", "A system of the bank, with personal bank accounts. next line.")
-            }
-
-            System_Ext(SystemC, "E-mail system", "The internal Microsoft Exchange e-mail system.")
-            SystemDb(SystemD, "Banking System D Database", "A system of the bank, with personal bank accounts.")
-
-            Boundary(b3, "BankBoundary3", "boundary") {
-                SystemQueue(SystemF, "Banking System F Queue", "A system of the bank.")
-                SystemQueue_Ext(SystemG, "Banking System G Queue", "A system of the bank, with personal bank accounts.")
-            }
-        }
-    }
-
-    BiRel(customerA, SystemAA, "Uses")
-    BiRel(SystemAA, SystemE, "Uses")
-    Rel(SystemAA, SystemC, "Sends e-mails", "SMTP")
-    Rel(SystemC, customerA, "Sends e-mails to")
-`
-    },
-    {
-        name: t("mermaid.sample_gantt"),
-        content: `\
-gantt
-    title A Gantt Diagram
-    dateFormat  YYYY-MM-DD
-    section Section
-    A task           :a1, 2014-01-01, 30d
-    Another task     :after a1  , 20d
-    section Another
-    Task in sec      :2014-01-12  , 12d
-    another task      : 24d
-`
-    },
-    {
-        name: t("mermaid.sample_git"),
-        content: `\
-gitGraph
-    commit
-    branch develop
-    checkout develop
-    commit
-    commit
-    checkout main
-    merge develop
-    commit
-    branch feature
-    checkout feature
-    commit
-    commit
-    checkout main
-    merge feature
-`
-    },
-    {
-        name: t("mermaid.sample_kanban"),
-        content: `\
---
-config:
-  kanban:
-    ticketBaseUrl: 'https://github.com/mermaid-js/mermaid/issues/#TICKET#'
---
-kanban
-  Todo
-    [Create Documentation]
-    docs[Create Blog about the new diagram]
-  [In progress]
-    id6[Create renderer so that it works in all cases. We also add some extra text here for testing purposes. And some more just for the extra flare.]
-  id9[Ready for deploy]
-    id8[Design grammar]@{ assigned: 'knsv' }
-  id10[Ready for test]
-    id4[Create parsing tests]@{ ticket: 2038, assigned: 'K.Sveidqvist', priority: 'High' }
-    id66[last item]@{ priority: 'Very Low', assigned: 'knsv' }
-  id11[Done]
-    id5[define getData]
-    id2[Title of diagram is more than 100 chars when user duplicates diagram with 100 char]@{ ticket: 2036, priority: 'Very High'}
-    id3[Update DB function]@{ ticket: 2037, assigned: knsv, priority: 'High' }
-
-  id12[Can't reproduce]
-    id3[Weird flickering in Firefox]
-`
-    },
-    {
-        name: t("mermaid.sample_packet"),
-        content: `\
---
-title: "TCP Packet"
---
-packet
-0-15: "Source Port"
-16-31: "Destination Port"
-32-63: "Sequence Number"
-64-95: "Acknowledgment Number"
-96-99: "Data Offset"
-100-105: "Reserved"
-106: "URG"
-107: "ACK"
-108: "PSH"
-109: "RST"
-110: "SYN"
-111: "FIN"
-112-127: "Window"
-128-143: "Checksum"
-144-159: "Urgent Pointer"
-160-191: "(Options and Padding)"
-192-255: "Data (variable length)"
-        `
-    },
-    {
-        name: t("mermaid.sample_pie"),
-        content: `\
-pie title Pets adopted by volunteers
-    "Dogs" : 386
-    "Cats" : 85
-    "Rats" : 15
-`
-    },
-    {
-        name: t("mermaid.sample_quadrant"),
-        content: `\
-quadrantChart
-    title Reach and engagement of campaigns
-    x-axis Low Reach --> High Reach
-    y-axis Low Engagement --> High Engagement
-    quadrant-1 We should expand
-    quadrant-2 Need to promote
-    quadrant-3 Re-evaluate
-    quadrant-4 May be improved
-    Campaign A: [0.3, 0.6]
-    Campaign B: [0.45, 0.23]
-    Campaign C: [0.57, 0.69]
-    Campaign D: [0.78, 0.34]
-    Campaign E: [0.40, 0.34]
-    Campaign F: [0.35, 0.78]
-`
-    },
-    {
-        name: t("mermaid.sample_radar"),
-        content: `\
---
-title: "Grades"
---
-radar-beta
-  axis m["Math"], s["Science"], e["English"]
-  axis h["History"], g["Geography"], a["Art"]
-  curve a["Alice"]{85, 90, 80, 70, 75, 90}
-  curve b["Bob"]{70, 75, 85, 80, 90, 85}
-
-  max 100
-  min 0
-        `
-    },
-    {
-        name: t("mermaid.sample_requirement"),
-        content: `\
-requirementDiagram
-
-    requirement test_req {
-    id: 1
-    text: the test text.
-    risk: high
-    verifymethod: test
-    }
-
-    element test_entity {
-    type: simulation
-    }
-
-    test_entity - satisfies -> test_req
-`
-    },
-    {
-        name: t("mermaid.sample_sankey"),
-        content: `\
---
-config:
-  sankey:
-    showValues: false
---
-sankey-beta
-
-Agricultural 'waste',Bio-conversion,124.729
-Bio-conversion,Liquid,0.597
-Bio-conversion,Losses,26.862
-Bio-conversion,Solid,280.322
-Bio-conversion,Gas,81.144
-Biofuel imports,Liquid,35
-Biomass imports,Solid,35
-Coal imports,Coal,11.606
-Coal reserves,Coal,63.965
-Coal,Solid,75.571
-District heating,Industry,10.639
-District heating,Heating and cooling - commercial,22.505
-District heating,Heating and cooling - homes,46.184
-Electricity grid,Over generation / exports,104.453
-Electricity grid,Heating and cooling - homes,113.726
-Electricity grid,H2 conversion,27.14
-Electricity grid,Industry,342.165
-Electricity grid,Road transport,37.797
-Electricity grid,Agriculture,4.412
-Electricity grid,Heating and cooling - commercial,40.858
-Electricity grid,Losses,56.691
-Electricity grid,Rail transport,7.863
-Electricity grid,Lighting & appliances - commercial,90.008
-Electricity grid,Lighting & appliances - homes,93.494
-Gas imports,NGas,40.719
-Gas reserves,NGas,82.233
-Gas,Heating and cooling - commercial,0.129
-Gas,Losses,1.401
-Gas,Thermal generation,151.891
-Gas,Agriculture,2.096
-Gas,Industry,48.58
-Geothermal,Electricity grid,7.013
-H2 conversion,H2,20.897
-H2 conversion,Losses,6.242
-H2,Road transport,20.897
-Hydro,Electricity grid,6.995
-Liquid,Industry,121.066
-Liquid,International shipping,128.69
-Liquid,Road transport,135.835
-Liquid,Domestic aviation,14.458
-Liquid,International aviation,206.267
-Liquid,Agriculture,3.64
-Liquid,National navigation,33.218
-Liquid,Rail transport,4.413
-Marine algae,Bio-conversion,4.375
-NGas,Gas,122.952
-Nuclear,Thermal generation,839.978
-Oil imports,Oil,504.287
-Oil reserves,Oil,107.703
-Oil,Liquid,611.99
-Other waste,Solid,56.587
-Other waste,Bio-conversion,77.81
-Pumped heat,Heating and cooling - homes,193.026
-Pumped heat,Heating and cooling - commercial,70.672
-Solar PV,Electricity grid,59.901
-Solar Thermal,Heating and cooling - homes,19.263
-Solar,Solar Thermal,19.263
-Solar,Solar PV,59.901
-Solid,Agriculture,0.882
-Solid,Thermal generation,400.12
-Solid,Industry,46.477
-Thermal generation,Electricity grid,525.531
-Thermal generation,Losses,787.129
-Thermal generation,District heating,79.329
-Tidal,Electricity grid,9.452
-UK land based bioenergy,Bio-conversion,182.01
-Wave,Electricity grid,19.013
-Wind,Electricity grid,289.366
-`
-    },
-    {
-        name: t("mermaid.sample_timeline"),
-        content: `\
-timeline
-    title History of Social Media Platform
-    2002 : LinkedIn
-    2004 : Facebook
-         : Google
-    2005 : YouTube
-    2006 : Twitter
-        `
-    },
-    {
-        name: t("mermaid.sample_treemap"),
-        content: `\
-treemap-beta
-"Section 1"
-    "Leaf 1.1": 12
-    "Section 1.2"
-      "Leaf 1.2.1": 12
-"Section 2"
-    "Leaf 2.1": 20
-    "Leaf 2.2": 25
-`
-    },
-    {
-        name: t("mermaid.sample_user_journey"),
-        content: `\
-journey
-    title My working day
-    section Go to work
-      Make tea: 5: Me
-      Go upstairs: 3: Me
-      Do work: 1: Me, Cat
-    section Go home
-      Go downstairs: 5: Me
-      Sit down: 5: Me
-`
-    },
-    {
-        name: t("mermaid.sample_xy"),
-        content: `\
-xychart-beta
-    title "Sales Revenue"
-    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
-    y-axis "Revenue (in $)" 4000 --> 11000
-    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
-`
-    },
-    {
-        name: t("mermaid.sample_venn"),
-        content: `\
-venn-beta
-    title Web Dev
-    set Frontend
-        text React
-        text shadcn-ui
-        text Firebase
-    set Backend
-        text Hono
-        text PostgreSQL
-        text S3
-        text Lambda
-    union Frontend,Backend["APIs"]
-        `
-    },
-    {
-        name: t("mermaid.sample_ishikawa"),
-        content: `\
-ishikawa-beta
-  Blurry Photo
-  Process
-    Out of focus
-    Shutter speed too slow
-    Protective film not removed
-    Beautification filter applied
-  User
-    Shaky hands
-  Equipment
-    LENS
-      Inappropriate lens
-      Damaged lens
-      Dirty lens
-    SENSOR
-      Damaged sensor
-      Dirty sensor
-  Environment
-    Subject moved too quickly
-    Too dark
-`
-    }
-];
-
-export default SAMPLE_DIAGRAMS;
--- a/apps/client/src/widgets/type_widgets/relation_map/context_menu.ts
+++ b/apps/client/src/widgets/type_widgets/relation_map/context_menu.ts
@@ -1,14 +1,12 @@
-import { Connection } from "jsplumb";
 import { RefObject } from "preact";
-
 import appContext from "../../../components/app_context";
 import FNote from "../../../entities/fnote";
 import contextMenu from "../../../menus/context_menu";
-import link_context_menu from "../../../menus/link_context_menu";
 import dialog from "../../../services/dialog";
 import { t } from "../../../services/i18n";
 import server from "../../../services/server";
 import RelationMapApi from "./api";
+import { Connection } from "jsplumb";

 export function buildNoteContextMenuHandler(note: FNote | null | undefined, mapApiRef: RefObject<RelationMapApi>) {
    return (e: MouseEvent) => {
@@ -19,8 +17,22 @@ export function buildNoteContextMenuHandler(note: FNote | null | undefined, mapA
            x: e.pageX,
            y: e.pageY,
            items: [
-                ...link_context_menu.getItems(e),
-                { kind: "separator" },
+                {
+                    title: t("relation_map.open_in_new_tab"),
+                    uiIcon: "bx bx-empty",
+                    handler: () => appContext.tabManager.openTabWithNoteWithHoisting(note.noteId)
+                },
+                {
+                    title: t("relation_map.remove_note"),
+                    uiIcon: "bx bx-trash",
+                    handler: async () => {
+                        if (!note) return;
+                        const result = await dialog.confirmDeleteNoteBoxWithNote(note.title);
+                        if (typeof result !== "object" || !result.confirmed) return;
+
+                        mapApiRef.current?.removeItem(note.noteId, result.isDeleteNoteChecked);
+                    }
+                },
                {
                    title: t("relation_map.edit_title"),
                    uiIcon: "bx bx-pencil",
@@ -37,26 +49,10 @@ export function buildNoteContextMenuHandler(note: FNote | null | undefined, mapA

                        await server.put(`notes/${note.noteId}/title`, { title });
                    }
-                },
-                { kind: "separator" },
-
-                {
-                    title: t("relation_map.remove_note"),
-                    uiIcon: "bx bx-trash",
-                    handler: async () => {
-                        if (!note) return;
-                        const result = await dialog.confirmDeleteNoteBoxWithNote(note.title);
-                        if (typeof result !== "object" || !result.confirmed) return;
-
-                        mapApiRef.current?.removeItem(note.noteId, result.isDeleteNoteChecked);
-                    }
-                },
+                }
            ],
-            selectMenuItemHandler({ command }) {
-                // Pass the events to the link context menu
-                link_context_menu.handleLinkContextMenuItem(command, e, note.noteId);
-            }
-        });
+            selectMenuItemHandler() {}
+        })
    };
 }

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Elian Doran	0e052bffe8	chore(react): add backup	2026-03-05 21:03:43 +02:00
Elian Doran	3fa2673b55	chore(react): integrate mobile layout as well	2026-03-05 20:59:59 +02:00
Elian Doran	a2130f4aa3	chore(react): port desktop version of note wrapper	2026-03-05 20:17:23 +02:00
Elian Doran	6c9246bc5b	chore(react): get title bar to render	2026-03-05 20:10:26 +02:00
@@ -1 +1 @@
 .14.1
 .14.0