Fix colors, replace Dropdown with Select, add clear layout

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>

app/pages/export.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Outline } from '@/components/ui/outline';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import Frame from '@/components/ui/frame/Frame.vue';
+</script>
+
+<template>
+    <div class="flex-1">
+        <NuxtLayout name="default">
+            <template #header>
+                <Outline side="bottom" padding="dense" class="w-full">
+                    <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">
+                            Export
+                        </h2>
+                    </div>
+                </Outline>
+            </template>
+            <div class="w-full">
+                <Frame>
+                    Hello
+                </Frame>
+            </div>
+        </NuxtLayout>
+    </div>
+</template>

app/pages/import.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { Outline } from '@/components/ui/outline';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import Frame from '@/components/ui/frame/Frame.vue';
+</script>
+
+<template>
+    <div class="flex-1">
+        <NuxtLayout name="default">
+            <template #header>
+                <Outline side="bottom" padding="dense" class="w-full">
+                    <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">
+                            Import
+                        </h2>
+                    </div>
+                </Outline>
+            </template>
+            <div class="w-full">
+                <Frame>
+                    Hello
+                </Frame>
+            </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>

app/pages/index.vue

@@ -1,41 +1,3 @@
-<script setup lang="ts">
-import Container from '@/components/ui/container/Container.vue';
-import { SidebarTrigger } from '@/components/ui/sidebar';
-import { Outline } from '@/components/ui/outline';
-
-definePageMeta({
-    layout: false,
-})
+<script lang="ts" setup>
+await navigateTo('/edit')
 </script>
-
-<template>
-    <div class="flex-1">
-        <NuxtLayout name="default">
-            <template #header>
-                <Outline side="bottom" padding="dense" class="w-full">
-                    <div class="flex gap-8 w-full items-center">
-                        <SidebarTrigger :size="5" />
-                        <h2
-                            class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-                            Tracks
-                        </h2>
-                    </div>
-                </Outline>
-            </template>
-            <div class="w-full">
-                <Container>
-                    Hello
-                </Container>
-            </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>

app/pages/modify.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Outline } from '@/components/ui/outline';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import Frame from '@/components/ui/frame/Frame.vue';
+</script>
+
+<template>
+    <div class="flex-1">
+        <NuxtLayout name="default">
+            <template #header>
+                <Outline side="bottom" padding="dense" class="w-full">
+                    <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">
+                            Modify
+                        </h2>
+                    </div>
+                </Outline>
+            </template>
+            <div class="w-full">
+                <Frame>
+                    Hello
+                </Frame>
+            </div>
+        </NuxtLayout>
+    </div>
+</template>

app/pages/settings.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { Outline } from '@/components/ui/outline';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import Frame from '@/components/ui/frame/Frame.vue';
+</script>
+
+<template>
+    <div class="flex-1">
+        <NuxtLayout name="default">
+            <template #header>
+                <Outline side="bottom" padding="dense" class="w-full">
+                    <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">
+                            Settings
+                        </h2>
+                    </div>
+                </Outline>
+            </template>
+            <div class="w-full">
+                <Frame>
+                    Hello
+                </Frame>
+            </div>
+        </NuxtLayout>
+    </div>
+</template>

app/pages/test.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-import Container from '@/components/ui/container/Container.vue';
 import { Outline } from '@/components/ui/outline';
-import { SidebarTrigger } from '@/components/ui/sidebar';
+import Frame from '@/components/ui/frame/Frame.vue';
 
 definePageMeta({
     layout: false,
@@ -9,24 +8,20 @@ definePageMeta({
 </script>
 
 <template>
-    <div class="flex-1">
-        <NuxtLayout name="default">
-            <template #header>
-                <Outline side="bottom" padding="dense" class="w-full">
-                    <div class="flex gap-8 w-full items-center">
-                        <SidebarTrigger :size="5" />
-                        <h2
-                            class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
-                            Tracks
-                        </h2>
-                    </div>
-                </Outline>
-            </template>
-            <div class="w-full">
-                <Container>
-                    Hello
-                </Container>
-            </div>
-        </NuxtLayout>
-    </div>
+    <NuxtLayout name="custom">
+        <template #header>
+            <Outline side="bottom" padding="dense" class="w-full">
+                <div class="flex gap-8 w-full items-center">
+                    <h2 class="scroll-m-20 text-3xl font-semibold tracking-tight transition-colors first:mt-0">
+                        Tracks
+                    </h2>
+                </div>
+            </Outline>
+        </template>
+        <div class="w-full">
+            <Frame>
+                Hello
+            </Frame>
+        </div>
+    </NuxtLayout>
 </template>