refactor: general architectural cleanup and bug fixes

templates/anime.gohtml

@@ -2,7 +2,7 @@
 <div class="mt-12 w-full">
   <h2 class="mb-6 text-lg font-normal text-foreground">Characters & Cast</h2>
   <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
-    {{range (slice . 0 (min (len .) 10))}}
+    {{range (slice .Items 0 (min (len .Items) 10))}}
       <div class="flex gap-3 bg-background-surface p-3 ring-1 ring-border">
         <div class="h-16 w-12 shrink-0 overflow-hidden bg-background-surface">
           <img src="{{.Character.Images.Jpg.ImageURL}}" alt="{{.Character.Name}}" class="h-full w-full object-cover" loading="lazy" />
@@ -21,11 +21,11 @@
 {{end}}
 
 {{define "anime_recommendations"}}
-{{if .}}
+{{if .Items}}
 <div class="w-full">
   <h2 class="mb-6 text-lg font-normal text-foreground">Recommendations</h2>
   <div class="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8">
-    {{range (slice . 0 (min (len .) 8))}}
+    {{range (slice .Items 0 (min (len .Items) 8))}}
       <a href="/anime/{{.Entry.MalID}}" class="group flex flex-col gap-2">
         <div class="aspect-2/3 overflow-hidden bg-background-surface shadow-md">
           <img src="{{.Entry.Images.Webp.LargeImageURL}}" alt="{{.Entry.Title}}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
@@ -43,7 +43,7 @@
 {{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
 {{$anime := .Anime}}
 
-  <div class="flex flex-col gap-10 pr-0 lg:pr-80">
+<div class="flex flex-col gap-10 lg:pr-80">
   <div class="flex flex-col gap-8 md:flex-row lg:gap-12">
     <div class="flex w-64 shrink-0 flex-col items-center gap-6 md:w-80 md:items-start lg:w-96">
       <div class="aspect-2/3 w-full overflow-hidden bg-background-surface shadow-lg">

templates/base.gohtml

@@ -33,7 +33,7 @@
     html[data-theme="light"] .theme-icon-light { display: none; }
     html[data-theme="light"] .theme-icon-dark { display: block; }
   </style>
-  <script type="module" src="/dist/static/theme.js" defer></script>
+  <script type="module" src="/dist/theme.js" defer></script>
   <template id="toast-template">
     <div class="toast bg-foreground/10 border border-border flex items-center gap-3 px-4 py-3 shadow-lg transform transition-all duration-300 translate-y-2 opacity-0">
       <span class="toast-message text-sm text-foreground"></span>
@@ -44,15 +44,15 @@
       </button>
     </div>
   </template>
-  <script type="module" src="/dist/static/dropdown.js" defer></script>
-  <script type="module" src="/dist/static/discover.js" defer></script>
-  <script type="module" src="/dist/static/anime.js" defer></script>
-  <script type="module" src="/dist/static/timezone.js" defer></script>
+  <script type="module" src="/dist/dropdown.js" defer></script>
+  <script type="module" src="/dist/discover.js" defer></script>
+  <script type="module" src="/dist/anime.js" defer></script>
+  <script type="module" src="/dist/timezone.js" defer></script>
   <script type="module" src="/dist/static/player/main.js" defer></script>
-  <script type="module" src="/dist/static/search.js" defer></script>
-  <script type="module" src="/dist/static/sort_filter.js" defer></script>
-  <script type="module" src="/dist/static/dedupe.js" defer></script>
-  <script type="module" src="/dist/static/toast.js" defer></script>
+  <script type="module" src="/dist/search.js" defer></script>
+  <script type="module" src="/dist/sort_filter.js" defer></script>
+  <script type="module" src="/dist/dedupe.js" defer></script>
+  <script type="module" src="/dist/toast.js" defer></script>
   <script src="https://unpkg.com/htmx.org@1.9.12"></script>
   <script>
     document.addEventListener('htmx:afterSwap', function(evt) {
@@ -195,20 +195,19 @@ if (window.showToast) showToast({ message: 'Something went wrong' })
         <button id="mobile-overlay" class="hidden fixed inset-0 z-40 w-full cursor-default border-none bg-black/60 backdrop-blur-sm outline-none lg:hidden" onclick="toggleMobileMenu()" aria-label="Close mobile menu"></button>
   
         <!-- Sidebar -->
-        <div id="mobile-menu" class="fixed inset-y-0 left-0 z-50 shrink-0 overflow-hidden transform lg:relative lg:z-auto lg:translate-x-0 w-64 shadow-2xl transition-transform duration-300 -translate-x-full lg:block">
+        <div id="mobile-menu" class="fixed inset-y-0 left-0 z-50 shrink-0 overflow-hidden transform lg:relative lg:z-auto lg:translate-x-0 w-64 transition-transform duration-300 -translate-x-full lg:block">
           {{block "sidebar" .}}
             {{template "navigation" dict "CurrentPath" .CurrentPath}}
           {{end}}
         </div>
   
-        <main class="w-full flex-1 overflow-x-hidden flex flex-col h-screen overflow-y-auto">
+        <main class="w-full flex-1 flex flex-col h-screen overflow-y-auto">
           <div class="sticky top-0 z-40 w-full">
             {{template "header" .}}
           </div>
           <div class="flex-1 p-4 md:p-8 lg:p-10">
             {{template "content" .}}
           </div>
-          {{template "footer" .}}
         </main>
       </div>
     {{else}}
@@ -216,7 +215,6 @@ if (window.showToast) showToast({ message: 'Something went wrong' })
         <div class="flex-1">
           {{template "content" .}}
         </div>
-        {{template "footer" .}}
       </main>
     {{end}}
   </div>

templates/components/continue_watching.gohtml

@@ -9,7 +9,7 @@
 
       <div id="continue-watching-{{.AnimeID}}" class="continue-watching-item group relative w-70 shrink-0 snap-start space-y-2 2xl:w-lg">
         <div class="bg-background/80 relative aspect-video w-full overflow-hidden">
-          <a href="/anime/{{.AnimeID}}/watch" class="block h-full w-full">
+          <a href="/watch/{{.AnimeID}}" class="block h-full w-full">
             <img src="{{if .ImageUrl}}{{.ImageUrl}}{{else}}https://placehold.co/500x500{{end}}" alt="{{$title}}" class="h-full w-full object-cover" />
           </a>
 
@@ -29,7 +29,7 @@
         </div>
 
         <div>
-          <a href="/anime/{{.AnimeID}}/watch" class="block">
+          <a href="/watch/{{.AnimeID}}" class="block">
             <h3 class="text-foreground truncate text-lg font-normal">
               {{$title}}
             </h3>

templates/components/watchlist_actions.gohtml

@@ -46,8 +46,9 @@
     </div>
   </ui-dropdown>
 
-  <a href="/anime/{{$anime.MalID}}/watch" class="bg-background-button hover:bg-background-button-hover px-5 py-2.5 text-sm font-medium text-foreground transition-colors">
-    Watch
+  <a href="/watch/{{$anime.MalID}}" class="bg-background-button hover:bg-background-button-hover px-5 py-2.5 text-sm font-medium text-foreground transition-colors">
+    <i class="fa-solid fa-play mr-2"></i>
+    Watch Now
   </a>
 </div>