style: migrate filter_bar and video_player to v4 syntax

templates/components/filter_bar.gohtml

@@ -33,7 +33,7 @@
           type="text"
           value="{{.Query}}"
           placeholder="Search anime..."
-          class="!rounded-none w-full bg-background-button px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none transition-colors hover:bg-background-button-hover focus:ring-1 focus:ring-accent"
+          class="rounded-none! w-full bg-background-button px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none transition-colors hover:bg-background-button-hover focus:ring-1 focus:ring-accent"
         />
       </div>
       <input id="studio-input" type="hidden" name="studio" value="{{if .Studio}}{{.Studio}}{{end}}">
@@ -48,14 +48,14 @@
 
   <ui-dropdown id="studio-dropdown" class="relative block" data-align="left" data-width="w-72" hx-push-url="false">
     <div data-trigger class="cursor-pointer">
-      <button class="!rounded-none flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+      <button class="rounded-none! flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
         {{if .Studio}}{{if .StudioName}}{{.StudioName}}{{else}}Studio #{{.Studio}}{{end}}{{else}}Any Studio{{end}}
         <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
       </button>
     </div>
-    <div data-content class="hidden absolute z-50 w-72 overflow-hidden bg-background-button rounded-none shadow-[var(--shadow-card)] left-0 top-full mt-2">
+    <div data-content class="hidden absolute z-50 w-72 overflow-hidden bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2">
       <div class="p-2">
-        <input id="studio-search" type="text" placeholder="Search studios..." class="!rounded-none w-full bg-background-sidebar px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none focus:ring-1 focus:ring-accent"
+        <input id="studio-search" type="text" placeholder="Search studios..." class="rounded-none! w-full bg-background-sidebar px-3 py-2 text-sm text-foreground placeholder-foreground-muted outline-none focus:ring-1 focus:ring-accent"
           hx-get="/api/jikan/producers"
           hx-vals='{"page":1,"limit":12}'
           hx-trigger="input changed delay:250ms, search"
@@ -67,12 +67,12 @@
           name="q"
         />
       </div>
-      <div class="flex max-h-72 flex-col overflow-y-auto py-1 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" id="studio-results" hx-get="/api/jikan/producers?page=1&limit=12" hx-trigger="load" hx-target="this" hx-swap="innerHTML" hx-push-url="false" hx-headers='{"Accept":"text/html"}'>
+      <div class="flex max-h-72 flex-col overflow-y-auto py-1 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden" id="studio-results" hx-get="/api/jikan/producers?page=1&limit=12" hx-trigger="load" hx-target="this" hx-swap="innerHTML" hx-push-url="false" hx-headers='{"Accept":"text/html"}'>
       </div>
     </div>
   </ui-dropdown>
 
-  <form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content main" hx-select="#browse-content main" hx-swap="outerHTML" class="!rounded-none flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground">
+  <form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content main" hx-select="#browse-content main" hx-swap="outerHTML" class="rounded-none! flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground">
     <input type="hidden" name="q" value="{{.Query}}">
     {{if .Studio}}<input type="hidden" name="studio" value="{{.Studio}}">{{end}}
     {{if .Type}}<input type="hidden" name="type" value="{{.Type}}">{{end}}
@@ -92,12 +92,12 @@
 
   <ui-dropdown class="relative block" data-align="left" data-width="w-48">
     <div data-trigger class="cursor-pointer">
-      <button class="!rounded-none flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+      <button class="rounded-none! flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
         {{if $selectedCount}}Genres ({{$selectedCount}}){{else}}Genres{{end}}
         <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
       </button>
     </div>
-    <div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button rounded-none shadow-[var(--shadow-card)] left-0 top-full mt-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+    <div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2 [-ms-overflow-style:none] scrollbar-none [&::-webkit-scrollbar]:hidden">
       <form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content main" hx-select="#browse-content main" hx-swap="outerHTML" class="flex flex-col py-1">
         <input type="hidden" name="q" value="{{.Query}}">
         {{if .Studio}}<input type="hidden" name="studio" value="{{.Studio}}">{{end}}
@@ -128,7 +128,7 @@
         <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
       </button>
     </div>
-    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-[var(--shadow-card)] left-0 top-full mt-2 ">
+    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2 ">
       <div class="flex flex-col py-1">
         {{range $statusOptions}}
           <a href='{{browseURL $ (dict "status" .Value)}}' class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">{{.Label}}</a>
@@ -144,7 +144,7 @@
         <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
       </button>
     </div>
-    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-[var(--shadow-card)] left-0 top-full mt-2 ">
+    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2 ">
       <div class="flex flex-col py-1">
         {{range $typeOptions}}
           <a href='{{browseURL $ (dict "type" .Value)}}' class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">{{.Label}}</a>
@@ -156,12 +156,12 @@
   <div class="flex items-center gap-1">
     <ui-dropdown class="relative block" data-align="left" data-width="w-48">
       <div data-trigger class="cursor-pointer">
-        <button class="!rounded-none flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+        <button class="rounded-none! flex items-center gap-2 bg-background-button px-3 py-2 text-sm text-foreground hover:bg-background-button-hover transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
           Sort: {{if eq .OrderBy "popularity"}}Popularity{{else if eq .OrderBy "score"}}Score{{else if eq .OrderBy "title"}}Title{{else if eq .OrderBy "start_date"}}Start Date{{else if eq .OrderBy "episodes"}}Episodes{{else}}Default{{end}}
           <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
         </button>
       </div>
-      <div data-content class="hidden absolute z-50 w-48 bg-background-button rounded-none shadow-[var(--shadow-card)] left-0 top-full mt-2 ">
+      <div data-content class="hidden absolute z-50 w-48 bg-background-button rounded-none shadow-(--shadow-card) left-0 top-full mt-2 ">
         <div class="flex flex-col py-1">
           {{range $sortOptions}}
             <a href='{{browseURL $ (dict "order_by" .Value)}}' class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">{{.Label}}</a>
@@ -170,7 +170,7 @@
       </div>
     </ui-dropdown>
 
-    <a href='{{browseURL . (dict "sort" (nextSort .Sort))}}' class="!rounded-none flex h-9 w-9 items-center justify-center bg-background-button text-foreground-muted hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
+    <a href='{{browseURL . (dict "sort" (nextSort .Sort))}}' class="rounded-none! flex h-9 w-9 items-center justify-center bg-background-button text-foreground-muted hover:text-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
       {{if eq .Sort "asc"}}
         <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
       {{else}}

templates/components/video_player.gohtml

@@ -19,7 +19,7 @@
   
   <video class="h-full w-full cursor-pointer" preload="metadata" playsinline></video>
   
-  <div data-loading class="absolute inset-0 flex items-center justify-center bg-black/60 hidden z-50">
+  <div data-loading class="absolute inset-0 flex items-center justify-center bg-black/60 z-50">
     <div class="border-accent size-10 animate-spin rounded-full border-4 border-t-transparent"></div>
   </div>
 
@@ -55,20 +55,20 @@
                 <svg class="size-6 transition-transform duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
               </button>
             </div>
-            <div data-content class="hidden absolute z-50 w-64 bg-background-button rounded-none shadow-[var(--shadow-card)] ring-1 ring-black/10 right-0 bottom-full mb-2">
+            <div data-content class="hidden absolute z-50 w-64 bg-background-button rounded-none shadow-(--shadow-card) ring-1 ring-black/10 right-0 bottom-full mb-2">
               <div class="flex flex-col py-1">
                 <div class="flex items-center justify-between px-5 py-2.5">
                   <span class="text-[15px] font-normal text-foreground">Autoplay</span>
                   <label class="relative inline-flex cursor-pointer items-center">
                     <input id="player-autoplay" type="checkbox" data-autoplay class="peer sr-only" checked />
-                    <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-black/60 ring-1 ring-white/10 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
+                    <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-black/60 ring-1 ring-white/10 transition-colors after:absolute after:top-0.5 after:left-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
                   </label>
                 </div>
                 <div class="flex items-center justify-between px-5 py-2.5">
                   <span class="text-[15px] font-normal text-foreground">Auto-skip</span>
                   <label class="relative inline-flex cursor-pointer items-center">
                     <input id="player-autoskip" type="checkbox" data-autoskip class="peer sr-only" />
-                    <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-black/60 ring-1 ring-white/10 transition-colors after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
+                    <div class="peer-checked:bg-accent peer h-5 w-9 rounded-full bg-black/60 ring-1 ring-white/10 transition-colors after:absolute after:top-0.5 after:left-0.5 after:h-4 after:w-4 after:rounded-full after:bg-white after:transition-all peer-checked:after:translate-x-full"></div>
                   </label>
                 </div>
                 <div class="my-1 h-px w-full bg-white/10"></div>
@@ -81,11 +81,11 @@
                     <button data-mode-sub data-unstyled-button class="flex items-center justify-between px-5 py-2.5 text-left transition-colors hover:bg-surface-hover text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent">
                       <span class="text-sm font-normal">Japanese (Sub)</span>
                     </button>
-                    <div class="hidden px-5 py-2 flex flex-col gap-1">
+                    <div class="px-5 py-2 flex flex-col gap-1">
                       <span class="text-[10px] text-neutral-500 uppercase font-normal tracking-widest">Subtitles</span>
                       <select id="player-subtitle-select" data-subtitle-select class="w-full bg-white/5 text-white text-xs px-2 py-1.5 outline-none rounded"></select>
                     </div>
-                    <div class="hidden px-5 py-2 flex flex-col gap-1">
+                    <div class="px-5 py-2 flex flex-col gap-1">
                       <span class="text-[10px] text-neutral-500 uppercase font-normal tracking-widest">Quality</span>
                       <select id="player-quality-select" data-quality-select class="w-full bg-white/5 text-white text-xs px-2 py-1.5 outline-none rounded"></select>
                     </div>