d819cd79fe
* feat: Add card/list view toggle with enhanced list view - Add ViewToggle component with grid/list icons and active state styling - Create ScriptCardList component with horizontal layout design - Add view-mode API endpoint for GET/POST operations to persist view preference - Update ScriptsGrid and DownloadedScriptsTab with view mode state and conditional rendering - Enhance list view with additional information: - Categories with tag icon - Creation date with calendar icon - OS and version with computer icon - Default port with terminal icon - Script ID with info icon - View preference persists across page reloads - Same view mode applies to both Available and Downloaded scripts pages - List view shows same information as card view but in compact horizontal layout * fix: Resolve TypeScript/ESLint build errors - Fix unsafe argument type errors in view mode loading - Use proper type guards for viewMode validation - Replace logical OR with nullish coalescing operator - Add explicit type casting for API response validation
46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import { Button } from './ui/button';
|
|
import { Grid3X3, List } from 'lucide-react';
|
|
|
|
interface ViewToggleProps {
|
|
viewMode: 'card' | 'list';
|
|
onViewModeChange: (mode: 'card' | 'list') => void;
|
|
}
|
|
|
|
export function ViewToggle({ viewMode, onViewModeChange }: ViewToggleProps) {
|
|
return (
|
|
<div className="flex justify-center mb-6">
|
|
<div className="flex items-center space-x-1 bg-muted rounded-lg p-1">
|
|
<Button
|
|
onClick={() => onViewModeChange('card')}
|
|
variant={viewMode === 'card' ? 'default' : 'ghost'}
|
|
size="sm"
|
|
className={`flex items-center space-x-2 ${
|
|
viewMode === 'card'
|
|
? 'bg-primary text-primary-foreground shadow-sm'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
<Grid3X3 className="h-4 w-4" />
|
|
<span className="text-sm">Card View</span>
|
|
</Button>
|
|
<Button
|
|
onClick={() => onViewModeChange('list')}
|
|
variant={viewMode === 'list' ? 'default' : 'ghost'}
|
|
size="sm"
|
|
className={`flex items-center space-x-2 ${
|
|
viewMode === 'list'
|
|
? 'bg-primary text-primary-foreground shadow-sm'
|
|
: 'text-muted-foreground hover:text-foreground'
|
|
}`}
|
|
>
|
|
<List className="h-4 w-4" />
|
|
<span className="text-sm">List View</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|