feat: add utility function to format URLs and create new CSS file for styling

src/components/AppHeader.vue

@@ -60,6 +60,7 @@ import { useAuthStore } from '../stores/authStore.js'
 import { usePlayerStore } from '../stores/playerStore.js'
 import { useQueueStore } from '../stores/queueStore.js'
 import api from '../lib/api.js'
+import { formatUrl } from '../lib/utils.js'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -70,11 +71,6 @@ 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()) {

src/components/PlayerBar.vue

@@ -59,6 +59,7 @@ import { ref, computed, watch, onMounted } from 'vue'
 import { usePlayerStore } from '../stores/playerStore.js'
 import { useQueueStore } from '../stores/queueStore.js'
 import { useAuthStore } from '../stores/authStore.js'
+import { formatUrl } from '../lib/utils.js'
 
 const playerStore = usePlayerStore()
 const queueStore = useQueueStore()
@@ -78,11 +79,7 @@ onMounted(() => {
   playerStore.onEnd(onTrackEnd)
 })
 
-const coverSrc = computed(() => {
-  const url = playerStore.currentTrack?.coverUrl
-  if (!url) return ''
-  return url.startsWith('http') ? url : `http://localhost:3001${url}`
-})
+const coverSrc = computed(() => formatUrl(playerStore.currentTrack?.coverUrl))
 
 function onSeek(e) {
   playerStore.seek(parseFloat(e.target.value))

src/lib/utils.js

@@ -0,0 +1,6 @@
+const SERVER_URL = import.meta.env.VITE_SERVER_URL || 'http://localhost:3000'
+
+export function formatUrl(url) {
+  if (!url) return ''
+  return url.startsWith('http') ? url : `${SERVER_URL}${url}`
+}

src/stores/authStore.js

@@ -14,7 +14,7 @@ export const useAuthStore = defineStore('auth', () => {
   async function checkSession() {
     try {
       const { data } = await api.get('/auth/me')
-      if (data.success) user.value = data.data
+      if (data.success) user.value = data.data.user
     } catch {
       user.value = null
     }

src/stores/playerStore.js

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import audioEngine from '../lib/audioEngine.js'
+import { formatUrl } from '../lib/utils.js'
 
 export const usePlayerStore = defineStore('player', () => {
   const currentTrack = ref(null)
@@ -22,9 +23,7 @@ export const usePlayerStore = defineStore('player', () => {
     isPlaying.value = false
     stopSeekInterval()
 
-    const audioUrl = track.audioUrl.startsWith('http')
-      ? track.audioUrl
-      : `http://localhost:3001${track.audioUrl}`
+    const audioUrl = formatUrl(track.audioUrl)
 
     audioEngine.load(audioUrl)
     audioEngine.on('play', () => { isPlaying.value = true })

src/views/LandingPage.vue

@@ -61,6 +61,7 @@ import { usePlayerStore } from '../stores/playerStore.js'
 import { useQueueStore } from '../stores/queueStore.js'
 import { useAuthStore } from '../stores/authStore.js'
 import api from '../lib/api.js'
+import { formatUrl } from '../lib/utils.js'
 
 const playerStore = usePlayerStore()
 const queueStore = useQueueStore()
@@ -69,11 +70,6 @@ const authStore = useAuthStore()
 const tracks = ref([])
 const loading = ref(true)
 
-function formatUrl(url) {
-  if (!url) return ''
-  return url.startsWith('http') ? url : `http://localhost:3001${url}`
-}
-
 function isCurrentTrack(track) {
   return playerStore.currentTrack?._id === track._id
 }

src/views/LibraryPage.vue

@@ -74,6 +74,7 @@ import { usePlayerStore } from '../stores/playerStore.js'
 import { useQueueStore } from '../stores/queueStore.js'
 import { useAuthStore } from '../stores/authStore.js'
 import api from '../lib/api.js'
+import { formatUrl } from '../lib/utils.js'
 
 const playerStore = usePlayerStore()
 const queueStore = useQueueStore()
@@ -84,11 +85,6 @@ 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 isCurrentTrack(track) {
   return playerStore.currentTrack?._id === track._id
 }

src/views/PlaylistPage.vue

@@ -82,6 +82,7 @@ import { usePlayerStore } from '../stores/playerStore.js'
 import { useQueueStore } from '../stores/queueStore.js'
 import { useAuthStore } from '../stores/authStore.js'
 import api from '../lib/api.js'
+import { formatUrl } from '../lib/utils.js'
 
 const route = useRoute()
 const playerStore = usePlayerStore()
@@ -91,11 +92,6 @@ const authStore = useAuthStore()
 const playlist = ref(null)
 const loading = ref(true)
 
-function formatUrl(url) {
-  if (!url) return ''
-  return url.startsWith('http') ? url : `http://localhost:3001${url}`
-}
-
 function isCurrentTrack(track) {
   return playerStore.currentTrack?._id === track._id
 }

src/views/ProfilePage.vue

@@ -76,6 +76,7 @@ import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '../stores/authStore.js'
 import api from '../lib/api.js'
+import { formatUrl } from '../lib/utils.js'
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -94,11 +95,6 @@ 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) {