8415c98970
Add useSftp composable with mock directory listings, path navigation, and refresh. FileTree component shows path bar, toolbar (upload, download, new folder, refresh, delete icons), file entries with icons, humanized sizes, and dates. TransferProgress component shows expandable transfer list with progress bars. SidebarToggle now uses v-model to emit tab changes. MainLayout switches between ConnectionTree and FileTree based on sidebar tab, and includes TransferProgress panel. File double-click emits openFile event for the editor integration. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
35 lines
891 B
Vue
35 lines
891 B
Vue
<template>
|
|
<div class="flex border-b border-[var(--wraith-border)]">
|
|
<button
|
|
v-for="tab in tabs"
|
|
:key="tab.id"
|
|
class="flex-1 py-2 text-xs font-medium text-center transition-colors cursor-pointer"
|
|
:class="
|
|
modelValue === tab.id
|
|
? 'text-[var(--wraith-accent-blue)] border-b-2 border-[var(--wraith-accent-blue)]'
|
|
: 'text-[var(--wraith-text-muted)] hover:text-[var(--wraith-text-secondary)]'
|
|
"
|
|
@click="emit('update:modelValue', tab.id)"
|
|
>
|
|
{{ tab.label }}
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
export type SidebarTab = "connections" | "sftp";
|
|
|
|
const tabs = [
|
|
{ id: "connections" as const, label: "Connections" },
|
|
{ id: "sftp" as const, label: "SFTP" },
|
|
];
|
|
|
|
defineProps<{
|
|
modelValue: SidebarTab;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
"update:modelValue": [tab: SidebarTab];
|
|
}>();
|
|
</script>
|