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>
2026-03-04 22:35:15 +00:00
parent cfec1dcc13
commit e33cb359a0
4 changed files with 385 additions and 0 deletions
@@ -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>
@@ -23,6 +23,11 @@ const router = createRouter({
      name: 'widget-demo',
      component: () => import('./pages/WidgetDemoPage.vue'),
    },
+    {
+      path: '/browse',
+      name: 'file-browser',
+      component: () => import('./pages/BrowsePage.vue'),
+    },
    {
      path: '/view/:nostrAddr',
      name: 'conversation-viewer',
@@ -0,0 +1,198 @@
+<template>
+  <div class="h-full flex flex-col bg-[#0a0a0a]">
+    <!-- Header -->
+    <header class="glass shrink-0 px-4 py-3 flex items-center gap-3 border-b border-white/5">
+      <router-link
+        to="/"
+        class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
+        aria-label="Back to chat"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+      </router-link>
+      <h1 class="text-white/90 text-base font-medium truncate">Files</h1>
+    </header>
+
+    <!-- Breadcrumb -->
+    <nav class="px-4 py-2 flex items-center gap-1 text-xs text-white/40 shrink-0">
+      <button
+        class="hover:text-white/70 transition-colors min-h-[28px] px-1"
+        @click="backToProjects"
+      >
+        Projects
+      </button>
+      <template v-if="currentProject">
+        <span class="text-white/20">/</span>
+        <span class="text-white/60 min-h-[28px] px-1 flex items-center">
+          {{ currentProject.name }}
+        </span>
+      </template>
+    </nav>
+
+    <!-- Content -->
+    <main class="flex-1 overflow-hidden flex">
+      <!-- File tree / project list -->
+      <div class="flex-1 overflow-y-auto px-2 py-2">
+        <div v-if="loading" class="flex items-center justify-center h-32">
+          <span class="text-sm text-white/40">Loading...</span>
+        </div>
+        <div v-else-if="error" class="flex items-center justify-center h-32">
+          <span class="text-sm text-red-400/70">{{ error }}</span>
+        </div>
+
+        <!-- Project list -->
+        <div v-else-if="!currentProject" class="space-y-1">
+          <button
+            v-for="project in projects"
+            :key="project.path"
+            class="w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-left hover:bg-white/5 transition-colors group"
+            @click="openProject(project)"
+          >
+            <svg class="w-5 h-5 text-white/30 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
+            <div class="min-w-0 flex-1">
+              <p class="text-sm text-white/80 truncate group-hover:text-white/90">{{ project.name }}</p>
+              <p class="text-xs text-white/25 truncate">{{ project.language }}</p>
+            </div>
+          </button>
+        </div>
+
+        <!-- File tree -->
+        <FileTree
+          v-else
+          :items="treeItems"
+          @select-file="openFile"
+        />
+      </div>
+
+      <!-- File preview (desktop sidebar) -->
+      <aside
+        v-if="previewFile && !isMobile"
+        class="w-[400px] xl:w-[500px] border-l border-white/5 overflow-y-auto shrink-0"
+      >
+        <FilePreview :file="previewFile" @close="previewFile = null" />
+      </aside>
+    </main>
+
+    <!-- Mobile file preview overlay -->
+    <Teleport to="body">
+      <div
+        v-if="previewFile && isMobile"
+        class="fixed inset-0 z-50 bg-[#0a0a0a] overflow-y-auto"
+      >
+        <FilePreview :file="previewFile" @close="previewFile = null" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import FileTree from '@/components/browse/FileTree.vue'
+import FilePreview from '@/components/browse/FilePreview.vue'
+
+interface FileEntry {
+  name: string
+  path: string
+  isDirectory: boolean
+  children?: FileEntry[]
+}
+
+interface Project {
+  name: string
+  path: string
+  language: string
+}
+
+interface PreviewData {
+  name: string
+  path: string
+  content: string
+  size: number
+}
+
+const projects = ref<Project[]>([])
+const treeItems = ref<FileEntry[]>([])
+const loading = ref(true)
+const error = ref('')
+const currentProject = ref<Project | null>(null)
+const previewFile = ref<PreviewData | null>(null)
+
+const windowWidth = ref(window.innerWidth)
+const isMobile = computed(() => windowWidth.value < 1024)
+
+async function loadProjects() {
+  loading.value = true
+  error.value = ''
+  try {
+    const res = await fetch('/api/fs/list')
+    if (!res.ok) throw new Error(`Failed to load: ${res.status}`)
+    const data = await res.json()
+    projects.value = data.projects ?? []
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load projects'
+  } finally {
+    loading.value = false
+  }
+}
+
+async function openProject(project: Project) {
+  currentProject.value = project
+  previewFile.value = null
+  loading.value = true
+  error.value = ''
+  try {
+    const res = await fetch(`/api/fs/tree?path=${encodeURIComponent(project.path)}`)
+    if (!res.ok) throw new Error(`Failed to load: ${res.status}`)
+    const data = await res.json()
+    treeItems.value = data.files ?? []
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to load files'
+  } finally {
+    loading.value = false
+  }
+}
+
+function backToProjects() {
+  currentProject.value = null
+  previewFile.value = null
+  treeItems.value = []
+}
+
+async function openFile(entry: FileEntry) {
+  if (!currentProject.value) return
+  const absolutePath = currentProject.value.path + '/' + entry.path
+  try {
+    const res = await fetch(`/api/fs/read?path=${encodeURIComponent(absolutePath)}`)
+    if (!res.ok) {
+      if (res.status === 413) {
+        error.value = 'File too large to preview (max 1MB)'
+        return
+      }
+      throw new Error(`Failed to read: ${res.status}`)
+    }
+    const data = await res.json()
+    previewFile.value = {
+      name: entry.name,
+      path: entry.path,
+      content: data.content,
+      size: data.size,
+    }
+  } catch (e) {
+    error.value = e instanceof Error ? e.message : 'Failed to read file'
+  }
+}
+
+function onResize() { windowWidth.value = window.innerWidth }
+
+onMounted(() => {
+  loadProjects()
+  window.addEventListener('resize', onResize)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('resize', onResize)
+})
+</script>