Implement progress and error for import UploadEntry

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

@@ -4,13 +4,15 @@
             <AudioWaveform :size="32" />
         </div>
         <div class="w-full">
-            <div class="flex flex-row gap-4">
+            <div class="flex flex-row items-center gap-1">
                 <p class="font-medium">
                     {{ title }}
                 </p>
-                <Pen />
+                <UiButton variant="ghost" v-if="size">
+                    <Pen />
+                </UiButton>
             </div>
-            <div class="flex flex-row">
+            <div class="flex flex-row" v-if="size && format">
                 <p class="text-sm text-muted-foreground">
                     {{ size }}
                 </p>
@@ -19,9 +21,22 @@
                     {{ format }}
                 </p>
             </div>
+            <div class="flex flex-row items-center gap-2" v-if="progress">
+                <p class="text-sm text-muted-foreground">
+                    {{ progress }}%
+                </p>
+                <UiProgress :modelValue="progress" />
+            </div>
+            <div class="flex flex-row" v-if="error">
+                <p class="text-sm text-destructive-foreground">
+                    {{ error }}
+                </p>
+            </div>
         </div>
         <div>
-            <EllipsisVertical :size="32" />
+            <UiButton variant="ghost">
+                <EllipsisVertical :size="32" />
+            </UiButton>
         </div>
     </Frame>
 </template>
@@ -32,8 +47,8 @@ import { AudioWaveform, Dot, EllipsisVertical, Pen } from 'lucide-vue-next'
 
 interface Props {
     title: string
-    size: string
-    format: string
+    size?: string
+    format?: string
     progress?: number
     error?: string
 }

app/components/ui/progress/Progress.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { ProgressRootProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import {
+  ProgressIndicator,
+  ProgressRoot,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary h-full w-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>

app/components/ui/progress/index.ts

@@ -0,0 +1 @@
+export { default as Progress } from "./Progress.vue"

app/pages/import.vue

@@ -36,7 +36,11 @@ import UploadEntry from '~/components/internal/import/uploadentry/UploadEntry.vu
                     <h3 class="scroll-m-20 text-2xl font-semibold tracking-tight">
                         Uploaded files
                     </h3>
-                    <UploadEntry title="Test" size="3.8 MB" format="mp4" />
+                    <div class="space-y-2">
+                        <UploadEntry title="Test" size="3.8 MB" format="mp4" />
+                        <UploadEntry title="Test" :progress="78" />
+                        <UploadEntry title="Test" error="Uploading failed, please check your internet" />
+                    </div>
                 </div>
             </div>
         </NuxtLayout>