swanadiva/HostKeeper
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add transfer panel to dashboard + remove PERBAIKANUI.md

Browse Source 
- Add Background Transfers section with mock download/upload rows
- Progress bars with green glow shadow, source/destination layout
- Empty state when no transfers active
- Delete PERBAIKANUI.md (all UI tasks complete)
This commit is contained in:
swanadiva
2026-07-09 18:27:47 +07:00
parent 56eaf57649
commit 7accb86203
4 changed files with 155 additions and 363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/backend/views/index.html
+59
View File
@@ -105,6 +105,65 @@
{{template "host_list" .}}
</div>
</div>
<!-- Transfer Activity Panel -->
<div class="space-y-4 mt-8">
<div class="flex items-center gap-4">
<h3 class="text-base font-bold text-on-surface tracking-tight shrink-0">Background Transfers</h3>
<div class="flex-1 h-px bg-outline-variant/30"></div>
</div>
<div class="bg-white/50 backdrop-blur-sm border border-outline-variant rounded-2xl overflow-hidden shadow-sm">
<div class="p-4 border-b border-outline-variant flex items-center justify-between bg-surface-container-low">
<div class="flex gap-12 text-xs font-bold text-on-surface-variant uppercase tracking-tight">
<span>Source &amp; File</span>
<span>Destination</span>
</div>
<span class="text-xs font-bold text-on-surface-variant uppercase tracking-tight">Progress</span>
</div>
<div class="divide-y divide-outline-variant/30 bg-white">
{{range .Transfers}}
<div class="p-4 flex flex-col sm:flex-row sm:items-center justify-between gap-4 hover:bg-primary/5 transition-colors">
<div class="flex items-center gap-4 min-w-0 flex-1">
<div class="p-2 rounded-lg {{if eq .Type "download"}}bg-tertiary/10 text-tertiary{{else}}bg-primary/10 text-primary{{end}}">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
<div class="min-w-0 flex-1 grid grid-cols-1 sm:grid-cols-2 gap-2">
<div>
<p class="text-sm font-bold truncate text-on-surface">{{.FileName}}</p>
<span class="text-[10px] font-mono text-outline block">{{.Source}}</span>
</div>
<div class="flex items-center gap-1 text-on-surface-variant text-xs">
<svg class="w-4 h-4 text-outline shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/></svg>
<span class="truncate">{{.Destination}}</span>
</div>
</div>
</div>
<div class="w-full sm:w-48 shrink-0">
<div class="flex justify-between items-center mb-1">
<span class="text-[10px] font-bold text-secondary">{{.Progress}}%</span>
<span class="text-[10px] text-outline font-mono">{{.Speed}}</span>
</div>
<div class="h-1.5 w-full bg-surface-container-high rounded-full overflow-hidden">
<div class="h-full bg-secondary rounded-full transition-all duration-500 shadow-[0_0_8px_rgba(0,110,47,0.3)]"
style="width: {{.Progress}}%"></div>
</div>
</div>
</div>
{{end}}
{{if not .Transfers}}
<div class="p-8 text-center text-on-surface-variant">
<svg class="w-10 h-10 mx-auto mb-2 text-outline/30" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4"/></svg>
<p class="text-sm font-medium">No active transfers</p>
</div>
{{end}}
</div>
</div>
</div>
{{template "host_modal" .}}
</main>
</div>