feature: restoring colors

Author: vdawg-git

src/lib/state/colors.ts

@@ -3,7 +3,7 @@ import { formatHex, okhsl, rgb, type Okhsl } from "culori"
 import * as R from "remeda"
 import { fromStore } from "$lib/utils"
 import { undo } from "$lib/undo"
-import { combineLatest, map, shareReplay, type Observable } from "rxjs"
+import { combineLatest, debounceTime, map, shareReplay, skip, type Observable } from "rxjs"
 import type { ColorName } from "@catppuccin/palette"
 import { mocha, presetToOkhsl } from "$lib/presets"
 
@@ -26,7 +26,14 @@ const colorVars$ = colors$.pipe(
 	)
 )
 
+export const restoreAvailable = !!globalThis.localStorage && !!localStorage.getItem("colors")
+
+// Runs in the browser
 if (globalThis.document) {
+	colors$.pipe(skip(2), debounceTime(400)).subscribe((colors) => {
+		localStorage.setItem("colors", JSON.stringify(colors))
+	})
+
 	colorVars$.subscribe((newVariables) => {
 		newVariables.forEach(([key, value]) => {
 			globalThis.document.documentElement.style.setProperty(key, value)

src/routes/+layout.svelte

@@ -5,11 +5,12 @@
 	import "@unocss/reset/tailwind.css"
 	import "virtual:uno.css"
 	import "../app.css"
-	import { activeColorHsl$, activeColor, colors$ } from "$lib/state/colors"
+	import { activeColorHsl$, activeColor, colors$, setColors } from "$lib/state/colors"
 	import { cssVar } from "$lib/utils"
 	// import { Toaster } from "svelte-sonner"
 	import { type Okhsl } from "culori"
 	import Button from "$lib/components/ui/button/button.svelte"
+	import Json from "$lib/icons/json.svelte"
 
 	function getActiveColorForeground(active: Okhsl) {
 		const lightness = active.l
@@ -22,11 +23,16 @@
 	}
 
 	let smallScreenDialog: HTMLDialogElement
+	let restoreColorsDialog: HTMLDialogElement
 
 	$effect(() => {
 		if (window.innerWidth < 640) {
 			smallScreenDialog.showModal()
 		}
+
+		if (localStorage.getItem("colors")) {
+			restoreColorsDialog.showModal()
+		}
 	})
 </script>
 
@@ -35,15 +41,6 @@
 </noscript>
 
 <!-- <Toaster /> -->
-<dialog bind:this={smallScreenDialog} class="bg-transparent">
-	<div
-		class="border-5 flex flex-col gap-5 rounded-xl text-xl border-red px-6 py-3 bg-crust text-rosewater"
-	>
-		This app does not work properly on small screens.
-
-		<form method="dialog"><Button onclick={() => smallScreenDialog.close()}>Okay</Button></form>
-	</div>
-</dialog>
 
 <div
 	class="min-h-screen flex flex-col max-h-screen h-screen font-sans"
@@ -55,6 +52,39 @@
 	</main>
 </div>
 
+<dialog bind:this={restoreColorsDialog} class="bg-transparent border-none">
+	<div class="bg-base rounded-2xl border-2 border-subtext0 p-6 flex flex-col gap-6">
+		<h1 class="text-lg text-rosewater">Restore colors of last session?</h1>
+		<div class="flex gap-6">
+			<form method="dialog">
+				<Button variant="link" onclick={() => restoreColorsDialog.close()}>Nah</Button>
+			</form>
+			<Button
+				autofocus
+				onclick={() => {
+					const saved = localStorage.getItem("colors")
+					if (saved) {
+						const colors = JSON.parse(saved)
+						setColors(colors)
+						restoreColorsDialog.close()
+					}
+					restoreColorsDialog.close()
+				}}>Restore colors</Button
+			>
+		</div>
+	</div>
+</dialog>
+
+<dialog bind:this={smallScreenDialog} class="bg-transparent">
+	<div
+		class="border-5 flex flex-col gap-5 rounded-xl text-xl border-red px-6 py-3 bg-crust text-rosewater"
+	>
+		This app does not work properly on small screens.
+
+		<form method="dialog"><Button onclick={() => smallScreenDialog.close()}>Okay</Button></form>
+	</div>
+</dialog>
+
 <style>
 	::backdrop {
 		background-color: theme("colors.crust");