feat(app): add file browser page with tree navigation and preview
Adds /browse route with project listing, recursive file tree with expand/collapse, and file preview sidebar (desktop) / overlay (mobile). Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
cfec1dcc13
commit
e33cb359a0
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<div class="h-full flex flex-col">
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-4 py-3 border-b border-white/5 shrink-0">
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="text-sm font-medium text-white/80 truncate">{{ file.name }}</p>
|
||||
<p class="text-xs text-white/30 truncate mt-0.5">{{ file.path }}</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0 ml-3">
|
||||
<span class="text-xs text-white/25 font-mono">{{ formatSize(file.size) }}</span>
|
||||
<button
|
||||
class="min-w-[32px] min-h-[32px] flex items-center justify-center rounded-md text-white/40 hover:text-white/70 hover:bg-white/10 transition-colors"
|
||||
aria-label="Close preview"
|
||||
@click="$emit('close')"
|
||||
>
|
||||
<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="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="flex-1 overflow-auto">
|
||||
<table class="text-xs font-mono leading-relaxed w-full">
|
||||
<tbody>
|
||||
<tr v-for="(line, i) in lines" :key="i" class="hover:bg-white/3">
|
||||
<td class="text-white/20 text-right pr-4 pl-4 py-0 select-none align-top whitespace-nowrap sticky left-0 bg-[#0a0a0a]">{{ i + 1 }}</td>
|
||||
<td class="text-white/70 pr-4 py-0 whitespace-pre">{{ line }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps<{
|
||||
file: {
|
||||
name: string
|
||||
path: string
|
||||
content: string
|
||||
size: number
|
||||
}
|
||||
}>()
|
||||
|
||||
defineEmits<{ close: [] }>()
|
||||
|
||||
const lines = computed(() => props.file.content.split('\n'))
|
||||
|
||||
function formatSize(bytes: number): string {
|
||||
if (bytes < 1024) return `${bytes} B`
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<div class="space-y-0.5">
|
||||
<div v-for="item in items" :key="item.path">
|
||||
<button
|
||||
class="w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-left transition-colors min-h-[32px]"
|
||||
:class="item.isDirectory
|
||||
? 'hover:bg-white/5 text-white/70 hover:text-white/80'
|
||||
: 'hover:bg-white/8 text-white/60 hover:text-white/80'"
|
||||
@click="handleClick(item)"
|
||||
>
|
||||
<!-- Expand/collapse chevron for directories -->
|
||||
<svg
|
||||
v-if="item.isDirectory"
|
||||
class="w-3 h-3 text-white/30 shrink-0 transition-transform duration-150"
|
||||
:class="{ 'rotate-90': expanded.has(item.path) }"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 20 20"
|
||||
>
|
||||
<path fill-rule="evenodd" d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
<span v-else class="w-3 shrink-0" />
|
||||
|
||||
<!-- File/folder icon -->
|
||||
<svg
|
||||
class="w-4 h-4 shrink-0"
|
||||
:class="iconColor(item)"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="1.5"
|
||||
:d="iconPath(item)"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!-- Name -->
|
||||
<span class="text-sm truncate">{{ item.name }}</span>
|
||||
</button>
|
||||
|
||||
<!-- Children (recursive) -->
|
||||
<div
|
||||
v-if="item.isDirectory && item.children?.length && expanded.has(item.path)"
|
||||
class="pl-4 ml-[18px] border-l border-white/5"
|
||||
>
|
||||
<FileTree
|
||||
:items="item.children"
|
||||
@select-file="$emit('selectFile', $event)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
interface FileEntry {
|
||||
name: string
|
||||
path: string
|
||||
isDirectory: boolean
|
||||
children?: FileEntry[]
|
||||
}
|
||||
|
||||
defineProps<{ items: FileEntry[] }>()
|
||||
|
||||
const expanded = ref<Set<string>>(new Set())
|
||||
|
||||
const emit = defineEmits<{ selectFile: [entry: FileEntry] }>()
|
||||
|
||||
function handleClick(item: FileEntry) {
|
||||
if (item.isDirectory) {
|
||||
const next = new Set(expanded.value)
|
||||
if (next.has(item.path)) {
|
||||
next.delete(item.path)
|
||||
} else {
|
||||
next.add(item.path)
|
||||
}
|
||||
expanded.value = next
|
||||
} else {
|
||||
emit('selectFile', item)
|
||||
}
|
||||
}
|
||||
|
||||
const CODE_EXTS = new Set([
|
||||
'ts', 'tsx', 'js', 'jsx', 'vue', 'svelte', 'py', 'rs', 'go', 'java',
|
||||
'c', 'cpp', 'h', 'hpp', 'rb', 'php', 'swift', 'kt', 'cs', 'css',
|
||||
'scss', 'less', 'html', 'xml', 'yaml', 'yml', 'toml', 'json', 'sh',
|
||||
'bash', 'zsh', 'sql', 'md', 'mdx',
|
||||
])
|
||||
const IMAGE_EXTS = new Set([
|
||||
'png', 'jpg', 'jpeg', 'gif', 'svg', 'webp', 'ico', 'bmp', 'avif',
|
||||
])
|
||||
|
||||
function fileExt(name: string): string {
|
||||
return name.split('.').pop()?.toLowerCase() ?? ''
|
||||
}
|
||||
|
||||
function iconColor(item: FileEntry): string {
|
||||
if (item.isDirectory) return 'text-yellow-500/70'
|
||||
const ext = fileExt(item.name)
|
||||
if (CODE_EXTS.has(ext)) return 'text-blue-400/70'
|
||||
if (IMAGE_EXTS.has(ext)) return 'text-green-400/70'
|
||||
return 'text-white/40'
|
||||
}
|
||||
|
||||
const FOLDER_PATH = 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z'
|
||||
const FOLDER_OPEN_PATH = 'M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z'
|
||||
const CODE_PATH = 'M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4'
|
||||
const IMAGE_PATH = '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'
|
||||
const DOC_PATH = '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'
|
||||
|
||||
function iconPath(item: FileEntry): string {
|
||||
if (item.isDirectory) {
|
||||
return expanded.value.has(item.path) ? FOLDER_OPEN_PATH : FOLDER_PATH
|
||||
}
|
||||
const ext = fileExt(item.name)
|
||||
if (CODE_EXTS.has(ext)) return CODE_PATH
|
||||
if (IMAGE_EXTS.has(ext)) return IMAGE_PATH
|
||||
return DOC_PATH
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user