init

frontend/src/views/TracksView.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="tracks-page">
+    <div class="header-section">
+      <h1>Библиотека треков</h1>
+      <button class="btn-primary" @click="showUpload = true">Загрузить трек</button>
+    </div>
+
+    <div v-if="tracksStore.loading" class="loading">Загрузка...</div>
+
+    <div v-else-if="tracksStore.tracks.length === 0" class="empty">
+      <p>Нет треков. Загрузите первый!</p>
+    </div>
+
+    <div v-else class="tracks-list card">
+      <TrackList
+        :tracks="tracksStore.tracks"
+        @delete="handleDelete"
+      />
+    </div>
+
+    <Modal v-if="showUpload" title="Загрузить трек" @close="showUpload = false">
+      <UploadTrack @uploaded="showUpload = false" />
+    </Modal>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useTracksStore } from '../stores/tracks'
+import TrackList from '../components/tracks/TrackList.vue'
+import UploadTrack from '../components/tracks/UploadTrack.vue'
+import Modal from '../components/common/Modal.vue'
+
+const tracksStore = useTracksStore()
+
+const showUpload = ref(false)
+
+onMounted(() => {
+  tracksStore.fetchTracks()
+})
+
+async function handleDelete(track) {
+  if (confirm(`Удалить трек "${track.title}"?`)) {
+    await tracksStore.deleteTrack(track.id)
+  }
+}
+</script>
+
+<style scoped>
+.tracks-page {
+  padding-top: 20px;
+}
+
+.header-section {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+}
+
+.header-section h1 {
+  margin: 0;
+}
+
+.tracks-list {
+  padding: 16px;
+}
+
+.loading, .empty {
+  text-align: center;
+  padding: 40px;
+  color: #aaa;
+}
+</style>