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
-          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="Titel der Liste (z. B. Baumarkt, Drogerie, Camping)…"
-            className="flex-1 h-9 px-3 input-field text-sm"
+                    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="submit"
-            className="btn-primary h-9 px-4 text-xs sm:text-sm"
+                  type="button"
+                  onClick={() => setShowNewListModal(false)}
+                  className="btn-action h-7 px-3 text-xs"
                 >
-            Liste erstellen
+                  Abbrechen
                 </button>
+                <button type="submit" className="btn-primary h-7 px-3 text-xs">
+                  Erstellen
+                </button>
+              </div>
             </form>
+          </div>
+        </div>
       )}
 
       {/* Active Shared List View */}