@adminide-stack/yantra-mobile 12.0.131 → 12.0.132

package/lib/features/canvas/CanvasBoardsGrid.js

@@ -1,4 +1,4 @@
-import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useMemo,useEffect,useCallback,useRef}from'react';import {StyleSheet,useWindowDimensions,View,Text,ScrollView,FlatList,Linking}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {DesignPageView}from'../design/render/DesignPageView.js';import {isUnsetBoardTitle}from'./canvasCore.js';import {CANVAS_BOARD_PAGE_SIZE}from'./canvasBoardsCatalog.js';import {mergeWork,availableFilters,matchesFilter,collapsedWorkCount,WORK_FILTERS,showAllLabel,WORK_ARTIFACTS,studioNoun,designNoun,pageCount,boardCover,videoCoverFrame}from'./homeWork.js';import {HeroComposer}from'./home/HeroComposer.js';import {LookDetail}from'./home/LookDetail.js';import {LoopingVideo}from'./home/LoopingVideo.js';import {pickPlayingRegion,centredIndex}from'./home/heroShots.js';import {resultUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {renewMediaUrl,useMediaSource}from'./useMediaSource.js';import {useCanvasTheme,themedStyles,CanvasThemeToggle}from'./canvasTheme.js';import {Pressable,pressedStyle,SectionHeader,Segmented,RADIUS,SPACE,Skeleton,CoverPlaceholder,TYPE}from'./canvasUi.js';import {docPreviewLines}from'../docs/blocks.js';var __defProp = Object.defineProperty;
+import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {useState,useMemo,useEffect,useRef,useCallback}from'react';import {StyleSheet,useWindowDimensions,View,Text,ScrollView,FlatList,Linking}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Image}from'expo-image';import {DesignPageView}from'../design/render/DesignPageView.js';import {isUnsetBoardTitle}from'./canvasCore.js';import {WORK_PAGE,mergeWork,availableFilters,matchesFilter,WORK_FILTERS,studioNoun,designNoun,pageCount,boardCover,videoCoverFrame}from'./homeWork.js';import {HeroComposer}from'./home/HeroComposer.js';import {LookDetail}from'./home/LookDetail.js';import {LoopingVideo}from'./home/LoopingVideo.js';import {pickPlayingRegion,centredIndex}from'./home/heroShots.js';import {resultUrl}from'./videoEditor/mediaActions.js';import {unwrapProxyUrl}from'./videoEditor/remoteMediaClient.js';import {renewMediaUrl,useMediaSource}from'./useMediaSource.js';import {useCanvasTheme,themedStyles,CanvasThemeToggle}from'./canvasTheme.js';import {Pressable,pressedStyle,SectionHeader,Segmented,RADIUS,SPACE,Skeleton,CoverPlaceholder,TYPE}from'./canvasUi.js';import {docPreviewLines}from'../docs/blocks.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -145,7 +145,7 @@ function CanvasBoardsGrid({
   studioMore = false,
   studioError = null,
   onRetryStudioDesigns,
-  onExpandWork,
+  onLoadMoreWork,
   currentSessionId,
   onOpenSession
 }) {
@@ -156,8 +156,7 @@ function CanvasBoardsGrid({
   } = useWindowDimensions();
   const tileWidth = Math.max(140, (width - GUTTER * 3) / 2);
   const laneWidth = (width - GUTTER * 2 - SPACE.sm * 2) / 3;
-  const [visible, setVisible] = useState(CANVAS_BOARD_PAGE_SIZE);
-  const [expanded, setExpanded] = useState(false);
+  const [visible, setVisible] = useState(WORK_PAGE);
   const [filter, setFilter] = useState("all");
   const [lookIndex, setLookIndex] = useState(-1);
   const renew = useMemo(() => renewMediaUrl(runAction), [runAction]);
@@ -166,8 +165,8 @@ function CanvasBoardsGrid({
   const active = filters.includes(filter) ? filter : "all";
   const shown = useMemo(() => work.filter((item) => matchesFilter(item, active)), [work, active]);
   useEffect(() => {
-    setVisible(CANVAS_BOARD_PAGE_SIZE);
-  }, [boards, designs, studioDesigns, docs, active]);
+    setVisible(WORK_PAGE);
+  }, [active]);
   const startSession = currentSessionId && onOpenSession && (active === "all" || active === "canvases") && !boards.some((b) => b.channelId === currentSessionId) ? currentSessionId : null;
   const lead = useMemo(() => [{
     kind: "new",
@@ -177,23 +176,12 @@ function CanvasBoardsGrid({
     id: "__start__",
     sessionId: startSession
   }] : []], [startSession]);
-  const collapsedCount = collapsedWorkCount(2);
-  const totalTiles = lead.length + shown.length;
-  const tiles = useMemo(() => {
-    const limit = expanded ? visible : Math.max(0, collapsedCount - lead.length);
-    return [...lead, ...shown.slice(0, limit).map((entry) => ({
-      kind: "work",
-      id: `${entry.type}:${entry.id}`,
-      work: entry
-    }))];
-  }, [lead, shown, visible, expanded, collapsedCount]);
-  const toggleExpanded = useCallback(() => {
-    setExpanded((was) => {
-      onExpandWork == null ? void 0 : onExpandWork(!was);
-      return !was;
-    });
-    setVisible(CANVAS_BOARD_PAGE_SIZE);
-  }, [onExpandWork]);
+  const tiles = useMemo(() => [...lead, ...shown.slice(0, visible).map((entry) => ({
+    kind: "work",
+    id: `${entry.type}:${entry.id}`,
+    work: entry
+  }))], [lead, shown, visible]);
+  const hasMore = visible < shown.length || studioMore;
   const {
     height: windowHeight
   } = useWindowDimensions();
@@ -256,9 +244,12 @@ function CanvasBoardsGrid({
     return chunked;
   }, [tiles]);
   const loadMore = useCallback(() => {
-    if (!expanded) return;
-    setVisible((count) => count >= shown.length ? count : Math.min(count + CANVAS_BOARD_PAGE_SIZE, shown.length));
-  }, [shown.length, expanded]);
+    if (visible < shown.length) {
+      setVisible((count) => Math.min(count + WORK_PAGE, shown.length));
+      return;
+    }
+    if (studioMore) onLoadMoreWork == null ? void 0 : onLoadMoreWork();
+  }, [visible, shown.length, studioMore, onLoadMoreWork]);
   const group = (id) => createGroups.find((g) => g.id === id);
   const generate = group("generate");
   const edit = group("edit");
@@ -279,18 +270,13 @@ function CanvasBoardsGrid({
     ] }, tile.id);
   };
   const header = /* @__PURE__ */ jsxs(View, { style: styles.header, children: [
-    /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
-      /* @__PURE__ */ jsx(Text, { style: styles.title, accessibilityRole: "header", children: "Create" }),
-      /* @__PURE__ */ jsxs(View, { style: styles.titleActions, children: [
-        onAskAgent && onStartWithPrompt ? (
-          // The hero is the prompt box; AI Chat stays one tap away without a second box.
-          /* @__PURE__ */ jsx(Pressable, { onPress: onAskAgent, style: ({
-            pressed
-          }) => [styles.toggle, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Open AI Chat", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 20, color: theme.foreground }) })
-        ) : null,
+    onStartWithPrompt ? null : (
+      // Without the hero (no generator seam) home keeps a plain title row.
+      /* @__PURE__ */ jsxs(View, { style: styles.titleRow, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.title, accessibilityRole: "header", children: "Create" }),
         /* @__PURE__ */ jsx(CanvasThemeToggle, { size: 20, style: styles.toggle })
       ] })
-    ] }),
+    ),
     onAskAgent && !onStartWithPrompt ? /* @__PURE__ */ jsxs(Pressable, { onPress: onAskAgent, style: ({
       pressed
     }) => [styles.prompt, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Ask AI Chat to make something", children: [
@@ -298,7 +284,19 @@ function CanvasBoardsGrid({
       /* @__PURE__ */ jsx(Text, { style: styles.promptText, numberOfLines: 1, children: "Describe what you want to make" }),
       /* @__PURE__ */ jsx(View, { style: styles.promptGo, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "arrow-up", size: 18, color: theme.primaryForeground }) })
     ] }) : null,
-    onStartWithPrompt ? /* @__PURE__ */ jsx(View, { onLayout: measure("hero"), children: /* @__PURE__ */ jsx(HeroComposer, { featuredLooks, showcase, playing: playingNow === "hero", onStartWithPrompt, onPickReference, onBrowseTemplates }) }) : null,
+    onStartWithPrompt ? /* @__PURE__ */ jsx(View, { onLayout: measure("hero"), children: /* @__PURE__ */ jsx(HeroComposer, { featuredLooks, showcase, playing: playingNow === "hero", onStartWithPrompt, onPickReference, onBrowseTemplates, headerActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+      onAskAgent ? /* @__PURE__ */ jsx(Pressable, { onPress: onAskAgent, style: ({
+        pressed
+      }) => [styles.toggle, pressedStyle(pressed)], accessibilityRole: "button", accessibilityLabel: "Open AI Chat", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "creation", size: 20, color: theme.foreground }) }) : null,
+      /* @__PURE__ */ jsx(CanvasThemeToggle, { size: 20, style: styles.toggle })
+    ] }) }) }) : null,
+    onStartWithPrompt && onCreate ? (
+      // Web home: the hero, then a "Create" heading over the tool groups.
+      /* @__PURE__ */ jsxs(View, { style: styles.createHead, children: [
+        /* @__PURE__ */ jsx(Text, { style: styles.createTitle, accessibilityRole: "header", children: "Create" }),
+        /* @__PURE__ */ jsx(Text, { style: styles.createSub, children: "Generate, edit, or start a blank design." })
+      ] })
+    ) : null,
     onCreate && generate ? /* @__PURE__ */ jsxs(View, { style: styles.section, children: [
       /* @__PURE__ */ jsx(SectionHeader, { title: "Generate with AI" }),
       /* @__PURE__ */ jsx(View, { style: styles.lanes, children: generate.tiles.map(lane) })
@@ -348,14 +346,9 @@ function CanvasBoardsGrid({
       ] }) : null
     ] }) : null
   ] });
-  const footer = totalTiles > collapsedCount || expanded ? /* @__PURE__ */ jsxs(View, { style: styles.workFooter, children: [
-    /* @__PURE__ */ jsx(Pressable, { onPress: toggleExpanded, style: ({
-      pressed
-    }) => [styles.showAll, pressedStyle(pressed)], accessibilityRole: "button", accessibilityState: {
-      expanded
-    }, testID: "your-work-show-all", children: /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: expanded ? "Show less" : showAllLabel(shown.length, studioMore) }) }),
-    expanded && studioMore ? /* @__PURE__ */ jsx(Text, { style: styles.workNote, children: `Showing your ${WORK_ARTIFACTS.expanded} most recent designs of each kind.` }) : null
-  ] }) : null;
+  const footer = hasMore ? /* @__PURE__ */ jsx(View, { style: styles.workFooter, children: /* @__PURE__ */ jsx(Pressable, { onPress: loadMore, style: ({
+    pressed
+  }) => [styles.showAll, pressedStyle(pressed)], accessibilityRole: "button", testID: "your-work-load-more", children: /* @__PURE__ */ jsx(Text, { style: styles.retryLabel, children: "Load more" }) }) }) : null;
   const renderTile = (item) => {
     var _a, _b, _c;
     if (item.kind === "new") {
@@ -791,11 +784,18 @@ const makeStyles = themedStyles((theme) => StyleSheet.create({
   title: __spreadProps(__spreadValues({}, TYPE.display), {
     color: theme.foreground
   }),
-  titleActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: SPACE.sm
+  createHead: {
+    marginBottom: SPACE.lg,
+    gap: SPACE.xs
   },
+  createTitle: __spreadProps(__spreadValues({}, TYPE.heading), {
+    fontSize: 26,
+    lineHeight: 32,
+    color: theme.foreground
+  }),
+  createSub: __spreadProps(__spreadValues({}, TYPE.body), {
+    color: theme.mutedForeground
+  }),
   toggle: {
     width: 40,
     height: 40,