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>