move layout to separate store

Author: olivermrose

src/hooks.client.ts

@@ -1,14 +1,10 @@
 import { stats } from "tauri-plugin-cache-api";
 import { log } from "$lib/log";
-import { settings } from "$lib/settings";
 import { loadThemes } from "$lib/themes";
 
 export async function init() {
 	const { totalSize } = await stats();
 	log.info(`Cache has ${totalSize} items`);
 
-	await settings.start();
-	log.info("Settings synced");
-
 	await loadThemes();
 }

src/lib/menus/channel-menu.ts

@@ -4,7 +4,9 @@ import { page } from "$app/state";
 import { app } from "$lib/app.svelte";
 import type { Channel } from "$lib/models/channel.svelte";
 import { settings } from "$lib/settings";
-import type { SplitBranch, SplitDirection } from "$lib/split-layout";
+import type { SplitBranch } from "$lib/split-layout";
+
+type SplitDirection = "up" | "down" | "left" | "right";
 
 async function splitItem(channel: Channel, direction: SplitDirection) {
 	return MenuItem.new({

src/lib/settings.ts

@@ -1,6 +1,5 @@
 import { RuneStore } from "@tauri-store/svelte";
 import type { User } from "./graphql/twitch";
-import type { SplitNode } from "./split-layout";
 
 export type HighlightType =
 	| "mention"
@@ -70,7 +69,6 @@ interface Settings extends UserSettings {
 	user: StoredUser | null;
 	lastJoined: string | null;
 	pinned: string[];
-	layout: SplitNode | null;
 }
 
 export const defaultHighlightTypes: Record<HighlightType, HighlightConfig> = {
@@ -88,7 +86,6 @@ export const defaults: Settings = {
 	user: null,
 	lastJoined: null,
 	pinned: [],
-	layout: null,
 
 	"appearance.theme": "",
 	"chat.hideScrollbar": false,
@@ -117,14 +114,4 @@ export const defaults: Settings = {
 	"advanced.logs.level": "info",
 };
 
-export const settings = new RuneStore<Settings>("settings", defaults, {
-	hooks: {
-		beforeBackendSync(state) {
-			if (typeof state.layout === "string") {
-				state.layout = null;
-			}
-
-			return state;
-		},
-	},
-});
+export const settings = new RuneStore<Settings>("settings", defaults, { autoStart: true });

src/lib/split-layout.ts

@@ -1,9 +1,8 @@
 import type { DragDropEvents } from "@dnd-kit-svelte/svelte";
 import type { PaneGroupProps } from "paneforge";
-import { settings } from "$lib/settings";
+import { layout } from "./stores";
 
-export type SplitAxis = PaneGroupProps["direction"];
-export type SplitDirection = "up" | "down" | "left" | "right";
+type SplitAxis = PaneGroupProps["direction"];
 
 export interface SplitBranch {
 	axis: SplitAxis;
@@ -18,11 +17,11 @@ type SplitPath = ("before" | "after")[];
 
 export class SplitLayout {
 	public get root() {
-		return settings.state.layout;
+		return layout.state.root;
 	}
 
 	public set root(value: SplitNode | null) {
-		settings.state.layout = value;
+		layout.state.root = value;
 	}
 
 	public insert(target: string, newNode: string, branch: SplitBranch) {

src/lib/stores.ts

@@ -0,0 +1,24 @@
+import { RuneStore } from "@tauri-store/svelte";
+import type { SplitNode } from "./split-layout";
+
+interface Layout {
+	[key: string]: unknown;
+	root: SplitNode | null;
+}
+
+export const layout = new RuneStore<Layout>(
+	"layout",
+	{ root: null },
+	{
+		autoStart: true,
+		hooks: {
+			beforeBackendSync(state) {
+				if (typeof state.root === "string") {
+					state.root = null;
+				}
+
+				return state;
+			},
+		},
+	},
+);

src/routes/(main)/+page.svelte

@@ -8,6 +8,7 @@
 	import { buttonVariants } from "$lib/components/ui/button";
 	import * as Empty from "$lib/components/ui/empty";
 	import { settings } from "$lib/settings";
+	import { layout } from "$lib/stores";
 
 	let loading = $state(true);
 
@@ -18,8 +19,8 @@
 			await app.user.fetchEmoteSets();
 		}
 
-		if (settings.state.layout) {
-			app.splits.root = settings.state.layout;
+		if (layout.state.root) {
+			app.splits.root = layout.state.root;
 
 			await goto("/channels/split");
 		} else if (settings.state.lastJoined) {