feat: Add sorting options for links in dashboard

components/dashboard/links/Index.vue

@@ -7,6 +7,7 @@ const limit = 24
 let cursor = ''
 let listComplete = false
 let listError = false
+const sortBy = ref('created_desc') // created_desc, created_asc, alpha_asc, alpha_desc
 
 async function getLinks() {
   try {
@@ -14,6 +15,7 @@ async function getLinks() {
       query: {
         limit,
         cursor,
+        sort: sortBy.value,
       },
     })
     links.value = links.value.concat(data.links).filter(Boolean) // Sometimes cloudflare will return null, filter out
@@ -62,6 +64,40 @@ function updateLinkList(link, type) {
       </DashboardNav>
       <LazyDashboardLinksSearch />
     </div>
+    <div class="flex gap-2 items-center">
+      <Button
+        variant="outline"
+        size="sm"
+        :class="{ 'bg-primary text-primary-foreground': sortBy === 'created_desc' }"
+        @click="sortBy = 'created_desc'; links = []; cursor = ''; getLinks()"
+      >
+        Newest First
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        :class="{ 'bg-primary text-primary-foreground': sortBy === 'created_asc' }"
+        @click="sortBy = 'created_asc'; links = []; cursor = ''; getLinks()"
+      >
+        Oldest First
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        :class="{ 'bg-primary text-primary-foreground': sortBy === 'alpha_asc' }"
+        @click="sortBy = 'alpha_asc'; links = []; cursor = ''; getLinks()"
+      >
+        A to Z
+      </Button>
+      <Button
+        variant="outline"
+        size="sm"
+        :class="{ 'bg-primary text-primary-foreground': sortBy === 'alpha_desc' }"
+        @click="sortBy = 'alpha_desc'; links = []; cursor = ''; getLinks()"
+      >
+        Z to A
+      </Button>
+    </div>
     <section class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
       <DashboardLinksLink
         v-for="link in links"