JokinandClaude Fable 5
e4f7ca86f7
- Built-in editor (default): large modal with monospace textarea, Cmd+S save, dirty guard; reads/writes through the provider streams so it works on local and remote files identically (2MB cap with a friendly error) - External editor: remote files download to appDataDir/edits/<id>, open via macOS `open -a`, the temp DIR is watched (survives atomic rename-saves) and every save enqueues a normal upload job (progress/errors in the transfer list); watchers + temp dirs are cleaned when the session disconnects - Editor setting: Built-in | Custom with a NATIVE app picker (electrobun openFileDialog, /Applications, .app filter) and reset-to-default - Leftover temp files from a crash prompt for cleanup at boot - F4, toolbar button (mynaFileText), and File > Edit File (Cmd+E) menu entry - README: feature notes + Portability notes (open/start/xdg-open seam documented in code and README per user request) Verified headless against the box: sftp read/write roundtrip incl. UTF-8, size cap, watch->save->auto-upload->remote-updated, session cleanup, orphan listing and clearing. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
223 lines
8.5 KiB
HTML
223 lines
8.5 KiB
HTML
<!-- session strip -->
|
|
<div class="relative flex items-center gap-1.5 border-b border-border px-2 py-1">
|
|
<button
|
|
(click)="menuOpen.set(!menuOpen())"
|
|
class="flex min-w-0 items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium hover:bg-accent"
|
|
title="Choose what this panel shows"
|
|
>
|
|
@if (panel().connecting()) {
|
|
<ng-icon name="mynaSpinner" class="shrink-0 animate-spin text-primary" size="0.9rem" />
|
|
} @else {
|
|
<ng-icon
|
|
[name]="isRemote() ? 'mynaServers' : 'mynaHardDrive'"
|
|
[class]="isRemote() ? 'shrink-0 text-primary' : 'shrink-0 text-muted-foreground'"
|
|
size="0.9rem"
|
|
/>
|
|
}
|
|
<span class="truncate">{{ panel().title() }}</span>
|
|
<ng-icon name="mynaChevronDown" class="shrink-0 text-muted-foreground" size="0.8rem" />
|
|
</button>
|
|
@if (isRemote()) {
|
|
<button
|
|
(click)="disconnect()"
|
|
title="Disconnect (back to local)"
|
|
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
>
|
|
<ng-icon name="mynaLogout" size="0.85rem" />
|
|
</button>
|
|
}
|
|
|
|
<div class="flex-1"></div>
|
|
|
|
<!-- panel actions: act on THIS panel -->
|
|
<button
|
|
(click)="copyToOther()"
|
|
[title]="side() === 'left' ? 'Copy to right panel (F5)' : 'Copy to left panel (F5)'"
|
|
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-primary"
|
|
>
|
|
<ng-icon [name]="copyIcon()" size="0.95rem" />
|
|
</button>
|
|
<button
|
|
(click)="run('edit')"
|
|
title="Edit file (F4)"
|
|
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
>
|
|
<ng-icon name="mynaFileText" size="0.9rem" />
|
|
</button>
|
|
<button
|
|
(click)="run('rename')"
|
|
title="Rename (F2)"
|
|
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
>
|
|
<ng-icon name="mynaEdit" size="0.9rem" />
|
|
</button>
|
|
<button
|
|
(click)="run('mkdir')"
|
|
title="New folder (F7)"
|
|
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
>
|
|
<ng-icon name="mynaFolderPlus" size="0.9rem" />
|
|
</button>
|
|
<button
|
|
(click)="run('createFile')"
|
|
title="New file"
|
|
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
>
|
|
<ng-icon name="mynaFilePlus" size="0.9rem" />
|
|
</button>
|
|
<button
|
|
(click)="run('chmod')"
|
|
title="Permissions"
|
|
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
>
|
|
<ng-icon name="mynaLock" size="0.9rem" />
|
|
</button>
|
|
<button
|
|
(click)="run('delete')"
|
|
title="Delete (F8 / Del)"
|
|
class="grid size-6 shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-destructive"
|
|
>
|
|
<ng-icon name="mynaTrash" size="0.9rem" />
|
|
</button>
|
|
|
|
@if (menuOpen()) {
|
|
<div class="fixed inset-0 z-20" (click)="menuOpen.set(false)"></div>
|
|
<div
|
|
class="absolute top-full left-2 z-30 mt-1 max-h-80 w-64 overflow-y-auto rounded-lg border border-border bg-card py-1 text-card-foreground shadow-xl"
|
|
>
|
|
<button
|
|
(click)="pickLocal()"
|
|
class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
|
|
>
|
|
<ng-icon name="mynaHardDrive" size="0.9rem" class="shrink-0 text-muted-foreground" />
|
|
<span class="flex-1">Local</span>
|
|
@if (!isRemote()) {
|
|
<ng-icon name="mynaCheck" size="0.85rem" class="shrink-0 text-primary" />
|
|
}
|
|
</button>
|
|
|
|
@if (connections.grouped().root.length || connections.grouped().folders.length) {
|
|
<div class="my-1 border-t border-border"></div>
|
|
}
|
|
@for (connection of connections.grouped().root; track connection.id) {
|
|
<button
|
|
(click)="pickConnection(connection)"
|
|
class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
|
|
>
|
|
<ng-icon name="mynaServers" size="0.9rem" class="shrink-0 text-muted-foreground" />
|
|
<span class="flex-1 truncate">{{ connection.name }}</span>
|
|
</button>
|
|
}
|
|
@for (group of connections.grouped().folders; track group.folder.id) {
|
|
<div class="px-3 pt-1.5 pb-0.5 text-[10px] font-medium tracking-wide text-muted-foreground uppercase">
|
|
{{ group.folder.name }}
|
|
</div>
|
|
@for (connection of group.connections; track connection.id) {
|
|
<button
|
|
(click)="pickConnection(connection)"
|
|
class="flex w-full items-center gap-2 py-1.5 pr-3 pl-5 text-left text-xs hover:bg-accent"
|
|
>
|
|
<ng-icon name="mynaServers" size="0.9rem" class="shrink-0 text-muted-foreground" />
|
|
<span class="flex-1 truncate">{{ connection.name }}</span>
|
|
</button>
|
|
}
|
|
}
|
|
|
|
<div class="my-1 border-t border-border"></div>
|
|
<button
|
|
(click)="openManager()"
|
|
class="flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs hover:bg-accent"
|
|
>
|
|
<ng-icon name="mynaCog" size="0.9rem" class="shrink-0 text-muted-foreground" />
|
|
Manage connections…
|
|
</button>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- path bar -->
|
|
<div class="flex items-center gap-1 border-b border-border px-2 py-1.5">
|
|
<button
|
|
(click)="panel().up()"
|
|
title="Parent directory (Backspace)"
|
|
class="grid size-(--path-ctl-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
>
|
|
<ng-icon name="mynaArrowUp" size="1rem" />
|
|
</button>
|
|
<input
|
|
[value]="pathDraft()"
|
|
(input)="pathDraft.set($any($event.target).value)"
|
|
(keydown.enter)="commitPath()"
|
|
(keydown.escape)="resetPath()"
|
|
(keydown)="$event.stopPropagation()"
|
|
spellcheck="false"
|
|
class="h-(--path-ctl-h) min-w-0 flex-1 rounded-md border border-input bg-transparent px-2 font-mono text-(length:--path-font) outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
<button
|
|
(click)="panel().refresh()"
|
|
title="Refresh"
|
|
class="grid size-(--path-ctl-h) shrink-0 place-items-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
|
|
>
|
|
@if (panel().loading()) {
|
|
<ng-icon name="mynaSpinner" size="1rem" class="animate-spin" />
|
|
} @else {
|
|
<ng-icon name="mynaRefresh" size="1rem" />
|
|
}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- column headers -->
|
|
<div
|
|
class="grid grid-cols-[minmax(0,1fr)_5.5rem_8.5rem] border-b border-border text-[11px] font-medium text-muted-foreground"
|
|
>
|
|
<button class="px-2 py-1 text-left hover:text-foreground" (click)="panel().toggleSort('name')">
|
|
Name {{ sortIndicator('name') }}
|
|
</button>
|
|
<button class="px-2 py-1 text-right hover:text-foreground" (click)="panel().toggleSort('size')">
|
|
Size {{ sortIndicator('size') }}
|
|
</button>
|
|
<button class="px-2 py-1 text-left hover:text-foreground" (click)="panel().toggleSort('mtime')">
|
|
Modified {{ sortIndicator('mtime') }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- file list -->
|
|
<div
|
|
#list
|
|
tabindex="0"
|
|
(keydown)="onKeydown($event)"
|
|
(mousedown)="activate()"
|
|
class="flex-1 overflow-y-auto outline-none"
|
|
>
|
|
@for (entry of panel().sorted(); track entry.name; let i = $index) {
|
|
<div
|
|
[attr.data-index]="i"
|
|
(click)="rowClick($event, i)"
|
|
(dblclick)="openAt(i)"
|
|
class="grid h-(--row-h) grid-cols-[minmax(0,1fr)_5.5rem_8.5rem] items-center text-(length:--list-font)"
|
|
[class.bg-accent]="i === panel().cursor() && !isSelected(entry)"
|
|
[class.bg-primary/15]="isSelected(entry)"
|
|
[class.ring-1]="i === panel().cursor() && isActive()"
|
|
[class.ring-inset]="i === panel().cursor() && isActive()"
|
|
[class.ring-ring]="i === panel().cursor() && isActive()"
|
|
>
|
|
<div class="flex min-w-0 items-center gap-1.5 px-2">
|
|
<ng-icon
|
|
[name]="iconFor(entry)"
|
|
size="0.95rem"
|
|
[class]="entry.type === 'dir' ? 'shrink-0 text-primary' : 'shrink-0 text-muted-foreground'"
|
|
/>
|
|
<span class="truncate" [class.italic]="entry.type === 'symlink'">{{ entry.name }}</span>
|
|
</div>
|
|
<span class="px-2 text-right font-mono text-(length:--list-meta-font) tabular-nums text-muted-foreground">
|
|
{{ entry.type === 'dir' ? '—' : formatSize(entry.size) }}
|
|
</span>
|
|
<span class="px-2 font-mono text-(length:--list-meta-font) tabular-nums text-muted-foreground">
|
|
{{ formatDate(entry.mtime) }}
|
|
</span>
|
|
</div>
|
|
} @empty {
|
|
<div class="p-6 text-center text-xs text-muted-foreground">Empty directory</div>
|
|
}
|
|
</div>
|