From e0b6ffd62be573d29581dcff5b4dbc0f31ac82a5 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Sun, 2 Mar 2025 21:45:43 +0100
Subject: [PATCH 1/4] feat: Add sorting options for links in dashboard

---
 components/dashboard/links/Index.vue | 36 ++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

diff --git a/components/dashboard/links/Index.vue b/components/dashboard/links/Index.vue
index b0a56eb..58c297b 100644
--- a/components/dashboard/links/Index.vue
+++ b/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"

From 33c2631aa7df42045e79a8b521aea96bc8362808 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Sun, 2 Mar 2025 21:53:22 +0100
Subject: [PATCH 2/4] Drop Down menu

---
 components/dashboard/links/Index.vue | 90 ++++++++++++++++------------
 1 file changed, 53 insertions(+), 37 deletions(-)

diff --git a/components/dashboard/links/Index.vue b/components/dashboard/links/Index.vue
index 58c297b..2984d9b 100644
--- a/components/dashboard/links/Index.vue
+++ b/components/dashboard/links/Index.vue
@@ -1,13 +1,35 @@
 <script setup>
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '#components'
 import { useInfiniteScroll } from '@vueuse/core'
-import { Loader } from 'lucide-vue-next'
+import { ArrowUpDown, Loader } from 'lucide-vue-next'
 
 const links = ref([])
 const limit = 24
 let cursor = ''
 let listComplete = false
 let listError = false
-const sortBy = ref('created_desc') // created_desc, created_asc, alpha_asc, alpha_desc
+const sortBy = ref('newest')
+
+const displayedLinks = computed(() => {
+  const sorted = [...links.value]
+  switch (sortBy.value) {
+    case 'newest':
+      return sorted.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+    case 'oldest':
+      return sorted.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+    case 'az':
+      return sorted.sort((a, b) => (a.title || '').localeCompare(b.title || ''))
+    case 'za':
+      return sorted.sort((a, b) => (b.title || '').localeCompare(a.title || ''))
+    default:
+      return sorted
+  }
+})
 
 async function getLinks() {
   try {
@@ -15,7 +37,6 @@ 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
@@ -64,43 +85,38 @@ 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 class="flex items-center gap-2">
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="outline" size="sm">
+            <ArrowUpDown class="mr-2 h-4 w-4" />
+            Sort by: {{
+              sortBy === 'newest' ? 'Newest First'
+              : sortBy === 'oldest' ? 'Oldest First'
+                : sortBy === 'az' ? 'A to Z'
+                  : 'Z to A'
+            }}
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuItem @click="sortBy = 'newest'">
+            Newest First
+          </DropdownMenuItem>
+          <DropdownMenuItem @click="sortBy = 'oldest'">
+            Oldest First
+          </DropdownMenuItem>
+          <DropdownMenuItem @click="sortBy = 'az'">
+            A to Z
+          </DropdownMenuItem>
+          <DropdownMenuItem @click="sortBy = 'za'">
+            Z to A
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
     <section class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
       <DashboardLinksLink
-        v-for="link in links"
+        v-for="link in displayedLinks"
         :key="link.id"
         :link="link"
         @update:link="updateLinkList"

From a0aa7c43bc791ca6edfca02fdb79fe4493a87726 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Sun, 2 Mar 2025 22:06:47 +0100
Subject: [PATCH 3/4] feat: Implement sorting options for links in dashboard

---
 components/dashboard/links/Index.vue | 64 ++++++++++++++--------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/components/dashboard/links/Index.vue b/components/dashboard/links/Index.vue
index 2984d9b..acf40ae 100644
--- a/components/dashboard/links/Index.vue
+++ b/components/dashboard/links/Index.vue
@@ -23,9 +23,9 @@ const displayedLinks = computed(() => {
     case 'oldest':
       return sorted.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
     case 'az':
-      return sorted.sort((a, b) => (a.title || '').localeCompare(b.title || ''))
+      return sorted.sort((a, b) => a.slug.localeCompare(b.slug))
     case 'za':
-      return sorted.sort((a, b) => (b.title || '').localeCompare(a.title || ''))
+      return sorted.sort((a, b) => b.slug.localeCompare(a.slug))
     default:
       return sorted
   }
@@ -81,39 +81,39 @@ function updateLinkList(link, type) {
   <main class="space-y-6">
     <div class="flex flex-col gap-6 sm:gap-2 sm:flex-row sm:justify-between">
       <DashboardNav class="flex-1">
-        <DashboardLinksEditor @update:link="updateLinkList" />
+        <div class="flex items-center gap-2">
+          <DashboardLinksEditor @update:link="updateLinkList" />
+          <DropdownMenu>
+            <DropdownMenuTrigger as-child>
+              <Button variant="outline" size="sm">
+                <ArrowUpDown class="mr-2 h-4 w-4" />
+                Sort by: {{
+                  sortBy === 'newest' ? 'Newest First'
+                  : sortBy === 'oldest' ? 'Oldest First'
+                    : sortBy === 'az' ? 'Slug A-Z'
+                      : 'Slug Z-A'
+                }}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem @click="sortBy = 'newest'">
+                Newest First
+              </DropdownMenuItem>
+              <DropdownMenuItem @click="sortBy = 'oldest'">
+                Oldest First
+              </DropdownMenuItem>
+              <DropdownMenuItem @click="sortBy = 'az'">
+                A to Z
+              </DropdownMenuItem>
+              <DropdownMenuItem @click="sortBy = 'za'">
+                Z to A
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
       </DashboardNav>
       <LazyDashboardLinksSearch />
     </div>
-    <div class="flex items-center gap-2">
-      <DropdownMenu>
-        <DropdownMenuTrigger as-child>
-          <Button variant="outline" size="sm">
-            <ArrowUpDown class="mr-2 h-4 w-4" />
-            Sort by: {{
-              sortBy === 'newest' ? 'Newest First'
-              : sortBy === 'oldest' ? 'Oldest First'
-                : sortBy === 'az' ? 'A to Z'
-                  : 'Z to A'
-            }}
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-          <DropdownMenuItem @click="sortBy = 'newest'">
-            Newest First
-          </DropdownMenuItem>
-          <DropdownMenuItem @click="sortBy = 'oldest'">
-            Oldest First
-          </DropdownMenuItem>
-          <DropdownMenuItem @click="sortBy = 'az'">
-            A to Z
-          </DropdownMenuItem>
-          <DropdownMenuItem @click="sortBy = 'za'">
-            Z to A
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
     <section class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
       <DashboardLinksLink
         v-for="link in displayedLinks"

From a68a7430f2c85f7b9404c043bc17ed81000e9261 Mon Sep 17 00:00:00 2001
From: MinerAle <66887063+MinerAle00@users.noreply.github.com>
Date: Sun, 2 Mar 2025 22:18:21 +0100
Subject: [PATCH 4/4] fix: Update sorting logic for links to use createdAt
 property directly

---
 components/dashboard/links/Index.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/dashboard/links/Index.vue b/components/dashboard/links/Index.vue
index acf40ae..ab2541a 100644
--- a/components/dashboard/links/Index.vue
+++ b/components/dashboard/links/Index.vue
@@ -19,9 +19,9 @@ const displayedLinks = computed(() => {
   const sorted = [...links.value]
   switch (sortBy.value) {
     case 'newest':
-      return sorted.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+      return sorted.sort((a, b) => b.createdAt - a.createdAt)
     case 'oldest':
-      return sorted.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime())
+      return sorted.sort((a, b) => a.createdAt - b.createdAt)
     case 'az':
       return sorted.sort((a, b) => a.slug.localeCompare(b.slug))
     case 'za':