feat(front): add FilePreviewView and FileShareHandle components for improved file preview and sharing options

front/components/FilePreviewView.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import { filesize } from 'filesize'
+const props = defineProps<{
+    value: File
+}>()
+const fileInfo = computed(() => {
+    const [, name, ext] = props?.value?.name?.match(/^(.+)\.(.+)$/) || []
+    return { name, ext }
+})
+</script>
+
+<template>
+    <FileIcon :file="value" />
+    <div class="flex flex-col gap-0.5 items-center">
+        <div class="flex max-w-30 w-full">
+            <div class="truncate">{{ fileInfo?.name }}</div>
+            <div>{{ `.${fileInfo?.ext}` }}</div>
+        </div>
+        <div class="text-xs opacity-50">{{ filesize(value?.size) }}</div>
+    </div>
+</template>