diff --git a/src/lib/components/ChannelList.svelte b/src/lib/components/ChannelList.svelte index 345caeb3..64e2fab8 100644 --- a/src/lib/components/ChannelList.svelte +++ b/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} {#each group.channels as channel, i (channel.user.id)} diff --git a/src/lib/menus/channel-menu.ts b/src/lib/menus/channel-menu.ts index 613d4048..2929e209 100644 --- a/src/lib/menus/channel-menu.ts +++ b/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); } }, }); diff --git a/src/lib/models/channel.svelte.ts b/src/lib/models/channel.svelte.ts index 842ce3c0..ba4cb6b1 100644 --- a/src/lib/models/channel.svelte.ts +++ b/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); diff --git a/src/lib/settings.ts b/src/lib/settings.ts index a419757d..63d3e9c9 100644 --- a/src/lib/settings.ts +++ b/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 = { mention: { enabled: true, color: "#adadb8", style: "background" }, new: { enabled: true, color: "#ff75e6", style: "default" }, @@ -88,10 +72,6 @@ export const defaultHighlightTypes: Record = { }; 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", defaults, { autoStart: true }); +export const settings = new RuneStore>("settings", defaults, { + autoStart: true, +}); diff --git a/src/lib/stores.ts b/src/lib/stores.ts index 707bf928..5d65702f 100644 --- a/src/lib/stores.ts +++ b/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", + { + user: null, + accounts: [], + lastJoined: null, + pinned: [], + }, + { autoStart: true }, +); + interface Layout { [key: string]: unknown; root: SplitNode | null; diff --git a/src/routes/(main)/+layout.svelte b/src/routes/(main)/+layout.svelte index 95a000a2..6c5695d5 100644 --- a/src/routes/(main)/+layout.svelte +++ b/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(); @@ -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 @@ >
- {#if settings.state.user} + {#if storage.state.user} {/if} -
+
{@render children()}
diff --git a/src/routes/(main)/+page.svelte b/src/routes/(main)/+page.svelte index 638d96ff..e6a6ca06 100644 --- a/src/routes/(main)/+page.svelte +++ b/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; diff --git a/src/routes/(main)/channels/split/+page.svelte b/src/routes/(main)/channels/split/+page.svelte index c9918f8e..76b76719 100644 --- a/src/routes/(main)/channels/split/+page.svelte +++ b/src/routes/(main)/channels/split/+page.svelte @@ -1,12 +1,12 @@