Add choice rename action and edit indicator

src/gui/ChoiceBuilder/choiceBuilder.ts

@@ -1,4 +1,4 @@
-import { type App, Modal, Setting } from "obsidian";
+import { type App, Modal, Setting, setIcon } from "obsidian";
 import type { SvelteComponent } from "svelte";
 import { log } from "../../logger/logManager";
 import type IChoice from "../../types/choices/IChoice";
@@ -85,7 +85,15 @@ export abstract class ChoiceBuilder extends Modal {
 		const headerEl: HTMLHeadingElement = this.contentEl.createEl("h2", {
 			cls: "choiceNameHeader",
 		});
-		headerEl.setText(choice.name);
+		const textEl = headerEl.createSpan({
+			text: choice.name,
+			cls: "choiceNameHeaderText",
+		});
+		const iconEl = headerEl.createSpan({
+			cls: "choiceNameHeaderIcon",
+			attr: { "aria-hidden": "true" },
+		});
+		setIcon(iconEl, "pencil");
 
 		headerEl.addEventListener("click", async (ev) => {
 			try {
@@ -97,7 +105,7 @@ export abstract class ChoiceBuilder extends Modal {
 				);
 				if (newName !== choice.name) {
 					choice.name = newName;
-					headerEl.setText(newName);
+					textEl.setText(newName);
 				}
 			} catch {
 				log.logMessage(`No new name given for ${choice.name}`);

src/gui/choiceList/ChoiceList.svelte

@@ -73,6 +73,7 @@
                     on:configureChoice
                     on:toggleCommand
                     on:duplicateChoice
+                    on:renameChoice
                     on:moveChoice
                     startDrag={startDrag}
                     bind:choice
@@ -86,6 +87,7 @@
                     on:configureChoice
                     on:toggleCommand
                     on:duplicateChoice
+                    on:renameChoice
                     on:moveChoice
                     on:reorderChoices
                     startDrag={startDrag}

src/gui/choiceList/ChoiceListItem.svelte

@@ -47,6 +47,7 @@
 
 	function onContextMenu(evt: MouseEvent) {
 		showChoiceContextMenu(app, evt, choice, roots, {
+			onRename: () => dispatcher("renameChoice", { choice }),
 			onToggle: () => toggleCommandForChoice(),
 			onConfigure: () => configureChoice(),
 			onDuplicate: () => duplicateChoice(),

src/gui/choiceList/ChoiceView.svelte

@@ -16,6 +16,7 @@
 	import type IChoice from "../../types/choices/IChoice";
 	import { AIAssistantSettingsModal } from "../AIAssistantSettingsModal";
 	import ObsidianIcon from "../components/ObsidianIcon.svelte";
+	import GenericInputPrompt from "../GenericInputPrompt/GenericInputPrompt";
 	import AddChoiceBox from "./AddChoiceBox.svelte";
 	import ChoiceList from "./ChoiceList.svelte";
 	import { moveChoice as moveChoiceService } from "../../services/choiceService";
@@ -132,6 +133,31 @@
 		return oldChoice;
 	}
 
+	async function handleRenameChoice(e: any) {
+		const { choice } = e.detail;
+		if (!choice) return;
+
+		try {
+			const newName = await GenericInputPrompt.Prompt(
+				app,
+				choice.name,
+				"Choice name",
+				choice.name,
+			);
+			const trimmed = newName.trim();
+			if (!trimmed || trimmed === choice.name) return;
+
+			const updatedChoice = { ...choice, name: trimmed };
+			choices = choices.map((entry) =>
+				updateChoiceHelper(entry, updatedChoice),
+			);
+			commandRegistry.updateCommand(choice, updatedChoice);
+			saveChoices(choices);
+		} catch {
+			// Swallow cancellation/no input.
+		}
+	}
+
 	async function toggleCommandForChoice(e: any) {
 		const { choice: oldChoice } = e.detail;
 		const updatedChoice = createToggleCommandChoice(oldChoice);
@@ -209,6 +235,7 @@
 			on:configureChoice={handleConfigureChoice}
 			on:toggleCommand={toggleCommandForChoice}
 			on:duplicateChoice={handleDuplicateChoice}
+			on:renameChoice={handleRenameChoice}
 			on:moveChoice={handleMoveChoice}
 			on:reorderChoices={(e) => saveChoices(e.detail.choices)}
 		/>
@@ -223,6 +250,7 @@
 			on:configureChoice={handleConfigureChoice}
 			on:toggleCommand={toggleCommandForChoice}
 			on:duplicateChoice={handleDuplicateChoice}
+			on:renameChoice={handleRenameChoice}
 			on:moveChoice={handleMoveChoice}
 		/>
 	{/if}

src/gui/choiceList/MultiChoiceListItem.svelte

@@ -52,6 +52,7 @@
 
     function onContextMenu(evt: MouseEvent) {
         showChoiceContextMenu(app, evt, choice, roots, {
+            onRename: () => dispatcher('renameChoice', { choice }),
             onToggle: () => toggleCommandForChoice(),
             onConfigure: () => configureChoice(),
             onDuplicate: () => duplicateChoice(),
@@ -114,6 +115,7 @@
                         on:toggleCommand
                         on:duplicateChoice
                         on:moveChoice
+                        on:renameChoice
                         on:reorderChoices={handleNestedReorder}
                         bind:multiChoice={choice}
                         bind:choices={choice.choices}

src/gui/choiceList/contextMenu.ts

@@ -49,6 +49,7 @@ function isInvalidTarget(moving: IChoice, target: IChoice): boolean {
 }
 
 type MenuActions = {
+  onRename: () => void;
   onToggle: () => void;
   onConfigure: () => void;
   onDuplicate: () => void;
@@ -79,6 +80,7 @@ export function showChoiceContextMenu(
         .setIcon("zap")
         .onClick(actions.onToggle),
     )
+    .addItem((item) => item.setTitle("Rename").setIcon("pencil").onClick(actions.onRename))
     .addItem((item) => item.setTitle("Configure").setIcon("settings").onClick(actions.onConfigure))
     .addItem((item) => item.setTitle("Duplicate").setIcon("copy").onClick(actions.onDuplicate))
     .addItem((item) => item.setTitle("Delete").setIcon("trash-2").onClick(actions.onDelete))

src/styles.css

@@ -36,12 +36,22 @@
 
 .choiceNameHeader {
 	text-align: center;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
 }
 
 .choiceNameHeader:hover {
 	cursor: pointer;
 }
 
+.choiceNameHeaderIcon {
+	display: inline-flex;
+	align-items: center;
+	opacity: 0.5;
+}
+
 .folderInputContainer {
 	display: flex;
 	align-content: center;