Some changes from chat gpt

src/main.py

@@ -1,6 +1,7 @@
 import uuid
 from fastapi import Depends, FastAPI, Request, Response
-from fastapi.responses import HTMLResponse
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 from wishlist import (
     read_all_wishlists,
@@ -26,15 +27,30 @@ async def update_reservation(
     ),
 ):
     global wishlist_cache
+
+    if reservation_request.name.strip() == "":
+        return Response(status_code=400)
+
     wishlist_dir: str = wishlist_cache[reservation_request.wishlist_id].directory
+    reserved = None
     if reservation_request.reserved:
         new_reservation = ItemReservation()
         new_reservation.name = reservation_request.name
         new_reservation.item_id = str(reservation_request.item_id)
         add_reservation(wishlist_dir, new_reservation)
+        reserved = True
     else:
+        reserved = False
         remove_reservation(wishlist_dir, reservation_request.item_id)
 
+    return JSONResponse(
+        content={
+            "item_id": str(reservation_request.item_id),
+            "wishlist_id": str(reservation_request.wishlist_id),
+            "reserved": reserved,
+        }
+    )
+
 
 @app.get("/{wishlist_id}/view", response_class=HTMLResponse)
 async def show_wishlist(request: Request, wishlist_id: uuid.UUID):

src/templates/components/wishlist_item.html

@@ -1,25 +1,29 @@
 <!-- item.html -->
-<li class="{{ 'reserved-item' if item.reserved else '' }}">
+<div class="item-card {{ 'reserved' if item.reserved else '' }}">
-    <div>
+    <div class="item-header" onclick="toggleDescription(this)">
-        <h2>{{ item.name }}{% if item.reservation %} (Reserved){% endif %}</h2>
+        <h2>{{ item.name }}{% if item.reserved %} (Reserved){% endif %}</h2>
-        <p>{{ item.description }}</p>
+        <img src="{{ item.image }}" alt="{{ item.name }}">
         <p class="price">€{{ "%.2f"|format(item.price) }}</p>
-        <a href="{{ item.shop }}" target="_blank">Shop Link</a>
+    </div>
 
+    <div class="item-footer">
         <!-- Reserve or Unreserve Form -->
-        <form method="POST" action="/reservation/update">
+        <form method="POST" action="/reserve-item">
             <input type="hidden" name="wishlist_id" value="{{ wishlist.config.id }}">
             <input type="hidden" name="item_id" value="{{ item.id }}">
-            <input type="hidden" name="reserved" value="{{ 'false' if item.reservation else 'true' }}">
+            <input type="hidden" name="reserved" value="{{ 'false' if item.reserved else 'true' }}">
             {% if item.reserved %}
-                <input type="text" name="name">
+                <input type="text" name="reserver_name" value="{{ item.reserver_name }}" readonly>
                 <button type="submit" class="reserve-button">Unreserve</button>
             {% else %}
-                <input type="text" name="name" placeholder="Your name" required>
+                <input type="text" name="reserver_name" placeholder="Your name" required>
                 <button type="submit" class="reserve-button">Reserve</button>
             {% endif %}
         </form>
     </div>
-    <img src="{{ item.image }}" alt="{{ item.name }}">
+
-</li>
+    <div class="item-description hide">
-<hr>
+        <p>{{ item.description }}</p>
+        <a href="{{ item.shop }}" target="_blank">Shop Link</a>
+    </div>
+</div>

src/templates/wishlist_view.html

@@ -10,149 +10,85 @@
             background-color: #1a1a1a;
             color: #aaa;
             font-family: "Fira Code", "Fira Mono", "Roboto Mono", "Lucida Console", "Courier New", monospace;
-            font-size: 16px;
-            line-height: 1.5;
             margin: 0;
-            padding: 0;
-        }
-
-        h1, h3 {
-            text-align: center;
-            color: #fff;
-        }
-
-        ul {
-            list-style: none;
-            padding: 0;
-            margin: 20px auto;
-            max-width: 800px;
-        }
-
-        li {
-            background-color: #2c2c2c;
-            margin: 10px 0;
             padding: 20px;
-            border-radius: 8px;
+        }
+
+        h1 {
+            text-align: center;
+        }
+
+        .item-grid {
             display: flex;
-            justify-content: space-between;
+            flex-wrap: wrap;
+            justify-content: space-around;
+        }
+
+        .item-card {
+            background: #222;
+            border-radius: 8px;
+            margin: 10px;
+            padding: 15px;
+            width: 250px;
+            transition: all 0.3s ease;
+            position: relative;
+            overflow: hidden;
+            cursor: pointer;
+        }
+
+        .item-card:hover {
+            background-color: #333;
+            transform: scale(1.05);
+        }
+
+        .item-header {
+            display: flex;
+            flex-direction: column;
             align-items: center;
         }
 
-        h2 {
+        .item-description {
-            margin: 0;
+            max-height: 0;
-            color: #fff;
+            overflow: hidden;
+            transition: max-height 0.3s ease;
         }
 
-        p {
+        .item-description.show {
-            color: #888;
+            max-height: 200px; /* Adjust based on expected content */
-            font-size: 14px;
         }
 
-        a {
+        .item-footer {
-            color: #3498db;
+            margin-top: 10px;
-            text-decoration: none;
-            transition: background-color 0.2s;
-        }
-
-        a:hover {
-            background-color: #444;
-            padding: 2px 5px;
-            border-radius: 3px;
-        }
-
-        .price {
-            font-weight: bold;
-            color: #27ae60;
-        }
-
-        img {
-            max-width: 100px;
-            border-radius: 8px;
         }
 
         .reserve-button {
+            padding: 5px 10px;
+            border: none;
             background-color: #444;
             color: white;
-            border: none;
-            padding: 8px 15px;
             cursor: pointer;
-            border-radius: 5px;
+            transition: background-color 0.2s;
-            transition: background-color 0.3s;
         }
 
         .reserve-button:hover {
-            background-color: #666;
+            background-color: #555;
         }
-
-        hr {
-            border: 0;
-            border-top: 1px solid #333;
-        }
-
-        /* Collapsed reserved items */
-        .reserved-item {
-            background-color: #444;
-        }
-
-        input[type="text"] {
-            padding: 8px;
-            background-color: #333;
-            border: 1px solid #555;
-            color: #ccc;
-            border-radius: 4px;
-        }
-
-        form {
-            display: flex;
-            flex-direction: column;
-            gap: 10px;
-        }
-
-        /* Collapsible section */
-        .collapsible {
-            background-color: #2c2c2c;
-            padding: 15px;
-            text-align: center;
-            cursor: pointer;
-            border-radius: 8px;
-        }
-
-        .collapsible:hover {
-            background-color: #333;
-        }
-
-        #reserved-items {
-            display: none;
-        }
-
     </style>
 </head>
 
 <body>
     <h1>{{ wishlist.config.title }}</h1>
 
-    <ul>
+    <div class="item-grid">
-        {% for item_id, item in wishlist.items.items() if not item.reservation %}
+        {% for item_id, item in wishlist.items.items() %}
             {% include 'components/wishlist_item.html' %}
         {% endfor %}
-    </ul>
+    </div>
-
-    <!-- Collapsible Reserved Items -->
-    <div class="collapsible" onclick="toggleReservedItems()">Show Reserved Items</div>
-    <ul id="reserved-items">
-        {% for item_id, item in wishlist.items.items() if item.reservation %}
-            {% include 'components/wishlist_item.html' %}
-        {% endfor %}
-    </ul>
 
     <script>
-        function toggleReservedItems() {
+        function toggleDescription(header) {
-            const reservedItems = document.getElementById('reserved-items');
+            const description = header.nextElementSibling;
-            if (reservedItems.style.display === 'none' || reservedItems.style.display === '') {
+            description.classList.toggle('show');
-                reservedItems.style.display = 'block';
-            } else {
-                reservedItems.style.display = 'none';
-            }
         }
     </script>
 </body>