From ba3650899ed724a3edd8a838f177d3cd79528ca6 Mon Sep 17 00:00:00 2001
From: w33b <w33b@hstream.moe>
Date: Fri, 22 May 2026 23:07:19 +0200
Subject: [PATCH] Refactor home template

---
 .../home/partials/tab/template.blade.php      | 63 +++++++------------
 .../views/home/partials/tabs-middle.blade.php |  4 +-
 .../views/home/partials/tabs-top.blade.php    |  4 +-
 3 files changed, 25 insertions(+), 46 deletions(-)

diff --git a/resources/views/home/partials/tab/template.blade.php b/resources/views/home/partials/tab/template.blade.php
index 2fd38df..4707141 100644
--- a/resources/views/home/partials/tab/template.blade.php
+++ b/resources/views/home/partials/tab/template.blade.php
@@ -1,47 +1,26 @@
-@if ($showThumbnails)
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
-    @php 
-        $limit = 15;
-        $limitcounter = 0; 
-    @endphp
+@php
+    $isThumbnail = $showThumbnails;
 
-    @foreach ($episodes as $ep)
-        @if (isset($popularView))
-            @php $episode = $ep->episode @endphp
-        @else
-            @php $episode = $ep @endphp
-        @endif
+    $gridClasses = $isThumbnail
+        ? 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6'
+        : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-8';
 
-        @if ($limitcounter >= $limit)
-            @break
-        @endif
+    $limit = $isThumbnail ? 12 : 16;
 
-        <x-episode-cover :episode="$episode" view="thumbnail" />
+    $view = $isThumbnail ? 'thumbnail' : 'poster';
+@endphp
 
-        @php $limitcounter++; @endphp
+<div class="grid {{ $gridClasses }}">
+    @foreach ($episodes->take($limit) as $ep)
+        @php
+            $episode = isset($popularView)
+                ? $ep->episode
+                : $ep;
+        @endphp
+
+        <x-episode-cover
+            :episode="$episode"
+            :view="$view"
+        />
     @endforeach
-</div>
-@else
-<div class="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7 2xl:grid-cols-8 gap-2">
-    @php
-        $limit = 16;
-        $limitcounter = 0;
-    @endphp
-
-    @foreach ($episodes as $ep)
-        @if (isset($popularView))
-            @php $episode = $ep->episode @endphp
-        @else
-            @php $episode = $ep @endphp
-        @endif
-
-        @if ($limitcounter >= $limit)
-            @break
-        @endif
-
-        <x-episode-cover :episode="$episode" view="poster" />
-
-        @php $limitcounter++; @endphp
-    @endforeach
-</div>
-@endif
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/resources/views/home/partials/tabs-middle.blade.php b/resources/views/home/partials/tabs-middle.blade.php
index 49913a6..5444970 100644
--- a/resources/views/home/partials/tabs-middle.blade.php
+++ b/resources/views/home/partials/tabs-middle.blade.php
@@ -2,7 +2,7 @@
 <ul class="-mb-6 flex list-none flex-row flex-wrap border-b-0 pl-0 relative z-10" role="tablist" data-te-nav-ref>
     <li role="presentation" class="flex-auto text-center">
         <a href="#tabs-most-views"
-            class="rounded-l-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+            class="rounded-l-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-most-views" data-te-nav-active role="tab"
             aria-controls="tabs-most-views" aria-selected="true">
             {{ __('home.most-views') }}
@@ -26,7 +26,7 @@
     </li>
     <li role="presentation" class="flex-auto text-center">
         <a href="#tabs-popular-monthly"
-            class="rounded-r-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+            class="rounded-r-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white dark:bg-neutral-950 dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-popular-monthly" role="tab"
             aria-controls="tabs-popular-monthly" aria-selected="false">
             {{ __('home.popular-monthly') }}
diff --git a/resources/views/home/partials/tabs-top.blade.php b/resources/views/home/partials/tabs-top.blade.php
index f4ef9d3..bba7f7e 100644
--- a/resources/views/home/partials/tabs-top.blade.php
+++ b/resources/views/home/partials/tabs-top.blade.php
@@ -1,7 +1,7 @@
 <!--Tabs navigation-->
 <ul class="-mb-6 flex list-none flex-row flex-wrap border-b-0 pl-0 relative z-10" role="tablist" data-te-nav-ref>
     <li role="presentation" class="flex-auto text-center">
-        <a href="#tabs-recently-uploaded" class="rounded-l-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+        <a href="#tabs-recently-uploaded" class="rounded-l-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-recently-uploaded" data-te-nav-active role="tab" aria-controls="tabs-recently-uploaded" aria-selected="true">
             {{ __('home.recently-uploaded') }} ({{ Carbon\Carbon::parse($recentlyUploaded[0]->created_at)->diffForHumans([ 'parts' => 2 ]) }})
         </a>
@@ -13,7 +13,7 @@
         </a>
     </li>
     <li role="presentation" class="flex-auto text-center">
-        <a href="#tabs-trending" class="rounded-r-lg my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
+        <a href="#tabs-trending" class="rounded-r-xl my-2 block border-x-0 border-b-2 border-t-0 border-transparent px-7 pb-3.5 pt-4 text-xs font-medium uppercase leading-tight text-neutral-500 hover:isolate hover:border-transparent hover:bg-neutral-50 focus:isolate focus:border-transparent data-[te-nav-active]:border-rose-600 data-[te-nav-active]:text-black dark:text-neutral-400 bg-white/50 dark:bg-neutral-950/50 backdrop-blur-sm dark:hover:bg-neutral-950 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-trending" role="tab" aria-controls="tabs-trending" aria-selected="false">
             {{ __('home.trending') }}
         </a>