@object-ui/app-shell 3.3.2 → 4.0.0

package/dist/views/ObjectView.js

@@ -14,15 +14,16 @@ import { useParams, useSearchParams, useNavigate } from 'react-router-dom';
 const ObjectChart = lazy(() => import('@object-ui/plugin-charts').then((m) => ({ default: m.ObjectChart })));
 import { ListView } from '@object-ui/plugin-list';
 import { DetailView, RecordChatterPanel } from '@object-ui/plugin-detail';
-import { ObjectView as PluginObjectView, ViewTabBar } from '@object-ui/plugin-view';
+import { ObjectView as PluginObjectView, ViewTabBar, ManageViewsDialog } from '@object-ui/plugin-view';
 // Plugin registration is handled by the host app (e.g. apps/console/src/main.tsx
 // uses ComponentRegistry.registerLazy so heavy plugins stay code-split).
 // Do NOT add eager `import '@object-ui/plugin-*'` side-effect imports here.
-import { Button, Empty, EmptyTitle, EmptyDescription, NavigationOverlay, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, DropdownMenuSeparator } from '@object-ui/components';
-import { Plus, Table as TableIcon, Settings2, Wrench, KanbanSquare, Calendar, LayoutGrid, Activity, GanttChart, MapPin, BarChart3 } from 'lucide-react';
+import { Button, Empty, EmptyTitle, EmptyDescription, NavigationOverlay } from '@object-ui/components';
+import { Plus, Table as TableIcon, KanbanSquare, Calendar, LayoutGrid, Activity, GanttChart, MapPin, BarChart3 } from 'lucide-react';
 import { getIcon } from '../utils/getIcon';
-import { MetadataToggle, MetadataPanel, useMetadataInspector } from './MetadataInspector';
+import { MetadataPanel, useMetadataInspector } from './MetadataInspector';
 import { ViewConfigPanel } from './ViewConfigPanel';
+import { CreateViewDialog } from './CreateViewDialog';
 import { useObjectActions } from '../hooks/useObjectActions';
 import { useObjectTranslation, useObjectLabel } from '@object-ui/i18n';
 import { usePermissions } from '@object-ui/permissions';
@@ -199,12 +200,16 @@ export function ObjectView({ dataSource, objects, onEdit }) {
     const navigate = useNavigate();
     const { objectName, viewId } = useParams();
     const [searchParams, setSearchParams] = useSearchParams();
-    const { showDebug, toggleDebug } = useMetadataInspector();
+    const { showDebug } = useMetadataInspector();
     const { t } = useObjectTranslation();
     const { objectLabel, objectDescription: objectDesc } = useObjectLabel();
     // Inline view config panel state (Airtable-style right sidebar)
     const [showViewConfigPanel, setShowViewConfigPanel] = useState(false);
     const [viewConfigPanelMode, setViewConfigPanelMode] = useState('edit');
+    // Airtable-style "Create view" dialog (type picker + name input)
+    const [showCreateViewDialog, setShowCreateViewDialog] = useState(false);
+    // Manage Views dialog (vertical sortable list of all views)
+    const [manageViewsOpen, setManageViewsOpen] = useState(false);
     // Draft state for view config edits — cached locally, saved on demand
     const [viewDraft, setViewDraft] = useState(null);
     const handleViewConfigSave = useCallback((draft) => {
@@ -230,18 +235,56 @@ export function ObjectView({ dataSource, objects, onEdit }) {
     /** Create a new view via the config panel */
     const handleViewCreate = useCallback(async (config) => {
         try {
+            let createdId;
             if (dataSource?.create) {
-                const payload = { objectName, ...config };
-                await dataSource.create('sys_view', payload);
+                // Prefill sensible defaults so the saved view renders rows
+                // immediately even if the user didn't pick columns yet.
+                const objectDef = objects?.find?.((o) => o.name === objectName);
+                const SYSTEM_FIELDS = new Set([
+                    'id', 'created_at', 'createdAt', 'updated_at', 'updatedAt',
+                    'deleted_at', 'deletedAt', 'created_by', 'createdBy',
+                    'updated_by', 'updatedBy', '_version', '_rev',
+                ]);
+                let defaultColumns = [];
+                if (Array.isArray(objectDef?.compactLayout) && objectDef.compactLayout.length > 0) {
+                    defaultColumns = objectDef.compactLayout.filter((n) => objectDef.fields?.[n]);
+                }
+                else if (objectDef?.fields) {
+                    defaultColumns = Object.entries(objectDef.fields)
+                        .filter(([name, f]) => f && !f.hidden && !SYSTEM_FIELDS.has(name))
+                        .map(([name]) => name)
+                        .slice(0, 5);
+                }
+                const incomingColumns = Array.isArray(config.columns) && config.columns.length > 0
+                    ? config.columns
+                    : defaultColumns;
+                const payload = {
+                    objectName,
+                    ...config,
+                    columns: incomingColumns,
+                };
+                const created = await dataSource.create('sys_view', payload);
+                createdId = created?.id ?? created?._id;
             }
             setShowViewConfigPanel(false);
             setViewConfigPanelMode('edit');
             setRefreshKey(k => k + 1);
+            // Auto-activate the newly created view (Airtable parity).
+            // Routing falls back to the default view if `createdId` doesn't
+            // resolve yet — re-render after refresh will pick it up.
+            if (createdId) {
+                if (viewId) {
+                    navigate(`../${createdId}`, { relative: 'path' });
+                }
+                else {
+                    navigate(`view/${createdId}`);
+                }
+            }
         }
         catch (err) {
             console.error('[ViewConfigPanel] Failed to create view:', err);
         }
-    }, [dataSource, objectName]);
+    }, [dataSource, objectName, objects, navigate, viewId]);
     // Record count tracking for footer
     const [recordCount, setRecordCount] = useState(undefined);
     // Admin users automatically get design tools (no toggle needed)
@@ -253,31 +296,66 @@ export function ObjectView({ dataSource, objects, onEdit }) {
     if (!objectDef) {
         return (_jsx("div", { className: "h-full p-4 flex items-center justify-center", children: _jsxs(Empty, { children: [_jsx("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-muted", children: _jsx(TableIcon, { className: "h-6 w-6 text-muted-foreground" }) }), _jsx(EmptyTitle, { children: t('console.objectView.objectNotFound') }), _jsxs(EmptyDescription, { children: [t('console.objectView.objectNotFoundDescription', { objectName }), ' ', t('console.objectView.objectNotFoundHint')] })] }) }));
     }
+    // Refresh trigger — bumped after view CRUD or external data mutations.
+    const [refreshKey, setRefreshKey] = useState(0);
+    // ─── User-defined views (sys_view) ──────────────────────────────────
+    // Saved views created via the ViewConfigPanel ("Add View") are persisted
+    // to the `sys_view` object. We fetch them here and merge into `views` so
+    // the ViewTabBar can render them alongside metadata-defined listViews.
+    const [savedViews, setSavedViews] = useState([]);
+    useEffect(() => {
+        let cancelled = false;
+        if (!dataSource?.find || !objectName) {
+            setSavedViews([]);
+            return;
+        }
+        dataSource
+            .find('sys_view', {
+            $filter: ['objectName', '=', objectName],
+            $orderby: [{ field: 'created_at', order: 'asc' }],
+            $top: 200,
+        })
+            .then((res) => {
+            if (cancelled)
+                return;
+            const rows = Array.isArray(res)
+                ? res
+                : Array.isArray(res?.data) ? res.data
+                    : Array.isArray(res?.records) ? res.records
+                        : Array.isArray(res?.value) ? res.value
+                            : [];
+            // Defensive client-side filter: only keep rows that look like
+            // sys_view records for *this* object. Adapters that don't
+            // honour $filter (or test mocks that ignore it) won't pollute
+            // the view list with arbitrary records.
+            const filtered = rows.filter(r => r && r.objectName === objectName);
+            setSavedViews(filtered);
+        })
+            .catch((err) => {
+            console.error('[ObjectView] Failed to load sys_view records:', err);
+            if (!cancelled)
+                setSavedViews([]);
+        });
+        return () => { cancelled = true; };
+    }, [dataSource, objectName, refreshKey]);
     // Resolve Views from objectDef.listViews (camelCase per @objectstack/spec)
     const views = useMemo(() => {
-        const definedViews = objectDef.listViews || objectDef.list_views || {};
-        const viewList = Object.entries(definedViews).map(([key, value]) => ({
-            id: key,
-            ...value,
-            type: value.type || 'grid'
-        }));
-        if (viewList.length === 0) {
-            // Default column resolution priority:
-            //   1. `compactLayout` (curated primary business fields).
-            //   2. Business fields only — exclude system-managed identifiers/audit
-            //      columns (id, created_at, updated_at, …) and fields explicitly
-            //      marked hidden/readonly on the schema. First 5 kept for compactness.
-            const SYSTEM_FIELDS = new Set([
-                'id', 'created_at', 'createdAt', 'updated_at', 'updatedAt',
-                'deleted_at', 'deletedAt', 'created_by', 'createdBy',
-                'updated_by', 'updatedBy', '_version', '_rev',
-            ]);
-            let defaultColumns = [];
+        // Default column resolution priority:
+        //   1. `compactLayout` (curated primary business fields).
+        //   2. Business fields only — exclude system-managed identifiers/audit
+        //      columns (id, created_at, updated_at, …) and fields explicitly
+        //      marked hidden/readonly on the schema. First 5 kept for compactness.
+        const SYSTEM_FIELDS = new Set([
+            'id', 'created_at', 'createdAt', 'updated_at', 'updatedAt',
+            'deleted_at', 'deletedAt', 'created_by', 'createdBy',
+            'updated_by', 'updatedBy', '_version', '_rev',
+        ]);
+        const resolveDefaultColumns = () => {
             if (Array.isArray(objectDef.compactLayout) && objectDef.compactLayout.length > 0) {
-                defaultColumns = objectDef.compactLayout.filter((n) => objectDef.fields?.[n]);
+                return objectDef.compactLayout.filter((n) => objectDef.fields?.[n]);
             }
-            else if (objectDef.fields) {
-                defaultColumns = Object.entries(objectDef.fields)
+            if (objectDef.fields) {
+                return Object.entries(objectDef.fields)
                     .filter(([name, f]) => {
                     if (!f)
                         return false;
@@ -290,17 +368,111 @@ export function ObjectView({ dataSource, objects, onEdit }) {
                     .map(([name]) => name)
                     .slice(0, 5);
             }
+            return [];
+        };
+        const definedViews = objectDef.listViews || objectDef.list_views || {};
+        const viewList = Object.entries(definedViews).map(([key, value]) => ({
+            id: key,
+            ...value,
+            type: value.type || 'grid'
+        }));
+        if (viewList.length === 0) {
             viewList.push({
                 id: 'all',
                 label: t('console.objectView.allRecords'),
                 type: 'grid',
-                columns: defaultColumns,
+                columns: resolveDefaultColumns(),
             });
         }
+        // Merge user-defined views (sys_view) after metadata-defined views.
+        // Dedup by id so a saved view that shadows a metadata view wins.
+        const metaIds = new Set(viewList.map(v => v.id));
+        for (const sv of savedViews) {
+            const id = sv.id || sv._id;
+            if (!id)
+                continue;
+            const normalized = {
+                label: sv.label || sv.name || id,
+                type: sv.type || 'grid',
+                columns: sv.columns,
+                filter: sv.filter,
+                sort: sv.sort,
+                showSearch: sv.showSearch,
+                showFilters: sv.showFilters,
+                showSort: sv.showSort,
+                isPinned: sv.isPinned,
+                isDefault: sv.isDefault,
+                visibility: sv.visibility,
+                sortOrder: sv.sortOrder,
+                ...sv,
+                id,
+            };
+            if (metaIds.has(id)) {
+                const idx = viewList.findIndex(v => v.id === id);
+                viewList[idx] = { ...viewList[idx], ...normalized };
+            }
+            else {
+                viewList.push(normalized);
+            }
+        }
+        // Apply default columns to any grid-like view that has no explicit
+        // columns (e.g. saved views created via "Add View" before the user
+        // configured fields). Without this, the grid renders an empty header
+        // row and the data fetch omits a `select` clause.
+        const GRID_LIKE = new Set(['grid', 'list', 'table']);
+        for (const v of viewList) {
+            if (!GRID_LIKE.has(v.type))
+                continue;
+            if (!Array.isArray(v.columns) || v.columns.length === 0) {
+                v.columns = resolveDefaultColumns();
+            }
+        }
+        // Stable sort: respect a per-user view-order preference (for both
+        // metadata and saved views). Falls back to: metadata views first
+        // in declared order, then saved views by `sortOrder` / created_at.
+        const indexOf = new Map(viewList.map((v, i) => [v.id, i]));
+        let userOrder = [];
+        try {
+            const raw = typeof window !== 'undefined'
+                ? window.localStorage?.getItem(`viewOrder:${objectDef.name}`)
+                : null;
+            if (raw)
+                userOrder = JSON.parse(raw);
+        }
+        catch { /* ignore */ }
+        const userOrderIndex = new Map(userOrder.map((id, i) => [id, i]));
+        viewList.sort((a, b) => {
+            const aUser = userOrderIndex.get(a.id);
+            const bUser = userOrderIndex.get(b.id);
+            if (aUser !== undefined && bUser !== undefined)
+                return aUser - bUser;
+            if (aUser !== undefined)
+                return -1;
+            if (bUser !== undefined)
+                return 1;
+            const aSaved = savedViews.find((sv) => (sv.id || sv._id) === a.id);
+            const bSaved = savedViews.find((sv) => (sv.id || sv._id) === b.id);
+            if (!aSaved && !bSaved)
+                return (indexOf.get(a.id) ?? 0) - (indexOf.get(b.id) ?? 0);
+            if (!aSaved)
+                return -1;
+            if (!bSaved)
+                return 1;
+            const ao = typeof aSaved.sortOrder === 'number' ? aSaved.sortOrder : Number.MAX_SAFE_INTEGER;
+            const bo = typeof bSaved.sortOrder === 'number' ? bSaved.sortOrder : Number.MAX_SAFE_INTEGER;
+            if (ao !== bo)
+                return ao - bo;
+            return (aSaved.created_at || '').localeCompare(bSaved.created_at || '');
+        });
         return viewList;
-    }, [objectDef]);
-    // Active View State — merge saved draft if available for this view
-    const activeViewId = viewId || searchParams.get('view') || views[0]?.id;
+    }, [objectDef, savedViews, t]);
+    // Active View State — merge saved draft if available for this view.
+    // Resolution priority: URL viewId → ?view= → user-marked default → first.
+    const defaultViewId = useMemo(() => {
+        const def = views.find((v) => v.isDefault);
+        return def?.id;
+    }, [views]);
+    const activeViewId = viewId || searchParams.get('view') || defaultViewId || views[0]?.id;
     const baseView = views.find((v) => v.id === activeViewId) || views[0];
     const activeView = viewDraft && viewDraft.id === baseView?.id
         ? { ...baseView, ...viewDraft }
@@ -318,8 +490,12 @@ export function ObjectView({ dataSource, objects, onEdit }) {
         const matchedView = views.find((v) => v.id === newViewId);
         if (!matchedView)
             return;
-        // Auto-close the config panel when switching views
-        setShowViewConfigPanel(false);
+        // Auto-close the config panel only when actually switching to a
+        // different view. Same-view clicks (e.g., bubbling from the actions
+        // dropdown menu item) must not stomp on a freshly-opened panel.
+        if (matchedView.id !== activeViewId) {
+            setShowViewConfigPanel(false);
+        }
         if (viewId) {
             navigate(`../${matchedView.id}`, { relative: "path" });
         }
@@ -329,8 +505,7 @@ export function ObjectView({ dataSource, objects, onEdit }) {
     };
     // ViewSwitcher callbacks — wired to both PluginObjectView instances
     const handleCreateView = useCallback(() => {
-        setViewConfigPanelMode('create');
-        setShowViewConfigPanel(true);
+        setShowCreateViewDialog(true);
     }, []);
     const handleViewAction = useCallback((actionType, viewType) => {
         if (actionType === 'settings') {
@@ -341,19 +516,30 @@ export function ObjectView({ dataSource, objects, onEdit }) {
             setShowViewConfigPanel(true);
         }
     }, [views, handleViewChange]);
-    // Action system for toolbar operations
-    const [refreshKey, setRefreshKey] = useState(0);
-    const actions = useObjectActions({
-        objectName: objectDef.name,
-        objectLabel: objectDef.label,
-        dataSource,
-        onEdit,
-        onRefresh: () => setRefreshKey(k => k + 1),
-    });
-    // ─── ActionProvider handlers for schema-driven toolbar actions ──────
-    const currentUser = user
-        ? { id: user.id, name: user.name, avatar: user.image }
-        : FALLBACK_USER;
+    // ─── ViewTabBar CRUD callbacks (Phase 2) ────────────────────────────
+    /** Returns true if the view is backed by a sys_view record (mutable). */
+    const isSavedView = useCallback((vid) => {
+        return savedViews.some((sv) => (sv.id || sv._id) === vid);
+    }, [savedViews]);
+    const handleRenameView = useCallback(async (vid, newName) => {
+        if (!dataSource?.update)
+            return;
+        if (!isSavedView(vid)) {
+            toast.error(t('console.objectView.cannotEditMetaView') || 'Built-in views cannot be renamed.');
+            return;
+        }
+        try {
+            await dataSource.update('sys_view', vid, { label: newName });
+            setRefreshKey(k => k + 1);
+        }
+        catch (err) {
+            console.error('[ViewTabBar] Failed to rename view:', err);
+            toast.error('Failed to rename view');
+        }
+    }, [dataSource, isSavedView, t]);
+    // Promise-based confirm/param dialogs — declared early so destructive
+    // handlers (delete, etc.) can `await confirmHandler(...)` for a proper
+    // Airtable-style confirmation flow.
     const [confirmState, setConfirmState] = useState({ open: false, message: '' });
     const [paramState, setParamState] = useState({ open: false, params: [] });
     const confirmHandler = useCallback((message, options) => {
@@ -366,6 +552,151 @@ export function ObjectView({ dataSource, objects, onEdit }) {
             setParamState({ open: true, params, resolve });
         });
     }, []);
+    const handleDeleteView = useCallback(async (vid) => {
+        if (!dataSource?.delete)
+            return;
+        if (!isSavedView(vid)) {
+            toast.error(t('console.objectView.cannotDeleteMetaView') || 'Built-in views cannot be deleted.');
+            return;
+        }
+        const targetView = views.find((v) => v.id === vid);
+        const viewLabel = targetView?.label || vid;
+        const confirmed = await confirmHandler(t('console.objectView.deleteViewConfirm', { name: viewLabel }) ||
+            `Are you sure you want to delete the view "${viewLabel}"? This cannot be undone.`, {
+            title: t('console.objectView.deleteViewTitle') || 'Delete view',
+            confirmText: t('console.objectView.delete') || 'Delete',
+            cancelText: t('console.objectView.cancel') || 'Cancel',
+        });
+        if (!confirmed)
+            return;
+        try {
+            await dataSource.delete('sys_view', vid);
+            // If we deleted the active view, fall back to the first remaining view.
+            if (vid === activeViewId) {
+                const fallback = views.find((v) => v.id !== vid);
+                if (fallback)
+                    navigate(viewId ? `../${fallback.id}` : `view/${fallback.id}`, viewId ? { relative: 'path' } : undefined);
+            }
+            setRefreshKey(k => k + 1);
+        }
+        catch (err) {
+            console.error('[ViewTabBar] Failed to delete view:', err);
+            toast.error('Failed to delete view');
+        }
+    }, [dataSource, isSavedView, activeViewId, views, viewId, navigate, t, confirmHandler]);
+    const handleDuplicateView = useCallback(async (vid) => {
+        if (!dataSource?.create)
+            return;
+        const source = views.find((v) => v.id === vid);
+        if (!source)
+            return;
+        try {
+            const { id: _omit, created_at, updated_at, ...rest } = source;
+            const newId = `view_${Date.now()}`;
+            const payload = {
+                ...rest,
+                objectName,
+                id: newId,
+                label: `${source.label || vid} (Copy)`,
+                isDefault: false,
+                isPinned: false,
+            };
+            await dataSource.create('sys_view', payload);
+            setRefreshKey(k => k + 1);
+            // Auto-activate the duplicate (Airtable parity).
+            if (viewId) {
+                navigate(`../${newId}`, { relative: 'path' });
+            }
+            else {
+                navigate(`view/${newId}`);
+            }
+        }
+        catch (err) {
+            console.error('[ViewTabBar] Failed to duplicate view:', err);
+            toast.error('Failed to duplicate view');
+        }
+    }, [dataSource, views, objectName, navigate, viewId]);
+    const handlePinView = useCallback(async (vid, pinned) => {
+        if (!dataSource?.update)
+            return;
+        if (!isSavedView(vid)) {
+            toast.error(t('console.objectView.cannotEditMetaView') || 'Built-in views cannot be pinned.');
+            return;
+        }
+        try {
+            await dataSource.update('sys_view', vid, { isPinned: pinned });
+            setRefreshKey(k => k + 1);
+        }
+        catch (err) {
+            console.error('[ViewTabBar] Failed to pin view:', err);
+        }
+    }, [dataSource, isSavedView, t]);
+    const handleSetDefaultView = useCallback(async (vid) => {
+        if (!dataSource?.update)
+            return;
+        try {
+            // Clear `isDefault` on all other saved views, then set this one.
+            const updates = savedViews
+                .filter((sv) => (sv.id || sv._id) !== vid && sv.isDefault)
+                .map((sv) => dataSource.update('sys_view', sv.id || sv._id, { isDefault: false }));
+            if (isSavedView(vid)) {
+                updates.push(dataSource.update('sys_view', vid, { isDefault: true }));
+            }
+            await Promise.all(updates);
+            setRefreshKey(k => k + 1);
+        }
+        catch (err) {
+            console.error('[ViewTabBar] Failed to set default view:', err);
+            toast.error('Failed to set default view');
+        }
+    }, [dataSource, savedViews, isSavedView]);
+    const handleReorderViews = useCallback(async (orderedIds) => {
+        // Persist order for ALL views (incl. metadata) in localStorage so the
+        // UI immediately reflects the new ordering, including reorderings
+        // that involve metadata-only views.
+        try {
+            if (typeof window !== 'undefined') {
+                window.localStorage?.setItem(`viewOrder:${objectName}`, JSON.stringify(orderedIds));
+            }
+        }
+        catch { /* ignore */ }
+        // Best-effort: also persist `sortOrder` on each saved view so other
+        // sessions / users can pick up the order from the backend.
+        if (dataSource?.update) {
+            const savedIdSet = new Set(savedViews.map((sv) => sv.id || sv._id));
+            const updates = orderedIds
+                .filter(id => savedIdSet.has(id))
+                .map((id, idx) => dataSource.update('sys_view', id, { sortOrder: idx }));
+            try {
+                await Promise.all(updates);
+            }
+            catch (err) {
+                console.error('[ViewTabBar] Failed to reorder views:', err);
+            }
+        }
+        setRefreshKey(k => k + 1);
+    }, [dataSource, savedViews, objectName]);
+    const handleConfigView = useCallback((vid) => {
+        if (vid !== activeViewId)
+            handleViewChange(vid);
+        setViewConfigPanelMode('edit');
+        setShowViewConfigPanel(true);
+    }, [activeViewId, handleViewChange]);
+    const handleAddView = useCallback(() => {
+        setShowCreateViewDialog(true);
+    }, []);
+    // Action system for toolbar operations — refreshKey moved up (declared earlier).
+    const actions = useObjectActions({
+        objectName: objectDef.name,
+        objectLabel: objectDef.label,
+        dataSource,
+        onEdit,
+        onRefresh: () => setRefreshKey(k => k + 1),
+    });
+    // ─── ActionProvider handlers for schema-driven toolbar actions ──────
+    const currentUser = user
+        ? { id: user.id, name: user.name, avatar: user.image }
+        : FALLBACK_USER;
     const toastHandler = useCallback((message, options) => {
         if (options?.type === 'error')
             toast.error(message);
@@ -520,16 +851,16 @@ export function ObjectView({ dataSource, objects, onEdit }) {
             window.open(`${basePath}/record/${encodeURIComponent(String(recordId))}`, '_blank');
             return;
         }
-        // page / view mode — navigate to record detail page
-        // Handles action === 'view' (from useNavigationOverlay page mode) and
-        // default fallthrough for any unrecognised action
-        if (action === 'view' || !action || action === 'page') {
-            if (viewId) {
-                navigate(`../../record/${encodeURIComponent(String(recordId))}`, { relative: 'path' });
-            }
-            else {
-                navigate(`record/${encodeURIComponent(String(recordId))}`);
-            }
+        // Default: navigate to record detail page.
+        // `action` may be 'view' / 'page' / undefined, OR a custom view name
+        // forwarded from `navigation.view` (e.g. 'detail_form'). The view
+        // variant is resolved by RecordDetailView from its own config, so
+        // any non-`new_window` action lands on the record detail route.
+        if (viewId) {
+            navigate(`../../record/${encodeURIComponent(String(recordId))}`, { relative: 'path' });
+        }
+        else {
+            navigate(`record/${encodeURIComponent(String(recordId))}`);
         }
     }, [navigate, viewId]);
     const navOverlay = useNavigationOverlay({
@@ -738,13 +1069,27 @@ export function ObjectView({ dataSource, objects, onEdit }) {
                                             actions: objectDef.actions,
                                             size: 'sm',
                                             variant: 'outline',
-                                        } })), isAdmin && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { size: "sm", variant: "ghost", className: "shadow-none h-8 sm:h-9 px-2", title: t('console.objectView.designTools'), children: _jsx(Wrench, { className: "h-4 w-4" }) }) }), _jsxs(DropdownMenuContent, { align: "end", className: "w-48", children: [_jsxs(DropdownMenuItem, { onClick: toggleDebug, children: [_jsx(MetadataToggle, { open: showDebug, onToggle: toggleDebug, className: "hidden" }), t('console.objectView.metadataInspector')] }), _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: () => { setViewConfigPanelMode('edit'); setShowViewConfigPanel(prev => !prev); }, children: [_jsx(Settings2, { className: "h-4 w-4 mr-2" }), t('console.objectView.editView')] }), _jsxs(DropdownMenuItem, { onClick: () => { setViewConfigPanelMode('create'); setShowViewConfigPanel(true); }, children: [_jsx(Plus, { className: "h-4 w-4 mr-2" }), t('console.objectView.addView')] })] })] }))] })] }), views.length > 1 && (_jsx("div", { className: "border-b px-3 sm:px-4 bg-background overflow-x-auto shrink-0", children: _jsx(ViewTabBar, { views: views.map((view) => ({
+                                        } }))] })] }), views.length >= 1 && (() => {
+                        const viewTabItems = views.map((view) => {
+                            const saved = savedViews.find((sv) => (sv.id || sv._id) === view.id);
+                            return {
                                 id: view.id,
                                 label: view.label,
                                 type: view.type,
                                 hasActiveFilters: Array.isArray(view.filter) && view.filter.length > 0,
                                 hasActiveSort: Array.isArray(view.sort) && view.sort.length > 0,
-                            })), activeViewId: activeViewId, onViewChange: handleViewChange, viewTypeIcons: VIEW_TYPE_ICONS, config: { reorderable: false } }) })), _jsxs("div", { className: "flex-1 overflow-hidden relative flex flex-row", children: [navOverlay.mode === 'split' && navOverlay.isOpen ? (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
+                                isDefault: !!(saved?.isDefault ?? view.isDefault),
+                                isPinned: !!(saved?.isPinned ?? view.isPinned),
+                                visibility: saved?.visibility ?? view.visibility,
+                            };
+                        });
+                        return (_jsxs("div", { className: "border-b px-3 sm:px-4 bg-background overflow-x-auto shrink-0", children: [_jsx(ViewTabBar, { views: viewTabItems, activeViewId: activeViewId, onViewChange: handleViewChange, viewTypeIcons: VIEW_TYPE_ICONS, config: {
+                                        reorderable: false,
+                                        showAddButton: isAdmin,
+                                        showPinnedSection: true,
+                                        showVisibilityGroups: true,
+                                    }, onAddView: isAdmin ? handleAddView : undefined, onRenameView: isAdmin ? handleRenameView : undefined, onDeleteView: isAdmin ? handleDeleteView : undefined, onDuplicateView: isAdmin ? handleDuplicateView : undefined, onPinView: isAdmin ? handlePinView : undefined, onSetDefaultView: isAdmin ? handleSetDefaultView : undefined, onConfigView: isAdmin ? handleConfigView : undefined, onManageViews: isAdmin ? () => setManageViewsOpen(true) : undefined }), isAdmin && (_jsx(ManageViewsDialog, { open: manageViewsOpen, onOpenChange: setManageViewsOpen, views: viewTabItems, activeViewId: activeViewId, viewTypeIcons: VIEW_TYPE_ICONS, onRename: handleRenameView, onDelete: handleDeleteView, onDuplicate: handleDuplicateView, onSetDefault: handleSetDefaultView, onSetPinned: handlePinView, onReorder: handleReorderViews, onAddView: handleAddView, onConfigView: handleConfigView }))] }));
+                    })(), _jsxs("div", { className: "flex-1 overflow-hidden relative flex flex-row", children: [navOverlay.mode === 'split' && navOverlay.isOpen ? (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
                                     handleDrawerClose(); }, title: objectLabel(objectDef), mainContent: _jsxs("div", { className: "flex-1 min-w-0 relative h-full flex flex-col", children: [_jsx("div", { className: "flex-1 relative overflow-auto p-3 sm:p-4", children: _jsx(PluginObjectView, { schema: objectViewSchema, dataSource: dataSource, views: mergedViews, activeViewId: activeViewId, onViewChange: handleViewChange, onEdit: (record) => onEdit?.(record), onRowClick: (record) => {
                                                     navOverlay.handleClick(record);
                                                 }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }), typeof recordCount === 'number' && (_jsx("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", children: t('console.objectView.recordCount', { count: recordCount }) }))] }), children: (record) => {
@@ -755,7 +1100,7 @@ export function ObjectView({ dataSource, objects, onEdit }) {
                                         }, renderListView: renderListView, onCreateView: handleCreateView, onViewAction: handleViewAction }) }) })), _jsx(MetadataPanel, { open: showDebug && isAdmin, sections: [
                                     { title: 'View Configuration', data: activeView },
                                     { title: 'Object Definition', data: objectDef },
-                                ] }), _jsx("div", { "data-testid": "view-config-panel-wrapper", className: `transition-[max-width,opacity] duration-300 ease-in-out overflow-hidden ${showViewConfigPanel && isAdmin ? 'max-w-[280px] opacity-100' : 'max-w-0 opacity-0'}`, children: _jsx(ViewConfigPanel, { open: showViewConfigPanel && isAdmin, onClose: () => { setShowViewConfigPanel(false); setViewConfigPanelMode('edit'); }, mode: viewConfigPanelMode, activeView: activeView, objectDef: objectDef, recordCount: recordCount, onSave: handleViewConfigSave, onViewUpdate: handleViewUpdate, onCreate: handleViewCreate }) })] }), navOverlay.mode !== 'split' && (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
+                                ] }), _jsx("div", { "data-testid": "view-config-panel-wrapper", className: `transition-[max-width,opacity] duration-300 ease-in-out overflow-hidden ${showViewConfigPanel && isAdmin ? 'max-w-[280px] opacity-100' : 'max-w-0 opacity-0'}`, children: _jsx(ViewConfigPanel, { open: showViewConfigPanel && isAdmin, onClose: () => { setShowViewConfigPanel(false); setViewConfigPanelMode('edit'); }, mode: viewConfigPanelMode, activeView: activeView, objectDef: objectDef, recordCount: recordCount, onSave: handleViewConfigSave, onViewUpdate: handleViewUpdate, onCreate: handleViewCreate }) }), _jsx(CreateViewDialog, { open: showCreateViewDialog && isAdmin, onOpenChange: setShowCreateViewDialog, existingLabels: views.map((v) => v.label).filter(Boolean), objectDef: objectDef, onCreate: (cfg) => handleViewCreate(cfg) })] }), navOverlay.mode !== 'split' && (_jsx(NavigationOverlay, { ...navOverlay, setIsOpen: (open) => { if (!open)
                             handleDrawerClose(); }, title: objectDef.label, className: navOverlay.mode === 'drawer' ? 'w-[90vw] sm:max-w-2xl p-0 overflow-hidden' : undefined, children: (record) => {
                             const recordId = (record.id || record._id);
                             return (_jsx(DrawerDetailContent, { objectDef: objectDef, recordId: recordId, dataSource: dataSource, onEdit: onEdit }));

package/dist/views/ViewConfigPanel.d.ts

@@ -1,10 +1,12 @@
 /**
- * ViewConfigPanel — Schema-Driven
+ * ViewConfigPanel — Airtable-style simplified configuration panel.
  *
- * Airtable-style right-side configuration panel for inline view editing.
- * Migrated to Schema-Driven architecture using ConfigPanelRenderer +
- * useConfigDraft, replacing ~1600 lines of imperative code with a
- * declarative schema factory.
+ * Renders a focused, opinionated set of sections (Page / Data /
+ * Appearance / Toolbar / User actions / Navigation / Advanced) — matching
+ * Airtable's Interface designer right rail. Power-user sections (records,
+ * sharing, accessibility) are intentionally excluded to keep the panel
+ * approachable; they can be re-introduced later as a dedicated "advanced"
+ * settings dialog if needed.
  *
  * All changes are buffered in a local draft state. Clicking Save commits
  * the draft via onSave; Discard resets to the original activeView.

package/dist/views/ViewConfigPanel.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
- * ViewConfigPanel — Schema-Driven
+ * ViewConfigPanel — Airtable-style simplified configuration panel.
  *
- * Airtable-style right-side configuration panel for inline view editing.
- * Migrated to Schema-Driven architecture using ConfigPanelRenderer +
- * useConfigDraft, replacing ~1600 lines of imperative code with a
- * declarative schema factory.
+ * Renders a focused, opinionated set of sections (Page / Data /
+ * Appearance / Toolbar / User actions / Navigation / Advanced) — matching
+ * Airtable's Interface designer right rail. Power-user sections (records,
+ * sharing, accessibility) are intentionally excluded to keep the panel
+ * approachable; they can be re-introduced later as a dedicated "advanced"
+ * settings dialog if needed.
  *
  * All changes are buffered in a local draft state. Clicking Save commits
  * the draft via onSave; Discard resets to the original activeView.
@@ -51,7 +53,7 @@ export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, obje
     // Bridge: filter/sort → builder format
     const filterGroupValue = useMemo(() => toFilterGroup(draft.filter), [draft.filter]);
     const sortItemsValue = useMemo(() => toSortItems(draft.sort), [draft.sort]);
-    // Build schema
+    // Build schema — always essentials-only (Airtable-style focused layout).
     const schema = useMemo(() => buildViewConfigSchema({
         t,
         fieldOptions,
@@ -59,6 +61,7 @@ export function ViewConfigPanel({ open, onClose, mode = 'edit', activeView, obje
         updateField,
         filterGroupValue,
         sortItemsValue,
+        essentialOnly: true,
     }), [t, fieldOptions, objectDef, updateField, filterGroupValue, sortItemsValue]);
     // Override breadcrumb with dynamic view type
     const viewType = draft.type || 'grid';