Restore ViewTabBar as read-only view switcher (no drag/add)

Per reviewer feedback, ViewTabBar should remain visible for view switching
but without design-mode features (drag-to-reorder, +add, context menu actions).
- config={{ reorderable: false }} disables drag
- No onAddView, onRenameView, onDuplicateView, etc. callbacks
- Restore VIEW_TYPE_ICONS and related imports
- Update tests to verify tabs render without design features

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>

Author: Copilot

apps/console/src/__tests__/ObjectView.test.tsx

@@ -170,6 +170,11 @@ describe('ObjectView Component', () => {
         // Check Header (h1 only, breadcrumb removed)
         const headers = screen.getAllByText('Opportunity');
         expect(headers.length).toBeGreaterThanOrEqual(1);
+        
+        // Check view tabs are rendered (without drag/add features)
+        const allOppTexts = screen.getAllByText('All Opportunities');
+        expect(allOppTexts.length).toBeGreaterThanOrEqual(1);
+        expect(screen.getByText('Pipeline')).toBeInTheDocument();
 
         // Check Grid is rendered (default)
         expect(screen.getByTestId('object-grid')).toBeInTheDocument();

apps/console/src/__tests__/ViewSwitching.test.tsx

@@ -90,12 +90,17 @@ describe('Console View Switching Integration', () => {
         );
     };
 
-    it('no longer renders view tabs (moved to config panel)', () => {
+    it('renders view tabs without drag or add features', () => {
         renderObjectView();
 
-        // ViewTabBar was removed, so view names should not appear as tabs
-        // Only the default grid view is rendered
-        expect(screen.queryByTestId('view-tab-bar')).not.toBeInTheDocument();
+        // ViewTabBar should be present for switching views
+        const allTasksElements = screen.getAllByText('All Tasks');
+        expect(allTasksElements.length).toBeGreaterThanOrEqual(1);
+        expect(screen.getByText('Board')).toBeInTheDocument();
+        expect(screen.getByText('Schedule')).toBeInTheDocument();
+        expect(screen.getByText('Roadmap')).toBeInTheDocument();
+        expect(screen.getByText('History')).toBeInTheDocument();
+        expect(screen.getByText('Sites')).toBeInTheDocument();
     });
 
     it('switches to Timeline view correctly', async () => {

apps/console/src/components/ObjectView.tsx

@@ -9,18 +9,19 @@
  * - ListView delegation for non-grid view types (kanban, calendar, chart, etc.)
  */
 
-import { useMemo, useState, useCallback, useEffect } from 'react';
+import { useMemo, useState, useCallback, useEffect, type ComponentType } from 'react';
 import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
 import { ObjectChart } from '@object-ui/plugin-charts';
 import { ListView } from '@object-ui/plugin-list';
 import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
-import { ObjectView as PluginObjectView } from '@object-ui/plugin-view';
+import { ObjectView as PluginObjectView, ViewTabBar } from '@object-ui/plugin-view';
+import type { ViewTabItem } from '@object-ui/plugin-view';
 // Import plugins for side-effects (registration)
 import '@object-ui/plugin-grid';
 import '@object-ui/plugin-kanban';
 import '@object-ui/plugin-calendar';
 import { Button, Empty, EmptyTitle, EmptyDescription, NavigationOverlay, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from '@object-ui/components';
-import { Plus, Table as TableIcon, Settings2, Wrench } from 'lucide-react';
+import { Plus, Table as TableIcon, Settings2, Wrench, KanbanSquare, Calendar, LayoutGrid, Activity, GanttChart, MapPin, BarChart3 } from 'lucide-react';
 import type { ListViewSchema, ViewNavigationConfig, FeedItem } from '@object-ui/types';
 import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { ViewConfigPanel } from './ViewConfigPanel';
@@ -31,6 +32,18 @@ import { useAuth } from '@object-ui/auth';
 import { useRealtimeSubscription, useConflictResolution } from '@object-ui/collaboration';
 import { useNavigationOverlay, SchemaRenderer } from '@object-ui/react';
 
+/** Map view types to Lucide icons (Airtable-style) */
+const VIEW_TYPE_ICONS: Record<string, ComponentType<{ className?: string }>> = {
+    grid: TableIcon,
+    kanban: KanbanSquare,
+    calendar: Calendar,
+    gallery: LayoutGrid,
+    timeline: Activity,
+    gantt: GanttChart,
+    map: MapPin,
+    chart: BarChart3,
+};
+
 const FALLBACK_USER = { id: 'current-user', name: 'Demo User' };
 
 /**
@@ -732,7 +745,24 @@ export function ObjectView({ dataSource, objects, onEdit }: any) {
                  </div>
              </div>
 
-             {/* View Tabs removed — view switching is handled via ViewConfigPanel (right sidebar) */}
+             {/* View Tabs — read-only view switcher (design features like drag/add are in ViewConfigPanel) */}
+             {views.length > 1 && (
+               <div className="border-b px-3 sm:px-4 bg-background overflow-x-auto shrink-0">
+                 <ViewTabBar
+                   views={views.map((view: { id: string; label: string; type: string; filter?: any[]; sort?: any[] }) => ({
+                     id: view.id,
+                     label: view.label,
+                     type: view.type,
+                     hasActiveFilters: Array.isArray((view as any).filter) && (view as any).filter.length > 0,
+                     hasActiveSort: Array.isArray((view as any).sort) && (view as any).sort.length > 0,
+                   } as ViewTabItem))}
+                   activeViewId={activeViewId}
+                   onViewChange={handleViewChange}
+                   viewTypeIcons={VIEW_TYPE_ICONS}
+                   config={{ reorderable: false }}
+                 />
+               </div>
+             )}
 
              {/* 2. Content — Plugin ObjectView with ViewSwitcher + Filter + Sort */}
              <div className="flex-1 overflow-hidden relative flex flex-row">