fix: support all navigation modes (page/new_window/split/popover) in ListView

- Fix page mode: Console onNavigate now uses React Router navigate() for record detail
- Fix new_window: useNavigationOverlay delegates to onNavigate when available for correct URL
- Fix split mode: Console passes mainContent to NavigationOverlay for split layout
- Fix popover mode: NavigationOverlay falls back to Dialog when no popoverTrigger provided
- Fix plugin-view: Add split/popover branches in handleRowClick

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

Author: Copilot

apps/console/src/components/ObjectView.tsx

@@ -425,10 +425,19 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
     const navOverlay = useNavigationOverlay({
         navigation: detailNavigation,
         objectName: objectDef.name,
-        onNavigate: (recordId: string | number, _action?: string) => {
-            const newParams = new URLSearchParams(searchParams);
-            newParams.set('recordId', String(recordId));
-            setSearchParams(newParams);
+        onNavigate: (recordId: string | number, action?: string) => {
+            if (action === 'new_window') {
+                // Open record detail in a new browser tab with Console-correct URL
+                const basePath = window.location.pathname.replace(/\/view\/.*$/, '');
+                window.open(`${basePath}/record/${String(recordId)}`, '_blank');
+                return;
+            }
+            // page / view mode — navigate to record detail page
+            if (viewId) {
+                navigate(`../../record/${String(recordId)}`, { relative: 'path' });
+            } else {
+                navigate(`record/${String(recordId)}`);
+            }
         },
     });
     const handleDrawerClose = () => {
@@ -633,9 +642,15 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
         onNavigate: (recordId: string | number, mode: 'view' | 'edit') => {
             if (mode === 'edit') {
                 onEdit?.({ _id: recordId, id: recordId });
+            } else if (mode === 'view') {
+                if (viewId) {
+                    navigate(`../../record/${String(recordId)}`, { relative: 'path' });
+                } else {
+                    navigate(`record/${String(recordId)}`);
+                }
             }
         },
-    }), [objectDef.name, onEdit, activeView?.showSearch, activeView?.showFilters, activeView?.showSort]);
+    }), [objectDef.name, onEdit, activeView?.showSearch, activeView?.showFilters, activeView?.showSort, navigate, viewId]);
 
     return (
         <div className="h-full flex flex-col bg-background min-w-0 overflow-hidden">
@@ -767,6 +782,48 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
 
              {/* 2. Content — Plugin ObjectView with ViewSwitcher + Filter + Sort */}
              <div className="flex-1 overflow-hidden relative flex flex-row">
+                {navOverlay.mode === 'split' && navOverlay.isOpen ? (
+                    <NavigationOverlay
+                        {...navOverlay}
+                        setIsOpen={(open: boolean) => { if (!open) handleDrawerClose(); }}
+                        title={objectDef.label}
+                        mainContent={
+                            <div className="flex-1 min-w-0 relative h-full flex flex-col">
+                                <div className="flex-1 relative overflow-auto p-3 sm:p-4">
+                                    <PluginObjectView
+                                        schema={objectViewSchema}
+                                        dataSource={dataSource}
+                                        views={mergedViews}
+                                        activeViewId={activeViewId}
+                                        onViewChange={handleViewChange}
+                                        onEdit={(record: any) => onEdit?.(record)}
+                                        onRowClick={onRowClick || ((record: any) => {
+                                            navOverlay.handleClick(record);
+                                        })}
+                                        renderListView={renderListView}
+                                    />
+                                </div>
+                                {typeof recordCount === 'number' && (
+                                    <div data-testid="record-count-footer" className="border-t px-3 sm:px-4 py-1.5 text-xs text-muted-foreground bg-muted/5 shrink-0">
+                                        {t('console.objectView.recordCount', { count: recordCount })}
+                                    </div>
+                                )}
+                            </div>
+                        }
+                    >
+                        {(record: Record<string, unknown>) => {
+                            const recordId = (record._id || record.id) as string;
+                            return (
+                                <DrawerDetailContent
+                                    objectDef={objectDef}
+                                    recordId={recordId}
+                                    dataSource={dataSource}
+                                    onEdit={onEdit}
+                                />
+                            );
+                        }}
+                    </NavigationOverlay>
+                ) : (
                 <div className="flex-1 min-w-0 relative h-full flex flex-col">
                     <div className="flex-1 relative overflow-auto p-3 sm:p-4">
                         <PluginObjectView
@@ -789,6 +846,7 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
                         </div>
                     )}
                 </div>
+                )}
                 {/* Metadata panel only shows for admin users */}
                 <MetadataPanel
                     open={showDebug && isAdmin}
@@ -819,6 +877,7 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
              </div>
 
              {/* Record Detail Overlay — navigation mode driven by objectDef.navigation */}
+             {navOverlay.mode !== 'split' && (
              <NavigationOverlay
                  {...navOverlay}
                  setIsOpen={(open: boolean) => { if (!open) handleDrawerClose(); }}
@@ -837,6 +896,7 @@ export function ObjectView({ dataSource, objects, onEdit, onRowClick }: any) {
                      );
                  }}
              </NavigationOverlay>
+             )}
         </div>
     );
 }

packages/components/src/custom/navigation-overlay.tsx

@@ -285,6 +285,26 @@ export const NavigationOverlay: React.FC<NavigationOverlayProps> = ({
 
   // --- Popover Mode ---
   if (mode === 'popover') {
+    if (!popoverTrigger) {
+      // Fallback: render as a compact floating card when no trigger element is provided
+      if (!isOpen) return null;
+      return (
+        <Dialog open={isOpen} onOpenChange={setIsOpen}>
+          <DialogContent
+            className={cn('w-96 max-h-[80vh] overflow-y-auto p-4', className)}
+            style={widthStyle}
+          >
+            <DialogHeader>
+              <DialogTitle className="text-sm">{resolvedTitle}</DialogTitle>
+              {description && <DialogDescription className="text-xs">{description}</DialogDescription>}
+            </DialogHeader>
+            <div className="mt-2">
+              {renderContent(selectedRecord)}
+            </div>
+          </DialogContent>
+        </Dialog>
+      );
+    }
     return (
       <Popover open={isOpen} onOpenChange={setIsOpen}>
         {popoverTrigger && (

packages/plugin-view/src/ObjectView.tsx

@@ -425,6 +425,12 @@ export const ObjectView: React.FC<ObjectViewProps> = ({
         }
         return;
       }
+      if (navigationConfig.mode === 'split' || navigationConfig.mode === 'popover') {
+        setFormMode('view');
+        setSelectedRecord(record);
+        setIsFormOpen(true);
+        return;
+      }
     }
 
     // Default behavior

packages/react/src/hooks/useNavigationOverlay.ts

@@ -139,9 +139,13 @@ export function useNavigationOverlay(
         return;
       }
 
-      // new_window / openNewTab — open in new browser tab
+      // new_window / openNewTab — delegate to onNavigate when available, else open directly
       if (mode === 'new_window' || navigation.openNewTab) {
         const recordId = record._id || record.id;
+        if (onNavigate && recordId != null) {
+          onNavigate(recordId as string | number, 'new_window');
+          return;
+        }
         const viewPath = view ? `/${view}` : '';
         const url = objectName ? `/${objectName}/${recordId}${viewPath}` : `/${recordId}${viewPath}`;
         window.open(url, '_blank');