refactor: extract watchlist remove button into shared component

This commit is contained in:
2026-05-13 19:08:13 +02:00
parent b3c906a16e
commit 4f6b534093
2 changed files with 23 additions and 12 deletions

View File

@@ -36,12 +36,13 @@
<span class="font-medium text-sm text-foreground">Dropped</span> <span class="font-medium text-sm text-foreground">Dropped</span>
</button> </button>
<div id="remove-watchlist-container-{{$anime.MalID}}" class="{{if not $status}}hidden{{end}}"> {{template "watchlist_remove_button" dict
<div class="my-1 h-px bg-border"></div> "ID" $anime.MalID
<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)"> "ContainerClass" "hidden"
<span class="font-medium text-sm text-red-500 text-left whitespace-nowrap">Remove from Watchlist</span> "DividerClass" "my-1 h-px bg-border"
</button> "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"
</div> "SpanClass" "font-medium text-sm text-red-500 text-left whitespace-nowrap"
}}
</div> </div>
</div> </div>
</ui-dropdown> </ui-dropdown>
@@ -51,3 +52,12 @@
</a> </a>
</div> </div>
{{end}} {{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}}

View File

@@ -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)"> <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> <span class="text-sm text-foreground">Dropped</span>
</button> </button>
<div id="remove-watchlist-container-{{$anime.MalID}}" class="hidden"> {{template "watchlist_remove_button" dict
<div class="border-t border-border my-1"></div> "ID" $anime.MalID
<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)"> "ContainerClass" "hidden"
<span class="text-sm text-red-400 whitespace-nowrap">Remove from Watchlist</span> "DividerClass" "border-t border-border my-1"
</button> "ButtonClass" "flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-red-500/10"
</div> "SpanClass" "text-sm text-red-400 whitespace-nowrap"
}}
</div> </div>
</div> </div>
</ui-dropdown> </ui-dropdown>