feat: de-clutter navbar

fix: backup option not working
refactor: persistent writable stores

[deploy]

src/lib/preferences.ts

@@ -1,17 +1,17 @@
-import {writable} from "svelte/store"
 import type {Action} from "svelte/action"
+import {persistentWritable} from "$lib/storage"
 
 export interface UserPreferences {
   backup: boolean
   autoConnect: boolean
 }
 
-export const theme = writable({
+export const theme = persistentWritable("user-theme", {
   color: "#6D81C7",
   mode: "dark" as "light" | "dark" | "auto",
 })
 
-export const userPreferences = writable<UserPreferences>({
+export const userPreferences = persistentWritable<UserPreferences>("user-preferences", {
   backup: false,
   autoConnect: true,
 })

src/lib/serial/connection.ts

@@ -3,6 +3,8 @@ import {CharaDevice} from "$lib/serial/device"
 import type {Chord} from "$lib/serial/chord"
 import type {Writable} from "svelte/store"
 import type {CharaLayout} from "$lib/serialization/layout"
+import {persistentWritable} from "$lib/storage"
+import {userPreferences} from "$lib/preferences"
 
 export const serialPort = writable<CharaDevice>()
 
@@ -13,9 +15,13 @@ export interface SerialLogEntry {
 
 export const serialLog = writable<SerialLogEntry[]>([])
 
-export const chords = writable<Chord[]>([])
+export const chords = persistentWritable<Chord[]>("chord-library", [], () => get(userPreferences).backup)
 
-export const layout = writable<CharaLayout>([[], [], []])
+export const layout = persistentWritable<CharaLayout>(
+  "layout",
+  [[], [], []],
+  () => get(userPreferences).backup,
+)
 
 export const settings = writable({})
 

src/lib/serial/storage.ts

@@ -1,33 +0,0 @@
-import {chords, layout} from "$lib/serial/connection"
-import {userPreferences} from "$lib/preferences"
-
-const PROFILE_KEY = "profiles"
-const CHORD_LIBRARY_STORAGE_KEY = "chord-library"
-const LAYOUT_STORAGE_KEY = "layouts"
-const PREFERENCES = "user-preferences"
-
-export function initLocalStorage() {
-  const storedPreferences = localStorage.getItem(PREFERENCES)
-  if (storedPreferences) {
-    userPreferences.set(JSON.parse(storedPreferences))
-  }
-  userPreferences.subscribe(preferences => {
-    localStorage.setItem(PREFERENCES, JSON.stringify(preferences))
-  })
-
-  const storedLayout = localStorage.getItem(LAYOUT_STORAGE_KEY)
-  if (storedLayout) {
-    layout.set(JSON.parse(storedLayout))
-  }
-  const storedChords = localStorage.getItem(CHORD_LIBRARY_STORAGE_KEY)
-  if (storedChords) {
-    chords.set(JSON.parse(storedChords))
-  }
-
-  layout.subscribe(layout => {
-    localStorage.setItem(LAYOUT_STORAGE_KEY, JSON.stringify(layout))
-  })
-  chords.subscribe(chords => {
-    localStorage.setItem(CHORD_LIBRARY_STORAGE_KEY, JSON.stringify(chords))
-  })
-}

src/lib/storage.ts

@@ -0,0 +1,17 @@
+import type {Writable} from "svelte/store"
+import {writable} from "svelte/store"
+import {browser} from "$app/environment"
+
+export function persistentWritable<T>(key: string, value: T, condition?: () => boolean): Writable<T> {
+  if (browser) {
+    const persistedValue = localStorage.getItem(key)
+    const store = persistedValue !== null ? writable(JSON.parse(persistedValue)) : writable(value)
+    store.subscribe(value => {
+      if (!condition || condition()) localStorage.setItem(key, JSON.stringify(value))
+    })
+
+    return store
+  } else {
+    return writable(value)
+  }
+}

src/lib/style/tippy.scss

@@ -25,9 +25,9 @@ $padding: 16px;
 }
 
 .tippy-box[data-theme~="search-completion"] {
+  overflow: hidden;
   filter: none;
   border-radius: 0 0 16px 16px;
-  overflow: hidden;
 
   .tippy-content {
     padding: 0;