client: add an option to center the content

apps/client/src/stylesheets/style.css

@@ -1811,6 +1811,8 @@ 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);
+    /* Indicates the inline margin of the content. If set to "auto" the content will be centered. */
+    --content-margin-inline: var(--preferred-content-margin-inline);
 
     margin-inline-start: auto;
     margin-inline-end: auto;

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

@@ -1110,7 +1110,8 @@
     "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"
+    "max_width_unit": "pixels",
+    "centerContent": "Keep content centered"
   },
   "native_title_bar": {
     "title": "Native Title Bar (requires app restart)",

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

@@ -1,6 +1,11 @@
 .note-list-widget {
     min-height: 0;
-    max-width: var(--max-content-width); /* Inherited from .note-split */
+    /* Inherited from .note-split */
+    max-width: var(--max-content-width);
+    /* Inherited from .note-split. If set to "auto" the list widget will be centered horizontally. */
+    margin-inline: var(--content-margin-inline);
+
+
     overflow: auto;
     contain: none !important;
 }

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

@@ -31,7 +31,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
             window.visualViewport?.addEventListener("resize", () => this.#onMobileResize());
         }
 
-        this.#setMaxContentWidth(options.getInt("maxContentWidth") ?? 0);
+        this.#setMaxContentWidth();
         this.#setMotion(options.is("motionEnabled"));
         this.#setShadows(options.is("shadowsEnabled"));
         this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
@@ -54,8 +54,8 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
             this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
         }
 
-        if (loadResults.isOptionReloaded("maxContentWidth")) {
-            this.#setMaxContentWidth(options.getInt("maxContentWidth") ?? 0);
+        if (loadResults.isOptionReloaded("maxContentWidth") || loadResults.isOptionReloaded("centerContent")) {
+            this.#setMaxContentWidth();
         }
     }
 
@@ -66,9 +66,15 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         this.$widget.toggleClass("virtual-keyboard-opened", isKeyboardOpened);
     }
 
-    #setMaxContentWidth(width: number) {
-        width = Math.max(width, 640);
+    #setMaxContentWidth() {
+        const width = Math.max(options.getInt("maxContentWidth") || 0, 640);
+        const centerContent = options.is("centerContent");
+
         document.body.style.setProperty("--preferred-max-content-width", `${width}px`);
+
+        // To center the content, "--preferred-content-margin-inline" should be set to "auto".
+        document.body.style.setProperty("--preferred-content-margin-inline",
+                                        (centerContent) ? "auto" : "unset");
     }
 
     #setMotion(enabled: boolean) {

apps/client/src/widgets/note_detail.ts

@@ -40,6 +40,8 @@ const TPL = /*html*/`
     <style>
     .note-detail {
         max-width: var(--max-content-width); /* Inherited from .note-split */
+        /* Inherited from .note-split. If set to "auto" the note detail widget will be centered horizontally. */
+        margin-inline: var(--content-margin-inline);
         font-family: var(--detail-font-family);
         font-size: var(--detail-font-size);
     }

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

@@ -284,7 +284,8 @@ function SmoothScrollEnabledOption() {
 }
 
 function MaxContentWidth() {
-    const [ maxContentWidth, setMaxContentWidth ] = useTriliumOption("maxContentWidth");
+    const [maxContentWidth, setMaxContentWidth] = useTriliumOption("maxContentWidth");
+    const [centerContent, setCenterContent] = useTriliumOptionBool("centerContent");
 
     return (
         <OptionsSection title={t("max_content_width.title")}>
@@ -299,6 +300,10 @@ function MaxContentWidth() {
                     />
                 </FormGroup>
             </Column>
+
+            <FormCheckbox label={t("max_content_width.centerContent")}
+                          currentValue={centerContent}
+                          onChange={setCenterContent} />
         </OptionsSection>
     )
 }

apps/server/src/routes/api/options.ts

@@ -68,6 +68,7 @@ const ALLOWED_OPTIONS = new Set<OptionNames>([
     "smoothScrollEnabled",
     "backdropEffectsEnabled",
     "maxContentWidth",
+    "centerContent",
     "compressImages",
     "downloadImagesAutomatically",
     "minTocHeadings",

apps/server/src/services/options_init.ts

@@ -117,6 +117,7 @@ const defaultOptions: DefaultOption[] = [
     { name: "weeklyBackupEnabled", value: "true", isSynced: false },
     { name: "monthlyBackupEnabled", value: "true", isSynced: false },
     { name: "maxContentWidth", value: "1200", isSynced: false },
+    { name: "centerContent", value: "false", isSynced: false },
     { name: "compressImages", value: "true", isSynced: true },
     { name: "downloadImagesAutomatically", value: "true", isSynced: true },
     { name: "minTocHeadings", value: "5", isSynced: true },

packages/commons/src/lib/options_interface.ts

@@ -82,6 +82,7 @@ export interface OptionDefinitions extends KeyboardShortcutsOptions<KeyboardActi
     autoReadonlySizeText: number;
     autoReadonlySizeCode: number;
     maxContentWidth: number;
+    centerContent: boolean;
     minTocHeadings: number;
     eraseUnusedAttachmentsAfterSeconds: number;
     eraseUnusedAttachmentsAfterTimeScale: number;