feat(lists): use unified modal for creating new shopping lists

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
+        <div className="fixed inset-0 !m-0 modal-overlay z-50 flex items-center justify-center p-4">
-          onSubmit={handleCreateList}
+          <div className="w-full max-w-sm panel-surface shadow-panel p-4 space-y-3">
-          className="p-2 panel-surface flex flex-wrap items-center gap-2"
+            <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">
-          <div className="flex items-center gap-1.5">
+                <ShoppingCart className="w-4 h-4 text-accent" />
-            {['🛒', '🏔️', '🍕', '🎉', '🧰', '🎁'].map((ic) => (
+                <span>Neue Einkaufsliste erstellen</span>
+              </h3>
               <button
-                key={ic}
                 type="button"
-                onClick={() => setNewListIcon(ic)}
+                onClick={() => setShowNewListModal(false)}
-                className={`w-9 h-9 flex items-center justify-center rounded-btn transition-colors ${
+                className="text-muted hover:text-main"
-                  newListIcon === ic
-                    ? 'bg-accent/20 border border-accent text-accent'
-                    : 'bg-canvas hover:bg-panel-elevated border border-border'
-                }`}
               >
-                {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
+        </div>
-            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>
       )}
 
       {/* Active Shared List View */}