Use browser download in missing model dialog (#1362)

* Remove custom backend download logic

* Add download hooks

* Download button

* Use browser download

* Update test

src/components/common/DeviceInfo.vue

@@ -9,7 +9,7 @@
 
 <script setup lang="ts">
 import type { DeviceStats } from '@/types/apiTypes'
-import { formatMemory } from '@/utils/formatUtil'
+import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   device: DeviceStats
@@ -30,7 +30,7 @@ const formatValue = (value: any, field: string) => {
       field
     )
   ) {
-    return formatMemory(value)
+    return formatSize(value)
   }
   return value
 }

src/components/common/FileDownload.vue

@@ -0,0 +1,44 @@
+<!-- A file download button with a label and a size hint -->
+<template>
+  <div class="flex flex-row items-center gap-2">
+    <div class="file-info">
+      <div class="file-details">
+        <span class="file-type" :title="hint">{{ label }}</span>
+      </div>
+      <div v-if="props.error" class="file-error">
+        {{ props.error }}
+      </div>
+    </div>
+    <div class="file-action">
+      <Button
+        class="file-action-button"
+        :label="$t('download') + ' (' + fileSize + ')'"
+        size="small"
+        outlined
+        :disabled="props.error"
+        @click="download.triggerBrowserDownload"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDownload } from '@/hooks/downloadHooks'
+import Button from 'primevue/button'
+import { computed } from 'vue'
+import { formatSize } from '@/utils/formatUtil'
+
+const props = defineProps<{
+  url: string
+  hint?: string
+  label?: string
+  error?: string
+}>()
+
+const label = computed(() => props.label || props.url.split('/').pop())
+const hint = computed(() => props.hint || props.url)
+const download = useDownload(props.url)
+const fileSize = computed(() =>
+  download.fileSize.value ? formatSize(download.fileSize.value) : '?'
+)
+</script>

src/components/common/SystemStatsPanel.vue

@@ -35,7 +35,7 @@ import TabPanel from 'primevue/tabpanel'
 import Divider from 'primevue/divider'
 import type { SystemStats } from '@/types/apiTypes'
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
-import { formatMemory } from '@/utils/formatUtil'
+import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   stats: SystemStats
@@ -58,7 +58,7 @@ const systemColumns = [
 
 const formatValue = (value: any, field: string) => {
   if (['ram_total', 'ram_free'].includes(field)) {
-    return formatMemory(value)
+    return formatSize(value)
   }
   return value
 }