| 1 | import { writable, type Writable } from 'svelte/store'; |
| 2 | |
| 3 | export const MESSAGE_SPACING_MIN = 0; |
| 4 | export const MESSAGE_SPACING_MAX = 16; |
| 5 | export const MESSAGE_SPACING_DEFAULT = 3; |
| 6 | |
| 7 | function persisted<T>(key: string, fallback: T, valid: (v: unknown) => v is T): Writable<T> { |
| 8 | let initial = fallback; |
| 9 | try { |
| 10 | const raw = localStorage.getItem(key); |
| 11 | if (raw !== null) { |
| 12 | const parsed: unknown = JSON.parse(raw); |
| 13 | if (valid(parsed)) initial = parsed; |
| 14 | } |
| 15 | } catch {} |
| 16 | const store = writable(initial); |
| 17 | store.subscribe((value) => { |
| 18 | try { |
| 19 | localStorage.setItem(key, JSON.stringify(value)); |
| 20 | } catch {} |
| 21 | }); |
| 22 | return store; |
| 23 | } |
| 24 | |
| 25 | const isBool = (v: unknown): v is boolean => typeof v === 'boolean'; |
| 26 | const isSpacing = (v: unknown): v is number => |
| 27 | typeof v === 'number' && Number.isFinite(v) && v >= MESSAGE_SPACING_MIN && v <= MESSAGE_SPACING_MAX; |
| 28 | |
| 29 | export const navFolded = persisted('malice.navFolded', false, isBool); |
| 30 | export const railFolded = persisted('malice.railFolded', false, isBool); |
| 31 | export const markdownEnabled = persisted('malice.markdown', true, isBool); |
| 32 | export const messageSpacing = persisted('malice.messageSpacing', MESSAGE_SPACING_DEFAULT, isSpacing); |
| 33 | |
| 34 | export const LINE_HEIGHT_MIN = 1.1; |
| 35 | export const LINE_HEIGHT_MAX = 2; |
| 36 | export const LINE_HEIGHT_DEFAULT = 1.5; |
| 37 | |
| 38 | const isLineHeight = (v: unknown): v is number => |
| 39 | typeof v === 'number' && Number.isFinite(v) && v >= LINE_HEIGHT_MIN && v <= LINE_HEIGHT_MAX; |
| 40 | |
| 41 | export const lineHeight = persisted('malice.lineHeight', LINE_HEIGHT_DEFAULT, isLineHeight); |
| 42 | |
| 43 | const isStringRecord = (v: unknown): v is Record<string, string> => |
| 44 | typeof v === 'object' && v !== null && !Array.isArray(v) && Object.values(v).every((x) => typeof x === 'string'); |
| 45 | |
| 46 | export const lastSpaceRooms = persisted<Record<string, string>>('malice.lastSpaceRooms', {}, isStringRecord); |
| 47 | |
| 48 | export const THEMES = [ |
| 49 | { id: 'system', label: 'Match system' }, |
| 50 | { id: 'dark', label: 'Dark' }, |
| 51 | { id: 'light', label: 'Light' }, |
| 52 | { id: 'black', label: 'Black' }, |
| 53 | { id: 'nord', label: 'Nord' } |
| 54 | ] as const; |
| 55 | |
| 56 | export type ThemeId = (typeof THEMES)[number]['id']; |
| 57 | |
| 58 | const isTheme = (v: unknown): v is ThemeId => THEMES.some((t) => t.id === v); |
| 59 | const isAccent = (v: unknown): v is string | null => v === null || (typeof v === 'string' && /^#[0-9a-f]{6}$/i.test(v)); |
| 60 | |
| 61 | export const theme = persisted<ThemeId>('malice.theme', 'dark', isTheme); |
| 62 | export const accent = persisted<string | null>('malice.accent', null, isAccent); |
| 63 | |
| 64 | if (typeof document !== 'undefined') { |
| 65 | const root = document.documentElement; |
| 66 | const prefersLight = window.matchMedia('(prefers-color-scheme: light)'); |
| 67 | let current: ThemeId = 'system'; |
| 68 | const apply = () => { |
| 69 | root.dataset.theme = current === 'system' ? (prefersLight.matches ? 'light' : 'dark') : current; |
| 70 | }; |
| 71 | theme.subscribe((t) => { |
| 72 | current = t; |
| 73 | apply(); |
| 74 | }); |
| 75 | prefersLight.addEventListener('change', apply); |
| 76 | accent.subscribe((a) => { |
| 77 | if (a) root.style.setProperty('--accent', a); |
| 78 | else root.style.removeProperty('--accent'); |
| 79 | }); |
| 80 | } |