39b2b642d2
Plan UI premium 6–8 semaines (design system, shell, Storybook, a11y): - Design system: DESIGN_TOKENS.md, APP_SHELL.md, FULL_LAYOUT_PAGE.md. Single source for layout/shell (index.css), shadows (design-system.css), durations/easing. - Tokens: shadow-cover-depth, shadow-gold-glow, shadow-fab-glow; layout max-height (max-h-layout-drawer, max-h-layout-panel, max-h-layout-list). All duration-200/300/500 replaced by --duration-fast/normal/slow. Arbitrary shadows replaced by token classes. - Shell & player: Sidebar, Header, GlobalPlayer, MiniPlayer, PlayerQueue, PlayerControls, AudioPlayer use tokens; focus-visible on Sidebar, PlayerQueue, DropdownMenuTrigger/Item, TabsTrigger. Typography: text-[10px]/[9px] → text-xs where applicable. - ESLint: no-restricted-syntax (warn) for w-/h-/rounded-/shadow-/text-/spacing arbitrary. - Scripts: report-arbitrary-values.mjs, capture/compare/generate visual; visual-complete.spec.ts. - Stories full layout: Dashboard, Playlists, Library, Settings, Profile in DashboardLayout.stories. - .cursorrules + README: DESIGN_TOKENS, APP_SHELL, visual commands, no arbitrary without justification. - apps/web/.gitignore: e2e test artifacts (test-results-visual, playwright-report-visual). Co-authored-by: Cursor <cursoragent@cursor.com>
75 lines
2.2 KiB
TypeScript
75 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Play, Pause, X } from 'lucide-react';
|
|
|
|
interface UploadProgressBarProps {
|
|
progress: number; // 0 to 100
|
|
status: 'uploading' | 'paused' | 'completed' | 'error' | 'processing';
|
|
onPause?: () => void;
|
|
onResume?: () => void;
|
|
onCancel?: () => void;
|
|
}
|
|
|
|
export const UploadProgressBar: React.FC<UploadProgressBarProps> = ({
|
|
progress,
|
|
status,
|
|
onPause,
|
|
onResume,
|
|
onCancel,
|
|
}) => {
|
|
const isPaused = status === 'paused';
|
|
const isCompleted = status === 'completed';
|
|
const isError = status === 'error';
|
|
|
|
const getColor = () => {
|
|
if (isError) return 'bg-destructive';
|
|
if (isCompleted) return 'bg-success';
|
|
if (isPaused) return 'bg-kodo-gold';
|
|
return 'bg-primary';
|
|
};
|
|
|
|
return (
|
|
<div className="w-full flex items-center gap-4">
|
|
<div className="flex-1">
|
|
<div className="flex justify-between text-xs uppercase font-bold text-muted-foreground mb-1">
|
|
<span>{status}</span>
|
|
<span>{Math.round(progress)}%</span>
|
|
</div>
|
|
<div className="h-1.5 bg-muted rounded-full overflow-hidden">
|
|
<div
|
|
className={`h-full transition-all duration-[var(--duration-normal)] ${getColor()} ${status === 'uploading' ? 'animate-pulse' : ''}`}
|
|
style={{ width: `${progress}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{!isCompleted && !isError && (
|
|
<div className="flex gap-1">
|
|
{isPaused ? (
|
|
<button
|
|
onClick={onResume}
|
|
className="p-1 hover:text-white text-success transition-colors"
|
|
title="Resume"
|
|
>
|
|
<Play className="w-3 h-3 fill-current" />
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={onPause}
|
|
className="p-1 hover:text-white text-warning transition-colors"
|
|
title="Pause"
|
|
>
|
|
<Pause className="w-3 h-3 fill-current" />
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={onCancel}
|
|
className="p-1 hover:text-white text-destructive transition-colors"
|
|
title="Cancel"
|
|
>
|
|
<X className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|