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

Replace file browser not-running state with centered empty state

Browse Source 
The small bordered card looked broken and misaligned — now uses a
full-width centered layout with floating icon, matching the app's
empty-state pattern.
This commit is contained in:
Rafeed M. Bhuiyan
2026-04-10 23:32:17 +06:00
parent 43c15c86de
commit 09f030d202
1 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -295,13 +295,18 @@
</style> </style>
{#if !isRunning} {#if !isRunning}
<div class="flex items-center gap-3 rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)] px-5 py-4 m-8"> <div class="flex flex-1 items-center justify-center">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <div class="flex flex-col items-center gap-4 text-center">
<div class="flex h-14 w-14 items-center justify-center rounded-[var(--radius-card)] border border-[var(--color-border-mid)] bg-[var(--color-bg-2)]" style="animation: iconFloat 3s ease-in-out infinite">
<svg class="text-[var(--color-text-muted)]" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" /> <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
</svg> </svg>
<span class="text-ui text-[var(--color-text-tertiary)]"> </div>
File browser requires a running capsule. <div class="flex flex-col gap-1">
</span> <span class="text-ui font-medium text-[var(--color-text-secondary)]">File browser unavailable</span>
<span class="text-meta text-[var(--color-text-muted)]">Start the capsule to browse its filesystem</span>
</div>
</div>
</div> </div>
{:else} {:else}
<div class="flex flex-1 min-h-0"> <div class="flex flex-1 min-h-0">