[ENG-1545] Switch positions of node type and node title fields (#907)

* [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>

* lint and remove unnecessary change

* small fixes

* address pr comment

* address PR comments

* address PR comments

* address PR comments about non-null assertions

* override global style to restore focus-ring

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

Author: trangdoan982

apps/roam/src/components/ModifyNodeDialog.tsx

@@ -22,7 +22,9 @@ import renderOverlay, {
 import fireQuery from "~/utils/fireQuery";
 import getDiscourseNodes, {
   excludeDefaultNodes,
+  type DiscourseNode,
 } from "~/utils/getDiscourseNodes";
+import { getAllDiscourseNodesSince } from "~/utils/getAllDiscourseNodesSince";
 import FuzzySelectInput from "./FuzzySelectInput";
 import { createBlock, updateBlock } from "roamjs-components/writes";
 import {
@@ -40,7 +42,7 @@ import posthog from "posthog-js";
 export type ModifyNodeDialogMode = "create" | "edit";
 export type ModifyNodeDialogProps = {
   mode: ModifyNodeDialogMode;
-  nodeType: string;
+  nodeType?: string;
   initialValue: { text: string; uid: string };
   initialReferencedNode?: { text: string; uid: string };
   sourceBlockUid?: string; //the block that we started modifying from
@@ -109,13 +111,15 @@ const ModifyNodeDialog = ({
       : allNodes.filter(excludeDefaultNodes);
   }, [includeDefaultNodes]);
 
-  const [selectedNodeType, setSelectedNodeType] = useState(() => {
+  const [selectedNodeType, setSelectedNodeType] = useState<
+    DiscourseNode | undefined
+  >(() => {
     const node = discourseNodes.find((n) => n.type === nodeType);
-    return node || discourseNodes[0];
+    return node;
   });
 
   const nodeFormat = useMemo(() => {
-    return selectedNodeType.format || "";
+    return selectedNodeType?.format || "";
   }, [selectedNodeType]);
 
   const referencedNode = useMemo(() => {
@@ -160,6 +164,19 @@ const ModifyNodeDialog = ({
           if (contentRequestIdRef.current === req && alive) {
             setOptions((prev) => ({ ...prev, content: results }));
           }
+        } else {
+          const rawResults = await getAllDiscourseNodesSince(
+            undefined,
+            discourseNodes,
+          );
+          const results = rawResults.map((r) => ({
+            text: r.text,
+            uid: r.source_local_id,
+            discourseNodeType: r.type,
+          }));
+          if (contentRequestIdRef.current === req && alive) {
+            setOptions((prev) => ({ ...prev, content: results }));
+          }
         }
       } catch (error) {
         if (contentRequestIdRef.current === req && alive) {
@@ -224,11 +241,24 @@ const ModifyNodeDialog = ({
       alive = false;
       refAlive = false;
     };
-  }, [selectedNodeType, referencedNode]);
-
-  const setValue = useCallback((r: Result) => {
-    setContent(r);
-  }, []);
+  }, [selectedNodeType, referencedNode, discourseNodes]);
+
+  const setValue = useCallback(
+    (r: Result) => {
+      setContent(r);
+      if (!selectedNodeType && r.uid) {
+        const detectedType = r.discourseNodeType;
+        if (detectedType) {
+          const nt = discourseNodes.find((n) => n.type === detectedType);
+          if (nt) {
+            setSelectedNodeType(nt);
+            setError("");
+          }
+        }
+      }
+    },
+    [selectedNodeType, discourseNodes],
+  );
 
   const setReferencedNodeValueCallback = useCallback((r: Result) => {
     setReferencedNodeValue(r);
@@ -304,9 +334,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 +360,7 @@ const ModifyNodeDialog = ({
               await addImageToPage({
                 pageUid,
                 imageUrl,
-                configPageUid: selectedNodeType.type,
+                configPageUid: selectedNodeType?.type || "",
                 extensionAPI,
               });
             }
@@ -371,6 +405,7 @@ const ModifyNodeDialog = ({
             },
           );
         } else {
+          if (!selectedNodeType) return;
           formattedTitle = await getNewDiscourseNodeText({
             text: content.text.trim(),
             nodeType: selectedNodeType.type,
@@ -384,7 +419,7 @@ const ModifyNodeDialog = ({
         // Create new discourse node
         const newPageUid = await createDiscourseNode({
           text: formattedTitle,
-          configPageUid: selectedNodeType.type,
+          configPageUid: selectedNodeType?.type ?? "",
           extensionAPI,
           imageUrl,
         });
@@ -505,56 +540,62 @@ const ModifyNodeDialog = ({
         style={{ pointerEvents: "all" }}
       >
         <div className={`${Classes.DIALOG_BODY} flex flex-col gap-4`}>
+          {/* Content Input */}
+          <Label className="w-full">
+            Content
+            <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}
+            />
+          </Label>
+
           {/* Node Type Selector */}
           <div className="flex w-full">
-            <Label autoFocus={false}>
+            <Label autoFocus={false} className="w-full">
               Node Type
               <MenuItemSelect
                 items={discourseNodes.map((n) => n.type)}
                 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: "" });
+                    setError("");
                   }
                 }}
-                disabled={mode === "edit" || disableNodeTypeChange}
-                popoverProps={{ openOnTargetFocus: false }}
-                className={
-                  mode === "edit" || disableNodeTypeChange
-                    ? "cursor-not-allowed opacity-50"
-                    : ""
+                disabled={
+                  mode === "edit" || disableNodeTypeChange || isContentLocked
                 }
+                popoverProps={{ openOnTargetFocus: false }}
+                ButtonProps={{
+                  className:
+                    mode === "edit" || disableNodeTypeChange || isContentLocked
+                      ? "cursor-not-allowed opacity-50"
+                      : "",
+                }}
               />
             </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">
-              <Label>{referencedNode.name}</Label>
+            <Label className="w-full">
+              {referencedNode.name}
               <FuzzySelectInput
                 value={referencedNodeValue}
                 setValue={setReferencedNodeValueCallback}
@@ -564,7 +605,7 @@ const ModifyNodeDialog = ({
                 isLocked={isReferencedNodeLocked}
                 autoFocus={false}
               />
-            </div>
+            </Label>
           )}
         </div>
         {/* Submit Button */}

apps/roam/src/styles/discourseGraphStyles.css

@@ -171,6 +171,22 @@ div.roamjs-discourse-drawer div.bp3-drawer {
   min-height: 96px;
 }
 
+/* 
+  Override button focus inside roamjs-canvas-dialog.
+
+  Reason:
+  - Blueprint defines a global `:focus` outline, but does NOT provide a
+    button-specific focus rule with higher specificity.
+  - If a global `outline: none` (or similar override) is applied elsewhere,
+    buttons can lose their visible focus state.
+  - This restores a proper focus outline for accessibility, scoped locally,
+    matching Blueprint’s default focus styling intent.
+*/
+.roamjs-canvas-dialog .bp3-button:focus-visible {
+  outline: 2px auto rgba(19, 124, 189, 0.6);
+  outline-offset: 2px;
+}
+
 .bp3-tabs.bp3-vertical > .bp3-tab-panel {
   flex-grow: 1;
 }

apps/roam/src/utils/getAllDiscourseNodesSince.ts

@@ -64,10 +64,10 @@ export const getDiscourseNodeTypeWithSettingsBlockNodes = async (
 };
 
 export const getAllDiscourseNodesSince = async (
-  since: ISODateString,
+  since: ISODateString | undefined,
   nodeTypes: DiscourseNode[],
 ): Promise<RoamDiscourseNodeData[]> => {
-  const sinceMs = new Date(since).getTime();
+  const sinceMs = since ? new Date(since).getTime() : 0;
   if (!nodeTypes.length) {
     return [];
   }

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) => {