Fix/remixer punchlist

client/src/api.ts

@@ -54,8 +54,12 @@ import {
   EditAcademyOnlineAccessFormValues,
   CentralIdentityUserLicenseResult,
   CentralIdentityAppLicense,
-  StoreDigitalDeliveryOption, StoreOrderWithStripeSession, StoreOrderListItem,
-  ManualPrintJobPayload, ManualPrintJobPayloadResponse, ResubmitPrintJobRefusal,
+  StoreDigitalDeliveryOption,
+  StoreOrderWithStripeSession,
+  StoreOrderListItem,
+  ManualPrintJobPayload,
+  ManualPrintJobPayloadResponse,
+  ResubmitPrintJobRefusal,
   OrderCharge,
   OrderSession,
   CentralIdentityOrgAdminResult,
@@ -819,11 +823,11 @@ class API {
 
   async adminSubmitManualPrintJob(
     order_id: string,
-    payload: ManualPrintJobPayload
+    payload: ManualPrintJobPayload,
   ) {
     const res = await axios.post<{ data: unknown } & ConductorBaseResponse>(
       `/store/admin/orders/${order_id}/print-job`,
-      payload
+      payload,
     );
     return res;
   }
@@ -2841,11 +2845,18 @@ class API {
     return res.data;
   }
 
-  async createMatter(projectID: string, type: CreateMatterSelection, overwrite: boolean) {
-    const res = await axios.post<ConductorBaseResponse>(`/remixer/${projectID}/create-matter`, {
-      type,
-      overwrite,
-    });
+  async createMatter(
+    projectID: string,
+    type: CreateMatterSelection,
+    overwrite: boolean,
+  ) {
+    const res = await axios.post<ConductorBaseResponse>(
+      `/remixer/${projectID}/create-matter`,
+      {
+        type,
+        overwrite,
+      },
+    );
     return res.data;
   }
 
@@ -2929,6 +2940,7 @@ class API {
         reparented?: unknown[];
         /** False when the live TOC was unavailable, so `untracked` proves nothing. */
         reconciled?: boolean;
+        publishedAt?: Date | string;
       } & ConductorBaseResponse
     >(`/remixer/${id}/project`, {});
     return res.data;
@@ -2962,11 +2974,16 @@ class API {
     return res.data;
   }
 
-  async getRemixerTreeFlattened(id: string, path: string, subdomain: string) {
+  async getRemixerTreeFlattened(
+    id: string,
+    path: string,
+    subdomain: string,
+    options?: { flatten?: boolean | true; preserveConfigs?: boolean | true },
+  ) {
     const res = await axios.post(`/remixer/${id}/page/tree`, {
       path,
       subdomain,
-      flatten: true,
+      options,
     });
     return res.data;
   }

client/src/components/remixer/BookActions.tsx

@@ -8,6 +8,7 @@ import {
     IconArrowForwardUp,
     IconPlus,
     IconTrash,
+    IconRestore,
     IconChevronUp,
     IconChevronDown,
 } from "@tabler/icons-react";
@@ -16,6 +17,8 @@ interface BookActionsProps {
     isNarrowScreen: boolean;
     onAddItem: () => void;
     onDeleteItem: () => void;
+    onRestoreItem: () => void;
+    isSelectedItemDeleted: boolean;
     onUndo: () => void;
     onRedo: () => void;
     isAllExpanded: boolean;
@@ -36,6 +39,8 @@ const BookActions: React.FC<BookActionsProps> = ({
     isNarrowScreen,
     onAddItem,
     onDeleteItem,
+    onRestoreItem,
+    isSelectedItemDeleted,
     onUndo,
     onRedo,
     isAllExpanded,
@@ -53,7 +58,14 @@ const BookActions: React.FC<BookActionsProps> = ({
                 onAddItem();
             }
         },
-        {
+        isSelectedItemDeleted ? {
+            title: "Restore",
+            icon: <IconRestore size={18} />,
+            variant: "outline",
+            onClick: () => {
+                onRestoreItem();
+            }
+        } : {
             title: "Delete",
             icon: <IconTrash size={18} />,
             variant: "destructive",

client/src/components/remixer/BookContent/ContextMenu.tsx

@@ -12,13 +12,15 @@ type ContextMenuAction =
   | "add-below"
   | "add-to"
   | "delete"
+  | "restore"
   | "modify"
   | "duplicate";
 
 interface ContextMenuProps {
   contextMenu: ContextMenuPosition | null;
   canAddSibling: boolean;
   canDuplicate: boolean;
+  isDeleted: boolean;
   addAboveLabel: string;
   addToLabel: string;
   addBelowLabel: string;
@@ -37,6 +39,7 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
   contextMenu,
   canAddSibling,
   canDuplicate,
+  isDeleted,
   addAboveLabel,
   addToLabel,
   addBelowLabel,
@@ -104,14 +107,25 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
           margin: "4px 0",
         }}
       />
-      <div
-        style={itemStyle}
-        onMouseEnter={(e) => (e.currentTarget.style.background = "#f0f0f0")}
-        onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
-        onClick={() => onAction("delete")}
-      >
-        <Icon name="trash alternate" /> Delete
-      </div>
+      {isDeleted ? (
+        <div
+          style={itemStyle}
+          onMouseEnter={(e) => (e.currentTarget.style.background = "#f0f0f0")}
+          onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+          onClick={() => onAction("restore")}
+        >
+          <Icon name="undo" /> Restore
+        </div>
+      ) : (
+        <div
+          style={itemStyle}
+          onMouseEnter={(e) => (e.currentTarget.style.background = "#f0f0f0")}
+          onMouseLeave={(e) => (e.currentTarget.style.background = "transparent")}
+          onClick={() => onAction("delete")}
+        >
+          <Icon name="trash alternate" /> Delete
+        </div>
+      )}
       <div
         style={itemStyle}
         onMouseEnter={(e) => (e.currentTarget.style.background = "#f0f0f0")}

client/src/components/remixer/BookContent/Dashboard.tsx

@@ -20,7 +20,7 @@ import {
   sortMatterSiblings,
 } from "../services";
 import TreeNodeContainer from "./TreeNodeContainer";
-import { STATUS_PALETTE } from "../style";
+import { CATALOG_NODE_HIGHLIGHT_STYLE, STATUS_PALETTE } from "../style";
 
 type DropPosition = "before" | "inside" | "after";
 type TreeId = "library" | "book";
@@ -504,6 +504,7 @@ const TreeDnd: React.FC<TreeDndProps> = ({
       const isPlacementChanged =
         page.isPlacementChanged ?? page.movedItem === true;
       const isSelected = selectedNodeId === page["@id"];
+      const isCatalogHighlighted = !isBookTree && isSelected;
       const itemLink = page["uri.ui"] || page["@href"];
       const isInteractionLocked = isDefaultMatterPage(page);
       const isDropInside =
@@ -526,7 +527,9 @@ const TreeDnd: React.FC<TreeDndProps> = ({
           isRenamed={isRenamed}
           isPlacementChanged={isPlacementChanged}
           isSelected={isSelected}
+          isCatalogHighlighted={isCatalogHighlighted}
           isBookTree={isBookTree}
+          isBookRootChild={isBookTree && depth === 1}
           isInteractionLocked={isInteractionLocked}
           isVisualLocked={isInteractionLocked}
           itemLink={itemLink}
@@ -604,6 +607,7 @@ const TreeDnd: React.FC<TreeDndProps> = ({
           const isPlacementChanged =
             root.isPlacementChanged ?? root.movedItem === true;
           const isSelected = selectedNodeId === root["@id"];
+          const isCatalogHighlighted = !isBookTree && isSelected;
           const itemLink = root["uri.ui"] || root["@href"];
           const targetLevel = 1;
           const isInteractionLocked = isDefaultMatterPage(root);
@@ -619,7 +623,11 @@ const TreeDnd: React.FC<TreeDndProps> = ({
           );
 
           return (
-            <div key={root["@id"]} data-node-id={root["@id"]}>
+            <div
+              key={root["@id"]}
+              data-node-id={root["@id"]}
+              style={isCatalogHighlighted ? CATALOG_NODE_HIGHLIGHT_STYLE : undefined}
+            >
               <List.Item
                 draggable={!isInteractionLocked}
                 onDragStart={(event: DragEvent<HTMLDivElement>) => {
@@ -766,39 +774,69 @@ const TreeDnd: React.FC<TreeDndProps> = ({
                 <span style={{ width: 12 }} />
 
                 <Icon name="folder" color="grey" />
-                {!isBookTree && itemLink ? (
-                  <a
-                    href={itemLink}
-                    target="_blank"
-                    rel="noreferrer"
-                    className="text-base"
-                    style={{
-                      whiteSpace: "nowrap",
-                      fontStyle: isInteractionLocked ? "italic" : "normal",
-
-                      textDecoration: isDeleted ? "line-through" : "none",
-                    }}
-                    onClick={(event) => event.stopPropagation()}
-                  >
-                    {displayTitle}
-                    <Icon
-                      name="linkify"
-                      style={{ marginLeft: 8, color: "#1e70bf" }}
-                    />
-                  </a>
-                ) : (
-                  <span
-                    className="text-base"
-                    style={{
-                      whiteSpace: "nowrap",
-                      fontStyle: isInteractionLocked ? "italic" : "normal",
-                      color: isInteractionLocked ? "#6b7280" : "inherit",
-                      textDecoration: isDeleted ? "line-through" : "none",
-                    }}
-                  >
-                    {displayTitle}
-                  </span>
-                )}
+                {(() => {
+                  const showLink =
+                    Boolean(itemLink) &&
+                    itemLink !== "#" &&
+                    (!isBookTree || !isImported);
+                  const titleStyle: React.CSSProperties = {
+                    whiteSpace: "nowrap",
+                    fontStyle: isInteractionLocked ? "italic" : "normal",
+                    color: isInteractionLocked ? "#6b7280" : "inherit",
+                    textDecoration: isDeleted ? "line-through" : "none",
+                  };
+
+                  if (!showLink) {
+                    return (
+                      <span className="text-base" style={titleStyle}>
+                        {displayTitle}
+                      </span>
+                    );
+                  }
+
+                  if (!isBookTree) {
+                    return (
+                      <a
+                        href={itemLink}
+                        target="_blank"
+                        rel="noreferrer"
+                        className="text-base"
+                        style={{
+                          ...titleStyle,
+                          color: undefined,
+                        }}
+                        onClick={(event) => event.stopPropagation()}
+                      >
+                        {displayTitle}
+                        <Icon
+                          name="linkify"
+                          style={{ marginLeft: 8, color: "#1e70bf" }}
+                        />
+                      </a>
+                    );
+                  }
+
+                  return (
+                    <>
+                      <span className="text-base" style={titleStyle}>
+                        {displayTitle}
+                      </span>
+                      <a
+                        href={itemLink}
+                        target="_blank"
+                        rel="noreferrer"
+                        title="Open page"
+                        onClick={(event) => event.stopPropagation()}
+                        style={{ display: "inline-flex", marginLeft: 8 }}
+                      >
+                        <Icon
+                          name="linkify"
+                          style={{ color: "#1e70bf", margin: 0 }}
+                        />
+                      </a>
+                    </>
+                  );
+                })()}
               </List.Item>
               {renderNodes(
                 root["@id"],