<script lang="ts">
import { onMount } from 'svelte';
import { filesStore } from '$lib/stores/files.svelte.js';
import { appStore } from '$lib/store.svelte.js';
import FileTreeNode from './FileTreeNode.svelte';
onMount(() => {
filesStore.load(undefined, appStore.authToken ?? undefined);
});
</script>
<div class="panel">
<div class="header">Files</div>
{#if filesStore.loading && filesStore.entries.length === 0}
<div class="dim">loading...</div>
{:else if filesStore.entries.length === 0}
<div class="dim">no files</div>
{:else}
<div class="tree">
{#each filesStore.entries as entry (entry.path)}
<FileTreeNode {entry} depth={0} />
{/each}
</div>
{/if}
</div>
<style>
.panel {
font-family: monospace;
font-size: 0.8rem;
}
.header {
color: var(--accent);
padding: 0.25rem 0.5rem;
font-weight: bold;
text-transform: uppercase;
font-size: 0.7rem;
letter-spacing: 0.08em;
}
.tree {
overflow-y: auto;
max-height: 300px;
}
.dim {
color: var(--fg-dim);
padding: 0.5rem;
font-style: italic;
}
</style>