Send sidebar position in cookie to avoid layout shift with SSR

Author: jpenilla

web/src/lib/diff-viewer-multi-file.svelte.ts

@@ -29,16 +29,19 @@ import { MediaQuery } from "svelte/reactivity";
 export type SidebarLocation = "left" | "right";
 
 export class GlobalOptions {
-    private static readonly localStorageKey = "diff-viewer-global-options";
-    private static readonly context = new Context<GlobalOptions>(GlobalOptions.localStorageKey);
+    static readonly key = "diff-viewer-global-options";
+    private static readonly context = new Context<GlobalOptions>(GlobalOptions.key);
 
-    static init() {
+    static init(cookie?: string) {
         const opts = new GlobalOptions();
         if (!browser) {
             GlobalOptions.context.set(opts);
+            if (cookie) {
+                opts.deserialize(cookie);
+            }
             return opts;
         }
-        const serialized = localStorage.getItem(GlobalOptions.localStorageKey);
+        const serialized = localStorage.getItem(GlobalOptions.key);
         if (serialized !== null) {
             opts.deserialize(serialized);
         }
@@ -56,15 +59,14 @@ export class GlobalOptions {
     wordDiffs = $state(true);
     lineWrap = $state(true);
     omitPatchHeaderOnlyHunks = $state(true);
-    // TODO: send to server (use cookie?) to that the initial position is correct
     sidebarLocation: SidebarLocation = $state("left");
 
     private constructor() {
         $effect(() => {
             this.save();
         });
 
-        watchLocalStorage(GlobalOptions.localStorageKey, (newValue) => {
+        watchLocalStorage(GlobalOptions.key, (newValue) => {
             if (newValue) {
                 this.deserialize(newValue);
             }
@@ -84,7 +86,8 @@ export class GlobalOptions {
         if (!browser) {
             return;
         }
-        localStorage.setItem(GlobalOptions.localStorageKey, this.serialize());
+        localStorage.setItem(GlobalOptions.key, this.serialize());
+        document.cookie = `${GlobalOptions.key}=${encodeURIComponent(this.serializeCookie())}; path=/; max-age=31536000; SameSite=Lax`;
     }
 
     private serialize() {
@@ -105,6 +108,14 @@ export class GlobalOptions {
         return JSON.stringify(cereal);
     }
 
+    private serializeCookie() {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        const cereal: any = {
+            sidebarLocation: this.sidebarLocation,
+        };
+        return JSON.stringify(cereal);
+    }
+
     private deserialize(serialized: string) {
         const jsonObject = JSON.parse(serialized);
         if (jsonObject.syntaxHighlighting !== undefined) {

web/src/routes/+layout.server.ts

@@ -0,0 +1,8 @@
+import type { LayoutServerLoad } from "./$types";
+import { GlobalOptions } from "$lib/diff-viewer-multi-file.svelte";
+
+export const load: LayoutServerLoad = async ({ cookies }) => {
+    return {
+        globalOptions: cookies.get(GlobalOptions.key),
+    };
+};

web/src/routes/+layout.ts

@@ -32,8 +32,10 @@
     import { Button, Label } from "bits-ui";
     import { onClickOutside } from "runed";
     import SidebarToggle from "./SidebarToggle.svelte";
+    import type { PageProps } from "./$types";
 
-    const globalOptions = GlobalOptions.init();
+    let { data }: PageProps = $props();
+    const globalOptions = GlobalOptions.init(data.globalOptions);
     const viewer = MultiFileDiffViewerState.init();
     let sidebarElement: HTMLDivElement | undefined = $state();