Merge pull request #9 from objectstack-ai/copilot/enhance-sdk-rendering-engine

Author: hotlong

components/renderers/DashboardViewRenderer.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { View, Text, ScrollView, ActivityIndicator } from "react-native";
+import { View, Text, ScrollView, ActivityIndicator, useWindowDimensions } from "react-native";
 import {
   TrendingUp,
   TrendingDown,
@@ -252,12 +252,20 @@ function renderWidget(
 /*  Main Component                                                     */
 /* ------------------------------------------------------------------ */
 
+/** Breakpoint (dp) at which the dashboard switches to 2-column grid */
+const GRID_BREAKPOINT = 600;
+/** Gap between grid cells in pixels */
+const GRID_GAP = 12;
+
 export function DashboardViewRenderer({
   dashboard,
   widgetData = {},
   isLoading = false,
   onWidgetPress,
 }: DashboardViewRendererProps) {
+  const { width: screenWidth } = useWindowDimensions();
+  const numColumns = screenWidth >= GRID_BREAKPOINT ? 2 : 1;
+
   if (isLoading) {
     return (
       <View className="flex-1 items-center justify-center">
@@ -278,10 +286,41 @@ export function DashboardViewRenderer({
     );
   }
 
+  /* ---- Responsive grid layout ---- */
+  const contentPadding = 16;
+  const availableWidth = screenWidth - contentPadding * 2;
+  const columnWidth =
+    numColumns === 1
+      ? availableWidth
+      : (availableWidth - GRID_GAP) / numColumns;
+
+  /** Build rows of widgets respecting span hints */
+  const rows: DashboardWidgetMeta[][] = [];
+  let currentRow: DashboardWidgetMeta[] = [];
+  let currentSpan = 0;
+
+  for (const widget of dashboard.widgets) {
+    // A widget can declare span: 2 to take the full width
+    const span = Math.min(widget.span ?? 1, numColumns);
+
+    if (currentSpan + span > numColumns && currentRow.length > 0) {
+      rows.push(currentRow);
+      currentRow = [];
+      currentSpan = 0;
+    }
+    currentRow.push(widget);
+    currentSpan += span;
+  }
+  if (currentRow.length > 0) rows.push(currentRow);
+
   return (
     <ScrollView
       className="flex-1"
-      contentContainerClassName="px-4 pb-8 pt-4"
+      contentContainerStyle={{
+        paddingHorizontal: contentPadding,
+        paddingBottom: 32,
+        paddingTop: 16,
+      }}
       showsVerticalScrollIndicator={false}
     >
       {/* Dashboard header */}
@@ -296,10 +335,29 @@ export function DashboardViewRenderer({
         </View>
       )}
 
-      {/* Widgets */}
-      {dashboard.widgets.map((widget) => (
-        <View key={widget.name}>
-          {renderWidget(widget, widgetData[widget.name])}
+      {/* Widget grid */}
+      {rows.map((row, rowIdx) => (
+        <View
+          key={`row-${rowIdx}`}
+          style={{
+            flexDirection: "row",
+            marginBottom: GRID_GAP,
+            gap: GRID_GAP,
+          }}
+        >
+          {row.map((widget) => {
+            const span = Math.min(widget.span ?? 1, numColumns);
+            const widgetWidth =
+              numColumns === 1
+                ? availableWidth
+                : columnWidth * span + GRID_GAP * (span - 1);
+
+            return (
+              <View key={widget.name} style={{ width: widgetWidth }}>
+                {renderWidget(widget, widgetData[widget.name])}
+              </View>
+            );
+          })}
         </View>
       ))}
     </ScrollView>

components/renderers/DetailViewRenderer.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { View, Text, ScrollView, Pressable, ActivityIndicator } from "react-native";
-import { Edit, Trash2, MoreHorizontal } from "lucide-react-native";
+import { Edit, Trash2, MoreHorizontal, ChevronLeft, ChevronRight } from "lucide-react-native";
 import { cn } from "~/lib/utils";
 import { FieldRenderer } from "./fields/FieldRenderer";
 import type { FieldDefinition, FormViewMeta, FormSection, ActionMeta } from "./types";
@@ -34,6 +34,16 @@ export interface DetailViewRendererProps {
   relatedLists?: RelatedListConfig[];
   /** Handler when a related record is pressed */
   onRelatedRecordPress?: (objectName: string, record: Record<string, unknown>) => void;
+  /** Navigate to the previous record */
+  onPrevious?: () => void;
+  /** Navigate to the next record */
+  onNext?: () => void;
+  /** Whether there is a previous record available */
+  hasPrevious?: boolean;
+  /** Whether there is a next record available */
+  hasNext?: boolean;
+  /** Label indicating position, e.g. "3 of 50" */
+  positionLabel?: string;
 }
 
 export interface RelatedListConfig {
@@ -136,6 +146,69 @@ function RelatedListSection({
   );
 }
 
+/* ------------------------------------------------------------------ */
+/*  Record Navigator                                                   */
+/* ------------------------------------------------------------------ */
+
+function RecordNavigator({
+  onPrevious,
+  onNext,
+  hasPrevious = false,
+  hasNext = false,
+  positionLabel,
+}: Pick<
+  DetailViewRendererProps,
+  "onPrevious" | "onNext" | "hasPrevious" | "hasNext" | "positionLabel"
+>) {
+  if (!onPrevious && !onNext) return null;
+
+  return (
+    <View className="flex-row items-center justify-between border-b border-border bg-card px-4 py-2">
+      <Pressable
+        className={cn(
+          "flex-row items-center rounded-lg px-3 py-2",
+          hasPrevious ? "active:bg-muted" : "opacity-40",
+        )}
+        onPress={hasPrevious ? onPrevious : undefined}
+        disabled={!hasPrevious}
+      >
+        <ChevronLeft size={16} color={hasPrevious ? "#1e40af" : "#94a3b8"} />
+        <Text
+          className={cn(
+            "ml-1 text-sm font-medium",
+            hasPrevious ? "text-primary" : "text-muted-foreground",
+          )}
+        >
+          Previous
+        </Text>
+      </Pressable>
+
+      {positionLabel && (
+        <Text className="text-xs text-muted-foreground">{positionLabel}</Text>
+      )}
+
+      <Pressable
+        className={cn(
+          "flex-row items-center rounded-lg px-3 py-2",
+          hasNext ? "active:bg-muted" : "opacity-40",
+        )}
+        onPress={hasNext ? onNext : undefined}
+        disabled={!hasNext}
+      >
+        <Text
+          className={cn(
+            "mr-1 text-sm font-medium",
+            hasNext ? "text-primary" : "text-muted-foreground",
+          )}
+        >
+          Next
+        </Text>
+        <ChevronRight size={16} color={hasNext ? "#1e40af" : "#94a3b8"} />
+      </Pressable>
+    </View>
+  );
+}
+
 /* ------------------------------------------------------------------ */
 /*  Main Component                                                     */
 /* ------------------------------------------------------------------ */
@@ -153,6 +226,11 @@ export function DetailViewRenderer({
   actions,
   relatedLists,
   onRelatedRecordPress,
+  onPrevious,
+  onNext,
+  hasPrevious,
+  hasNext,
+  positionLabel,
 }: DetailViewRendererProps) {
   /* ---- Build sections ---- */
   const sections: FormSection[] = useMemo(() => {
@@ -224,6 +302,15 @@ export function DetailViewRenderer({
         onAction={onAction}
       />
 
+      {/* Record navigation (previous / next) */}
+      <RecordNavigator
+        onPrevious={onPrevious}
+        onNext={onNext}
+        hasPrevious={hasPrevious}
+        hasNext={hasNext}
+        positionLabel={positionLabel}
+      />
+
       <ScrollView
         className="flex-1"
         contentContainerClassName="px-4 pb-8 pt-4"