fix: replace zap slider with common amount pills

src/app/components/Zap.svelte

@@ -1,6 +1,5 @@
 <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"
@@ -83,7 +82,7 @@
     }
   }
 
-  let amount = $state<number>(first($zapAmounts) ?? 21)
+  let amount = $state(zapAmounts.get()[0])
   let content = $state("⚡️")
   let loading = $state(false)
 </script>

src/app/components/ZapInvoice.svelte

@@ -1,7 +1,6 @@
 <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"
@@ -106,7 +105,7 @@
     }
   }
 
-  let amount = $state<number>(first($zapAmounts) ?? 21)
+  let amount = $state(zapAmounts.get()[0])
   let content = $state("⚡️")
   let loading = $state(false)
   let invoice = $state<string>()

src/app/settings.ts

@@ -37,7 +37,6 @@ export type SettingsValues = {
   send_delay: number
   font_size: number
   alerts: SpaceNotificationSettings[]
-  zap_amounts: number[]
 }
 
 export type Settings = {
@@ -55,7 +54,6 @@ export const defaultSettings: SettingsValues = {
   send_delay: 0,
   font_size: 1.1,
   alerts: [],
-  zap_amounts: [21, 210, 2100, 21000],
 }
 
 export const settingsByPubkey = deriveItemsByKey({
@@ -82,8 +80,6 @@ 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
@@ -113,6 +109,10 @@ 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} from "@app/settings"
+  import {getSetting, userSettingsValues, notificationSettings, zapAmounts} 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,6 +200,11 @@
         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 {userSettingsValues, publishSettings} from "@app/settings"
+  import {zapAmounts} 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 = [...$userSettingsValues.zap_amounts]
+    zapAmountDraft = [...zapAmounts.get()]
   }
 
   const addZapAmount = () => {
@@ -106,25 +106,21 @@
     zapAmountDraft = replaceAt(index, Number(target.value), zapAmountDraft)
   }
 
-  const onZapAmountsSubmit = preventDefault(async () => {
+  const onZapAmountsSubmit = preventDefault(() => {
     zapAmountsLoading = true
 
     try {
-      if (zapAmountDraft.length === 0) {
+      const amounts = zapAmountDraft.filter(amount => amount > 0)
+
+      if (amounts.length === 0) {
         return pushToast({
           theme: "error",
-          message: "Add at least one zap amount.",
+          message: "Add at least one zap amount greater than zero.",
         })
       }
 
-      if (zapAmountDraft.some(amount => amount <= 0)) {
-        return pushToast({
-          theme: "error",
-          message: "Zap amounts must be greater than zero.",
-        })
-      }
-
-      await publishSettings({zap_amounts: zapAmountDraft})
+      zapAmounts.set(amounts)
+      zapAmountDraft = [...amounts]
 
       pushToast({message: "Your zap amounts have been saved!"})
     } finally {
@@ -132,7 +128,7 @@
     }
   })
 
-  let zapAmountDraft = $state([...$userSettingsValues.zap_amounts])
+  let zapAmountDraft = $state([...zapAmounts.get()])
   let zapAmountsLoading = $state(false)
 </script>