68e3e38d75
- S-1 Upload: hidden file input, FileReader reads as text, calls SFTP.WriteFile, refreshes listing - S-2 Download: calls SFTP.ReadFile, creates Blob, triggers browser download via temporary <a> element - S-3 Delete: confirm() dialog, calls SFTP.Delete, clears selection, refreshes listing - S-4 New Folder: prompt() dialog, calls SFTP.Mkdir with full path, refreshes listing - S-5 Transfer Progress: new useTransfers composable (module-level singleton) tracks active transfers; TransferProgress consumes it directly — no prop threading required - Added single-click selection state to file entries; download/delete buttons dim when no valid selection exists Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
63 lines
2.3 KiB
Vue
63 lines
2.3 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";
|
|
import { useTransfers } from "@/composables/useTransfers";
|
|
|
|
const expanded = ref(false);
|
|
|
|
// Auto-expand when transfers become active, collapse when all are gone
|
|
const { transfers } = useTransfers();
|
|
</script>
|