Initial implementation of Import page, project cleanup

app/components/internal/import/uploadentry/UploadEntry.vue

@@ -0,0 +1,43 @@
+<template>
+    <Frame margin="none" class="px-3 py-4 flex items-center gap-2">
+        <div>
+            <AudioWaveform :size="32" />
+        </div>
+        <div class="w-full">
+            <div class="flex flex-row gap-4">
+                <p class="font-medium">
+                    {{ title }}
+                </p>
+                <Pen />
+            </div>
+            <div class="flex flex-row">
+                <p class="text-sm text-muted-foreground">
+                    {{ size }}
+                </p>
+                <Dot />
+                <p class="text-sm text-muted-foreground">
+                    {{ format }}
+                </p>
+            </div>
+        </div>
+        <div>
+            <EllipsisVertical :size="32" />
+        </div>
+    </Frame>
+</template>
+
+<script setup lang="ts">
+import Frame from '@/components/ui/frame/Frame.vue'
+import { AudioWaveform, Dot, EllipsisVertical, Pen } from 'lucide-vue-next'
+
+interface Props {
+    title: string
+    size: string
+    format: string
+    progress?: number
+    error?: string
+}
+
+withDefaults(defineProps<Props>(), {
+})
+</script>

app/components/internal/musiccard/MusicCard.vue

@@ -6,11 +6,11 @@
         <Separator orientation="vertical" />
         <div class="w-fit flex-1 flex flex-col justify-between">
             <div class="w-full">
-                <div class="flex items-center justify-between w-full">
+                <div class="flex items-start justify-between w-full">
                     <h4 class="scroll-m-20 text-xl font-semibold tracking-tight truncate max-w-[32ch]">
                         {{ title }}
                     </h4>
-                    <p class="leading-7" v-if="date">
+                    <p class="max-w-[16ch]" v-if="date">
                         {{ date }}
                     </p>
                 </div>

app/components/ui/button/Button.vue

@@ -7,23 +7,19 @@ import { cn } from "@/lib/utils"
 import { buttonVariants } from "."
 
 interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
+    variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
+    size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
+    class?: HTMLAttributes["class"]
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  as: "button",
+    as: "button",
 })
 </script>
 
 <template>
-  <Primitive
+    <Primitive data-slot="button" :as="as" :as-child="asChild"
-    data-slot="button"
+        :class="cn(buttonVariants({ variant, size }), props.class)">
-    :as="as"
+        <slot />
-    :as-child="asChild"
+    </Primitive>
-    :class="cn(buttonVariants({ variant, size }), props.class)"
-  >
-    <slot />
-  </Primitive>
 </template>

app/components/ui/button/index.ts

@@ -4,36 +4,36 @@ import { cva } from "class-variance-authority"
 export { default as Button } from "./Button.vue"
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
+    {
-    variants: {
+        variants: {
-      variant: {
+            variant: {
-        default:
+                default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+                    "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-        destructive:
+                destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+                    "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
-        outline:
+                outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+                    "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
-        secondary:
+                secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+                    "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        ghost:
+                ghost:
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+                    "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
-        link: "text-primary underline-offset-4 hover:underline",
+                link: "text-primary underline-offset-4 hover:underline",
-      },
+            },
-      size: {
+            size: {
-        "default": "h-9 px-4 py-2 has-[>svg]:px-3",
+                "default": "h-9 px-4 py-2 has-[>svg]:px-3",
-        "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+                "sm": "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
-        "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
+                "lg": "h-10 rounded-md px-6 has-[>svg]:px-4",
-        "icon": "size-9",
+                "icon": "size-9",
-        "icon-sm": "size-8",
+                "icon-sm": "size-8",
-        "icon-lg": "size-10",
+                "icon-lg": "size-10",
-      },
+            },
+        },
+        defaultVariants: {
+            variant: "default",
+            size: "default",
+        },
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
 )
 
 export type ButtonVariants = VariantProps<typeof buttonVariants>

app/components/ui/outline/Outline.vue

@@ -3,7 +3,7 @@ import type { PrimitiveProps } from "reka-ui"
 import type { HTMLAttributes } from "vue"
 import type { FrameVariants } from "../frame"
 import { cn } from "@/lib/utils"
-import Frame from "@/components/ui/frame/Frame.vue"
+import Frame from "../frame/Frame.vue"
 
 
 interface Props extends PrimitiveProps {

app/composeables/api/axios-instance.ts

@@ -6,7 +6,6 @@ export const axiosInstance = <T>(
     options?: AxiosRequestConfig,
 ): Promise<AxiosResponse<T, any>> => {
     const baseURL = useRuntimeConfig().public.apiBaseUrl;
-    console.log(baseURL)
     const source = Axios.CancelToken.source();
     const promise = AXIOS_INSTANCE({
         ...config,

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">
+            <div class="w-full flex flex-col p-8">
-                <Frame>
+                <Outline class="rounded-xl bg-muted flex flex-col items-center justify-center gap-1">
-                    Hello
+                    <Download />
-                </Frame>
+                    <h4 class="scroll-m-20 text-xl font-semibold tracking-tight">
-            </div>
+                        Drag and drop your audio files
-            <template #sidebar>
+                    </h4>
-                <Outline padding="none" class="h-full" side="left">
+                    <p class="text-sm text-muted-foreground">
-                    <Outline padding="dense" side="bottom">
+                        or
-                        <p class="leading-7 not-first:mt-6 font-semibold">
+                    </p>
-                            Metadata editor
+                    <UiButton variant="destructive">
-                        </p>
+                        <Play />
-                    </Outline>
+                        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>