wraith/frontend/src/components/sftp/FileTree.vue

<template>
  <div class="flex flex-col h-full text-xs">
    <!-- Path bar -->
    <div class="flex items-center gap-1 px-3 py-1.5 border-b border-[var(--wraith-border)] bg-[var(--wraith-bg-tertiary)]">
      <button
        class="text-[var(--wraith-text-muted)] hover:text-[var(--wraith-text-primary)] transition-colors cursor-pointer shrink-0"
        title="Go up"
        @click="goUp"
      >
        <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
          <path d="M3.22 9.78a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1-1.06 1.06L8 6.06 4.28 9.78a.75.75 0 0 1-1.06 0z" />
        </svg>
      </button>
      <span class="text-[var(--wraith-text-secondary)] truncate font-mono text-[10px]">
        {{ currentPath }}
      </span>
    </div>

    <!-- Toolbar -->
    <div class="flex items-center gap-1 px-2 py-1 border-b border-[var(--wraith-border)]">
      <button
        class="p-1 text-[var(--wraith-text-muted)] hover:text-[var(--wraith-accent-blue)] transition-colors cursor-pointer rounded hover:bg-[var(--wraith-bg-tertiary)]"
        title="Upload file"
        @click="handleUpload"
      >
        <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
          <path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14H2.75z" />
          <path d="M11.78 4.72a.75.75 0 0 1-1.06 1.06L8.75 3.81V9.5a.75.75 0 0 1-1.5 0V3.81L5.28 5.78a.75.75 0 0 1-1.06-1.06l3.25-3.25a.75.75 0 0 1 1.06 0l3.25 3.25z" />
        </svg>
      </button>
      <button
        class="p-1 transition-colors cursor-pointer rounded hover:bg-[var(--wraith-bg-tertiary)]"
        :class="selectedEntry && !selectedEntry.isDir ? 'text-[var(--wraith-text-muted)] hover:text-[var(--wraith-accent-blue)]' : 'text-[var(--wraith-text-muted)] opacity-40 cursor-not-allowed'"
        title="Download file"
        @click="handleDownload"
      >
        <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
          <path d="M2.75 14A1.75 1.75 0 0 1 1 12.25v-2.5a.75.75 0 0 1 1.5 0v2.5c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25v-2.5a.75.75 0 0 1 1.5 0v2.5A1.75 1.75 0 0 1 13.25 14H2.75z" />
          <path d="M7.25 7.689V2a.75.75 0 0 1 1.5 0v5.689l1.97-1.969a.749.749 0 1 1 1.06 1.06l-3.25 3.25a.749.749 0 0 1-1.06 0L4.22 6.78a.749.749 0 1 1 1.06-1.06l1.97 1.969z" />
        </svg>
      </button>
      <button
        class="p-1 text-[var(--wraith-text-muted)] hover:text-[var(--wraith-accent-yellow)] transition-colors cursor-pointer rounded hover:bg-[var(--wraith-bg-tertiary)]"
        title="New folder"
        @click="handleNewFolder"
      >
        <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
          <path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75zM8.75 8v1.75a.75.75 0 0 1-1.5 0V8H5.5a.75.75 0 0 1 0-1.5h1.75V4.75a.75.75 0 0 1 1.5 0V6.5h1.75a.75.75 0 0 1 0 1.5H8.75z" />
        </svg>
      </button>
      <button
        class="p-1 text-[var(--wraith-text-muted)] hover:text-[var(--wraith-text-primary)] transition-colors cursor-pointer rounded hover:bg-[var(--wraith-bg-tertiary)]"
        title="Refresh"
        @click="refresh"
      >
        <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
          <path d="M8 2.5a5.487 5.487 0 0 0-4.131 1.869l1.204 1.204A.25.25 0 0 1 4.896 6H1.25A.25.25 0 0 1 1 5.75V2.104a.25.25 0 0 1 .427-.177l1.38 1.38A7.001 7.001 0 0 1 14.95 7.16a.75.75 0 0 1-1.49.178A5.501 5.501 0 0 0 8 2.5zM1.705 8.005a.75.75 0 0 1 .834.656 5.501 5.501 0 0 0 9.592 2.97l-1.204-1.204a.25.25 0 0 1 .177-.427h3.646a.25.25 0 0 1 .25.25v3.646a.25.25 0 0 1-.427.177l-1.38-1.38A7.001 7.001 0 0 1 1.05 8.84a.75.75 0 0 1 .656-.834z" />
        </svg>
      </button>
      <button
        class="p-1 transition-colors cursor-pointer rounded hover:bg-[var(--wraith-bg-tertiary)]"
        :class="selectedEntry ? 'text-[var(--wraith-text-muted)] hover:text-[var(--wraith-accent-red)]' : 'text-[var(--wraith-text-muted)] opacity-40 cursor-not-allowed'"
        title="Delete"
        @click="handleDelete"
      >
        <svg class="w-3.5 h-3.5" viewBox="0 0 16 16" fill="currentColor">
          <path d="M11 1.75V3h2.25a.75.75 0 0 1 0 1.5H2.75a.75.75 0 0 1 0-1.5H5V1.75C5 .784 5.784 0 6.75 0h2.5C10.216 0 11 .784 11 1.75zM6.5 1.75v1.25h3V1.75a.25.25 0 0 0-.25-.25h-2.5a.25.25 0 0 0-.25.25zM4.997 6.178a.75.75 0 1 0-1.493.144l.685 7.107A2.25 2.25 0 0 0 6.427 15.5h3.146a2.25 2.25 0 0 0 2.238-2.071l.685-7.107a.75.75 0 1 0-1.493-.144l-.685 7.107a.75.75 0 0 1-.746.715H6.427a.75.75 0 0 1-.746-.715l-.684-7.107z" />
        </svg>
      </button>
    </div>

    <!-- Hidden file input for upload -->
    <input
      ref="fileInputRef"
      type="file"
      class="hidden"
      @change="handleFileSelected"
    />

    <!-- File list -->
    <div class="flex-1 overflow-y-auto">
      <!-- Loading -->
      <div v-if="isLoading" class="flex items-center justify-center py-8">
        <span class="text-[var(--wraith-text-muted)]">Loading...</span>
      </div>

      <!-- Empty -->
      <div v-else-if="entries.length === 0" class="flex items-center justify-center py-8">
        <span class="text-[var(--wraith-text-muted)]">Empty directory</span>
      </div>

      <!-- Entries -->
      <template v-else>
        <button
          v-for="entry in entries"
          :key="entry.path"
          class="w-full flex items-center gap-2 px-3 py-1.5 hover:bg-[var(--wraith-bg-tertiary)] transition-colors cursor-pointer group"
          :class="{ 'bg-[var(--wraith-bg-tertiary)] ring-1 ring-inset ring-[var(--wraith-accent-blue)]': selectedEntry?.path === entry.path }"
          @click="selectedEntry = entry"
          @dblclick="handleEntryDblClick(entry)"
        >
          <!-- Icon -->
          <svg
            v-if="entry.isDir"
            class="w-3.5 h-3.5 text-[var(--wraith-accent-yellow)] shrink-0"
            viewBox="0 0 16 16"
            fill="currentColor"
          >
            <path d="M1.75 1A1.75 1.75 0 0 0 0 2.75v10.5C0 14.216.784 15 1.75 15h12.5A1.75 1.75 0 0 0 16 13.25v-8.5A1.75 1.75 0 0 0 14.25 3H7.5a.25.25 0 0 1-.2-.1l-.9-1.2C6.07 1.26 5.55 1 5 1H1.75z" />
          </svg>
          <svg
            v-else
            class="w-3.5 h-3.5 text-[var(--wraith-text-muted)] shrink-0"
            viewBox="0 0 16 16"
            fill="currentColor"
          >
            <path d="M3.75 1.5a.25.25 0 0 0-.25.25v12.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25V6H9.75A1.75 1.75 0 0 1 8 4.25V1.5H3.75zm5.75.56v2.19c0 .138.112.25.25.25h2.19L9.5 2.06zM2 1.75C2 .784 2.784 0 3.75 0h5.086c.464 0 .909.184 1.237.513l3.414 3.414c.329.328.513.773.513 1.237v8.086A1.75 1.75 0 0 1 12.25 15h-8.5A1.75 1.75 0 0 1 2 13.25V1.75z" />
          </svg>

          <!-- Name -->
          <span class="text-[var(--wraith-text-primary)] truncate">{{ entry.name }}</span>

          <!-- Size (files only) -->
          <span
            v-if="!entry.isDir"
            class="ml-auto text-[var(--wraith-text-muted)] text-[10px] shrink-0"
          >
            {{ humanizeSize(entry.size) }}
          </span>

          <!-- Modified date -->
          <span class="text-[var(--wraith-text-muted)] text-[10px] shrink-0 w-[68px] text-right">
            {{ entry.modTime }}
          </span>
        </button>
      </template>
    </div>

    <!-- Follow terminal toggle -->
    <div class="flex items-center gap-2 px-3 py-1.5 border-t border-[var(--wraith-border)]">
      <label class="flex items-center gap-1.5 cursor-pointer text-[var(--wraith-text-muted)] hover:text-[var(--wraith-text-secondary)] transition-colors">
        <input
          v-model="followTerminal"
          type="checkbox"
          class="w-3 h-3 accent-[var(--wraith-accent-blue)] cursor-pointer"
        />
        <span>Follow terminal folder</span>
      </label>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { Call } from "@wailsio/runtime";
import { useSftp, type FileEntry } from "@/composables/useSftp";
import { useTransfers } from "@/composables/useTransfers";

const SFTP = "github.com/vstockwell/wraith/internal/sftp.SFTPService";

const props = defineProps<{
  sessionId: string;
}>();

const emit = defineEmits<{
  openFile: [entry: FileEntry];
}>();

const { currentPath, entries, isLoading, followTerminal, navigateTo, goUp, refresh } = useSftp(props.sessionId);
const { addTransfer, completeTransfer, failTransfer } = useTransfers();

/** Currently selected entry (single-click to select, double-click to open/navigate). */
const selectedEntry = ref<FileEntry | null>(null);

/** Hidden file input element used for the upload flow. */
const fileInputRef = ref<HTMLInputElement | null>(null);

function handleEntryDblClick(entry: FileEntry): void {
  if (entry.isDir) {
    selectedEntry.value = null;
    navigateTo(entry.path);
  } else {
    emit("openFile", entry);
  }
}

// ── S-2: Download ────────────────────────────────────────────────────────────

async function handleDownload(): Promise<void> {
  if (!selectedEntry.value || selectedEntry.value.isDir) return;

  const entry = selectedEntry.value;
  const transferId = addTransfer(entry.name, "download");

  try {
    const content = await Call.ByName(`${SFTP}.ReadFile`, props.sessionId, entry.path) as string;
    const blob = new Blob([content], { type: "application/octet-stream" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = entry.name;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
    completeTransfer(transferId);
  } catch (err) {
    console.error("SFTP download error:", err);
    failTransfer(transferId);
  }
}

// ── S-3: Delete ──────────────────────────────────────────────────────────────

async function handleDelete(): Promise<void> {
  if (!selectedEntry.value) return;

  const entry = selectedEntry.value;
  if (!confirm(`Delete "${entry.name}"?`)) return;

  try {
    await Call.ByName(`${SFTP}.Delete`, props.sessionId, entry.path);
    selectedEntry.value = null;
    await refresh();
  } catch (err) {
    console.error("SFTP delete error:", err);
  }
}

// ── S-4: New Folder ──────────────────────────────────────────────────────────

async function handleNewFolder(): Promise<void> {
  const folderName = prompt("New folder name:");
  if (!folderName || !folderName.trim()) return;

  const trimmed = folderName.trim();
  const fullPath = currentPath.value.replace(/\/$/, "") + "/" + trimmed;

  try {
    await Call.ByName(`${SFTP}.Mkdir`, props.sessionId, fullPath);
    await refresh();
  } catch (err) {
    console.error("SFTP mkdir error:", err);
  }
}

// ── S-1: Upload ──────────────────────────────────────────────────────────────

function handleUpload(): void {
  fileInputRef.value?.click();
}

function handleFileSelected(event: Event): void {
  const input = event.target as HTMLInputElement;
  const file = input.files?.[0];
  if (!file) return;

  // Reset input so re-selecting the same file triggers change again
  input.value = "";

  const transferId = addTransfer(file.name, "upload");
  const reader = new FileReader();

  reader.onload = async () => {
    const content = reader.result as string;
    const remotePath = currentPath.value.replace(/\/$/, "") + "/" + file.name;

    try {
      await Call.ByName(`${SFTP}.WriteFile`, props.sessionId, remotePath, content);
      completeTransfer(transferId);
      await refresh();
    } catch (err) {
      console.error("SFTP upload error:", err);
      failTransfer(transferId);
    }
  };

  reader.onerror = () => {
    console.error("FileReader error reading upload file");
    failTransfer(transferId);
  };

  reader.readAsText(file);
}

function humanizeSize(bytes: number): string {
  if (bytes === 0) return "0 B";
  const units = ["B", "KB", "MB", "GB"];
  const i = Math.floor(Math.log(bytes) / Math.log(1024));
  const size = (bytes / Math.pow(1024, i)).toFixed(i > 0 ? 1 : 0);
  return `${size} ${units[i]}`;
}
</script>