44 lines
1.4 KiB
Vue
44 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
interface Transfer {
|
|
id: string
|
|
path: string
|
|
total: number
|
|
bytes: number
|
|
direction: 'download' | 'upload'
|
|
}
|
|
|
|
defineProps<{
|
|
transfers: Transfer[]
|
|
}>()
|
|
|
|
function formatSize(bytes: number): string {
|
|
if (bytes < 1024) return `${bytes} B`
|
|
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
|
return `${(bytes / 1024 / 1024).toFixed(1)} MB`
|
|
}
|
|
|
|
function progressPercent(transfer: Transfer): number {
|
|
if (!transfer.total) return 0
|
|
return Math.round((transfer.bytes / transfer.total) * 100)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="transfers.length" class="bg-gray-900 border-t border-gray-800 px-3 py-2 shrink-0">
|
|
<div v-for="transfer in transfers" :key="transfer.id" class="flex items-center gap-3 text-xs mb-1">
|
|
<span class="text-gray-500">{{ transfer.direction === 'download' ? '↓' : '↑' }}</span>
|
|
<span class="text-gray-400 truncate max-w-[200px] font-mono">{{ transfer.path.split('/').pop() }}</span>
|
|
<div class="flex-1 bg-gray-800 rounded-full h-1.5">
|
|
<div
|
|
class="bg-wraith-500 h-1.5 rounded-full transition-all"
|
|
:style="{ width: progressPercent(transfer) + '%' }"
|
|
/>
|
|
</div>
|
|
<span class="text-gray-500 shrink-0">
|
|
{{ formatSize(transfer.bytes) }} / {{ formatSize(transfer.total) }}
|
|
</span>
|
|
<span class="text-gray-600 shrink-0">{{ progressPercent(transfer) }}%</span>
|
|
</div>
|
|
</div>
|
|
</template>
|