Kanban embed view

src/components/Kanban.tsx

@@ -19,22 +19,57 @@ 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 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, // waiting for roamAlphaAPI to add a open/close to renderBlock
+      });
+    }
+  }, [contentRef]);
+  return (
+    <div className="roamjs-query-embed rounded-xl bg-white p-4 ">
+      <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>
+  );
+};
+
 const KanbanCard = (card: {
   $priority: number;
   $reprioritize: Reprioritize;
   $displayKey: string;
+  $columnKey: string;
+  $selectionValues: string[];
   $getColumnElement: (x: number) => HTMLDivElement | undefined;
   result: Result;
+  view: string;
+  viewValue: string;
 }) => {
   const [isDragging, setIsDragging] = useState(false);
 
   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 +94,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 +109,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,12 +138,14 @@ 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 byUid = useMemo(
     () => Object.fromEntries(data.map((d) => [d.uid, d] as const)),
@@ -347,6 +389,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" && (
@@ -438,11 +486,15 @@ const Kanban = ({
                   <KanbanCard
                     key={d.uid}
                     result={d}
+                    view={view}
+                    viewValue={viewValue}
                     // we use $ to prefix these props to avoid collisions with the result object
                     $priority={prioritization[d.uid]}
                     $reprioritize={reprioritizeAndUpdateBlock}
                     $getColumnElement={getColumnElement}
                     $displayKey={displayKey}
+                    $columnKey={columnKey}
+                    $selectionValues={resultKeys.map((rk) => rk.key)}
                   />
                 ))}
               </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)
               )}