feat: add search and sorting to shipping zones table (#157)

- Add search filter input to zones table
- Make all columns sortable with default sort by name
- Fix country list: alphabetize, remove asterisks from UK/US, remove "Flat rate"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

static/components/shipping-zones-list.js

@@ -6,6 +6,7 @@ window.app.component('shipping-zones-list', {
   data: function () {
     return {
       zones: [],
+      filter: '',
       zoneDialog: {
         showDialog: false,
         data: {
@@ -19,7 +20,6 @@ window.app.component('shipping-zones-list', {
       currencies: [],
       shippingZoneOptions: [
         'Free (digital)',
-        'Flat rate',
         'Worldwide',
         'Europe',
         'Australia',
@@ -27,6 +27,7 @@ window.app.component('shipping-zones-list', {
         'Belgium',
         'Brazil',
         'Canada',
+        'China',
         'Denmark',
         'Finland',
         'France',
@@ -34,8 +35,8 @@ window.app.component('shipping-zones-list', {
         'Greece',
         'Hong Kong',
         'Hungary',
-        'Ireland',
         'Indonesia',
+        'Ireland',
         'Israel',
         'Italy',
         'Japan',
@@ -59,10 +60,9 @@ window.app.component('shipping-zones-list', {
         'Thailand',
         'Turkey',
         'Ukraine',
-        'United Kingdom**',
+        'United Kingdom',
-        'United States***',
+        'United States',
-        'Vietnam',
+        'Vietnam'
-        'China'
       ],
       zonesTable: {
         columns: [
@@ -70,25 +70,29 @@ window.app.component('shipping-zones-list', {
             name: 'name',
             align: 'left',
             label: 'Name',
-            field: 'name'
+            field: 'name',
+            sortable: true
           },
           {
             name: 'countries',
             align: 'left',
             label: 'Countries',
-            field: 'countries'
+            field: 'countries',
+            sortable: true
           },
           {
             name: 'currency',
             align: 'left',
             label: 'Currency',
-            field: 'currency'
+            field: 'currency',
+            sortable: true
           },
           {
             name: 'cost',
             align: 'left',
             label: 'Cost',
-            field: 'cost'
+            field: 'cost',
+            sortable: true
           },
           {
             name: 'actions',
@@ -98,7 +102,9 @@ window.app.component('shipping-zones-list', {
           }
         ],
         pagination: {
-          rowsPerPage: 10
+          rowsPerPage: 10,
+          sortBy: 'name',
+          descending: false
         }
       }
     }

templates/nostrmarket/components/shipping-zones-list.html

@@ -1,5 +1,18 @@
 <div>
   <div class="row items-center q-mb-md q-col-gutter-sm justify-end">
+    <div class="col-auto">
+      <q-input
+        dense
+        debounce="300"
+        v-model="filter"
+        placeholder="Search zones..."
+        style="min-width: 200px"
+      >
+        <template v-slot:prepend>
+          <q-icon name="search"></q-icon>
+        </template>
+      </q-input>
+    </div>
     <div class="col-auto">
       <q-btn
         unelevated
@@ -19,6 +32,7 @@
     row-key="id"
     :columns="zonesTable.columns"
     v-model:pagination="zonesTable.pagination"
+    :filter="filter"
   >
     <template v-slot:body="props">
       <q-tr :props="props">