@adminide-stack/yantra-mobile 12.0.142 → 12.0.145-alpha.0

package/lib/features/webbuilder/components/CodeView.js

@@ -1,4 +1,4 @@
-import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useCallback,useEffect,useMemo,useRef}from'react';import {Platform,StyleSheet,View,Text,TextInput,ActivityIndicator,ScrollView,FlatList,Alert}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Tap,DIM}from'../../inbox/components/Tap.js';import {preferredFile,matchFileNames,sortTree,normalizeQuery}from'../codeFiles.js';import {CenteredState}from'./ui.js';import {highlightLines,codeLanguage,tokenColors}from'../codeHighlight.js';var __defProp = Object.defineProperty;
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import {useState,useRef,useEffect,useCallback,useMemo}from'react';import {Platform,StyleSheet,View,Text,TextInput,ActivityIndicator,ScrollView,FlatList,Alert}from'react-native';import {MaterialCommunityIcons}from'@expo/vector-icons';import {Tap,DIM}from'../../inbox/components/Tap.js';import {listErrorText,preferredFile,matchFileNames,codeUnavailableText,normalizeQuery}from'../codeFiles.js';import {CenteredState}from'./ui.js';import {highlightLines,codeLanguage,tokenColors}from'../codeHighlight.js';import {readExpandedFolders,writeExpandedFolders,withRevealed,buildFileTree,filterPaths,visibleRows,rollUp,nameMatch,withFolder}from'../fileTree.js';var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -46,34 +46,6 @@ function orderedFiles(files) {
   };
   return Object.keys(files).filter((path) => !/(^|\/)(package-lock\.json|yarn\.lock|pnpm-lock\.yaml)$/.test(path)).sort((a, b) => rank(a) - rank(b) || a.localeCompare(b));
 }
-function treeRows(files, collapsed) {
-  const rows = [];
-  const seenDirs = /* @__PURE__ */ new Set();
-  for (const path of sortTree(files)) {
-    const parts = path.split("/");
-    let hidden = false;
-    for (let i = 0; i < parts.length - 1 && !hidden; i += 1) {
-      const dir = parts.slice(0, i + 1).join("/");
-      if (!seenDirs.has(dir)) {
-        seenDirs.add(dir);
-        rows.push({
-          kind: "dir",
-          path: dir,
-          name: parts[i],
-          depth: i
-        });
-      }
-      if (collapsed.has(dir)) hidden = true;
-    }
-    if (!hidden) rows.push({
-      kind: "file",
-      path,
-      name: parts[parts.length - 1],
-      depth: parts.length - 1
-    });
-  }
-  return rows.filter((row) => !row.path.split("/").slice(0, -1).some((_, i, arr) => collapsed.has(arr.slice(0, i + 1).join("/"))));
-}
 function FileLines({
   text,
   path,
@@ -124,7 +96,8 @@ function FileLines({
 function PostedFiles({
   files,
   theme,
-  onAsk
+  onAsk,
+  emptyBody
 }) {
   var _a;
   const paths = useMemo(() => files ? orderedFiles(files) : [], [files]);
@@ -134,7 +107,7 @@ function PostedFiles({
     if (!path || !paths.includes(path)) setPath((_a2 = paths[0]) != null ? _a2 : null);
   }, [paths, path]);
   if (!files || !paths.length) {
-    return /* @__PURE__ */ jsx(CenteredState, { icon: "code-tags", title: "No code yet", body: "The site's files show here once the agent has built it.", theme, primary: {
+    return /* @__PURE__ */ jsx(CenteredState, { icon: "code-tags", title: "No code yet", body: emptyBody != null ? emptyBody : "The site's files show here once the agent has built it.", theme, primary: {
       label: "Ask the agent",
       onPress: onAsk
     } });
@@ -163,10 +136,32 @@ function CodeView({
   const [tab, setTab] = useState("files");
   const [tree, setTree] = useState(null);
   const [treeError, setTreeError] = useState(null);
+  const hasPosted = !!files && Object.keys(files).length > 0;
   const [asleep, setAsleep] = useState(false);
   const [waking, setWaking] = useState(false);
   const [loadingTree, setLoadingTree] = useState(false);
-  const [collapsed, setCollapsed] = useState(/* @__PURE__ */ new Set());
+  const projectKey = (build == null ? void 0 : build.projectId) || (build == null ? void 0 : build.sandboxId) || (build == null ? void 0 : build.key) || "";
+  const [expanded, setExpanded] = useState(/* @__PURE__ */ new Set());
+  const expandedLoaded = useRef(null);
+  useEffect(() => {
+    let live = true;
+    expandedLoaded.current = null;
+    readExpandedFolders(projectKey).then((kept) => {
+      if (!live) return;
+      setExpanded((now) => now.size ? /* @__PURE__ */ new Set([...kept, ...now]) : kept);
+      expandedLoaded.current = projectKey;
+    });
+    return () => {
+      live = false;
+    };
+  }, [projectKey]);
+  useEffect(() => {
+    if (projectKey && expandedLoaded.current === projectKey) writeExpandedFolders(projectKey, expanded);
+  }, [projectKey, expanded]);
+  const [treeQuery, setTreeQuery] = useState("");
+  const filtering = treeQuery.trim().length > 0;
+  const [filterExpanded, setFilterExpanded] = useState("all");
+  useEffect(() => setFilterExpanded("all"), [treeQuery]);
   const [open, setOpen] = useState(null);
   const [opening, setOpening] = useState(false);
   const [focusLine, setFocusLine] = useState(null);
@@ -188,7 +183,7 @@ function CodeView({
       });
       else {
         setAsleep(Boolean(r.asleep));
-        setTreeError(r.error || "Could not list the project files.");
+        setTreeError(listErrorText(r.error));
       }
     }).catch(() => setTreeError("Could not list the project files.")).finally(() => setLoadingTree(false));
   }, [code, build]);
@@ -210,6 +205,7 @@ function CodeView({
         setNotice(r.error || "Could not read the file.");
         return;
       }
+      setExpanded((prev) => withRevealed(prev, path));
       setOpen({
         path,
         base: (_a2 = r.content) != null ? _a2 : "",
@@ -303,8 +299,29 @@ function CodeView({
     } : {}), drafts);
     code.search(build, query, !(tree == null ? void 0 : tree.saved), openDocs).then(setResults).catch(() => setResults(null)).finally(() => setSearching(false));
   };
-  if (!code || !build) return /* @__PURE__ */ jsx(PostedFiles, { files, theme, onAsk });
-  const rows = tree ? treeRows(tree.files, collapsed) : [];
+  if (!code || !build) {
+    const emptyBody = build ? codeUnavailableText({
+      agentBuild: build.origin === "agent",
+      busy,
+      openUrl: build.liveUrl || build.previewUrl
+    }) : void 0;
+    return /* @__PURE__ */ jsx(PostedFiles, { files, theme, onAsk, emptyBody });
+  }
+  const fileTree = tree ? buildFileTree(filtering ? filterPaths(tree.files, treeQuery) : tree.files) : null;
+  const expansion = filtering ? filterExpanded : expanded;
+  const rows = fileTree ? visibleRows(fileTree, expansion) : [];
+  const dirtyFolders = rollUp(Object.keys(drafts).map((p) => [p, true]));
+  const setFolder = (folder, openIt) => {
+    if (filtering) {
+      setFilterExpanded((prev) => {
+        const base = prev === "all" ? new Set(rows.filter((r) => r.node.kind === "folder" && r.expanded).map((r) => r.node.path)) : prev;
+        return withFolder(base, folder, openIt);
+      });
+    } else {
+      setExpanded((prev) => withFolder(prev, folder, openIt));
+    }
+  };
+  const collapseAll = () => filtering ? setFilterExpanded(/* @__PURE__ */ new Set()) : setExpanded(/* @__PURE__ */ new Set());
   const header = /* @__PURE__ */ jsx(View, { style: [styles.segment, {
     backgroundColor: theme.chip
   }], children: ["files", "search"].map((value) => /* @__PURE__ */ jsxs(Tap, { onPress: () => setTab(value), accessibilityRole: "button", accessibilityState: {
@@ -451,7 +468,7 @@ function CodeView({
     ] }) : null,
     noticeBar,
     loadingTree && !tree ? /* @__PURE__ */ jsx(View, { style: styles.center, children: /* @__PURE__ */ jsx(ActivityIndicator, { color: theme.accent }) }) : null,
-    treeError && !tree && !(asleep && files) ? /* @__PURE__ */ jsx(CenteredState, { icon: asleep ? "power-sleep" : "folder-alert-outline", title: asleep ? "The site is asleep" : "Couldn't load the files", body: treeError, theme, busy: waking, primary: asleep && onWake ? {
+    treeError && !tree && !hasPosted ? /* @__PURE__ */ jsx(CenteredState, { icon: asleep ? "power-sleep" : "folder-alert-outline", title: asleep ? "The site is asleep" : "Couldn't load the files", body: treeError, theme, busy: waking, primary: asleep && onWake ? {
       label: waking ? "Waking the site\u2026" : "Wake the site",
       onPress: () => {
         setWaking(true);
@@ -467,8 +484,28 @@ function CodeView({
       label: "Try again",
       onPress: loadTree
     } : void 0 }) : null,
-    treeError && !tree && asleep && files ? /* @__PURE__ */ jsx(PostedFiles, { files, theme, onAsk }) : null,
-    tree ? /* @__PURE__ */ jsx(FlatList, { data: rows, keyExtractor: (row) => `${row.kind}:${row.path}`, refreshing: loadingTree, onRefresh: loadTree, ListFooterComponent: tree.partial ? /* @__PURE__ */ jsxs(Text, { style: [styles.searchHint, {
+    treeError && !tree && hasPosted ? /* @__PURE__ */ jsx(PostedFiles, { files, theme, onAsk }) : null,
+    tree ? /* @__PURE__ */ jsxs(View, { style: [styles.treeBar, {
+      borderBottomColor: theme.border
+    }], children: [
+      /* @__PURE__ */ jsxs(View, { style: [styles.treeFilter, {
+        backgroundColor: theme.chip
+      }], children: [
+        /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "filter-variant", size: 16, color: theme.muted }),
+        /* @__PURE__ */ jsx(TextInput, { value: treeQuery, onChangeText: setTreeQuery, placeholder: "Filter files", placeholderTextColor: theme.faint, autoCapitalize: "none", autoCorrect: false, style: [styles.treeFilterInput, {
+          color: theme.ink
+        }], accessibilityLabel: "Filter files by name", testID: "webbuilder-code-tree-filter" }),
+        filtering ? /* @__PURE__ */ jsx(Tap, { onPress: () => setTreeQuery(""), accessibilityRole: "button", accessibilityLabel: "Clear the filter", hitSlop: 8, pressedStyle: DIM, children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "close-circle", size: 16, color: theme.faint }) }) : null
+      ] }),
+      /* @__PURE__ */ jsx(Tap, { onPress: collapseAll, disabled: !rows.some((r) => r.expanded), accessibilityRole: "button", accessibilityLabel: "Collapse all folders", style: [styles.collapseAll, !rows.some((r) => r.expanded) && styles.disabled], pressedStyle: DIM, testID: "webbuilder-code-collapse-all", children: /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: "collapse-all-outline", size: 20, color: theme.ink }) })
+    ] }) : null,
+    tree ? /* @__PURE__ */ jsx(FlatList, { data: rows, keyExtractor: (row) => `${row.node.kind}:${row.node.path}`, refreshing: loadingTree, onRefresh: loadTree, keyboardShouldPersistTaps: "handled", ListEmptyComponent: filtering ? /* @__PURE__ */ jsxs(Text, { style: [styles.searchHint, {
+      color: theme.muted
+    }], children: [
+      "No file name matches \u201C",
+      treeQuery.trim(),
+      "\u201D."
+    ] }) : null, ListFooterComponent: tree.partial ? /* @__PURE__ */ jsxs(Text, { style: [styles.searchHint, {
       color: theme.muted
     }], children: [
       "Showing the first ",
@@ -477,29 +514,40 @@ function CodeView({
     ] }) : null, renderItem: ({
       item
     }) => {
-      const isDir = item.kind === "dir";
-      const isCollapsed = collapsed.has(item.path);
+      const {
+        node
+      } = item;
+      const isDir = node.kind === "folder";
       let treeIcon = "file-document-outline";
-      if (isDir) treeIcon = isCollapsed ? "folder-outline" : "folder-open-outline";
+      if (isDir) treeIcon = item.expanded ? "folder-open-outline" : "folder-outline";
+      const isOpen = !isDir && (open == null ? void 0 : open.path) === node.path;
+      const unsaved = isDir ? !item.expanded && dirtyFolders.has(node.path) : drafts[node.path] !== void 0;
+      const hit = !isDir && filtering ? nameMatch(node.name, treeQuery) : null;
       return /* @__PURE__ */ jsxs(Tap, { onPress: () => {
-        if (isDir) {
-          setCollapsed((prev) => {
-            const next = new Set(prev);
-            if (next.has(item.path)) next.delete(item.path);
-            else next.add(item.path);
-            return next;
-          });
-        } else {
-          openFile(item.path);
-        }
+        if (node.kind === "folder") setFolder(node, !item.expanded);
+        else openFile(node.path);
       }, style: [styles.treeRow, {
-        paddingLeft: 16 + item.depth * 16
-      }], pressedStyle: DIM, accessibilityRole: "button", accessibilityLabel: isDir ? `Folder ${item.name}` : `Open ${item.path}`, children: [
+        paddingLeft: 12 + (item.level - 1) * 16
+      }, isOpen && {
+        backgroundColor: theme.chip
+      }], pressedStyle: DIM, accessibilityRole: "button", accessibilityState: isDir ? {
+        expanded: item.expanded
+      } : {
+        selected: isOpen
+      }, accessibilityLabel: isDir ? `Folder ${node.name}${unsaved ? ", has unsaved changes" : ""}` : `Open ${node.path}${unsaved ? ", unsaved" : ""}`, children: [
+        isDir ? /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: item.expanded ? "chevron-down" : "chevron-right", size: 16, color: theme.muted }) : /* @__PURE__ */ jsx(View, { style: styles.chevronSpace }),
         /* @__PURE__ */ jsx(MaterialCommunityIcons, { name: treeIcon, size: 18, color: isDir ? theme.accent : theme.muted }),
         /* @__PURE__ */ jsx(Text, { style: [styles.treeName, {
           color: theme.ink
-        }, isDir && styles.treeDir], numberOfLines: 1, children: item.name }),
-        !isDir && drafts[item.path] !== void 0 ? /* @__PURE__ */ jsx(View, { style: [styles.dirtyDot, {
+        }, isDir && styles.treeDir], numberOfLines: 1, children: hit ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          node.name.slice(0, hit.start),
+          /* @__PURE__ */ jsx(Text, { style: {
+            backgroundColor: theme.accentSoft,
+            color: theme.accent
+          }, children: node.name.slice(hit.start, hit.end) }),
+          node.name.slice(hit.end)
+        ] }) : node.name }),
+        unsaved ? /* @__PURE__ */ jsx(View, { style: [styles.dirtyDot, {
           backgroundColor: theme.accent
         }] }) : null
       ] });
@@ -513,6 +561,36 @@ const styles = StyleSheet.create({
   fill: {
     flex: 1
   },
+  treeBar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    paddingHorizontal: 12,
+    paddingBottom: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  treeFilter: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    borderRadius: 10,
+    paddingHorizontal: 10
+  },
+  treeFilterInput: {
+    flex: 1,
+    fontSize: 14,
+    paddingVertical: Platform.OS === "ios" ? 8 : 4
+  },
+  collapseAll: {
+    width: 36,
+    height: 36,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  chevronSpace: {
+    width: 16
+  },
   center: {
     padding: 32,
     alignItems: "center"
@@ -726,4 +804,4 @@ const styles = StyleSheet.create({
     padding: 10,
     borderRadius: 20
   }
-});export{CodeView,orderedFiles,treeRows};//# sourceMappingURL=CodeView.js.map
+});export{CodeView,orderedFiles};//# sourceMappingURL=CodeView.js.map