<script lang="ts">
import { appStore } from '$lib/store.svelte.js';
function basename(filepath: string): string {
return filepath.split('/').pop() ?? filepath;
}
</script>
<div class="panel">
<div class="header">
Modified
{#if appStore.modifiedFiles.length > 0}
<span class="count">{appStore.modifiedFiles.length}</span>
{/if}
</div>
{#if appStore.modifiedFiles.length === 0}
<div class="dim">no changes</div>
{:else}
{#each appStore.modifiedFiles as file}
<div class="entry" title={file}>{basename(file)}</div>
{/each}
{/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;
display: flex;
align-items: center;
gap: 0.4rem;
}
.count {
background: var(--yellow);
color: var(--bg);
font-size: 0.6rem;
padding: 0 0.3rem;
border-radius: 2px;
font-weight: bold;
}
.entry {
color: var(--yellow);
padding: 0.15rem 0.5rem;
font-size: 0.75rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dim {
color: var(--fg-dim);
padding: 0.5rem;
font-style: italic;
font-size: 0.7rem;
}
</style>