From b27a2050a70932b9987b8d76e7cfe87c0ea6df7b Mon Sep 17 00:00:00 2001
From: Tim Wundenberg <tim@wundenbergs.de>
Date: Tue, 20 May 2025 22:06:40 +0200
Subject: [PATCH] fix(treasurechest): fix jumpy swaps due to non unique ids

---
 template/treasurechest/treasure_chest.templ | 22 +++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/template/treasurechest/treasure_chest.templ b/template/treasurechest/treasure_chest.templ
index 76441c7..10da234 100644
--- a/template/treasurechest/treasure_chest.templ
+++ b/template/treasurechest/treasure_chest.templ
@@ -16,7 +16,7 @@ templ TreasureChest(treasureChests []*types.TreasureChest) {
 			@svg.Plus()
 			<p>New Treasure Chest</p>
 		</button>
-		<div id="treasurechest-items" class="my-6 flex flex-col items-center">
+		<div id="treasurechest-items" class="my-6 flex flex-col">
 			for _, treasureChest := range treasureChests {
 				@TreasureChestItem(treasureChest)
 			}
@@ -33,6 +33,7 @@ templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.Tre
 		cancelUrl string
 	)
 
+	indentation := " mt-10"
 	if treasureChest == nil {
 		id = "new"
 		name = ""
@@ -43,14 +44,15 @@ templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.Tre
 		name = treasureChest.Name
 		if treasureChest.ParentId != nil {
 			parentId = *treasureChest.ParentId
+			indentation = " mt-2 ml-14"
 		}
 		cancelUrl = "/treasurechest/" + id
 	}
 	}}
-	<div id="treasurechest" class="border-1 border-gray-300 w-full my-4 p-4 bg-gray-50 rounded-lg">
+	<div id={ "treasurechest-" + id } class={ "border-1 border-gray-300 p-4 bg-gray-50 rounded-lg" + indentation }>
 		<form
 			hx-post={ "/treasurechest/" + id }
-			hx-target="closest #treasurechest"
+			hx-target={ "#treasurechest-" + id }
 			hx-swap="outerHTML"
 			class="text-xl flex justify-end gap-4 items-center"
 		>
@@ -79,7 +81,7 @@ templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.Tre
 			</button>
 			<button
 				hx-get={ cancelUrl }
-				hx-target="closest #treasurechest"
+				hx-target={ "#treasurechest-" + id }
 				hx-swap="outerHTML"
 				class="button button-neglect px-1 flex items-center gap-2"
 			>
@@ -94,16 +96,16 @@ templ EditTreasureChest(treasureChest *types.TreasureChest, parents []*types.Tre
 
 templ TreasureChestItem(treasureChest *types.TreasureChest) {
 	{{
-	var identation string
+	var indentation string
 	viewTransactions := ""
 	if treasureChest.ParentId != nil {
-		identation = " mt-2 ml-36"
+		indentation = " mt-2 ml-14"
 	} else {
-		identation = " mt-8"
+		indentation = " mt-10"
 		viewTransactions = "hidden"
 	}
 	}}
-	<div id="treasurechest" class={ "border-1 border-gray-300 w-full p-4 bg-gray-50 rounded-lg" + identation }>
+	<div id={ "treasurechest-" + treasureChest.Id.String() } class={ "border-1 border-gray-300 p-4 bg-gray-50 rounded-lg" + indentation }>
 		<div class="text-xl flex justify-end items-center gap-4">
 			<p class="mr-auto">{ treasureChest.Name }</p>
 			if treasureChest.ParentId != nil {
@@ -125,7 +127,7 @@ templ TreasureChestItem(treasureChest *types.TreasureChest) {
 			</a>
 			<button
 				hx-get={ "/treasurechest/" + treasureChest.Id.String() + "?edit=true" }
-				hx-target="closest #treasurechest"
+				hx-target={ "#treasurechest-" + treasureChest.Id.String() }
 				hx-swap="outerHTML"
 				class="button button-neglect px-1 flex items-center gap-2"
 			>
@@ -136,7 +138,7 @@ templ TreasureChestItem(treasureChest *types.TreasureChest) {
 			</button>
 			<button
 				hx-delete={ "/treasurechest/" + treasureChest.Id.String() }
-				hx-target="closest #treasurechest"
+				hx-target={ "#treasurechest-" + treasureChest.Id.String() }
 				hx-swap="outerHTML"
 				class="button button-neglect px-1 flex items-center gap-2"
 			>