add visual flourish

src/lib/components/PasswordDialog.svelte

@@ -6,7 +6,8 @@
     openWallet,
   } from "$lib/wallet.svelte";
   import { browser } from "$app/environment";
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
+  import { fly } from "svelte/transition";
 
   let { onunlock }: { onunlock: () => void } = $props();
 
@@ -14,8 +15,11 @@
   let password = $state("");
   let error = $state("");
   let isValidating = $state(false);
+  let show = $state(false);
 
-  onMount(() => {
+  onMount(async () => {
+    show = true;
+    await tick();
     dialogEl?.showModal();
   });
 
@@ -41,45 +45,50 @@
   }
 </script>
 
-<dialog bind:this={dialogEl}>
-  <h2>Unlock Wallet</h2>
-  <p>Enter your wallet password to decrypt your seed.</p>
-  {#if error}
-    <p
-      style="color: var(--error-color); font-size: 0.7rem; margin-bottom: 1rem;"
-    >
-      {error}
-    </p>
-  {/if}
-  <input
-    type="password"
-    class="retro-input"
-    bind:value={password}
-    placeholder="Password"
-    disabled={isValidating}
-    onkeydown={(e) => {
-      if (e.key === "Enter" && !isValidating) {
-        attemptUnlock();
-      }
-    }}
-  />
-  <div style="margin-top:1rem;text-align:center;">
-    <button
-      class="retro-btn primary"
+{#if show}
+  <dialog
+    bind:this={dialogEl}
+    transition:fly={{ y: 250, duration: 250, delay: 0.5 }}
+  >
+    <h2>Unlock Wallet</h2>
+    <p>Enter your wallet password to decrypt your seed.</p>
+    {#if error}
+      <p
+        style="color: var(--error-color); font-size: 0.7rem; margin-bottom: 1rem;"
+      >
+        {error}
+      </p>
+    {/if}
+    <input
+      type="password"
+      class="retro-input"
+      bind:value={password}
+      placeholder="Password"
       disabled={isValidating}
-      onclick={() => {
-        attemptUnlock();
-      }}>{isValidating ? "Validating..." : "Unlock"}</button
-    >
-  </div>
-</dialog>
+      onkeydown={(e) => {
+        if (e.key === "Enter" && !isValidating) {
+          attemptUnlock();
+        }
+      }}
+    />
+    <div style="margin-top:1rem;text-align:center;">
+      <button
+        class="retro-btn primary"
+        disabled={isValidating}
+        onclick={() => {
+          attemptUnlock();
+        }}>{isValidating ? "Validating..." : "Unlock"}</button
+      >
+    </div>
+  </dialog>
+{/if}
 
 <style>
   dialog {
     z-index: 2000;
   }
   dialog::backdrop {
-    background: rgba(0, 0, 0, 1);
+    background: transparent;
   }
   h2 {
     margin-top: 0;

src/lib/components/ToggleSwitch.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+  let {
+    label,
+    checked = $bindable(),
+  }: {
+    label: string;
+    checked: boolean;
+  } = $props();
+</script>
+
+<div class="switch-container">
+  <span class="switch-label">{label}</span>
+  <label class="switch">
+    <input type="checkbox" bind:checked />
+    <div class="track">
+      <div class="knob" />
+    </div>
+  </label>
+</div>
+
+<style>
+  .switch-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0;
+    font-family: "Press Start 2P", monospace;
+  }
+
+  .switch-label {
+    font-size: 0.8rem;
+  }
+
+  .switch {
+    position: relative;
+    display: inline-block;
+    width: 90px;
+    height: 40px;
+    cursor: pointer;
+    user-select: none;
+    transform: translateY(-50%);
+  }
+
+  .switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  .track {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+      145deg,
+      var(--surface-alt-color) 0%,
+      #1a1a1a 100%
+    );
+    border: 3px solid var(--accent-color);
+    border-radius: 4px;
+    box-shadow: 2px 2px 0 #000;
+  }
+
+  .switch:active .track {
+    transform: translate(1px, 1px);
+    box-shadow: 1px 1px 0 #000;
+  }
+
+  .knob {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 40px;
+    height: 30px;
+    background: linear-gradient(145deg, var(--primary-color) 0%, #d4af00 100%);
+    border: 2px solid #000;
+    border-radius: 2px;
+    transition: transform 0.2s ease-in-out;
+    z-index: 1;
+    box-shadow:
+      inset 0 0 2px rgba(255, 255, 255, 0.3),
+      inset 0 0 5px rgba(0, 0, 0, 0.5);
+  }
+
+  input:checked ~ .track .knob {
+    transform: translateX(41px);
+  }
+</style>

src/lib/settings.svelte.ts

@@ -0,0 +1,28 @@
+import { persistentDbWritable } from "$lib/index";
+import type { Writable } from "svelte/store";
+import Dexie, { type Table } from "dexie";
+
+interface MetaEntry {
+  key: string;
+  value: string;
+}
+
+class SettingsDB extends Dexie {
+    meta!: Table<MetaEntry, string>;
+
+    constructor() {
+        super("settings");
+        this.version(1).stores({
+            meta: "&key"
+        });
+    }
+}
+
+const settingsDB = new SettingsDB();
+
+export const shaderEnabled: Writable<boolean> = persistentDbWritable<boolean, SettingsDB>(
+    "shaderEnabled",
+    true,
+
+    settingsDB
+);

src/lib/style.css

@@ -31,8 +31,7 @@ body {
   letter-spacing: 0.5px;
   line-height: 1.2;
   text-shadow: 1px 1px 0 #000;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
 }
 
 .app-wrapper {
@@ -44,14 +43,6 @@ body {
   padding: 2rem 1rem 4rem;
 }
 
-.container {
-  width: 100%;
-  max-width: 28rem;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-}
-
 .send-receive-buttons {
   display: flex;
   gap: 0.75rem;
@@ -68,6 +59,9 @@ body {
   box-shadow:
     0 0 0 4px #000,
     0 0 0 8px var(--primary-color);
+  .header {
+    cursor: pointer;
+  }
 }
 
 .retro-card::before {