8a096d7f7b
Some checks failed
Build & Sign Wraith / Build Windows + Sign (push) Has been cancelled
Go + Wails v3 + Vue 3 + SQLite + FreeRDP3 (purego) 183 tests, 76 source files, 9,910 lines of code Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
73 lines
2.4 KiB
Vue
73 lines
2.4 KiB
Vue
<template>
|
|
<div class="border-t border-[var(--wraith-border)]">
|
|
<!-- Header -->
|
|
<button
|
|
class="w-full flex items-center justify-between px-3 py-1.5 text-xs text-[var(--wraith-text-muted)] hover:bg-[var(--wraith-bg-tertiary)] transition-colors cursor-pointer"
|
|
@click="expanded = !expanded"
|
|
>
|
|
<span>Transfers ({{ transfers.length }})</span>
|
|
<svg
|
|
class="w-3 h-3 transition-transform"
|
|
:class="{ 'rotate-180': expanded }"
|
|
viewBox="0 0 16 16"
|
|
fill="currentColor"
|
|
>
|
|
<path d="M12.78 5.22a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 6.28a.75.75 0 0 1 1.06-1.06L8 8.94l3.72-3.72a.75.75 0 0 1 1.06 0z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Transfer list -->
|
|
<div v-if="expanded && transfers.length > 0" class="px-3 pb-2">
|
|
<div
|
|
v-for="transfer in transfers"
|
|
:key="transfer.id"
|
|
class="flex flex-col gap-1 py-1.5"
|
|
>
|
|
<div class="flex items-center justify-between text-xs">
|
|
<span class="text-[var(--wraith-text-secondary)] truncate">
|
|
{{ transfer.fileName }}
|
|
</span>
|
|
<span class="text-[var(--wraith-text-muted)] shrink-0 ml-2">
|
|
{{ transfer.speed }}
|
|
</span>
|
|
</div>
|
|
<div class="w-full h-1.5 bg-[var(--wraith-bg-tertiary)] rounded-full overflow-hidden">
|
|
<div
|
|
class="h-full rounded-full transition-all duration-300"
|
|
:class="transfer.direction === 'upload' ? 'bg-[var(--wraith-accent-blue)]' : 'bg-[var(--wraith-accent-green)]'"
|
|
:style="{ width: transfer.percentage + '%' }"
|
|
/>
|
|
</div>
|
|
<div class="text-[10px] text-[var(--wraith-text-muted)]">
|
|
{{ transfer.percentage }}% - {{ transfer.direction === 'upload' ? 'Uploading' : 'Downloading' }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Empty state -->
|
|
<div v-if="expanded && transfers.length === 0" class="px-3 py-2 text-xs text-[var(--wraith-text-muted)]">
|
|
No active transfers
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
|
|
interface Transfer {
|
|
id: string;
|
|
fileName: string;
|
|
percentage: number;
|
|
speed: string;
|
|
direction: "upload" | "download";
|
|
}
|
|
|
|
const expanded = ref(false);
|
|
|
|
// Placeholder mock transfers — empty by default
|
|
const transfers = ref<Transfer[]>([]);
|
|
|
|
// Exports so parent can push mock transfers for testing if needed
|
|
defineExpose({ transfers });
|
|
</script>
|