Refactor code structure and remove redundant sections for improved readability and maintainability

src/views/LibraryPage.vue

@@ -3,6 +3,10 @@
     <section class="mb-12">
       <h2 class="text-3xl font-black text-black mb-6">Liked Tracks</h2>
       <div v-if="loading" class="text-center py-12 text-gray-500">Loading...</div>
+      <div v-else-if="!authStore.isLoggedIn" class="text-center py-12">
+        <p class="text-gray-500 mb-4">Login to see your liked tracks</p>
+        <router-link to="/login" class="bg-noctune-yellow border-2 border-black px-6 py-3 font-bold inline-block hover:bg-yellow-400 transition-colors rounded-lg">Login</router-link>
+      </div>
       <div v-else-if="likedTracks.length === 0" class="text-center py-12">
         <p class="text-gray-500 mb-4">No liked tracks yet</p>
         <router-link to="/home" class="bg-noctune-yellow border-2 border-black px-6 py-3 font-bold inline-block hover:bg-yellow-400 transition-colors rounded-lg">Discover Music</router-link>
@@ -75,10 +79,12 @@ import { useQueueStore } from '../stores/queueStore.js'
 import { useAuthStore } from '../stores/authStore.js'
 import api from '../lib/api.js'
 import { formatUrl } from '../lib/utils.js'
+import { useAuthGate } from '../composables/useAuthGate.js'
 
 const playerStore = usePlayerStore()
 const queueStore = useQueueStore()
 const authStore = useAuthStore()
+const { requireAuth } = useAuthGate()
 
 const likedTracks = ref([])
 const allTracks = ref([])
@@ -105,25 +111,31 @@ function playTrack(track, fromLiked = false, idx) {
   playerStore.play()
 }
 
-async function toggleLike(track) {
+function toggleLike(track) {
   const wasLiked = isLiked(track)
-  await authStore.toggleLike(track._id)
-  if (wasLiked) {
-    likedTracks.value = likedTracks.value.filter((t) => t._id !== track._id)
-  }
+  requireAuth({
+    redirectTo: '/login',
+    onAuthenticated: async () => {
+      await authStore.toggleLike(track._id)
+      if (wasLiked) {
+        likedTracks.value = likedTracks.value.filter((t) => t._id !== track._id)
+      }
+    }
+  })
 }
 
 onMounted(async () => {
-  try {
-    const { data: liked } = await api.get('/tracks/liked')
-    if (liked.success) {
-      likedTracks.value = liked.data || []
+  if (authStore.isLoggedIn) {
+    try {
+      const { data: liked } = await api.get('/tracks/liked')
+      if (liked.success) {
+        likedTracks.value = liked.data || []
+      }
+    } catch {
+      // ignore
     }
-  } catch {
-    // ignore
-  } finally {
-    loading.value = false
   }
+  loading.value = false
 
   try {
     const { data: all } = await api.get('/tracks')