fix: replace zap slider with common amount pills

src/app/components/Zap.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import cx from "classnames"
+  import {first} from "@welshman/lib"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {signer, deriveZapperForPubkey} from "@welshman/app"
   import {load} from "@welshman/net"
@@ -82,7 +83,7 @@
     }
   }
 
-  let amount = $state(zapAmounts.get()[0])
+  let amount = $state<number>(first($zapAmounts) ?? 21)
   let content = $state("⚡️")
   let loading = $state(false)
 </script>

src/app/components/ZapInvoice.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {onDestroy} from "svelte"
   import cx from "classnames"
+  import {first} from "@welshman/lib"
   import type {NativeEmoji} from "emoji-picker-element/shared"
   import {signer, deriveZapperForPubkey} from "@welshman/app"
   import {request} from "@welshman/net"
@@ -105,7 +106,7 @@
     }
   }
 
-  let amount = $state(zapAmounts.get()[0])
+  let amount = $state<number>(first($zapAmounts) ?? 21)
   let content = $state("⚡️")
   let loading = $state(false)
   let invoice = $state<string>()

src/app/settings.ts

@@ -37,6 +37,7 @@ export type SettingsValues = {
   send_delay: number
   font_size: number
   alerts: SpaceNotificationSettings[]
+  zap_amounts: number[]
 }
 
 export type Settings = {
@@ -54,6 +55,7 @@ export const defaultSettings: SettingsValues = {
   send_delay: 0,
   font_size: 1.1,
   alerts: [],
+  zap_amounts: [21, 210, 2100, 21000],
 }
 
 export const settingsByPubkey = deriveItemsByKey({
@@ -80,6 +82,8 @@ export const loadUserSettings = makeUserLoader(loadSettings)
 
 export const userSettingsValues = derived(userSettings, $s => $s?.values || defaultSettings)
 
+export const zapAmounts = derived(userSettingsValues, $settings => $settings.zap_amounts)
+
 export const getSettings = getter(userSettingsValues)
 
 export const getSetting = <T>(key: keyof Settings["values"]) => getSettings()[key] as T
@@ -109,10 +113,6 @@ export const notificationSettings = withGetter(
   }),
 )
 
-export const defaultZapAmounts = [21, 210, 2100, 21000]
-
-export const zapAmounts = withGetter(writable([...defaultZapAmounts]))
-
 export const makeSettings = async (params: Partial<SettingsValues>) => {
   const json = JSON.stringify({...get(userSettingsValues), ...params})
   const content = await signer.get().nip44.encrypt(pubkey.get()!, json)

src/routes/+layout.svelte

@@ -35,7 +35,7 @@
   import {authPolicy, blockPolicy, trustPolicy, mostlyRestrictedPolicy} from "@app/policies"
   import {db, kv, ss} from "@app/storage"
   import {device} from "@app/device"
-  import {getSetting, userSettingsValues, notificationSettings, zapAmounts} from "@app/settings"
+  import {getSetting, userSettingsValues, notificationSettings} from "@app/settings"
   import {DUFFLEPUD_URL, INDEXER_RELAYS, POMADE_SIGNERS} from "@app/env"
   import {pushState} from "@app/push/adapters/common"
   import {syncApplicationData} from "@app/sync"
@@ -200,11 +200,6 @@
         store: notificationSettings,
         storage: kv,
       }),
-      sync({
-        key: "zapAmounts",
-        store: zapAmounts,
-        storage: kv,
-      }),
       sync({
         key: "notificationState",
         store: pushState,

src/routes/settings/wallet/+page.svelte

@@ -19,7 +19,7 @@
   import WalletUpdateReceivingAddress from "@app/components/WalletUpdateReceivingAddress.svelte"
   import {pushModal} from "@app/modal"
   import {getNwcClient, getWebLn} from "@app/lightning"
-  import {zapAmounts} from "@app/settings"
+  import {userSettingsValues, publishSettings} from "@app/settings"
   import {pushToast} from "@app/toast"
   import Wallet2 from "@assets/icons/wallet.svg?dataurl"
   import CheckCircle from "@assets/icons/check-circle.svg?dataurl"
@@ -86,7 +86,7 @@
   })
 
   const resetZapAmounts = () => {
-    zapAmountDraft = [...zapAmounts.get()]
+    zapAmountDraft = [...$userSettingsValues.zap_amounts]
   }
 
   const addZapAmount = () => {
@@ -106,21 +106,25 @@
     zapAmountDraft = replaceAt(index, Number(target.value), zapAmountDraft)
   }
 
-  const onZapAmountsSubmit = preventDefault(() => {
+  const onZapAmountsSubmit = preventDefault(async () => {
     zapAmountsLoading = true
 
     try {
-      const amounts = zapAmountDraft.filter(amount => amount > 0)
-
-      if (amounts.length === 0) {
+      if (zapAmountDraft.length === 0) {
         return pushToast({
           theme: "error",
-          message: "Add at least one zap amount greater than zero.",
+          message: "Add at least one zap amount.",
         })
       }
 
-      zapAmounts.set(amounts)
-      zapAmountDraft = [...amounts]
+      if (zapAmountDraft.some(amount => amount <= 0)) {
+        return pushToast({
+          theme: "error",
+          message: "Zap amounts must be greater than zero.",
+        })
+      }
+
+      await publishSettings({zap_amounts: zapAmountDraft})
 
       pushToast({message: "Your zap amounts have been saved!"})
     } finally {
@@ -128,7 +132,7 @@
     }
   })
 
-  let zapAmountDraft = $state([...zapAmounts.get()])
+  let zapAmountDraft = $state([...$userSettingsValues.zap_amounts])
   let zapAmountsLoading = $state(false)
 </script>