Fix smaller design issues

app/Helpers/FilterCategories.php

@@ -0,0 +1,102 @@
+<?php
+
+namespace App\Helpers;
+
+use Illuminate\Support\Facades\Auth;
+use Illuminate\Support\Facades\Cache;
+use Conner\Tagging\Model\Tag;
+
+class FilterCategories
+{
+    public static function getFilterCategories()
+    {
+        $taglist = Cache::remember(
+            'searchtags',
+            300,
+            fn () => Tag::where('count', '>', 0)
+                ->orderBy('slug')
+                ->get(),
+        );
+
+        $appearances = [
+            'Loli',
+            'Shota',
+            'Milf',
+            'Futanari',
+            'Big Boobs',
+            'Small Boobs',
+            'Dark Skin',
+            'Cosplay',
+            'Elf',
+            'Maid',
+            'Nekomimi',
+            'Nurse',
+            'School Girl',
+            'Succubus',
+            'Teacher',
+            'Trap',
+            'Pregnant',
+            'Glasses',
+            'Swim Suit',
+            'Ugly Bastard',
+            'Monster',
+        ];
+
+        $types = [
+            '3D',
+            '4K',
+            '48Fps',
+            '4K 48Fps',
+            'Censored',
+            'Uncensored',
+            'Comedy',
+            'Fantasy',
+            'Horror',
+            'Vanilla',
+            'Ntr',
+            'Pov',
+            'Filmed',
+            'X-Ray',
+        ];
+
+        $actions = [
+            'Anal',
+            'Bdsm',
+            'Facial',
+            'Blow Job',
+            'Boob Job',
+            'Foot Job',
+            'Hand Job',
+            'Rimjob',
+            'Inflation',
+            'Masturbation',
+            'Public Sex',
+            'Rape',
+            'Reverse Rape',
+            'Threesome',
+            'Orgy',
+            'Gangbang',
+        ];
+
+        $excluded = [...$appearances, ...$types, ...$actions];
+
+        $categories = [
+            'Genres' => $taglist
+                ->reject(fn ($tag) => in_array($tag->name, $excluded))
+                ->pluck('name')
+                ->toArray(),
+
+            'Actions' => $actions,
+
+            'Appearance' => collect($appearances)
+                ->reject(function ($tag) {
+                    return Auth::guest() && in_array($tag, ['Loli', 'Shota']);
+                })
+                ->toArray(),
+
+            'Types' => $types,
+        ];
+
+        return $categories;
+    }
+}

app/Http/Middleware/SetLocale.php

@@ -25,7 +25,9 @@ class SetLocale
         }
 
         // 2. Session (guest or user override)
-        if (session()->has('locale') && in_array($request->language, config('app.supported_locales'), true)) {
+        if ($request->session()->has('locale') && 
+            in_array(session('locale'), config('app.supported_locales'), true)) {
+            
             App::setLocale(session('locale'));
 
             return $next($request);

resources/js/preview.js

@@ -1,56 +1,52 @@
-const sleep = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
+function initGalleryPreviews() {
-var old_timestamp = document.getElementById('ts_reference').value;
+    const previews = document.querySelectorAll('.preview-gallery');
 
-function initPreviews() {
+    previews.forEach((img) => {
-    var thumbs = document.querySelectorAll('div[data-thumbs]');
+        // Prevent double initialization
-    thumbs.forEach(function (thumb) {
+        if (img.dataset.previewInitialized) return;
-        var thumbsJSON = JSON.parse(thumb.dataset.thumbs);
-        var originalImage = thumb.children[0].children[1].src;
-        var interval;
-        var i = 1;
 
-        function clear() {
+        img.dataset.previewInitialized = 'true';
-            thumb.children[0].children[1].src = originalImage;
+
-            i = 1;
+        let images = [];
-            clearTimeout(interval);
+
+        try {
+            images = JSON.parse(img.dataset.gallery);
+        } catch (e) {
+            console.error('Invalid gallery JSON', e);
+            return;
         }
 
-        function toggle() {
+        if (images.length <= 1) return;
-            if (i == 0) {
-                clear();
-                return;
-            }
 
-            thumb.children[0].children[1].src = thumbsJSON[i];
+        const original = img.src;
-            i = (i + 1) % thumbsJSON.length;
-        }
 
-        function interval() {
+        let index = 0;
-            // Start Preview
+        let interval = null;
-            interval = setInterval(toggle, 700);
-        }
 
-        thumb.addEventListener('mouseenter', interval);
+        const startPreview = () => {
-        thumb.addEventListener('mouseleave', clear);
+            console.log("startPreview");
+            interval = setInterval(() => {
+                index = (index + 1) % images.length;
+                img.src = images[index];
+            }, 700);
+        };
+
+        const stopPreview = () => {
+            console.log("stopPreview");
+            clearInterval(interval);
+            interval = null;
+
+            index = 0;
+            img.src = original;
+        };
+
+        img.addEventListener('mouseenter', startPreview);
+        img.addEventListener('mouseleave', stopPreview);
     });
 }
 
-async function init() {
+// Initial page load
-    for (let i = 0; i < 9; i++) {
+document.addEventListener('DOMContentLoaded', initGalleryPreviews);
-        var new_timestamp = document.getElementById('ts_reference').value;
-        if (new_timestamp != old_timestamp) {
-            console.log('== Changed ==');
-            initPreviews();
-            break;
-        }
-        console.log('== Didnt Change ==');
-        await sleep(1000);
-    }
-}
 
-window.addEventListener('contentChanged', event => {
+// Livewire v3 navigation/update
-    console.log('== Received contentChanged Event ==');
+document.addEventListener('contentChanged', initGalleryPreviews);
-    init();
-});
-
-initPreviews();

resources/js/responsive.js

@@ -0,0 +1,68 @@
+function updateGrid(grid) {
+    // Skip hidden grids
+    if (grid.offsetParent === null) {
+        return;
+    }
+
+    const items = [...grid.querySelectorAll('.episode-item')];
+
+    if (!items.length) {
+        return;
+    }
+
+    // Reset visibility first
+    items.forEach(item => {
+        item.style.display = '';
+    });
+
+    // Determine actual column count
+    const firstTop = items[0].offsetTop;
+
+    let columns = 0;
+
+    for (const item of items) {
+        if (item.offsetTop !== firstTop) {
+            break;
+        }
+
+        columns++;
+    }
+
+    const rows = parseInt(grid.dataset.rows || '2', 10);
+
+    const visibleItems = columns * rows;
+
+    items.forEach((item, index) => {
+        item.style.display = index < visibleItems
+            ? ''
+            : 'none';
+    });
+}
+
+function updateAllEpisodeGrids() {
+    document.querySelectorAll('.episode-grid').forEach(updateGrid);
+}
+
+const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            updateGrid(entry.target);
+        }
+    });
+});
+
+document.querySelectorAll('.episode-grid').forEach(grid => {
+    observer.observe(grid);
+});
+
+let resizeTimeout;
+
+window.addEventListener('resize', () => {
+    clearTimeout(resizeTimeout);
+
+    resizeTimeout = setTimeout(() => {
+        updateAllEpisodeGrids();
+    }, 100);
+});
+
+window.addEventListener('load', updateAllEpisodeGrids);

resources/views/auth/confirm-password.blade.php

@@ -1,5 +1,5 @@
 <x-guest-layout>
-    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
         <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
             {{ __('This is a secure area of the application. Please confirm your password before continuing.') }}
         </div>

resources/views/auth/forgot-password.blade.php

@@ -1,5 +1,5 @@
 <x-guest-layout>
-    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
         <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
             {{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
         </div>

resources/views/auth/login.blade.php

@@ -3,13 +3,13 @@
     <div class="w-full sm:max-w-md mt-6">
         <ul class="flex list-none flex-row flex-wrap border-b-0 pl-0 relative " role="tablist" data-te-nav-ref>
             <li role="presentation" class="flex-auto text-center">
-                <a href="#tabs-login" 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:bg-neutral-800 dark:data-[te-nav-active]:text-white"
+                <a href="#tabs-login" 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-800 backdrop-blur-sm dark:hover:bg-neutral-900 dark:data-[te-nav-active]:text-white"
                     data-te-toggle="pill" data-te-target="#tabs-login" data-te-nav-active role="tab" aria-controls="tabs-login" aria-selected="true">
                     {{ __('Login') }}
                 </a>
             </li>
             <li role="presentation" class="flex-auto text-center">
-                <a href="#tabs-register" 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-800 dark:data-[te-nav-active]:text-white"
+                <a href="#tabs-register" 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-800 backdrop-blur-sm dark:hover:bg-neutral-900 dark:data-[te-nav-active]:text-white"
                     data-te-toggle="pill" data-te-target="#tabs-register" role="tab" aria-controls="tabs-register" aria-selected="false">
                     {{ __('Register') }}
                 </a>
@@ -19,7 +19,7 @@
     
     <!-- Login -->
     <div class="w-full sm:max-w-md hidden opacity-100 transition-opacity duration-150 ease-linear data-[te-tab-active]:block" id="tabs-login" role="tabpanel" aria-labelledby="tabs-login" data-te-tab-active>
-        <div class="px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+        <div class="px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
             <div class="w-full text-center text-white mb-3">
                 <a href="{{ route('discord.login') }}">
                     <div
@@ -102,7 +102,7 @@
 
     <!-- Register -->
     <div class="w-full sm:max-w-md hidden opacity-0 transition-opacity duration-150 ease-linear data-[te-tab-active]:block" id="tabs-register" role="tabpanel" aria-labelledby="tabs-register">
-        <div class="px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+        <div class="px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
             <form method="POST" action="{{ route('register') }}">
                 @csrf
 

resources/views/auth/reset-password.blade.php

@@ -1,5 +1,5 @@
 <x-guest-layout>
-    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
         <form method="POST" action="{{ route('password.store') }}">
             @csrf
 

resources/views/auth/verify-email.blade.php

@@ -1,5 +1,5 @@
 <x-guest-layout>
-    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-950/50 shadow-md overflow-hidden sm:rounded-lg">
+    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white dark:bg-neutral-800 shadow-md overflow-hidden sm:rounded-lg">
         <div class="mb-4 text-sm text-gray-600 dark:text-gray-400">
             {{ __('Thanks for signing up! Before getting started, could you verify your email address by clicking on the link we just emailed to you? If you didn\'t receive the email, we will gladly send you another.') }}
         </div>

resources/views/components/episode-cover.blade.php

@@ -0,0 +1,128 @@
+@props([
+    'episode',
+    'view',
+    'displayjapanese' => false
+])
+
+@php
+    $title = $displayjapanese
+        ? "{$episode->title_jpn} ({$episode->title}) - {$episode->episode}"
+        : "{$episode->title} - {$episode->episode}";
+
+    $isLoggedIn = auth()->check();
+
+    $isWatched = $isLoggedIn
+        ? $episode->userWatched(auth()->id())
+        : false;
+
+    $problematic = cache()->rememberForever(
+        "episodeProblematic{$episode->id}",
+        fn () => $episode->getProblematicTags()
+    );
+@endphp
+
+<div class="group w-full p-1">
+    <a
+        href="{{ route('hentai.index', ['title' => $episode->slug]) }}"
+        class="block overflow-hidden rounded-2xl border dark:border-neutral-800 border-neutral-300 dark:bg-neutral-900 transition-all duration-300 hover:-translate-y-1 dark:hover:border-neutral-700 hover:border-neutral-400 hover:shadow-2xl hover:shadow-black/30"
+    >
+        <div class="relative overflow-hidden">
+
+            {{-- Thumbnail / Cover --}}
+            @if ($view === 'poster')
+                <img
+                    src="{{ $episode->cover_url }}"
+                    alt="{{ $episode->title }} - {{ $episode->episode }}"
+                    loading="lazy"
+                    width="400"
+                    class="aspect-[11/16] w-full object-cover object-center transform-gpu transition-transform duration-500 group-hover:scale-[1.02]"
+                >
+            @elseif ($view === 'thumbnail')
+                @php
+                    $galleryImages = $episode->gallery
+                        ->pluck('thumbnail_url')
+                        ->filter()
+                        ->values();
+                @endphp
+                <img
+                    src="{{ $galleryImages->first() }}"
+                    alt="{{ $episode->title }} - {{ $episode->episode }}"
+                    loading="lazy"
+                    width="1000"
+                    data-gallery='@json($galleryImages)'
+                    class="preview-gallery aspect-video w-full object-cover object-center transform-gpu transition-transform duration-500 group-hover:scale-[1.02]"
+                >
+            @endif
+
+            {{-- Overlay Gradient --}}
+            <div class="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/80 via-black/10 to-transparent"></div>
+
+            {{-- Top Row --}}
+            <div class="absolute inset-x-0 top-0 z-20 flex items-start justify-between p-3">
+
+                {{-- Problematic Tags --}}
+                @if (!empty($problematic))
+                    <div class="rounded-xl border border-red-500/30 bg-red-900/70 px-2.5 py-1 text-xs font-semibold text-white">
+                        <i class="fa-solid fa-triangle-exclamation mr-1"></i>
+                        {{ $problematic }}
+                    </div>
+                @endif
+
+                {{-- Resolution --}}
+                <div class="ml-auto rounded-xl bg-black/70 px-2.5 py-1 text-xs font-semibold tracking-wide text-neutral-100 ring-1 ring-white/10">
+                    {{ $episode->getResolution() }}
+                </div>
+            </div>
+
+            {{-- Bottom Stats --}}
+            <div class="absolute inset-x-0 bottom-0 z-20 p-3">
+                <div class="flex items-end justify-between gap-3">
+
+                    {{-- Stats --}}
+                    <div class="flex flex-1 flex-wrap items-center gap-x-3 gap-y-1 text-sm font-bold text-neutral-200">
+
+                        <span class="flex items-center gap-1">
+                            <i class="fa-regular fa-eye text-neutral-400"></i>
+                            {{ $episode->viewCountFormatted() }}
+                        </span>
+
+                        <span class="flex items-center gap-1">
+                            <i class="fa-regular fa-heart text-neutral-400"></i>
+                            {{ $episode->likeCount() }}
+                        </span>
+
+                        <span class="flex items-center gap-1">
+                            <i class="fa-regular fa-comment text-neutral-400"></i>
+                            {{ $episode->commentCount() }}
+                        </span>
+                    </div>
+
+                    {{-- Watched Status (logged in users only) --}}
+                    @auth
+                        @if ($isWatched)
+                            <div class="shrink-0 rounded-full bg-emerald-800/40 px-2.5 py-1 text-xs font-semibold text-emerald-300 ring-1 ring-emerald-500/30">
+                                @if ($view === 'thumbnail')
+                                <i class="fa-solid fa-check mr-1"></i> Watched
+                                @else
+                                <i class="fa-solid fa-check"></i>
+                                @endif
+                            </div>
+                        @else
+                            <div class="shrink-0 rounded-full bg-rose-800/40 px-2.5 py-1 text-xs font-semibold text-rose-300 ring-1 ring-rose-500/30">
+                                <i class="fa-solid fa-eye-slash"></i>
+                            </div>
+                        @endif
+                    @endauth
+
+                </div>
+            </div>
+        </div>
+
+        {{-- Content --}}
+        <div class="relative isolate border-t dark:border-neutral-800 dark:bg-neutral-900 bg-white border-neutral-100 p-4">
+            <h3 class="text-sm font-semibold leading-relaxed dark:text-neutral-100 text-neutral-900 transition-colors duration-200 dark:group-hover:text-white">
+                {{ $title }}
+            </h3>
+        </div>
+    </a>
+</div>

resources/views/components/episode-thumbnail.blade.php

@@ -1,58 +0,0 @@
-@props(['episode'])
-
-<div class="relative p-1 mb-8 w-full transition duration-300 ease-in-out md:p-2 md:hover:-translate-y-1 md:hover:scale-110">
-    <a class="hover:text-blue-600" href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
-        <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="1000"
-            class="block object-cover object-center relative z-20 rounded-lg aspect-video"
-            src="{{ $episode->gallery->first()->thumbnail_url }}"></img>
-
-        @guest
-            <p
-                class="absolute right-1 md:right-2 top-1 md:top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                {{ $episode->getResolution() }}</p>
-            <p
-                class="absolute left-1 md:left-4 bottom-1 md:bottom-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i class="fa-regular fa-heart"></i>
-                {{ $episode->likeCount() }} <i class="fa-regular fa-comment"></i>
-                {{ $episode->commentCount() }}
-            </p>
-        @endguest
-
-        @php $problematic = cache()->rememberForever('episodeProblematic'.$episode->id, fn () => $episode->getProblematicTags()); @endphp
-        @if (!empty($problematic))
-            <p
-                class="absolute left-4 top-2 bg-red-700/70 !text-white rounded-br-lg rounded-tl-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                <i class="fa-solid fa-triangle-exclamation"></i> {{ $problematic }}
-            </p>
-        @endif
-
-        @auth
-            @if ($episode->userWatched(auth()->user()->id))
-                <p
-                    class="absolute right-1 md:right-2 top-1 md:top-2 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                    {{ $episode->getResolution() }}</p>
-                <p
-                    class="absolute left-1 md:left-2 bottom-1 md:bottom-2 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                    <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
-                        class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i class="fa-regular fa-comment"></i>
-                    {{ $episode->commentCount() }}
-                </p>
-            @else
-                <p
-                    class="absolute right-1 md:right-2 top-1 md:top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                    {{ $episode->getResolution() }}</p>
-                <p
-                    class="absolute left-1 md:left-2 bottom-1 md:bottom-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                    <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
-                        class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i class="fa-regular fa-comment"></i>
-                    {{ $episode->commentCount() }}
-                </p>
-            @endif
-        @endauth
-
-        <div class="absolute w-[95%] grid grid-cols-1 text-center">
-            <p class="text-sm text-center text-black dark:text-white">{{ $episode->title }} -
-                {{ $episode->episode }}</p>
-        </div>
-    </a>
-</div>

resources/views/components/modal-header.blade.php

@@ -1,13 +1,19 @@
 @props(['title'])
-<div class="flex flex-shrink-0 items-center justify-between rounded-t-md p-4 bg-rose-600">
+<div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
-    <!--Modal title-->
+    <div>
-    <h5 class="text-xl font-medium leading-normal text-white">
+        <h2
-        {{ $title }}
+            id="modalGenresLabel"
-    </h5>
+            class="text-xl font-semibold text-neutral-900 dark:text-white"
-    <!--Close button-->
+        >
-    <button type="button" class="box-content text-white rounded-none border-none hover:no-underline hover:opacity-75 focus:opacity-100 focus:shadow-none focus:outline-none" data-te-modal-dismiss aria-label="Close">
+            {{ $title }} 
-        <svg  xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-6 w-6">
+        </h2>
-            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+    </div>
-        </svg>
+
+    <button
+        type="button"
+        data-te-modal-dismiss
+        class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
+    >
+        ✕
     </button>
 </div>

resources/views/home/index.blade.php

@@ -28,4 +28,6 @@
     <div class="mx-auto pt-6 sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[95%] 2xl:max-w-[85%] pb-2">
         @include('home.partials.comments')
     </div>
+
+    @vite(['resources/js/responsive.js'])
 </x-app-layout>

resources/views/home/partials/categories.blade.php

@@ -1,60 +1,82 @@
-<p class="leading-normal font-bold text-lg text-neutral-800 dark:text-white">
+<p class="text-lg font-bold leading-normal text-neutral-800 dark:text-white">
     {{ __('home.categories') }}
 </p>
 
 @php
-    $categories = [
+    $categories = collect([
-        'Uncensored' => 'uncensored',
+        ['name' => 'Uncensored', 'slug' => 'uncensored'],
-        'Milf' => 'milf',
+        ['name' => 'Milf', 'slug' => 'milf'],
-        'Maid' => 'maid',
+        ['name' => 'Maid', 'slug' => 'maid'],
-        'School Girl' => 'school-girl',
+        ['name' => 'School Girl', 'slug' => 'school-girl'],
-        'Succubus' => 'succubus',
+        ['name' => 'Succubus', 'slug' => 'succubus'],
-        'Tentacle' => 'tentacle',
+        ['name' => 'Tentacle', 'slug' => 'tentacle'],
-        'Big Boobs' => 'big-boobs',
+        ['name' => 'Big Boobs', 'slug' => 'big-boobs'],
-        'BDSM' => 'bdsm',
+        ['name' => 'BDSM', 'slug' => 'bdsm'],
-        'Elf' => 'elf',
+        ['name' => 'Elf', 'slug' => 'elf'],
-        '4k 48fps' => '4k-48fps',
+        ['name' => '4K 48FPS', 'slug' => '4k-48fps'],
-    ];
+    ]);
 @endphp
 
-<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 lg:grid-cols-5 xl:grid-cols-5 2xl:grid-cols-5 gap-2">
+<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
-    @foreach ($categories as $name => $slug)
+    @foreach ($categories as $category)
         @php
-            $cacheKey = 'category_' . $slug;
+            $episodes = cache()->remember(
-
+                "category_{$category['slug']}",
-            $collection = \cache()->remember(
+                now()->addMinutes(15),
-                $cacheKey,
+                fn () => \App\Models\Episode::query()
-                900,
+                    ->withAllTags([$category['slug']])
-                fn() => \App\Models\Episode::withAllTags([$slug])
                     ->inRandomOrder()
                     ->limit(3)
-                    ->get(),
+                    ->get()
             );
 
-            $count = $collection->count();
+            [$left, $center, $right] = [
-
+                $episodes->get(0),
+                $episodes->get(1),
+                $episodes->get(2),
+            ];
         @endphp
-        <a href="{{ route('hentai.search', ['order' => 'recently-uploaded', 'tags[0]' => $slug]) }}"
-            class="relative mx-auto w-96 sm:w-full h-56 bg-white dark:bg-neutral-800 text-black dark:text-white rounded-lg overflow-hidden shadow-lg mt-4 transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300">
-            <h2 class="text-lg font-semibold text-center pt-2">{{ $name }}</h2>
-            <div class="relative w-full h-full flex justify-center">
-                <!-- Left Image -->
-                @if ($count > 0)
-                    <img src="{{ $collection->first()->cover_url }}"
-                        class="absolute w-32 h-44 rounded-lg object-cover shadow-md left-4 top-4 rotate-[-15deg] z-0">
-                @endif
 
-                <!-- Center Image -->
+        <a
-                @if ($count > 1)
+            href="{{ route('hentai.search', [
-                    <img src="{{ $collection->skip(1)->first()->cover_url }}"
+                'order' => 'recently-uploaded',
-                        class="absolute w-32 h-44 rounded-lg object-cover shadow-lg top-4 z-10">
+                'tags[0]' => $category['slug'],
-                @endif
+            ]) }}"
+            class="group relative overflow-hidden rounded-2xl border dark:border-neutral-800 border-neutral-300 dark:bg-neutral-900 dark:hover:border-neutral-700 hover:border-neutral-400 hover:shadow-2xl hover:shadow-black/30 shadow-md transition-all duration-300 hover:-translate-y-1"
+        >
+            <div class="p-4">
+                <h2 class="text-center text-lg font-semibold text-neutral-900 dark:text-white">
+                    {{ $category['name'] }}
+                </h2>
 
-                <!-- Right Image -->
+                <div class="relative mt-4 flex h-52 items-center justify-center">
-                @if ($count > 2)
+                    @if ($left)
-                    <img src="{{ $collection->skip(2)->first()->cover_url }}"
+                        <img
-                        class="absolute w-32 h-44 rounded-lg object-cover shadow-lg right-4 top-14 z-20 rotate-[15deg]">
+                            src="{{ $left->cover_url }}"
-                @endif
+                            alt="{{ $category['name'] }}"
+                            loading="lazy"
+                            class="absolute left-2 top-4 h-44 w-32 rotate-[-12deg] rounded-xl object-cover shadow-lg transition-transform duration-300 group-hover:rotate-[-16deg]"
+                        >
+                    @endif
+
+                    @if ($center)
+                        <img
+                            src="{{ $center->cover_url }}"
+                            alt="{{ $category['name'] }}"
+                            loading="lazy"
+                            class="absolute top-2 z-10 h-44 w-32 rounded-xl object-cover shadow-2xl transition-transform duration-300 group-hover:scale-105"
+                        >
+                    @endif
+
+                    @if ($right)
+                        <img
+                            src="{{ $right->cover_url }}"
+                            alt="{{ $category['name'] }}"
+                            loading="lazy"
+                            class="absolute right-2 top-8 z-20 h-44 w-32 rotate-[12deg] rounded-xl object-cover shadow-lg transition-transform duration-300 group-hover:rotate-[16deg]"
+                        >
+                    @endif
+                </div>
             </div>
         </a>
     @endforeach

resources/views/home/partials/comments.blade.php

@@ -1,68 +1,81 @@
-<p class="text-lg font-bold leading-normal text-neutral-800 dark:text-white">
+<p class="mb-6 text-2xl font-bold tracking-tight text-neutral-900 dark:text-white">
     {{ __('home.latest-comments') }}
 </p>
 
-<div class="grid gap-2 grid-cols-1 xl:grid-cols-2">
+<div class="grid grid-cols-1 gap-6 xl:grid-cols-2">
     @foreach ($latestComments as $comment)
-        @if ($comment->commentable_type == \App\Models\Episode::class)
-            @php $episode = cache()->rememberForever('commentEpisode'.$comment->commentable_id, fn () => App\Models\Episode::with('gallery')->where('id', $comment->commentable_id)->first()); @endphp
-            <div id="comments" class="flex p-4 bg-white rounded-lg dark:bg-neutral-950">
-                <div
-                    class="w-[15vw] mr-5 p-1 md:p-2 mb-4 relative transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300">
-                    <a class="hidden 2xl:block"
-                        href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
-                        <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="1000"
-                            class="block object-cover object-center relative z-20 rounded-lg aspect-video"
-                            src="{{ $episode->gallery->first()->thumbnail_url }}"></img>
-                        <p
-                            class="absolute right-2 top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                            {{ $episode->getResolution() }}</p>
-                        <div class="absolute w-[95%] grid grid-cols-1 text-center">
-                            <p class="text-sm text-center text-black dark:text-white truncate">{{ $episode->title }} -
-                                {{ $episode->episode }}</p>
-                        </div>
-                    </a>
 
-                    <a class="block 2xl:hidden"
+        @php
-                        href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
+            $isEpisode = $comment->commentable_type == \App\Models\Episode::class;
-                        <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="1000"
+
-                            class="block object-cover object-center relative z-20 rounded-lg"
+            if ($isEpisode) {
-                            src="{{ $episode->cover_url }}"></img>
+                $item = cache()->rememberForever(
-                    </a>
+                    'commentEpisode' . $comment->commentable_id,
-                </div>
+                    fn () => \App\Models\Episode::with('gallery')
-                <div class="w-[60vw] pt-4 bg-neutral-100 dark:bg-neutral-800 rounded-lg pl-4">
+                        ->find($comment->commentable_id)
+                );
+
+                $url = route('hentai.index', ['title' => $item->slug]);
+                $title = $item->title . ' - ' . $item->episode;
+                $thumbnail = $item->gallery->first()?->thumbnail_url ?? $item->cover_url;
+                $cover = $item->cover_url;
+                $resolution = $item->getResolution();
+            } else {
+                $item = cache()->rememberForever(
+                    'commentHentai' . $comment->commentable_id,
+                    fn () => \App\Models\Hentai::with('gallery', 'episodes')
+                        ->find($comment->commentable_id)
+                );
+
+                $episode = $item->episodes->first();
+
+                $url = route('hentai.index', ['title' => $item->slug]);
+                $title = $episode?->title;
+                $thumbnail = $item->gallery->first()?->thumbnail_url ?? $episode?->cover_url;
+                $cover = $episode?->cover_url;
+                $resolution = $episode?->getResolution();
+            }
+        @endphp
+
+        <div
+            class="group overflow-hidden rounded-2xl border dark:border-neutral-800 border-neutral-300 dark:bg-neutral-900 dark:hover:border-neutral-700 hover:border-neutral-400 hover:shadow-2xl hover:shadow-black/30 shadow-md transition-all duration-300 hover:-translate-y-1">
+
+            <div class="flex flex-col md:flex-row">
+
+                {{-- Thumbnail --}}
+                <a href="{{ $url }}"
+                    class="relative w-full md:w-72 shrink-0 overflow-hidden">
+
+                    {{-- Desktop Thumbnail --}}
+                    <img
+                        src="{{ $thumbnail }}"
+                        alt="{{ $title }}"
+                        loading="lazy"
+                        class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105 aspect-video"
+                    >
+
+                    {{-- Resolution Badge --}}
+                    <span
+                        class="absolute right-0 top-0 rounded-bl-lg bg-rose-700/70 px-3 py-1 text-xs font-semibold text-white shadow-lg backdrop-blur">
+                        {{ $resolution }}
+                    </span>
+
+                    {{-- Gradient Overlay --}}
+                    <div
+                        class="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent p-4">
+                        <p class="line-clamp-1 text-sm font-medium text-white">
+                            {{ $title }}
+                        </p>
+                    </div>
+                </a>
+
+                {{-- Comment Content --}}
+                <div class="flex-1 p-4 md:p-6 bg-neutral-50 dark:bg-neutral-900">
                     @include('partials.comment', ['comment' => $comment])
                 </div>
-            </div>
-        @elseif($comment->commentable_type == \App\Models\Hentai::class)
-            @php $hentai = cache()->rememberForever('commentHentai'.$comment->commentable_id, fn () => App\Models\Hentai::with('gallery', 'episodes')->where('id', $comment->commentable_id)->first()); @endphp
-            <div id="comments" class="flex p-4 bg-white rounded-lg dark:bg-neutral-950">
-                <div
-                    class="w-[15vw] mr-5 p-1 md:p-2 mb-8 relative transition ease-in-out hover:-translate-y-1 hover:scale-110 duration-300">
-                    <a class="hidden 2xl:block" href="{{ route('hentai.index', ['title' => $hentai->slug]) }}">
-                        <img alt="{{ $hentai->episodes->first()->title }}" loading="lazy" width="1000"
-                            class="block object-cover object-center relative z-20 rounded-lg aspect-video"
-                            src="{{ $hentai->gallery->first()->thumbnail_url }}"></img>
-                        <p
-                            class="absolute  right-2 top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                            {{ $hentai->episodes->first()->getResolution() }}</p>
-                        <div class="absolute  w-[95%] grid grid-cols-1 text-center">
-                            <p class="text-sm text-center text-black dark:text-white truncate">
-                                {{ $hentai->episodes->first()->title }}</p>
-                        </div>
-                    </a>
 
-                    <a class="block 2xl:hidden"
-                        href="{{ route('hentai.index', ['title' => $hentai->slug]) }}">
-                        <img alt="{{ $hentai->episodes->first()->title }}" loading="lazy" width="1000"
-                            class="block object-cover object-center relative z-20 rounded-lg"
-                            src="{{ $hentai->episodes->first()->cover_url }}"></img>
-                    </a>
-                </div>
-                <div class="w-[60vw] pt-4 bg-neutral-100 dark:bg-neutral-800 rounded-lg pl-4">
-                    @include('partials.comment', ['comment' => $comment])
-                </div>
             </div>
-        @endif
+        </div>
+
     @endforeach
 </div>

resources/views/home/partials/tab/template.blade.php

@@ -1,9 +1,32 @@
-@if ($showThumbnails)
+@php
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-2">
+    $isThumbnail = $showThumbnails;
-    @include('partials.episode-thumbnail', ['limit' => 15])
+
+    $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';
+
+    // Render enough items for largest possible layout
+    $limit = 24;
+
+    $view = $isThumbnail ? 'thumbnail' : 'poster';
+@endphp
+
+<div
+    class="episode-grid grid {{ $gridClasses }}"
+    data-rows="2"
+>
+    @foreach ($episodes->take($limit) as $ep)
+        @php
+            $episode = isset($popularView)
+                ? $ep->episode
+                : $ep;
+        @endphp
+
+        <div class="episode-item">
+            <x-episode-cover
+                :episode="$episode"
+                :view="$view"
+            />
+        </div>
+    @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">
-    @include('partials.episode-cover', ['limit' => 16])
-</div>
-@endif

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-800 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-900 dark:hover:bg-neutral-800 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') }}
@@ -10,7 +10,7 @@
     </li>
     <li role="presentation" class="flex-auto text-center">
         <a href="#tabs-most-likes"
-            class="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-800 dark:data-[te-nav-active]:text-white"
+            class="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-900 dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-most-likes" role="tab" aria-controls="tabs-most-likes"
             aria-selected="false">
             {{ __('home.most-likes') }}
@@ -18,7 +18,7 @@
     </li>
     <li role="presentation" class="flex-auto text-center">
         <a href="#tabs-popular-weekly"
-            class="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-800 dark:data-[te-nav-active]:text-white"
+            class="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-900 dark:hover:bg-neutral-800 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-popular-weekly" role="tab"
             aria-controls="tabs-popular-weekly" aria-selected="false">
             {{ __('home.popular-weekly') }}
@@ -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-800 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-900 dark:hover:bg-neutral-800 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') }}

resources/views/home/partials/tabs-top.blade.php

@@ -1,19 +1,19 @@
 <!--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:bg-neutral-800 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-900/50 backdrop-blur-sm dark:hover:dark:hover:bg-neutral-900 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>
     </li>
     <li role="presentation" class="flex-auto text-center">
-        <a href="#tabs-recently-released" class="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-800 dark:data-[te-nav-active]:text-white"
+        <a href="#tabs-recently-released" class="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-900/50 backdrop-blur-sm dark:hover:bg-neutral-900 dark:data-[te-nav-active]:text-white"
             data-te-toggle="pill" data-te-target="#tabs-recently-released" role="tab" aria-controls="tabs-recently-released" aria-selected="false">
             {{ __('home.recently-released') }}
         </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-800 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-900/50 backdrop-blur-sm dark:hover:bg-neutral-900 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>

resources/views/home/stats.blade.php

@@ -1,47 +1,78 @@
 <x-app-layout>
-    <div class="container my-24 mx-auto md:px-6 z-10 relative">
+    <div class="container mx-auto px-4 py-12 md:py-24">
-        <section class="mb-32 text-center">
+        <section class="text-center mb-16">
-            <div class="flex justify-center pb-10">
+            <!-- Logo -->
-                <img src="/images/cropped-HS-1-270x270.webp" class="max-w-[150px]" alt="hstream.moe Logo" />
+            <div class="flex justify-center mb-8">
+                <img 
+                    src="/images/cropped-HS-1-270x270.webp" 
+                    alt="hstream.moe Logo"
+                    class="max-w-[150px] w-full h-auto rounded-lg"
+                />
             </div>
-            <div class="grid md:grid-cols-2 lg:grid-cols-4 lg:gap-x-12">
+
-                <div class="mb-12 md:mb-0">
+            <!-- Stats Grid -->
-                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500">
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 md:gap-8">
-                        <i class="fa-solid fa-eye text-3xl"> {{ number_format($viewCount) }}</i>
+                <!-- View Count Card -->
+                <div class="bg-sky-300/50 dark:bg-sky-950/50 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
+                    <div class="flex justify-center mb-4">
+                        <i class="fa-solid fa-eye text-4xl text-sky-600 dark:text-sky-400 p-3"></i>
                     </div>
-                    <h5 class="text-lg font-medium  dark:text-neutral-300">
+                    <div class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+                        {{ number_format($viewCount) }}
+                    </div>
+                    <h5 class="text-lg font-medium text-gray-700 dark:text-neutral-300">
                         total views
                     </h5>
                 </div>
-                <div class="mb-12 md:mb-0">
+
-                    <div class="b-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-sky-500">
+                <!-- Episode Count Card -->
-                        <i class="fa-solid fa-video text-3xl"> {{ $episodeCount }}</i>
+                <div class="bg-sky-300/50 dark:bg-sky-950/50 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
+                    <div class="flex justify-center mb-4">
+                        <i class="fa-solid fa-video text-4xl text-sky-600 dark:text-sky-400 p-3"></i>
                     </div>
-                    <h5 class="text-lg font-medium  dark:text-neutral-300">
+                    <div class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+                        {{ $episodeCount }}
+                    </div>
+                    <h5 class="text-lg font-medium text-gray-700 dark:text-neutral-300">
                         episodes on this site
                     </h5>
                 </div>
-                <div class="mb-12 md:mb-0">
+
-                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600">
+                <!-- Hentai Count Card -->
-                        <i class="fa-solid fa-list text-3xl"> {{ $hentaiCount }}</i>
+                <div class="bg-rose-300/50 dark:bg-rose-950/50 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
+                    <div class="flex justify-center mb-4">
+                        <i class="fa-solid fa-list text-4xl text-rose-600 dark:text-rose-400 p-3"></i>
                     </div>
-                    <h5 class="text-lg font-medium  dark:text-neutral-300">
+                    <div class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+                        {{ $hentaiCount }}
+                    </div>
+                    <h5 class="text-lg font-medium text-gray-700 dark:text-neutral-300">
                         hentais on this site
                     </h5>
                 </div>
-                <div class="mb-12 md:mb-0">
+
-                    <div class="mb-6 inline-block rounded-md bg-white dark:bg-neutral-950 p-4 text-rose-600">
+                <!-- Watch Time Card -->
-                        <i class="fa-solid fa-clock text-3xl"> {{ number_format($viewCount * 6) }}</i>
+                <div class="bg-rose-300/50 dark:bg-rose-950/50 rounded-xl p-6 shadow-sm hover:shadow-md transition-shadow duration-300">
+                    <div class="flex justify-center mb-4">
+                        <i class="fa-solid fa-clock text-4xl text-rose-600 dark:text-rose-400 p-3"></i>
                     </div>
-                    <h5 class="text-lg font-medium  dark:text-neutral-300">
+                    <div class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-                    estimated minutes of watch time
+                        {{ number_format($viewCount * 6) }}
+                    </div>
+                    <h5 class="text-lg font-medium text-gray-700 dark:text-neutral-300">
+                        estimated minutes of watch time
                     </h5>
                 </div>
             </div>
-            <div class="flex justify-center dark:bg-neutral-950 bg-gray-50 rounded-xl md:m-11 hidden md:block">
+
-                <canvas id="monthlyChart"></canvas>
+            <!-- Chart Container -->
+            <div class="mt-12 mx-auto max-w-4xl">
+                <div class="bg-gray-50 dark:bg-neutral-950 rounded-xl p-4 md:p-6 shadow-inner hidden sm:block">
+                    <canvas id="monthlyChart" class="w-full h-64 md:h-80"></canvas>
+                </div>
             </div>
         </section>
     </div>
+
     @vite(['resources/js/stats.js'])
 </x-app-layout>

resources/views/layouts/app.blade.php

@@ -4,7 +4,7 @@
 @include('partials.head')
 
 <body class="font-sans antialiased">
-    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-950">
         @include('layouts.navigation')
 
         <!-- Page Heading -->

resources/views/layouts/footer.blade.php

@@ -1,77 +1,99 @@
-<footer class="bg-white z-10 rounded-lg shadow dark:bg-neutral-950 m-4 mb-0 mt-auto">
+<footer class="bg-white z-10 rounded-xl shadow-lg dark:bg-neutral-950 m-4 mb-0 mt-auto">
-    <div class="w-full xl:max-w-[95%] 2xl:max-w-[84%] mx-auto p-4">
+    <div class="w-full max-w-7xl mx-auto px-4 py-6">
-        <div class="sm:flex sm:items-center sm:justify-between">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 items-center">
-            <a href="https://hstream.moe/" class="flex items-center mb-4 sm:mb-0">
+            <!-- Logo -->
-                <img src="/images/cropped-HS-1-192x192.webp" class="h-8 mr-3" alt="hstream.moe Logo" />
+            <div class="flex items-center justify-center md:justify-start">
-                <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">hstream.moe</span>
+                <a href="https://hstream.moe/" class="flex items-center">
-            </a>
+                    <img src="/images/cropped-HS-1-192x192.webp" 
-            <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
+                         class="h-10 w-10 mr-3 rounded-lg object-cover" 
-                <li>
+                         alt="hstream.moe Logo" />
-                    <a href="{{ route('contact.index') }}" class="mr-4 hover:underline md:mr-6 "><i
+                    <span class="text-xl font-bold whitespace-nowrap text-gray-600 dark:text-white">hstream.moe</span>
-                            class="fa-solid fa-message"></i> Contact</a>
+                </a>
-                </li>
+            </div>
-                <li>
-                    <a href="{{ config('discord.invite_link') }}" class="mr-4 hover:underline md:mr-6 "><i
-                            class="fa-brands fa-discord"></i> Discord</a>
-                </li>
-                <li>
-                    <a href="{{ route('home.stats') }}" class="mr-4 hover:underline md:mr-6 "><i
-                            class="fa-solid fa-chart-simple"></i> Stats</a>
-                </li>
-            </ul>
-            <!-- Links to friendly sites -->
-            <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
-                <li>
-                    <a target="_blank" href="https://everythingmoe.com/"
-                        class="mr-4 hover:underline md:mr-6">everythingmoe.com</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://theindex.moe/"
-                        class="mr-4 hover:underline md:mr-6">theindex.moe</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://www.squid-board.org/"
-                        class="mr-4 hover:underline md:mr-6">squidboard.org</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://hentaizilla.com/"
-                        class="hover:underline md:mr-6">hentaizilla.com</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://hentaipulse.com/"
-                        class="hover:underline md:mr-6">hentaipulse.com</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://hentaisites.com/"
-                        class="hover:underline md:mr-6">hentaisites.com</a>
-                </li>
-                <li>
-                    <a target="_blank" href="https://zhentube.com/"
-                        class="hover:underline md:mr-6">zhentube.com</a>
-                </li>
-            </ul>
-            <ul class="flex flex-wrap items-center mb-6 text-sm font-medium text-gray-500 sm:mb-0 dark:text-gray-400">
-                <li>
-                    <a class="hover:underline md:mr-6 cursor-pointer" data-te-toggle="modal"
-                        data-te-target="#modalLanguage">Language</a>
-                </li>
-            </ul>
 
-            @if (!Session::has('alert.config'))
+            <!-- Main Navigation -->
-                <script src="{{ asset('vendor/sweetalert/sweetalert.all.js') }}"></script>
+            <div class="flex justify-center">
-            @endif
+                <ul class="flex flex-wrap items-center gap-4 text-sm font-medium text-gray-600 dark:text-gray-300">
-            @if (config('sweetalert.theme') != 'default')
+                    <li>
-                <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-{{ config('sweetalert.theme') }}"
+                        <a href="{{ route('contact.index') }}" 
-                    rel="stylesheet">
+                           class="flex items-center gap-1 hover:text-blue-600 transition-colors">
-            @endif
+                            <i class="fa-solid fa-message"></i> Contact
-            @include('sweetalert::alert')
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ config('discord.invite_link') }}" 
+                           class="flex items-center gap-1 hover:text-blue-600 transition-colors">
+                            <i class="fa-brands fa-discord"></i> Discord
+                        </a>
+                    </li>
+                    <li>
+                        <a href="{{ route('home.stats') }}" 
+                           class="flex items-center gap-1 hover:text-blue-600 transition-colors">
+                            <i class="fa-solid fa-chart-simple"></i> Stats
+                        </a>
+                    </li>
+                </ul>
+            </div>
+
+            <!-- Language Selector -->
+            <div class="flex justify-center md:justify-end">
+                <button data-te-toggle="modal" 
+                        data-te-target="#modalLanguage"
+                        class="flex items-center gap-1 text-sm font-medium text-gray-600 hover:text-blue-600 transition-colors dark:text-gray-300">
+                    <i class="fa-solid fa-globe"></i> Language
+                </button>
+            </div>
+        </div>
+
+        <!-- Friendly Sites -->
+        <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+            <h3 class="text-sm font-semibold text-gray-500 dark:text-gray-400 mb-3 text-center">Friendly Sites</h3>
+            <div class="flex flex-wrap justify-center gap-3">
+                @foreach([
+                    'everythingmoe.com' => 'https://everythingmoe.com/',
+                    'theindex.moe' => 'https://theindex.moe/',
+                    'squidboard.org' => 'https://www.squid-board.org/',
+                    'hentaizilla.com' => 'https://hentaizilla.com/',
+                    'hentaipulse.com' => 'https://hentaipulse.com/',
+                    'hentaisites.com' => 'https://hentaisites.com/',
+                    'zhentube.com' => 'https://zhentube.com/'
+                ] as $name => $url)
+                    <a href="{{ $url }}" 
+                       target="_blank" 
+                       class="text-sm text-gray-600 hover:text-blue-600 transition-colors dark:text-gray-300">
+                        {{ $name }}
+                    </a>
+                @endforeach
+            </div>
         </div>
     </div>
 </footer>
-@include('modals.language-selector')
 
-<div class="m-2 w-full mx-auto">
+<!-- Footer Info -->
-    <div class="text-sm text-gray-500 text-center">
+<div class="m-4 w-full max-w-7xl mx-auto">
-        <p>Render time: {{ number_format(microtime(true) - (defined('LARAVEL_START') ? LARAVEL_START : request()->server('REQUEST_TIME_FLOAT')), 3) }} seconds | Memory usage: {{ number_format(memory_get_peak_usage(true) / 1048576, 2) }} MB | Git: <a href="https://gitea.hstream.moe/w33b/hstream/commits/branch/main" target="_blank">{{ \App\Helpers\GitHelper::shortCommit() }}</a></p>
+    <div class="text-xs text-gray-500 text-center dark:text-gray-400">
+        <p>Render time: {{ number_format(microtime(true) - (defined('LARAVEL_START') ? LARAVEL_START : request()->server('REQUEST_TIME_FLOAT')), 3) }} seconds | 
+           Memory usage: {{ number_format(memory_get_peak_usage(true) / 1048576, 2) }} MB | 
+           Git: <a href="https://gitea.hstream.moe/w33b/hstream/commits/branch/main" 
+                   target="_blank" 
+                   class="hover:text-blue-600 transition-colors">
+                   {{ \App\Helpers\GitHelper::shortCommit() }}
+               </a>
+        </p>
     </div>
 </div>
+
+<!-- SweetAlert Scripts -->
+@if (!Session::has('alert.config'))
+    <script src="{{ asset('vendor/sweetalert/sweetalert.all.js') }}"></script>
+@endif
+@if (config('sweetalert.theme') != 'default')
+    <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-{{ config('sweetalert.theme') }}" rel="stylesheet">
+@endif
+@include('sweetalert::alert')
+
+<!-- Modals -->
+@include('modals.language-selector')
+
+<!-- Thumbnail hover -->
+@vite(['resources/js/preview.js'])

resources/views/layouts/guest.blade.php

@@ -4,7 +4,7 @@
     @include('partials.head')
 
     <body class="font-sans antialiased">
-        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-neutral-900">
+        <div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100 dark:bg-neutral-950">
             <div>
                 <a href="/">
                     <x-application-logo class="w-24 h-24 fill-current text-gray-500" />

resources/views/livewire/comments.blade.php

@@ -1,60 +1,57 @@
 <section>
-    <div class="bg-white dark:bg-neutral-800 shadow sm:rounded-lg sm:overflow-hidden">
+    <div class="bg-white dark:bg-neutral-800 shadow sm:rounded-xl sm:overflow-hidden">
-        <div class="divide-y divide-gray-200 dark:divide-gray-400/40">
+        <div class="px-4 py-5 sm:px-6">
-            <div class="px-4 py-5 sm:px-6">
+            <h2 class="leading-normal font-bold text-lg text-gray-900 dark:text-gray-200">Comments</h2>
-                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-200">Comments</h2>
+        </div>
-            </div>
+        <div>
-            <div>
+            <!-- Comment Input -->
-                <!-- Comment Input -->
+            <div class="bg-gray-50 dark:bg-neutral-800 px-4 py-6 sm:px-6 border-t border-b dark:border-neutral-950 border-neutral-200">
-                <div class="bg-gray-50 dark:bg-neutral-800 px-4 py-6 sm:px-6">
+                @auth
-                    @auth
+                    <div class="flex">
-                        <div class="flex">
+                    <div class="flex-shrink-0 mr-4">
-                        <div class="flex-shrink-0 mr-4">
+                        <img class="h-10 w-10 rounded-full" src="{{ auth()->user()->getAvatar() }}" alt="{{ auth()->user()->name }}">
-                            <img class="h-10 w-10 rounded-full" src="{{ auth()->user()->getAvatar() }}" alt="{{ auth()->user()->name }}">
+                    </div>
-                        </div>
+                    <div class="min-w-0 flex-1">
-                        <div class="min-w-0 flex-1">
+                        <form wire:submit.prevent="postComment">
-                            <form wire:submit.prevent="postComment">
+                            <div>
-                                <div>
+                                <label for="comment" class="sr-only">Comment body</label>
-                                    <label for="comment" class="sr-only">Comment body</label>
+                                <textarea id="comment" name="comment" rows="3"
-                                    <textarea id="comment" name="comment" rows="3"
+                                        class="peer block min-h-[auto] w-full border-1 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear dark:placeholder:text-neutral-200 border-gray-300 dark:border-neutral-950 dark:bg-neutral-900 dark:text-gray-300 focus:border-rose-500 dark:focus:border-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600 rounded-md shadow-sm
-                                            class="peer block min-h-[auto] w-full border-1 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear dark:placeholder:text-neutral-200 border-gray-300 dark:border-neutral-950 dark:bg-neutral-900 dark:text-gray-300 focus:border-rose-500 dark:focus:border-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600 rounded-md shadow-sm
+                                            @error('newCommentState.body') border-red-500 @enderror"
-                                                @error('newCommentState.body') border-red-500 @enderror"
+                                        placeholder="Write something" wire:model.defer="newCommentState.body"></textarea>
-                                            placeholder="Write something" wire:model.defer="newCommentState.body"></textarea>
+                                @error('newCommentState.body')
-                                    @error('newCommentState.body')
+                                    <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
-                                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
+                                @enderror
-                                    @enderror
+                            </div>
-                                </div>
+                            <div class="mt-3 flex items-center justify-between">
-                                <div class="mt-3 flex items-center justify-between">
+                                <button type="submit"
-                                    <button type="submit"
+                                        class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500">
-                                            class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md shadow-sm text-white bg-rose-600 hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500">
+                                    Comment
-                                        Comment
+                                </button>
-                                    </button>
+                            </div>
-                                </div>
+                        </form>
-                            </form>
-                        </div>
                     </div>
-                    @endauth
-
-                    @guest
-                        <p class="text-gray-900 dark:text-gray-200">Log in to comment.</p>
-                    @endguest
                 </div>
+                @endauth
 
-                <!-- Comments -->
+                @guest
-                <div class="px-4 py-6 sm:px-6">
+                    <p class="text-gray-900 dark:text-gray-200">Log in to comment.</p>
-                    <div class="space-y-8">
+                @endguest
-                        @if ($comments->isNotEmpty())
+            </div>
-                            @foreach($comments as $comment)
+
-                                <livewire:comment :comment="$comment" :key="$comment->id"/>
+            <!-- Comments -->
-                            @endforeach
+            <div class="px-4 py-6 sm:px-6">
-                            {{ $comments->links('pagination::tailwind') }}
+                <div class="space-y-8">
-                        @else
+                    @if ($comments->isNotEmpty())
-                            <p class="text-gray-900 dark:text-gray-200">No comments yet.</p>
+                        @foreach($comments as $comment)
-                        @endif
+                            <livewire:comment :comment="$comment" :key="$comment->id"/>
-                    </div>
+                        @endforeach
+                        {{ $comments->links('pagination::tailwind') }}
+                    @else
+                        <p class="text-gray-900 dark:text-gray-200">No comments yet.</p>
+                    @endif
                 </div>
             </div>
         </div>
-
     </div>
 </section>

resources/views/livewire/live-search.blade.php

@@ -1,4 +1,4 @@
-<div class="py-24">
+<div class="py-10">
     <div class="mx-auto sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[95%] 2xl:max-w-[90%]">
         @include('livewire.partials.search-filter')
     </div>
@@ -24,5 +24,4 @@
         </div>
         {{ $episodes->appends(['tags' => $selectedtags])->links('pagination::tailwind') }}
     </div>
-    @vite(['resources/js/preview.js'])
 </div>

resources/views/livewire/partials/search-filter.blade.php

@@ -1,90 +1,141 @@
-<!-- Search Filter -->
+<!-- Search Filters -->
 <div>
-    <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
+    <div class="rounded-2xl border border-neutral-200/70 bg-white/80 p-4 shadow-sm backdrop-blur-xl dark:border-neutral-800 dark:bg-neutral-950/70 space-y-4">
-        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
         
-            <!-- Title -->
+        <!-- Filters Grid -->
-            <div>
+        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-5">
-                <label for="live-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
+
-                <div class="relative right-2 left-0 sm:left-2 transition-all">
+            <!-- Search -->
-                    <div class="absolute inset-y-0 left-2 flex items-center pl-3 pointer-events-none">
+            <div class="xl:col-span-2">
-                        <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                <label for="live-search" class="sr-only">
-                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
+                    {{ __('search.search-hentai') }}
+                </label>
+
+                <div class="relative">
+                    <!-- Search Icon -->
+                    <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
+                        <svg class="h-5 w-5 text-neutral-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" />
                         </svg>
                     </div>
 
-                    <input wire:model.live.debounce.600ms="search" type="search" id="live-search" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900" placeholder="{{ __('search.search-hentai') }}" required>
+                    <!-- Input -->
+                    <input
+                        wire:model.live.debounce.500ms="search"
+                        type="search"
+                        id="live-search"
+                        placeholder="{{ __('search.search-hentai') }}"
+                        class="w-full rounded-xl border border-neutral-300 bg-white py-5 pl-12 pr-12 text-sm text-neutral-900 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/20 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:placeholder-neutral-500"
+                    />
 
-                    <div class="absolute right-0 top-[11px]" wire:loading>
+                    <!-- Loading -->
-                        <svg aria-hidden="true" class="inline w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-pink-600" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <div wire:loading.class="opacity-100" class="opacity-0">
-                            <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor" />
+                        <div class="absolute inset-y-0 right-3 flex items-center">
-                            <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill" />
+                            <svg class="h-5 w-5 animate-spin text-rose-500" viewBox="0 0 24 24" fill="none">
-                        </svg>
+                                <circle class="opacity-20" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path class="opacity-90" fill="currentColor"
+                                    d="M22 12a10 10 0 0 1-10 10V18a6 6 0 0 0 6-6h4Z">
+                                </path>
+                            </svg>
+                        </div>
                     </div>
                 </div>
             </div>
 
             <!-- Genres -->
-            <div>
+            <button
-                <div class="relative right-2 left-0 sm:left-2 transition-all">
+                type="button"
-                    <div class="absolute inset-y-0 left-2 flex items-center pl-3 pointer-events-none">
+                data-te-toggle="modal"
-                        <i class="fa-solid fa-sliders text-gray-500 dark:text-gray-400"></i>
+                data-te-target="#modalGenres"
-                    </div>
+                class="group flex items-center gap-3 rounded-xl border border-neutral-300 bg-white px-4 py-3 text-left shadow-sm transition hover:border-rose-400 hover:bg-rose-50 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800"
-                    <p data-te-toggle="modal" data-te-target="#modalGenres" data-te-ripple-init data-te-ripple-color="light" id="genres-filter" class="block cursor-pointer w-full p-4 pl-10 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:focus:ring-rose-800 dark:focus:border-rose-900">
+            >
-                        @if($tagcount === 0)
+                <i class="fa-solid fa-sliders text-neutral-400 group-hover:text-rose-500"></i>
-                        Select Genres
-                        @elseif($tagcount === 1)
-                        Selected {{$tagcount }} Genre
-                        @elseif($tagcount > 1)
-                        Selected {{$tagcount }} Genres
-                        @endif
-                    </p>
-                </div>
-            </div>
 
-            <!-- Genres Blacklist -->
+                <div class="flex flex-col">
-            <div>
+                    <span class="text-xs font-medium uppercase tracking-wide text-neutral-400">
-                <div class="relative right-2 left-0 sm:left-2 transition-all">
+                        Genres
-                    <div class="absolute inset-y-0 left-2 flex items-center pl-3 pointer-events-none">
+                    </span>
-                        <i class="fa-solid fa-shield text-gray-500 dark:text-gray-400"></i>
+
-                    </div>
+                    <span class="text-sm text-neutral-700 dark:text-neutral-200">
-                    <p data-te-toggle="modal" data-te-target="#modalBlacklist" data-te-ripple-init data-te-ripple-color="light" id="blacklist-filter" class="block cursor-pointer w-full p-4 pl-10 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:focus:ring-rose-800 dark:focus:border-rose-900">
+                        @if($tagcount === 0)
-                        @if($blacklistcount === 0)
+                            Select Genres
-                        Select Blacklist
+                        @elseif($tagcount === 1)
-                        @elseif($blacklistcount === 1)
+                            1 Genre Selected
-                        Selected {{ $blacklistcount }} Blacklist Item
+                        @else
-                        @elseif($blacklistcount > 1)
+                            {{ $tagcount }} Genres Selected
-                        Selected {{ $blacklistcount }} Blacklist Items
                         @endif
-                    </p>
+                    </span>
                 </div>
-            </div>
+            </button>
+
+            <!-- Blacklist -->
+            <button
+                type="button"
+                data-te-toggle="modal"
+                data-te-target="#modalBlacklist"
+                class="group flex items-center gap-3 rounded-xl border border-neutral-300 bg-white px-4 py-3 text-left shadow-sm transition hover:border-rose-400 hover:bg-rose-50 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800"
+            >
+                <i class="fa-solid fa-shield text-neutral-400 group-hover:text-rose-500"></i>
+
+                <div class="flex flex-col">
+                    <span class="text-xs font-medium uppercase tracking-wide text-neutral-400">
+                        Blacklist
+                    </span>
+
+                    <span class="text-sm text-neutral-700 dark:text-neutral-200">
+                        @if($blacklistcount === 0)
+                            Select Blacklist
+                        @elseif($blacklistcount === 1)
+                            1 Item Selected
+                        @else
+                            {{ $blacklistcount }} Items Selected
+                        @endif
+                    </span>
+                </div>
+            </button>
 
             <!-- Studios -->
-            <div>
+            <button
-                <div class="relative right-2 left-0 sm:left-2 transition-all">
+                type="button"
-                    <div class="absolute inset-y-0 left-2 flex items-center pl-3 pointer-events-none">
+                data-te-toggle="modal"
-                        <i class="fa-solid fa-microphone-lines text-gray-500 dark:text-gray-400"></i>
+                data-te-target="#modalStudios"
-                    </div>
+                class="group flex items-center gap-3 rounded-xl border border-neutral-300 bg-white px-4 py-3 text-left shadow-sm transition hover:border-rose-400 hover:bg-rose-50 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800"
-                    <p data-te-toggle="modal" data-te-target="#modalStudios" data-te-ripple-init data-te-ripple-color="light" id="studios-filter" class="block cursor-pointer w-full p-4 pl-10 text-sm text-gray-500 dark:text-gray-400 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:focus:ring-rose-800 dark:focus:border-rose-900">
+            >
-                        @if($studiocount === 0)
+                <i class="fa-solid fa-microphone-lines text-neutral-400 group-hover:text-rose-500"></i>
-                        Select Studios
-                        @elseif($studiocount === 1)
-                        Selected {{ $studiocount }} Studio
-                        @elseif($studiocount > 1)
-                        Selected {{ $studiocount }} Studios
-                        @endif
-                    </p>
-                </div>
-            </div>
 
-            <!-- Ordering -->
+                <div class="flex flex-col">
-            <div class="grid grid-cols-2">
+                    <span class="text-xs font-medium uppercase tracking-wide text-neutral-400">
-                <div class="relative right-2 left-0 sm:left-2 transition-all">
+                        Studios
-                    <div class="absolute inset-y-0 left-2 flex items-center pl-3 pointer-events-none">
+                    </span>
-                        <i class="fa-solid fa-sort text-gray-500 dark:text-gray-400"></i>
+
-                    </div>
+                    <span class="text-sm text-neutral-700 dark:text-neutral-200">
-                    <select wire:model.live="order" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900">
+                        @if($studiocount === 0)
+                            Select Studios
+                        @elseif($studiocount === 1)
+                            1 Studio Selected
+                        @else
+                            {{ $studiocount }} Studios Selected
+                        @endif
+                    </span>
+                </div>
+            </button>
+        </div>
+
+        <!-- Bottom Controls -->
+        <div class="mt-4 flex flex-col gap-4 border-t border-neutral-200 pt-4 dark:border-neutral-800 lg:flex-row lg:items-center lg:justify-between">
+
+            <!-- Selects -->
+            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+
+                <!-- Order -->
+                <div class="relative">
+                    <i class="fa-solid fa-sort pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400"></i>
+
+                    <select
+                        wire:model.live="order"
+                        class="w-full appearance-none rounded-xl border border-neutral-300 bg-white py-3 pl-11 pr-10 text-sm text-neutral-900 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/20 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white"
+                    >
                         <option value="az">A-Z</option>
                         <option value="za">Z-A</option>
                         <option value="recently-uploaded">{{ __('home.recently-uploaded') }}</option>
@@ -95,28 +146,40 @@
                     </select>
                 </div>
 
-                <div class="relative right-2 left-0 ml-2 sm:left-2 transition-all">
+                <!-- View -->
-                    <div class="absolute inset-y-0 left-2 flex items-center pl-3 pointer-events-none">
+                <div class="relative">
-                        <i class="fa-solid fa-list text-gray-500 dark:text-gray-400"></i>
+                    <i class="fa-solid fa-list pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400"></i>
-                    </div>
+
-                    <select wire:model.live="view" class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900">
+                    <select
+                        wire:model.live="view"
+                        class="w-full appearance-none rounded-xl border border-neutral-300 bg-white py-3 pl-11 pr-10 text-sm text-neutral-900 shadow-sm transition focus:border-rose-500 focus:outline-none focus:ring-4 focus:ring-rose-500/20 dark:border-neutral-700 dark:bg-neutral-900 dark:text-white"
+                    >
                         <option value="thumbnail">Thumbnail</option>
                         <option value="poster">Poster</option>
                     </select>
                 </div>
             </div>
-        </div>
 
-        @auth
+            <!-- Auth Options -->
-        <div class="float-right pt-1">
+            @auth
-            <input class="w-4 h-4 text-rose-600 bg-gray-100 border-gray-300 rounded focus:ring-rose-500 dark:focus:ring-rose-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600"
+                <label
-                type="checkbox" wire:model.live="hideWatched" value="true" id="checkBoxHideWatched" />
+                    for="checkBoxHideWatched"
-            <label class="inline-block hover:cursor-pointer dark:text-white" for="checkBoxHideWatched">
+                    class="flex cursor-pointer items-center gap-3 text-sm text-neutral-700 dark:text-neutral-300"
-                Hide watched
+                >
-            </label>
+                    <input
+                        id="checkBoxHideWatched"
+                        type="checkbox"
+                        wire:model.live="hideWatched"
+                        class="h-4 w-4 rounded border-neutral-300 text-rose-600 focus:ring-rose-500 dark:border-neutral-700 dark:bg-neutral-800"
+                    />
+
+                    <span>Hide watched</span>
+                </label>
+            @endauth
         </div>
-        @endauth
     </div>
+
+    <!-- Modals -->
     @include('modals.filter-genres')
     @include('modals.filter-studios')
     @include('modals.filter-blacklist')

resources/views/livewire/partials/search-result.blade.php

@@ -1,86 +1,3 @@
 <div wire:key="episode-{{ $episode->id }}">
-    @if ($searchIsJpn)
+    <x-episode-cover :episode="$episode" :view="$view" :displayjapanese="$searchIsJpn" />
-        <div class="relative p-1 mb-14 w-full transition duration-300 ease-in-out md:p-2 md:hover:-translate-y-1 md:hover:scale-110"
-            data-thumbs="{{ optional($episode->gallery)->pluck('thumbnail_url') }}">
-        @else
-        <div class="relative p-1 mb-8 w-full transition duration-300 ease-in-out md:p-2 md:hover:-translate-y-1 md:hover:scale-110"
-            data-thumbs="{{ optional($episode->gallery)->pluck('thumbnail_url') }}">
-    @endif
-    <a class="hover:text-blue-600" href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
-        <div class="absolute w-[95%] top-[38%] text-center z-10">
-            <svg aria-hidden="true"
-                class="inline mr-2 w-8 h-8 text-gray-200 animate-spin dark:text-gray-600 fill-pink-600"
-                viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path
-                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                    fill="currentColor" />
-                <path
-                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                    fill="currentFill" />
-            </svg>
-        </div>
-
-        @switch(true)
-            @case($view === 'thumbnail')
-                <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="500"
-                    class="block object-cover object-center relative z-20 rounded-lg aspect-video"
-                    src="{{ optional($episode->gallery->first())->thumbnail_url }}">
-                @if ($episode->hasAutoTrans())
-                    <p
-                        class="absolute right-1 md:right-2 bottom-1 md:bottom-2 bg-blue-600/80 !text-white rounded-tl-lg rounded-br-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                        <i class="fa-regular fa-closed-captioning"></i> Multi-Subs
-                    </p>
-                @endif
-            @break
-
-            @case($view === 'poster')
-                <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="400"
-                    class="block relative rounded-lg object-cover object-center aspect-[11/16] z-20"
-                    src="{{ $episode->cover_url }}">
-            @break
-
-        @endswitch
-
-        @php $problematic = cache()->rememberForever('episodeProblematic'.$episode->id, fn () => $episode->getProblematicTags()); @endphp
-        @if (!empty($problematic))
-            <p
-                class="absolute left-1 md:left-2 top-1 md:top-2 bg-red-700/70 !text-white rounded-br-lg rounded-tl-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                <i class="fa-solid fa-triangle-exclamation"></i> {{ $problematic }}
-            </p>
-        @endif
-
-        @if (auth()->check() && $episode->userWatched(auth()->user()->id))
-            <p
-                class="absolute right-1 md:right-2 top-1 md:top-2 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg  p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                {{ $episode->getResolution() }}</p>
-            <p
-                class="absolute left-1 md:left-2 bottom-1 md:bottom-2 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
-                    class="fa-regular fa-heart"></i>
-                {{ $episode->likeCount() }} <i class="fa-regular fa-comment"></i> {{ $episode->commentCount() }}
-            </p>
-        @else
-            <p
-                class="absolute right-1 md:right-2 top-1 md:top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                {{ $episode->getResolution() }}</p>
-            <p
-                class="absolute left-1 md:left-2 bottom-1 md:bottom-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                <i class="fa-regular fa-eye"></i>
-                {{ $episode->viewCountFormatted() }}
-                <i class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i class="fa-regular fa-comment"></i>
-                {{ $episode->commentCount() }}
-            </p>
-        @endif
-
-        <div class="absolute  w-[95%] grid grid-cols-1 text-center">
-            @if ($searchIsJpn)
-                <p class="text-sm text-center text-black dark:text-white">{{ $episode->title }}
-                    ({{ $episode->title_jpn }}) - {{ $episode->episode }}</p>
-            @else
-                <p class="text-sm text-center text-black dark:text-white">{{ $episode->title }} -
-                    {{ $episode->episode }}</p>
-            @endif
-        </div>
-    </a>
-</div>
 </div>

resources/views/livewire/user-likes.blade.php

@@ -24,5 +24,4 @@
         </div>
         {{ $episodes->appends(['tags' => $selectedtags])->links('pagination::tailwind') }}
     </div>
-    @vite(['resources/js/preview.js'])
 </div

resources/views/livewire/watched.blade.php

@@ -15,7 +15,7 @@
                         <div class="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5">
                             @foreach ($episodes as $episode)
                                 <div class="mt-2 mb-6 ml-4">
-                                    <x-episode-thumbnail :episode="$episode->episode" />
+                                    <x-episode-cover :episode="$episode->episode" view="thumbnail" />
                                 </div>
                             @endforeach
                         </div>

resources/views/modals/add-to-playlist.blade.php

@@ -1,8 +1,14 @@
 @auth
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none" id="modalAddToPlaylist" tabindex="-1" aria-labelledby="Playlist" aria-modal="true" role="dialog">
+    data-te-modal-init
-    <div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[30%]">
+    id="modalAddToPlaylist"
-        <div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    tabindex="-1"
+    aria-modal="true"
+    role="dialog"
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
             <x-modal-header :title="__('Add to Playlist')" />
 
             <!--Modal body-->
@@ -26,11 +32,16 @@
                     <x-input-error :messages="$errors->get('playlist')" class="mt-2" />
                 </div>
                                
-                <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
+                <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4 gap-3">
-                    <a id="playlist-cancel" class="inline-block cursor-pointer rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200" data-te-modal-dismiss data-te-ripple-init data-te-ripple-color="light">
+                    <a
+                        data-te-modal-dismiss
+                        id="playlist-cancel" 
+                        class="cursor-pointer rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800">
                         Cancel
                     </a>
-                    <a id="playlist-add" class="ml-1 cursor-pointer inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600" data-te-ripple-init data-te-ripple-color="light">
+                    <a
+                        id="playlist-add" 
+                        class="cursor-pointer rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
                         Add
                     </a>
                 </div>
@@ -52,7 +63,9 @@
                 </div>
                 
                 <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
-                    <a id="playlist-create-and-add" class="ml-1 cursor-pointer inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600" data-te-ripple-init data-te-ripple-color="light">
+                    <a 
+                        id="playlist-create-and-add" 
+                        class="cursor-pointer rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
                         Create and Add Episode
                     </a>
                 </div>

resources/views/modals/comment-edit.blade.php

@@ -1,50 +0,0 @@
-<!--Verically centered modal-->
-<div
-  data-te-modal-init
-  class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
-  id="comment-modal-{{ $comment->getKey() }}"
-  tabindex="-1"
-  aria-labelledby="exampleModalCenterTitle"
-  aria-modal="true"
-  role="dialog">
-    <div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[40%]">
-        <div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
-            <x-modal-header :title="__('comments::comments.edit_comment')" />
-
-            <!--Modal body-->
-            <div class="relative p-4">
-
-                <form method="POST" action="{{ route('comments.update', $comment->getKey()) }}">
-                    @method('PUT')
-                    @csrf
-                    <div class="modal-body">
-                        <div class="form-group">
-                            <label class="mb-2 leading-tight text-gray-800 dark:text-gray-200 w-full" for="message">@lang('comments::comments.update_your_message_here')</label>
-                            <textarea class="peer block min-h-[auto] w-full border-1 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear dark:placeholder:text-neutral-200 border-gray-300 dark:border-neutral-950 dark:bg-neutral-900 dark:text-gray-300 focus:border-rose-500 dark:focus:border-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600 rounded-md shadow-sm" name="message" rows="3">{{ $comment->comment }}</textarea>
-                        </div>
-                    </div>
-                    <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
-                        <button
-                            type="button"
-                            id="modal-blacklist-filter-close-bottom"
-                            class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
-                            data-te-modal-dismiss
-                            data-te-ripple-init
-                            data-te-ripple-color="light">
-                            @lang('comments::comments.cancel')
-                        </button>
-                        <button
-                            type="submit"
-                            id="modal-blacklist-filter-save"
-                            class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600"
-                            data-te-modal-dismiss
-                            data-te-ripple-init
-                            data-te-ripple-color="light">
-                            @lang('comments::comments.update')
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>

resources/views/modals/comment-reply.blade.php

@@ -1,49 +0,0 @@
-<!--Verically centered modal-->
-<div
-  data-te-modal-init
-  class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
-  id="reply-modal-{{ $comment->getKey() }}"
-  tabindex="-1"
-  aria-labelledby="exampleModalCenterTitle"
-  aria-modal="true"
-  role="dialog">
-    <div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[40%]">
-        <div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
-            <x-modal-header :title="__('comments::comments.reply_to_comment')" />
-
-            <!--Modal body-->
-            <div class="relative p-4">
-
-                <form method="POST" action="{{ route('comments.reply', $comment->getKey()) }}">
-                    @csrf
-                    <div class="modal-body">
-                        <div class="form-group">
-                            <label class="mb-2 leading-tight  text-gray-800 dark:text-gray-200 w-full" for="message">@lang('comments::comments.enter_your_message_here')</label>
-                            <textarea required class="peer block min-h-[auto] w-full border-1 bg-transparent px-3 py-[0.32rem] leading-[1.6] outline-none transition-all duration-200 ease-linear dark:placeholder:text-neutral-200 border-gray-300 dark:border-neutral-950 dark:bg-neutral-900 dark:text-gray-300 focus:border-rose-500 dark:focus:border-rose-600 focus:ring-rose-500 dark:focus:ring-rose-600 rounded-md shadow-sm" name="message" rows="3"></textarea>
-                        </div>
-                    </div>
-                    <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
-                        <button
-                            type="button"
-                            id="modal-blacklist-filter-close-bottom"
-                            class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
-                            data-te-modal-dismiss
-                            data-te-ripple-init
-                            data-te-ripple-color="light">
-                            @lang('comments::comments.cancel')
-                        </button>
-                        <button
-                            type="submit"
-                            id="modal-blacklist-filter-save"
-                            class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600"
-                            data-te-modal-dismiss
-                            data-te-ripple-init
-                            data-te-ripple-color="light">
-                            @lang('comments::comments.reply')
-                        </button>
-                    </div>
-                </form>
-            </div>
-        </div>
-    </div>
-</div>

resources/views/modals/create-playlist.blade.php

@@ -1,7 +1,14 @@
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none" id="modalCreatePlaylist" tabindex="-1" aria-labelledby="Playlist" aria-modal="true" role="dialog">
+    data-te-modal-init
-    <div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[30%]">
+    id="modalCreatePlaylist"
-        <div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    tabindex="-1"
+    aria-labelledby="modalCreatePlaylist"
+    aria-modal="true"
+    role="dialog"
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-4xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
             <x-modal-header :title="__('Create Playlist')" />
 
             <!--Modal body-->

resources/views/modals/download.blade.php

@@ -1,19 +1,26 @@
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none" id="modalDownload" tabindex="-1" aria-labelledby="Download" aria-modal="true" role="dialog">
+    data-te-modal-init
-  <div data-te-modal-dialog-ref class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[50%]  2xl:min-[576px]:max-w-[30%]">
+    id="modalDownload"
-    <div class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    tabindex="-1"
-        <x-modal-header :title='__("Download {$episode->title} - {$episode->episode}")' />
+    aria-labelledby="modalDownload"
+    aria-modal="true"
+    role="dialog"
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-4xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
+            <x-modal-header title="Download {{ $episode->title }} - {{ $episode->episode }}" />
 
-        @php
+            @php
-            $dldomains = config('hstream.download_domain');
+                $dldomains = config('hstream.download_domain');
-            $dlDomainsBackup = config('hstream.asia_download_domain');
+                $dlDomainsBackup = config('hstream.asia_download_domain');
-        @endphp
+            @endphp
 
-        <!--Modal body-->
+            <!--Modal body-->
-        <div class="relative p-4">
+            <div class="relative p-4">
-            @include('modals.partials.download-guest')
+                @include('modals.partials.download-guest')
-            @include('modals.partials.download-authorized')
+                @include('modals.partials.download-authorized')
+            </div>
         </div>
     </div>
-  </div>
 </div>

resources/views/modals/filter-blacklist.blade.php

@@ -1,165 +1,107 @@
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init
+    data-te-modal-init
-    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
+    id="modalBlacklist"
-    id="modalBlacklist" tabindex="-1" aria-labelledby="modalBlacklist" aria-modal="true" role="dialog">
+    tabindex="-1"
-    <div data-te-modal-dialog-ref
+    aria-labelledby="modalBlacklistLabel"
-        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[60%]">
+    aria-modal="true"
+    role="dialog"
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
+>
+    <div
+        data-te-modal-dialog-ref
+        class="flex min-h-screen items-center justify-center p-4"
+    >
         <div
-            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+            class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900"
-            <x-modal-header :title="__('Blacklist')" />
+        >
+            <!-- Header -->
+            <div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                <div>
+                    <h2
+                        id="modalGenresLabel"
+                        class="text-xl font-semibold text-neutral-900 dark:text-white"
+                    >
+                        Genres & Filters
+                    </h2>
 
-            <!--Modal body-->
+                    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
-            <div class="relative p-4">
+                        Select tags to blacklist from your content.
-                @php
+                    </p>
-                    $taglist = \cache()->remember(
+                </div>
-                        'searchtags',
-                        300,
-                        fn() => Conner\Tagging\Model\Tag::where('count', '>', 0)->orderBy('slug', 'ASC')->get(),
-                    );
-                    $appearances = [
-                        'Loli',
-                        'Shota',
-                        'Milf',
-                        'Futanari',
-                        'Big Boobs',
-                        'Small Boobs',
-                        'Dark Skin',
-                        'Cosplay',
-                        'Elf',
-                        'Maid',
-                        'Nekomimi',
-                        'Nurse',
-                        'School Girl',
-                        'Succubus',
-                        'Teacher',
-                        'Trap',
-                        'Pregnant',
-                        'Glasses',
-                        'Swim Suit',
-                        'Ugly Bastard',
-                        'Monster',
-                    ];
-                    $types = [
-                        '3D',
-                        '4K',
-                        '48Fps',
-                        '4K 48Fps',
-                        'Censored',
-                        'Uncensored',
-                        'Comedy',
-                        'Fantasy',
-                        'Horror',
-                        'Vanilla',
-                        'Ntr',
-                        'Pov',
-                        'Filmed',
-                        'X-Ray',
-                    ];
-                    $actions = [
-                        'Anal',
-                        'Bdsm',
-                        'Facial',
-                        'Blow Job',
-                        'Boob Job',
-                        'Foot Job',
-                        'Hand Job',
-                        'Rimjob',
-                        'Inflation',
-                        'Masturbation',
-                        'Public Sex',
-                        'Rape',
-                        'Reverse Rape',
-                        'Threesome',
-                        'Orgy',
-                        'Gangbang',
-                    ];
-                @endphp
 
-                <ul class="list-none text-justify" style="overflow: hidden;">
+                <button
-                    @foreach ($taglist as $tag)
+                    type="button"
-                        @if (in_array($tag->name, $types) || in_array($tag->name, $appearances) || in_array($tag->name, $actions))
+                    data-te-modal-dismiss
-                            @continue
+                    wire:click="revertFilters"
-                        @endif
+                    class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
-                        <li class="inline-block m-1">
+                >
-                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
+                    ✕
-                                id="blacklist-{{ $tag->slug }}" name="blacklist[]" value="{{ $tag->slug }}">
-                            <label
-                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                for="blacklist-{{ $tag->slug }}">{{ $tag->name }}</label>
-                        </li>
-                    @endforeach
-                </ul>
-
-                <br>
-                <!-- Actions -->
-                <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                    Action
-                </p>
-                <ul class="list-none text-justify" style="overflow: hidden;">
-                    @foreach ($actions as $tag)
-                        <li class="inline-block m-1">
-                            @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
-                                id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
-                            <label
-                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                for="blacklist-{{ $slug }}">{{ $tag }}</label>
-                        </li>
-                    @endforeach
-                </ul>
-
-                <br>
-                <!-- Character Appearance -->
-                <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                    Appearance
-                </p>
-                <ul class="list-none text-justify" style="overflow: hidden;">
-                    @foreach ($appearances as $tag)
-                        @guest
-                            @php if ($tag === "Loli" || $tag === "Shota") continue; @endphp
-                        @endguest
-                        <li class="inline-block m-1">
-                            @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
-                                id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
-                            <label
-                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                for="blacklist-{{ $slug }}">{{ $tag }}</label>
-                        </li>
-                    @endforeach
-                </ul>
-
-                <br>
-
-                <!-- Video Types -->
-                <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                    Type
-                </p>
-                <ul class="list-none text-justify" style="overflow: hidden;">
-                    @foreach ($types as $tag)
-                        <li class="inline-block m-1">
-                            @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                            <input class="m-5 hidden peer" wire:model="blacklist" type="checkbox"
-                                id="blacklist-{{ $slug }}" name="blacklist[]" value="{{ $slug }}">
-                            <label
-                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                for="blacklist-{{ $slug }}">{{ $tag }}</label>
-                        </li>
-                    @endforeach
-                </ul>
-            </div>
-
-            <!--Modal footer-->
-            <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
-                <button data-te-modal-dismiss wire:click="revertFilters" type="button"
-                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
-                    Close
-                </button>
-                <button data-te-modal-dismiss wire:click="applyFilters" type="button"
-                    class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
-                    Apply
                 </button>
             </div>
+
+            <!-- Body -->
+            <form class="max-h-[75vh] overflow-y-auto">
+                <div class="space-y-8 p-6">
+                    @foreach (\App\Helpers\FilterCategories::getFilterCategories() as $section => $items)
+                        <section>
+                            <div class="mb-4 flex items-center justify-between">
+                                <h3 class="text-lg font-semibold text-neutral-800 dark:text-white">
+                                    {{ $section }}
+                                </h3>
+
+                                <div class="h-px flex-1 bg-neutral-200 ml-4 dark:bg-neutral-700"></div>
+                            </div>
+
+                            <div class="flex flex-wrap gap-3">
+                                @foreach ($items as $tag)
+                                    @php
+                                        $slug = Str::slug($tag);
+                                    @endphp
+
+                                    <div>
+                                        <input
+                                            wire:model="blacklist"
+                                            type="checkbox"
+                                            id="blacklist-{{ $slug }}"
+                                            name="blacklist[]"
+                                            value="{{ $slug }}"
+                                            class="peer hidden"
+                                        >
+
+                                        <label
+                                            for="blacklist-{{ $slug }}"
+                                            class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
+                                        >
+                                            {{ $tag }}
+                                        </label>
+                                    </div>
+                                @endforeach
+                            </div>
+                        </section>
+                    @endforeach
+                </div>
+
+                <!-- Footer -->
+                <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                    <button
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="revertFilters"
+                        class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
+                    >
+                        Cancel
+                    </button>
+
+                    <button
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="applyFilters"
+                        class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
+                    >
+                        Apply Filters
+                    </button>
+                </div>
+            </form>
         </div>
     </div>
 </div>

resources/views/modals/filter-genres.blade.php

@@ -1,163 +1,99 @@
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init
+    data-te-modal-init
-    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
+    id="modalGenres"
-    id="modalGenres" tabindex="-1" aria-labelledby="modalGenres" aria-modal="true" role="dialog">
+    tabindex="-1"
-    <div data-te-modal-dialog-ref
+    aria-labelledby="modalGenresLabel"
-        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[60%]">
+    aria-modal="true"
-        <div
+    role="dialog"
-            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
-            <x-modal-header :title="__('Genres')" />
+>
-            <form>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
-                <!--Modal body-->
+        <div class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
-                <div class="relative p-4">
+            <!-- Header -->
-                    @php
+            <div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
-                        $taglist = cache()->remember(
+                <div>
-                            'searchtags',
+                    <h2
-                            300,
+                        id="modalGenresLabel"
-                            fn() => Conner\Tagging\Model\Tag::where('count', '>', 0)->orderBy('slug', 'ASC')->get(),
+                        class="text-xl font-semibold text-neutral-900 dark:text-white"
-                        );
+                    >
-                        $appearances = [
+                        Genres & Filters
-                            'Loli',
+                    </h2>
-                            'Shota',
-                            'Milf',
-                            'Futanari',
-                            'Big Boobs',
-                            'Small Boobs',
-                            'Dark Skin',
-                            'Cosplay',
-                            'Elf',
-                            'Maid',
-                            'Nekomimi',
-                            'Nurse',
-                            'School Girl',
-                            'Succubus',
-                            'Teacher',
-                            'Trap',
-                            'Pregnant',
-                            'Glasses',
-                            'Swim Suit',
-                            'Ugly Bastard',
-                            'Monster',
-                        ];
-                        $types = [
-                            '3D',
-                            '4K',
-                            '48Fps',
-                            '4K 48Fps',
-                            'Censored',
-                            'Uncensored',
-                            'Comedy',
-                            'Fantasy',
-                            'Horror',
-                            'Vanilla',
-                            'Ntr',
-                            'Pov',
-                            'Filmed',
-                            'X-Ray',
-                        ];
-                        $actions = [
-                            'Anal',
-                            'Bdsm',
-                            'Facial',
-                            'Blow Job',
-                            'Boob Job',
-                            'Foot Job',
-                            'Hand Job',
-                            'Rimjob',
-                            'Inflation',
-                            'Masturbation',
-                            'Public Sex',
-                            'Rape',
-                            'Reverse Rape',
-                            'Threesome',
-                            'Orgy',
-                            'Gangbang',
-                        ];
-                    @endphp
 
-                    <ul class="list-none text-justify" style="overflow: hidden;">
+                    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
-                        @foreach ($taglist as $tag)
+                        Select tags to filter your content.
-                            @if (in_array($tag->name, $types) || in_array($tag->name, $appearances) || in_array($tag->name, $actions))
-                                @continue
-                            @endif
-                            <li class="inline-block m-1">
-                                <input class="m-5 hidden peer" wire:model="tags" type="checkbox"
-                                    id="tags-{{ $tag->slug }}" name="tags[]" value="{{ $tag->slug }}">
-                                <label
-                                    class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                    for="tags-{{ $tag->slug }}">{{ $tag->name }}</label>
-                            </li>
-                        @endforeach
-                    </ul>
-
-                    <br>
-                    <!-- Actions -->
-                    <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                        Action
                     </p>
-                    <ul class="list-none text-justify" style="overflow: hidden;">
-                        @foreach ($actions as $tag)
-                            <li class="inline-block m-1">
-                                @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                                <input class="m-5 hidden peer" wire:model="tags" type="checkbox"
-                                    id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
-                                <label
-                                    class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                    for="tags-{{ $slug }}">{{ $tag }}</label>
-                            </li>
-                        @endforeach
-                    </ul>
-
-                    <br>
-                    <!-- Character Appearance -->
-                    <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                        Appearance
-                    </p>
-                    <ul class="list-none text-justify" style="overflow: hidden;">
-                        @foreach ($appearances as $tag)
-                            @guest
-                                @php if ($tag === "Loli" || $tag === "Shota") continue; @endphp
-                            @endguest
-                            <li class="inline-block m-1">
-                                @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                                <input class="m-5 hidden peer" wire:model="tags" type="checkbox"
-                                    id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
-                                <label
-                                    class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                    for="tags-{{ $slug }}">{{ $tag }}</label>
-                            </li>
-                        @endforeach
-                    </ul>
-
-                    <br>
-
-                    <!-- Video Types -->
-                    <p class="font-medium leading-normal text-neutral-800 dark:text-white">
-                        Type
-                    </p>
-                    <ul class="list-none text-justify" style="overflow: hidden;">
-                        @foreach ($types as $tag)
-                            <li class="inline-block m-1">
-                                @php $slug = Illuminate\Support\Str::slug($tag); @endphp
-                                <input class="m-5 hidden peer" wire:model="tags" type="checkbox"
-                                    id="tags-{{ $slug }}" name="tags[]" value="{{ $slug }}">
-                                <label
-                                    class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
-                                    for="tags-{{ $slug }}">{{ $tag }}</label>
-                            </li>
-                        @endforeach
-                    </ul>
                 </div>
 
-                <!--Modal footer-->
+                <button
-                <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
+                    type="button"
-                    <button data-te-modal-dismiss wire:click="revertFilters" type="button"
+                    data-te-modal-dismiss
-                        class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
+                    wire:click="revertFilters"
-                        Close
+                    class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
+                >
+                    ✕
+                </button>
+            </div>
+
+            <!-- Body -->
+            <form class="max-h-[75vh] overflow-y-auto">
+                <div class="space-y-8 p-6">
+                    @foreach (\App\Helpers\FilterCategories::getFilterCategories() as $section => $items)
+                        <section>
+                            <div class="mb-4 flex items-center justify-between">
+                                <h3 class="text-lg font-semibold text-neutral-800 dark:text-white">
+                                    {{ $section }}
+                                </h3>
+
+                                <div class="h-px flex-1 bg-neutral-200 ml-4 dark:bg-neutral-700"></div>
+                            </div>
+
+                            <div class="flex flex-wrap gap-3">
+                                @foreach ($items as $tag)
+                                    @php
+                                        $slug = Str::slug($tag);
+                                    @endphp
+
+                                    <div>
+                                        <input
+                                            wire:model="tags"
+                                            type="checkbox"
+                                            id="tags-{{ $slug }}"
+                                            name="tags[]"
+                                            value="{{ $slug }}"
+                                            class="peer hidden"
+                                        >
+
+                                        <label
+                                            for="tags-{{ $slug }}"
+                                            class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
+                                        >
+                                            {{ $tag }}
+                                        </label>
+                                    </div>
+                                @endforeach
+                            </div>
+                        </section>
+                    @endforeach
+                </div>
+
+                <!-- Footer -->
+                <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                    <button
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="revertFilters"
+                        class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
+                    >
+                        Cancel
                     </button>
-                    <button data-te-modal-dismiss wire:click="applyFilters" type="button"
+
-                        class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
+                    <button
-                        Apply
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="applyFilters"
+                        class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
+                    >
+                        Apply Filters
                     </button>
                 </div>
             </form>

resources/views/modals/filter-studios.blade.php

@@ -1,40 +1,86 @@
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init
+    data-te-modal-init
-    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
+    id="modalStudios"
-    id="modalStudios" tabindex="-1" aria-labelledby="modalStudios" aria-modal="true" role="dialog">
+    tabindex="-1"
-    <div data-te-modal-dialog-ref
+    aria-labelledby="modalStudios"
-        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[70%]  2xl:min-[576px]:max-w-[60%]">
+    aria-modal="true"
-        <div
+    role="dialog"
-            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
-            <x-modal-header :title="__('Studios')" />
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-6xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
+            <!-- Header -->
+            <div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                <div>
+                    <h2
+                        id="modalGenresLabel"
+                        class="text-xl font-semibold text-neutral-900 dark:text-white"
+                    >
+                        Studios
+                    </h2>
 
-            <!--Modal body-->
+                    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
-            <div class="relative p-4">
+                        Select studios to filter your content.
-                <ul class="list-none text-justify" style="overflow: hidden;">
+                    </p>
+                </div>
+
+                <button
+                    type="button"
+                    data-te-modal-dismiss
+                    wire:click="revertFilters"
+                    class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
+                >
+                    ✕
+                </button>
+            </div>
+
+            <!-- Body -->
+            <form class="max-h-[75vh] overflow-y-auto">
+                <div class="space-y-8 p-6">
                     @php $studios = \cache()->remember('searchstudios', 300, fn () => App\Models\Studios::orderBy('name', 'ASC')->get()); @endphp
-                    @foreach ($studios as $studio)
+                    <div class="flex flex-wrap gap-3">
-                        <li class="inline-block m-1">
+                        @foreach ($studios as $studio)
-                            <input class="m-5 hidden peer" wire:model="studios" type="checkbox"
+                        <div>
-                                id="studio-{{ $studio->slug }}" name="studios[]" value="{{ $studio->slug }}">
+                            <input 
+                                wire:model="studios"
+                                type="checkbox" 
+                                id="studio-{{ $studio->slug }}" 
+                                name="studios[]" 
+                                value="{{ $studio->slug }}" 
+                                class="m-5 hidden peer"
+                            >
                             <label
-                                class="relative block cursor-pointer p-2 rounded bg-neutral-200 dark:bg-neutral-600 peer-checked:bg-rose-600 text-black peer-checked:text-white dark:peer-checked:text-white dark:text-white select-none"
+                                for="studio-{{  $studio->slug }}"
-                                for="studio-{{ $studio->slug }}">{{ $studio->name }}</label>
+                                class="inline-flex cursor-pointer items-center rounded-full border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-neutral-700 transition-all duration-200 hover:border-rose-400 hover:bg-rose-50 hover:text-rose-600 peer-checked:border-rose-600 peer-checked:bg-rose-600 peer-checked:text-white dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:border-rose-500 dark:hover:bg-neutral-700"
-                        </li>
+                            >
-                    @endforeach
+                                {{ $studio->name }}
-                </ul>
+                            </label>
-            </div>
+                        </div>
+                        @endforeach
+                    </div>
+                </div>
 
-            <!--Modal footer-->
+                <!-- Footer -->
-            <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
+                <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
-                <button data-te-modal-dismiss wire:click="revertFilters" type="button"
+                    <button
-                    class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200">
+                        type="button"
-                    Close
+                        data-te-modal-dismiss
-                </button>
+                        wire:click="revertFilters"
-                <button data-te-modal-dismiss wire:click="applyFilters" type="button"
+                        class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
-                    class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600">
+                    >
-                    Apply
+                        Cancel
-                </button>
+                    </button>
-            </div>
+
+                    <button
+                        type="button"
+                        data-te-modal-dismiss
+                        wire:click="applyFilters"
+                        class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
+                    >
+                        Apply Filters
+                    </button>
+                </div>
+            </form>
         </div>
     </div>
 </div>

resources/views/modals/language-selector.blade.php

@@ -1,42 +1,73 @@
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init
+    data-te-modal-init
-    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
+    id="modalLanguage"
-    id="modalLanguage" tabindex="-1" aria-modal="true" role="dialog">
+    tabindex="-1"
-    <div data-te-modal-dialog-ref
+    aria-labelledby="modalLanguage"
-        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[90%] md:min-[576px]:max-w-[80%] lg:min-[576px]:max-w-[60%] xl:min-[576px]:max-w-[40%] 2xl:min-[576px]:max-w-[20%]">
+    aria-modal="true"
-        <div
+    role="dialog"
-            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
-            <x-modal-header :title="__('Language')" />
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
+            <!-- Header -->
+            <div class="sticky top-0 z-10 flex items-center justify-between border-b border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
+                <div>
+                    <h2
+                        id="modalGenresLabel"
+                        class="text-xl font-semibold text-neutral-900 dark:text-white"
+                    >
+                        Language
+                    </h2>
+
+                    <p class="mt-1 text-sm text-neutral-500 dark:text-neutral-400">
+                        Select your preffered language of the website.
+                    </p>
+                </div>
+
+                <button
+                    type="button"
+                    data-te-modal-dismiss
+                    wire:click="revertFilters"
+                    class="rounded-lg p-2 text-neutral-500 transition hover:bg-neutral-100 hover:text-black dark:hover:bg-neutral-800 dark:hover:text-white"
+                >
+                    ✕
+                </button>
+            </div>
 
             <!--Modal body-->
             <div class="relative p-4">
                 <form method="POST" action="{{ route('update.language') }}">
                     @csrf
 
-                    <label class="mb-2 leading-tight  text-gray-800 dark:text-gray-200 w-full" for="language">Select
+                    <div class="pb-6">
-                        Language:</label>
+                        <label class="mb-2 leading-tight  text-gray-800 dark:text-gray-200 w-full" for="language">Select
-                    <select name="language" id="language"
+                            Language:</label>
-                        class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900">
+                        <select name="language" id="language"
-                        <option value="en" @if ('en' == App::getLocale()) selected @endif>
+                            class="block w-full text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-rose-800 focus:border-rose-900 dark:bg-neutral-900 dark:border-neutral-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-rose-800 dark:focus:border-rose-900">
-                            English (en)
+                            <option value="en" @if ('en' == App::getLocale()) selected @endif>
-                        </option>
+                                English (en)
-                        <option value="de" @if ('de' == App::getLocale()) selected @endif>
+                            </option>
-                            Deutsch (de)
+                            <option value="de" @if ('de' == App::getLocale()) selected @endif>
-                        </option>
+                                Deutsch (de)
-                        <option value="fr" @if ('fr' == App::getLocale()) selected @endif>
+                            </option>
-                            Français (fr)
+                            <option value="fr" @if ('fr' == App::getLocale()) selected @endif>
-                        </option>
+                                Français (fr)
-                    </select>
+                            </option>
+                        </select>
+                    </div>
 
-                    <div class="flex flex-shrink-0 flex-wrap items-center justify-end rounded-b-md p-4">
+                    <div class="sticky bottom-0 flex items-center justify-end gap-3 border-t border-neutral-200 bg-white/90 px-6 py-4 backdrop-blur dark:border-neutral-700 dark:bg-neutral-900/90">
-                        <button type="button"
+                        <button 
-                            class="inline-block rounded bg-primary-100 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-primary-700 transition duration-150 ease-in-out hover:bg-primary-accent-100 focus:bg-primary-accent-100 focus:outline-none focus:ring-0 active:bg-primary-accent-200"
+                            type="button"
-                            data-te-modal-dismiss data-te-ripple-init data-te-ripple-color="light">
+                            data-te-modal-dismiss
+                            class="rounded-xl border border-neutral-300 px-5 py-2.5 text-sm font-medium text-neutral-700 transition hover:bg-neutral-100 dark:border-neutral-600 dark:text-neutral-200 dark:hover:bg-neutral-800"
+                        >
                             Cancel
                         </button>
-                        <button type="submit"
+                        <button 
-                            class="ml-1 inline-block rounded bg-rose-600 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out hover:bg-rose-700 focus:bg-rose-600"
+                            type="submit"
-                            data-te-ripple-init data-te-ripple-color="light">
+                            class="rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
+                        >
                             Apply
                         </button>
                     </div>

resources/views/modals/share.blade.php

@@ -1,12 +1,15 @@
-<!--Verically centered modal-->
+<div
-<div data-te-modal-init
+    data-te-modal-init
-    class="fixed left-0 top-0 z-[1055] hidden h-full w-full overflow-y-auto overflow-x-hidden outline-none"
+    id="modalShare"
-    id="modalShare" tabindex="-1" aria-labelledby="Share" aria-modal="true" role="dialog">
+    tabindex="-1"
-    <div data-te-modal-dialog-ref
+    aria-labelledby="Share"
-        class="pointer-events-none relative flex min-h-[calc(100%-1rem)] w-auto translate-y-[-50px] items-center opacity-0 transition-all duration-300 ease-in-out min-[576px]:mx-auto min-[576px]:mt-7 min-[576px]:min-h-[calc(100%-3.5rem)] min-[576px]:max-w-[95%] md:min-[576px]:max-w-[90%] lg:min-[576px]:max-w-[80%] xl:min-[576px]:max-w-[50%] 2xl:min-[576px]:max-w-[25%]">
+    aria-modal="true"
-        <div
+    role="dialog"
-            class="pointer-events-auto relative flex w-full flex-col rounded-md border-none bg-white bg-clip-padding text-current shadow-lg outline-none dark:bg-neutral-800">
+    class="fixed inset-0 z-[1055] hidden overflow-y-auto bg-black/60 backdrop-blur-sm"
-            <x-modal-header :title='__("Share {$episode->title} - {$episode->episode}")' />
+>
+    <div data-te-modal-dialog-ref class="flex min-h-screen items-center justify-center p-4">
+        <div class="relative w-full max-w-2xl overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-2xl dark:border-neutral-700 dark:bg-neutral-900">
+            <x-modal-header title="Share {{ $episode->title }} - {{ $episode->episode }}" />
 
             <!--Modal body-->
             <div class="relative p-4">
@@ -15,8 +18,8 @@
                     $currentUrl = url()->current();
                     $text = 'Watch ' . $episode->title . ' - ' . $episode->episode . ' in 4k on hstream.moe!';
                 @endphp
-                <div class="flex flex-wrap justify-stretch">
+                <div class="flex flex-wrap justify-stretch gap-3">
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="https://facebook.com/sharer/sharer.php?u={{ $currentUrl }}"
                         aria-label="Share on Facebook" draggable="false">
@@ -29,7 +32,7 @@
                         </svg>
                         <span class="ml-2">Facebook</span>
                     </a>
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="https://twitter.com/intent/tweet?url={{ $currentUrl }}&amp;text={{ $text }}"
                         aria-label="Share on Twitter" draggable="false">
@@ -42,7 +45,7 @@
                         </svg>
                         <span class="ml-2">Twitter</span>
                     </a>
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="https://reddit.com/submit/?url={{ $currentUrl }}&amp;resubmit=true&amp;title={{ $text }}"
                         aria-label="Share on Reddit" draggable="false">
@@ -55,7 +58,7 @@
                         </svg>
                         <span class="ml-2">Reddit</span>
                     </a>
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="https://wa.me/?text={{ $text }}%20{{ $currentUrl }}"
                         aria-label="Share on Whatsapp" draggable="false" style="">
@@ -68,7 +71,7 @@
                         </svg>
                         <span class="ml-2">Whatsapp</span>
                     </a>
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="https://telegram.me/share/url?text={{ $text }}&amp;url={{ $currentUrl }}"
                         aria-label="Share on Telegram" draggable="false">
@@ -81,7 +84,7 @@
                         </svg>
                         <span class="ml-2">Telegram</span>
                     </a>
-                    <a class="border-2 duration-200 ease inline-flex items-center mb-1 mr-1 transition py-3 px-5 rounded-lg text-white border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700"
+                    <a class="cursor-pointer inline-flex items-center rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700"
                         target="_blank" rel="noopener"
                         href="mailto:?subject={{ $text }}&amp;body={{ $currentUrl }}"
                         aria-label="Share by Email" draggable="false">
@@ -100,7 +103,7 @@
                     <div>
                         <button id="copy-button" type="button" data-te-clipboard-init
                             data-te-clipboard-target="#copy-target" data-te-ripple-init data-te-ripple-color="light"
-                            class="inline-block rounded border-rose-600 bg-rose-600 hover:bg-rose-700 hover:border-rose-700 px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white transition duration-150 ease-in-out focus:bg-rose-600 focus:outline-none focus:ring-0 active:bg-rose-700">
+                            class="cursor-pointer rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-rose-600/20 transition hover:bg-rose-700">
                             Copy
                         </button>
                     </div>

resources/views/partials/episode-cover.blade.php

@@ -1,73 +0,0 @@
-@php $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
-
-    <div
-        class="relative p-1 mb-8 w-full transition duration-300 ease-in-out md:p-2 md:hover:-translate-y-1 md:hover:scale-110">
-        <a class="hover:text-blue-600" href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
-            <img alt="{{ $episode->title }} - {{ $episode->episode }}" loading="lazy" width="400"
-                class="block relative rounded-lg object-cover object-center aspect-[11/16] z-20 "
-                src="{{ $episode->cover_url }}"></img>
-
-            @guest
-                <p
-                    class="absolute right-1 md:right-2 top-1 md:top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                    {{ $episode->getResolution() }}</p>
-                <p
-                    class="absolute left-1 md:left-2 bottom-1 md:bottom-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                    <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
-                        class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i class="fa-regular fa-comment"></i>
-                    {{ $episode->commentCount() }}
-                </p>
-            @endguest
-
-            @php $problematic = cache()->rememberForever('episodeProblematic'.$episode->id, fn () => $episode->getProblematicTags()); @endphp
-            @if (!empty($problematic))
-                <p
-                    class="absolute left-1 md:left-2 top-1 md:top-2 bg-red-700/70 !text-white rounded-br-lg rounded-tl-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                    <i class="fa-solid fa-triangle-exclamation"></i> {{ $problematic }}
-                </p>
-            @endif
-
-            @auth
-                @if ($episode->userWatched(auth()->user()->id))
-                    <p
-                        class="absolute right-1 md:right-2 top-1 md:top-2 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                        {{ $episode->getResolution() }}</p>
-                    <p
-                        class="absolute left-1 md:left-2 bottom-1 md:bottom-2 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                        <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
-                            class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i
-                            class="fa-regular fa-comment"></i> {{ $episode->commentCount() }}
-                    </p>
-                @else
-                    <p
-                        class="absolute right-1 md:right-2 top-1 md:top-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                        {{ $episode->getResolution() }}</p>
-                    <p
-                        class="absolute left-1 md:left-2 bottom-1 md:bottom-2 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                        <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
-                            class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i
-                            class="fa-regular fa-comment"></i> {{ $episode->commentCount() }}
-                    </p>
-                @endif
-            @endauth
-
-            <div class="absolute  w-[95%] grid grid-cols-1 text-center">
-                <p class="text-sm text-center text-black dark:text-white">{{ $episode->title }} -
-                    {{ $episode->episode }}</p>
-            </div>
-        </a>
-    </div>
-
-    @php $limitcounter++; @endphp
-@endforeach

resources/views/partials/episode-thumbnail.blade.php

@@ -1,17 +0,0 @@
-@php $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-thumbnail :episode="$episode" />
-
-    @php $limitcounter++; @endphp
-@endforeach

resources/views/profile/comments.blade.php

@@ -1,23 +1,12 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    @include('partials.background')
-@include('partials.head')
+    <div
-<body class="font-sans antialiased">
+        class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] flex flex-row justify-center md:justify-normal">
-    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+        <div class="grid md:grid-flow-col gap-4 xl:w-5/6 flex-row">
-        @include('layouts.navigation')
+            @include('profile.partials.sidebar')
-        <!-- Page Content -->
+            <div class="flex flex-col gap-2">
-        <main>
+                <livewire:user-comments :model="$user"/>
-            @include('partials.background')
-            <div
-                class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] flex flex-row justify-center md:justify-normal">
-                <div class="grid md:grid-flow-col gap-4 xl:w-5/6 flex-row">
-                    @include('profile.partials.sidebar')
-                    <div class="flex flex-col gap-2">
-                        <livewire:user-comments :model="$user"/>
-                    </div>
-                </div>
             </div>
-        </main>
+        </div>
-        @include('layouts.footer')
     </div>
-</body>
+</x-app-layout>
-</html>

resources/views/profile/index.blade.php

@@ -1,22 +1,9 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    @include('partials.background')
-@include('partials.head')
+    <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row justify-center md:justify-normal">
-
+        <div class="grid md:grid-flow-col gap-4 w-5/6 flex-row">
-<body class="font-sans antialiased">
+            @include('profile.partials.sidebar')
-    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+            @include('profile.partials.info')
-        @include('layouts.navigation')
+        </div>
-        <!-- Page Content -->
-        <main>
-            @include('partials.background')
-            <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] flex flex-row justify-center md:justify-normal">
-                <div class="grid md:grid-flow-col gap-4 w-5/6 flex-row">
-                    @include('profile.partials.sidebar')
-                    @include('profile.partials.info')
-                </div>
-            </div>
-        </main>
-        @include('layouts.footer')
     </div>
-</body>
+</x-app-layout>
-
-</html>

resources/views/profile/likes.blade.php

@@ -1,20 +1,9 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    @include('partials.background')
-@include('partials.head')
+    <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row justify-center md:justify-normal">
-<body class="font-sans antialiased">
+        <div class="flex flex-col md:flex-row">
-    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+            @include('profile.partials.sidebar')
-        @include('layouts.navigation')
+            @livewire('user-likes')
-        <!-- Page Content -->
+        </div>
-        <main>
-            @include('partials.background')
-            <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] flex flex-row justify-center md:justify-normal">
-                <div class="flex flex-col md:flex-row">
-                    @include('profile.partials.sidebar')
-                    @livewire('user-likes')
-                </div>
-            </div>
-        </main>
-        @include('layouts.footer')
     </div>
-</body>
+</x-app-layout>
-</html>

resources/views/profile/notifications.blade.php

@@ -1,66 +1,55 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    @include('partials.background')
-@include('partials.head')
+    <div
-<body class="font-sans antialiased">
+        class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row justify-center md:justify-normal">
-<div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+        <div class="grid md:grid-flow-col gap-4 xl:w-5/6 flex-row">
-    @include('layouts.navigation')
+            @include('profile.partials.sidebar')
-    <!-- Page Content -->
+            <div class="flex flex-col gap-2">
-    <main>
-        @include('partials.background')
-        <div
-            class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] flex flex-row justify-center md:justify-normal">
-            <div class="grid md:grid-flow-col gap-4 xl:w-5/6 flex-row">
-                @include('profile.partials.sidebar')
-                <div class="flex flex-col gap-2">
 
-                    @forelse($notifications as $notification)
+                @forelse($notifications as $notification)
-                        <div
+                    <div
-                            class="bg-white/40 dark:bg-neutral-950/40 backdrop-blur border border-gray-200 dark:border-neutral-700 rounded-xl shadow-sm p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-x-4 transition hover:shadow-md">
+                        class="bg-white/40 dark:bg-neutral-950/40 backdrop-blur border border-gray-200 dark:border-neutral-700 rounded-xl shadow-sm p-4 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-x-4 transition hover:shadow-md">
 
-                            <!-- Content -->
+                        <!-- Content -->
-                            <div class="flex flex-col gap-2 w-full h-full mt-2">
+                        <div class="flex flex-col gap-2 w-full h-full mt-2">
-                                <div class="flex items-center justify-between flex-none h-2">
+                            <div class="flex items-center justify-between flex-none h-2">
-                                    <span class="text-xs font-semibold uppercase tracking-wide text-sky-600 dark:text-rose-500">
+                                <span class="text-xs font-semibold uppercase tracking-wide text-sky-600 dark:text-rose-500">
-                                        {{ $notification->data['type'] ?? 'Notification' }}
+                                    {{ $notification->data['type'] ?? 'Notification' }}
-                                    </span>
+                                </span>
-                                </div>
-
-                                <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 leading-relaxed h-full">
-                                    {{ $notification->data['message'] ?? '' }}
-                                </p>
-                            </div>
-
-                            <!-- Actions -->
-                            <div class="flex gap-2 sm:gap-2 shrink-0">
-                                <a href="{{ $notification->data['url'] }}"
-                                   class="text-center rounded-lg bg-sky-600 px-3 py-2 text-xs sm:text-sm font-medium text-white hover:bg-sky-700 transition">
-                                    Open
-                                </a>
-
-                                <form method="POST" action="{{ route('profile.notifications.delete') }}">
-                                    @csrf
-                                    @method('delete')
-                                    <input type="hidden" value="{{ $notification->id }}" name="id">
-
-                                    <button type="submit"
-                                            class="w-full rounded-lg bg-rose-600 px-3 py-2 text-xs sm:text-sm font-medium text-white hover:bg-rose-700 transition">
-                                        Delete
-                                    </button>
-                                </form>
                             </div>
 
+                            <p class="text-sm sm:text-base text-gray-700 dark:text-gray-300 leading-relaxed h-full">
+                                {{ $notification->data['message'] ?? '' }}
+                            </p>
                         </div>
-                    @empty
+
-                        <div class="text-center py-16 text-gray-500 dark:text-gray-400">
+                        <!-- Actions -->
-                            <p class="text-lg">No notifications</p>
+                        <div class="flex gap-2 sm:gap-2 shrink-0">
-                            <p class="text-sm opacity-70">(╥﹏╥)</p>
+                            <a href="{{ $notification->data['url'] }}"
+                                class="text-center rounded-lg bg-sky-600 px-3 py-2 text-xs sm:text-sm font-medium text-white hover:bg-sky-700 transition">
+                                Open
+                            </a>
+
+                            <form method="POST" action="{{ route('profile.notifications.delete') }}">
+                                @csrf
+                                @method('delete')
+                                <input type="hidden" value="{{ $notification->id }}" name="id">
+
+                                <button type="submit"
+                                        class="w-full rounded-lg bg-rose-600 px-3 py-2 text-xs sm:text-sm font-medium text-white hover:bg-rose-700 transition">
+                                    Delete
+                                </button>
+                            </form>
                         </div>
-                    @endforelse
+
-                </div>
+                    </div>
+                @empty
+                    <div class="text-center py-16 text-gray-500 dark:text-gray-400">
+                        <p class="text-lg">No notifications</p>
+                        <p class="text-sm opacity-70">(╥﹏╥)</p>
+                    </div>
+                @endforelse
             </div>
         </div>
-    </main>
+    </div>
-    @include('layouts.footer')
+</x-app-layout>
-</div>
-</body>
-</html>

resources/views/profile/playlists.blade.php

@@ -1,25 +1,14 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    @include('partials.background')
-@include('partials.head')
+    <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row">
-<body class="font-sans antialiased">
+        <div class="flex flex-col md:flex-row">
-    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+            @include('profile.partials.sidebar')
-        @include('layouts.navigation')
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-        <!-- Page Content -->
+                <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
-        <main>
+                    @include('profile.partials.user-playlists')
-            @include('partials.background')
-            <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] flex flex-row">
-                <div class="flex flex-col md:flex-row">
-                    @include('profile.partials.sidebar')
-                    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 space-y-6">
-                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
-                            @include('profile.partials.user-playlists')
-                        </div>
-                    </div>
-                    @include('modals.create-playlist')
                 </div>
             </div>
-        </main>
+            @include('modals.create-playlist')
-        @include('layouts.footer')
+        </div>
     </div>
-</body>
+</x-app-layout>
-</html>

resources/views/profile/settings.blade.php

@@ -1,43 +1,30 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    @include('partials.background')
-@include('partials.head')
+    <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 mb-14 flex flex-row">
-
+        <div class="flex flex-col md:flex-row">
-<body class="font-sans antialiased">
+            @include('profile.partials.sidebar')
-    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-8 md:mt-0 space-y-6">
-        @include('layouts.navigation')
+                <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
-        <!-- Page Content -->
+                    @include('profile.partials.update-profile-information-form')
-        <main>
-            @include('partials.background')
-            <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] mb-14 flex flex-row">
-                <div class="flex flex-col md:flex-row">
-                    @include('profile.partials.sidebar')
-                    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-8 md:mt-0 space-y-6">
-                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
-                            @include('profile.partials.update-profile-information-form')
-                        </div>
-                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
-                            <livewire:passkeys />
-                        </div>
-                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
-                            @include('profile.partials.update-password-form')
-                        </div>
-                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
-                            @include('profile.partials.update-blacklist-form')
-                        </div>
-                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
-                            @include('profile.partials.update-design-form')
-                        </div>
-                        <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
-                            @include('profile.partials.delete-user-form')
-                        </div>
-                        @include('profile.partials.delete-user-modal')
-                    </div>
-                    @vite(['resources/js/user-blacklist.js'])
                 </div>
+                <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
+                    <livewire:passkeys />
+                </div>
+                <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
+                    @include('profile.partials.update-password-form')
+                </div>
+                <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
+                    @include('profile.partials.update-blacklist-form')
+                </div>
+                <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
+                    @include('profile.partials.update-design-form')
+                </div>
+                <div class="p-4 sm:p-8 bg-white/40 dark:bg-neutral-950/40 backdrop-blur shadow sm:rounded-lg">
+                    @include('profile.partials.delete-user-form')
+                </div>
+                @include('profile.partials.delete-user-modal')
             </div>
-        </main>
+            @vite(['resources/js/user-blacklist.js'])
-        @include('layouts.footer')
+        </div>
     </div>
-</body>
+</x-app-layout>
-
-</html>

resources/views/profile/subscription.blade.php

@@ -1,22 +1,11 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    @include('partials.background')
-@include('partials.head')
+    <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row">
-<body class="font-sans antialiased">
+        <div class="flex flex-col md:flex-row">
-    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+            @include('profile.partials.sidebar')
-        @include('layouts.navigation')
+            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-8 md:mt-0 space-y-6">
-        <!-- Page Content -->
+                @livewire('user-subscription', ['user' => $user])
-        <main>
-            @include('partials.background')
-            <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] flex flex-row">
-                <div class="flex flex-col md:flex-row">
-                    @include('profile.partials.sidebar')
-                    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 mt-8 md:mt-0 space-y-6">
-                        @livewire('user-subscription', ['user' => $user])
-                    </div>
-                </div>
             </div>
-        </main>
+        </div>
-        @include('layouts.footer')
     </div>
-</body>
+</x-app-layout>
-</html>

resources/views/profile/watched.blade.php

@@ -1,20 +1,9 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    @include('partials.background')
-@include('partials.head')
+    <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-10 flex flex-row">
-<body class="font-sans antialiased">
+        <div class="flex flex-col md:flex-row">
-    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+            @include('profile.partials.sidebar')
-        @include('layouts.navigation')
+            @livewire('watched', ['user' => $user])
-        <!-- Page Content -->
+        </div>
-        <main>
-            @include('partials.background')
-            <div class="relative max-w-[120rem] mx-auto sm:px-6 lg:px-8 space-y-6 pt-20 mt-[65px] flex flex-row">
-                <div class="flex flex-col md:flex-row">
-                    @include('profile.partials.sidebar')
-                    @livewire('watched', ['user' => $user])
-                </div>
-            </div>
-        </main>
-        @include('layouts.footer')
     </div>
-</body>
+</x-app-layout>
-</html>

resources/views/search/index.blade.php

@@ -1,17 +1,4 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    @include('partials.background')
-@include('partials.head')
+    @livewire('live-search')
-
+</x-app-layout>
-<body class="font-sans antialiased">
-    <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
-        @include('layouts.navigation')
-        <!-- Page Content -->
-        <main>
-            @include('partials.background')
-            @livewire('live-search')
-        </main>
-        @include('layouts.footer')
-    </div>
-</body>
-
-</html>

resources/views/series/index.blade.php

@@ -1,30 +1,18 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    @php $episode = $hentai->episodes[0]; @endphp
+    <div class="pt-6">
+        <div class="flex flex-col lg:flex-row justify-center">
+            <div class="pt-2 sm:px-2 lg:px-4 space-y-6 max-w-[100%] xl:max-w-[70%] 2xl:max-w-[60%] z-10">
+                @include('series.partials.info')
 
-    @include('partials.head')
+                @include('series.partials.episodes')
 
-    <body class="font-sans antialiased">
+                <livewire:comments :model="$hentai"/>
-        <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+            </div>
-            @include('layouts.navigation')
-            <!-- Page Content -->
-            <main>
-                @php $episode = $hentai->episodes[0]; @endphp
-                <div class="pt-6 mt-[65px]">
-                    <div class="flex flex-col lg:flex-row justify-center">
-                        <div class="pt-2 sm:px-2 lg:px-4 space-y-6 max-w-[100%] xl:max-w-[70%] 2xl:max-w-[60%] z-10">
-                            @include('series.partials.info')
 
-                            @include('series.partials.episodes')
+            @include('series.partials.popular')
 
-                            <livewire:comments :model="$hentai"/>
-                        </div>
-
-                        @include('series.partials.popular')
-
-                    </div>
-                </div>
-            </main>
-            @include('layouts.footer')
         </div>
-    </body>
+    </div>
-</html>
+</x-app-layout>
+

resources/views/series/partials/episodes.blade.php

@@ -6,7 +6,7 @@
     <!-- Episode List -->
     <div class="grid grid-cols-1 sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-2">
         @foreach ($hentai->episodes as $episode)
-            <x-episode-thumbnail :episode="$episode" />
+            <x-episode-cover :episode="$episode" view="thumbnail" />
         @endforeach
     </div>
 </div>

resources/views/series/partials/popular.blade.php

@@ -1,22 +1,22 @@
-<div class="pt-2 sm:px-2 lg:px-4 2xl:w-[450px]">
+<div class="pt-2 sm:px-2 lg:px-4 2xl:w-[450px] p-2">
-    <div class="bg-transparent rounded-lg overflow-hidden p-2">
+    @if (count($popularWeekly) > 0)
-        @if (count($popularWeekly) > 0)
+    <p class="leading-normal font-bold text-xl dark:text-white text-black pb-2">
-        <p class="leading-normal font-bold text-xl dark:text-white pb-2">
+        {{ __('home.popular-weekly') }}
-            {{ __('home.popular-weekly') }}
+    </p>
-        </p>
+    <div class="text-center xl:text-left">
-        <div class="text-center xl:text-left">
+        <ul class="inline-block xl:block">
-            <ul class="inline-block xl:block">
+            @php $counter = 0; @endphp
-                @php $counter = 0; @endphp
+            @foreach ($popularWeekly as $pEpisode)
-                @foreach ($popularWeekly as $pEpisode)
+                @php $episode = $pEpisode->episode; @endphp
-                    @php $episode = $pEpisode->episode; @endphp
+                @if($counter >= 8)
-                    @if($counter >= 8)
+                    @continue
-                        @continue
+                @endif
-                    @endif
+                <li>
-                    @include('stream.partials.episode-partial')
+                    <x-episode-cover :episode="$episode" view="thumbnail"/>
-                    @php $counter += 1; @endphp
+                </li>
-                @endforeach
+                @php $counter += 1; @endphp
-            </ul>
+            @endforeach
-        </div>
+        </ul>
-        @endif
     </div>
+    @endif
 </div>

resources/views/stream/index.blade.php

@@ -1,67 +1,55 @@
-<!DOCTYPE html>
+<x-app-layout>
-<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="scroll-smooth">
+    <div class="pt-10">
-    @include('partials.head')
+        <div class="flex flex-col xl:flex-row justify-center">
-    <body class="font-sans antialiased">
+            @if($episode->is_dvd_aspect)
-        <div class="flex flex-col min-h-screen bg-gray-100 dark:bg-neutral-900">
+            <div class="pt-2 sm:px-2 lg:px-4 space-y-6 max-w-[100%] xl:max-w-[80%] 2xl:max-w-[58%]">
-            @include('layouts.navigation')
+            @else
-            <!-- Page Content -->
+            <div class="pt-2 sm:px-2 lg:px-4 space-y-6 max-w-[100%] xl:max-w-[80%] 2xl:max-w-[70%]">
-            <main>
+            @endif
-                <div class="pt-6 mt-[65px]">
+                <!-- Player -->
-                    <div class="flex flex-col xl:flex-row justify-center">
+                @include('stream.partials.player')
-                        @if($episode->is_dvd_aspect)
-                        <div class="pt-2 sm:px-2 lg:px-4 space-y-6 max-w-[100%] xl:max-w-[80%] 2xl:max-w-[58%]">
-                        @else
-                        <div class="pt-2 sm:px-2 lg:px-4 space-y-6 max-w-[100%] xl:max-w-[80%] 2xl:max-w-[70%]">
-                        @endif
-                            <!-- Player -->
-                            @include('stream.partials.player')
 
-                            @if($isMobile)
+                @if($isMobile)
-                            <div class="flex flex-col">
+                <div class="flex flex-col">
-                                @include('stream.partials.playlist')
+                    @include('stream.partials.playlist')
-                            </div>
-                            @endif
-
-                            @include('admin.stream')
-                            <!-- Infos -->
-                            @include('stream.partials.info')
-                            <!-- Comments -->
-                            <livewire:comments :model="$episode"/>
-                        </div>
-                        <div class="flex flex-col">
-                            @if(! $isMobile)
-                            @include('stream.partials.playlist')
-                            @endif
-
-                            @include('stream.partials.more-episodes')
-                            @include('stream.partials.more-studio')
-                            @include('series.partials.popular')
-                        </div>
-                    </div>
                 </div>
-                <br>
+                @endif
-                <!-- Modals -->
-                @include('modals.download')
-                @include('modals.add-to-playlist')
-                @include('modals.share')
 
-                @auth
+                @include('admin.stream')
+                <!-- Infos -->
+                @include('stream.partials.info')
+                <!-- Comments -->
+                <livewire:comments :model="$episode"/>
+            </div>
+            <div class="flex flex-col">
+                @if(! $isMobile)
+                @include('stream.partials.playlist')
+                @endif
 
-                    @if(Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR) || Auth::user()->hasRole(\App\Enums\UserRole::MODERATOR))
+                @include('stream.partials.more-episodes')
-                    @include('admin.modals.edit-episode')
+                @include('stream.partials.more-studio')
-                    @endif
+                @include('series.partials.popular')
-
+            </div>
-                    @if(Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
-                    @include('admin.modals.upload-episode')
-                    @include('admin.modals.add-subtitles')
-                    @endif
-
-                @endauth
-                <!-- Player Script -->
-                @vite(['resources/js/player.js'])
-            </main>
-            @include('layouts.footer')
         </div>
-        @livewireScripts
+    </div>
-    </body>
+    <br>
-</html>
+    <!-- Modals -->
+    @include('modals.download')
+    @include('modals.add-to-playlist')
+    @include('modals.share')
+
+    @auth
+
+        @if(Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR) || Auth::user()->hasRole(\App\Enums\UserRole::MODERATOR))
+        @include('admin.modals.edit-episode')
+        @endif
+
+        @if(Auth::user()->hasRole(\App\Enums\UserRole::ADMINISTRATOR))
+        @include('admin.modals.upload-episode')
+        @include('admin.modals.add-subtitles')
+        @endif
+
+    @endauth
+    <!-- Player Script -->
+    @vite(['resources/js/player.js'])
+</x-app-layout>

resources/views/stream/partials/episode-partial.blade.php

@@ -1,38 +0,0 @@
-<li>
-    <a class="flex flex-col w-auto text-black dark:text-white hover:text-white hover:bg-rose-900/80 rounded-lg cursor-pointer pt-1"
-        href="{{ route('hentai.index', ['title' => $episode->slug]) }}">
-        <div class="flex items-center">
-            <div class="relative w-full aspect-[16/9]">
-                @auth
-                    @if ($episode->userWatched(auth()->user()->id))
-                        <p
-                            class="absolute right-1 top-1 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                            {{ $episode->getResolution() }}</p>
-                        <p
-                            class="absolute left-1 bottom-1 bg-green-600/80 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                            <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
-                                class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i
-                                class="fa-regular fa-comment"></i> {{ $episode->commentCount() }}
-                        </p>
-                    @else
-                        <p
-                            class="absolute right-1 top-1 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                            {{ $episode->getResolution() }}</p>
-                        <p
-                            class="absolute left-1 bottom-1 bg-rose-700/70 !text-white rounded-bl-lg rounded-tr-lg p-1 pr-2 pl-2 font-semibold text-sm z-30">
-                            <i class="fa-regular fa-eye"></i> {{ $episode->viewCountFormatted() }} <i
-                                class="fa-regular fa-heart"></i> {{ $episode->likeCount() }} <i
-                                class="fa-regular fa-comment"></i> {{ $episode->commentCount() }}
-                        </p>
-                    @endif
-                @endauth
-                <img loading="lazy" class="block relative rounded-xl object-cover object-center z-20 p-1"
-                    src="{{ optional($episode->gallery->first())->thumbnail_url }}"
-                    alt="{{ $episode->title }} - {{ $episode->episode }}">
-            </div>
-        </div>
-        <div class="basis-3/4 pl-2 text-center">
-            <p class="text-sm font-bold">{{ $episode->title }} - {{ $episode->episode }}</p>
-        </div>
-    </a>
-</li>

resources/views/stream/partials/gallery.blade.php

@@ -1,7 +1,9 @@
 <div class="bg-transparent rounded-lg">
-    <p class="leading-normal font-bold text-lg text-rose-600">
+    <div class="px-1 sm:px-2">
-        {{ __('stream.gallery') }}
+        <p class="leading-normal font-bold text-lg text-gray-900 dark:text-gray-200">
-    </p>
+            {{ __('stream.gallery') }}
+        </p>
+    </div>
     @if ($gallery->count() > 5)
         <div class="grid grid-rows-1 w-30 text-left">
             <ul data-te-lightbox-init class="list-none text-center" style="overflow: hidden;">

resources/views/stream/partials/info.blade.php

@@ -1,8 +1,8 @@
-<div class="overflow-hidden p-5 bg-transparent bg-white rounded-lg dark:bg-neutral-800">
+<div class="overflow-hidden p-5 bg-transparent bg-white rounded-xl dark:bg-neutral-800">
     <!-- Cover -->
     <div class="w-[100px] md:w-[150px] mr-4 float-left hidden md:block">
         <img alt="{{ $episode->title }}" loading="lazy" width="150"
-            class="block relative rounded-lg object-cover object-center aspect-[11/16] z-20"
+            class="block relative rounded-xl object-cover object-center aspect-[11/16] z-20"
             src="{{ $episode->cover_url }}"></img>
     </div>
 

resources/views/stream/partials/more-episodes.blade.php

@@ -1,16 +1,16 @@
 @if (count($moreEpisodes) > 0)
-<div class="pt-2 sm:px-2 lg:px-4 2xl:w-[450px]">
+<div class="pt-2 sm:px-2 lg:px-4 2xl:w-[450px] p-2">
-    <div class="bg-transparent overflow-hidden p-4">
+    <p class="leading-normal font-bold text-xl dark:text-white text-black pb-2">
-        <p class="leading-normal font-bold text-xl dark:text-white pb-2">
+        {{ __('stream.more-from') }} <a class="text-rose-600 hover:underline hover:underline-offset-4 break-words" href="{{ route('hentai.index', ['title' => $episode->hentai->slug]) }}">{{ $episode->title }}</a>
-            {{ __('stream.more-from') }} <a class="text-rose-600 hover:underline hover:underline-offset-4 break-words" href="{{ route('hentai.index', ['title' => $episode->hentai->slug]) }}">{{ $episode->title }}</a>
+    </p>
-        </p>
+    <div class="text-center xl:text-left">
-        <div class="text-center xl:text-left">
+        <ul class="inline-block xl:block">
-            <ul class="inline-block xl:block">
+            @foreach ($moreEpisodes as $episode)
-                @foreach ($moreEpisodes as $episode)
+                <li>
-                    @include('stream.partials.episode-partial')
+                    <x-episode-cover :episode="$episode" view="thumbnail"/>
-                @endforeach
+                </li>
-            </ul>
+            @endforeach
-        </div>
+        </ul>
     </div>
 </div>
 @endif

resources/views/stream/partials/more-studio.blade.php

@@ -1,16 +1,16 @@
 @if (count($studioEpisodes) > 0)
-<div class="pt-2 sm:px-2 lg:px-4 2xl:w-[450px]">
+<div class="pt-2 sm:px-2 lg:px-4 2xl:w-[450px] p-2">
-    <div class="bg-transparent rounded-lg overflow-hidden p-4">
+    <p class="leading-normal font-bold text-xl dark:text-white text-black pb-2">
-        <p class="leading-normal font-bold text-xl dark:text-white pb-2">
+        {{ __('stream.more-from-studio') }} <a class="text-rose-600 hover:underline hover:underline-offset-4 break-words" href="{{ route('hentai.search', ['studios[0]' => $episode->studio->slug]) }}">{{ $episode->studio->name }}</a>
-            {{ __('stream.more-from-studio') }} <a class="text-rose-600 hover:underline hover:underline-offset-4 break-words" href="{{ route('hentai.search', ['studios[0]' => $episode->studio->slug]) }}">{{ $episode->studio->name }}</a>
+    </p>
-        </p>
+    <div class="text-center xl:text-left">
-        <div class="text-center xl:text-left">
+        <ul class="inline-block xl:block">
-            <ul class="inline-block xl:block">
+            @foreach ($studioEpisodes as $episode)
-                @foreach ($studioEpisodes as $episode)
+                <li>
-                    @include('stream.partials.episode-partial')
+                    <x-episode-cover :episode="$episode" view="thumbnail"/>
-                @endforeach
+                </li>
-            </ul>
+            @endforeach
-        </div>
+        </ul>
     </div>
 </div>
 @endif

vite.config.js

@@ -21,6 +21,7 @@ export default defineConfig({
                 'resources/js/admin-edit.js',
                 'resources/js/admin-subtitles.js',
                 'resources/js/preview.js',
+                'resources/js/responsive.js',
                 'resources/js/stats.js'
             ],
             refresh: true,