Merge pull request #445 from objectstack-ai/copilot/optimize-list-page-layout

Author: hotlong

packages/plugin-list/src/ListView.tsx

@@ -24,6 +24,8 @@ export interface ListViewProps {
   onSearchChange?: (search: string) => void;
   /** Callback when a row/item is clicked (overrides NavigationConfig) */
   onRowClick?: (record: Record<string, unknown>) => void;
+  /** Show view type switcher (Grid/Kanban/etc). Default: false (view type is fixed) */
+  showViewSwitcher?: boolean;
   [key: string]: any;
 }
 
@@ -68,6 +70,7 @@ export const ListView: React.FC<ListViewProps> = ({
   onSortChange,
   onSearchChange,
   onRowClick,
+  showViewSwitcher = false,
   ...props
 }) => {
   // Kernel level default: Ensure viewType is always defined (default to 'grid')
@@ -392,14 +395,16 @@ export const ListView: React.FC<ListViewProps> = ({
       {/* Airtable-style Toolbar */}
       <div className="border-b px-4 py-2 flex items-center justify-between gap-4 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
         <div className="flex items-center gap-2 flex-1 overflow-hidden">
-          {/* View Switcher on the Left */}
-          <div className="flex items-center pr-2 border-r mr-2">
-            <ViewSwitcher
-              currentView={currentView}
-              availableViews={availableViews}
-              onViewChange={handleViewChange}
-            />
-          </div>
+          {/* View Switcher on the Left (optional, hidden by default) */}
+          {showViewSwitcher && (
+            <div className="flex items-center pr-2 border-r mr-2">
+              <ViewSwitcher
+                currentView={currentView}
+                availableViews={availableViews}
+                onViewChange={handleViewChange}
+              />
+            </div>
+          )}
 
           {/* Action Tools */}
           <div className="flex items-center gap-1">

packages/plugin-list/src/__tests__/ListView.test.tsx

@@ -108,7 +108,7 @@ describe('ListView', () => {
       },
     };
 
-    renderWithProvider(<ListView schema={schema} />);
+    renderWithProvider(<ListView schema={schema} showViewSwitcher={true} />);
 
     // Find kanban view button and click it
     // ViewSwitcher uses buttons with aria-label

packages/plugin-list/src/__tests__/ListViewPersistence.test.tsx

@@ -56,7 +56,7 @@ describe('ListView Persistence', () => {
       },
     };
 
-    renderWithProvider(<ListView schema={schema} />);
+    renderWithProvider(<ListView schema={schema} showViewSwitcher={true} />);
 
     // Simulate changing to kanban view
     const kanbanButton = screen.getByLabelText('Kanban'); 
@@ -89,7 +89,7 @@ describe('ListView Persistence', () => {
         },
      };
 
-     renderWithProvider(<ListView schema={viewB_Schema} />);
+     renderWithProvider(<ListView schema={viewB_Schema} showViewSwitcher={true} />);
 
      // Should use the schema default 'kanban' (since no storage exists for THIS view id)
      // It should NOT use 'grid' from the global/default view.
@@ -117,7 +117,7 @@ describe('ListView Persistence', () => {
           },
       };
 
-      renderWithProvider(<ListView schema={schema} />);
+      renderWithProvider(<ListView schema={schema} showViewSwitcher={true} />);
 
       // Should respect schema ('grid') because storage persistence is currently disabled
       const kanbanButton = screen.getByLabelText('Kanban');

packages/plugin-view/src/ObjectView.tsx

@@ -857,7 +857,7 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
     const showSearchBox = schema.showSearch !== false;
     const showCreateButton = schema.showCreate !== false && operations.create !== false;
     const showRefreshButton = schema.showRefresh !== false;
-    const showViewSwitcherToggle = schema.showViewSwitcher !== false;
+    const showViewSwitcherToggle = schema.showViewSwitcher === true; // Changed: default to false (hidden)
 
     return (
       <div className="flex flex-col gap-3">

packages/types/src/objectql.ts

@@ -833,7 +833,8 @@ export interface ObjectViewSchema extends BaseSchema {
 
   /**
    * Show view switcher (for multi-view)
-   * @default true
+   * When false (default), view type is fixed at creation in ViewDesigner
+   * @default false
    */
   showViewSwitcher?: boolean;