tksadik92/wrenn-releases
1
0
Fork 0
forked from wrenn/wrenn
Code Pull Requests Activity

Polish file browser: add up button, normalize design, improve UX

Browse Source 
Add parent directory button in breadcrumb bar, remove redundant ..
row from file list. Normalize styles to use design system tokens
(accent glow, iconFloat, fadeUp). Improve empty states, add staggered
row entrance animation, file extension badge, and clearer UX copy.
This commit is contained in:
Rafeed M. Bhuiyan
2026-04-10 19:24:24 +06:00
parent 4ed17b2776
commit 851f54a9e1
1 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/lib/components/FilesTab.svelte
View File

@ -56,6 +56,8 @@
const dirCount = $derived(entries.filter((e) => e.type === 'directory').length); const dirCount = $derived(entries.filter((e) => e.type === 'directory').length);
const fileCount = $derived(entries.filter((e) => e.type !== 'directory').length); const fileCount = $derived(entries.filter((e) => e.type !== 'directory').length);
const canGoUp = $derived(currentPath !== '/' && currentPath.startsWith('/'));
async function navigateTo(path: string) { async function navigateTo(path: string) {
currentPath = normalizePath(path); currentPath = normalizePath(path);
pathInput = currentPath; pathInput = currentPath;
@ -343,7 +345,22 @@
</form> </form>
<!-- Breadcrumbs --> <!-- Breadcrumbs -->
<div class="flex items-center gap-0.5 border-b border-[var(--color-border)] px-4 py-2 overflow-x-auto"> <div class="flex items-center gap-0.5 border-b border-[var(--color-border)] px-2 py-2 overflow-x-auto">
<!-- Up button -->
<button
onclick={() => navigateTo(currentPath + '/..')}
disabled={!canGoUp}
title="Go to parent directory"
class="shrink-0 flex items-center justify-center rounded-[3px] w-6 h-6 transition-colors
{canGoUp
? 'text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-4)] hover:text-[var(--color-text-primary)]'
: 'text-[var(--color-text-muted)] opacity-30 cursor-not-allowed'}"
>
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 18l-6-6 6-6" />
</svg>
</button>
<span class="w-px h-4 bg-[var(--color-border)] shrink-0 mx-1"></span>
{#each breadcrumbs() as crumb, i} {#each breadcrumbs() as crumb, i}
{#if i > 0} {#if i > 0}
<svg class="shrink-0 text-[var(--color-text-muted)]" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> <svg class="shrink-0 text-[var(--color-text-muted)]" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
@ -399,19 +416,6 @@
<span class="text-meta text-[var(--color-text-muted)]">Nothing here yet</span> <span class="text-meta text-[var(--color-text-muted)]">Nothing here yet</span>
</div> </div>
{:else} {:else}
<!-- Parent directory -->
{#if currentPath !== '/'}
<button
onclick={() => navigateTo(currentPath + '/..')}
class="file-row flex w-full items-center gap-3 px-4 py-2 text-left"
>
<svg class="shrink-0 text-[var(--color-text-muted)]" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="15 18 9 12 15 6" />
</svg>
<span class="font-mono text-meta text-[var(--color-text-secondary)]">..</span>
</button>
{/if}
{#each sortedEntries as entry, idx (entry.path)} {#each sortedEntries as entry, idx (entry.path)}
<button <button
onclick={() => selectFile(entry)} onclick={() => selectFile(entry)}