Initial implementation of Import page, project cleanup

app/pages/edit.vue

@@ -46,6 +46,7 @@ const { mutate: reorderTracks } = useMutation({
         return { previousTracks };
     },
     onError: (err, { playlistId }, context) => {
+        console.log(err)
         if (context?.previousTracks) {
             queryClient.setQueryData(getGetPlaylistTracksQueryKey(playlistId), context.previousTracks);
         }

app/pages/import.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { Outline } from '@/components/ui/outline';
 import { SidebarTrigger } from '@/components/ui/sidebar';
-import Frame from '@/components/ui/frame/Frame.vue';
+import { Download, Play } from 'lucide-vue-next';
+import UploadEntry from '~/components/internal/import/uploadentry/UploadEntry.vue';
 </script>
 
 <template>
@@ -12,25 +13,32 @@ import Frame from '@/components/ui/frame/Frame.vue';
                     <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
+                            Import tracks
                         </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>
+            <div class="w-full flex flex-col p-8">
+                <Outline class="rounded-xl bg-muted flex flex-col items-center justify-center gap-1">
+                    <Download />
+                    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
+                        Drag and drop your audio files
+                    </h4>
+                    <p class="text-sm text-muted-foreground">
+                        or
+                    </p>
+                    <UiButton variant="destructive">
+                        <Play />
+                        From Youtube
+                    </UiButton>
                 </Outline>
-            </template>
+                <div>
+                    <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
+                        Uploaded files
+                    </h3>
+                    <UploadEntry title="Test" size="3.8 MB" format="mp4" />
+                </div>
+            </div>
         </NuxtLayout>
     </div>
 </template>