113 lines
2.3 KiB
Svelte
113 lines
2.3 KiB
Svelte
<script lang="ts">
|
|
import type { VaultFile } from '$lib/utils/markdown';
|
|
import FileTreeItem from './FileTreeItem.svelte';
|
|
|
|
interface Props {
|
|
file: VaultFile;
|
|
selectedPath: string | null;
|
|
depth?: number;
|
|
onSelect: (file: VaultFile) => void;
|
|
}
|
|
|
|
let { file, selectedPath, depth = 0, onSelect }: Props = $props();
|
|
|
|
let expanded = $state(false);
|
|
|
|
const isFolder = $derived(file.type === 'folder');
|
|
const isSelected = $derived(selectedPath === file.path);
|
|
|
|
function handleClick() {
|
|
if (isFolder) {
|
|
expanded = !expanded;
|
|
} else {
|
|
onSelect(file);
|
|
}
|
|
}
|
|
|
|
function handleKeydown(e: KeyboardEvent) {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
handleClick();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<div class="file-tree-item">
|
|
<button
|
|
class="item-row"
|
|
class:selected={isSelected}
|
|
class:folder={isFolder}
|
|
style="padding-left: {depth * 12 + 8 + (isFolder ? 0 : 18)}px"
|
|
onclick={handleClick}
|
|
onkeydown={handleKeydown}
|
|
aria-expanded={isFolder ? expanded : undefined}
|
|
>
|
|
{#if isFolder}
|
|
<svg class="chevron" class:expanded width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
|
|
<path d="M4.5 2L8.5 6L4.5 10" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
{/if}
|
|
<span class="name">{file.name}</span>
|
|
</button>
|
|
|
|
{#if isFolder && expanded && file.children}
|
|
<div class="children">
|
|
{#each file.children as child (child.path)}
|
|
<FileTreeItem file={child} {selectedPath} depth={depth + 1} {onSelect} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.file-tree-item {
|
|
width: 100%;
|
|
}
|
|
|
|
.item-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
width: 100%;
|
|
padding: 4px 8px;
|
|
border: none;
|
|
background: transparent;
|
|
color: var(--color-text-secondary);
|
|
font-size: 13px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
border-radius: 4px;
|
|
transition: all 0.15s;
|
|
}
|
|
|
|
.item-row:hover {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
color: var(--color-text-primary);
|
|
}
|
|
|
|
.item-row.selected {
|
|
background: var(--color-obsidian-accent);
|
|
color: white;
|
|
}
|
|
|
|
.chevron {
|
|
flex-shrink: 0;
|
|
opacity: 0.5;
|
|
transition: transform 0.15s;
|
|
}
|
|
|
|
.chevron.expanded {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.children {
|
|
width: 100%;
|
|
}
|
|
</style>
|