final touches

Author: trangdoan982

apps/roam/src/components/AdvancedNodeSearchDialog/AdvancedSearchDialog.tsx

@@ -422,7 +422,7 @@ const AdvancedNodeSearchDialog = ({
         onMouseUp={(event) => event.stopPropagation()}
         className="flex min-h-0 flex-1 flex-col overflow-hidden"
       >
-        <div className="flex flex-none items-center gap-2 border-b border-gray-200 px-3 py-2">
+        <div className="flex flex-none items-start gap-2 border-b border-gray-200 px-3 py-2">
           <div className="flex min-w-0 flex-1 items-center rounded border border-gray-300 bg-white px-2 py-1">
             <Icon icon="search" size={16} className="mr-2 text-gray-500" />
             <NodeTypeChipsSearchInput
@@ -449,19 +449,23 @@ const AdvancedNodeSearchDialog = ({
               selectedTypeIds={selectedNodeTypeIds}
             />
           </div>
-          <DiscourseNodeTypeFilter
-            nodeTypes={discourseNodes}
-            onPopoverOpenChange={setIsTypeFilterPopoverOpen}
-            onSelectedTypeIdsChange={setSelectedNodeTypeIds}
-            selectedTypeIds={selectedNodeTypeIds}
-          />
-          <DiscourseNodeSortControl
-            disabled={isIndexLoading || indexError}
-            onSortChange={handleSortChange}
-            sort={sort}
-          />
+          <div className="self-start">
+            <DiscourseNodeTypeFilter
+              nodeTypes={discourseNodes}
+              onPopoverOpenChange={setIsTypeFilterPopoverOpen}
+              onSelectedTypeIdsChange={setSelectedNodeTypeIds}
+              selectedTypeIds={selectedNodeTypeIds}
+            />
+          </div>
+          <div className="self-start">
+            <DiscourseNodeSortControl
+              disabled={isIndexLoading || indexError}
+              onSortChange={handleSortChange}
+              sort={sort}
+            />
+          </div>
           <Button
-            className="shrink-0"
+            className="shrink-0 self-start"
             icon="cross"
             minimal
             onClick={onClose}

apps/roam/src/components/AdvancedNodeSearchDialog/NodeTypeChipsSearchInput.tsx

@@ -21,7 +21,7 @@ type NodeTypeChipsSearchInputProps = {
 const isPlainCharacterKey = (event: React.KeyboardEvent): boolean =>
   event.key.length === 1 && !event.altKey && !event.ctrlKey && !event.metaKey;
 
-const getUniquePrefixMatch = ({
+const getBestPrefixMatch = ({
   nodeTypes,
   query,
   selectedTypeIds,
@@ -40,7 +40,12 @@ const getUniquePrefixMatch = ({
       node.text.toLowerCase().startsWith(normalizedQuery),
   );
 
-  return matches.length === 1 ? matches[0] : null;
+  if (!matches.length) return null;
+
+  const exactMatch = matches.find(
+    (node) => node.text.toLowerCase() === normalizedQuery,
+  );
+  return exactMatch ?? matches[0];
 };
 
 export const NodeTypeChipsSearchInput = ({
@@ -76,9 +81,9 @@ export const NodeTypeChipsSearchInput = ({
     [nodeTypeById, selectedTypeIds],
   );
 
-  const uniquePrefixMatch = useMemo(
+  const bestPrefixMatch = useMemo(
     () =>
-      getUniquePrefixMatch({
+      getBestPrefixMatch({
         nodeTypes,
         query: searchTerm,
         selectedTypeIds,
@@ -87,12 +92,12 @@ export const NodeTypeChipsSearchInput = ({
   );
 
   const completionSuffix = useMemo(() => {
-    if (!uniquePrefixMatch) return "";
+    if (!bestPrefixMatch) return "";
     const normalizedQuery = searchTerm.trim();
-    const nodeText = uniquePrefixMatch.text;
+    const nodeText = bestPrefixMatch.text;
     if (nodeText.toLowerCase() === normalizedQuery.toLowerCase()) return "";
     return nodeText.slice(normalizedQuery.length);
-  }, [searchTerm, uniquePrefixMatch]);
+  }, [bestPrefixMatch, searchTerm]);
 
   useEffect(() => {
     if (focusedChipIndex < 0) return;
@@ -112,11 +117,6 @@ export const NodeTypeChipsSearchInput = ({
     onSearchTermChange("");
   };
 
-  const removeChipAtIndex = (chipIndex: number): void => {
-    const nextIds = selectedTypeIds.filter((_, index) => index !== chipIndex);
-    onSelectedTypeIdsChange(nextIds);
-  };
-
   const handleChipKeyDown = (
     event: React.KeyboardEvent<HTMLSpanElement>,
     chipIndex: number,
@@ -180,9 +180,9 @@ export const NodeTypeChipsSearchInput = ({
     event: React.KeyboardEvent<HTMLInputElement>,
   ): void => {
     if (event.key === "Tab") {
-      if (uniquePrefixMatch) {
+      if (bestPrefixMatch) {
         event.preventDefault();
-        commitNodeType(uniquePrefixMatch);
+        commitNodeType(bestPrefixMatch);
       }
       return;
     }
@@ -240,7 +240,7 @@ export const NodeTypeChipsSearchInput = ({
   };
 
   return (
-    <div className="flex min-w-0 flex-1 items-center gap-1 py-0.5">
+    <div className="flex min-w-0 flex-1 flex-wrap items-center gap-1 py-0.5">
       {selectedNodeTypes.map((nodeType, index) => {
         const isFocused = focusedChipIndex === index;
         return (
@@ -262,17 +262,25 @@ export const NodeTypeChipsSearchInput = ({
           >
             <span
               className="inline-flex items-center gap-1.5 rounded px-2 py-1 text-xs"
-              style={getNodeTagStyles(nodeType.canvasSettings?.color)}
+              style={getNodeTagStyles(
+                nodeType.canvasSettings?.color ?? "#000000",
+              )}
             >
-              <span className="truncate leading-4">{nodeType.text}</span>
+              <span className="max-w-[10rem] truncate leading-4">
+                {nodeType.text}
+              </span>
               <Button
                 className="!h-4 !min-h-0 !w-4 !min-w-0 !p-0"
                 aria-label={`Remove ${nodeType.text} filter`}
                 icon={<Icon icon="cross" size={10} />}
                 minimal
                 onClick={(event) => {
                   event.stopPropagation();
-                  removeChipAtIndex(index);
+                  onSelectedTypeIdsChange(
+                    selectedTypeIds.filter(
+                      (_, chipIndex) => chipIndex !== index,
+                    ),
+                  );
                   focusInput();
                 }}
                 onMouseDown={(event) => event.preventDefault()}
@@ -282,7 +290,7 @@ export const NodeTypeChipsSearchInput = ({
           </span>
         );
       })}
-      <span className="relative min-w-0 flex-1">
+      <span className="relative min-w-[12ch] flex-1">
         {completionSuffix && (
           <span className="pointer-events-none absolute inset-0 flex items-center overflow-hidden whitespace-nowrap text-sm">
             <span className="invisible">{searchTerm}</span>