feat: Add card/list view toggle with enhanced list view (#101)
* 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
This commit is contained in:
committed by
GitHub
parent
c618fef2ef
commit
d819cd79fe
@@ -163,12 +163,22 @@ export const scriptsRouter = createTRPCRouter({
|
||||
const script = scripts.find(s => s.slug === card.slug);
|
||||
const categoryNames: string[] = script?.categories?.map(id => categoryMap[id]).filter((name): name is string => typeof name === 'string') ?? [];
|
||||
|
||||
// Extract OS and version from first install method
|
||||
const firstInstallMethod = script?.install_methods?.[0];
|
||||
const os = firstInstallMethod?.resources?.os;
|
||||
const version = firstInstallMethod?.resources?.version;
|
||||
|
||||
return {
|
||||
...card,
|
||||
categories: script?.categories ?? [],
|
||||
categoryNames: categoryNames,
|
||||
// Add date_created from script
|
||||
date_created: script?.date_created,
|
||||
// Add OS and version from install methods
|
||||
os: os,
|
||||
version: version,
|
||||
// Add interface port
|
||||
interface_port: script?.interface_port,
|
||||
} as ScriptCard;
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user