From 39bbf67e9f822a5b0fe8c37569213edbb2c6af06 Mon Sep 17 00:00:00 2001
From: Rohan <154054727+Rohan2460@users.noreply.github.com>
Date: Mon, 29 Sep 2025 01:40:20 +0530
Subject: [PATCH 1/2] Add arrow key navigation for node catalog

---
 .../floating-menus/NodeCatalog.svelte         | 33 ++++++++++++++++++-
 1 file changed, 32 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte
index 58856e2ac8..f1c627ba3f 100644
--- a/frontend/src/components/floating-menus/NodeCatalog.svelte
+++ b/frontend/src/components/floating-menus/NodeCatalog.svelte
@@ -19,6 +19,9 @@
 
 	$: nodeCategories = buildNodeCategories($nodeGraph.nodeTypes, searchTerm);
 
+	let focusedNodeIndex = 0;
+	$: flatNodeList = nodeCategories.flatMap((node) => node[1].nodes);
+
 	type NodeCategoryDetails = {
 		nodes: FrontendNodeType[];
 		open: boolean;
@@ -29,6 +32,7 @@
 		const isTypeSearch = searchTerm.toLowerCase().startsWith("type:");
 		let typeSearchTerm = "";
 		let remainingSearchTerms = [searchTerm.toLowerCase()];
+		focusedNodeIndex = 0;
 
 		if (isTypeSearch) {
 			// Extract the first word after "type:" as the type search
@@ -104,11 +108,32 @@
 			});
 	}
 
+	function keyboardNavigationHandler(e: KeyboardEvent) {
+		const listLength: number = flatNodeList.length;
+		if (listLength === 0) return;
+
+		if (e.key === "ArrowDown") {
+			focusedNodeIndex = (focusedNodeIndex + 1) % listLength;
+			e.preventDefault();
+		} else if (e.key === "ArrowUp") {
+			focusedNodeIndex = (focusedNodeIndex - 1 + listLength) % listLength;
+			e.preventDefault();
+		} else if (e.key === "Enter") {
+			const node = flatNodeList[focusedNodeIndex];
+			dispatch("selectNodeType", node.name);
+		} else {
+			return;
+		}
+
+		setTimeout(() => document.querySelector(".node-catalog button.emphasized")?.scrollIntoView({ block: "nearest" }), 0);
+	}
+
 	onMount(() => {
 		setTimeout(() => nodeSearchInput?.focus(), 0);
 	});
 </script>
 
+<svelte:window on:keydown={keyboardNavigationHandler} />
 <div class="node-catalog">
 	<TextInput placeholder="Search Nodes..." value={searchTerm} on:value={({ detail }) => (searchTerm = detail)} bind:this={nodeSearchInput} />
 	<div class="list-results" on:wheel|passive|stopPropagation>
@@ -118,7 +143,13 @@
 					<TextLabel>{nodeCategory[0]}</TextLabel>
 				</summary>
 				{#each nodeCategory[1].nodes as nodeType}
-					<TextButton {disabled} label={nodeType.name} tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)} action={() => dispatch("selectNodeType", nodeType.name)} />
+					<TextButton
+						{disabled}
+						label={nodeType.name}
+						tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)}
+						emphasized={nodeType == flatNodeList[focusedNodeIndex]}
+						action={() => dispatch("selectNodeType", nodeType.name)}
+					/>
 				{/each}
 			</details>
 		{:else}

From 838c92785557da3fbd79c81ed2337bdb74a8ecdc Mon Sep 17 00:00:00 2001
From: Rohan <154054727+Rohan2460@users.noreply.github.com>
Date: Fri, 3 Oct 2025 19:00:39 +0530
Subject: [PATCH 2/2] Add focused prop to TextButton

Replaced emphasized with focused in NodeCatalog
---
 .../src/components/floating-menus/NodeCatalog.svelte  |  4 ++--
 .../src/components/widgets/buttons/TextButton.svelte  | 11 ++++++++---
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/floating-menus/NodeCatalog.svelte b/frontend/src/components/floating-menus/NodeCatalog.svelte
index f1c627ba3f..c9f3935624 100644
--- a/frontend/src/components/floating-menus/NodeCatalog.svelte
+++ b/frontend/src/components/floating-menus/NodeCatalog.svelte
@@ -125,7 +125,7 @@
 			return;
 		}
 
-		setTimeout(() => document.querySelector(".node-catalog button.emphasized")?.scrollIntoView({ block: "nearest" }), 0);
+		setTimeout(() => document.querySelector(".node-catalog button.focused")?.scrollIntoView({ block: "nearest" }), 0);
 	}
 
 	onMount(() => {
@@ -147,7 +147,7 @@
 						{disabled}
 						label={nodeType.name}
 						tooltip={$nodeGraph.nodeDescriptions.get(nodeType.name)}
-						emphasized={nodeType == flatNodeList[focusedNodeIndex]}
+						focused={nodeType == flatNodeList[focusedNodeIndex]}
 						action={() => dispatch("selectNodeType", nodeType.name)}
 					/>
 				{/each}
diff --git a/frontend/src/components/widgets/buttons/TextButton.svelte b/frontend/src/components/widgets/buttons/TextButton.svelte
index 8cfc3ec4d5..893edf2b8f 100644
--- a/frontend/src/components/widgets/buttons/TextButton.svelte
+++ b/frontend/src/components/widgets/buttons/TextButton.svelte
@@ -15,6 +15,7 @@
 	export let icon: IconName | undefined = undefined;
 	export let hoverIcon: IconName | undefined = undefined;
 	export let emphasized = false;
+	export let focused = false;
 	export let flush = false;
 	export let minWidth = 0;
 	export let disabled = false;
@@ -54,6 +55,7 @@
 		class:open={self?.open}
 		class:hover-icon={hoverIcon && !disabled}
 		class:emphasized
+		class:focused
 		class:disabled
 		class:narrow
 		class:flush
@@ -118,7 +120,8 @@
 		}
 
 		&:hover,
-		&.open {
+		&.open,
+		&.focused {
 			--button-background-color: var(--color-6-lowergray);
 			--button-text-color: var(--color-f-white);
 		}
@@ -143,7 +146,8 @@
 			--button-text-color: var(--color-2-mildblack);
 
 			&:hover,
-			&.open {
+			&.open,
+			&.focused {
 				--button-background-color: var(--color-f-white);
 			}
 
@@ -157,7 +161,8 @@
 			--button-text-color: var(--color-e-nearwhite);
 
 			&:hover,
-			&.open {
+			&.open,
+			&.focused {
 				--button-background-color: var(--color-5-dullgray);
 			}
 		}