From 71bcf277f69e6fdebd35006c8a011dcef5ba444a Mon Sep 17 00:00:00 2001
From: w33b <w33b@hstream.moe>
Date: Wed, 15 Oct 2025 19:33:37 +0200
Subject: [PATCH] Add type icons to downloads search page

---
 .../views/livewire/downloads-search.blade.php | 75 ++++++++++++++++---
 1 file changed, 64 insertions(+), 11 deletions(-)

diff --git a/resources/views/livewire/downloads-search.blade.php b/resources/views/livewire/downloads-search.blade.php
index 95654d6..f787c8a 100644
--- a/resources/views/livewire/downloads-search.blade.php
+++ b/resources/views/livewire/downloads-search.blade.php
@@ -1,5 +1,5 @@
 <div class="py-3 relative">
-    <div class="mx-auto sm:px-6 lg:px-8 space-y-6 max-w-[100%] xl:max-w-[80%] 2xl:max-w-[50%] relative z-10">
+    <div class="mx-auto sm:px-6 lg:px-8 space-y-6 max-w-[100%] lg:max-w-[90%] xl:max-w-[80%] 2xl:max-w-[60%] relative z-10">
         <!-- Search Filter -->
         <div class="p-4 sm:p-8 bg-white/30 dark:bg-neutral-950/40 shadow sm:rounded-lg backdrop-blur relative z-100">
             <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 ">
@@ -36,7 +36,8 @@
                     </div>
                 </div>
 
-                <div x-data="{ open: @entangle('isOpen') }" x-on:click.away="open = false" class="relative right-2 left-0 sm:left-2 transition-all">
+                <div x-data="{ open: @entangle('isOpen') }" x-on:click.away="open = false"
+                    class="relative right-2 left-0 sm:left-2 transition-all">
                     <div class="absolute inset-y-0 left-2 flex items-center pl-3 pointer-events-none">
                         <i class="fa-solid fa-filter text-gray-500 dark:text-gray-400"></i>
                     </div>
@@ -44,8 +45,9 @@
                         class="inline-flex 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"
                         wire:click="toggleDropdown">
                         Select Type
-                        <svg class="absolute -mr-1 h-5 w-5 text-gray-500 right-4 top-4" xmlns="http://www.w3.org/2000/svg"
-                            viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                        <svg class="absolute -mr-1 h-5 w-5 text-gray-500 right-4 top-4"
+                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"
+                            aria-hidden="true">
                             <path fill-rule="evenodd"
                                 d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                 clip-rule="evenodd" />
@@ -93,7 +95,7 @@
         </div>
     </div>
     <div
-        class="relative pt-5 mx-auto sm:px-6 lg:px-8 space-y-6 text-gray-900 dark:text-white max-w-[100%] xl:max-w-[80%] 2xl:max-w-[50%]">
+        class="relative pt-5 mx-auto sm:px-6 lg:px-8 space-y-6 text-gray-900 dark:text-white max-w-[100%] lg:max-w-[90%] xl:max-w-[80%] 2xl:max-w-[60%]">
         <div class="flex flex-col">
             <div class="overflow-x-auto sm:-mx-6 lg:-mx-8">
                 <div class="inline-block min-w-full py-2 sm:px-6 lg:px-8">
@@ -105,9 +107,10 @@
                             <div
                                 class="flex bg-white/30 dark:bg-neutral-950/40 backdrop-blur font-medium dark:border-neutral-500 border-b rounded-tl-lg rounded-tr-lg">
                                 <div class="flex-1 px-6 py-4 hidden sm:block">Title</div>
-                                <div class="w-28 px-6 py-4 hidden sm:block">Size</div>
-                                <div class="w-32 px-6 py-4 hidden sm:block">Date</div>
-                                <div class="w-32 px-6 py-4">Download</div>
+                                <div class="w-20 px-6 py-4 hidden text-center sm:block">Type</div>
+                                <div class="w-28 px-6 py-4 hidden text-center sm:block">Size</div>
+                                <div class="w-32 px-6 py-4 hidden text-center sm:block">Date</div>
+                                <div class="w-32 px-6 py-4 text-center">Download</div>
                             </div>
 
                             @php
@@ -128,8 +131,58 @@
                                         {{ $title }}
                                     </div>
 
+                                    <!-- Type -->
+                                    <div class="w-20 whitespace-nowrap flex justify-center">
+                                        <span class="block sm:hidden pr-2">
+                                            Type: 
+                                        </span>
+                                        <div class="flex justify-center">
+                                        @if ($download->type === 'FHD' || $download->type === 'FHDi')
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                                                class="text-sky-500" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                class="icon icon-tabler icons-tabler-outline icon-tabler-badge-hd">
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                                <path
+                                                    d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                                                <path d="M14 9v6h1a2 2 0 0 0 2 -2v-2a2 2 0 0 0 -2 -2h-1z" />
+                                                <path d="M7 15v-6" />
+                                                <path d="M10 15v-6" />
+                                                <path d="M7 12h3" />
+                                            </svg>
+                                        @else
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
+                                                class="text-rose-600" viewBox="0 0 24 24" fill="none"
+                                                stroke="currentColor" stroke-width="2" stroke-linecap="round"
+                                                stroke-linejoin="round"
+                                                class="icon icon-tabler icons-tabler-outline icon-tabler-badge-4k">
+                                                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
+                                                <path
+                                                    d="M3 5m0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v10a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z" />
+                                                <path d="M7 9v2a1 1 0 0 0 1 1h1" />
+                                                <path d="M10 9v6" />
+                                                <path d="M14 9v6" />
+                                                <path d="M17 9l-2 3l2 3" />
+                                                <path d="M15 12h-1" />
+                                            </svg>
+                                        @endif
+
+                                        @if ($download->type === 'FHDi' || $download->type === 'UHDi')
+                                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="text-yellow-600"
+                                                viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+                                                stroke-linecap="round" stroke-linejoin="round">
+                                                <path
+                                                    d="M9.225 18.412a1.595 1.595 0 0 1 -1.225 .588c-.468 0 -.914 -.214 -1.225 -.588l-4.361 -5.248a1.844 1.844 0 0 1 0 -2.328l4.361 -5.248a1.595 1.595 0 0 1 1.225 -.588c.468 0 .914 .214 1.225 .588l4.361 5.248a1.844 1.844 0 0 1 0 2.328l-4.361 5.248z" />
+                                                <path d="M17 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836" />
+                                                <path d="M13 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836" />
+                                            </svg>
+                                        @endif
+                                        </div>
+                                    </div>
+
                                     <!-- Size -->
-                                    <div class="w-28 whitespace-nowrap flex">
+                                    <div class="w-28 whitespace-nowrap flex justify-center">
                                         <span class="block sm:hidden">
                                             Size:
                                         </span>
@@ -137,7 +190,7 @@
                                     </div>
 
                                     <!-- Date -->
-                                    <div class="w-32 whitespace-nowrap flex">
+                                    <div class="w-32 whitespace-nowrap flex justify-center">
                                         <span class="block sm:hidden">
                                             Date:
                                         </span>
@@ -145,7 +198,7 @@
                                     </div>
 
                                     <!-- Download -->
-                                    <div class="w-32 whitespace-nowrap">
+                                    <div class="w-32 whitespace-nowrap flex justify-center">
                                         @php
                                             if (in_array($download->type, ['FHD', 'FHDi'])) {
                                                 $downloadURL =