Add rename option for locations with inline edit

Pencil icon on each location opens inline form to edit name and
description. Saves via rename action, cancel to discard.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/routes/(app)/locations/+page.server.ts

@@ -68,6 +68,20 @@ export const actions: Actions = {
 		return { created: true };
 	},
 
+	rename: async ({ request }) => {
+		const formData = await request.formData();
+		const id = formData.get('id') as string;
+		const name = (formData.get('name') as string)?.trim();
+		const description = (formData.get('description') as string)?.trim();
+		if (!name) return fail(400, { error: 'Name is required' });
+
+		await db
+			.update(locations)
+			.set({ name, description: description || null, updatedAt: new Date() })
+			.where(eq(locations.id, id));
+		return { renamed: true };
+	},
+
 	delete: async ({ request }) => {
 		const formData = await request.formData();
 		const id = formData.get('id') as string;

src/routes/(app)/locations/+page.svelte

@@ -3,6 +3,7 @@
 
 	let { data, form } = $props();
 	let showForm = $state(false);
+	let editingId = $state<string | null>(null);
 
 	type Loc = (typeof data.locations)[number] & { depth: number };
 
@@ -81,8 +82,31 @@
 	{:else}
 		<div class="space-y-2">
 			{#each sortedLocations as loc}
-				<div class="flex items-center justify-between rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800"
+				<div class="rounded-lg border border-gray-200 bg-white p-4 dark:border-gray-700 dark:bg-gray-800"
 					style="margin-left: {loc.depth * 1.5}rem">
+					{#if editingId === loc.id}
+						<form method="POST" action="?/rename" use:enhance={() => {
+							return async ({ update, result }) => {
+								await update();
+								if (result.type === 'success') editingId = null;
+							};
+						}} class="flex flex-wrap items-end gap-2">
+							<input type="hidden" name="id" value={loc.id} />
+							<div class="flex-1">
+								<label for="name-{loc.id}" class="mb-1 block text-xs text-gray-500 dark:text-gray-400">Name</label>
+								<input type="text" id="name-{loc.id}" name="name" value={loc.name} required
+									class="w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
+							</div>
+							<div class="flex-1">
+								<label for="desc-{loc.id}" class="mb-1 block text-xs text-gray-500 dark:text-gray-400">Description</label>
+								<input type="text" id="desc-{loc.id}" name="description" value={loc.description ?? ''}
+									class="w-full rounded-md border border-gray-300 px-3 py-1.5 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
+							</div>
+							<button type="submit" class="rounded-md bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700">Save</button>
+							<button type="button" onclick={() => (editingId = null)} class="rounded-md px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:text-gray-400 dark:hover:bg-gray-700">Cancel</button>
+						</form>
+					{:else}
+						<div class="flex items-center justify-between">
 							<div>
 								<h3 class="font-medium text-gray-900 dark:text-white">
 									{#if loc.depth > 0}
@@ -103,9 +127,14 @@
 										<span class="ml-2">{loc.componentCount} component{loc.componentCount !== 1 ? 's' : ''}</span>
 									{/if}
 								</div>
+								<button type="button" onclick={() => (editingId = loc.id)} class="text-gray-400 hover:text-blue-600 dark:text-gray-500 dark:hover:text-blue-400" title="Rename">
+									<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+										<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+									</svg>
+								</button>
 								<form method="POST" action="?/delete" use:enhance>
 									<input type="hidden" name="id" value={loc.id} />
-							<button type="submit" class="text-sm text-red-600 hover:text-red-700 dark:text-red-400" title="Delete">
+									<button type="submit" class="text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400" title="Delete">
 										<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 											<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
 										</svg>
@@ -113,6 +142,8 @@
 								</form>
 							</div>
 						</div>
+					{/if}
+				</div>
 			{/each}
 		</div>
 	{/if}