refactor: move internal settings to separate store

src/lib/components/ChannelList.svelte

@@ -4,7 +4,7 @@
 	import { app } from "$lib/app.svelte";
 	import { getSidebarContext } from "$lib/context";
 	import type { Channel } from "$lib/models/channel.svelte";
-	import { settings } from "$lib/settings";
+	import { storage } from "$lib/stores";
 	import Draggable from "./Draggable.svelte";
 	import Droppable from "./Droppable.svelte";
 	import Sortable from "./Sortable.svelte";
@@ -32,8 +32,8 @@
 		const pinnedChannels = sorted
 			.filter((c) => c.pinned)
 			.sort((a, b) => {
-				const indexA = settings.state.pinned.indexOf(a.id);
-				const indexB = settings.state.pinned.indexOf(b.id);
+				const indexA = storage.state.pinned.indexOf(a.id);
+				const indexB = storage.state.pinned.indexOf(b.id);
 
 				return indexA - indexB;
 			});
@@ -86,7 +86,7 @@
 	{/if}
 
 	{#if group.type === "Pinned"}
-		{#key settings.state.pinned.length}
+		{#key storage.state.pinned.length}
 			<Droppable id="pinned-channels" class="space-y-1.5">
 				{#each group.channels as channel, i (channel.user.id)}
 					<Sortable {channel} index={i} />

src/lib/menus/channel-menu.ts

@@ -4,6 +4,7 @@ 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 { storage } from "$lib/stores";
 
 async function splitItem(channel: Channel, direction: SplitDirection) {
 	const enabled =
@@ -95,9 +96,9 @@ export async function createChannelMenu(channel: Channel) {
 		checked: channel.pinned,
 		async action() {
 			if (channel.pinned) {
-				settings.state.pinned = settings.state.pinned.filter((id) => id !== channel.id);
+				storage.state.pinned = storage.state.pinned.filter((id) => id !== channel.id);
 			} else {
-				settings.state.pinned.push(channel.id);
+				storage.state.pinned.push(channel.id);
 			}
 		},
 	});

src/lib/models/channel.svelte.ts

@@ -4,6 +4,7 @@ import { channelBadgesQuery, cheermoteQuery, streamQuery } from "$lib/graphql/tw
 import type { Badge, Cheermote } from "$lib/graphql/twitch";
 import { ChannelEmoteManager } from "$lib/managers/channel-emote-manager";
 import { fetch7tvId } from "$lib/seventv";
+import { storage } from "$lib/stores";
 import { app } from "../app.svelte";
 import { ViewerManager } from "../managers/viewer-manager";
 import { settings } from "../settings";
@@ -85,7 +86,7 @@ export class Channel {
 		this.emotes = new ChannelEmoteManager(this);
 		this.viewers = new ViewerManager(this);
 
-		this.pinned = $derived(settings.state.pinned.includes(this.id));
+		this.pinned = $derived(storage.state.pinned.includes(this.id));
 	}
 
 	public async join(split = false) {
@@ -96,7 +97,7 @@ export class Channel {
 
 		if (!split) {
 			app.focused = this;
-			settings.state.lastJoined = this.ephemeral ? null : this.user.username;
+			storage.state.lastJoined = this.ephemeral ? null : this.user.username;
 		}
 
 		if (!this.viewers.has(this.id)) {
@@ -141,7 +142,7 @@ export class Channel {
 			await invoke("leave", { channel: this.user.username });
 		} finally {
 			this.reset();
-			settings.state.lastJoined = null;
+			storage.state.lastJoined = null;
 
 			if (app.user) {
 				app.user.banned.delete(this.id);

src/lib/settings.ts

@@ -1,5 +1,4 @@
 import { RuneStore } from "@tauri-store/svelte";
-import type { User } from "./graphql/twitch";
 
 export type HighlightType =
 	| "mention"
@@ -24,13 +23,7 @@ export interface KeywordHighlightConfig extends HighlightConfig {
 	matchCase: boolean;
 }
 
-interface StoredUser {
-	id: string;
-	token: string;
-	data: User;
-}
-
-export interface UserSettings {
+export interface Settings {
 	"appearance.theme": string;
 
 	"splits.defaultOrientation": "horizontal" | "vertical";
@@ -67,15 +60,6 @@ export interface UserSettings {
 	"advanced.logs.level": "error" | "warn" | "info" | "debug" | "trace";
 }
 
-interface Settings extends UserSettings {
-	[key: string]: any;
-
-	// Internal
-	user: StoredUser | null;
-	lastJoined: string | null;
-	pinned: string[];
-}
-
 export const defaultHighlightTypes: Record<HighlightType, HighlightConfig> = {
 	mention: { enabled: true, color: "#adadb8", style: "background" },
 	new: { enabled: true, color: "#ff75e6", style: "default" },
@@ -88,10 +72,6 @@ export const defaultHighlightTypes: Record<HighlightType, HighlightConfig> = {
 };
 
 export const defaults: Settings = {
-	user: null,
-	lastJoined: null,
-	pinned: [],
-
 	"appearance.theme": "",
 	"splits.defaultOrientation": "horizontal",
 	"splits.singleRestoreBehavior": "redirect",
@@ -124,4 +104,6 @@ export const defaults: Settings = {
 	"advanced.logs.level": "info",
 };
 
-export const settings = new RuneStore<Settings>("settings", defaults, { autoStart: true });
+export const settings = new RuneStore<Settings & Record<string, any>>("settings", defaults, {
+	autoStart: true,
+});

src/lib/stores.ts

@@ -1,7 +1,33 @@
 import { RuneStore } from "@tauri-store/svelte";
 import { settings } from "./settings";
+import type { User } from "./graphql/twitch";
 import type { SplitNode } from "./split-layout";
 
+interface AccountUser {
+	id: string;
+	token: string;
+	data: User;
+}
+
+interface Storage {
+	[key: string]: unknown;
+	user: AccountUser | null;
+	accounts: AccountUser[];
+	lastJoined: string | null;
+	pinned: string[];
+}
+
+export const storage = new RuneStore<Storage>(
+	"storage",
+	{
+		user: null,
+		accounts: [],
+		lastJoined: null,
+		pinned: [],
+	},
+	{ autoStart: true },
+);
+
 interface Layout {
 	[key: string]: unknown;
 	root: SplitNode | null;

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

@@ -13,7 +13,7 @@
 	import { app } from "$lib/app.svelte";
 	import Sidebar from "$lib/components/Sidebar.svelte";
 	import * as Tooltip from "$lib/components/ui/tooltip";
-	import { settings } from "$lib/settings";
+	import { storage } from "$lib/stores";
 
 	const { children } = $props();
 </script>
@@ -41,7 +41,7 @@
 	]}
 	onDragOver={(event) => {
 		if (event.operation.target?.id === "pinned-channels") {
-			settings.state.pinned = move(settings.state.pinned, event);
+			storage.state.pinned = move(storage.state.pinned, event);
 		}
 	}}
 	onDragEnd={(event) => {
@@ -50,11 +50,11 @@
 >
 	<Tooltip.Provider delayDuration={100}>
 		<div class="flex grow overflow-hidden">
-			{#if settings.state.user}
+			{#if storage.state.user}
 				<Sidebar />
 			{/if}
 
-			<main class={["bg-accent/15 grow overflow-hidden", settings.state.user && "border-l"]}>
+			<main class={["bg-accent/15 grow overflow-hidden", storage.state.user && "border-l"]}>
 				{@render children()}
 			</main>
 		</div>

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

@@ -9,7 +9,7 @@
 	import * as Empty from "$lib/components/ui/empty";
 	import { log } from "$lib/log";
 	import { settings } from "$lib/settings";
-	import { layout } from "$lib/stores";
+	import { layout, storage } from "$lib/stores";
 
 	let loading = $state(true);
 
@@ -41,12 +41,12 @@
 				}
 
 				layout.state.root = null;
-				settings.state.lastJoined = channel?.user.username ?? null;
+				storage.state.lastJoined = channel?.user.username ?? null;
 			}
 		}
 
-		if (settings.state.lastJoined) {
-			await goto(`/channels/${settings.state.lastJoined}`);
+		if (storage.state.lastJoined) {
+			await goto(`/channels/${storage.state.lastJoined}`);
 		}
 
 		loading = false;

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

@@ -1,12 +1,12 @@
 <script lang="ts">
 	import { app } from "$lib/app.svelte.js";
-	import { settings } from "$lib/settings";
 	import type { SplitDirection } from "$lib/split-layout";
+	import { storage } from "$lib/stores";
 	import SplitNode from "./SplitNode.svelte";
 	import SplitView from "./SplitView.svelte";
 
 	app.focused = null;
-	settings.state.lastJoined = null;
+	storage.state.lastJoined = null;
 
 	async function navigateSplit(event: KeyboardEvent) {
 		if (!app.splits.focused || !(event.metaKey || event.ctrlKey)) return;

src/routes/+layout.ts

@@ -5,7 +5,7 @@ import { Channel } from "$lib/models/channel.svelte";
 import { CurrentUser } from "$lib/models/current-user.svelte";
 import { Stream } from "$lib/models/stream.svelte";
 import { User } from "$lib/models/user.svelte";
-import { settings } from "$lib/settings";
+import { storage } from "$lib/stores";
 import type { BasicUser } from "$lib/twitch/irc";
 import type { Prefix } from "$lib/util";
 
@@ -16,7 +16,7 @@ export async function load({ url }) {
 		return { detached: true };
 	}
 
-	if (!settings.state.user) {
+	if (!storage.state.user) {
 		if (url.pathname !== "/auth/login") {
 			log.info("User not authenticated, redirecting to login");
 			redirect(302, "/auth/login");
@@ -25,10 +25,10 @@ export async function load({ url }) {
 		return;
 	}
 
-	app.twitch.token ??= settings.state.user.token;
+	app.twitch.token ??= storage.state.user.token;
 
 	if (!app.user) {
-		const user = new User(app.twitch, settings.state.user.data);
+		const user = new User(app.twitch, storage.state.user.data);
 		app.twitch.users.set(user.id, user);
 
 		app.user = new CurrentUser(user);

src/routes/auth/login/+page.svelte

@@ -10,7 +10,7 @@
 	import { Button } from "$lib/components/ui/button";
 	import { log } from "$lib/log";
 	import { CurrentUser } from "$lib/models/current-user.svelte";
-	import { settings } from "$lib/settings";
+	import { storage } from "$lib/stores";
 	import { SCOPES } from "$lib/twitch";
 	import { TwitchClient } from "$lib/twitch/client";
 
@@ -43,15 +43,15 @@
 
 			const user = await app.twitch.users.fetch(event.payload.user_id);
 
-			settings.state.user = {
+			storage.state.user = {
 				id: event.payload.user_id,
 				token: event.payload.access_token,
 				data: user.data,
 			};
 
 			app.user = new CurrentUser(user);
 
-			await settings.save();
+			await storage.saveNow();
 			await goto("/");
 		});
 	});

src/routes/auth/logout/+page.ts

@@ -1,17 +1,17 @@
 import { tick } from "svelte";
 import { app } from "$lib/app.svelte";
 import { log } from "$lib/log";
-import { settings } from "$lib/settings";
+import { storage } from "$lib/stores";
 
 export async function load() {
-	settings.state.user = null;
-	settings.state.lastJoined = null;
+	storage.state.user = null;
+	storage.state.lastJoined = null;
 
 	app.user = null;
 	app.focused = null;
 
 	await tick();
-	await settings.saveNow();
+	await storage.saveNow();
 
 	log.info("User logged out");
 }

src/routes/settings/types.ts

@@ -1,5 +1,5 @@
 import type { Component } from "svelte";
-import type { UserSettings } from "$lib/settings";
+import type { Settings } from "$lib/settings";
 
 interface GroupField {
 	type: "group";
@@ -8,7 +8,7 @@ interface GroupField {
 }
 
 export interface BaseField {
-	id: keyof UserSettings | (string & {});
+	id: keyof Settings | (string & {});
 	label: string;
 	description?: string;
 	disabled?: () => boolean;