init

frontend/src/components/tracks/TrackItem.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="track-item" @click="selectable && $emit('select')">
+    <div class="track-info">
+      <span class="track-title">{{ track.title }}</span>
+      <span class="track-artist">{{ track.artist }}</span>
+    </div>
+    <span class="track-duration">{{ formatDuration(track.duration) }}</span>
+    <button
+      v-if="selectable"
+      class="btn-primary add-btn"
+      @click.stop="$emit('select')"
+    >
+      +
+    </button>
+    <button
+      v-if="!selectable"
+      class="btn-danger delete-btn"
+      @click.stop="$emit('delete')"
+    >
+      Удалить
+    </button>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  track: {
+    type: Object,
+    required: true
+  },
+  selectable: {
+    type: Boolean,
+    default: false
+  }
+})
+
+defineEmits(['select', 'delete'])
+
+function formatDuration(ms) {
+  const seconds = Math.floor(ms / 1000)
+  const minutes = Math.floor(seconds / 60)
+  const secs = seconds % 60
+  return `${minutes}:${secs.toString().padStart(2, '0')}`
+}
+</script>
+
+<style scoped>
+.track-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: #1a1a2e;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: background 0.2s;
+}
+
+.track-item:hover {
+  background: #2d2d44;
+}
+
+.track-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.track-title {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.track-artist {
+  display: block;
+  font-size: 12px;
+  color: #aaa;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.track-duration {
+  color: #aaa;
+  font-size: 12px;
+}
+
+.add-btn {
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  font-size: 18px;
+  border-radius: 50%;
+}
+
+.delete-btn {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+</style>