From 2ecf71cc42bfa7980c9f16c23233e854f068f2c7 Mon Sep 17 00:00:00 2001
From: Sandro <mail@sandrodach.de>
Date: Tue, 27 Oct 2026 17:33:20 +0100
Subject: [PATCH] feat(lists): use unified modal for creating new shopping
 lists

---
 .../src/features/lists/SharedListsView.tsx    | 81 ++++++++++++-------
 1 file changed, 51 insertions(+), 30 deletions(-)

diff --git a/frontend/src/features/lists/SharedListsView.tsx b/frontend/src/features/lists/SharedListsView.tsx
index 49f9484..da5bb75 100644
--- a/frontend/src/features/lists/SharedListsView.tsx
+++ b/frontend/src/features/lists/SharedListsView.tsx
@@ -8,6 +8,7 @@ import {
   Sparkles,
   X,
   Hash,
+  ShoppingCart,
 } from 'lucide-react';
 import { ListItem, SharedList, ListShare, Team, User, WSMessage } from '../../lib/types';
 import { api, buildWebSocketURL, triggerHaptic, createRealtimeConnection, RealtimeTransport } from '../../lib/api';
@@ -953,41 +954,61 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
       </div>
 
       {showNewListModal && (
-        <form
-          onSubmit={handleCreateList}
-          className="p-2 panel-surface flex flex-wrap items-center gap-2"
-        >
-          <div className="flex items-center gap-1.5">
-            {['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
+        <div className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-4">
+          <div className="w-full max-w-sm panel-surface shadow-panel p-4 space-y-3">
+            <div className="flex items-center justify-between border-b border-border pb-2">
+              <h3 className="text-sm font-semibold text-main flex items-center gap-1.5">
+                <ShoppingCart className="w-4 h-4 text-accent" />
+                <span>Neue Einkaufsliste erstellen</span>
+              </h3>
               <button
-                key={ic}
                 type="button"
-                onClick={() => setNewListIcon(ic)}
-                className={`w-9 h-9 flex items-center justify-center rounded-btn transition-colors ${
-                  newListIcon === ic
-                    ? 'bg-accent/20 border border-accent text-accent'
-                    : 'bg-canvas hover:bg-panel-elevated border border-border'
-                }`}
+                onClick={() => setShowNewListModal(false)}
+                className="text-muted hover:text-main"
               >
-                {ic}
+                <X className="w-4 h-4" />
               </button>
-            ))}
+            </div>
+
+            <form onSubmit={handleCreateList} className="space-y-3">
+              <div>
+                <label className="block text-xs text-muted mb-1">Titel der Liste</label>
+                <div className="flex items-center gap-1.5">
+                  <input
+                    type="text"
+                    value={newListIcon}
+                    onChange={(e) => setNewListIcon(e.target.value)}
+                    maxLength={2}
+                    className="w-10 h-8 text-center input-field text-sm"
+                    title="Icon (Emoji)"
+                  />
+                  <input
+                    type="text"
+                    value={newListTitle}
+                    onChange={(e) => setNewListTitle(e.target.value)}
+                    placeholder="z.B. Supermarkt, Baumarkt, Drogerie"
+                    autoFocus
+                    required
+                    className="flex-1 h-8 input-field px-2.5 text-xs"
+                  />
+                </div>
+              </div>
+
+              <div className="flex items-center justify-end gap-2 pt-2 border-t border-border">
+                <button
+                  type="button"
+                  onClick={() => setShowNewListModal(false)}
+                  className="btn-action h-7 px-3 text-xs"
+                >
+                  Abbrechen
+                </button>
+                <button type="submit" className="btn-primary h-7 px-3 text-xs">
+                  Erstellen
+                </button>
+              </div>
+            </form>
           </div>
-          <input
-            type="text"
-            value={newListTitle}
-            onChange={(e) => setNewListTitle(e.target.value)}
-            placeholder="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
-            className="flex-1 h-9 px-3 input-field text-sm"
-            autoFocus
-          />
-          <button
-            type="submit"
-            className="btn-primary h-9 px-4 text-xs sm:text-sm"
-          >
-            Liste erstellen
-          </button>
-        </form>
+        </div>
       )}
 
       {/* Active Shared List View */}