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>
70 lines
2.6 KiB
TypeScript
70 lines
2.6 KiB
TypeScript
import { Card } from '@/components/ui/card';
|
|
import { Folder, Music, Image as ImageIcon, File, CheckSquare, Square } from 'lucide-react';
|
|
import type { FileNode } from './types';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface FileManagerViewGridProps {
|
|
files: FileNode[];
|
|
selectedIds: string[];
|
|
onToggleSelect: (id: string) => void;
|
|
onFileClick: (file: FileNode) => void;
|
|
}
|
|
|
|
function FileTypeIcon({ type, size = 'md' }: { type: FileNode['type']; size?: 'md' | 'lg' }) {
|
|
const cl = size === 'lg' ? 'w-8 h-8' : 'w-5 h-5';
|
|
if (type === 'folder') return <Folder className={cn(cl, 'text-primary')} />;
|
|
if (type === 'audio') return <Music className={cn(cl, 'text-muted-foreground')} />;
|
|
if (type === 'image') return <ImageIcon className={cn(cl, 'text-secondary')} />;
|
|
if (['document', 'archive', 'project'].includes(type)) {
|
|
return <File className={cn(cl, 'text-muted-foreground')} />;
|
|
}
|
|
return <File className={cn(cl, 'text-muted-foreground')} />;
|
|
}
|
|
|
|
export function FileManagerViewGrid({
|
|
files,
|
|
selectedIds,
|
|
onToggleSelect,
|
|
onFileClick,
|
|
}: FileManagerViewGridProps) {
|
|
return (
|
|
<div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
|
{files.map((file) => (
|
|
<Card
|
|
key={file.id}
|
|
variant="default"
|
|
className={cn(
|
|
'p-4 flex flex-col items-center text-center gap-4 cursor-pointer hover:border-primary/50 transition-all group relative',
|
|
selectedIds.includes(file.id) && 'border-primary bg-primary/5',
|
|
)}
|
|
onClick={() => onFileClick(file)}
|
|
>
|
|
<button
|
|
type="button"
|
|
className="absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity z-10"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
onToggleSelect(file.id);
|
|
}}
|
|
aria-label={selectedIds.includes(file.id) ? 'Deselect' : 'Select'}
|
|
>
|
|
{selectedIds.includes(file.id) ? (
|
|
<CheckSquare className="w-4 h-4 text-primary" />
|
|
) : (
|
|
<Square className="w-4 h-4 text-muted-foreground hover:text-white" />
|
|
)}
|
|
</button>
|
|
<div className="w-16 h-16 rounded-2xl bg-muted flex items-center justify-center shadow-lg transition-colors duration-[var(--duration-fast)]">
|
|
<FileTypeIcon type={file.type} size="lg" />
|
|
</div>
|
|
<div className="w-full min-w-0">
|
|
<h4 className="font-bold text-white text-sm truncate w-full">
|
|
{file.name}
|
|
</h4>
|
|
<p className="text-xs text-muted-foreground mt-1">{file.size}</p>
|
|
</div>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|