[ENG-1545] Switch positions of node type and node title fields

Move Content input above Node Type selector so users can immediately
start typing. Support empty Node Type (queries all node types),
auto-detect type on selection, and lock type when a node is selected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: trangdoan982

apps/roam/src/components/ModifyNodeDialog.tsx

@@ -109,13 +109,16 @@ const ModifyNodeDialog = ({
       : allNodes.filter(excludeDefaultNodes);
   }, [includeDefaultNodes]);
 
-  const [selectedNodeType, setSelectedNodeType] = useState(() => {
+  const [selectedNodeType, setSelectedNodeType] = useState<
+    (typeof discourseNodes)[number] | null
+  >(() => {
+    if (!nodeType) return null;
     const node = discourseNodes.find((n) => n.type === nodeType);
-    return node || discourseNodes[0];
+    return node || null;
   });
 
   const nodeFormat = useMemo(() => {
-    return selectedNodeType.format || "";
+    return selectedNodeType?.format || "";
   }, [selectedNodeType]);
 
   const referencedNode = useMemo(() => {
@@ -160,6 +163,39 @@ const ModifyNodeDialog = ({
           if (contentRequestIdRef.current === req && alive) {
             setOptions((prev) => ({ ...prev, content: results }));
           }
+        } else {
+          // Query all discourse node types in parallel
+          const allResults = await Promise.all(
+            discourseNodes.map(async (node) => {
+              const conditionUid = window.roamAlphaAPI.util.generateUID();
+              const results = await fireQuery({
+                returnNode: "node",
+                selections: [],
+                conditions: [
+                  {
+                    source: "node",
+                    relation: "is a",
+                    target: node.type,
+                    uid: conditionUid,
+                    type: "clause",
+                  },
+                ],
+              });
+              return results.map((r) => ({
+                ...r,
+                _discourseNodeType: node.type,
+              }));
+            }),
+          );
+          const seen = new Set<string>();
+          const deduped = allResults.flat().filter((r) => {
+            if (seen.has(r.uid)) return false;
+            seen.add(r.uid);
+            return true;
+          });
+          if (contentRequestIdRef.current === req && alive) {
+            setOptions((prev) => ({ ...prev, content: deduped }));
+          }
         }
       } catch (error) {
         if (contentRequestIdRef.current === req && alive) {
@@ -226,9 +262,20 @@ const ModifyNodeDialog = ({
     };
   }, [selectedNodeType, referencedNode]);
 
-  const setValue = useCallback((r: Result) => {
-    setContent(r);
-  }, []);
+  const setValue = useCallback(
+    (r: Result) => {
+      setContent(r);
+      if (!selectedNodeType && r.uid) {
+        const detectedType = (r as Record<string, unknown>)
+          ._discourseNodeType as string | undefined;
+        if (detectedType) {
+          const nt = discourseNodes.find((n) => n.type === detectedType);
+          if (nt) setSelectedNodeType(nt);
+        }
+      }
+    },
+    [selectedNodeType, discourseNodes],
+  );
 
   const setReferencedNodeValueCallback = useCallback((r: Result) => {
     setReferencedNodeValue(r);
@@ -304,9 +351,13 @@ const ModifyNodeDialog = ({
 
   const onSubmit = async () => {
     if (!content.text.trim()) return;
+    if (!selectedNodeType && !isContentLocked) {
+      setError("Please select a node type");
+      return;
+    }
     posthog.capture("Modify Node Dialog: Submit Triggered", {
       mode,
-      nodeType: selectedNodeType.type,
+      nodeType: selectedNodeType?.type,
     });
     try {
       if (mode === "create") {
@@ -326,7 +377,7 @@ const ModifyNodeDialog = ({
               await addImageToPage({
                 pageUid,
                 imageUrl,
-                configPageUid: selectedNodeType.type,
+                configPageUid: selectedNodeType!.type,
                 extensionAPI,
               });
             }
@@ -373,7 +424,7 @@ const ModifyNodeDialog = ({
         } else {
           formattedTitle = await getNewDiscourseNodeText({
             text: content.text.trim(),
-            nodeType: selectedNodeType.type,
+            nodeType: selectedNodeType!.type,
             blockUid: sourceBlockUid,
           });
         }
@@ -384,7 +435,7 @@ const ModifyNodeDialog = ({
         // Create new discourse node
         const newPageUid = await createDiscourseNode({
           text: formattedTitle,
-          configPageUid: selectedNodeType.type,
+          configPageUid: selectedNodeType!.type,
           extensionAPI,
           imageUrl,
         });
@@ -505,6 +556,26 @@ const ModifyNodeDialog = ({
         style={{ pointerEvents: "all" }}
       >
         <div className={`${Classes.DIALOG_BODY} flex flex-col gap-4`}>
+          {/* Content Input */}
+          <div className="w-full">
+            <Label>Content</Label>
+            <FuzzySelectInput
+              value={content}
+              setValue={setValue}
+              options={options.content}
+              placeholder={
+                loading
+                  ? "..."
+                  : selectedNodeType
+                    ? `Enter a ${selectedNodeType.text.toLowerCase()} ...`
+                    : "Search all nodes..."
+              }
+              mode={mode}
+              isLocked={isContentLocked}
+              autoFocus={!isContentLocked}
+            />
+          </div>
+
           {/* Node Type Selector */}
           <div className="flex w-full">
             <Label autoFocus={false}>
@@ -514,15 +585,17 @@ const ModifyNodeDialog = ({
                 transformItem={(t) =>
                   discourseNodes.find((n) => n.type === t)?.text || t
                 }
-                activeItem={selectedNodeType.type}
+                activeItem={selectedNodeType?.type ?? null}
                 onItemSelect={(t) => {
                   const nt = discourseNodes.find((n) => n.type === t);
                   if (nt) {
                     setSelectedNodeType(nt);
                     setReferencedNodeValue({ text: "", uid: "" });
                   }
                 }}
-                disabled={mode === "edit" || disableNodeTypeChange}
+                disabled={
+                  mode === "edit" || disableNodeTypeChange || isContentLocked
+                }
                 popoverProps={{ openOnTargetFocus: false }}
                 className={
                   mode === "edit" || disableNodeTypeChange
@@ -533,24 +606,6 @@ const ModifyNodeDialog = ({
             </Label>
           </div>
 
-          {/* Content Input */}
-          <div className="w-full">
-            <Label>Content</Label>
-            <FuzzySelectInput
-              value={content}
-              setValue={setValue}
-              options={options.content}
-              placeholder={
-                loading
-                  ? "..."
-                  : `Enter a ${selectedNodeType.text.toLowerCase()} ...`
-              }
-              mode={mode}
-              isLocked={isContentLocked}
-              autoFocus={!isContentLocked}
-            />
-          </div>
-
           {/* Referenced Node Input */}
           {referencedNode && !isContentLocked && mode === "create" && (
             <div className="w-full">

apps/roam/src/utils/registerCommandPaletteCommands.ts

@@ -189,19 +189,9 @@ export const registerCommandPaletteCommands = (onloadArgs: OnloadArgs) => {
 
     const selectionStart = uid ? getSelectionStartForBlock(uid) : 0;
 
-    const defaultNodeType =
-      getDiscourseNodes().filter(excludeDefaultNodes)[0]?.type;
-    if (!defaultNodeType) {
-      renderToast({
-        id: "create-discourse-node-command-no-types",
-        content: "No discourse node types found in settings.",
-      });
-      return;
-    }
-
     renderModifyNodeDialog({
       mode: "create",
-      nodeType: defaultNodeType,
+      nodeType: "",
       initialValue: { text: "", uid: "" },
       extensionAPI,
       onSuccess: async (result) => {