feat: expand catalog sorting

apps/web/src/components/atoms/CatalogSortSelect.scss

@@ -0,0 +1,18 @@
+.catalog-sort-select {
+  display: grid;
+  gap: var(--space-1);
+}
+
+.catalog-sort-select span {
+  color: var(--color-text-muted);
+  font-size: var(--text-sm);
+}
+
+.catalog-sort-select select {
+  min-height: 44px;
+  border: var(--border-thin) solid var(--color-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-surface);
+  color: var(--color-text);
+}

apps/web/src/components/atoms/CatalogSortSelect.stories.js

@@ -0,0 +1,6 @@
+import CatalogSortSelect from './CatalogSortSelect.vue';
+
+export default { title: 'Atoms/CatalogSortSelect', component: CatalogSortSelect };
+
+export const RecentlyAdded = { args: { modelValue: 'recent' } };
+export const NameAscending = { args: { modelValue: 'name_asc' } };

apps/web/src/components/atoms/CatalogSortSelect.vue

@@ -0,0 +1,28 @@
+<script setup>
+defineProps({
+  modelValue: { type: String, required: true },
+});
+
+defineEmits(['update:modelValue']);
+</script>
+
+<template>
+  <label class="catalog-sort-select">
+    <span>Sort</span>
+    <select
+      :value="modelValue"
+      @change="$emit('update:modelValue', $event.target.value)"
+    >
+      <option value="recent">Recently added</option>
+      <option value="updated">Recently updated</option>
+      <option value="name_asc">Name A-Z</option>
+      <option value="name_desc">Name Z-A</option>
+      <option value="price_low">Price: low to high</option>
+      <option value="price_high">Price: high to low</option>
+    </select>
+  </label>
+</template>
+
+<style scoped lang="scss">
+@use './CatalogSortSelect.scss';
+</style>

apps/web/src/pages/CatalogPage.vue

@@ -8,6 +8,7 @@ import {
   listPublicConditions,
 } from "@/services/catalog-service.js";
 import ListingCard from "@/components/molecules/ListingCard.vue";
+import CatalogSortSelect from "@/components/atoms/CatalogSortSelect.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -124,14 +125,7 @@ watch(
           >Max price (cents)
           <input v-model.number="maxPriceMinor" type="number" min="0"
         /></label>
-        <label
-          >Sort
-          <select v-model="sort">
-            <option value="recent">Recently added</option>
-            <option value="price_low">Price: low to high</option>
-            <option value="price_high">Price: high to low</option>
-          </select></label
-        >
+        <CatalogSortSelect v-model="sort" />
       </div>
     </header>