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

feat: Sprint 4 — SFTP dual-pane with per-type icons, breadcrumb, drop-zone, create/delete, toast

Browse Source
This commit is contained in:
swanadiva
2026-07-07 13:35:01 +07:00
parent c5ac07e27f
commit 941a67b6ea
8 changed files with 364 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/backend/views/sftp_pane.html
+51
View File
@@ -0,0 +1,51 @@
{{define "sftp_pane"}}
<div class="file-table" id="{{.Pane}}-pane-content" x-data="{ pane: '{{.Pane}}' }">
{{range .Files}}
<div class="file-table-row group transition-colors">
<div class="flex items-center gap-3">
<span class="w-4 h-4 shrink-0 flex items-center justify-center
{{if eq .Type "folder"}}text-yellow-500{{else if eq .Type "code"}}text-purple-500{{else if eq .Type "image"}}text-secondary{{else if eq .Type "lock"}}text-red-400{{else}}text-on-surface-variant/50{{end}}">
{{if eq .Type "folder"}}
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
{{else if eq .Type "code"}}
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
{{else if eq .Type "image"}}
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
{{else if eq .Type "lock"}}
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg>
{{else}}
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"/></svg>
{{end}}
</span>
<span class="text-sm text-on-surface truncate">{{.Name}}</span>
</div>
<span class="text-xs text-on-surface-variant text-right tabular-nums w-20 shrink-0">{{.Size}}</span>
<span class="text-xs text-on-surface-variant w-24 shrink-0">{{.Modified}}</span>
<span class="text-xs text-on-surface-variant font-mono w-24 shrink-0 hidden md:inline">{{.Permissions}}</span>
<div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
{{if ne .Type "folder"}}
<button @click="document.querySelector('#sftp-page').__x.$data.toast = 'Downloading {{.Name}}...'; document.querySelector('#sftp-page').__x.$data.showToast = true"
class="p-1 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors" title="Download">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
</button>
<button @click="document.querySelector('#sftp-page').__x.$data.toast = 'Uploading {{.Name}}...'; document.querySelector('#sftp-page').__x.$data.showToast = true"
class="p-1 rounded-lg hover:bg-primary/10 text-on-surface-variant hover:text-primary transition-colors" title="Upload">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5-5m0 0l5 5m-5-5v12"/></svg>
</button>
{{end}}
<button hx-delete="/sftp/rm?pane={{$.Pane}}&name={{.Name}}" hx-target="#{{$.Pane}}-pane-content" hx-swap="outerHTML"
hx-confirm="Delete {{.Name}}?"
class="p-1 rounded-lg hover:bg-red-50 text-on-surface-variant hover:text-red-500 transition-colors" title="Delete">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
</button>
</div>
</div>
{{end}}
{{if eq (len .Files) 0}}
<div class="text-center py-8 text-on-surface-variant">
<p class="text-sm">This directory is empty</p>
</div>
{{end}}
</div>
{{end}}