feat: add mobile navigation component and queue panel

- Implemented MobileNav.vue for mobile navigation with links to Home, Library, Playlist, and Profile.
- Added QueuePanel.vue to display the current queue of tracks with functionality to jump to a specific track.
- Created ArtistView.vue to show artist details and their tracks, including loading states and play functionality.
- Introduced NotFoundPage.vue for handling 404 errors with a user-friendly message and a link to return home.
This commit is contained in:
2026-05-26 21:44:42 +07:00
parent a029258872
commit d82d91ea96
40 changed files with 532 additions and 294 deletions
+1 -17
View File
@@ -14,23 +14,7 @@
<span v-for="i in 12" :key="i" class="w-2 h-2 bg-black/40 rounded-full"></span>
</div>
<div class="flex flex-col items-center justify-center h-full">
<div class="relative">
<div class="w-48 h-48 flex items-center justify-center">
<svg viewBox="0 0 120 120" class="w-full h-full">
<polygon points="40,35 80,35 90,50 50,50" fill="#ff6b35"/>
<polygon points="40,35 50,50 50,90 40,75" fill="#e85a2a"/>
<polygon points="50,50 90,50 90,90 50,90" fill="#ff8c5a"/>
<polygon points="40,75 50,90 50,70 40,55" fill="#1a1a1a"/>
<polygon points="70,50 90,50 90,70 70,70" fill="#1a1a1a"/>
<polygon points="50,70 70,70 70,90 50,90" fill="#1a1a1a"/>
<rect x="95" y="35" width="5" height="5" fill="#ff6b35"/>
<rect x="100" y="30" width="4" height="4" fill="#ff6b35"/>
<rect x="105" y="38" width="3" height="3" fill="#ff6b35"/>
<rect x="98" y="45" width="4" height="4" fill="#ff6b35"/>
</svg>
</div>
</div>
<h1 class="text-4xl font-mono font-bold text-noctune-dark tracking-wider mt-4">noctune</h1>
<img src="/logo_transparent.png" alt="Noctune" class="w-48 h-48 object-contain" loading="lazy" />
</div>
</div>