From fd0122cb3f0d19bc99db8d885b88ffba9bacfbdd Mon Sep 17 00:00:00 2001
From: Felix Zett <fezett@gmail.com>
Date: Tue, 16 Sep 2025 21:54:12 +0200
Subject: [PATCH] feat: enhance UI for ItemsPage with improved input styles and
 tag filter layout

---
 frontend/src/pages/ItemsPage.tsx | 58 ++++++++++++++++++--------------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/frontend/src/pages/ItemsPage.tsx b/frontend/src/pages/ItemsPage.tsx
index 7ed2362..9e75258 100644
--- a/frontend/src/pages/ItemsPage.tsx
+++ b/frontend/src/pages/ItemsPage.tsx
@@ -130,27 +130,31 @@ export default function ItemsPage() {
     <div className="p-2">
       <h1 className="text-2xl font-bold mb-4">Items</h1>
 
-      <div className="mb-4 flex items-center gap-2">
+      {/* Suche */}
+      <div className="mb-4">
         <input
           type="text"
           placeholder="🔍 Suchen..."
           value={filterText}
           onChange={(e) => setFilterText(e.target.value)}
-          className="border rounded px-2 py-1 w-full"
+          className="border rounded px-3 py-2 w-full shadow focus:outline-none focus:ring-2 focus:ring-blue-300"
         />
       </div>
 
-      <TagFilter
-        tags={tags}
-        selected={selectedTags}
-        onToggle={handleTagToggle}
-      />
+      {/* Tag-Filter */}
+      <div className="mb-4 p-2 rounded bg-blue-50 border border-blue-200 shadow-sm">
+        <TagFilter
+          tags={tags}
+          selected={selectedTags}
+          onToggle={handleTagToggle}
+        />
+      </div>
 
       {/* Neue ItemRow als erste Zeile */}
       <ul className="divide-y">
-        <li className="flex flex-wrap items-center gap-2 py-1 border-b bg-gray-50">
+        <li className="flex flex-wrap items-center gap-2 py-2 border-b bg-gray-50 rounded shadow-sm">
           <input
-            className="border rounded px-1 py-0.5 flex-1 min-w-[120px]"
+            className="border rounded px-2 py-1 flex-1 min-w-[120px] shadow focus:outline-none focus:ring-2 focus:ring-green-300"
             value={newItemName}
             onChange={e => setNewItemName(e.target.value)}
             placeholder="Neues Item..."
@@ -161,7 +165,7 @@ export default function ItemsPage() {
           />
           {/* Trip-Auswahl */}
           <select
-            className="border rounded px-1 py-0.5"
+            className="border rounded px-2 py-1 shadow"
             value={newItemTripId}
             onChange={e => {
               setNewItemTripId(e.target.value);
@@ -176,20 +180,24 @@ export default function ItemsPage() {
             ))}
           </select>
           {/* Tags-Auswahl, nur wenn kein Trip gewählt */}
-          {!newItemTripId && tags.map((tag) => (
-            <span
-              key={tag.id}
-              className={
-                `${getTagColor(tag.id).bg} text-sm rounded px-1 py-0.5 flex items-center cursor-pointer font-medium` +
-                (newItemTags.includes(tag.id) ? " ring-2 ring-blue-400 font-bold" : "")
-              }
-              onClick={() => toggleNewItemTag(tag.id)}
-              title={tag.mandatory ? "Pflicht-Tag (mandatory)" : ""}
-            >
-              #{tag.name}
-              {tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>}
-            </span>
-          ))}
+          {!newItemTripId && (
+            <div className="flex flex-wrap gap-1 p-1 bg-white rounded border border-gray-200">
+              {tags.map((tag) => (
+                <span
+                  key={tag.id}
+                  className={
+                    `${getTagColor(tag.id).bg} text-sm rounded px-1 py-0.5 flex items-center cursor-pointer font-medium` +
+                    (newItemTags.includes(tag.id) ? " ring-2 ring-blue-400 font-bold" : "")
+                  }
+                  onClick={() => toggleNewItemTag(tag.id)}
+                  title={tag.mandatory ? "Pflicht-Tag (mandatory)" : ""}
+                >
+                  #{tag.name}
+                  {tag.mandatory && <span className="text-red-500 font-bold ml-0.5">!</span>}
+                </span>
+              ))}
+            </div>
+          )}
           {/* Hinweis, falls Trip gewählt */}
           {newItemTripId && (
             <span className="text-xs text-gray-500 italic">
@@ -197,7 +205,7 @@ export default function ItemsPage() {
             </span>
           )}
           <button
-            className="text-xs text-green-600 bg-green-100 rounded px-2 py-1 ml-auto"
+            className="text-xs text-green-600 bg-green-100 rounded px-4 py-2 ml-auto shadow"
             onClick={handleAddItem}
             disabled={adding || !newItemName.trim()}
             style={{ minWidth: 90 }}