frontend/src/features/lists/SharedListsView.tsx

@@ -81,9 +81,6 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
   const [newListTitle, setNewListTitle] = useState('');
   const [newListIcon, setNewListIcon] = useState('🛒');
 
-  const [showNewSpaceModal, setShowNewSpaceModal] = useState(false);
-  const [newSpaceName, setNewSpaceName] = useState('');
-
   const [showShareModal, setShowShareModal] = useState(false);
   const [collaborators, setCollaborators] = useState<User[]>([]);
   const [teams, setTeams] = useState<Team[]>([]);
@@ -98,7 +95,15 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
   const wsRef = useRef<WebSocket | null>(null);
 
   const loadSpaces = async () => {
-    const sp = await api.getSpaces();
+    let sp = await api.getSpaces();
+    if (sp.length === 0) {
+      try {
+        const created = await api.createSpace('Meine Listen', '🛒', 'Persönliche und geteilte Einkaufslisten');
+        sp = [created];
+      } catch {
+        // fallback
+      }
+    }
     setSpaces(sp);
     if (sp.length > 0) {
       if (!activeSpace) {
@@ -283,15 +288,17 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
     onRefreshGlobal();
   };
 
-  const handleCreateSpace = async (e: React.FormEvent) => {
-    e.preventDefault();
-    if (!newSpaceName.trim()) return;
-    const created = await api.createSpace(newSpaceName.trim(), '🏡', 'Geteilter Familien- & Team-Bereich');
-    setNewSpaceName('');
-    setShowNewSpaceModal(false);
-    const sp = await api.getSpaces();
-    setSpaces(sp);
-    setActiveSpace(created);
+  const handleDeleteList = async (listId: string) => {
+    if (!window.confirm('Diese Liste wirklich löschen?')) return;
+    try {
+      await api.deleteList(listId);
+      if (activeSpace) {
+        await loadListsForSpace(activeSpace.id);
+      }
+      onRefreshGlobal();
+    } catch (err: any) {
+      alert(err.message || 'Liste konnte nicht gelöscht werden');
+    }
   };
 
   const openShareModal = async () => {
@@ -430,59 +437,6 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
 
   return (
     <div className="w-full space-y-3">
-      {/* Spaces Bar */}
-      <div className="flex items-center justify-between gap-2 text-xs">
-        <div className="flex items-center gap-1.5 overflow-x-auto">
-          <span className="text-muted text-[11px] font-medium mr-1">Bereich:</span>
-          {spaces.map((sp) => (
-            <button
-              key={sp.id}
-              onClick={() => setActiveSpace(sp)}
-              className={`h-7 px-2.5 text-xs rounded-btn font-medium flex items-center gap-1 transition-colors border ${
-                activeSpace?.id === sp.id
-                  ? 'bg-accent/15 border-accent/40 text-accent font-semibold'
-                  : 'bg-canvas border-border text-muted hover:text-main hover:bg-panel'
-              }`}
-            >
-              <span>{sp.icon}</span>
-              <span>{sp.name}</span>
-            </button>
-          ))}
-
-          <button
-            onClick={() => setShowNewSpaceModal((prev) => !prev)}
-            className="h-7 px-2 text-xs text-muted hover:text-main hover:bg-panel rounded-btn flex items-center gap-1 transition-colors border border-dashed border-border"
-            title="Neuen Bereich (Space) anlegen"
-          >
-            <Plus className="w-3 h-3 text-accent" />
-            <span>Space</span>
-          </button>
-        </div>
-      </div>
-
-      {/* Create Space Modal */}
-      {showNewSpaceModal && (
-        <form
-          onSubmit={handleCreateSpace}
-          className="p-2 panel-surface flex items-center gap-2"
-        >
-          <input
-            type="text"
-            value={newSpaceName}
-            onChange={(e) => setNewSpaceName(e.target.value)}
-            placeholder="Name des neuen Familien-/Team-Spaces (z. B. Urlaub 2026)…"
-            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"
-          >
-            Space anlegen
-          </button>
-        </form>
-      )}
-
       {/* Top Header: List Tabs & Actions */}
       <div className="flex flex-wrap items-center justify-between gap-2 border-b border-border pb-2">
         {/* List Tabs */}
@@ -491,8 +445,8 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
             const openCount = lst.items.filter((i) => !i.isCompleted).length;
             const isSelected = activeList?.id === lst.id;
             return (
+              <div key={lst.id} className="relative group flex items-center">
                 <button
-                key={lst.id}
                   onClick={() => setActiveListId(lst.id)}
                   className={`h-8 px-3 text-xs font-medium border rounded-btn flex items-center gap-1.5 transition-colors ${
                     isSelected
@@ -506,6 +460,16 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                     <span className="ml-1 badge-neutral">{openCount}</span>
                   )}
                 </button>
+                {isSelected && lists.length > 1 && (
+                  <button
+                    onClick={() => handleDeleteList(lst.id)}
+                    title="Liste löschen"
+                    className="h-8 px-1.5 bg-panel border-y border-r border-accent text-faint hover:text-status-err"
+                  >
+                    <X className="w-3 h-3" />
+                  </button>
+                )}
+              </div>
             );
           })}