devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix(web): boot rehydrate normalizes transfers; paused has its own visual

Browse Source
This commit is contained in:
Jannis Braun
2026-05-02 19:10:29 +02:00
parent 61be9d013f
commit 33cfc66ac4
4 changed files with 138 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/chat/AttachmentProgress.tsx
+22 -4
View File
@@ -23,17 +23,35 @@ function fmt(bytes: number): string {
export function AttachmentProgress({ loaded, total, state, filename, error, onPause, onResume, onAbort, size = 'tile' }: Props) {
const pct = total > 0 ? Math.min(100, Math.round((loaded / total) * 100)) : 0;
const bg = state === 'failed' ? 'bg-accent-rose/30' : 'bg-accent-mint/30';
const bg = state === 'failed' ? 'bg-accent-rose/30' : state === 'paused' ? 'bg-white/5' : 'bg-accent-mint/30';
const isFinal = state === 'completed' || state === 'aborted';
// Desaturate the conic-gradient ring when paused so it can't be mistaken for
// active progress. Active uses mint; paused uses a muted grey.
const ringColor = state === 'paused' ? 'rgba(180,180,190,.5)' : 'rgba(180,220,200,.85)';
const ringTrack = 'rgba(255,255,255,.15)';
const ringTitle = state === 'failed'
? error
: state === 'paused'
? `Paused — ${pct}%`
: undefined;
return (
<div className={`absolute inset-0 flex flex-col items-center justify-center gap-2 backdrop-blur-[2px] ${state === 'failed' ? 'bg-accent-rose/20' : 'bg-black/50'} pointer-events-auto`}>
<div
className={`w-9 h-9 rounded-full ${bg} flex items-center justify-center`}
style={state !== 'failed' ? { background: `conic-gradient(rgba(180,220,200,.85) ${pct}%, rgba(255,255,255,.15) ${pct}%)` } : undefined}
title={state === 'failed' ? error : undefined}
style={state !== 'failed' ? { background: `conic-gradient(${ringColor} ${pct}%, ${ringTrack} ${pct}%)` } : undefined}
title={ringTitle}
>
<div className="w-7 h-7 rounded-full bg-surface-overlay text-[10px] text-txt-primary flex items-center justify-center font-medium">
{state === 'failed' ? '!' : `${pct}%`}
{state === 'paused' ? (
<svg width="10" height="10" viewBox="0 0 10 10" fill="currentColor" aria-hidden="true">
<rect x="2" y="1.5" width="2" height="7" rx="0.5" />
<rect x="6" y="1.5" width="2" height="7" rx="0.5" />
</svg>
) : state === 'failed' ? (
'!'
) : (
`${pct}%`
)}
</div>
</div>
{size === 'tile' && (