Whatever

frontend/app/components/FileTree.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="file-tree">
+    <div v-if="loading" class="tree-loading">Loading files...</div>
+    <div v-else-if="error" class="tree-error">{{ error }}</div>
+    <div v-else-if="!tree || tree.length === 0" class="tree-empty">
+      No files. Sync the repository first.
+    </div>
+    <TreeItem v-else v-model:expanded="expandedPaths" :items="tree" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import TreeItem from './TreeItem.vue'
+
+const props = defineProps<{
+  siteId: string
+}>()
+
+const loading = ref(true)
+const error = ref('')
+const tree = ref<any[]>([])
+const expandedPaths = ref<Set<string>>(new Set())
+
+onMounted(async () => {
+  loading.value = true
+  try {
+    const API_BASE = window.location.origin
+    const res = await fetch(`${API_BASE}/api/sites/${encodeURIComponent(props.siteId)}/files`)
+    if (res.ok) {
+      const data = await res.json()
+      tree.value = data.tree || []
+    } else {
+      const errData = await res.json().catch(() => ({}))
+      error.value = errData.error || 'Failed to load files'
+    }
+  } catch {
+    error.value = 'Could not connect to server'
+  } finally {
+    loading.value = false
+  }
+})
+</script>
+
+<style scoped>
+.file-tree {
+  height: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 13px;
+}
+
+.tree-loading,
+.tree-error,
+.tree-empty {
+  padding: 16px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.tree-error {
+  color: #e53e3e;
+}
+</style>