From 1dc78ca91697ef87dd8eb93088e2f595b7b465b7 Mon Sep 17 00:00:00 2001
From: mf <milaforge@proton.me>
Date: Fri, 19 Jun 2026 12:14:20 +0200
Subject: [PATCH] Add F2 rename shortcut (#142)

Adds F2 as a keyboard shortcut for focused note and notebook rows, reusing the existing inline rename flow.

Reviewed-on: https://codeberg.org/ArkHost/HelixNotes/pulls/142
---
 src/lib/components/NoteList.svelte | 14 +++++++++++++-
 src/lib/components/Sidebar.svelte  | 13 ++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/NoteList.svelte b/src/lib/components/NoteList.svelte
index d85faa5..7ced63c 100644
--- a/src/lib/components/NoteList.svelte
+++ b/src/lib/components/NoteList.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { tick } from 'svelte';
 	import {
 		notes,
 		sortedNotes,
@@ -143,6 +144,7 @@
 	let sortMenu = $state<{ x: number; y: number } | null>(null);
 	let editingNote = $state<string | null>(null);
 	let editValue = $state('');
+	let renameInput: HTMLInputElement | null = $state(null);
 	let movePickerNote = $state<NoteEntry | null>(null);
 	let tagEditNote = $state<NoteEntry | null>(null);
 	let tagEditTags = $state<string[]>([]);
@@ -701,10 +703,13 @@
 		contextMenu = { x, y, note };
 	}
 
-	function startRename(note: NoteEntry) {
+	async function startRename(note: NoteEntry) {
 		contextMenu = null;
 		editingNote = note.path;
 		editValue = note.meta.title;
+		await tick();
+		renameInput?.focus();
+		renameInput?.select();
 	}
 
 	function getNotebookPath(note: NoteEntry): string {
@@ -1055,6 +1060,7 @@
 					<input
 						type="text"
 						class="rename-input"
+						bind:this={renameInput}
 						bind:value={editValue}
 						onkeydown={(e) => {
 							if (e.key === 'Enter') handleRename(note);
@@ -1073,6 +1079,12 @@
 					class:qa-drag-above={$viewMode === 'quickaccess' && qaDragOver === noteIndex && qaDragFrom !== null && qaDragHalf === 'top'}
 					class:qa-drag-below={$viewMode === 'quickaccess' && qaDragOver === noteIndex && qaDragFrom !== null && qaDragHalf === 'bottom'}
 					onclick={(e) => handleNoteClick(e, note)}
+					onkeydown={(e) => {
+						if (e.key === 'F2') {
+							e.preventDefault();
+							startRename(note);
+						}
+					}}
 					ontouchstart={(e) => { if (isMobile && !isAndroid) handleTouchStart(e, note); }}
 					ontouchmove={(e) => { if (isMobile && !isAndroid) handleTouchMove(e); }}
 					ontouchend={() => { if (isMobile && !isAndroid) handleTouchEnd(); }}
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 089d0d2..4819c9f 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -36,6 +36,7 @@
 
 	let editingNotebook = $state<string | null>(null);
 	let editValue = $state('');
+	let renameInput: HTMLInputElement | null = $state(null);
 	let newNotebookName = $state('');
 	let showNewNotebook = $state(false);
 	let newNotebookInput: HTMLInputElement | null = $state(null);
@@ -454,10 +455,13 @@
 		}
 	}
 
-	function startRename(nb: NotebookEntry) {
+	async function startRename(nb: NotebookEntry) {
 		contextMenu = null;
 		editingNotebook = nb.path;
 		editValue = nb.name;
+		await tick();
+		renameInput?.focus();
+		renameInput?.select();
 	}
 
 	async function handleSetIcon(nb: NotebookEntry) {
@@ -844,6 +848,7 @@
 			<input
 				type="text"
 				class="rename-input"
+				bind:this={renameInput}
 				bind:value={editValue}
 				onkeydown={(e) => {
 					if (e.key === 'Enter') handleRename(nb);
@@ -862,6 +867,12 @@
 			style="padding-left: {8 + depth * 16}px"
 			draggable="true"
 			onclick={() => selectNotebook(nb)}
+			onkeydown={(e) => {
+				if (e.key === 'F2') {
+					e.preventDefault();
+					startRename(nb);
+				}
+			}}
 			oncontextmenu={(e) => onContextMenu(e, nb)}
 			ondragstart={(e) => { draggedNotebookPath = nb.path; e.dataTransfer!.setData('text/plain', nb.path); e.dataTransfer!.effectAllowed = 'move'; }}
 			ondragend={() => { draggedNotebookPath = null; dropPosition = null; }}