From 4f6b5340938e039b674a3b4f65933be961e87d22 Mon Sep 17 00:00:00 2001
From: mkelvers <mikkelelvers@outlook.com>
Date: Wed, 13 May 2026 19:08:13 +0200
Subject: [PATCH] refactor: extract watchlist remove button into shared
 component

---
 templates/components/watchlist_actions.gohtml | 22 ++++++++++++++-----
 templates/watch.gohtml                        | 13 ++++++-----
 2 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/templates/components/watchlist_actions.gohtml b/templates/components/watchlist_actions.gohtml
index 81274f7..549d90e 100644
--- a/templates/components/watchlist_actions.gohtml
+++ b/templates/components/watchlist_actions.gohtml
@@ -36,12 +36,13 @@
           <span class="font-medium text-sm text-foreground">Dropped</span>
         </button>
         
-        <div id="remove-watchlist-container-{{$anime.MalID}}" class="{{if not $status}}hidden{{end}}">
-          <div class="my-1 h-px bg-border"></div>
-          <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10 focus:bg-red-500/10" onclick="removeWatchlist({{$anime.MalID}}, this)">
-            <span class="font-medium text-sm text-red-500 text-left whitespace-nowrap">Remove from Watchlist</span>
-          </button>
-        </div>
+        {{template "watchlist_remove_button" dict
+          "ID" $anime.MalID
+          "ContainerClass" "hidden"
+          "DividerClass" "my-1 h-px bg-border"
+          "ButtonClass" "flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10 focus:bg-red-500/10"
+          "SpanClass" "font-medium text-sm text-red-500 text-left whitespace-nowrap"
+        }}
       </div>
     </div>
   </ui-dropdown>
@@ -50,4 +51,13 @@
     {{if and .ContinueWatchingEp (ne .ContinueWatchingEp 1)}}Continue Episode {{.ContinueWatchingEp}}{{else}}Watch Now{{end}}
   </a>
 </div>
+{{end}}
+
+{{define "watchlist_remove_button"}}
+  <div id="remove-watchlist-container-{{.ID}}" class="{{.ContainerClass}}">
+    <div class="{{.DividerClass}}"></div>
+    <button class="{{.ButtonClass}}" onclick="removeWatchlist({{.ID}}, this)">
+      <span class="{{.SpanClass}}">Remove from Watchlist</span>
+    </button>
+  </div>
 {{end}}
\ No newline at end of file
diff --git a/templates/watch.gohtml b/templates/watch.gohtml
index 7a5e54d..52007b3 100644
--- a/templates/watch.gohtml
+++ b/templates/watch.gohtml
@@ -37,12 +37,13 @@
             <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'dropped', 'Dropped', this)">
               <span class="text-sm text-foreground">Dropped</span>
             </button>
-            <div id="remove-watchlist-container-{{$anime.MalID}}" class="hidden">
-              <div class="border-t border-border my-1"></div>
-              <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10" onclick="removeWatchlist({{$anime.MalID}}, this)">
-                <span class="text-sm text-red-400 whitespace-nowrap">Remove from Watchlist</span>
-              </button>
-            </div>
+            {{template "watchlist_remove_button" dict
+              "ID" $anime.MalID
+              "ContainerClass" "hidden"
+              "DividerClass" "border-t border-border my-1"
+              "ButtonClass" "flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10"
+              "SpanClass" "text-sm text-red-400 whitespace-nowrap"
+            }}
           </div>
         </div>
       </ui-dropdown>