Add classified listings

src/lib/components/CurrencyInput.svelte

@@ -0,0 +1,23 @@
+<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

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import {currencyOptions} from "src/util/i18n"
+
+  export let code
+</script>
+
+{#if code.match(/^sats?$/i)}
+  <span style="font-family: Satoshis; font-size: 1.2em;">!</span>
+{:else}
+  {currencyOptions.find(c => c.code)?.symbol || code}
+{/if}

src/lib/components/Dialog.svelte

@@ -27,7 +27,7 @@
       "relative text-base-content text-base-content flex-grow pointer-events-auto",
       "rounded-t-box sm:rounded-box",
       {
-        "bg-alt shadow-m max-h-[90vh] flex flex-col": !fullscreen,
+        "bg-alt shadow-m max-h-[90vh] flex flex-col max-w-full": !fullscreen,
       },
     ),
   )