Initial commit

src/App.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="min-h-screen bg-noctune-cream">
+    <div v-if="!isAuthPage" class="flex flex-col min-h-screen">
+      <AppHeader />
+      <div class="flex flex-1">
+        <Sidebar />
+        <main class="flex-1 overflow-auto" :class="{ 'pb-20': hasPlayer }">
+          <router-view />
+        </main>
+      </div>
+      <PlayerBar />
+    </div>
+    <router-view v-else />
+    <div class="fixed top-4 right-4 z-[100] space-y-2">
+      <div v-for="toast in uiStore.toasts" :key="toast.id"
+        class="px-4 py-3 rounded-lg border-2 border-black font-bold text-sm shadow-[4px_4px_0px_0px_#000] transition-all animate-slide-in"
+        :class="toastClass(toast.type)"
+      >
+        <div class="flex items-center gap-2">
+          <span>{{ toast.message }}</span>
+          <button @click="uiStore.dismissToast(toast.id)" class="ml-2 opacity-60 hover:opacity-100">&times;</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { useAuthStore } from './stores/authStore.js'
+import { useUiStore } from './stores/uiStore.js'
+import { usePlayerStore } from './stores/playerStore.js'
+import AppHeader from './components/AppHeader.vue'
+import Sidebar from './components/Sidebar.vue'
+import PlayerBar from './components/PlayerBar.vue'
+
+const route = useRoute()
+const authStore = useAuthStore()
+const uiStore = useUiStore()
+const playerStore = usePlayerStore()
+
+const isAuthPage = computed(() => {
+  return route.meta?.guest === true || route.path === '/register'
+})
+
+const hasPlayer = computed(() => !!playerStore.currentTrack)
+
+function toastClass(type) {
+  return {
+    info: 'bg-noctune-teal text-black',
+    success: 'bg-green-400 text-black',
+    error: 'bg-red-400 text-white',
+  }[type] || 'bg-noctune-yellow text-black'
+}
+
+onMounted(async () => {
+  await authStore.checkSession()
+})
+</script>
+
+<style>
+.animate-slide-in {
+  animation: slideIn 0.3s ease-out;
+}
+@keyframes slideIn {
+  from { opacity: 0; transform: translateX(100%); }
+  to { opacity: 1; transform: translateX(0); }
+}
+</style>

src/components/AppHeader.vue

@@ -0,0 +1,109 @@
+<template>
+  <header class="bg-noctune-teal px-4 py-3 flex items-center justify-between border-b-4 border-black">
+    <div class="flex items-center gap-4">
+      <router-link to="/home" class="text-black font-bold text-2xl tracking-wider font-mono">NOCTUNE</router-link>
+    </div>
+
+    <div class="flex-1 max-w-md mx-8 relative">
+      <div class="relative">
+        <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
+          <svg class="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+        <input type="text" v-model="query" @input="onSearch" @keydown.escape="clearSearch" placeholder="Search music, artist, album..."
+          class="w-full bg-noctune-cream py-2 pl-10 pr-4 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-black" />
+      </div>
+      <div v-if="searchResults && query" class="absolute top-full mt-2 left-0 right-0 bg-white border-2 border-black rounded-lg shadow-[4px_4px_0px_0px_#000] max-h-96 overflow-y-auto z-50">
+        <div v-if="searchResults.tracks?.length" class="p-2">
+          <p class="text-xs font-bold text-gray-500 px-2 py-1">TRACKS</p>
+          <div v-for="track in searchResults.tracks.slice(0, 5)" :key="track._id" @click="playSearchTrack(track)" class="flex items-center gap-3 px-2 py-2 hover:bg-gray-100 rounded cursor-pointer">
+            <div class="w-8 h-8 bg-gray-300 rounded border border-black flex-shrink-0 overflow-hidden">
+              <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+            </div>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm font-medium text-black truncate">{{ track.title }}</p>
+              <p class="text-xs text-gray-500">{{ track.artist }}</p>
+            </div>
+          </div>
+        </div>
+        <div v-if="searchResults.artists?.length" class="p-2 border-t border-gray-200">
+          <p class="text-xs font-bold text-gray-500 px-2 py-1">ARTISTS</p>
+          <div v-for="artist in searchResults.artists.slice(0, 3)" :key="artist.name" @click="router.push(`/home?artist=${artist.name}`)" class="px-2 py-2 hover:bg-gray-100 rounded cursor-pointer text-sm font-medium text-black">{{ artist.name }}</div>
+        </div>
+        <div v-if="!searchResults.tracks?.length && !searchResults.artists?.length" class="p-4 text-center text-gray-500 text-sm">No results found</div>
+      </div>
+    </div>
+
+    <div class="flex items-center gap-4">
+      <button @click="toggleLikeRedirect" class="text-black hover:opacity-80">
+        <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
+        </svg>
+      </button>
+      <router-link to="/profile" class="text-black hover:opacity-80">
+        <div class="w-8 h-8 rounded-full bg-noctune-dark overflow-hidden border-2 border-black">
+          <img v-if="authStore.user?.avatarUrl" :src="formatUrl(authStore.user.avatarUrl)" class="w-full h-full object-cover" />
+          <div v-else class="w-full h-full flex items-center justify-center">
+            <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+          </div>
+        </div>
+      </router-link>
+    </div>
+  </header>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const router = useRouter()
+const authStore = useAuthStore()
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+
+const query = ref('')
+const searchResults = ref(null)
+let searchTimeout = null
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function onSearch() {
+  clearTimeout(searchTimeout)
+  if (!query.value.trim()) {
+    searchResults.value = null
+    return
+  }
+  searchTimeout = setTimeout(async () => {
+    try {
+      const { data } = await api.get(`/search?q=${encodeURIComponent(query.value)}`)
+      if (data.success) searchResults.value = data.data
+    } catch {
+      searchResults.value = null
+    }
+  }, 300)
+}
+
+function clearSearch() {
+  query.value = ''
+  searchResults.value = null
+}
+
+function playSearchTrack(track) {
+  clearSearch()
+  queueStore.setQueue([track], 0)
+  playerStore.setTrack(track)
+  playerStore.play()
+}
+
+function toggleLikeRedirect() {
+  router.push('/library')
+}
+</script>

src/components/MusicPlayer.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="bg-noctune-orange rounded-xl p-4 border-2 border-black">
+    <!-- Album Art & Info -->
+    <div class="flex items-start gap-3 mb-4">
+      <div class="w-16 h-16 bg-black rounded-lg flex items-center justify-center flex-shrink-0">
+        <!-- Waveform icon -->
+        <svg class="w-12 h-8 text-white" viewBox="0 0 50 30">
+          <rect x="2" y="10" width="3" height="10" fill="currentColor"/>
+          <rect x="8" y="5" width="3" height="20" fill="currentColor"/>
+          <rect x="14" y="8" width="3" height="14" fill="currentColor"/>
+          <rect x="20" y="3" width="3" height="24" fill="currentColor"/>
+          <rect x="26" y="7" width="3" height="16" fill="currentColor"/>
+          <rect x="32" y="5" width="3" height="20" fill="currentColor"/>
+          <rect x="38" y="9" width="3" height="12" fill="currentColor"/>
+          <rect x="44" y="11" width="3" height="8" fill="currentColor"/>
+        </svg>
+      </div>
+      <div class="flex-1 min-w-0">
+        <h4 class="font-bold text-sm text-black truncate">No. 1 Party Anthem</h4>
+        <p class="text-xs text-black/70">Arctic Monkeys</p>
+      </div>
+    </div>
+    
+    <!-- Progress Bar -->
+    <div class="mb-3">
+      <input 
+        type="range" 
+        :value="progress" 
+        @input="updateProgress"
+        min="0" 
+        max="100" 
+        class="w-full h-1.5 bg-black/30 rounded-full appearance-none cursor-pointer"
+      />
+      <div class="flex justify-between text-xs text-black mt-1">
+        <span>1:30</span>
+        <span>3:00</span>
+      </div>
+    </div>
+    
+    <!-- Controls -->
+    <div class="flex items-center justify-center gap-6">
+      <button class="text-black hover:opacity-70 transition-opacity">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/>
+        </svg>
+      </button>
+      <button class="w-12 h-12 bg-noctune-yellow rounded-full flex items-center justify-center border-2 border-black hover:bg-yellow-400 transition-colors">
+        <svg class="w-6 h-6 ml-1" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+      </button>
+      <button class="text-black hover:opacity-70 transition-opacity">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
+          <path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/>
+        </svg>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const progress = ref(50)
+
+const updateProgress = (e) => {
+  progress.value = e.target.value
+}
+</script>
+
+<style scoped>
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #1a1a1a;
+  cursor: pointer;
+}
+</style>

src/components/PlayerBar.vue

@@ -0,0 +1,147 @@
+<template>
+  <div v-if="playerStore.currentTrack" class="fixed bottom-0 left-0 right-0 bg-noctune-dark border-t-4 border-black z-50">
+    <div class="flex items-center px-4 py-2 max-w-screen-2xl mx-auto">
+      <div class="flex items-center gap-3 w-80">
+        <div class="w-12 h-12 bg-black rounded-lg overflow-hidden flex-shrink-0 border border-white/20">
+          <img v-if="playerStore.currentTrack.coverUrl" :src="coverSrc" alt="" class="w-full h-full object-cover" />
+          <div v-else class="w-full h-full flex items-center justify-center">
+            <svg class="w-8 h-6 text-white/60" viewBox="0 0 50 30"><rect x="2" y="10" width="3" height="10" fill="currentColor"/><rect x="8" y="5" width="3" height="20" fill="currentColor"/><rect x="14" y="8" width="3" height="14" fill="currentColor"/><rect x="20" y="3" width="3" height="24" fill="currentColor"/><rect x="26" y="7" width="3" height="16" fill="currentColor"/><rect x="32" y="5" width="3" height="20" fill="currentColor"/><rect x="38" y="9" width="3" height="12" fill="currentColor"/><rect x="44" y="11" width="3" height="8" fill="currentColor"/></svg>
+          </div>
+        </div>
+        <div class="min-w-0">
+          <p class="text-sm font-bold text-white truncate">{{ playerStore.currentTrack.title }}</p>
+          <p class="text-xs text-gray-400 truncate">{{ playerStore.currentTrack.artist }}</p>
+        </div>
+      </div>
+
+      <div class="flex-1 flex flex-col items-center">
+        <div class="flex items-center gap-4 mb-1">
+          <button @click="queueStore.toggleShuffle()" :class="['text-sm transition-colors', queueStore.shuffle ? 'text-noctune-teal' : 'text-gray-400 hover:text-white']">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M10.59 9.17L5.41 4 4 5.41l5.17 5.17 1.42-1.41zM14.5 4l2.04 2.04L4 18.59 5.41 20 17.96 7.46 20 9.5V4h-5.5zm.33 9.41l-1.41 1.41 3.13 3.13L14.5 20H20v-5.5l-2.04 2.04-3.13-3.13z"/></svg>
+          </button>
+          <button @click="playPrev()" class="text-gray-400 hover:text-white transition-colors">
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 6h2v12H6zm3.5 6l8.5 6V6z"/></svg>
+          </button>
+          <button @click="playerStore.togglePlay()" class="w-10 h-10 bg-white rounded-full flex items-center justify-center hover:scale-105 transition-transform">
+            <svg v-if="playerStore.isPlaying" class="w-5 h-5 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>
+            <svg v-else class="w-5 h-5 text-black ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+          </button>
+          <button @click="playNext()" class="text-gray-400 hover:text-white transition-colors">
+            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M6 18l8.5-6L6 6v12zM16 6v12h2V6h-2z"/></svg>
+          </button>
+          <button @click="queueStore.cycleRepeat()" :class="['text-sm transition-colors', queueStore.repeat !== 'off' ? 'text-noctune-teal' : 'text-gray-400 hover:text-white', queueStore.repeat === 'one' ? 'relative' : '']">
+            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M7 7h10v3l4-4-4-4v3H5v6h2V7zm10 10H7v-3l-4 4 4 4v-3h12v-6h-2v4z"/></svg>
+            <span v-if="queueStore.repeat === 'one'" class="absolute -top-2 -right-2 text-[9px] font-bold">1</span>
+          </button>
+        </div>
+        <div class="flex items-center gap-3 w-full max-w-lg">
+          <span class="text-xs text-gray-400 w-10 text-right">{{ playerStore.formattedProgress }}</span>
+          <input type="range" :value="playerStore.progress" @input="onSeek" min="0" :max="playerStore.duration || 1" step="0.1" class="flex-1 h-1 bg-gray-600 rounded-full appearance-none cursor-pointer range-player" />
+          <span class="text-xs text-gray-400 w-10">{{ playerStore.formattedDuration }}</span>
+        </div>
+      </div>
+
+      <div class="w-80 flex items-center justify-end gap-3">
+        <button @click="toggleLike" class="text-gray-400 hover:text-red-400 transition-colors">
+          <svg class="w-5 h-5" :class="isLiked ? 'text-red-400 fill-current' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
+        </button>
+        <div class="flex items-center gap-2">
+          <svg class="w-4 h-4 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/></svg>
+          <input type="range" :value="playerStore.volume" @input="onVolume" min="0" max="100" class="w-20 h-1 bg-gray-600 rounded-full appearance-none cursor-pointer range-vol" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+const isLiked = ref(false)
+
+function onTrackEnd() {
+  const next = queueStore.nextTrack()
+  if (next) {
+    playerStore.setTrack(next)
+    playerStore.play()
+  }
+}
+
+onMounted(() => {
+  playerStore.onEnd(onTrackEnd)
+})
+
+const coverSrc = computed(() => {
+  const url = playerStore.currentTrack?.coverUrl
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+})
+
+function onSeek(e) {
+  playerStore.seek(parseFloat(e.target.value))
+}
+
+function onVolume(e) {
+  playerStore.setVolume(parseInt(e.target.value))
+}
+
+function playNext() {
+  const next = queueStore.nextTrack()
+  if (next) {
+    playerStore.setTrack(next)
+    playerStore.play()
+  }
+}
+
+function playPrev() {
+  const prev = queueStore.prevTrack()
+  if (prev) {
+    playerStore.setTrack(prev)
+    playerStore.play()
+  }
+}
+
+watch(() => playerStore.currentTrack?.id, async (id) => {
+  if (!id) return
+  try {
+    const { data } = await api.get('/auth/me')
+    if (data.success) {
+      isLiked.value = data.data.likedTracks?.includes(id) || false
+    }
+  } catch {
+    isLiked.value = false
+  }
+})
+
+async function toggleLike() {
+  if (!playerStore.currentTrack) return
+  const id = playerStore.currentTrack._id || playerStore.currentTrack.id
+  try {
+    if (isLiked.value) {
+      await api.delete(`/tracks/${id}/like`)
+    } else {
+      await api.post(`/tracks/${id}/like`)
+    }
+    isLiked.value = !isLiked.value
+  } catch {
+    // ignore
+  }
+}
+</script>
+
+<style scoped>
+.range-player::-webkit-slider-thumb,
+.range-vol::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: white;
+  cursor: pointer;
+}
+</style>

src/components/SettingsItem.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="flex items-center gap-4 px-6 py-4 border-b border-gray-200 hover:bg-gray-50 cursor-pointer transition-colors">
+    <div :class="[iconColor, 'w-12 h-12 rounded-xl flex items-center justify-center border-2 border-black']">
+      <!-- User Icon -->
+      <svg v-if="icon === 'user'" class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
+      </svg>
+      <!-- Lock Icon -->
+      <svg v-else-if="icon === 'lock'" class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
+      </svg>
+      <!-- Shield Icon -->
+      <svg v-else-if="icon === 'shield'" class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
+      </svg>
+      <!-- Card Icon -->
+      <svg v-else-if="icon === 'card'" class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M20 4H4c-1.11 0-1.99.89-1.99 2L2 18c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 14H4v-6h16v6zm0-10H4V6h16v2z"/>
+      </svg>
+      <!-- Bell Icon -->
+      <svg v-else-if="icon === 'bell'" class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
+      </svg>
+      <!-- Moon Icon -->
+      <svg v-else-if="icon === 'moon'" class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/>
+      </svg>
+      <!-- Globe Icon -->
+      <svg v-else-if="icon === 'globe'" class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 24 24">
+        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
+      </svg>
+    </div>
+    <div class="flex-1">
+      <h3 class="font-bold text-black">{{ title }}</h3>
+      <p class="text-sm text-gray-500">{{ subtitle }}</p>
+    </div>
+    <svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
+    </svg>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  icon: {
+    type: String,
+    required: true
+  },
+  iconColor: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  subtitle: {
+    type: String,
+    required: true
+  }
+})
+</script>

src/components/Sidebar.vue

@@ -0,0 +1,94 @@
+<template>
+  <aside class="w-64 bg-noctune-cream border-r-4 border-black flex flex-col h-full">
+    <nav class="p-4 space-y-2">
+      <router-link to="/home"
+        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors"
+        :class="{ 'bg-noctune-teal text-black': isActive('/home') }">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/></svg>
+        <span class="tracking-wide">HOME</span>
+      </router-link>
+      <router-link to="/library"
+        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors"
+        :class="{ 'bg-noctune-teal text-black': isActive('/library') }">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm0-8h2V7H3v2zm4 4h14v-2H7v2zm0 4h14v-2H7v2zM7 7v2h14V7H7z"/></svg>
+        <span class="tracking-wide">LIBRARY</span>
+      </router-link>
+      <router-link to="/playlist"
+        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-teal/20 transition-colors"
+        :class="{ 'bg-noctune-teal text-black': isActive('/playlist') }">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8l6-4-6-4z"/></svg>
+        <span class="tracking-wide">PLAYLIST</span>
+      </router-link>
+      <router-link v-if="authStore.isAdmin" to="/admin/tracks"
+        class="flex items-center gap-3 px-4 py-3 rounded-lg font-bold text-black hover:bg-noctune-orange/20 transition-colors"
+        :class="{ 'bg-noctune-orange text-black': isActive('/admin/tracks') }">
+        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm-3 17l-4-4 1.41-1.41L11 16.17l6.59-6.59L19 11l-8 8z"/></svg>
+        <span class="tracking-wide">UPLOAD TRACK</span>
+      </router-link>
+    </nav>
+
+    <div class="mx-4 border-t-2 border-gray-300 my-2"></div>
+
+    <div class="px-4">
+      <button @click="openCreatePlaylist" class="w-full bg-noctune-yellow border-2 border-black rounded-lg py-3 px-4 font-bold flex items-center gap-2 hover:bg-yellow-400 transition-colors">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4"/></svg>
+        <span class="tracking-wide">CREATE PLAYLIST</span>
+      </button>
+    </div>
+
+    <div class="flex-1 overflow-y-auto px-4 mt-4">
+      <div v-if="playlists.length" class="space-y-1">
+        <p class="text-xs font-bold text-gray-500 px-2 mb-2">YOUR PLAYLISTS</p>
+        <div v-for="pl in playlists" :key="pl._id"
+          @click="router.push(`/playlist/${pl._id}`)"
+          class="flex items-center gap-2 px-3 py-2 rounded-lg cursor-pointer hover:bg-noctune-teal/20 transition-colors text-sm text-black font-medium truncate"
+        >
+          <svg class="w-4 h-4 flex-shrink-0 text-gray-500" fill="currentColor" viewBox="0 0 24 24"><path d="M3 10h11v2H3v-2zm0-4h11v2H3V6zm0 8h7v2H3v-2zm13-1v8l6-4-6-4z"/></svg>
+          {{ pl.name }}
+        </div>
+      </div>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const route = useRoute()
+const router = useRouter()
+const authStore = useAuthStore()
+const queueStore = useQueueStore()
+
+const playlists = ref([])
+
+const isActive = (path) => route.path === path
+
+async function fetchPlaylists() {
+  if (!authStore.isLoggedIn) return
+  try {
+    const { data } = await api.get('/playlists')
+    if (data.success) playlists.value = data.data
+  } catch {
+    // ignore
+  }
+}
+
+async function openCreatePlaylist() {
+  const name = prompt('Playlist name:')
+  if (!name?.trim()) return
+  try {
+    const { data } = await api.post('/playlists', { name: name.trim() })
+    if (data.success) {
+      playlists.value.push(data.data)
+    }
+  } catch {
+    // ignore
+  }
+}
+
+onMounted(fetchPlaylists)
+</script>

src/composables/useAuthGate.js

@@ -0,0 +1,30 @@
+import { useAuthStore } from '../stores/authStore.js'
+
+let pendingAction = null
+
+export function useAuthGate() {
+  const authStore = useAuthStore()
+
+  async function requireAuth({ message, onAuthenticated }) {
+    if (authStore.isLoggedIn) {
+      onAuthenticated()
+    } else {
+      pendingAction = onAuthenticated
+      if (message) {
+        const { useUiStore } = await import('../stores/uiStore.js')
+        const uiStore = useUiStore()
+        uiStore.showToast(message, 'info')
+      }
+    }
+  }
+
+  function executePending() {
+    if (pendingAction) {
+      const fn = pendingAction
+      pendingAction = null
+      fn()
+    }
+  }
+
+  return { requireAuth, executePending }
+}

src/composables/usePlayer.js

@@ -0,0 +1,39 @@
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+
+export function usePlayer() {
+  const playerStore = usePlayerStore()
+  const queueStore = useQueueStore()
+
+  playerStore.onEnd(() => {
+    const next = queueStore.nextTrack()
+    if (next) {
+      playerStore.setTrack(next)
+      playerStore.play()
+    }
+  })
+
+  function playTrack(tracks, index) {
+    queueStore.setQueue(tracks, index)
+    playerStore.setTrack(tracks[index])
+    playerStore.play()
+  }
+
+  function playNext() {
+    const next = queueStore.nextTrack()
+    if (next) {
+      playerStore.setTrack(next)
+      playerStore.play()
+    }
+  }
+
+  function playPrev() {
+    const prev = queueStore.prevTrack()
+    if (prev) {
+      playerStore.setTrack(prev)
+      playerStore.play()
+    }
+  }
+
+  return { playTrack, playNext, playPrev }
+}

src/lib/api.js

@@ -0,0 +1,30 @@
+import axios from 'axios'
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:3001/api',
+  withCredentials: true,
+  headers: { 'Content-Type': 'application/json' },
+})
+
+api.interceptors.response.use(
+  (res) => res,
+  async (err) => {
+    const original = err.config
+    if (err.response?.status === 401 && !original._retry) {
+      original._retry = true
+      try {
+        await axios.post(
+          `${api.defaults.baseURL}/auth/refresh`,
+          {},
+          { withCredentials: true }
+        )
+        return api(original)
+      } catch {
+        return Promise.reject(err)
+      }
+    }
+    return Promise.reject(err)
+  }
+)
+
+export default api

src/lib/audioEngine.js

@@ -0,0 +1,56 @@
+import { Howl } from 'howler'
+
+let howl = null
+let listeners = {}
+
+function formatTime(secs) {
+  if (!secs || isNaN(secs)) return '0:00'
+  const m = Math.floor(secs / 60)
+  const s = Math.floor(secs % 60)
+  return `${m}:${s.toString().padStart(2, '0')}`
+}
+
+function load(url) {
+  destroy()
+  howl = new Howl({
+    src: [url],
+    html5: true,
+    onplay: () => listeners.onPlay?.(),
+    onpause: () => listeners.onPause?.(),
+    onend: () => listeners.onEnd?.(),
+    onloaderror: () => listeners.onError?.(),
+    onplayerror: () => listeners.onError?.(),
+  })
+}
+
+function play() { howl?.play() }
+function pause() { howl?.pause() }
+function togglePlay() { howl?.playing() ? howl.pause() : howl.play() }
+
+function seek(time) { if (howl) howl.seek(time) }
+function getSeek() { return howl ? howl.seek() : 0 }
+
+function volume(val) {
+  if (val !== undefined) Howler.volume(val / 100)
+  return Howler.volume() * 100
+}
+
+function duration() { return howl ? howl.duration() : 0 }
+function playing() { return howl ? howl.playing() : false }
+
+function on(event, fn) { listeners[event] = fn }
+function off(event) { delete listeners[event] }
+
+function destroy() {
+  if (howl) {
+    howl.unload()
+    howl = null
+  }
+  listeners = {}
+}
+
+export default {
+  load, play, pause, togglePlay,
+  seek, getSeek, volume, duration, playing,
+  on, off, destroy, formatTime,
+}

src/main.js

@@ -0,0 +1,10 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+import App from './App.vue'
+import router from './router/index.js'
+import './style.css'
+
+const app = createApp(App)
+app.use(createPinia())
+app.use(router)
+app.mount('#app')

src/router/index.js

@@ -0,0 +1,46 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+
+import LoginPage from '../views/LoginPage.vue'
+import RegisterPage from '../views/RegisterPage.vue'
+import LandingPage from '../views/LandingPage.vue'
+import LibraryPage from '../views/LibraryPage.vue'
+import PlaylistPage from '../views/PlaylistPage.vue'
+import ProfilePage from '../views/ProfilePage.vue'
+import AdminPage from '../views/AdminPage.vue'
+
+const routes = [
+  { path: '/', name: 'Login', component: LoginPage, meta: { guest: true } },
+  { path: '/register', name: 'Register', component: RegisterPage, meta: { guest: true } },
+  { path: '/home', name: 'Home', component: LandingPage, meta: { auth: true } },
+  { path: '/library', name: 'Library', component: LibraryPage, meta: { auth: true } },
+  { path: '/playlist', name: 'Playlist', component: PlaylistPage, meta: { auth: true } },
+  { path: '/playlist/:id', name: 'PlaylistDetail', component: PlaylistPage, meta: { auth: true } },
+  { path: '/profile', name: 'Profile', component: ProfilePage, meta: { auth: true } },
+  { path: '/admin/tracks', name: 'AdminTracks', component: AdminPage, meta: { auth: true, admin: true } },
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+router.beforeEach((to, from, next) => {
+  const authStore = useAuthStore()
+
+  if (to.meta.admin && !authStore.isAdmin) {
+    return next('/home')
+  }
+
+  if (to.meta.auth && !authStore.isLoggedIn) {
+    return next('/')
+  }
+
+  if (to.meta.guest && authStore.isLoggedIn) {
+    return next('/home')
+  }
+
+  next()
+})
+
+export default router

src/stores/authStore.js

@@ -0,0 +1,75 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import api from '../lib/api.js'
+
+export const useAuthStore = defineStore('auth', () => {
+  const user = ref(null)
+  const loading = ref(false)
+
+  const isLoggedIn = computed(() => !!user.value)
+  const isAdmin = computed(() => user.value?.role === 'admin')
+  const isArtist = computed(() => user.value?.role === 'artist')
+
+  async function checkSession() {
+    try {
+      const { data } = await api.get('/auth/me')
+      if (data.success) user.value = data.data
+    } catch {
+      user.value = null
+    }
+  }
+
+  async function login(identifier, password) {
+    loading.value = true
+    try {
+      const { data } = await api.post('/auth/login', { identifier, password })
+      if (data.success) user.value = data.data.user
+      return { success: true }
+    } catch (err) {
+      const msg = err.response?.data?.message || 'Login failed'
+      return { success: false, message: msg }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function register(form) {
+    loading.value = true
+    try {
+      const { data } = await api.post('/auth/register', form)
+      if (data.success) user.value = data.data.user
+      return { success: true }
+    } catch (err) {
+      const msg = err.response?.data?.message || 'Registration failed'
+      return { success: false, message: msg }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function logout() {
+    try {
+      await api.post('/auth/logout')
+    } finally {
+      user.value = null
+    }
+  }
+
+  async function updateProfile(formData) {
+    loading.value = true
+    try {
+      const { data } = await api.put('/auth/profile', formData, {
+        headers: { 'Content-Type': 'multipart/form-data' },
+      })
+      if (data.success) user.value = data.data
+      return { success: true }
+    } catch (err) {
+      const msg = err.response?.data?.message || 'Update failed'
+      return { success: false, message: msg }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return { user, loading, isLoggedIn, isAdmin, isArtist, checkSession, login, register, logout, updateProfile }
+})

src/stores/playerStore.js

@@ -0,0 +1,103 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import audioEngine from '../lib/audioEngine.js'
+
+export const usePlayerStore = defineStore('player', () => {
+  const currentTrack = ref(null)
+  const isPlaying = ref(false)
+  const progress = ref(0)
+  const duration = ref(0)
+  const volume = ref(80)
+  const seekInterval = ref(null)
+  const onEndCallback = ref(null)
+
+  const formattedProgress = computed(() => audioEngine.formatTime(progress.value))
+  const formattedDuration = computed(() => audioEngine.formatTime(duration.value))
+
+  function setTrack(track) {
+    if (!track) return
+    currentTrack.value = track
+    progress.value = 0
+    duration.value = 0
+    isPlaying.value = false
+    stopSeekInterval()
+
+    const audioUrl = track.audioUrl.startsWith('http')
+      ? track.audioUrl
+      : `http://localhost:3001${track.audioUrl}`
+
+    audioEngine.load(audioUrl)
+    audioEngine.on('play', () => { isPlaying.value = true })
+    audioEngine.on('pause', () => { isPlaying.value = false })
+    audioEngine.on('end', () => {
+      isPlaying.value = false
+      stopSeekInterval()
+      if (onEndCallback.value) onEndCallback.value()
+    })
+    audioEngine.on('error', () => { isPlaying.value = false })
+  }
+
+  function onEnd(cb) {
+    onEndCallback.value = cb
+  }
+
+  function togglePlay() {
+    if (!currentTrack.value) return
+    if (audioEngine.playing()) {
+      audioEngine.pause()
+      stopSeekInterval()
+    } else {
+      audioEngine.play()
+      startSeekInterval()
+    }
+  }
+
+  function play() {
+    if (!currentTrack.value) return
+    audioEngine.play()
+    startSeekInterval()
+  }
+
+  function seek(time) {
+    audioEngine.seek(time)
+    progress.value = time
+  }
+
+  function setVolume(val) {
+    volume.value = val
+    audioEngine.volume(val)
+  }
+
+  function startSeekInterval() {
+    stopSeekInterval()
+    seekInterval.value = setInterval(() => {
+      if (audioEngine.playing()) {
+        progress.value = audioEngine.getSeek()
+        duration.value = audioEngine.duration()
+      }
+    }, 500)
+  }
+
+  function stopSeekInterval() {
+    if (seekInterval.value) {
+      clearInterval(seekInterval.value)
+      seekInterval.value = null
+    }
+  }
+
+  function $reset() {
+    stopSeekInterval()
+    audioEngine.destroy()
+    currentTrack.value = null
+    isPlaying.value = false
+    progress.value = 0
+    duration.value = 0
+    onEndCallback.value = null
+  }
+
+  return {
+    currentTrack, isPlaying, progress, duration, volume,
+    formattedProgress, formattedDuration,
+    setTrack, onEnd, togglePlay, play, seek, setVolume, $reset,
+  }
+})

src/stores/queueStore.js

@@ -0,0 +1,86 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+
+export const useQueueStore = defineStore('queue', () => {
+  const queue = ref([])
+  const currentIndex = ref(-1)
+  const shuffle = ref(false)
+  const repeat = ref('off')
+
+  const currentTrack = computed(() => {
+    if (currentIndex.value < 0 || currentIndex.value >= queue.value.length) return null
+    return queue.value[currentIndex.value]
+  })
+
+  function setQueue(tracks, startIndex = 0) {
+    queue.value = tracks
+    currentIndex.value = startIndex
+  }
+
+  function nextTrack() {
+    if (queue.value.length === 0) return null
+    if (repeat.value === 'one') return queue.value[currentIndex.value]
+
+    let idx
+    if (shuffle.value) {
+      idx = Math.floor(Math.random() * queue.value.length)
+    } else {
+      idx = currentIndex.value + 1
+    }
+
+    if (idx >= queue.value.length) {
+      if (repeat.value === 'all') {
+        idx = 0
+      } else {
+        return null
+      }
+    }
+    currentIndex.value = idx
+    return queue.value[idx]
+  }
+
+  function prevTrack() {
+    if (queue.value.length === 0) return null
+    if (repeat.value === 'one') return queue.value[currentIndex.value]
+
+    let idx
+    if (shuffle.value) {
+      idx = Math.floor(Math.random() * queue.value.length)
+    } else {
+      idx = currentIndex.value - 1
+    }
+
+    if (idx < 0) {
+      if (repeat.value === 'all') {
+        idx = queue.value.length - 1
+      } else {
+        return null
+      }
+    }
+    currentIndex.value = idx
+    return queue.value[idx]
+  }
+
+  function toggleShuffle() {
+    shuffle.value = !shuffle.value
+  }
+
+  function cycleRepeat() {
+    const modes = ['off', 'all', 'one']
+    const i = modes.indexOf(repeat.value)
+    repeat.value = modes[(i + 1) % modes.length]
+  }
+
+  function $reset() {
+    queue.value = []
+    currentIndex.value = -1
+    shuffle.value = false
+    repeat.value = 'off'
+  }
+
+  return {
+    queue, currentIndex, shuffle, repeat, currentTrack,
+    setQueue, nextTrack, prevTrack,
+    toggleShuffle, cycleRepeat, $reset,
+  }
+})

src/stores/uiStore.js

@@ -0,0 +1,21 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useUiStore = defineStore('ui', () => {
+  const toasts = ref([])
+  let toastId = 0
+
+  function showToast(message, type = 'info') {
+    const id = ++toastId
+    toasts.value.push({ id, message, type })
+    setTimeout(() => {
+      toasts.value = toasts.value.filter((t) => t.id !== id)
+    }, 3000)
+  }
+
+  function dismissToast(id) {
+    toasts.value = toasts.value.filter((t) => t.id !== id)
+  }
+
+  return { toasts, showToast, dismissToast }
+})

src/style.css

@@ -0,0 +1,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Inter', system-ui, sans-serif;
+}
+
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 6px;
+  border-radius: 3px;
+  background: #1a1a1a;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #1a1a1a;
+  cursor: pointer;
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  background: #1a1a1a;
+  cursor: pointer;
+  border: none;
+}

src/views/AdminPage.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="min-h-screen bg-noctune-cream flex flex-col">
+    <AppHeader />
+    <div class="flex flex-1">
+      <Sidebar />
+      <main class="flex-1 p-8 overflow-auto">
+        <div class="max-w-2xl mx-auto">
+          <h1 class="text-4xl font-black text-black mb-2">Upload Track</h1>
+          <p class="text-gray-600 mb-8">Add a new track to the library</p>
+          <p v-if="error" class="text-red-500 text-sm mb-4 font-medium">{{ error }}</p>
+          <p v-if="success" class="text-green-600 text-sm mb-4 font-medium">{{ success }}</p>
+          <div class="bg-white rounded-2xl border-4 border-black p-8 space-y-6">
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">TITLE</label>
+              <input type="text" v-model="title" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Track title" />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">ARTIST</label>
+              <input type="text" v-model="artist" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Artist name" />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">ALBUM</label>
+              <input type="text" v-model="album" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Album name" />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">GENRE</label>
+              <input type="text" v-model="genre" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="e.g. Pop, Rock, Jazz" />
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">COVER IMAGE</label>
+              <div class="border-2 border-dashed border-black rounded-lg p-6 text-center cursor-pointer hover:bg-gray-50" @click="coverInput.click()">
+                <img v-if="coverPreview" :src="coverPreview" class="w-32 h-32 object-cover mx-auto mb-2 rounded-lg border-2 border-black" />
+                <p v-else class="text-gray-500">Click to upload cover image</p>
+                <input ref="coverInput" type="file" accept="image/*" @change="onCoverChange" class="hidden" />
+              </div>
+            </div>
+            <div>
+              <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">AUDIO FILE</label>
+              <div class="border-2 border-dashed border-black rounded-lg p-6 text-center cursor-pointer hover:bg-gray-50" @click="audioInput.click()">
+                <p v-if="audioFile" class="text-black font-medium">{{ audioFile.name }}</p>
+                <p v-else class="text-gray-500">Click to upload audio file (MP3, WAV, FLAC)</p>
+                <input ref="audioInput" type="file" accept=".mp3,.wav,.flac" @change="onAudioChange" class="hidden" />
+              </div>
+            </div>
+            <button @click="handleUpload" :disabled="uploading" class="w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl hover:bg-orange-600 transition-colors disabled:opacity-50">
+              <span v-if="uploading" class="inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"></span>
+              {{ uploading ? 'Uploading...' : 'UPLOAD TRACK' }}
+            </button>
+          </div>
+        </div>
+      </main>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import AppHeader from '../components/AppHeader.vue'
+import Sidebar from '../components/Sidebar.vue'
+import api from '../lib/api.js'
+
+const router = useRouter()
+
+const title = ref('')
+const artist = ref('')
+const album = ref('')
+const genre = ref('')
+const coverFile = ref(null)
+const coverPreview = ref('')
+const audioFile = ref(null)
+const uploading = ref(false)
+const error = ref('')
+const success = ref('')
+
+const coverInput = ref(null)
+const audioInput = ref(null)
+
+function onCoverChange(e) {
+  const file = e.target.files[0]
+  if (!file) return
+  coverFile.value = file
+  coverPreview.value = URL.createObjectURL(file)
+}
+
+function onAudioChange(e) {
+  const file = e.target.files[0]
+  if (!file) return
+  audioFile.value = file
+}
+
+async function handleUpload() {
+  error.value = ''
+  success.value = ''
+
+  if (!title.value || !artist.value || !album.value || !genre.value || !coverFile.value || !audioFile.value) {
+    error.value = 'All fields are required'
+    return
+  }
+
+  uploading.value = true
+  try {
+    const formData = new FormData()
+    formData.append('title', title.value)
+    formData.append('artist', artist.value)
+    formData.append('album', album.value)
+    formData.append('genre', genre.value)
+    formData.append('cover', coverFile.value)
+    formData.append('audio', audioFile.value)
+
+    const { data } = await api.post('/admin/tracks', formData, {
+      headers: { 'Content-Type': 'multipart/form-data' },
+    })
+
+    if (data.success) {
+      success.value = 'Track uploaded successfully!'
+      title.value = ''
+      artist.value = ''
+      album.value = ''
+      genre.value = ''
+      coverFile.value = null
+      coverPreview.value = ''
+      audioFile.value = null
+      setTimeout(() => router.push('/home'), 1500)
+    }
+  } catch (err) {
+    error.value = err.response?.data?.message || 'Upload failed'
+  } finally {
+    uploading.value = false
+  }
+}
+</script>

src/views/LandingPage.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="min-h-screen bg-noctune-cream flex flex-col">
+    <div class="p-8">
+      <div class="flex items-start gap-8 mb-12">
+        <div class="flex-1">
+          <h1 class="text-5xl font-black text-black leading-tight mb-2">MUSIC<br/>THAT HITS</h1>
+          <div class="inline-block bg-noctune-orange px-4 py-2 mb-4 border-b-4 border-black">
+            <span class="text-4xl font-black text-black">DIFFERENT.</span>
+          </div>
+          <p class="text-gray-600 mb-6">You Vibe. Your sound. Only on Noctune.</p>
+          <div class="flex gap-4">
+            <button @click="playFirstTrack" class="bg-noctune-yellow border-2 border-black px-6 py-3 font-bold hover:bg-yellow-400 transition-colors rounded-lg">PLAY NOW</button>
+            <button class="bg-gray-200 border-2 border-black px-6 py-3 font-bold hover:bg-gray-300 transition-colors rounded-lg">EXPLORE</button>
+          </div>
+        </div>
+        <div class="w-80 h-80 rounded-2xl overflow-hidden border-4 border-black flex-shrink-0">
+          <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=400&h=400&fit=crop" alt="Music illustration" class="w-full h-full object-cover" />
+        </div>
+      </div>
+
+      <section>
+        <h2 class="text-2xl font-black text-black mb-6 flex items-center">
+          TRENDING NOW
+          <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+        </h2>
+        <div v-if="loading" class="text-center py-12 text-gray-500">Loading tracks...</div>
+        <div v-else class="grid grid-cols-4 gap-4">
+          <div v-for="track in tracks" :key="track._id"
+            @click="playTrack(track)"
+            class="bg-white rounded-2xl border-2 border-black overflow-hidden hover:scale-[1.02] transition-transform cursor-pointer group"
+          >
+            <div class="aspect-square bg-gray-300 relative overflow-hidden">
+              <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+              <div class="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
+                <div class="w-12 h-12 bg-noctune-yellow rounded-full flex items-center justify-center border-2 border-black opacity-0 group-hover:opacity-100 transition-opacity">
+                  <svg class="w-6 h-6 ml-1 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+                </div>
+              </div>
+            </div>
+            <div class="p-3">
+              <p class="text-sm font-bold text-black truncate">{{ track.title }}</p>
+              <p class="text-xs text-gray-500 truncate">{{ track.artist }}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+
+const tracks = ref([])
+const loading = ref(true)
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function playTrack(track) {
+  const idx = tracks.value.findIndex((t) => t._id === track._id)
+  queueStore.setQueue(tracks.value, idx)
+  playerStore.setTrack(track)
+  playerStore.play()
+}
+
+function playFirstTrack() {
+  if (tracks.value.length) playTrack(tracks.value[0])
+}
+
+onMounted(async () => {
+  try {
+    const { data } = await api.get('/tracks')
+    if (data.success) tracks.value = data.data
+  } catch {
+    // ignore
+  } finally {
+    loading.value = false
+  }
+})
+</script>

src/views/LibraryPage.vue

@@ -0,0 +1,134 @@
+<template>
+  <div class="p-8">
+    <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="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>
+      </div>
+      <div v-else class="grid grid-cols-4 gap-6">
+        <div v-for="track in likedTracks" :key="track._id"
+          @click="playTrack(track)"
+          class="group cursor-pointer bg-white rounded-2xl border-2 border-black overflow-hidden hover:scale-[1.02] transition-transform"
+        >
+          <div class="aspect-square bg-gray-300 relative overflow-hidden">
+            <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+            <div class="absolute bottom-2 right-2 w-10 h-10 bg-noctune-yellow rounded-full flex items-center justify-center border-2 border-black opacity-0 group-hover:opacity-100 transition-opacity">
+              <svg class="w-5 h-5 ml-0.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+            </div>
+          </div>
+          <div class="p-3">
+            <p class="text-sm font-bold text-black truncate">{{ track.title }}</p>
+            <p class="text-xs text-gray-500 truncate">{{ track.artist }}</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section>
+      <h2 class="text-2xl font-black text-black mb-6 flex items-center">
+        All Tracks
+        <svg class="w-5 h-5 ml-2" fill="currentColor" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></svg>
+      </h2>
+      <div v-if="allLoading" class="text-center py-8 text-gray-500">Loading...</div>
+      <div v-else class="bg-white rounded-2xl border-4 border-black overflow-hidden">
+        <div class="bg-noctune-teal px-6 py-3 flex items-center text-black font-bold border-b-4 border-black">
+          <span class="flex-1">TITLE</span>
+          <span class="w-40 text-center">ARTIST</span>
+          <span class="w-32 text-center">ALBUM</span>
+          <span class="w-12 text-center"></span>
+        </div>
+        <div class="divide-y divide-gray-200">
+          <div v-for="(track, index) in allTracks" :key="track._id"
+            @click="playTrack(track)"
+            class="px-6 py-3 flex items-center hover:bg-gray-50 transition-colors cursor-pointer"
+          >
+            <div class="flex-1 flex items-center gap-3">
+              <span class="text-sm text-gray-400 w-6">{{ index + 1 }}</span>
+              <div class="w-10 h-10 rounded-lg flex-shrink-0 overflow-hidden bg-gray-300 border border-black">
+                <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+              </div>
+              <span class="font-medium text-black text-sm truncate">{{ track.title }}</span>
+            </div>
+            <span class="w-40 text-center text-gray-600 text-sm truncate">{{ track.artist }}</span>
+            <span class="w-32 text-center text-gray-600 text-sm truncate">{{ track.album }}</span>
+            <button @click.stop="toggleLike(track)" class="w-12 flex justify-center text-gray-400 hover:text-red-400 transition-colors">
+              <svg class="w-5 h-5" :class="track._isLiked ? 'fill-red-400 text-red-400' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
+            </button>
+          </div>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+
+const likedTracks = ref([])
+const allTracks = ref([])
+const loading = ref(true)
+const allLoading = ref(true)
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function playTrack(track) {
+  const tracks = allTracks.value.length ? allTracks.value : likedTracks.value
+  const idx = tracks.findIndex((t) => t._id === track._id)
+  queueStore.setQueue(tracks, idx >= 0 ? idx : 0)
+  playerStore.setTrack(track)
+  playerStore.play()
+}
+
+async function toggleLike(track) {
+  try {
+    if (track._isLiked) {
+      await api.delete(`/tracks/${track._id}/like`)
+      track._isLiked = false
+      likedTracks.value = likedTracks.value.filter((t) => t._id !== track._id)
+    } else {
+      await api.post(`/tracks/${track._id}/like`)
+      track._isLiked = true
+    }
+  } catch {
+    // ignore
+  }
+}
+
+onMounted(async () => {
+  try {
+    const { data: liked } = await api.get('/tracks/liked')
+    if (liked.success) {
+      likedTracks.value = liked.data.likedTracks || []
+      likedTracks.value.forEach((t) => (t._isLiked = true))
+    }
+  } catch {
+    // ignore
+  } finally {
+    loading.value = false
+  }
+
+  try {
+    const { data: all } = await api.get('/tracks')
+    if (all.success) {
+      allTracks.value = all.data
+      const likedIds = new Set(likedTracks.value.map((t) => t._id))
+      allTracks.value.forEach((t) => (t._isLiked = likedIds.has(t._id)))
+    }
+  } catch {
+    // ignore
+  } finally {
+    allLoading.value = false
+  }
+})
+</script>

src/views/LoginPage.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="min-h-screen bg-noctune-cream flex items-center justify-center p-8">
+    <div class="w-full max-w-5xl bg-noctune-teal rounded-3xl border-4 border-black overflow-hidden flex shadow-2xl">
+      <div class="w-1/2 p-12 relative">
+        <div class="absolute top-8 right-12 grid grid-cols-4 gap-1">
+          <span v-for="i in 16" :key="i" class="w-2 h-2 bg-black/40 rounded-full"></span>
+        </div>
+        <div class="absolute top-20 right-8 grid grid-cols-4 gap-1">
+          <span v-for="i in 12" :key="i" class="w-2 h-2 bg-black/40 rounded-full"></span>
+        </div>
+        <div class="absolute top-16 left-20 text-black/60 text-4xl font-bold">+</div>
+        <div class="absolute bottom-24 right-20 text-black/60 text-4xl font-bold">+</div>
+        <div class="absolute bottom-12 left-12 grid grid-cols-3 gap-1">
+          <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>
+        </div>
+      </div>
+
+      <div class="w-1/2 bg-white rounded-3xl m-4 p-10">
+        <h2 class="text-4xl font-black text-black mb-2">WELCOME!</h2>
+        <p class="text-gray-600 mb-8">Login to continue</p>
+        <p v-if="error" class="text-red-500 text-sm mb-4 font-medium">{{ error }}</p>
+
+        <div class="mb-6">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">EMAIL/USERNAME</label>
+          <div class="flex border-2 border-black rounded-lg overflow-hidden">
+            <div class="bg-noctune-teal p-3 border-r-2 border-black">
+              <svg class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+            </div>
+            <input type="text" v-model="identifier" @keyup.enter="handleLogin" class="flex-1 px-4 py-3 focus:outline-none text-black" placeholder="Enter your email" />
+          </div>
+        </div>
+
+        <div class="mb-4">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">PASSWORD</label>
+          <div class="flex border-2 border-black rounded-lg overflow-hidden">
+            <div class="bg-amber-200 p-3 border-r-2 border-black">
+              <svg class="w-6 h-6 text-black" fill="currentColor" viewBox="0 0 24 24"><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>
+            </div>
+            <input :type="showPassword ? 'text' : 'password'" v-model="password" @keyup.enter="handleLogin" class="flex-1 px-4 py-3 focus:outline-none text-black" placeholder="Enter your password" />
+            <button @click="showPassword = !showPassword" class="px-4 text-gray-500 hover:text-gray-700">
+              <svg v-if="!showPassword" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
+              <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
+            </button>
+          </div>
+        </div>
+
+        <div class="text-right mb-6">
+          <a href="#" class="text-sm text-gray-600 hover:text-black">Forgot password?</a>
+        </div>
+
+        <button @click="handleLogin" :disabled="loading" class="w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors disabled:opacity-50">
+          <span v-if="loading" class="inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+          <template v-else>
+            <div class="bg-white/20 rounded p-1">
+              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24"><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
+            </div>
+            LOGIN
+          </template>
+        </button>
+
+        <div class="flex items-center my-6">
+          <div class="flex-1 border-t-2 border-gray-300"></div>
+          <span class="px-4 bg-black text-white text-xs font-bold py-1 rounded">OR SIGN IN WITH</span>
+          <div class="flex-1 border-t-2 border-gray-300"></div>
+        </div>
+
+        <button class="w-full border-2 border-gray-300 rounded-xl py-3 flex items-center justify-center gap-3 hover:bg-gray-50 transition-colors">
+          <svg class="w-6 h-6" viewBox="0 0 24 24">
+            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
+            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
+          </svg>
+          <span class="font-bold text-gray-700">GOOGLE</span>
+        </button>
+
+        <p class="text-center mt-8 text-gray-600">
+          Don&apos;t have an account yet?
+          <router-link to="/register" class="text-noctune-orange font-bold hover:underline">Register now</router-link>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const identifier = ref('')
+const password = ref('')
+const showPassword = ref(false)
+const loading = ref(false)
+const error = ref('')
+
+async function handleLogin() {
+  error.value = ''
+  loading.value = true
+  const result = await authStore.login(identifier.value, password.value)
+  loading.value = false
+  if (result.success) {
+    router.push('/home')
+  } else {
+    error.value = result.message
+  }
+}
+</script>

src/views/PlaylistPage.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="p-8">
+    <div v-if="loading" class="text-center py-20 text-gray-500">Loading playlist...</div>
+    <template v-else-if="playlist">
+      <div class="flex items-start gap-8 mb-8">
+        <div class="w-56 h-56 rounded-2xl overflow-hidden border-4 border-black flex-shrink-0 bg-black">
+          <img v-if="playlist.coverUrl" :src="formatUrl(playlist.coverUrl)" class="w-full h-full object-cover" />
+          <div v-else class="w-full h-full flex items-center justify-center">
+            <svg class="w-40 h-24 text-white/60" viewBox="0 0 100 50">
+              <rect x="5" y="20" width="4" height="15" fill="currentColor"/>
+              <rect x="12" y="10" width="4" height="30" fill="currentColor"/>
+              <rect x="19" y="15" width="4" height="20" fill="currentColor"/>
+              <rect x="26" y="5" width="4" height="40" fill="currentColor"/>
+              <rect x="33" y="12" width="4" height="26" fill="currentColor"/>
+              <rect x="40" y="8" width="4" height="34" fill="currentColor"/>
+              <rect x="47" y="15" width="4" height="20" fill="currentColor"/>
+              <rect x="54" y="18" width="4" height="14" fill="currentColor"/>
+              <rect x="61" y="12" width="4" height="26" fill="currentColor"/>
+              <rect x="68" y="8" width="4" height="34" fill="currentColor"/>
+              <rect x="75" y="15" width="4" height="20" fill="currentColor"/>
+              <rect x="82" y="20" width="4" height="15" fill="currentColor"/>
+              <rect x="89" y="22" width="4" height="10" fill="currentColor"/>
+            </svg>
+          </div>
+        </div>
+
+        <div class="flex-1">
+          <span class="inline-block bg-noctune-teal text-black text-xs font-bold px-3 py-1 rounded mb-3 border border-black">PLAYLIST</span>
+          <h1 class="text-4xl font-black text-black mb-4 leading-tight">{{ playlist.name }}</h1>
+          <p v-if="playlist.description" class="text-gray-600 mb-4">{{ playlist.description }}</p>
+          <div class="flex items-center gap-3 text-gray-600 mb-6">
+            <span class="font-medium">{{ playlist.tracks?.length || 0 }} songs</span>
+          </div>
+          <div class="flex gap-4">
+            <button @click="playAll" :disabled="!playlist.tracks?.length" class="bg-noctune-teal border-2 border-black px-6 py-2 font-bold flex items-center gap-2 rounded-lg hover:bg-teal-600 transition-colors disabled:opacity-50">
+              <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
+              PLAY
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div class="bg-white rounded-2xl border-4 border-black overflow-hidden">
+        <div class="bg-noctune-teal px-6 py-3 flex items-center text-black font-bold border-b-4 border-black">
+          <span class="w-12 text-center">#</span>
+          <span class="flex-1 text-center">TITLE</span>
+          <span class="w-48 text-center">ARTIST</span>
+          <span class="w-12 text-center"></span>
+        </div>
+        <div class="divide-y divide-gray-200">
+          <div v-for="(track, index) in playlist.tracks" :key="track._id"
+            @click="playTrack(index)"
+            class="px-6 py-3 flex items-center hover:bg-gray-50 transition-colors cursor-pointer"
+          >
+            <span class="w-12 text-center text-gray-500">{{ index + 1 }}</span>
+            <div class="flex-1 flex items-center gap-4">
+              <div class="w-12 h-12 rounded-lg flex-shrink-0 overflow-hidden bg-gray-300 border border-black">
+                <img v-if="track.coverUrl" :src="formatUrl(track.coverUrl)" class="w-full h-full object-cover" />
+              </div>
+              <span class="font-medium text-black text-sm truncate">{{ track.title }}</span>
+            </div>
+            <span class="w-48 text-center text-gray-600 text-sm truncate">{{ track.artist }}</span>
+            <button @click.stop="toggleLike(track)" class="w-12 flex justify-center text-gray-400 hover:text-red-400 transition-colors">
+              <svg class="w-5 h-5" :class="track._isLiked ? 'fill-red-400 text-red-400' : ''" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/></svg>
+            </button>
+          </div>
+          <div v-if="!playlist.tracks?.length" class="p-8 text-center text-gray-500">No tracks in this playlist yet</div>
+        </div>
+      </div>
+    </template>
+    <div v-else class="text-center py-20 text-gray-500">Playlist not found</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import { usePlayerStore } from '../stores/playerStore.js'
+import { useQueueStore } from '../stores/queueStore.js'
+import api from '../lib/api.js'
+
+const route = useRoute()
+const playerStore = usePlayerStore()
+const queueStore = useQueueStore()
+
+const playlist = ref(null)
+const loading = ref(true)
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function playTrack(index) {
+  if (!playlist.value?.tracks?.length) return
+  const tracks = playlist.value.tracks
+  queueStore.setQueue(tracks, index)
+  playerStore.setTrack(tracks[index])
+  playerStore.play()
+}
+
+function playAll() {
+  if (playlist.value?.tracks?.length) playTrack(0)
+}
+
+async function toggleLike(track) {
+  try {
+    if (track._isLiked) {
+      await api.delete(`/tracks/${track._id}/like`)
+      track._isLiked = false
+    } else {
+      await api.post(`/tracks/${track._id}/like`)
+      track._isLiked = true
+    }
+  } catch {
+    // ignore
+  }
+}
+
+onMounted(async () => {
+  const id = route.params.id
+  try {
+    if (id) {
+      const { data } = await api.get(`/playlists/${id}`)
+      if (data.success) {
+        playlist.value = data.data
+        playlist.value.tracks?.forEach((t) => (t._isLiked = false))
+      }
+    } else {
+      const { data } = await api.get('/playlists')
+      if (data.success && data.data.length) {
+        const { data: detail } = await api.get(`/playlists/${data.data[0]._id}`)
+        if (detail.success) {
+          playlist.value = detail.data
+          playlist.value.tracks?.forEach((t) => (t._isLiked = false))
+        }
+      } else {
+        playlist.value = { name: 'My Playlist', tracks: [] }
+      }
+    }
+  } catch {
+    playlist.value = null
+  } finally {
+    loading.value = false
+  }
+})
+</script>

src/views/ProfilePage.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="p-8">
+    <div class="bg-white rounded-2xl border-4 border-black p-6 mb-6 flex items-center gap-8">
+      <div class="w-40 h-40 rounded-full border-4 border-black overflow-hidden flex-shrink-0 bg-gray-300">
+        <img v-if="authStore.user?.avatarUrl" :src="formatUrl(authStore.user.avatarUrl)" alt="Profile" class="w-full h-full object-cover" />
+        <div v-else class="w-full h-full flex items-center justify-center">
+          <svg class="w-16 h-16 text-gray-400" fill="currentColor" viewBox="0 0 24 24"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
+        </div>
+      </div>
+
+      <div class="flex-1">
+        <h1 class="text-3xl font-black text-black mb-1">{{ userDisplayName }}</h1>
+        <p class="text-gray-600 mb-3">@{{ authStore.user?.username || 'username' }}</p>
+        <div class="inline-flex items-center gap-2 border-2 border-noctune-orange text-noctune-orange px-3 py-1 rounded-full mb-4">
+          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"/></svg>
+          <span class="text-sm font-medium">{{ authStore.user?.role === 'admin' ? 'Admin' : 'Premium Member' }}</span>
+        </div>
+        <div class="flex gap-4">
+          <button @click="toggleEdit" class="border-2 border-black px-4 py-2 rounded-lg font-medium flex items-center gap-2 hover:bg-gray-100 transition-colors">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
+            {{ editing ? 'Cancel' : 'Edit Profile' }}
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="editing" class="bg-white rounded-2xl border-4 border-black p-6 mb-6">
+      <h3 class="text-xl font-black text-black mb-4">Edit Profile</h3>
+      <p v-if="editError" class="text-red-500 text-sm mb-4">{{ editError }}</p>
+      <p v-if="editSuccess" class="text-green-600 text-sm mb-4">{{ editSuccess }}</p>
+      <div class="space-y-4 max-w-md">
+        <div>
+          <label class="block text-xs font-bold text-gray-600 mb-1">NAME</label>
+          <input type="text" v-model="editName" class="w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none text-black" />
+        </div>
+        <div>
+          <label class="block text-xs font-bold text-gray-600 mb-1">USERNAME</label>
+          <input type="text" v-model="editUsername" class="w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none text-black" />
+        </div>
+        <div>
+          <label class="block text-xs font-bold text-gray-600 mb-1">EMAIL</label>
+          <input type="email" v-model="editEmail" class="w-full border-2 border-black rounded-lg px-4 py-2 focus:outline-none text-black" />
+        </div>
+        <div>
+          <label class="block text-xs font-bold text-gray-600 mb-1">AVATAR</label>
+          <input type="file" accept="image/*" @change="onAvatarChange" class="w-full text-sm" />
+        </div>
+        <button @click="handleUpdate" :disabled="updating" class="bg-noctune-teal border-2 border-black px-6 py-2 font-bold rounded-lg hover:bg-teal-600 transition-colors disabled:opacity-50">
+          <span v-if="updating" class="inline-block w-4 h-4 border-2 border-black border-t-transparent rounded-full animate-spin mr-1"></span>
+          Save Changes
+        </button>
+      </div>
+    </div>
+
+    <div class="bg-white rounded-2xl border-4 border-black p-6 mb-6 flex justify-center gap-12">
+      <div class="flex items-center gap-4">
+        <div class="w-14 h-14 bg-noctune-orange rounded-xl flex items-center justify-center border-2 border-black">
+          <svg class="w-7 h-7 text-white" fill="currentColor" viewBox="0 0 24 24"><path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/></svg>
+        </div>
+        <div>
+          <p class="text-2xl font-black text-black">{{ likedCount }}</p>
+          <p class="text-sm text-gray-500">Liked Songs</p>
+        </div>
+      </div>
+    </div>
+
+    <button @click="handleLogout" class="w-full bg-noctune-orange border-4 border-black rounded-2xl py-4 font-bold text-black flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors">
+      <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
+      Logout
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+import api from '../lib/api.js'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const editing = ref(false)
+const editName = ref('')
+const editUsername = ref('')
+const editEmail = ref('')
+const avatarFile = ref(null)
+const updating = ref(false)
+const editError = ref('')
+const editSuccess = ref('')
+const likedCount = ref(0)
+
+const userDisplayName = computed(() => {
+  return authStore.user?.name || authStore.user?.username || 'User'
+})
+
+function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `http://localhost:3001${url}`
+}
+
+function toggleEdit() {
+  editing.value = !editing.value
+  if (editing.value) {
+    editName.value = authStore.user?.name || ''
+    editUsername.value = authStore.user?.username || ''
+    editEmail.value = authStore.user?.email || ''
+    avatarFile.value = null
+    editError.value = ''
+    editSuccess.value = ''
+  }
+}
+
+function onAvatarChange(e) {
+  avatarFile.value = e.target.files[0] || null
+}
+
+async function handleUpdate() {
+  editError.value = ''
+  editSuccess.value = ''
+  updating.value = true
+  try {
+    const formData = new FormData()
+    formData.append('name', editName.value)
+    formData.append('username', editUsername.value)
+    formData.append('email', editEmail.value)
+    if (avatarFile.value) formData.append('avatar', avatarFile.value)
+
+    const result = await authStore.updateProfile(formData)
+    if (result.success) {
+      editSuccess.value = 'Profile updated!'
+      setTimeout(() => { editing.value = false }, 1500)
+    } else {
+      editError.value = result.message
+    }
+  } catch {
+    editError.value = 'Update failed'
+  } finally {
+    updating.value = false
+  }
+}
+
+async function handleLogout() {
+  await authStore.logout()
+  router.push('/')
+}
+
+onMounted(async () => {
+  try {
+    const { data } = await api.get('/tracks/liked')
+    if (data.success) {
+      likedCount.value = data.data.likedTracks?.length || 0
+    }
+  } catch {
+    // ignore
+  }
+})
+</script>

src/views/RegisterPage.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="min-h-screen bg-noctune-cream flex items-center justify-center p-8">
+    <div class="w-full max-w-5xl bg-noctune-teal rounded-3xl border-4 border-black overflow-hidden flex shadow-2xl">
+      <div class="w-1/2 p-12 relative">
+        <div class="absolute top-8 right-12 grid grid-cols-4 gap-1">
+          <span v-for="i in 16" :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"/>
+              </svg>
+            </div>
+          </div>
+          <h1 class="text-4xl font-mono font-bold text-noctune-dark tracking-wider mt-4">noctune</h1>
+        </div>
+      </div>
+      <div class="w-1/2 bg-white rounded-3xl m-4 p-10">
+        <h2 class="text-4xl font-black text-black mb-2">JOIN US!</h2>
+        <p class="text-gray-600 mb-6">Create your account</p>
+        <p v-if="error" class="text-red-500 text-sm mb-4 font-medium">{{ error }}</p>
+        <div class="mb-4">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">NAME</label>
+          <input type="text" v-model="name" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Your name" />
+        </div>
+        <div class="mb-4">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">USERNAME</label>
+          <input type="text" v-model="username" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Choose a username" />
+        </div>
+        <div class="mb-4">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">EMAIL</label>
+          <input type="email" v-model="email" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Enter your email" />
+        </div>
+        <div class="mb-6">
+          <label class="block text-xs font-bold text-gray-600 mb-2 tracking-wider">PASSWORD</label>
+          <input type="password" v-model="password" class="w-full border-2 border-black rounded-lg px-4 py-3 focus:outline-none text-black" placeholder="Create a password" />
+        </div>
+        <button @click="handleRegister" :disabled="loading" class="w-full bg-noctune-orange border-2 border-black rounded-lg py-4 font-bold text-white text-xl flex items-center justify-center gap-3 hover:bg-orange-600 transition-colors disabled:opacity-50">
+          <span v-if="loading" class="inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></span>
+          <span v-else>REGISTER</span>
+        </button>
+        <p class="text-center mt-6 text-gray-600">
+          Already have an account?
+          <router-link to="/" class="text-noctune-orange font-bold hover:underline">Login</router-link>
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { useAuthStore } from '../stores/authStore.js'
+
+const router = useRouter()
+const authStore = useAuthStore()
+
+const name = ref('')
+const username = ref('')
+const email = ref('')
+const password = ref('')
+const loading = ref(false)
+const error = ref('')
+
+async function handleRegister() {
+  error.value = ''
+  loading.value = true
+  const result = await authStore.register({ name: name.value, username: username.value, email: email.value, password: password.value })
+  loading.value = false
+  if (result.success) {
+    router.push('/home')
+  } else {
+    error.value = result.message
+  }
+}
+</script>