refactor(properties-dialog): port labels as toggled view, like code view (#289)

Author: milanofthe

src/lib/components/dialogs/BlockPropertiesDialog.svelte

@@ -26,6 +26,7 @@
 
 	// Code preview state (declared early — referenced by subscription below)
 	let showCode = $state(false);
+	let showPortLabels = $state(false);
 	let previewCode = $state('');
 	let editorContainer = $state<HTMLDivElement | undefined>(undefined);
 	let editorView: import('@codemirror/view').EditorView | null = null;
@@ -51,10 +52,12 @@
 			node = graphStore.getNode(id) || null;
 			// Reset to properties view when opening a new node
 			showCode = false;
+			showPortLabels = false;
 			destroyEditor();
 		} else {
 			node = null;
 			showCode = false;
+			showPortLabels = false;
 			destroyEditor();
 		}
 	});
@@ -146,11 +149,23 @@
 			const blockCode = generateBlockCode(node, allNodes, allConnections);
 			previewCode = header + blockCode;
 			copied = false;
+			showPortLabels = false;
 			showCode = true;
 			setTimeout(() => initEditor(), 0);
 		}
 	}
 
+	// Toggle port-labels view (same mutual-exclusion pattern as code view)
+	function togglePortLabelsView() {
+		if (showPortLabels) {
+			showPortLabels = false;
+		} else {
+			showCode = false;
+			destroyEditor();
+			showPortLabels = true;
+		}
+	}
+
 	function copyToClipboard() {
 		navigator.clipboard.writeText(previewCode);
 		copied = true;
@@ -184,7 +199,7 @@
 	// itself is the source of truth and editing port names directly would be
 	// overwritten on the next param change.
 	const hasParamDrivenPortLabels = $derived(node ? getPortLabelConfigs(node.type).length > 0 : false);
-	const showPortLabels = $derived(
+	const hasEditablePortLabels = $derived(
 		!!node && !hasParamDrivenPortLabels && (node.inputs.length > 0 || node.outputs.length > 0)
 	);
 
@@ -276,6 +291,8 @@
 		<div class="dialog-header">
 				{#if showCode}
 					<span id="dialog-title">Python Code</span>
+				{:else if showPortLabels}
+					<span id="dialog-title">Port Labels</span>
 				{:else}
 					<div class="node-info">
 						<input
@@ -306,7 +323,7 @@
 								<Icon name="copy" size={16} />
 							{/if}
 						</button>
-					{:else}
+					{:else if !showPortLabels}
 						<!-- Color picker -->
 						<ColorPicker
 							currentColor={currentColor}
@@ -348,15 +365,28 @@
 							</button>
 						{/if}
 					{/if}
-					<!-- Toggle code view button -->
-					<button
-						class="icon-btn"
-						onclick={toggleCodeView}
-						use:tooltip={showCode ? "View Properties" : "View Python Code"}
-						aria-label={showCode ? "View Properties" : "View Python Code"}
-					>
-						<Icon name={showCode ? "settings" : "braces"} size={16} />
-					</button>
+					<!-- Toggle port labels view button (hidden in code view) -->
+					{#if showPortLabels || (!showCode && hasEditablePortLabels)}
+						<button
+							class="icon-btn"
+							onclick={togglePortLabelsView}
+							use:tooltip={showPortLabels ? "View Properties" : "Edit Port Labels"}
+							aria-label={showPortLabels ? "View Properties" : "Edit Port Labels"}
+						>
+							<Icon name={showPortLabels ? "settings" : "tag"} size={16} />
+						</button>
+					{/if}
+					<!-- Toggle code view button (hidden in port-labels view) -->
+					{#if !showPortLabels}
+						<button
+							class="icon-btn"
+							onclick={toggleCodeView}
+							use:tooltip={showCode ? "View Properties" : "View Python Code"}
+							aria-label={showCode ? "View Properties" : "View Python Code"}
+						>
+							<Icon name={showCode ? "settings" : "braces"} size={16} />
+						</button>
+					{/if}
 					<button class="icon-btn" onclick={closeNodeDialog} aria-label="Close">
 						<Icon name="x" size={16} />
 					</button>
@@ -371,6 +401,40 @@
 							<div class="loading">Loading...</div>
 						{/if}
 					</div>
+				{:else if showPortLabels}
+					<!-- Port labels view -->
+					{#if node.inputs.length === 0 && node.outputs.length === 0}
+						<div class="no-params">No ports to label</div>
+					{:else}
+						<div class="section">
+							<div class="params-grid">
+								{#each node.inputs as port, i (port.id)}
+									<div class="param-item">
+										<label for="port-in-{i}">in {i}</label>
+										<input
+											id="port-in-{i}"
+											type="text"
+											value={port.name}
+											placeholder={PORT_NAME.input(i)}
+											onchange={(e) => handlePortNameChange('input', i, e.currentTarget.value)}
+										/>
+									</div>
+								{/each}
+								{#each node.outputs as port, i (port.id)}
+									<div class="param-item">
+										<label for="port-out-{i}">out {i}</label>
+										<input
+											id="port-out-{i}"
+											type="text"
+											value={port.name}
+											placeholder={PORT_NAME.output(i)}
+											onchange={(e) => handlePortNameChange('output', i, e.currentTarget.value)}
+										/>
+									</div>
+								{/each}
+							</div>
+						</div>
+					{/if}
 				{:else}
 					<!-- Parameters -->
 					{#if typeDef.params.length > 0}
@@ -428,45 +492,12 @@
 						<div class="no-params">No configurable parameters</div>
 					{/if}
 
-					<!-- Port labels — customise the names shown on each handle -->
-					{#if showPortLabels}
-						<div class="section">
-							<div class="section-title">Port labels</div>
-							<div class="params-grid">
-								{#each node.inputs as port, i (port.id)}
-									<div class="param-item">
-										<label for="port-in-{i}">in {i}</label>
-										<input
-											id="port-in-{i}"
-											type="text"
-											value={port.name}
-											placeholder={PORT_NAME.input(i)}
-											onchange={(e) => handlePortNameChange('input', i, e.currentTarget.value)}
-										/>
-									</div>
-								{/each}
-								{#each node.outputs as port, i (port.id)}
-									<div class="param-item">
-										<label for="port-out-{i}">out {i}</label>
-										<input
-											id="port-out-{i}"
-											type="text"
-											value={port.name}
-											placeholder={PORT_NAME.output(i)}
-											onchange={(e) => handlePortNameChange('output', i, e.currentTarget.value)}
-										/>
-									</div>
-								{/each}
-							</div>
-						</div>
-					{/if}
-
 					<!-- Documentation section (lazy loaded) -->
 					<DocumentationSection docstringHtml={docstringHtml} />
 				{/if}
 			</div>
 
-		{#if !showCode}
+		{#if !showCode && !showPortLabels}
 			<div class="dialog-footer">
 				<span class="hint">R rotate · X flip horizontal · Y flip vertical</span>
 			</div>