Kanban embed view

src/components/Kanban.tsx

@@ -19,22 +19,97 @@ import toCellValue from "../utils/toCellValue";
 import extractTag from "roamjs-components/util/extractTag";
 import deleteBlock from "roamjs-components/writes/deleteBlock";
 import getSubTree from "roamjs-components/util/getSubTree";
+import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 
 const zPriority = z.record(z.number().min(0).max(1));
 
 type Reprioritize = (args: { uid: string; x: number; y: number }) => void;
 
-const KanbanCard = (card: {
-  $priority: number;
-  $reprioritize: Reprioritize;
-  $displayKey: string;
-  $getColumnElement: (x: number) => HTMLDivElement | undefined;
-  result: Result;
-}) => {
+type KanbanCardProps = {
+  card: {
+    $priority: number;
+    $reprioritize: Reprioritize;
+    $displayKey: string;
+    $getColumnElement: (x: number) => HTMLDivElement | undefined;
+    result: Result;
+    view: string;
+    viewValue: string;
+  };
+  localFoldStates: Map<string, boolean>;
+  setLocalFoldStates: React.Dispatch<
+    React.SetStateAction<Map<string, boolean>>
+  >;
+};
+
+const KanbanCard = ({
+  card,
+  localFoldStates,
+  setLocalFoldStates,
+}: KanbanCardProps) => {
   const [isDragging, setIsDragging] = useState(false);
 
+  const CellEmbed = ({
+    uid,
+    viewValue,
+  }: {
+    uid: string;
+    viewValue: string;
+  }) => {
+    const title = getPageTitleByPageUid(uid);
+    const contentRef = useRef(null);
+    const open = localFoldStates.has(uid)
+      ? localFoldStates.get(uid)
+      : viewValue === "open"
+      ? true
+      : viewValue === "closed"
+      ? false
+      : null;
+
+    useEffect(() => {
+      const el = contentRef.current;
+      if (el) {
+        window.roamAlphaAPI.ui.components.renderBlock({
+          uid,
+          el,
+          "open?": open,
+        });
+      }
+    }, [contentRef]);
+    return (
+      <div
+        className="roamjs-query-embed rounded-xl bg-white p-4 "
+        onClick={(e) => {
+          const target = e.target as HTMLElement;
+          if (!target.classList.contains("rm-caret")) return;
+
+          const kanbanCard = target.closest(".roamjs-kanban-card");
+          const uid = kanbanCard?.getAttribute("data-uid");
+          if (!uid) return;
+
+          const isOpen = target.classList.contains("rm-caret-open");
+          const storedOpenState = !isOpen;
+
+          setLocalFoldStates((prev) => {
+            const newMap = new Map(prev);
+            newMap.set(uid, storedOpenState);
+            return newMap;
+          });
+        }}
+      >
+        <Icon
+          icon="drag-handle-horizontal"
+          className="absolute right-2 top-2 text-gray-400 embed-handle cursor-move z-30"
+        />
+        <div
+          ref={contentRef}
+          className={!!title ? "page-embed" : "block-embed"}
+        />
+      </div>
+    );
+  };
   return (
     <Draggable
+      handle={card.view === "embed" ? ".embed-handle" : ""}
       onDrag={(_, data) => {
         const { x, width } = data.node.getBoundingClientRect();
         const el = card.$getColumnElement(x + width / 2);
@@ -59,6 +134,7 @@ const KanbanCard = (card: {
         data-uid={card.result.uid}
         data-priority={card.$priority}
         onClick={(e) => {
+          if (card.view === "embed") return;
           if (isDragging) return;
           if (e.shiftKey) {
             openBlockInSidebar(card.result.uid);
@@ -73,12 +149,16 @@ const KanbanCard = (card: {
           }
         }}
       >
-        <div className={`rounded-xl bg-white p-4 hover:bg-gray-200`}>
-          {toCellValue({
-            value: card.result[card.$displayKey],
-            uid: card.result[`${card.$displayKey}-uid`],
-          })}
-        </div>
+        {card.view === "embed" ? (
+          <CellEmbed uid={card.result.uid} viewValue={card.viewValue} />
+        ) : (
+          <div className={`rounded-xl bg-white p-4 hover:bg-gray-200 `}>
+            {toCellValue({
+              value: card.result[card.$displayKey],
+              uid: card.result[`${card.$displayKey}-uid`],
+            })}
+          </div>
+        )}
       </div>
     </Draggable>
   );
@@ -98,13 +178,18 @@ const Kanban = ({
   onQuery,
   resultKeys,
   parentUid,
+  views,
 }: {
   resultKeys: Column[];
   data: Result[];
   layout: Record<string, string | string[]>;
   onQuery: () => void;
   parentUid: string;
+  views: { column: string; mode: string; value: string }[];
 }) => {
+  const [localFoldStates, setLocalFoldStates] = useState(
+    new Map<string, boolean>()
+  );
   const byUid = useMemo(
     () => Object.fromEntries(data.map((d) => [d.uid, d] as const)),
     [data]
@@ -347,6 +432,12 @@ const Kanban = ({
     setOpenedPopoverIndex(null);
   };
 
+  const viewsByColumn = useMemo(
+    () => Object.fromEntries(views.map((v) => [v.column, v])),
+    [views]
+  );
+  const { mode: view, value: viewValue } = viewsByColumn[displayKey] || {};
+
   return (
     <>
       {showLegend === "Yes" && (
@@ -437,12 +528,17 @@ const Kanban = ({
                 {(cards[col] || [])?.map((d) => (
                   <KanbanCard
                     key={d.uid}
-                    result={d}
-                    // we use $ to prefix these props to avoid collisions with the result object
-                    $priority={prioritization[d.uid]}
-                    $reprioritize={reprioritizeAndUpdateBlock}
-                    $getColumnElement={getColumnElement}
-                    $displayKey={displayKey}
+                    card={{
+                      result: d,
+                      view: view,
+                      viewValue: viewValue,
+                      $priority: prioritization[d.uid],
+                      $reprioritize: reprioritizeAndUpdateBlock,
+                      $getColumnElement: getColumnElement,
+                      $displayKey: displayKey,
+                    }}
+                    localFoldStates={localFoldStates}
+                    setLocalFoldStates={setLocalFoldStates}
                   />
                 ))}
               </div>

src/components/ResultsTable.tsx

@@ -164,15 +164,18 @@ const ResultHeader = React.forwardRef<
   }
 );
 
-const CellEmbed = ({ uid }: { uid: string }) => {
+const CellEmbed = ({ uid, viewValue }: { uid: string; viewValue: string }) => {
   const title = getPageTitleByPageUid(uid);
   const contentRef = useRef(null);
+  const open =
+    viewValue === "open" ? true : viewValue === "closed" ? false : null;
   useEffect(() => {
     const el = contentRef.current;
     if (el) {
       window.roamAlphaAPI.ui.components.renderBlock({
         uid,
         el,
+        "open?": open,
       });
     }
   }, [contentRef]);
@@ -335,7 +338,7 @@ const ResultRow = ({
                   {view === "alias" ? viewValue : cell(key)}
                 </a>
               ) : view === "embed" ? (
-                <CellEmbed uid={uid} />
+                <CellEmbed uid={uid} viewValue={viewValue} />
               ) : (
                 cell(key)
               )}