From dda19697d6f036c2c6e8a053cd987fb50069fb69 Mon Sep 17 00:00:00 2001
From: QuentinHsu <xuquentinyang@gmail.com>
Date: Sun, 2 Jun 2024 22:18:18 +0800
Subject: [PATCH 1/2] fix: the links data loading on the mobile page did not
 trigger

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

diff --git a/components/dashboard/links/Index.vue b/components/dashboard/links/Index.vue
index a1c076a..a9f5b5a 100644
--- a/components/dashboard/links/Index.vue
+++ b/components/dashboard/links/Index.vue
@@ -22,7 +22,7 @@ async function getLinks() {
 const { isLoading } = useInfiniteScroll(
   document,
   getLinks,
-  { distance: 10, interval: 1000, canLoadMore: () => !listComplete },
+  { distance: 150, interval: 1000, canLoadMore: () => !listComplete },
 )
 
 function updateLinkList(link, type) {
@@ -59,5 +59,11 @@ function updateLinkList(link, type) {
     >
       <Loader class="animate-spin" />
     </div>
+    <div
+      v-if="!isLoading && listComplete"
+      class="flex items-center justify-center text-sm"
+    >
+      No more
+    </div>
   </main>
 </template>

From 3ff84f61cb41e0b0d1ce0cfc69907867a15ccc57 Mon Sep 17 00:00:00 2001
From: ccbikai <ccbikai@gmail.com>
Date: Tue, 4 Jun 2024 18:59:18 +0800
Subject: [PATCH 2/2] feat: Add Laptop icon to theme switcher and improve style

---
 components/SwitchTheme.vue    | 24 ++++++++++++++++++------
 components/layouts/Header.vue |  2 +-
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/components/SwitchTheme.vue b/components/SwitchTheme.vue
index ab7f968..d473016 100644
--- a/components/SwitchTheme.vue
+++ b/components/SwitchTheme.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { Sun, Moon } from 'lucide-vue-next'
+import { Sun, Moon, Laptop } from 'lucide-vue-next'
 
 const colorMode = useColorMode()
 </script>
@@ -9,10 +9,10 @@ const colorMode = useColorMode()
     <DropdownMenuTrigger as-child>
       <Button variant="ghost">
         <Sun
-          class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
+          class="absolute w-5 h-5 transition-all scale-100 dark:scale-0"
         />
         <Moon
-          class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
+          class="w-5 h-5 transition-all scale-0 dark:scale-100"
         />
         <span class="sr-only">Toggle theme</span>
       </Button>
@@ -21,13 +21,25 @@ const colorMode = useColorMode()
       align="end"
       class="min-w-min"
     >
-      <DropdownMenuItem @click="colorMode.preference = 'light'">
+      <DropdownMenuItem
+        class="cursor-pointer"
+        @click="colorMode.preference = 'light'"
+      >
+        <Sun class="w-4 h-4 mr-1" />
         Light
       </DropdownMenuItem>
-      <DropdownMenuItem @click="colorMode.preference = 'dark'">
+      <DropdownMenuItem
+        class="cursor-pointer"
+        @click="colorMode.preference = 'dark'"
+      >
+        <Moon class="w-4 h-4 mr-1" />
         Dark
       </DropdownMenuItem>
-      <DropdownMenuItem @click="colorMode.preference = 'system'">
+      <DropdownMenuItem
+        class="cursor-pointer"
+        @click="colorMode.preference = 'system'"
+      >
+        <Laptop class="w-4 h-4 mr-1" />
         System
       </DropdownMenuItem>
     </DropdownMenuContent>
diff --git a/components/layouts/Header.vue b/components/layouts/Header.vue
index 7997e32..04c56fb 100644
--- a/components/layouts/Header.vue
+++ b/components/layouts/Header.vue
@@ -71,7 +71,7 @@ const showMenu = ref(false)
                   class="w-5 h-5 mr-1"
                 />
                 GitHub</a>
-              <span class="px-2 py-2">
+              <span class="ml-1">
                 <SwitchTheme />
               </span>
             </div>