updated filter

Author: trangdoan982

apps/roam/src/components/canvas/Clipboard.tsx

@@ -56,9 +56,6 @@ import { openBlockInSidebar, createBlock } from "roamjs-components/writes";
 import getPageTitleByPageUid from "roamjs-components/queries/getPageTitleByPageUid";
 import getPageUidByPageTitle from "roamjs-components/queries/getPageUidByPageTitle";
 import findDiscourseNode from "~/utils/findDiscourseNode";
-import getDiscourseNodes, {
-  excludeDefaultNodes,
-} from "~/utils/getDiscourseNodes";
 import calcCanvasNodeSizeAndImg from "~/utils/calcCanvasNodeSizeAndImg";
 import { useExtensionAPI } from "roamjs-components/components/ExtensionApiContext";
 import { getDiscourseNodeColors } from "~/utils/getDiscourseNodeColors";
@@ -432,13 +429,15 @@ const ClipboardPageSection = ({
   searchQuery,
   sortDirection,
   selectedNodeType,
+  onNodeTypesChange,
 }: {
   page: ClipboardPage;
   onRemove: (uid: string) => void;
   showNodesOnCanvas: boolean;
   searchQuery: string;
   sortDirection: "asc" | "desc";
   selectedNodeType: string;
+  onNodeTypesChange: (pageUid: string, types: string[]) => void;
 }) => {
   const [isOpen, setIsOpen] = useState(true);
   const [discourseNodes, setDiscourseNodes] = useState<
@@ -591,6 +590,14 @@ const ClipboardPageSection = ({
     ],
   );
 
+  useEffect(() => {
+    const candidateNodes = showNodesOnCanvas
+      ? groupedNodes
+      : groupedNodes.filter((n) => n.shapes.length === 0);
+    const types = [...new Set(candidateNodes.map((n) => n.type))];
+    onNodeTypesChange(page.uid, types);
+  }, [groupedNodes, page.uid, onNodeTypesChange, showNodesOnCanvas]);
+
   useEffect(() => {
     setOpenSections((prev) => {
       const next: Record<string, boolean> = {};
@@ -1133,11 +1140,32 @@ export const ClipboardPanel = () => {
   const [isSearchExpanded, setIsSearchExpanded] = useState(false);
   const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
   const [selectedNodeType, setSelectedNodeType] = useState("All");
+  const [nodeTypesByPage, setNodeTypesByPage] = useState<
+    Record<string, string[]>
+  >({});
+
+  const handleNodeTypesChange = useCallback(
+    (pageUid: string, types: string[]) => {
+      setNodeTypesByPage((prev) => ({ ...prev, [pageUid]: types }));
+    },
+    [],
+  );
 
   const availableNodeTypes = useMemo(() => {
-    const types = getDiscourseNodes().filter(excludeDefaultNodes);
-    return ["All", ...types.map((t) => t.text)];
-  }, []);
+    const pageUids = new Set(pages.map((p) => p.uid));
+    const allTypes = new Set(
+      Object.entries(nodeTypesByPage)
+        .filter(([uid]) => pageUids.has(uid))
+        .flatMap(([, types]) => types),
+    );
+    return ["All", ...Array.from(allTypes).sort()];
+  }, [nodeTypesByPage, pages]);
+
+  useEffect(() => {
+    if (selectedNodeType !== "All" && !availableNodeTypes.includes(selectedNodeType)) {
+      setSelectedNodeType("All");
+    }
+  }, [availableNodeTypes, selectedNodeType]);
 
   const hasActiveFilters = !!searchQuery || selectedNodeType !== "All";
 
@@ -1331,6 +1359,7 @@ export const ClipboardPanel = () => {
                     searchQuery={searchQuery}
                     sortDirection={sortDirection}
                     selectedNodeType={selectedNodeType}
+                    onNodeTypesChange={handleNodeTypesChange}
                   />
                 ))}
               </div>