fix(front): update CircularProgress and FileIcon components to handle default values and null checks, and improve styling in FileUploadProgressView

front/components/CircularProgress.vue

@@ -1,19 +1,21 @@
 <script lang="ts" setup>
 import { VisSingleContainer, VisDonut } from '@unovis/vue'
-import { withDefaults, defineProps } from 'vue'
 
-const props = withDefaults(defineProps<{
-    value?: number
-    size?: number
-    color?: string
-}>(), {
-    value: 0,
-    size: 40,
-    color: '#06b6d4'
-})
+const props = withDefaults(
+    defineProps<{
+        value?: number
+        size?: number
+        color?: string
+    }>(),
+    {
+        value: 0,
+        size: 40,
+        color: '#06b6d4',
+    }
+)
 const data = computed(() => {
     const progress = Math.min(Math.max(props.value, 0), 100)
-    return [progress, 100 - progress ]
+    return [progress, 100 - progress]
 })
 const getValue = (d: number) => d
 const getColor = (d: number, i: number) => [props?.color, 'transparent'][i]

front/components/FileIcon.vue

@@ -32,7 +32,7 @@ const fileIcon = computed(() => {
     if (baseType === 'audio') {
         return LucideFileAudio
     }
-    if (baseType === 'text' || ['json', 'ld+json', 'html']?.includes(type)) {
+    if (baseType === 'text' || ['json', 'ld+json', 'html']?.includes(type ?? '')) {
         return LucideFileCode
     }
     if (
@@ -44,11 +44,11 @@ const fileIcon = computed(() => {
             'vnd.openxmlformats-officedocument.spreadsheetml.sheet',
             'vnd.ms-powerpoint',
             'vnd.openxmlformats-officedocument.presentationml.presentation',
-        ].includes(type)
+        ].includes(type ?? '')
     ) {
         return LucideFileText
     }
-    if (['zip', 'vnd.rar', 'x-tar', 'gz', 'bz2', 'x-7z-compressed'].includes(type)) {
+    if (['zip', 'vnd.rar', 'x-tar', 'gz', 'bz2', 'x-7z-compressed'].includes(type ?? '')) {
         return LucideFileArchive
     }
     return LucideFile

front/components/Home/File/FileUploadProgressView.vue

@@ -436,7 +436,7 @@ const handleShowSpeedInfo = () => {
                     :class="
                         cx(
                             'grid grid-cols-[2fr_6rem_6rem] md:grid-cols-[2fr_6rem_6rem_4fr] gap-2 py-2 border-b border-black/20 items-center hover:bg-primary/30 px-3 cursor-pointer',
-                            selectedFile === item?.fileId && 'bg-primary text-white hover:!bg-primary'
+                            selectedFile === item?.fileId && 'bg-primary text-white hover:bg-primary!'
                         )
                     "
                     v-for="(item, index) in uploadfiles"