client: format code

.github/workflows/deploy-docs.yml

@@ -10,7 +10,6 @@ on:
     paths:
       - 'docs/**'
       - 'apps/edit-docs/**'
-      - 'apps/build-docs/**'
       - 'packages/share-theme/**'
 
   # Allow manual triggering from Actions tab
@@ -24,7 +23,6 @@ on:
     paths:
       - 'docs/**'
       - 'apps/edit-docs/**'
-      - 'apps/build-docs/**'
       - 'packages/share-theme/**'
 
 jobs:
@@ -62,8 +60,6 @@ jobs:
       - name: Validate Built Site
         run: |
           test -f site/index.html || (echo "ERROR: site/index.html not found" && exit 1)
-          test -f site/developer-guide/index.html || (echo "ERROR: site/developer-guide/index.html not found" && exit 1)
-          echo "✓ User Guide and Developer Guide built successfully"
 
       - name: Deploy
         uses: ./.github/actions/deploy-to-cloudflare-pages

apps/build-docs/src/build-docs.ts

@@ -14,12 +14,17 @@ import BuildContext from "./context.js";
 const DOCS_ROOT = "../../../docs";
 const OUTPUT_DIR = "../../site";
 
-async function importAndExportDocs(sourcePath: string, outputSubDir: string) {
-    const note = await importData(sourcePath);
+async function buildDocsInner() {
+    const i18n = await import("@triliumnext/server/src/services/i18n.js");
+    await i18n.initializeTranslations();
 
-    // Use a meaningful name for the temporary zip file
-    const zipName = outputSubDir || "user-guide";
-    const zipFilePath = `output-${zipName}.zip`;
+    const sqlInit = (await import("../../server/src/services/sql_init.js")).default;
+    await sqlInit.createInitialDatabase(true);
+
+    const note = await importData(join(__dirname, DOCS_ROOT, "User Guide"));
+
+    // Export
+    const zipFilePath = "output.zip";
     try {
         const { exportToZip } = (await import("@triliumnext/server/src/services/export/zip.js")).default;
         const branch = note.getParentBranches()[0];
@@ -31,50 +36,25 @@ async function importAndExportDocs(sourcePath: string, outputSubDir: string) {
         const fileOutputStream = fsExtra.createWriteStream(zipFilePath);
         await exportToZip(taskContext, branch, "share", fileOutputStream);
         await waitForStreamToFinish(fileOutputStream);
-
-        // Output to root directory if outputSubDir is empty, otherwise to subdirectory
-        const outputPath = outputSubDir ? join(OUTPUT_DIR, outputSubDir) : OUTPUT_DIR;
-        await extractZip(zipFilePath, outputPath);
+        await extractZip(zipFilePath, OUTPUT_DIR);
     } finally {
         if (await fsExtra.exists(zipFilePath)) {
             await fsExtra.rm(zipFilePath);
         }
     }
-}
-
-async function buildDocsInner() {
-    const i18n = await import("@triliumnext/server/src/services/i18n.js");
-    await i18n.initializeTranslations();
-
-    const sqlInit = (await import("../../server/src/services/sql_init.js")).default;
-    await sqlInit.createInitialDatabase(true);
-
-    // Wait for becca to be loaded before importing data
-    const beccaLoader = await import("../../server/src/becca/becca_loader.js");
-    await beccaLoader.beccaLoaded;
-
-    // Build User Guide
-    console.log("Building User Guide...");
-    await importAndExportDocs(join(__dirname, DOCS_ROOT, "User Guide"), "user-guide");
-
-    // Build Developer Guide
-    console.log("Building Developer Guide...");
-    await importAndExportDocs(join(__dirname, DOCS_ROOT, "Developer Guide"), "developer-guide");
 
     // Copy favicon.
     await fs.copyFile("../../apps/website/src/assets/favicon.ico", join(OUTPUT_DIR, "favicon.ico"));
-    await fs.copyFile("../../apps/website/src/assets/favicon.ico", join(OUTPUT_DIR, "user-guide", "favicon.ico"));
-    await fs.copyFile("../../apps/website/src/assets/favicon.ico", join(OUTPUT_DIR, "developer-guide", "favicon.ico"));
 
     console.log("Documentation built successfully!");
 }
 
 export async function importData(path: string) {
     const buffer = await createImportZip(path);
-    const importService = (await import("../../server/src/services/import/zip.js")).default;
-    const TaskContext = (await import("../../server/src/services/task_context.js")).default;
+    const importService = (await import("@triliumnext/server/src/services/import/zip.js")).default;
+    const TaskContext = (await import("@triliumnext/server/src/services/task_context.js")).default;
     const context = new TaskContext("no-progress-reporting", "importNotes", null);
-    const becca = (await import("../../server/src/becca/becca.js")).default;
+    const becca = (await import("@triliumnext/server/src/becca/becca.js")).default;
 
     const rootNote = becca.getRoot();
     if (!rootNote) {

apps/build-docs/src/index.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta http-equiv="refresh" content="0; url=/user-guide">
-    <title>Redirecting...</title>
-</head>
-<body>
-    <p>If you are not redirected automatically, <a href="/user-guide">click here</a>.</p>
-</body>
-</html>

apps/build-docs/src/main.ts

@@ -1,7 +1,7 @@
 import { join } from "path";
 import BuildContext from "./context";
 import buildSwagger from "./swagger";
-import { cpSync, existsSync, mkdirSync, rmSync } from "fs";
+import { existsSync, mkdirSync, rmSync } from "fs";
 import buildDocs from "./build-docs";
 import buildScriptApi from "./script-api";
 
@@ -21,9 +21,6 @@ async function main() {
     await buildDocs(context);
     buildSwagger(context);
     buildScriptApi(context);
-
-    // Copy index file.
-    cpSync(join(__dirname, "index.html"), join(context.baseDir, "index.html"));
 }
 
 main();

apps/client/src/stylesheets/style.css

@@ -1809,12 +1809,15 @@ body:not(.mobile) #launcher-pane.horizontal .dropdown-submenu > .dropdown-menu {
 }
 
 .note-split {
+    /* Limits the maximum width of the note */
+    --max-content-width: var(--preferred-max-content-width);
+
     margin-inline-start: auto;
     margin-inline-end: auto;
 }
 
 .note-split.full-content-width {
-    max-width: 999999px;
+    --max-content-width: unset;
 }
 
 button.close:hover {
@@ -2034,13 +2037,16 @@ body.zen #right-pane,
 body.zen #mobile-sidebar-wrapper,
 body.zen .tab-row-container,
 body.zen .tab-row-widget,
+body.zen .shared-info-widget,
 body.zen .ribbon-container:not(:has(.classic-toolbar-widget)),
 body.zen .ribbon-container:has(.classic-toolbar-widget) .ribbon-top-row,
 body.zen .ribbon-container .ribbon-body:not(:has(.classic-toolbar-widget)),
 body.zen .note-icon-widget,
 body.zen .title-row .icon-action,
+body.zen .promoted-attributes-widget,
 body.zen .floating-buttons-children > *:not(.bx-edit-alt),
-body.zen .action-button {
+body.zen .action-button,
+body.zen .note-list-widget:not(.full-height) {
     display: none !important;
 }
 
@@ -2084,12 +2090,115 @@ body.zen .note-title-widget,
 body.zen .note-title-widget input {
     font-size: 1rem !important;
     background: transparent !important;
+    pointer-events: none;
 }
 
 body.zen #detail-container {
     width: 100%;
 }
 
+body.zen .note-split:not(.full-content-width) .scrolling-container {
+    display: flex;
+    flex-direction: column;
+    scroll-behavior: unset !important;
+}
+
+body.zen .note-split:not(.full-content-width) .note-detail {
+    margin: auto;
+    padding-bottom: 25vh;
+    width: var(--max-content-width);
+}
+
+body.zen .note-split:not(.full-content-width) .scroll-padding-widget {
+    display: none;
+}
+
+body.zen .note-split.type-text {
+    position: relative;
+    font-size: 1.15em;
+}
+
+body.zen:not(.backdrop-effects-disabled) .note-split.type-text .title-row {
+    --start-color: var(--main-background-color);
+
+    position: absolute;
+    width: 100%;
+    background: linear-gradient(var(--start-color) 30%, transparent 100%);
+    z-index: 1000;
+}
+
+@supports (background: color-mix(in srgb, white, transparent)) {
+    body.zen .note-split.type-text .title-row {
+        --start-color: color-mix(in srgb, var(--main-background-color), transparent 10%);
+    }
+}
+
+body.zen .note-split.type-text .scrolling-container {
+    --padding-bottom: 130px; /* Should be enough to avoid caret being hidden by the formatting toolbar */
+
+    /* (Usually) keeps the caret above the fixed toolbar */
+    scroll-padding-bottom: var(--padding-bottom);
+}
+
+body.zen:not(.backdrop-effects-disabled) .note-split.type-text .scrolling-container {
+    --padding-top: 50px; /* Should be enough to cover the title row */
+    
+    padding-top: var(--padding-top);
+    scroll-padding-top: var(--padding-top);
+}
+
+/* Fixed formatting toolbar */
+
+body.zen .note-split .ribbon-container {
+    position: fixed;
+    left: 0;
+    bottom: 20px;
+    width: 100%;
+    z-index: 1000;
+    opacity: 0; /* Hidden unless the current note split is focused */
+    pointer-events: none;
+    transition: opacity 100ms linear;
+}
+
+body.zen .note-split:focus-within .ribbon-container {
+    opacity: 1; /* Show when the note split is focused */
+}
+
+body.zen .note-split .ribbon-container .ribbon-body {
+    border: 0;
+}
+
+body.zen .note-split .ribbon-container .classic-toolbar-widget {
+    margin: auto;
+    width: fit-content;
+    box-shadow: 0px 10px 20px rgba(0, 0, 0, .1);
+    border-radius: 8px;
+    border: 1px solid var(--main-border-color);
+    padding: 4px;
+    background: var(--menu-background-color);
+}
+
+body.zen .note-split:focus-within .ribbon-container .classic-toolbar-widget {
+    pointer-events: all;
+}
+
+@media (max-width: 1300px) {
+    body.zen .note-split .ribbon-container .classic-toolbar-widget {
+        /* Set the toolbar to full with */
+        width: 100%;
+    }
+
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_smw,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sme,
+    body.zen .classic-toolbar-widget .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_s {
+        /* Force toolbar items overflow dropdowns open upwards */
+        top: auto;
+        bottom: 100%;
+    }
+}
+
 /* Content renderer */
 
 footer.file-footer,

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

@@ -15,7 +15,7 @@
     --native-titlebar-background: #00000000;
     --window-background-color-bgfx: transparent; /* When background effects enabled */
 
-    --main-background-color: #272727;
+    --main-background-color: #242424;
     --main-text-color: #ccc;
     --main-border-color: #454545;
     --subtle-border-color: #313131;
@@ -166,6 +166,9 @@
     --protected-session-active-icon-color: #8edd8e;
     --sync-status-error-pulse-color: #f47871;
 
+    --center-pane-vert-layout-background-color-bgfx: #0c0c0c69;
+    --center-pane-horiz-layout-background-color-bgfx: #1e1e1ec7;
+
     --right-pane-heading-color: gray;
 
     --root-background: var(--left-pane-background-color);
@@ -192,8 +195,8 @@
     --badge-background-color: #ffffff1a;
     --badge-text-color: var(--muted-text-color);
 
-    --promoted-attribute-card-background-color: var(--card-background-color);
-    --promoted-attribute-card-shadow-color: #000000b3;
+    --promoted-attribute-card-background-color: #ffffff21;
+    --promoted-attribute-card-shadow: none;
     
     --floating-button-shadow-color: #00000080;
     --floating-button-background-color: #494949d2;
@@ -208,6 +211,8 @@
     --floating-button-hide-button-background: #00000029;
     --floating-button-hide-button-color: #ffffff63;
 
+    --right-pane-background-color: var(--main-background-color);
+    --right-pane-background-color-bgfx: #0c0c0c24; /* Only for the vertical layout */
     --right-pane-item-hover-background: #ffffff26;
     --right-pane-item-hover-color: white;
 
@@ -227,8 +232,8 @@
     --card-background-color: #ffffff12;
     --card-background-hover-color: #3c3c3c;
     --card-background-press-color: #464646;
-    --card-border-color: #222222;
-    --card-box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
+    --card-border-color: transparent;
+    --card-box-shadow: none;
 
     --calendar-color: var(--menu-text-color);
     --calendar-weekday-labels-color: var(--muted-text-color);
@@ -295,3 +300,9 @@ body ::-webkit-calendar-picker-indicator {
 body .todo-list input[type="checkbox"]:not(:checked):before {
     border-color: var(--muted-text-color) !important;
 }
+
+.tinted-quick-edit-dialog {
+    --modal-background-color: hsl(var(--custom-color-hue), 8.8%, 11.2%);
+    --modal-border-color: hsl(var(--custom-color-hue), 9.4%, 25.1%);
+    --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 13.2%, 20.8%);
+}

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

@@ -159,6 +159,9 @@
     --protected-session-active-icon-color: #16b516;
     --sync-status-error-pulse-color: #ff5528;
 
+    --center-pane-vert-layout-background-color-bgfx: #ffffff75;
+    --center-pane-horiz-layout-background-color-bgfx: #ffffffd6;
+
     --right-pane-heading-color: gray;
 
     --root-background: var(--left-pane-background-color);
@@ -185,8 +188,8 @@
     --badge-background-color: #00000011;
     --badge-text-color: var(--muted-text-color);
 
-    --promoted-attribute-card-background-color: var(--card-background-color);
-    --promoted-attribute-card-shadow-color: #00000033;
+    --promoted-attribute-card-background-color: #00000014;
+    --promoted-attribute-card-shadow: none;
 
     --floating-button-shadow-color: #00000042;
     --floating-button-background-color: #eaeaeacc;
@@ -207,6 +210,8 @@
     --new-tab-button-hover-background: white;
     --new-tab-button-hover-color: black;
 
+    --right-pane-background-color: var(--main-background-color);
+    --right-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx); /* Only for the vertical layout */
     --right-pane-item-hover-background: #ececec;
     --right-pane-item-hover-color: inherit;
 
@@ -223,12 +228,12 @@
 
     --code-block-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), 0px 0px 2px rgba(0, 0, 0, 0.2);
 
-    --card-background-color: var(--accented-background-color);
+    --card-background-color: #0000000d;
     --card-background-hover-color: #f9f9f9;
     --card-background-press-color: #efefef;
-    --card-border-color: #eaeaea;
+    --card-border-color: transparent;
     --card-shadow-color: rgba(0, 0, 0, 0.1);
-    --card-box-shadow: 0 0 12px var(--card-shadow-color);
+    --card-box-shadow: none;
 
     --calendar-color: var(--menu-text-color);
     --calendar-weekday-labels-color: var(--muted-text-color);
@@ -271,3 +276,9 @@
      * This value is unset for gray tones. */
     --custom-bg-color: hsl(var(--custom-color-hue), 37%, 89%, 1);
 }
+
+.tinted-quick-edit-dialog {
+    --modal-background-color: hsl(var(--custom-color-hue), 56%, 96%);
+    --modal-border-color: hsl(var(--custom-color-hue), 33%, 41%);
+    --promoted-attribute-card-background-color: hsl(var(--custom-color-hue), 40%, 88%);
+}

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

@@ -82,6 +82,7 @@
 
     /* Theme capabilities */
     --tab-note-icons: true;
+    --allow-background-effects: true;
 
     /* To ensure that a tree item's custom color remains sufficiently contrasted and readable,
      * the color is adjusted based on the current color scheme (light or dark). The lightness
@@ -131,7 +132,8 @@ body.mobile .dropdown-menu .dropdown-menu {
 
 body.desktop .dropdown-menu::before,
 :root .ck.ck-dropdown__panel::before,
-:root .excalidraw .popover::before {
+:root .excalidraw .popover::before,
+body.zen .note-split .ribbon-container .classic-toolbar-widget::before {
     content: "";
     backdrop-filter: var(--dropdown-backdrop-filter);
     border-radius: var(--dropdown-border-radius);

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

@@ -148,7 +148,7 @@ div.note-detail-empty {
     --options-card-min-width: 500px;
     --options-card-max-width: 900px;
     --options-card-padding: 17px;
-    --options-title-font-size: 1rem;
+    --options-title-font-size: .75rem;
     --options-title-offset: 13px;
 }
 /* Create a gap at the top of the option pages */
@@ -173,8 +173,7 @@ div.note-detail-empty {
 }
 
 .options-section:not(.tn-no-card) {
-    margin: auto;    
-    border-radius: 12px;
+    border-radius: 8px;
     border: 1px solid var(--card-border-color) !important;
     box-shadow: var(--card-box-shadow);
     background: var(--card-background-color);
@@ -182,7 +181,7 @@ div.note-detail-empty {
     margin-bottom: calc(var(--options-title-offset) + 26px) !important;
 }
 
-body.desktop .option-section:not(.tn-no-card) {
+body.desktop .options-section:not(.tn-no-card) {
     min-width: var(--options-card-min-width);
     max-width: var(--options-card-max-width);
 }
@@ -193,9 +192,16 @@ body.desktop .option-section:not(.tn-no-card) {
     padding-bottom: var(--default-padding);
 }
 
+.options-section:not(.tn-no-card) h4,
+.options-section:not(.tn-no-card) h5 {
+    text-transform: uppercase;
+    letter-spacing: .4pt;
+}
+
+
 .options-section:not(.tn-no-card) h4 {
     font-size: var(--options-title-font-size);
-    font-weight: bold;
+    font-weight: 600;
     color: var(--launcher-pane-text-color);
     margin-top: calc(-1 * var(--options-card-padding) - var(--options-title-font-size) - var(--options-title-offset)) !important;
     margin-bottom: calc(var(--options-title-offset) + var(--options-card-padding)) !important;

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

@@ -34,6 +34,7 @@
 div.promoted-attributes-container {
     margin-top: 8px;
     margin-bottom: 8px;
+    margin-inline-start: 12px;
 }
 
 /*

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

@@ -8,7 +8,7 @@
 }
 
 :root {
-    --dropdown-backdrop-filter: blur(10px) saturate(6);
+    --dropdown-backdrop-filter: blur(20px) saturate(6);
     --dropdown-border-radius: 10px;
 }
 
@@ -35,30 +35,52 @@ body.mobile {
 }
 
 /* #region Mica */
+
 body.background-effects.platform-win32 {
+    /* Quirk: --background-material is read before "theme-supports-background-effects" class
+     * is applied. Apply the matterial even if the theme doesn't support it. */
     --background-material: tabbed;
+}
+
+body.background-effects.theme-supports-background-effects.platform-win32 {
     --launcher-pane-horiz-border-color: var(--launcher-pane-horiz-border-color-bgfx);
     --launcher-pane-horiz-background-color: var(--launcher-pane-horiz-background-color-bgfx);
     --launcher-pane-vert-background-color: var(--launcher-pane-vert-background-color-bgfx);
     --tab-background-color: var(--window-background-color-bgfx);
     --new-tab-button-background: var(--window-background-color-bgfx);
     --active-tab-background-color: var(--launcher-pane-horiz-background-color);
+    --root-background: transparent;
 }
 
 body.background-effects.platform-win32.layout-vertical {
-    --left-pane-background-color: var(--window-background-color-bgfx);
     --background-material: mica;
 }
 
-body.background-effects.platform-win32,
-body.background-effects.platform-win32 #root-widget {
+body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical {
+    --left-pane-background-color: var(--window-background-color-bgfx);
+    --center-pane-background-color-bgfx: var(--center-pane-vert-layout-background-color-bgfx);
+    --right-pane-background-color: var(--right-pane-background-color-bgfx);
+}
+
+body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal {
+    --center-pane-background-color-bgfx: var(--center-pane-horiz-layout-background-color-bgfx);
+}
+
+body.background-effects.theme-supports-background-effects.platform-win32,
+body.background-effects.theme-supports-background-effects.platform-win32 #root-widget {
     background: var(--window-background-color-bgfx) !important;
 }
 
-body.background-effects.platform-win32.layout-horizontal #horizontal-main-container,
-body.background-effects.platform-win32.layout-vertical #vertical-main-container {
+body.background-effects.theme-supports-background-effects.platform-win32.layout-horizontal #horizontal-main-container,
+body.background-effects.theme-supports-background-effects.platform-win32.layout-vertical #vertical-main-container {
     background-color: var(--root-background);
 }
+
+/* Note split with background effects */
+body.background-effects.theme-supports-background-effects.platform-win32 #center-pane .note-split.bgfx {
+    --note-split-background-color: var(--center-pane-background-color-bgfx);
+}
+
 /* #endregion */
 
 /* Matches when the left pane is collapsed */
@@ -72,9 +94,21 @@ body.layout-vertical #horizontal-main-container.left-pane-hidden #launcher-pane.
     border-inline-end: 2px solid var(--left-pane-collapsed-border-color);
 }
 
-body.background-effects.zen #root-widget {
-    --main-background-color: transparent;
-    --root-background: transparent;
+/*
+ * Zen mode
+ */
+
+@keyframes zen-formatting-toolbar-entrance {
+    from {
+        transform: translateY(200%);
+    } to {
+        transform: translateY(0);
+    }
+}
+
+body.zen .note-split .ribbon-container .classic-toolbar-widget {
+    position: relative;
+    animation: zen-formatting-toolbar-entrance 300ms ease-out;
 }
 
 /*
@@ -1171,23 +1205,18 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
  * CENTER PANE
  */
 
-#center-pane {
-    background: var(--main-background-color);
-}
-
-.vertical-layout #center-pane {
+ /* The first visible note split */
+.vertical-layout #center-pane .note-split:not(.visible ~ .visible) {
     border-radius: var(--center-pane-border-radius) 0 0 0;
 }
 
-.note-split {
+#center-pane .note-split {
     padding-top: 2px;
-    animation: note-entrance 100ms linear;
-    /* will-change: opacity; -- causes some weird artifacts to the note menu in split view */
+    background-color: var(--note-split-background-color, var(--main-background-color));
 }
 
-.split-note-container-widget > .gutter {
-    background: var(--root-background) !important;
-    transition: background 150ms ease-out;
+body:not(.background-effects) #center-pane .note-split {
+    animation: note-entrance 100ms linear;
 }
 
 /*
@@ -1200,9 +1229,9 @@ body.layout-vertical .tab-row-widget-is-sorting .note-tab.note-tab-is-dragging .
 
 @keyframes note-entrance {
     from {
-        opacity: 0;
+        filter: opacity(0);
     } to {
-        opacity: 1;
+        filter: opacity(1);
     }
 }
 
@@ -1328,8 +1357,7 @@ div.promoted-attribute-cell {
     --pa-card-padding-inline-end: 2px;
     --input-background-color: transparent;
 
-    box-shadow: 1px 1px 2px var(--promoted-attribute-card-shadow-color);
-
+    box-shadow: var(--promoted-attribute-card-shadow);
     display: inline-flex;
     margin: 0;
     border-radius: 8px;
@@ -1716,7 +1744,7 @@ div.find-replace-widget div.find-widget-found-wrapper > span {
  */
 
 #right-pane {
-    background: var(--main-background-color);
+    background: var(--right-pane-background-color);
 }
 
 #right-pane div.card-header {

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

@@ -520,9 +520,7 @@
   "max_content_width": {
     "max_width_unit": "بكسل",
     "title": "عرض المحتوى",
-    "reload_button": "اعادة تحميل الواجهة",
-    "max_width_label": "اقصى عرض للمحتوى",
-    "reload_description": "تغييرات من خيارات المظهر"
+    "max_width_label": "اقصى عرض للمحتوى"
   },
   "native_title_bar": {
     "enabled": "مفعل",

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

@@ -1107,9 +1107,6 @@
     "title": "内容宽度",
     "default_description": "Trilium默认会限制内容的最大宽度以提高在宽屏中全屏时的可读性。",
     "max_width_label": "内容最大宽度(像素)",
-    "apply_changes_description": "要应用内容宽度更改，请点击",
-    "reload_button": "重载前端",
-    "reload_description": "来自外观选项的更改",
     "max_width_unit": "像素"
   },
   "native_title_bar": {

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

@@ -1104,9 +1104,6 @@
     "title": "Inhaltsbreite",
     "default_description": "Trilium begrenzt standardmäßig die maximale Inhaltsbreite, um die Lesbarkeit für maximierte Bildschirme auf Breitbildschirmen zu verbessern.",
     "max_width_label": "Maximale Inhaltsbreite in Pixel",
-    "apply_changes_description": "Um Änderungen an der Inhaltsbreite anzuwenden, klicke auf",
-    "reload_button": "Frontend neu laden",
-    "reload_description": "Änderungen an den Darstellungsoptionen",
     "max_width_unit": "Pixel"
   },
   "native_title_bar": {

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

@@ -1107,10 +1107,7 @@
     "title": "Content Width",
     "default_description": "Trilium by default limits max content width to improve readability for maximized screens on wide screens.",
     "max_width_label": "Max content width",
-    "max_width_unit": "pixels",
-    "apply_changes_description": "To apply content width changes, click on",
-    "reload_button": "reload frontend",
-    "reload_description": "changes from appearance options"
+    "max_width_unit": "pixels"
   },
   "native_title_bar": {
     "title": "Native Title Bar (requires app restart)",

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

@@ -1107,10 +1107,7 @@
     "title": "Ancho del contenido",
     "default_description": "Trilium limita de forma predeterminada el ancho máximo del contenido para mejorar la legibilidad de ventanas maximizadas en pantallas anchas.",
     "max_width_label": "Ancho máximo del contenido en píxeles",
-    "max_width_unit": "píxeles",
-    "apply_changes_description": "Para aplicar cambios en el ancho del contenido, haga clic en",
-    "reload_button": "recargar la interfaz",
-    "reload_description": "cambios desde las opciones de apariencia"
+    "max_width_unit": "píxeles"
   },
   "native_title_bar": {
     "title": "Barra de título nativa (requiere reiniciar la aplicación)",

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

@@ -1106,9 +1106,6 @@
     "title": "Largeur du contenu",
     "default_description": "Trilium limite par défaut la largeur maximale du contenu pour améliorer la lisibilité sur des écrans larges.",
     "max_width_label": "Largeur maximale du contenu en pixels",
-    "apply_changes_description": "Pour appliquer les modifications de largeur du contenu, cliquez sur",
-    "reload_button": "recharger l'interface",
-    "reload_description": "changements par rapport aux options d'apparence",
     "max_width_unit": "Pixels"
   },
   "native_title_bar": {

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

@@ -1569,10 +1569,7 @@
     "title": "Larghezza del contenuto",
     "default_description": "Per impostazione predefinita, Trilium limita la larghezza massima del contenuto per migliorare la leggibilità sugli schermi più grandi.",
     "max_width_label": "Larghezza massima del contenuto",
-    "max_width_unit": "pixel",
-    "apply_changes_description": "Per applicare le modifiche alla larghezza del contenuto, fare clic su",
-    "reload_button": "ricarica frontend",
-    "reload_description": "modifiche dalle opzioni di aspetto"
+    "max_width_unit": "pixel"
   },
   "native_title_bar": {
     "title": "Barra del titolo nativa (richiede il riavvio dell'app)",

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

@@ -830,13 +830,10 @@
     "theme_defined": "テーマが定義されました"
   },
   "max_content_width": {
-    "reload_button": "フロントエンドをリロード",
     "title": "コンテンツ幅",
     "default_description": "Triliumは、ワイドスクリーンで最大化された画面での可読性を向上させるために、デフォルトでコンテンツの最大幅を制限しています。",
     "max_width_label": "最大コンテンツ幅",
-    "max_width_unit": "ピクセル",
-    "apply_changes_description": "コンテンツ幅の変更を適用するには、クリックしてください",
-    "reload_description": "外観設定から変更"
+    "max_width_unit": "ピクセル"
   },
   "theme": {
     "title": "アプリのテーマ",

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

@@ -1464,10 +1464,7 @@
     "title": "Szerokość zawartości",
     "default_description": "Trilium domyślnie ogranicza maksymalną szerokość zawartości, aby poprawić czytelność na zmaksymalizowanych ekranach o dużej szerokości.",
     "max_width_label": "Maksymalna szerokość zawartości",
-    "max_width_unit": "piksele",
-    "apply_changes_description": "Aby zastosować zmiany szerokości zawartości, kliknij na",
-    "reload_button": "przeładuj frontend",
-    "reload_description": "zmiany z opcji wyglądu"
+    "max_width_unit": "piksele"
   },
   "native_title_bar": {
     "title": "Natywny pasek tytułu (wymaga ponownego uruchomienia aplikacji)",

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

@@ -1082,10 +1082,7 @@
     "title": "Largura do Conteúdo",
     "default_description": "Por padrão, o Trilium limita a largura máxima do conteúdo para melhorar a legibilidade em janelas maximizadas em ecrãs largos.",
     "max_width_label": "Largura máxima do conteúdo",
-    "max_width_unit": "pixels",
-    "apply_changes_description": "Para aplicar as alterações de largura do conteúdo, clique em",
-    "reload_button": "recarregar frontend",
-    "reload_description": "alterações de opções de aparência"
+    "max_width_unit": "pixels"
   },
   "native_title_bar": {
     "title": "Barra de Título Nativa (requer recarregar a app)",

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

@@ -1304,9 +1304,6 @@
     "title": "Largura do Conteúdo",
     "max_width_label": "Largura máxima do conteúdo",
     "max_width_unit": "pixels",
-    "apply_changes_description": "Para aplicar as alterações de largura do conteúdo, clique em",
-    "reload_button": "recarregar frontend",
-    "reload_description": "alterações de opções de aparência",
     "default_description": "Por padrão, o Trilium limita a largura máxima do conteúdo para melhorar a legibilidade em janelas maximizadas em telas wide."
   },
   "native_title_bar": {

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

@@ -796,12 +796,9 @@
     "modal_body_text": "Din cauza limitărilor la nivel de navigator, nu este posibilă citirea clipboard-ului din JavaScript. Inserați Markdown-ul pentru a-l importa în caseta de mai jos și dați clic pe butonul Import"
   },
   "max_content_width": {
-    "apply_changes_description": "Pentru a aplica schimbările de lățime a conținutului, dați click pe",
     "default_description": "În mod implicit Trilium limitează lățimea conținutului pentru a îmbunătăți lizibilitatea pentru ferestrele maximizate pe ecrane late.",
     "max_width_label": "Lungimea maximă a conținutului",
     "max_width_unit": "pixeli",
-    "reload_button": "reîncarcă interfața",
-    "reload_description": "schimbări din opțiunile de afișare",
     "title": "Lățime conținut"
   },
   "mobile_detail_menu": {

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

@@ -1203,11 +1203,8 @@
   "max_content_width": {
     "max_width_unit": "пикселей",
     "title": "Ширина контентной области",
-    "reload_button": "перезагрузить интерфейс",
     "default_description": "Trilium по умолчанию ограничивает максимальную ширину контента, чтобы улучшить читаемость на широких экранах.",
-    "max_width_label": "Максимальная ширина контентной области",
-    "apply_changes_description": "Чтобы применить изменения, нажмите на",
-    "reload_description": "изменения в параметрах внешнего вида"
+    "max_width_label": "Максимальная ширина контентной области"
   },
   "native_title_bar": {
     "enabled": "включено",

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

@@ -1104,9 +1104,6 @@
     "title": "內容寬度",
     "default_description": "Trilium 預設會限制內容的最大寬度以提高在寬螢幕中全螢幕時的可讀性。",
     "max_width_label": "內容最大寬度（像素）",
-    "apply_changes_description": "要套用內容寬度更改，請點擊",
-    "reload_button": "重新載入前端",
-    "reload_description": "來自外觀選項的更改",
     "max_width_unit": "像素"
   },
   "native_title_bar": {

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

@@ -1204,10 +1204,7 @@
     "title": "Ширина вмісту",
     "default_description": "Trilium за замовчуванням обмежує максимальну ширину вмісту, щоб поліпшити читабельність на широкоформатних екранах у режимі максимального розширення.",
     "max_width_label": "Максимальна ширина вмісту",
-    "max_width_unit": "пікселів",
-    "apply_changes_description": "Щоб застосувати зміни ширини вмісту, натисніть на",
-    "reload_button": "перезавантажити інтерфейс",
-    "reload_description": "зміни в параметрах зовнішнього вигляду"
+    "max_width_unit": "пікселів"
   },
   "native_title_bar": {
     "title": "Нативний рядок заголовка (потрібен перезапуск)",

apps/client/src/utils/css-var.ts

@@ -23,6 +23,24 @@ export class CssVarReader {
         return (!isNaN(number.valueOf()) ? number.valueOf() : defaultValue)
     }
 
+    asBoolean(defaultValue?: boolean) {
+        let value = this.value.toLocaleLowerCase().trim();
+        let result: boolean | undefined;
+
+        switch (value) {
+            case "true":
+            case "1":
+                result = true;
+                break;
+            case "false":
+            case "0":
+                result = false;
+                break;
+        }
+
+        return (result !== undefined) ? result : defaultValue;
+    }
+
     asEnum<T>(enumType: T, defaultValue?: T[keyof T]): T[keyof T] | undefined {
         let result: T[keyof T] | undefined;
 

apps/client/src/widgets/FloatingButtons.css

@@ -6,7 +6,7 @@
 .floating-buttons-children,
 .show-floating-buttons {
     position: absolute;
-    top: var(--floating-buttons-vert-offset, 10px);
+    top: var(--floating-buttons-vert-offset, 14px);
     inset-inline-end: var(--floating-buttons-horiz-offset, 10px);
     display: flex;
     flex-direction: row;

apps/client/src/widgets/collections/NoteList.css

@@ -1,5 +1,6 @@
 .note-list-widget {
     min-height: 0;
+    max-width: var(--max-content-width); /* Inherited from .note-split */
     overflow: auto;
     contain: none !important;
 }

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

@@ -1,9 +1,10 @@
 import { EventData } from "../../components/app_context.js";
+import { LOCALES } from "@triliumnext/commons";
+import { readCssVar } from "../../utils/css-var.js";
 import FlexContainer from "./flex_container.js";
 import options from "../../services/options.js";
 import type BasicWidget from "../basic_widget.js";
 import utils from "../../services/utils.js";
-import { LOCALES } from "@triliumnext/commons";
 
 /**
  * The root container is the top-most widget/container, from which the entire layout derives.
@@ -30,9 +31,11 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
             window.visualViewport?.addEventListener("resize", () => this.#onMobileResize());
         }
 
+        this.#setMaxContentWidth(options.getInt("maxContentWidth") ?? 0);
         this.#setMotion(options.is("motionEnabled"));
         this.#setShadows(options.is("shadowsEnabled"));
         this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
+        this.#setThemeCapabilities();
         this.#setLocaleAndDirection(options.get("locale"));
 
         return super.render();
@@ -50,7 +53,12 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         if (loadResults.isOptionReloaded("backdropEffectsEnabled")) {
             this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
         }
+
+        if (loadResults.isOptionReloaded("maxContentWidth")) {
+            this.#setMaxContentWidth(options.getInt("maxContentWidth") ?? 0);
         }
+    }
+
 
     #onMobileResize() {
         const currentViewportHeight = getViewportHeight();
@@ -58,6 +66,11 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         this.$widget.toggleClass("virtual-keyboard-opened", isKeyboardOpened);
     }
 
+    #setMaxContentWidth(width: number) {
+        width = Math.max(width, 640);
+        document.body.style.setProperty("--preferred-max-content-width", `${width}px`);
+    }
+
     #setMotion(enabled: boolean) {
         document.body.classList.toggle("motion-disabled", !enabled);
         jQuery.fx.off = !enabled;
@@ -71,6 +84,15 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         document.body.classList.toggle("backdrop-effects-disabled", !enabled);
     }
 
+    #setThemeCapabilities() {
+        // Supports background effects
+
+        const useBgfx = readCssVar(document.documentElement, "allow-background-effects")
+                        .asBoolean(false);
+
+        document.body.classList.toggle("theme-supports-background-effects", useBgfx);
+    }
+
     #setLocaleAndDirection(locale: string) {
         const correspondingLocale = LOCALES.find(l => l.id === locale);
         document.body.lang = locale;

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

@@ -57,6 +57,7 @@ const TPL = /*html*/`\
         }
     </style>
 
+    <div class="quick-edit-dialog-wrapper">
         <div class="modal-dialog modal-lg" role="document">
             <div class="modal-content">
                 <div class="modal-header">
@@ -71,6 +72,7 @@ const TPL = /*html*/`\
                 </div>
             </div>
         </div>
+    </div>
 </div>
 `;
 
@@ -79,6 +81,7 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
     private noteContext: NoteContext;
     private $modalHeader!: JQuery<HTMLElement>;
     private $modalBody!: JQuery<HTMLElement>;
+    private $wrapper!: JQuery<HTMLDivElement>;
 
     constructor() {
         super();
@@ -93,6 +96,7 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
         const $newWidget = $(TPL);
         this.$modalHeader = $newWidget.find(".modal-title");
         this.$modalBody = $newWidget.find(".modal-body");
+        this.$wrapper = $newWidget.find(".quick-edit-dialog-wrapper");
 
         const children = this.$widget.children();
         this.$modalHeader.append(children[0]);
@@ -112,6 +116,21 @@ export default class PopupEditorDialog extends Container<BasicWidget> {
             }
         });
 
+        const colorClass = this.noteContext.note?.getColorClass();
+        const wrapperElement = this.$wrapper.get(0)!;
+
+        if (colorClass) {
+            wrapperElement.className = "quick-edit-dialog-wrapper " + colorClass;
+        } else {
+            wrapperElement.className = "quick-edit-dialog-wrapper";
+        }
+
+        const customHue = getComputedStyle(wrapperElement).getPropertyValue("--custom-color-hue");
+        if (customHue) {
+            /* Apply the tinted-dialog class only if the custom color CSS class specifies a hue */
+            wrapperElement.classList.add("tinted-quick-edit-dialog");
+        }
+
         const activeEl = document.activeElement;
         if (activeEl && "blur" in activeEl) {
             (activeEl as HTMLElement).blur();

apps/client/src/widgets/note_detail.ts

@@ -39,6 +39,7 @@ const TPL = /*html*/`
 <div class="note-detail">
     <style>
     .note-detail {
+        max-width: var(--max-content-width); /* Inherited from .note-split */
         font-family: var(--detail-font-family);
         font-size: var(--detail-font-size);
     }

apps/client/src/widgets/note_wrapper.ts

@@ -52,6 +52,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
 
         const note = this.noteContext?.note;
         if (!note) {
+            this.$widget.addClass("bgfx");
             return;
         }
 
@@ -61,7 +62,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
 
         this.$widget.addClass(utils.getNoteTypeClass(note.type));
         this.$widget.addClass(utils.getMimeTypeClass(note.mime));
-
+        this.$widget.toggleClass("bgfx", note.isOptions());
         this.$widget.toggleClass("protected", note.isProtected);
 
         const noteLanguage = note?.getLabelValue("language");
@@ -70,7 +71,7 @@ export default class NoteWrapperWidget extends FlexContainer<BasicWidget> {
     }
 
     #isFullWidthNote(note: FNote) {
-        if (["image", "mermaid", "book", "render", "canvas", "webView", "mindMap"].includes(note.type)) {
+        if (["code", "image", "mermaid", "book", "render", "canvas", "webView", "mindMap"].includes(note.type)) {
             return true;
         }
 

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

@@ -299,10 +299,6 @@ function MaxContentWidth() {
                     />
                 </FormGroup>
             </Column>
-
-            <p>
-                {t("max_content_width.apply_changes_description")} <Button text={t("max_content_width.reload_button")} size="micro" onClick={reloadFrontendApp} />
-            </p>
         </OptionsSection>
     )
 }

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

@@ -97,7 +97,7 @@ function TokenList({ tokens }: { tokens: EtapiToken[] }) {
 
     return (
         tokens.length ? (
-            <div style={{ overflow: "auto", height: "500px"}}>
+            <div style={{ overflow: "auto"}}>
                 <table className="table table-stripped">
                     <thead>
                         <tr>

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Advanced Usage/ETAPI (REST API).html

@@ -1,5 +1,5 @@
 <aside class="admonition tip">
-  <p>For a quick start, consult the&nbsp;<a class="reference-link" href="#root/_help_9qPsTWBorUhQ">API Reference</a>.</p>
+  <p>For a quick start, consult the&nbsp;<a class="reference-link" href="#root/pgxEVkzLl1OP/_help_9qPsTWBorUhQ">API Reference</a>.</p>
 </aside>
 <p>ETAPI is Trilium's public/external REST API. It is available since Trilium
   v0.50.</p>
@@ -7,7 +7,7 @@
 <p>As an alternative to calling the API directly, there are client libraries
   to simplify this</p>
 <ul>
-  <li><a href="https://github.com/Nriver/trilium-py">trilium-py</a>, you can
+  <li data-list-item-id="e3342ddfa108f6c8c6c47d7d3da8b02fa"><a href="https://github.com/Nriver/trilium-py">trilium-py</a>, you can
     use Python to communicate with Trilium.</li>
 </ul>
 <h2>Obtaining a token</h2>
@@ -25,10 +25,10 @@ Authorization: ETAPITOKEN</code></pre>
 <p>Since v0.56 you can also use basic auth format:</p><pre><code class="language-text-x-trilium-auto">GET https://myserver.com/etapi/app-info
 Authorization: Basic BATOKEN</code></pre>
 <ul>
-  <li>Where <code>BATOKEN = BASE64(username + ':' + password)</code> - this is
+  <li data-list-item-id="ec59ac570a3d2a846da38378a5f2428ed">Where <code>BATOKEN = BASE64(username + ':' + password)</code> - this is
     a standard Basic Auth serialization</li>
-  <li>Where <code>username</code> is "etapi"</li>
-  <li>And <code>password</code> is the generated ETAPI token described above.</li>
+  <li data-list-item-id="e18e2e73ebecc949dd4a51cd9f8bb0b91">Where <code>username</code> is "etapi"</li>
+  <li data-list-item-id="ee892223f95cef4a53caec5477ab31edb">And <code>password</code> is the generated ETAPI token described above.</li>
 </ul>
 <p>Basic Auth is meant to be used with tools which support only basic auth.</p>
 <h2>Interaction using Bash scripts</h2>
@@ -44,10 +44,10 @@ NOTE_ID="i6ra4ZshJhgN"
 curl "$SERVER/etapi/notes/$NOTE_ID/content" -H "Authorization: $TOKEN" </code></pre>
 <p>Make sure to replace the values of:</p>
 <ul>
-  <li><code>TOKEN</code> with your ETAPI token.</li>
-  <li><code>SERVER</code> with the correct protocol, host name and port to your
+  <li data-list-item-id="e68020f83acc951e180bb405d149a64a5"><code>TOKEN</code> with your ETAPI token.</li>
+  <li data-list-item-id="ef4c31df5f6d18811e7de0ee8ff95f3a7"><code>SERVER</code> with the correct protocol, host name and port to your
     Trilium instance.</li>
-  <li><code>NOTE_ID</code> with an existing note ID to download.</li>
+  <li data-list-item-id="e25086bb4c54d32259f987f9366e22204"><code>NOTE_ID</code> with an existing note ID to download.</li>
 </ul>
 <p>As another example, to obtain a .zip export of a note and place it in
   a directory called <code>out</code>, simply replace the last statement in

apps/server/src/assets/doc_notes/en/User Guide/User Guide/Note Types/Mermaid Diagrams.html

@@ -1,6 +1,7 @@
 <aside class="admonition tip">
   <p>For a quick understanding of the Mermaid syntax, see&nbsp;<a class="reference-link"
-    href="#root/_help_WWgeUaBb7UfC">Syntax reference</a>&nbsp;(official documentation).</p>
+    href="#root/pOsGYCXsbNQG/KSZ04uQ2D1St/s1aBHPd79XYj/_help_WWgeUaBb7UfC">Syntax reference</a>&nbsp;(official
+    documentation).</p>
 </aside>
 <figure class="image image-style-align-center">
   <img style="aspect-ratio:886/663;" src="2_Mermaid Diagrams_image.png"
@@ -14,9 +15,9 @@
 <p>Depending on the chart being edited and user preference, there are two
   layouts supported by the Mermaid note type:</p>
 <ul>
-  <li>Horizontal, where the source code (editable part) is on the left side
+  <li data-list-item-id="e5998f20495a1079ee7b6e284dc4d14e4">Horizontal, where the source code (editable part) is on the left side
     of the screen and the preview is to the right.</li>
-  <li>Vertical, where the source code is at the bottom of the screen and the
+  <li data-list-item-id="ebebfbd8cf2125c70056e3e9075d8681e">Vertical, where the source code is at the bottom of the screen and the
     preview is at the top.</li>
 </ul>
 <p>It's possible to switch between the two layouts at any time by pressing
@@ -24,40 +25,44 @@
   <img src="Mermaid Diagrams_image.png">icon in the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;area.</p>
 <h2>Interaction</h2>
 <ul>
-  <li>The source code of the diagram (in Mermaid format) is displayed on the
+  <li data-list-item-id="e67d8f093c4793e19e2ade2d58728ae81">The source code of the diagram (in Mermaid format) is displayed on the
     left or bottom side of the note (depending on the layout).
     <ul>
-      <li>Changing the diagram code will refresh automatically the diagram.</li>
+      <li data-list-item-id="e4d777ef787093815b961d734021ccc55">Changing the diagram code will refresh automatically the diagram.</li>
     </ul>
   </li>
-  <li>The preview of the diagram is displayed at the right or top side of the
+  <li data-list-item-id="e6faf589831e3252f8cda42f62248377a">The preview of the diagram is displayed at the right or top side of the
     note (depending on the layout):
     <ul>
-      <li>There are dedicated buttons at the bottom-right of the preview to control
+      <li data-list-item-id="e1dc5994137e511eb29657629d9e729a3">There are dedicated buttons at the bottom-right of the preview to control
         the zoom in, zoom out or re-center the diagram:
         <img src="1_Mermaid Diagrams_image.png">
       </li>
-      <li>The preview can be moved around by holding the left mouse button and dragging.</li>
-      <li>Zooming can also be done by using the scroll wheel.</li>
-      <li>The zoom and position on the preview will remain fixed as the diagram
+      <li data-list-item-id="e51812ca016db170ceb6814007a60eb10">The preview can be moved around by holding the left mouse button and dragging.</li>
+      <li
+      data-list-item-id="e617128e494ed43ca5d0f5c749a8c9208">Zooming can also be done by using the scroll wheel.</li>
+  <li data-list-item-id="e7b87c55d329003996861f24d8d162b85">The zoom and position on the preview will remain fixed as the diagram
     changes, to be able to work more easily with large diagrams.</li>
   </ul>
   </li>
-  <li>The size of the source/preview panes can be adjusted by hovering over
+  <li data-list-item-id="e11cf4ecd9d2408ce5a46b949dea40b06">The size of the source/preview panes can be adjusted by hovering over
     the border between them and dragging it with the mouse.</li>
-  <li>In the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;area:
+  <li data-list-item-id="ebc96b0fe8366ef4e00561de1c866d53b">In the&nbsp;<a class="reference-link" href="#root/_help_XpOYSgsLkTJy">Floating buttons</a>&nbsp;area:
     <ul>
-      <li>The source/preview can be laid out left-right or bottom-top via the <em>Move editing pane to the left / bottom</em> option.</li>
-      <li>Press <em>Lock editing</em> to automatically mark the note as read-only.
+      <li data-list-item-id="e12f31dc31db3c8be1fe87822ca2f451e">The source/preview can be laid out left-right or bottom-top via the <em>Move editing pane to the left / bottom</em> option.</li>
+      <li
+      data-list-item-id="ed29e7616e6c77105103a68b1e8a6f7b3">Press <em>Lock editing</em> to automatically mark the note as read-only.
         In this mode, the code pane is hidden and the diagram is displayed full-size.
         Similarly, press <em>Unlock editing</em> to mark a read-only note as editable.</li>
-      <li>Press the <em>Copy image reference to the clipboard</em> to be able to insert
+  <li
+  data-list-item-id="e2bc7d5d8d1f8f02e61a6d86a3faae3b4">Press the <em>Copy image reference to the clipboard</em> to be able to insert
     the image representation of the diagram into a text note. See&nbsp;<a class="reference-link"
     href="#root/_help_0Ofbk1aSuVRu">Image references</a>&nbsp;for more information.</li>
-      <li>Press the <em>Export diagram as SVG</em> to download a scalable/vector rendering
+    <li
+    data-list-item-id="ecaac01dc52bce394f720be2826e82026">Press the <em>Export diagram as SVG</em> to download a scalable/vector rendering
       of the diagram. Can be used to present the diagram without degrading when
       zooming.</li>
-      <li>Press the <em>Export diagram as PNG</em> to download a normal image (at
+      <li data-list-item-id="e9c815090884a394d60e06628b9e38add">Press the <em>Export diagram as PNG</em> to download a normal image (at
         1x scale, raster) of the diagram. Can be used to send the diagram in more
         traditional channels such as e-mail.</li>
       </ul>

apps/server/src/assets/translations/en/server.json

@@ -331,6 +331,7 @@
     "calendar-title": "Calendar",
     "recent-changes-title": "Recent Changes",
     "bookmarks-title": "Bookmarks",
+    "zen-mode": "Zen Mode",
     "open-today-journal-note-title": "Open Today's Journal Note",
     "quick-search-title": "Quick Search",
     "protected-session-title": "Protected Session",

apps/server/src/assets/views/desktop.ejs

@@ -28,12 +28,6 @@
 
 <%- include("./partials/windowGlobal.ejs", locals) %>
 
-<style>
-    .note-split {
-        max-width: <%= maxContentWidth %>px;
-    }
-</style>
-
 <!-- Required for match the PWA's top bar color with the theme -->
 <!-- This works even when the user directly changes --root-background in CSS -->
 <div id="background-color-tracker" style="position: absolute; visibility: hidden; color: var(--root-background); transition: color 1ms;"></div>

apps/server/src/routes/index.ts

@@ -57,7 +57,6 @@ function index(req: Request, res: Response) {
         isDev,
         isMainWindow: view === "mobile" ? true : !req.query.extraWindow,
         isProtectedSessionAvailable: protectedSessionService.isProtectedSessionAvailable(),
-        maxContentWidth: Math.max(640, parseInt(options.maxContentWidth)),
         triliumVersion: packageJson.version,
         assetPath,
         appPath,

apps/server/src/services/export/zip.ts

@@ -253,10 +253,6 @@ async function exportToZip(taskContext: TaskContext<"export">, branch: BBranch,
 
         for (let i = 0; i < targetPath.length - 1; i++) {
             const meta = noteIdToMeta[targetPath[i]];
-            if (meta === rootMeta && format === "share") {
-                continue;
-            }
-
             if (meta.dirFileName) {
                 url += `${encodeURIComponent(meta.dirFileName)}/`;
             }
@@ -375,12 +371,10 @@ async function exportToZip(taskContext: TaskContext<"export">, branch: BBranch,
         }
 
         if (noteMeta.children?.length || 0 > 0) {
-            const directoryPath = filePathPrefix !== "" || format !== "share" ? filePathPrefix + noteMeta.dirFileName : "";
+            const directoryPath = filePathPrefix + noteMeta.dirFileName;
 
             // create directory
-            if (directoryPath) {
             archive.append("", { name: `${directoryPath}/`, date: dateUtils.parseDateTime(note.utcDateModified) });
-            }
 
             for (const childMeta of noteMeta.children || []) {
                 saveNote(childMeta, `${directoryPath}/`);

apps/server/src/services/export/zip/share_theme.ts

@@ -27,7 +27,6 @@ export default class ShareThemeExportProvider extends ZipExportProvider {
     private assetsMeta: NoteMeta[] = [];
     private indexMeta: NoteMeta | null = null;
     private searchIndex: Map<string, SearchIndexEntry> = new Map();
-    private rootMeta: NoteMeta | null = null;
 
     prepareMeta(metaFile: NoteMetaFile): void {
         const assets = [
@@ -51,7 +50,6 @@ export default class ShareThemeExportProvider extends ZipExportProvider {
             noImport: true,
             dataFileName: "index.html"
         };
-        this.rootMeta = metaFile.files[0];
 
         metaFile.files.push(this.indexMeta);
     }
@@ -60,7 +58,7 @@ export default class ShareThemeExportProvider extends ZipExportProvider {
         if (!noteMeta?.notePath?.length) {
             throw new Error("Missing note path.");
         }
-        const basePath = "../".repeat(Math.max(0, noteMeta.notePath.length - 2));
+        const basePath = "../".repeat(noteMeta.notePath.length - 1);
         let searchContent = "";
 
         if (note) {
@@ -73,9 +71,6 @@ export default class ShareThemeExportProvider extends ZipExportProvider {
             if (typeof content === "string") {
                 content = content.replace(/href="[^"]*\.\/([a-zA-Z0-9_\/]{12})[^"]*"/g, (match, id) => {
                     if (match.includes("/assets/")) return match;
-                    if (id === this.rootMeta?.noteId) {
-                        return `href="${basePath}"`;
-                    }
                     return `href="#root/${id}"`;
                 });
                 content = this.rewriteFn(content, noteMeta);

apps/server/src/services/hidden_subtree_launcherbar.ts

@@ -44,13 +44,35 @@ export default function buildLaunchBarConfig() {
     };
 
     const desktopAvailableLaunchers: HiddenSubtreeItem[] = [
-        { id: "_lbBackInHistory", ...sharedLaunchers.backInHistory },
-        { id: "_lbForwardInHistory", ...sharedLaunchers.forwardInHistory },
-        { id: "_lbBackendLog", title: t("hidden-subtree.backend-log-title"), type: "launcher", targetNoteId: "_backendLog", icon: "bx bx-terminal" },
+        {
+            id: "_lbBackInHistory",
+            ...sharedLaunchers.backInHistory
+        },
+        {   
+            id: "_lbForwardInHistory",
+            ...sharedLaunchers.forwardInHistory
+        },
+        { 
+            id: "_lbBackendLog",
+            title: t("hidden-subtree.backend-log-title"),
+            type: "launcher",
+            targetNoteId: "_backendLog",
+            icon: "bx bx-terminal" 
+        },
+        {
+            id: "_zenMode",
+            title: t("hidden-subtree.zen-mode"),
+            type: "launcher",
+            command: "toggleZenMode",
+            icon: "bx bxs-yin-yang"
+        }
     ];
 
     const desktopVisibleLaunchers: HiddenSubtreeItem[] = [
-        { id: "_lbNewNote", ...sharedLaunchers.newNote },
+        {
+            id: "_lbNewNote",
+            ...sharedLaunchers.newNote
+        },
         {
             id: "_lbSearch",
             title: t("hidden-subtree.search-notes-title"),
@@ -67,7 +89,12 @@ export default function buildLaunchBarConfig() {
             icon: "bx bx-send",
             attributes: [{ type: "label", name: "desktopOnly" }]
         },
-        { id: "_lbNoteMap", title: t("hidden-subtree.note-map-title"), type: "launcher", targetNoteId: "_globalNoteMap", icon: "bx bxs-network-chart" },
+        {   id: "_lbNoteMap",
+            title: t("hidden-subtree.note-map-title"),
+            type: "launcher",
+            targetNoteId: "_globalNoteMap",
+            icon: "bx bxs-network-chart"
+        },
         {
             id: "_lbLlmChat",
             title: t("hidden-subtree.llm-chat-title"),
@@ -78,12 +105,41 @@ export default function buildLaunchBarConfig() {
                 { type: "label", name: "desktopOnly" }
             ]
         },
-        { id: "_lbCalendar", ...sharedLaunchers.calendar },
-        { id: "_lbRecentChanges", ...sharedLaunchers.recentChanges },
-        { id: "_lbSpacer1", title: t("hidden-subtree.spacer-title"), type: "launcher", builtinWidget: "spacer", baseSize: "50", growthFactor: "0" },
-        { id: "_lbBookmarks", title: t("hidden-subtree.bookmarks-title"), type: "launcher", builtinWidget: "bookmarks", icon: "bx bx-bookmark" },
-        { id: "_lbToday", ...sharedLaunchers.openToday },
-        { id: "_lbSpacer2", title: t("hidden-subtree.spacer-title"), type: "launcher", builtinWidget: "spacer", baseSize: "0", growthFactor: "1" },
+        {
+            id: "_lbCalendar",
+            ...sharedLaunchers.calendar
+        },
+        {
+            id: "_lbRecentChanges",
+            ...sharedLaunchers.recentChanges
+        },
+        {
+            id: "_lbSpacer1",
+            title: t("hidden-subtree.spacer-title"),
+            type: "launcher",
+            builtinWidget: "spacer",
+            baseSize: "50",
+            growthFactor: "0"
+        },
+        {   
+            id: "_lbBookmarks",
+            title: t("hidden-subtree.bookmarks-title"),
+            type: "launcher",
+            builtinWidget: "bookmarks",
+            icon: "bx bx-bookmark"
+        },
+        {
+            id: "_lbToday",
+            ...sharedLaunchers.openToday
+        },
+        {   
+            id: "_lbSpacer2",
+            title: t("hidden-subtree.spacer-title"),
+            type: "launcher",
+            builtinWidget: "spacer",
+            baseSize: "0",
+            growthFactor: "1"
+        },
         {
             id: "_lbQuickSearch",
             title: t("hidden-subtree.quick-search-title"),
@@ -92,9 +148,26 @@ export default function buildLaunchBarConfig() {
             icon: "bx bx-rectangle",
             attributes: [{ type: "label", name: "docName", value: "launchbar_quick_search" }]
         },
-        { id: "_lbProtectedSession", title: t("hidden-subtree.protected-session-title"), type: "launcher", builtinWidget: "protectedSession", icon: "bx bx bx-shield-quarter" },
-        { id: "_lbSyncStatus", title: t("hidden-subtree.sync-status-title"), type: "launcher", builtinWidget: "syncStatus", icon: "bx bx-wifi" },
-        { id: "_lbSettings", title: t("hidden-subtree.settings-title"), type: "launcher", command: "showOptions", icon: "bx bx-cog" }
+        {
+            id: "_lbProtectedSession",
+            title: t("hidden-subtree.protected-session-title"),
+            type: "launcher", builtinWidget: "protectedSession",
+            icon: "bx bx bx-shield-quarter"
+        },
+        {
+            id: "_lbSyncStatus",
+            title: t("hidden-subtree.sync-status-title"),
+            type: "launcher",
+            builtinWidget: "syncStatus",
+            icon: "bx bx-wifi"
+        },
+        {
+            id: "_lbSettings",
+            title: t("hidden-subtree.settings-title"),
+            type: "launcher",
+            command: "showOptions",
+            icon: "bx bx-cog"
+        }
     ];
 
     const mobileAvailableLaunchers: HiddenSubtreeItem[] = [
@@ -103,11 +176,29 @@ export default function buildLaunchBarConfig() {
     ];
 
     const mobileVisibleLaunchers: HiddenSubtreeItem[] = [
-        { id: "_lbMobileBackInHistory", ...sharedLaunchers.backInHistory },
-        { id: "_lbMobileForwardInHistory", ...sharedLaunchers.forwardInHistory },
-        { id: "_lbMobileJumpTo", title: t("hidden-subtree.jump-to-note-title"), type: "launcher", command: "jumpToNote", icon: "bx bx-plus-circle" },
-        { id: "_lbMobileCalendar", ...sharedLaunchers.calendar },
-        { id: "_lbMobileRecentChanges", ...sharedLaunchers.recentChanges }
+        {
+            id: "_lbMobileBackInHistory",
+            ...sharedLaunchers.backInHistory
+        },
+        {
+            id: "_lbMobileForwardInHistory",
+            ...sharedLaunchers.forwardInHistory
+        },
+        {
+            id: "_lbMobileJumpTo",
+            title: t("hidden-subtree.jump-to-note-title"),
+            type: "launcher",
+            command: "jumpToNote",
+            icon: "bx bx-plus-circle"
+        },
+        {
+            id: "_lbMobileCalendar",
+            ...sharedLaunchers.calendar
+        },
+        {
+            id: "_lbMobileRecentChanges",
+            ...sharedLaunchers.recentChanges
+        }
     ];
 
     return {

docs/Developer Guide/Developer Guide.md

@@ -1,4 +0,0 @@
-# Developer Guide
-This documentation is intended for developers planning to implement new features or maintain the Trilium Notes application, as it describes the architecture of the application.
-
-For the user-facing documentation, including how to write scripts and the various APIs, consult the [user guide](https://docs.triliumnotes.org/user-guide/) instead.

docs/User Guide/!!!meta.json

@@ -55,7 +55,7 @@
                     "name": "iconClass",
                     "value": "bx bx-help-circle",
                     "isInheritable": false,
-                    "position": 30
+                    "position": 40
                 }
             ],
             "format": "markdown",
@@ -8814,23 +8814,16 @@
                                 {
                                     "type": "relation",
                                     "name": "internalLink",
-                                    "value": "WWgeUaBb7UfC",
+                                    "value": "XpOYSgsLkTJy",
                                     "isInheritable": false,
                                     "position": 10
                                 },
-                                {
-                                    "type": "relation",
-                                    "name": "internalLink",
-                                    "value": "XpOYSgsLkTJy",
-                                    "isInheritable": false,
-                                    "position": 20
-                                },
                                 {
                                     "type": "relation",
                                     "name": "internalLink",
                                     "value": "0Ofbk1aSuVRu",
                                     "isInheritable": false,
-                                    "position": 30
+                                    "position": 20
                                 },
                                 {
                                     "type": "label",
@@ -8845,6 +8838,13 @@
                                     "value": "bx bx-selection",
                                     "isInheritable": false,
                                     "position": 20
+                                },
+                                {
+                                    "type": "relation",
+                                    "name": "internalLink",
+                                    "value": "WWgeUaBb7UfC",
+                                    "isInheritable": false,
+                                    "position": 30
                                 }
                             ],
                             "format": "markdown",
@@ -12589,13 +12589,6 @@
                             "type": "text",
                             "mime": "text/markdown",
                             "attributes": [
-                                {
-                                    "type": "relation",
-                                    "name": "internalLink",
-                                    "value": "9qPsTWBorUhQ",
-                                    "isInheritable": false,
-                                    "position": 10
-                                },
                                 {
                                     "type": "label",
                                     "name": "shareAlias",
@@ -12609,6 +12602,13 @@
                                     "value": "bx bx-extension",
                                     "isInheritable": false,
                                     "position": 30
+                                },
+                                {
+                                    "type": "relation",
+                                    "name": "internalLink",
+                                    "value": "9qPsTWBorUhQ",
+                                    "isInheritable": false,
+                                    "position": 40
                                 }
                             ],
                             "format": "markdown",

packages/commons/src/lib/hidden_subtree.ts

@@ -6,7 +6,8 @@ enum Command {
     createNoteIntoInbox,
     showRecentChanges,
     showOptions,
-    createAiChat
+    createAiChat,
+    toggleZenMode
 }
 
 export interface HiddenSubtreeAttribute {
@@ -41,7 +42,8 @@ export interface HiddenSubtreeItem {
         | "protectedSession"
         | "calendar"
         | "quickSearch"
-        | "aiChatLauncher";
+        | "aiChatLauncher"
+        | "toggleZenMode";
     command?: keyof typeof Command;
     /**
      * If set to true, then branches will be enforced to be in the correct place.