Add support for additional view types in ListView and ViewSwitcher

Author: hotlong

packages/plugin-list/src/ListView.tsx

@@ -128,6 +128,46 @@ export const ListView: React.FC<ListViewProps> = ({
           yAxisFields: schema.options?.chart?.yAxisFields || ['value'],
           ...(schema.options?.chart || {}),
         };
+      case 'spreadsheet':
+        return {
+          type: 'object-spreadsheet',
+          ...baseProps,
+          ...(schema.options?.spreadsheet || {}),
+        };
+      case 'gallery':
+        return {
+          type: 'object-gallery',
+          ...baseProps,
+          imageField: schema.options?.gallery?.imageField,
+          titleField: schema.options?.gallery?.titleField || 'name',
+          subtitleField: schema.options?.gallery?.subtitleField,
+          ...(schema.options?.gallery || {}),
+        };
+      case 'timeline':
+        return {
+          type: 'object-timeline',
+          ...baseProps,
+          dateField: schema.options?.timeline?.dateField || 'created_at',
+          titleField: schema.options?.timeline?.titleField || 'name',
+          ...(schema.options?.timeline || {}),
+        };
+      case 'gantt':
+        return {
+          type: 'object-gantt',
+          ...baseProps,
+          startDateField: schema.options?.gantt?.startDateField || 'start_date',
+          endDateField: schema.options?.gantt?.endDateField || 'end_date',
+          progressField: schema.options?.gantt?.progressField || 'progress',
+          dependenciesField: schema.options?.gantt?.dependenciesField || 'dependencies',
+          ...(schema.options?.gantt || {}),
+        };
+      case 'map':
+        return {
+          type: 'object-map',
+          ...baseProps,
+          locationField: schema.options?.map?.locationField || 'location',
+          ...(schema.options?.map || {}),
+        };
       default:
         return baseProps;
     }

packages/plugin-list/src/ViewSwitcher.tsx

@@ -8,9 +8,30 @@
 
 import * as React from 'react';
 import { cn, ToggleGroup, ToggleGroupItem } from '@object-ui/components';
-import { Grid, List, LayoutGrid, Calendar, BarChart3 } from 'lucide-react';
+import { 
+  Grid, 
+  List, 
+  LayoutGrid, 
+  Calendar, 
+  BarChart3, 
+  Table2,    // spreadsheet
+  Images,    // gallery
+  Activity,  // timeline
+  GanttChartSquare, // gantt
+  Map,        // map
+} from 'lucide-react';
 
-export type ViewType = 'grid' | 'list' | 'kanban' | 'calendar' | 'chart';
+export type ViewType = 
+  | 'grid' 
+  | 'list' 
+  | 'kanban' 
+  | 'calendar' 
+  | 'chart'
+  | 'spreadsheet'
+  | 'gallery'
+  | 'timeline'
+  | 'gantt'
+  | 'map';
 
 export interface ViewSwitcherProps {
   currentView: ViewType;
@@ -25,6 +46,11 @@ const VIEW_ICONS: Record<ViewType, React.ReactNode> = {
   kanban: <LayoutGrid className="h-4 w-4" />,
   calendar: <Calendar className="h-4 w-4" />,
   chart: <BarChart3 className="h-4 w-4" />,
+  spreadsheet: <Table2 className="h-4 w-4" />,
+  gallery: <Images className="h-4 w-4" />,
+  timeline: <Activity className="h-4 w-4" />,
+  gantt: <GanttChartSquare className="h-4 w-4" />,
+  map: <Map className="h-4 w-4" />,
 };
 
 const VIEW_LABELS: Record<ViewType, string> = {
@@ -33,6 +59,11 @@ const VIEW_LABELS: Record<ViewType, string> = {
   kanban: 'Kanban',
   calendar: 'Calendar',
   chart: 'Chart',
+  spreadsheet: 'Spreadsheet',
+  gallery: 'Gallery',
+  timeline: 'Timeline',
+  gantt: 'Gantt',
+  map: 'Map',
 };
 
 export const ViewSwitcher: React.FC<ViewSwitcherProps> = ({

packages/types/src/objectql.ts

@@ -688,7 +688,7 @@ export interface ListViewSchema extends BaseSchema {
   objectName: string;
 
   /** View Type (grid, kanban, etc) */
-  viewType?: 'grid' | 'kanban' | 'calendar' | 'gantt' | 'map' | 'chart';
+  viewType?: 'grid' | 'list' | 'kanban' | 'calendar' | 'gantt' | 'map' | 'chart' | 'spreadsheet' | 'gallery' | 'timeline';
 
   /** Fields to fetch/display */
   fields?: string[];