From 4cc94626558fb649b800b95ba1d99d97de8d45a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= Date: Sat, 29 Jul 2023 22:50:18 +0200 Subject: [PATCH] feat: de-clutter navbar fix: backup option not working refactor: persistent writable stores [deploy] --- src/i18n/de/index.ts | 10 +++ src/i18n/en/index.ts | 10 +++ src/lib/preferences.ts | 6 +- src/lib/serial/connection.ts | 10 ++- src/lib/serial/storage.ts | 33 ---------- src/lib/storage.ts | 17 +++++ src/lib/style/tippy.scss | 2 +- src/routes/+layout.svelte | 2 - src/routes/BackupPopup.svelte | 10 +-- src/routes/BrowserWarning.svelte | 4 -- src/routes/Languages.svelte | 18 ----- src/routes/Navigation.svelte | 9 +-- src/routes/Profile.svelte | 109 +++++++++++++++++++++++++++++++ src/routes/Theme.svelte | 61 ----------------- src/routes/backup/+page.svelte | 108 ------------------------------ static/browsers/brave.svg | 1 - 16 files changed, 166 insertions(+), 244 deletions(-) delete mode 100644 src/lib/serial/storage.ts create mode 100644 src/lib/storage.ts delete mode 100644 src/routes/Languages.svelte create mode 100644 src/routes/Profile.svelte delete mode 100644 src/routes/Theme.svelte delete mode 100644 src/routes/backup/+page.svelte delete mode 100644 static/browsers/brave.svg diff --git a/src/i18n/de/index.ts b/src/i18n/de/index.ts index fc7126cc..e2563cd9 100644 --- a/src/i18n/de/index.ts +++ b/src/i18n/de/index.ts @@ -9,6 +9,16 @@ const de = { DOWNLOAD: "Kopie Speichern", RESTORE: "Wiederherstellen", }, + profile: { + TITLE: "Profil", + LANGUAGE: "Sprache", + theme: { + TITLE: "Darstellung", + COLOR_SCHEME: "Farbschema", + DARK_MODE: "Dunkel", + LIGHT_MODE: "Hell", + }, + }, deviceManager: { TITLE: "Gerät", AUTO_CONNECT: "Automatisch Verbinden", diff --git a/src/i18n/en/index.ts b/src/i18n/en/index.ts index 6ee37a53..e4f7918c 100644 --- a/src/i18n/en/index.ts +++ b/src/i18n/en/index.ts @@ -8,6 +8,16 @@ const en = { DOWNLOAD: "Download Backup", RESTORE: "Restore", }, + profile: { + TITLE: "Profile", + LANGUAGE: "Language", + theme: { + TITLE: "Theme", + COLOR_SCHEME: "Color scheme", + DARK_MODE: "Dark", + LIGHT_MODE: "Light", + }, + }, deviceManager: { TITLE: "Device", AUTO_CONNECT: "Auto-connect", diff --git a/src/lib/preferences.ts b/src/lib/preferences.ts index c6c5de4f..b6e4e914 100644 --- a/src/lib/preferences.ts +++ b/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({ +export const userPreferences = persistentWritable("user-preferences", { backup: false, autoConnect: true, }) diff --git a/src/lib/serial/connection.ts b/src/lib/serial/connection.ts index 3612a0a0..142fc929 100644 --- a/src/lib/serial/connection.ts +++ b/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() @@ -13,9 +15,13 @@ export interface SerialLogEntry { export const serialLog = writable([]) -export const chords = writable([]) +export const chords = persistentWritable("chord-library", [], () => get(userPreferences).backup) -export const layout = writable([[], [], []]) +export const layout = persistentWritable( + "layout", + [[], [], []], + () => get(userPreferences).backup, +) export const settings = writable({}) diff --git a/src/lib/serial/storage.ts b/src/lib/serial/storage.ts deleted file mode 100644 index 68d86e20..00000000 --- a/src/lib/serial/storage.ts +++ /dev/null @@ -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)) - }) -} diff --git a/src/lib/storage.ts b/src/lib/storage.ts new file mode 100644 index 00000000..38ed7d59 --- /dev/null +++ b/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(key: string, value: T, condition?: () => boolean): Writable { + 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) + } +} diff --git a/src/lib/style/tippy.scss b/src/lib/style/tippy.scss index 07447c7c..41621c17 100644 --- a/src/lib/style/tippy.scss +++ b/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; diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index cde3c4b2..2b042739 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -12,7 +12,6 @@ import {pwaInfo} from "virtual:pwa-info" import type {LayoutServerData} from "./$types" import type {RegisterSWOptions} from "vite-plugin-pwa/types" - import {initLocalStorage} from "$lib/serial/storage" import {browser} from "$app/environment" import BrowserWarning from "./BrowserWarning.svelte" import "tippy.js/animations/shift-away.css" @@ -47,7 +46,6 @@ const dark = it.mode === "dark" // window.matchMedia("(prefers-color-scheme: dark)").matches applyTheme(theme, {target: document.body, dark}) }) - initLocalStorage() if (pwaInfo) { const {registerSW} = await import("virtual:pwa-register") diff --git a/src/routes/BackupPopup.svelte b/src/routes/BackupPopup.svelte index ab4c5954..59541374 100644 --- a/src/routes/BackupPopup.svelte +++ b/src/routes/BackupPopup.svelte @@ -28,7 +28,7 @@ URL.revokeObjectURL(downloadUrl) } - async function restoreBackup(event: InputEvent) { + async function restoreBackup(event: Event) { const input = (event.target as HTMLInputElement).files![0] if (!input) return const backup = await parseCompressed(input) @@ -119,10 +119,10 @@ border-radius: 32px; transition: all 250ms ease; + } - &.primary { - color: var(--md-sys-color-on-primary); - background: var(--md-sys-color-primary); - } + button.primary { + color: var(--md-sys-color-on-primary); + background: var(--md-sys-color-primary); } diff --git a/src/routes/BrowserWarning.svelte b/src/routes/BrowserWarning.svelte index f9942774..585ee602 100644 --- a/src/routes/BrowserWarning.svelte +++ b/src/routes/BrowserWarning.svelte @@ -82,10 +82,6 @@ mask: url("/browsers/googlechrome.svg"); } - &.brave::before { - mask: url("/browsers/brave.svg"); - } - &.edge::before { mask: url("/browsers/microsoftedge.svg"); } diff --git a/src/routes/Languages.svelte b/src/routes/Languages.svelte deleted file mode 100644 index 2a224866..00000000 --- a/src/routes/Languages.svelte +++ /dev/null @@ -1,18 +0,0 @@ - - -
    - {#each locales as locale} -
    • - {/each} -
diff --git a/src/routes/Navigation.svelte b/src/routes/Navigation.svelte index 520ac453..de77f5ab 100644 --- a/src/routes/Navigation.svelte +++ b/src/routes/Navigation.svelte @@ -9,9 +9,8 @@ import {canAutoConnect} from "$lib/serial/device" import {browser} from "$app/environment" import {userPreferences} from "$lib/preferences" - import Theme from "./Theme.svelte" - import Languages from "./Languages.svelte" import LL from "../i18n/i18n-svelte" + import Profile from "./Profile.svelte" const training = [ {slug: "cpm", title: "CPM - Characters Per Minute", icon: "music_note"}, @@ -45,7 +44,7 @@
{#if $canShare} - share +
{/if} {#await import("$lib/components/PwaStatus.svelte") then { default: PwaStatus }} @@ -64,7 +63,6 @@ {/if} {/if} - - - +
diff --git a/src/routes/Profile.svelte b/src/routes/Profile.svelte new file mode 100644 index 00000000..0eddadd9 --- /dev/null +++ b/src/routes/Profile.svelte @@ -0,0 +1,109 @@ + + +
+

{$LL.profile.TITLE()}

+
+ + format_paint + {$LL.profile.theme.TITLE()} + + + + +
+
+ + translate + {$LL.profile.LANGUAGE()} + + {#each locales as code} + + {/each} +
+
+ + diff --git a/src/routes/Theme.svelte b/src/routes/Theme.svelte deleted file mode 100644 index c96f1562..00000000 --- a/src/routes/Theme.svelte +++ /dev/null @@ -1,61 +0,0 @@ - - -
- - -
- - diff --git a/src/routes/backup/+page.svelte b/src/routes/backup/+page.svelte deleted file mode 100644 index 208f98d1..00000000 --- a/src/routes/backup/+page.svelte +++ /dev/null @@ -1,108 +0,0 @@ - - -
-

Backup & Restore

- -

- We automatically backup your device settings. Backups remain on your computer and are never shared or - uploaded to our servers. -

- -
- - -
-
- - diff --git a/static/browsers/brave.svg b/static/browsers/brave.svg deleted file mode 100644 index fa798a45..00000000 --- a/static/browsers/brave.svg +++ /dev/null @@ -1 +0,0 @@ -Brave \ No newline at end of file