Fix colors, replace Dropdown with Select, add clear layout

2025-11-06 00:31:47 +05:00
parent 73a3be7539
commit 86b41eb5e0
51 changed files with 1248 additions and 164 deletions
--- a/app/pages/edit.vue
+++ b/app/pages/edit.vue
@ -0,0 +1,106 @@
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next'
+import { Button } from '@/components/ui/button'
+import { InputWithIcon } from '@/components/ui/input'
+import MusicCard from '@/components/ui/musiccard/MusicCard.vue'
+import { Outline } from '@/components/ui/outline'
+import { SidebarTrigger } from '@/components/ui/sidebar'
+
+const searchValue = ref('')
+
+// Mock data
+const tracks = ref([
+    {
+        id: 1,
+        title: "Best of Chobits OST - Beyond",
+        author: "ビヨンド",
+        authorLabel: "Author",
+        badges: ["mp3", "jpop", "anime"],
+        imageUrl: "https://github.com/yavuzceliker/sample-images/blob/main/docs/image-1.jpg?raw=true",
+        date: "about 17 years ago",
+        selected: true
+    },
+    {
+        id: 2,
+        title: "Summer Vibessssssssssssssssssssssssssssssssssssfawefjioawefjeaiofjeaoifjeaofejiaofejaiojfoaiss",
+        author: "Various Artists",
+        authorLabel: "Artists",
+        badges: ["mp3", "summer", "mix"],
+        imageUrl: "https://github.com/yavuzceliker/sample-images/blob/main/docs/image-2.jpg?raw=true",
+        date: "about 1 hour ago",
+        selected: false
+    },
+    {
+        id: 3,
+        title: "Unknown Track",
+        author: "Unknown Artist",
+        authorLabel: "Author",
+        badges: ["wav"],
+        imageUrl: "https://github.com/yavuzceliker/sample-images/blob/main/docs/image-3.jpg?raw=true",
+        selected: false
+    },
+    {
+        id: 4,
+        title: "Single Track",
+        author: "Solo Artist",
+        authorLabel: "Author",
+        badges: [],
+        imageUrl: "https://github.com/yavuzceliker/sample-images/blob/main/docs/image-5.jpg?raw=true",
+        date: "recently added",
+        selected: false
+    }
+])
+
+const filteredTracks = computed(() => {
+    if (!searchValue.value) return tracks.value
+
+    return tracks.value.filter(track =>
+        track.title.toLowerCase().includes(searchValue.value.toLowerCase()) ||
+        track.author.toLowerCase().includes(searchValue.value.toLowerCase()) ||
+        track.badges.some(badge => badge.toLowerCase().includes(searchValue.value.toLowerCase()))
+    )
+})
+
+const selectTrack = (trackId: number) => {
+    tracks.value.forEach(track => {
+        track.selected = track.id === trackId
+    })
+}
+</script>
+
+<template>
+    <div class="flex-1">
+        <NuxtLayout name="default">
+            <template #header>
+                <Outline side="bottom" padding="dense" class="w-full flex">
+                    <div class="flex gap-8 w-full items-center">
+                        <SidebarTrigger :size="5" />
+                        <h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+                            Tracks
+                        </h2>
+                    </div>
+                    <Button>
+                        Export
+                    </Button>
+                </Outline>
+            </template>
+            <div class="flex flex-col w-full p-4 gap-4 h-full">
+                <InputWithIcon v-model="searchValue" :icon="Search" placeholder="Search..." type="search" icon-size="5"
+                    id="user-search" class="w-full" />
+
+                <MusicCard v-for="track in filteredTracks" :key="track.id" :title="track.title" :author="track.author"
+                    :authorLabel="track.authorLabel" :badges="track.badges" :imageUrl="track.imageUrl"
+                    :date="track.date" :selected="track.selected" @click="selectTrack(track.id)" />
+            </div>
+            <template #sidebar>
+                <Outline padding="none" class="h-full" side="left">
+                    <Outline padding="dense" side="bottom">
+                        <p class="leading-7 not-first:mt-6 font-semibold">
+                            Metadata editor
+                        </p>
+                    </Outline>
+                </Outline>
+            </template>
+        </NuxtLayout>
+    </div>
+</template>