@rebasepro/admin 0.0.1-canary.eae7889 → 0.1.0

package/src/routes/RebaseRoute.tsx

@@ -1,10 +1,10 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { EntityCollection, ViewMode } from "@rebasepro/types";
 import { Blocker, useBlocker, useLocation } from "react-router";
 import { EntityEditView } from "../components/EntityEditView";
 import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { EntityCollectionView } from "../components";
-import { NotFoundPage } from "@rebasepro/core";
+import { NotFoundPage, useUserConfigurationPersistence } from "@rebasepro/core";
 import { UnsavedChangesDialog } from "@rebasepro/core";
 import { CircularProgressCenter } from "@rebasepro/ui";
 import { getNavigationEntriesFromPath, NavigationViewCollectionInternal, NavigationViewEntityCustomInternal, NavigationViewInternal } from "@rebasepro/common";
@@ -18,6 +18,7 @@ export function RebaseRoute() {
     const collectionRegistry = useCollectionRegistryController();
     const urlController = useUrlController();
     const breadcrumbs = useBreadcrumbsController();
+    const userConfigPersistence = useUserConfigurationPersistence();
 
     const hash = location.hash;
     const isSidePanel = hash.includes("#side");
@@ -92,7 +93,7 @@ export function RebaseRoute() {
         return <EntityCollectionView
             key={`collection_view_${collection.slug}`}
             {...collection}
-            parentCollectionIds={[]}
+            parentCollectionSlugs={[]} parentEntityIds={[]}
             path={collection.slug}
             updateUrl={true}
             Actions={toArray(collection.Actions)}/>
@@ -115,7 +116,7 @@ export function RebaseRoute() {
             return <EntityCollectionView
                 key={`collection_view_${collection.slug}`}
                 {...collection}
-                parentCollectionIds={[]}
+                parentCollectionSlugs={[]} parentEntityIds={[]}
                 path={collection.slug}
                 updateUrl={true}
                 Actions={toArray(collection.Actions)}/>;
@@ -141,7 +142,25 @@ export function RebaseRoute() {
         collection = collectionRegistry.getCollection(firstCollectionEntry.id);
         if (!collection)
             collection = collectionRegistry.getCollection(firstCollectionEntry.slug);
-        if (collection && (collection.openEntityMode ?? "split") === "split") {
+
+        // Resolve the effective openEntityMode based on the current view mode.
+        // Priority: collection.openEntityMode (explicit) > view-mode-based default.
+        // View mode priority: URL __view param > saved user config > collection default.
+        let effectiveOpenMode: "side_panel" | "full_screen" | "split" | undefined = collection?.openEntityMode;
+        if (!effectiveOpenMode && collection) {
+            const urlViewParam = new URLSearchParams(location.search).get("__view");
+            let currentViewMode: ViewMode = collection.defaultViewMode ?? "list";
+            if (urlViewParam && ["list", "table", "kanban", "cards"].includes(urlViewParam)) {
+                currentViewMode = urlViewParam as ViewMode;
+            } else {
+                const savedView = userConfigPersistence?.getCollectionConfig(collection.slug)?.defaultViewMode;
+                if (savedView) currentViewMode = savedView as ViewMode;
+            }
+            if (currentViewMode === "kanban") effectiveOpenMode = "side_panel";
+            else if (currentViewMode === "table" || currentViewMode === "cards") effectiveOpenMode = "full_screen";
+            else effectiveOpenMode = "split";
+        }
+        if (collection && effectiveOpenMode === "split") {
             // Extract subcollection tab from the 3rd entry if present
             let selectedTab: string | undefined;
             if (navigationEntries.length === 3) {
@@ -168,7 +187,7 @@ export function RebaseRoute() {
             return <EntityCollectionView
                 key={`collection_view_${collection.slug}`}
                 {...collection}
-                parentCollectionIds={[]}
+                parentCollectionSlugs={[]} parentEntityIds={[]}
                 path={collection.slug}
                 updateUrl={true}
                 selectedEntityId={lastEntityEntry.entityId}
@@ -216,6 +235,10 @@ function EntityFullScreenRoute({
     const navigate = useNavigate();
     const location = useLocation();
 
+    // defaultValues may be carried via location.state when openNewDocument() is called
+    // for full-screen mode. We read it once on mount — after that, the form owns its state.
+    const defaultValues = (location.state as { defaultValues?: Record<string, unknown> } | null)?.defaultValues;
+
     // Preserve the current hash (e.g. #full) across tab/save navigations
     const hash = location.hash;
 
@@ -253,7 +276,8 @@ function EntityFullScreenRoute({
 
     const [selectedTab, setSelectedTab] = useState<string | undefined>(urlTab);
 
-    const parentCollectionIds = collectionRegistry.getParentCollectionIds(navigationPath);
+    const parentCollectionSlugs = collectionRegistry.getParentCollectionSlugs(navigationPath);
+    const parentEntityIds = collectionRegistry.getParentEntityIds(navigationPath);
     useEffect(() => {
         if (urlTab !== selectedTab) {
             setSelectedTab(urlTab);
@@ -269,10 +293,27 @@ function EntityFullScreenRoute({
     let blocker: Blocker | undefined = undefined;
     try {
         blocker = useBlocker(({
+            currentLocation,
             nextLocation
         }) => {
             if (nextLocation.pathname.startsWith(entityPath))
                 return false;
+
+            // Side panel overlay navigations preserve the underlying form via
+            // base_location in router state — no data is lost in either direction.
+
+            // Opening a side panel (e.g. clicking a relation arrow)
+            const nextHash = nextLocation.hash;
+            if (nextHash === "#side" || nextHash === "#new_side")
+                return false;
+
+            // Closing a side panel (navigate(-1) back to the form's own path)
+            const currentHash = currentLocation.hash;
+            if ((currentHash === "#side" || currentHash === "#new_side") &&
+                (nextLocation.pathname === basePath ||
+                 nextLocation.pathname.startsWith(entityPath)))
+                return false;
+
             return blocked.current;
         });
     } catch (e) {
@@ -295,9 +336,10 @@ function EntityFullScreenRoute({
         return <NotFoundPage/>;
     }
 
-    const collection = isNew
+    const rawCollection = isNew
         ? (lastCollectionEntry && "collection" in lastCollectionEntry ? lastCollectionEntry.collection : undefined)!
         : (lastEntityEntry && "parentCollection" in lastEntityEntry ? lastEntityEntry.parentCollection : undefined)!;
+    const collection = collectionRegistry.getCollection(rawCollection.slug) || rawCollection;
     const fullIdPath = isNew ? lastCollectionEntry!.slug : lastEntityEntry!.slug;
     const collectionPath = urlController.resolveDatabasePathsFrom(fullIdPath);
     return <>
@@ -309,14 +351,18 @@ function EntityFullScreenRoute({
             path={collectionPath}
             copy={isCopy}
             selectedTab={selectedTab ?? undefined}
+            defaultValues={isNew ? defaultValues : undefined}
             onValuesModified={(modified) => blocked.current = modified}
             onSaved={(params) => {
                 const newSelectedTab = params.selectedTab;
                 const newEntityId = params.entityId;
+                // Clear the hash after saving a new entity — preserving #new
+                // would cause the route to re-parse as "new" and show "not found".
+                const savedHash = isNew ? "" : hash;
                 if (newSelectedTab) {
-                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}${hash}`, { replace: true });
+                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}${savedHash}`, { replace: true });
                 } else {
-                    navigate(`${basePath}/${newEntityId}${hash}`, { replace: true });
+                    navigate(`${basePath}/${newEntityId}${savedHash}`, { replace: true });
                 }
             }}
             onTabChange={(params) => {
@@ -331,7 +377,7 @@ function EntityFullScreenRoute({
                     navigate(`${basePath}/${entityId}${hash}`, { replace: true });
                 }
             }}
-            parentCollectionIds={parentCollectionIds}
+            parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
         />
 
         <UnsavedChangesDialog

package/src/util/navigation_utils.ts

@@ -23,6 +23,7 @@ export function navigateToEntity({
     copy,
     path,
     selectedTab,
+    defaultValues,
     sideEntityController,
     onClose,
     navigation
@@ -34,6 +35,15 @@ export function navigateToEntity({
         entityId?: string | number;
         selectedTab?: string;
         copy?: boolean;
+        /**
+         * Pre-populate the new entity form with these values.
+         * Only applied when entityId is not set (i.e. "new" mode).
+         *
+         * Side panel: passed through EntitySidePanelProps → EntityEditView.
+         * Full screen: carried via React Router location.state so the route
+         * component can read it on mount without polluting the URL.
+         */
+        defaultValues?: Record<string, unknown>;
         path: string;
         sideEntityController: SideEntityController;
         onClose?: () => void;
@@ -49,7 +59,8 @@ export function navigateToEntity({
             selectedTab,
             collection,
             updateUrl: true,
-            onClose
+            onClose,
+            defaultValues
         });
 
     } else {
@@ -57,13 +68,21 @@ export function navigateToEntity({
         if (entityId && selectedTab) {
             to += `/${selectedTab}`;
         }
+        // Preserve the __view query param so the target route knows the current view mode
+        const currentViewParam = new URLSearchParams(window.location.search).get("__view");
+        if (currentViewParam) {
+            to += `${to.includes("?") ? "&" : "?"}__view=${currentViewParam}`;
+        }
         if (!entityId) {
             to += "#new";
         }
         if (copy) {
             to += "#copy";
         }
-        navigation.navigate(to);
+        // Use React Router location.state to carry defaultValues — the correct SPA
+        // approach. No URL size limits, no encoding, nothing in the address bar.
+        // EntityFullScreenRoute reads location.state.defaultValues on mount.
+        navigation.navigate(to, defaultValues ? { state: { defaultValues } } : undefined);
     }
 
 }

package/src/util/previews.ts

@@ -35,16 +35,25 @@ export function getEntityTitlePropertyKey<M extends Record<string, unknown>>(col
     if (collection.titleProperty) {
         return collection.titleProperty as string;
     }
-    // find first text field property
-    for (const key in collection.properties) {
+    
+    const orderToSearch = (collection.propertiesOrder as string[]) || Object.keys(collection.properties);
+    let firstStringCandidate: string | undefined;
+
+    for (const key of orderToSearch) {
         const property = collection.properties[key];
-        if (!isPropertyBuilder(property)) {
+        if (property && !isPropertyBuilder(property)) {
             const prop = property as Property;
-            if (prop.type === "string" && !prop.multiline && !prop.markdown && !prop.storage && !prop.isId) {
-                return key;
+            if (prop.type === "string" && !prop.ui?.multiline && !prop.ui?.markdown && !prop.storage && !prop.isId) {
+                if (!firstStringCandidate) {
+                    firstStringCandidate = key;
+                }
+                const lowerKey = key.toLowerCase();
+                if (["name", "title", "label", "displayname", "username"].includes(lowerKey)) {
+                    return key; // Immediate return if it's a strong title candidate
+                }
             }
         }
     }
-    return undefined;
+    return firstStringCandidate;
 }
 

package/src/util/property_utils.tsx

@@ -58,10 +58,10 @@ function getDefaultIconForProperty(property: Property): LucideIcon {
     switch (property.type) {
         case "string": {
             if (property.storage) return UploadIcon;
-            if (property.url) return GlobeIcon;
+            if (property.ui?.url) return GlobeIcon;
             if (property.email) return MailIcon;
-            if (property.multiline || property.markdown) return AlignLeftIcon;
-            if (property.reference) return LinkIcon;
+            if (property.ui?.multiline || property.ui?.markdown) return AlignLeftIcon;
+            if ((property as any).reference) return LinkIcon;
             return TextIcon;
         }
         case "number":