From 2da58cfbd036bda0f2f4e765fdfb64a45e832867 Mon Sep 17 00:00:00 2001
From: Lars Behrends <larsbehrends@yahoo.de>
Date: Fri, 7 Nov 2025 13:42:00 +0100
Subject: [PATCH] design?

---
 resources/views/games/index.twig   | 28 +++++------------
 resources/views/movies/index.twig  | 28 +++++------------
 resources/views/tvshows/index.twig | 50 ++++++++++++++----------------
 3 files changed, 38 insertions(+), 68 deletions(-)

diff --git a/resources/views/games/index.twig b/resources/views/games/index.twig
index e6453f6..b98acc2 100644
--- a/resources/views/games/index.twig
+++ b/resources/views/games/index.twig
@@ -11,29 +11,15 @@
     {% for platform in filters.platforms %}
     <input type="hidden" name="platforms[]" value="{{ platform }}">
     {% endfor %}
-    <div class="relative">
-        <input
-            type="text"
-            name="search"
-            value="{{ search }}"
-            placeholder="Search games..."
-            class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 w-64 bg-gray-800 text-white placeholder-gray-400"
-        >
-        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-        </svg>
-    </div>
-    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-        Search
-    </button>
 </form>
 
-<!-- View mode switcher -->
-<div class="flex gap-1" role="group">
+
+<!-- Enhanced View mode switcher -->
+<div class="flex gap-1 bg-gray-100 rounded-lg p-1" role="group">
     {% for mode in view_modes %}
     <a
-        href="?view={{ mode }}&sort={{ sort }}{% if search %}&search={{ search }}{% endif %}{% if pagination.per_page != 24 %}&per_page={{ pagination.per_page }}{% endif %}{% for genre in filters.genres %}&genres[]={{ genre }}{% endfor %}{% for platform in filters.platforms %}&platforms[]={{ platform }}{% endfor %}"
-        class="inline-flex items-center px-3 py-2 border border-gray-300 bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 {{ view_mode == mode ? 'bg-blue-600 border-blue-500 text-white' : '' }}"
+        href="?view={{ mode }}{% if search %}&search={{ search }}{% endif %}{% if pagination.per_page != 24 %}&per_page={{ pagination.per_page }}{% endif %}{% for genre in filters.genres %}&genres[]={{ genre }}{% endfor %}{% for year in filters.years %}&years[]={{ year }}{% endfor %}"
+        class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 {{ view_mode == mode ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200' }}"
         title="{{ mode|title }} View"
     >
         {% if mode == 'grid' %}
@@ -57,8 +43,8 @@
 </div>
 
 <!-- Sort dropdown -->
-<div class="relative" x-data="{ open: false }">
-    <button @click="open = !open" class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+<div class="relative gap-1 bg-gray-100 rounded-lg p-1" x-data="{ open: false }">
+    <button @click="open = !open" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 {{ view_mode == mode ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200' }}">
         <svg class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h14M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/>
         </svg>
diff --git a/resources/views/movies/index.twig b/resources/views/movies/index.twig
index e7301da..682e7b2 100644
--- a/resources/views/movies/index.twig
+++ b/resources/views/movies/index.twig
@@ -11,29 +11,15 @@
     {% for director in filters.directors %}
     <input type="hidden" name="directors[]" value="{{ director }}">
     {% endfor %}
-    <div class="relative">
-        <input
-            type="text"
-            name="search"
-            value="{{ search }}"
-            placeholder="Search movies..."
-            class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 w-64 bg-gray-800 text-white placeholder-gray-400"
-        >
-        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-        </svg>
-    </div>
-    <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-        Search
-    </button>
 </form>
 
-<!-- View mode switcher -->
-<div class="flex gap-1" role="group">
+
+<!-- Enhanced View mode switcher -->
+<div class="flex gap-1 bg-gray-100 rounded-lg p-1" role="group">
     {% for mode in view_modes %}
     <a
-        href="?view={{ mode }}&sort={{ sort }}{% if search %}&search={{ search }}{% endif %}{% if pagination.per_page != 24 %}&per_page={{ pagination.per_page }}{% endif %}{% for genre in filters.genres %}&genres[]={{ genre }}{% endfor %}{% for director in filters.directors %}&directors[]={{ director }}{% endfor %}"
-        class="inline-flex items-center px-3 py-2 border border-gray-300 bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 {{ view_mode == mode ? 'bg-blue-600 border-blue-500 text-white' : '' }}"
+        href="?view={{ mode }}{% if search %}&search={{ search }}{% endif %}{% if pagination.per_page != 24 %}&per_page={{ pagination.per_page }}{% endif %}{% for genre in filters.genres %}&genres[]={{ genre }}{% endfor %}{% for year in filters.years %}&years[]={{ year }}{% endfor %}"
+        class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 {{ view_mode == mode ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200' }}"
         title="{{ mode|title }} View"
     >
         {% if mode == 'grid' %}
@@ -57,8 +43,8 @@
 </div>
 
 <!-- Sort dropdown -->
-<div class="relative" x-data="{ open: false }">
-    <button @click="open = !open" class="inline-flex items-center px-3 py-2 border border-gray-300 rounded-md bg-gray-800 text-gray-300 hover:bg-gray-700 hover:text-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
+<div class="relative gap-1 bg-gray-100 rounded-lg p-1" x-data="{ open: false }">
+    <button @click="open = !open" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 {{ view_mode == mode ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200' }}">
         <svg class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h14M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/>
         </svg>
diff --git a/resources/views/tvshows/index.twig b/resources/views/tvshows/index.twig
index 849b927..79e112d 100644
--- a/resources/views/tvshows/index.twig
+++ b/resources/views/tvshows/index.twig
@@ -11,32 +11,6 @@
     {% for year in filters.years %}
     <input type="hidden" name="years[]" value="{{ year }}">
     {% endfor %}
-    <div class="relative flex-1 max-w-md">
-        <input
-            type="text"
-            name="search"
-            value="{{ search }}"
-            placeholder="Search TV shows... (Ctrl+/)"
-            class="w-full pl-10 pr-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 bg-white text-gray-900 placeholder-gray-500 shadow-sm transition-colors"
-            autocomplete="off"
-        >
-        <svg class="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-        </svg>
-        {% if search %}
-        <button type="button" onclick="clearSearch()" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
-            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-            </svg>
-        </button>
-        {% endif %}
-    </div>
-    <button type="submit" class="inline-flex items-center px-4 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors shadow-sm">
-        <svg class="w-4 h-4 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-        </svg>
-        Search
-    </button>
 </form>
 
 <!-- Enhanced View mode switcher -->
@@ -66,6 +40,30 @@
     </a>
     {% endfor %}
 </div>
+<!-- Sort dropdown -->
+<div class="relative gap-1 bg-gray-100 rounded-lg p-1" x-data="{ open: false }">
+    <button @click="open = !open" class="inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-all duration-200 {{ view_mode == mode ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900 hover:bg-gray-200' }}">
+        <svg class="mr-1 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4h14M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12"/>
+        </svg>
+        <span class="hidden sm:inline">Sort</span>
+    </button>
+    <div x-show="open" @click.away="open = false" class="absolute right-0 z-50 mt-2 w-56 bg-white rounded-md shadow-lg ring-1 ring-black ring-opacity-5">
+        <div class="py-1">
+            {% for key, label in sort_options %}
+            <a class="flex items-center justify-between px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 {{ sort == key ? 'bg-gray-50' : '' }}"
+               href="?sort={{ key }}&view={{ view_mode }}{% if search %}&search={{ search }}{% endif %}{% if pagination.per_page != 24 %}&per_page={{ pagination.per_page }}{% endif %}{% for genre in filters.genres %}&genres[]={{ genre }}{% endfor %}{% for director in filters.directors %}&directors[]={{ director }}{% endfor %}">
+                {{ label }}
+                {% if sort == key %}
+                <svg class="h-4 w-4 text-blue-600" fill="currentColor" viewBox="0 0 16 16">
+                    <path d="M12.5 15a.5.5 0 0 1-.5-.5v-13a.5.5 0 0 1 1 0v13a.5.5 0 0 1-.5.5zM10 8a.5.5 0 0 1-.5.5H3.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L3.707 7.5H9.5a.5.5 0 0 1 .5.5z"/>
+                </svg>
+                {% endif %}
+            </a>
+            {% endfor %}
+        </div>
+    </div>
+</div>
 {% endblock %}
 
 {% block sidebar %}