Add a currency input

src/app/components/ClassifiedCreate.svelte

@@ -14,6 +14,7 @@
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
+  import CurrencyInput from "@app/components/CurrencyInput.svelte"
   import EditorContent from "@app/editor/EditorContent.svelte"
   import {pushToast} from "@app/util/toast"
   import {PROTECTED} from "@app/core/state"
@@ -75,7 +76,9 @@
 
   const editor = makeEditor({url, submit, uploading, placeholder: "What's on your mind?"})
 
-  let title: string = $state("")
+  let title = $state("")
+  let currencyCode = $state("SAT")
+  let currencyAmount = $state(0)
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(submit)}>
@@ -116,7 +119,12 @@
           <p>Price*</p>
         {/snippet}
         {#snippet input()}
-           todo: value and search select inline
+          <div class="join grid grid-cols-2">
+            <label class="join-item input input-bordered flex w-full items-center gap-2">
+              <input bind:value={currencyAmount} class="grow w-32" type="number" />
+            </label>
+            <CurrencyInput class="join-item" bind:value={currencyCode} />
+          </div>
         {/snippet}
       </Field>
       <Field>
@@ -124,7 +132,7 @@
           <p>Images</p>
         {/snippet}
         {#snippet input()}
-           todo: attach multiple images
+          todo: attach multiple images
         {/snippet}
       </Field>
       <Button

src/app/components/CurrencyInput.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+  import cx from "classnames"
+  import {writable} from "svelte/store"
+  import type {Writable} from "svelte/store"
+  import type {Instance} from "tippy.js"
+  import {preventDefault} from '@lib/html'
+  import {createSearch} from "@welshman/app"
+  import {currencyOptions, displayCurrency} from "@lib/currency"
+  import Suggestions from "@lib/components/Suggestions.svelte"
+  import CurrencySuggestion from "@app/components/CurrencySuggestion.svelte"
+  import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
+  import Icon from "@lib/components/Icon.svelte"
+  import Tippy from "@lib/components/Tippy.svelte"
+
+  interface Props {
+    value: string
+    autofocus?: boolean
+    term?: Writable<string>
+    class?: string
+  }
+
+  let {value = $bindable(), term = writable(""), autofocus = false, ...props}: Props = $props()
+
+  const options = createSearch(currencyOptions, {
+    getValue: item => item.code,
+    fuseOptions: {
+      keys: ["name", "code"],
+      threshold: 0.4,
+    },
+  })
+
+  const search = (term: string) =>
+    term ? options.searchValues(term) : ["BTC", "SAT", "USD", "GBP", "AUD", "CAD"]
+
+  const selectCurrency = (code: string) => {
+    value = code
+    term.set("")
+    popover?.hide()
+  }
+
+  const clearAndFocus = () => {
+    value = ""
+    term.set("")
+    setTimeout(() => wrapper?.querySelector("input")?.focus())
+  }
+
+  const onKeyDown = (e: Event) => {
+    if (instance.onKeyDown(e)) {
+      e.preventDefault()
+    }
+  }
+
+  const currency = $derived(currencyOptions.find(c => c.code === value))
+
+  let wrapper: Element | undefined = $state()
+  let popover: Instance | undefined = $state()
+  let instance: any = $state()
+
+  $effect(() => {
+    if ($term) {
+      popover?.show()
+    } else {
+      popover?.hide()
+    }
+  })
+</script>
+
+<button
+  class={cx(
+    props.class,
+    {"bg-base-200": currency},
+    "input input-bordered flex items-center gap-2 cursor-pointer",
+  )}
+  bind:this={wrapper}
+  onfocus={preventDefault(clearAndFocus)}
+  onclick={preventDefault(clearAndFocus)}>
+  <Icon icon={AltArrowDown} />
+  {#if currency}
+    <span class="text-sm ellipsize whitespace-nowrap">
+      {displayCurrency(currency)}
+    </span>
+  {:else}
+    <!-- svelte-ignore a11y_autofocus -->
+    <input {autofocus} class="grow" type="text" bind:value={$term} onkeydown={onKeyDown} />
+  {/if}
+  <Tippy
+    bind:popover
+    bind:instance
+    component={Suggestions}
+    props={{
+      term,
+      search,
+      select: selectCurrency,
+      component: CurrencySuggestion,
+    }}
+    params={{
+      trigger: "manual",
+      interactive: true,
+      getReferenceClientRect: () => wrapper!.getBoundingClientRect(),
+    }} />
+</button>

src/app/components/CurrencySuggestion.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import {displayCurrencyByCode} from "@lib/currency"
+
+  type Props = {
+    value: string
+  }
+
+  const {value}: Props = $props()
+</script>
+
+{displayCurrencyByCode(value)}

src/lib/components/CurrencyInput.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-  import {prop} from "@welshman/lib"
-  import {fuzzy} from "src/util/misc"
-  import {currencyOptions} from "src/util/i18n"
-  import SearchSelect from "src/partials/SearchSelect.svelte"
-
-  export let value
-
-  const getKey = prop("code")
-  const termToItem = code => ({name: code, code})
-  const search = fuzzy(currencyOptions, {keys: ["name", "code"], threshold: 0.4})
-  const defaultCodes = ["BTC", "SAT", "USD", "GBP", "AUD", "CAD"]
-  const defaultOptions = currencyOptions.filter(c => defaultCodes.includes(c.code))
-</script>
-
-<SearchSelect bind:value {getKey} {termToItem} {defaultOptions} {search}>
-  <span slot="before">
-    <i class="fa fa-right-left" />
-  </span>
-  <div slot="item" let:item>
-    {item.name} ({item.code})
-  </div>
-</SearchSelect>

src/lib/components/CurrencySymbol.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {currencyOptions} from "src/util/i18n"
+  import {currencyOptions} from "@lib/currency"
 
   export let code
 </script>

src/lib/currency.ts

@@ -1,163 +1,173 @@
-export const currencyOptions = [
-  {name: "Afghan afghani", symbol: "؋‎", code: "AFN"},
-  {name: "Albanian lek", symbol: "Lek", code: "ALL"},
-  {name: "Algerian dinar", symbol: "DA", code: "DZD"},
-  {name: "Angolan kwanza", symbol: "Kz", code: "AOA"},
-  {name: "Argentine peso", symbol: "$", code: "ARS"},
-  {name: "Armenian dram", symbol: "֏", code: "AMD"},
-  {name: "Aruban florin", symbol: "ƒ", code: "AWG"},
-  {name: "Australian dollar", symbol: "$", code: "AUD"},
-  {name: "Azerbaijani manat", symbol: "₼", code: "AZN"},
-  {name: "Bahamian dollar", symbol: "$", code: "BSD"},
-  {name: "Bahraini dinar", symbol: "BD", code: "BHD"},
-  {name: "Bangladeshi taka", symbol: "৳", code: "BDT"},
-  {name: "Barbadian dollar", symbol: "$", code: "BBD"},
-  {name: "Belarusian ruble", symbol: "Br", code: "BYN"},
-  {name: "Belize dollar", symbol: "$", code: "BZD"},
-  {name: "Bermudian dollar", symbol: "$", code: "BMD"},
-  {name: "Bhutanese ngultrum", symbol: "Nu", code: "BTN"},
-  {name: "Bitcoin", symbol: "!", code: "SAT"},
+export type CurrencyOption = {
+  code: string
+  name: string
+  symbol: string
+}
+
+export const currencyOptions: CurrencyOption[] = [
+  {name: "Afghan Afghani", symbol: "؋‎", code: "AFN"},
+  {name: "Albanian Lek", symbol: "Lek", code: "ALL"},
+  {name: "Algerian Dinar", symbol: "DA", code: "DZD"},
+  {name: "Angolan Kwanza", symbol: "Kz", code: "AOA"},
+  {name: "Argentine Peso", symbol: "$", code: "ARS"},
+  {name: "Armenian Dram", symbol: "֏", code: "AMD"},
+  {name: "Aruban Florin", symbol: "ƒ", code: "AWG"},
+  {name: "Australian Dollar", symbol: "$", code: "AUD"},
+  {name: "Azerbaijani Manat", symbol: "₼", code: "AZN"},
+  {name: "Bahamian Dollar", symbol: "$", code: "BSD"},
+  {name: "Bahraini Dinar", symbol: "BD", code: "BHD"},
+  {name: "Bangladeshi Taka", symbol: "৳", code: "BDT"},
+  {name: "Barbadian Dollar", symbol: "$", code: "BBD"},
+  {name: "Belarusian Ruble", symbol: "Br", code: "BYN"},
+  {name: "Belize Dollar", symbol: "$", code: "BZD"},
+  {name: "Bermudian Dollar", symbol: "$", code: "BMD"},
+  {name: "Bhutanese Ngultrum", symbol: "Nu", code: "BTN"},
+  {name: "Satoshi", symbol: "!", code: "SAT"},
   {name: "Bitcoin", symbol: "₿", code: "BTC"},
-  {name: "Bolivian boliviano", symbol: "Bs", code: "BOB"},
-  {name: "Bosnia and Herzegovina convertible mark", symbol: "KM", code: "BAM"},
-  {name: "Botswana pula", symbol: "P", code: "BWP"},
-  {name: "Brazilian real", symbol: "R$", code: "BRL"},
-  {name: "Brunei dollar", symbol: "$", code: "BND"},
-  {name: "Bulgarian lev", symbol: "Lev", code: "BGN"},
-  {name: "Burmese kyat", symbol: "K", code: "MMK"},
-  {name: "Burundian franc", symbol: "Fr", code: "BIF"},
-  {name: "CFP franc", symbol: "Fr", code: "XPF"},
-  {name: "Cambodian riel", symbol: "៛", code: "KHR"},
+  {name: "Bolivian Boliviano", symbol: "Bs", code: "BOB"},
+  {name: "Bosnia And Herzegovina Convertible Mark", symbol: "KM", code: "BAM"},
+  {name: "Botswana Pula", symbol: "P", code: "BWP"},
+  {name: "Brazilian Real", symbol: "R$", code: "BRL"},
+  {name: "Brunei Dollar", symbol: "$", code: "BND"},
+  {name: "Bulgarian Lev", symbol: "Lev", code: "BGN"},
+  {name: "Burmese Kyat", symbol: "K", code: "MMK"},
+  {name: "Burundian Franc", symbol: "Fr", code: "BIF"},
+  {name: "CFP Franc", symbol: "Fr", code: "XPF"},
+  {name: "Cambodian Riel", symbol: "៛", code: "KHR"},
   {name: "Canadian Dollar", symbol: "$", code: "CAD"},
-  {name: "Cape Verdean escudo", symbol: "$", code: "CVE"},
-  {name: "Cayman Islands dollar", symbol: "$", code: "KYD"},
-  {name: "Central African CFA franc", symbol: "Fr", code: "XAF"},
-  {name: "Chilean peso", symbol: "$", code: "CLP"},
-  {name: "Colombian peso", symbol: "$", code: "COP"},
-  {name: "Comorian franc", symbol: "Fr", code: "KMF"},
-  {name: "Congolese franc", symbol: "Fr", code: "CDF"},
-  {name: "Costa Rican colón", symbol: "₡", code: "CRC"},
-  {name: "Cuban peso", symbol: "$", code: "CUP"},
-  {name: "Czech koruna", symbol: "Kč", code: "CZK"},
-  {name: "Danish krone", symbol: "kr", code: "DKK"},
-  {name: "Djiboutian franc", symbol: "Fr", code: "DJF"},
-  {name: "Dominican peso", symbol: "$", code: "DOP"},
-  {name: "Eastern Caribbean dollar", symbol: "$", code: "XCD"},
-  {name: "Egyptian pound", symbol: "LE", code: "EGP"},
-  {name: "Eritrean nakfa", symbol: "Nkf", code: "ERN"},
-  {name: "Ethiopian birr", symbol: "Br", code: "ETB"},
+  {name: "Cape Verdean Escudo", symbol: "$", code: "CVE"},
+  {name: "Cayman Islands Dollar", symbol: "$", code: "KYD"},
+  {name: "Central African CFA Franc", symbol: "Fr", code: "XAF"},
+  {name: "Chilean Peso", symbol: "$", code: "CLP"},
+  {name: "Colombian Peso", symbol: "$", code: "COP"},
+  {name: "Comorian Franc", symbol: "Fr", code: "KMF"},
+  {name: "Congolese Franc", symbol: "Fr", code: "CDF"},
+  {name: "Costa Rican Colón", symbol: "₡", code: "CRC"},
+  {name: "Cuban Peso", symbol: "$", code: "CUP"},
+  {name: "Czech Koruna", symbol: "Kč", code: "CZK"},
+  {name: "Danish Krone", symbol: "kr", code: "DKK"},
+  {name: "Djiboutian Franc", symbol: "Fr", code: "DJF"},
+  {name: "Dominican Peso", symbol: "$", code: "DOP"},
+  {name: "Eastern Caribbean Dollar", symbol: "$", code: "XCD"},
+  {name: "Egyptian Pound", symbol: "LE", code: "EGP"},
+  {name: "Eritrean Nakfa", symbol: "Nkf", code: "ERN"},
+  {name: "Ethiopian Birr", symbol: "Br", code: "ETB"},
   {name: "Euro", symbol: "€", code: "EUR"},
-  {name: "Falkland Islands pound", symbol: "£", code: "FKP"},
-  {name: "Fijian dollar", symbol: "$", code: "FJD"},
-  {name: "Gambian dalasi", symbol: "D", code: "GMD"},
-  {name: "Georgian lari", symbol: "₾", code: "GEL"},
-  {name: "Ghanaian cedi", symbol: "₵", code: "GHS"},
-  {name: "Gibraltar pound", symbol: "£", code: "GIP"},
-  {name: "Guatemalan quetzal", symbol: "Q", code: "GTQ"},
-  {name: "Guinean franc", symbol: "Fr", code: "GNF"},
-  {name: "Guyanese dollar", symbol: "$", code: "GYD"},
-  {name: "Haitian gourde", symbol: "G", code: "HTG"},
-  {name: "Honduran lempira", symbol: "L", code: "HNL"},
-  {name: "Hong Kong dollar", symbol: "$", code: "HKD"},
-  {name: "Hungarian forint", symbol: "Ft", code: "HUF"},
-  {name: "Icelandic króna", symbol: "kr", code: "ISK"},
-  {name: "Indian rupee", symbol: "₹", code: "INR"},
-  {name: "Indonesian rupiah", symbol: "Rp", code: "IDR"},
-  {name: "Iranian rial", symbol: "Rl", code: "IRR"},
-  {name: "Iraqi dinar", symbol: "ID", code: "IQD"},
-  {name: "Israeli new shekel", symbol: "₪", code: "ILS"},
-  {name: "Jamaican dollar", symbol: "$", code: "JMD"},
-  {name: "Japanese yen", symbol: "¥", code: "JPY"},
-  {name: "Jordanian dinar", symbol: "JD", code: "JOD"},
-  {name: "Kazakhstani tenge", symbol: "₸", code: "KZT"},
-  {name: "Kenyan shilling", symbol: "Sh", code: "KES"},
-  {name: "Kuwaiti dinar", symbol: "KD", code: "KWD"},
-  {name: "Kyrgyz som", symbol: "som", code: "KGS"},
-  {name: "Lao kip", symbol: "₭", code: "LAK"},
-  {name: "Lebanese pound", symbol: "LL", code: "LBP"},
-  {name: "Lesotho loti", symbol: "L", code: "LSL"},
-  {name: "Liberian dollar", symbol: "$", code: "LRD"},
-  {name: "Libyan dinar", symbol: "LD", code: "LYD"},
-  {name: "Macanese pataca", symbol: "MOP$", code: "MOP"},
-  {name: "Macedonian denar", symbol: "DEN", code: "MKD"},
-  {name: "Malagasy ariary", symbol: "Ar", code: "MGA"},
-  {name: "Malawian kwacha", symbol: "K", code: "MWK"},
-  {name: "Malaysian ringgit", symbol: "RM", code: "MYR"},
-  {name: "Maldivian rufiyaa", symbol: "Rf", code: "MVR"},
-  {name: "Mauritanian ouguiya", symbol: "UM", code: "MRU"},
-  {name: "Mauritian rupee", symbol: "Re", code: "MUR"},
-  {name: "Mexican peso", symbol: "$", code: "MXN"},
-  {name: "Moldovan leu", symbol: "Leu", code: "MDL"},
-  {name: "Mongolian tögrög", symbol: "₮", code: "MNT"},
-  {name: "Moroccan dirham", symbol: "DH", code: "MAD"},
-  {name: "Mozambican metical", symbol: "Mt", code: "MZN"},
-  {name: "Namibian dollar", symbol: "$", code: "NAD"},
-  {name: "Nepalese rupee", symbol: "Re", code: "NPR"},
-  {name: "Netherlands Antillean guilder", symbol: "ƒ", code: "ANG"},
-  {name: "New Taiwan dollar", symbol: "$", code: "TWD"},
-  {name: "New Zealand dollar", symbol: "$", code: "NZD"},
-  {name: "Nicaraguan córdoba", symbol: "C$", code: "NIO"},
-  {name: "Nigerian naira", symbol: "₦", code: "NGN"},
-  {name: "North Korean won", symbol: "₩", code: "KPW"},
-  {name: "Norwegian krone", symbol: "kr", code: "NOK"},
-  {name: "Omani rial", symbol: "RO", code: "OMR"},
-  {name: "Pakistani rupee", symbol: "Re", code: "PKR"},
-  {name: "Panamanian balboa", symbol: "B/", code: "PAB"},
-  {name: "Papua New Guinean kina", symbol: "K", code: "PGK"},
-  {name: "Paraguayan guaraní", symbol: "₲", code: "PYG"},
-  {name: "Peruvian sol", symbol: "S/", code: "PEN"},
-  {name: "Philippine peso", symbol: "₱", code: "PHP"},
-  {name: "Polish złoty", symbol: "zł", code: "PLN"},
-  {name: "Qatari riyal", symbol: "QR", code: "QAR"},
+  {name: "Falkland Islands Pound", symbol: "£", code: "FKP"},
+  {name: "Fijian Dollar", symbol: "$", code: "FJD"},
+  {name: "Gambian Dalasi", symbol: "D", code: "GMD"},
+  {name: "Georgian Lari", symbol: "₾", code: "GEL"},
+  {name: "Ghanaian Cedi", symbol: "₵", code: "GHS"},
+  {name: "Gibraltar Pound", symbol: "£", code: "GIP"},
+  {name: "Guatemalan Quetzal", symbol: "Q", code: "GTQ"},
+  {name: "Guinean Franc", symbol: "Fr", code: "GNF"},
+  {name: "Guyanese Dollar", symbol: "$", code: "GYD"},
+  {name: "Haitian Gourde", symbol: "G", code: "HTG"},
+  {name: "Honduran Lempira", symbol: "L", code: "HNL"},
+  {name: "Hong Kong Dollar", symbol: "$", code: "HKD"},
+  {name: "Hungarian Forint", symbol: "Ft", code: "HUF"},
+  {name: "Icelandic Króna", symbol: "kr", code: "ISK"},
+  {name: "Indian Rupee", symbol: "₹", code: "INR"},
+  {name: "Indonesian Rupiah", symbol: "Rp", code: "IDR"},
+  {name: "Iranian Rial", symbol: "Rl", code: "IRR"},
+  {name: "Iraqi Dinar", symbol: "ID", code: "IQD"},
+  {name: "Israeli New Shekel", symbol: "₪", code: "ILS"},
+  {name: "Jamaican Dollar", symbol: "$", code: "JMD"},
+  {name: "Japanese Yen", symbol: "¥", code: "JPY"},
+  {name: "Jordanian Dinar", symbol: "JD", code: "JOD"},
+  {name: "Kazakhstani Tenge", symbol: "₸", code: "KZT"},
+  {name: "Kenyan Shilling", symbol: "Sh", code: "KES"},
+  {name: "Kuwaiti Dinar", symbol: "KD", code: "KWD"},
+  {name: "Kyrgyz Som", symbol: "som", code: "KGS"},
+  {name: "Lao Kip", symbol: "₭", code: "LAK"},
+  {name: "Lebanese Pound", symbol: "LL", code: "LBP"},
+  {name: "Lesotho Loti", symbol: "L", code: "LSL"},
+  {name: "Liberian Dollar", symbol: "$", code: "LRD"},
+  {name: "Libyan Dinar", symbol: "LD", code: "LYD"},
+  {name: "Macanese Pataca", symbol: "MOP$", code: "MOP"},
+  {name: "Macedonian Denar", symbol: "DEN", code: "MKD"},
+  {name: "Malagasy Ariary", symbol: "Ar", code: "MGA"},
+  {name: "Malawian Kwacha", symbol: "K", code: "MWK"},
+  {name: "Malaysian Ringgit", symbol: "RM", code: "MYR"},
+  {name: "Maldivian Rufiyaa", symbol: "Rf", code: "MVR"},
+  {name: "Mauritanian Ouguiya", symbol: "UM", code: "MRU"},
+  {name: "Mauritian Rupee", symbol: "Re", code: "MUR"},
+  {name: "Mexican Peso", symbol: "$", code: "MXN"},
+  {name: "Moldovan Leu", symbol: "Leu", code: "MDL"},
+  {name: "Mongolian Tögrög", symbol: "₮", code: "MNT"},
+  {name: "Moroccan Dirham", symbol: "DH", code: "MAD"},
+  {name: "Mozambican Metical", symbol: "Mt", code: "MZN"},
+  {name: "Namibian Dollar", symbol: "$", code: "NAD"},
+  {name: "Nepalese Rupee", symbol: "Re", code: "NPR"},
+  {name: "Netherlands Antillean Guilder", symbol: "ƒ", code: "ANG"},
+  {name: "New Taiwan Dollar", symbol: "$", code: "TWD"},
+  {name: "New Zealand Dollar", symbol: "$", code: "NZD"},
+  {name: "Nicaraguan Córdoba", symbol: "C$", code: "NIO"},
+  {name: "Nigerian Naira", symbol: "₦", code: "NGN"},
+  {name: "North Korean Won", symbol: "₩", code: "KPW"},
+  {name: "Norwegian Krone", symbol: "kr", code: "NOK"},
+  {name: "Omani Rial", symbol: "RO", code: "OMR"},
+  {name: "Pakistani Rupee", symbol: "Re", code: "PKR"},
+  {name: "Panamanian Balboa", symbol: "B/", code: "PAB"},
+  {name: "Papua New Guinean Kina", symbol: "K", code: "PGK"},
+  {name: "Paraguayan Guaraní", symbol: "₲", code: "PYG"},
+  {name: "Peruvian Sol", symbol: "S/", code: "PEN"},
+  {name: "Philippine Peso", symbol: "₱", code: "PHP"},
+  {name: "Polish Złoty", symbol: "zł", code: "PLN"},
+  {name: "Qatari Riyal", symbol: "QR", code: "QAR"},
   {name: "Renminbi", symbol: "¥", code: "CNY"},
-  {name: "Romanian leu", symbol: "Leu", code: "RON"},
-  {name: "Russian ruble", symbol: "₽", code: "RUB"},
-  {name: "Rwandan franc", symbol: "Fr", code: "RWF"},
-  {name: "Saint Helena pound", symbol: "£", code: "SHP"},
-  {name: "Samoan tālā", symbol: "$", code: "WST"},
-  {name: "São Tomé and Príncipe dobra", symbol: "Db", code: "STN"},
-  {name: "Saudi riyal", symbol: "Rl", code: "SAR"},
-  {name: "Serbian dinar", symbol: "DIN", code: "RSD"},
-  {name: "Seychellois rupee", symbol: "Re", code: "SCR"},
-  {name: "Sierra Leonean leone", symbol: "Le", code: "SLE"},
-  {name: "Singapore dollar", symbol: "$", code: "SGD"},
-  {name: "Solomon Islands dollar", symbol: "$", code: "SBD"},
-  {name: "Somali shilling", symbol: "Sh", code: "SOS"},
-  {name: "South African rand", symbol: "R", code: "ZAR"},
-  {name: "South Korean won", symbol: "₩", code: "KRW"},
-  {name: "South Sudanese pound", symbol: "(none)", code: "SSP"},
-  {name: "Sri Lankan rupee", symbol: "Re", code: "LKR"},
+  {name: "Romanian Leu", symbol: "Leu", code: "RON"},
+  {name: "Russian Ruble", symbol: "₽", code: "RUB"},
+  {name: "Rwandan Franc", symbol: "Fr", code: "RWF"},
+  {name: "Saint Helena Pound", symbol: "£", code: "SHP"},
+  {name: "Samoan Tālā", symbol: "$", code: "WST"},
+  {name: "São Tomé And Príncipe Dobra", symbol: "Db", code: "STN"},
+  {name: "Saudi Riyal", symbol: "Rl", code: "SAR"},
+  {name: "Serbian Dinar", symbol: "DIN", code: "RSD"},
+  {name: "Seychellois Rupee", symbol: "Re", code: "SCR"},
+  {name: "Sierra Leonean Leone", symbol: "Le", code: "SLE"},
+  {name: "Singapore Dollar", symbol: "$", code: "SGD"},
+  {name: "Solomon Islands Dollar", symbol: "$", code: "SBD"},
+  {name: "Somali Shilling", symbol: "Sh", code: "SOS"},
+  {name: "South African Rand", symbol: "R", code: "ZAR"},
+  {name: "South Korean Won", symbol: "₩", code: "KRW"},
+  {name: "South Sudanese Pound", symbol: "(none)", code: "SSP"},
+  {name: "Sri Lankan Rupee", symbol: "Re", code: "LKR"},
   {name: "Sterling", symbol: "£", code: "GBP"},
-  {name: "Sudanese pound", symbol: "LS", code: "SDG"},
-  {name: "Surinamese dollar", symbol: "$", code: "SRD"},
-  {name: "Swazi lilangeni", symbol: "L", code: "SZL"},
-  {name: "Swedish krona", symbol: "kr", code: "SEK"},
-  {name: "Swiss franc", symbol: "Fr", code: "CHF"},
-  {name: "Syrian pound", symbol: "LS", code: "SYP"},
-  {name: "Tajikistani somoni", symbol: "SM", code: "TJS"},
-  {name: "Tanzanian shilling", symbol: "Sh", code: "TZS"},
-  {name: "Thai baht", symbol: "฿", code: "THB"},
-  {name: "Tongan paʻanga", symbol: "T$", code: "TOP"},
-  {name: "Trinidad and Tobago dollar", symbol: "$", code: "TTD"},
-  {name: "Tunisian dinar", symbol: "DT", code: "TND"},
-  {name: "Turkish lira", symbol: "₺", code: "TRY"},
-  {name: "Turkmenistani manat", symbol: "m", code: "TMT"},
-  {name: "Ugandan shilling", symbol: "Sh", code: "UGX"},
-  {name: "Ukrainian hryvnia", symbol: "₴", code: "UAH"},
-  {name: "United Arab Emirates dirham", symbol: "Dh", code: "AED"},
-  {name: "United States dollar", symbol: "$", code: "USD"},
-  {name: "Uruguayan peso", symbol: "$", code: "UYU"},
-  {name: "Uzbekistani sum", symbol: "soum", code: "UZS"},
-  {name: "Vanuatu vatu", symbol: "VT", code: "VUV"},
-  {name: "Venezuelan digital bolívar", symbol: "Bs.D", code: "VED"},
-  {name: "Venezuelan sovereign bolívar", symbol: "Bs.S", code: "VES"},
-  {name: "Vietnamese đồng", symbol: "₫", code: "VND"},
-  {name: "West African CFA franc", symbol: "Fr", code: "XOF"},
-  {name: "Yemeni rial", symbol: "Rl", code: "YER"},
-  {name: "Zambian kwacha", symbol: "K", code: "ZMW"},
+  {name: "Sudanese Pound", symbol: "LS", code: "SDG"},
+  {name: "Surinamese Dollar", symbol: "$", code: "SRD"},
+  {name: "Swazi Lilangeni", symbol: "L", code: "SZL"},
+  {name: "Swedish Krona", symbol: "kr", code: "SEK"},
+  {name: "Swiss Franc", symbol: "Fr", code: "CHF"},
+  {name: "Syrian Pound", symbol: "LS", code: "SYP"},
+  {name: "Tajikistani Somoni", symbol: "SM", code: "TJS"},
+  {name: "Tanzanian Shilling", symbol: "Sh", code: "TZS"},
+  {name: "Thai Baht", symbol: "฿", code: "THB"},
+  {name: "Tongan Paʻanga", symbol: "T$", code: "TOP"},
+  {name: "Trinidad And Tobago Dollar", symbol: "$", code: "TTD"},
+  {name: "Tunisian Dinar", symbol: "DT", code: "TND"},
+  {name: "Turkish Lira", symbol: "₺", code: "TRY"},
+  {name: "Turkmenistani Manat", symbol: "m", code: "TMT"},
+  {name: "Ugandan Shilling", symbol: "Sh", code: "UGX"},
+  {name: "Ukrainian Hryvnia", symbol: "₴", code: "UAH"},
+  {name: "United Arab Emirates Dirham", symbol: "Dh", code: "AED"},
+  {name: "United States Dollar", symbol: "$", code: "USD"},
+  {name: "Uruguayan Peso", symbol: "$", code: "UYU"},
+  {name: "Uzbekistani Sum", symbol: "soum", code: "UZS"},
+  {name: "Vanuatu Vatu", symbol: "VT", code: "VUV"},
+  {name: "Venezuelan Digital Bolívar", symbol: "Bs.D", code: "VED"},
+  {name: "Venezuelan Sovereign Bolívar", symbol: "Bs.S", code: "VES"},
+  {name: "Vietnamese Đồng", symbol: "₫", code: "VND"},
+  {name: "West African CFA Franc", symbol: "Fr", code: "XOF"},
+  {name: "Yemeni Rial", symbol: "Rl", code: "YER"},
+  {name: "Zambian Kwacha", symbol: "K", code: "ZMW"},
 ]
 
 export const defaultCurrencyOption = currencyOptions.find(c => c.code === "SAT")
 
-export const getCurrencyOption = code =>
+export const getCurrencyOption = (code: string): CurrencyOption =>
   currencyOptions.find(c => c.code === code) || {name: code, symbol: "$", code}
+
+export const displayCurrency = ({code, name}: CurrencyOption) => `${code} (${name})`
+
+export const displayCurrencyByCode = (code: string) => displayCurrency(getCurrencyOption(code))

src/routes/spaces/[relay]/classifieds/+page.svelte

@@ -93,7 +93,7 @@
   <p class="flex h-10 items-center justify-center py-20">
     <Spinner {loading}>
       {#if loading}
-        Looking for listingss...
+        Looking for listings...
       {:else if items.length === 0}
         No classified listings found.
       {:else}