fix(lists): add items offline via the outbox; recognisable input field

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

frontend/src/features/lists/SharedListsView.tsx

@@ -7,10 +7,12 @@ import {
   Sparkles,
   X,
   ShoppingCart,
+  CloudOff,
 } from 'lucide-react';
 import { ListItem, SharedList, Team, User, WSMessage } from '../../lib/types';
 import { api, triggerHaptic, createRealtimeConnection, RealtimeTransport } from '../../lib/api';
 import { readViewSession, writeViewSession } from '../../lib/viewSession';
+import { OFFLINE_ITEM_PREFIX, pendingListItems } from '../../lib/offline';
 import { UnifiedShareModal } from '../../components/UnifiedShareModal';
 import { AvatarStack, AvatarPerson } from '../../components/AvatarStack';
 import { CountBadge } from '../../components/CountBadge';
@@ -138,9 +140,14 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
           // fallback
         }
       }
+      // Entries added offline and not sent yet stay visible (also after a reload without connection)
+      const pending = pendingListItems();
       const deduplicated = all.map((l) => ({
         ...l,
-        items: deduplicateItems(l.items || []),
+        items: deduplicateItems([
+          ...pending.filter((p) => p.listId === l.id).map((p) => ({ ...p, isCompleted: false, sortOrder: 0 }) as ListItem),
+          ...(l.items || []),
+        ]),
       }));
       setLists(deduplicated);
       if (initialListId && deduplicated.some((l) => l.id === initialListId)) {
@@ -268,6 +275,22 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
     };
   }, [activeList?.id]);
 
+  // Back online: once the outbox has sent the entries added offline, show the server's version
+  const listsRef = useRef(lists);
+  listsRef.current = lists;
+  const loadListsRef = useRef(loadLists);
+  loadListsRef.current = loadLists;
+  useEffect(() => {
+    const onOutbox = () => {
+      const shown = listsRef.current.some((l) => l.items.some((i) => i.id.startsWith(OFFLINE_ITEM_PREFIX)));
+      const queued = new Set(pendingListItems().map((p) => p.id));
+      const sent = listsRef.current.some((l) => l.items.some((i) => i.id.startsWith(OFFLINE_ITEM_PREFIX) && !queued.has(i.id)));
+      if (shown && sent) void loadListsRef.current();
+    };
+    window.addEventListener('mindsift:outbox-changed', onOutbox);
+    return () => window.removeEventListener('mindsift:outbox-changed', onOutbox);
+  }, []);
+
   useEffect(() => {
     const handleGlobalWs = (e: any) => {
       const msg = e.detail;
@@ -1087,10 +1110,11 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
           {/* Quick-Add Form */}
           <form
             onSubmit={handleAddItem}
-            className="flex flex-col sm:flex-row items-center gap-2 panel-surface p-2 sm:p-1.5 relative"
+            className="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 panel-surface p-2 relative"
           >
-            <div className="relative flex items-center gap-2 flex-1 w-full px-1.5">
-              <Plus className="w-4 h-4 text-accent flex-shrink-0" />
+            {/* The item is the main field: a real input like the quantity next to it, with the + inside */}
+            <div className="relative flex-1 w-full min-w-0">
+              <Plus className="w-4 h-4 text-accent absolute left-3 top-1/2 -translate-y-1/2 pointer-events-none" />
               <input
                 ref={inputRef}
                 type="text"
@@ -1112,9 +1136,9 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 onBlur={() => {
                   setTimeout(() => setShowSuggestions(false), 200);
                 }}
-                placeholder={`Eintrag zu "${activeList.title}" hinzufügen (z. B. Hafermilch #Kühlregal)…`}
+                placeholder={`Was soll auf „${activeList.title}“? (z. B. Hafermilch #Kühlregal)`}
                 // 16px on phones: iOS zooms into smaller fields and the layout jumps under the keyboard
-                className="flex-1 bg-transparent py-1.5 sm:py-1 text-base sm:text-sm text-main placeholder-faint focus:outline-none"
+                className="w-full h-11 sm:h-9 pl-9 pr-3 input-field text-base sm:text-sm"
               />
 
               {/* Hashtag Autocomplete Suggestions Dropdown */}
@@ -1152,19 +1176,20 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                 </div>
               )}
             </div>
-            <div className="flex items-center gap-1.5 w-full sm:w-auto justify-end px-1 sm:px-0">
+            <div className="flex items-center gap-2 w-full sm:w-auto">
               <input
                 type="text"
                 inputMode="decimal"
                 value={newItemQty}
                 onChange={(e) => setNewItemQty(e.target.value.replace(/[^0-9.,xX]/g, ''))}
-                placeholder="Menge (z.B. 2)"
-                className="flex-1 sm:flex-none sm:w-28 h-11 sm:h-7 px-2.5 sm:px-2 input-field text-base sm:text-xs"
+                placeholder="Menge"
+                aria-label="Menge (optional)"
+                className="w-24 sm:w-20 h-11 sm:h-9 px-2.5 input-field text-base sm:text-sm"
               />
               <button
                 type="submit"
                 disabled={isSubmittingItem || !newItemText.trim()}
-                className="btn-primary h-9 sm:h-7 px-3.5 sm:px-3 text-xs disabled:opacity-40 disabled:cursor-not-allowed flex items-center gap-1 flex-shrink-0"
+                className="btn-primary flex-1 sm:flex-none h-11 sm:h-9 px-4 text-sm sm:text-xs disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center gap-1 flex-shrink-0"
               >
                 {isSubmittingItem ? 'Wird hinzugefügt…' : 'Hinzufügen'}
               </button>
@@ -1268,6 +1293,11 @@ export const SharedListsView: React.FC<SharedListsViewProps> = ({ onRefreshGloba
                             <span className="text-sm font-medium text-main truncate">
                               {displayContent}
                             </span>
+                            {item.id.startsWith(OFFLINE_ITEM_PREFIX) && (
+                              <span title="Offline hinzugefügt – wird gesendet, sobald die Verbindung zurück ist">
+                                <CloudOff className="w-3.5 h-3.5 text-faint shrink-0" />
+                              </span>
+                            )}
 
                             {editingQtyItemId === item.id ? (
                               <div className="flex items-center gap-1" onClick={(e) => e.stopPropagation()}>

frontend/src/lib/__tests__/offline.test.ts

@@ -47,3 +47,28 @@ describe('outbox', () => {
     expect(isCacheablePath('/api/v1/export/markdown')).toBe(false);
   });
 });
+
+describe('list items added offline', () => {
+  beforeEach(() => localStorage.clear());
+
+  it('show up as stand-ins and follow edits until they are sent', async () => {
+    const { pendingListItems, updateQueued, dropQueued, OFFLINE_ITEM_PREFIX } = await import('../offline');
+    const milk = enqueue('POST', '/api/v1/lists/lst_1/items', { content: 'Hafermilch', category: 'Kühlregal', quantity: '' });
+    const bread = enqueue('POST', '/api/v1/lists/lst_2/items', { content: 'Brot', category: '', quantity: '1' });
+    enqueue('POST', '/api/v1/inbox', { content: 'kein Listeneintrag' });
+
+    let items = pendingListItems();
+    expect(items.map((i) => [i.listId, i.content])).toEqual([
+      ['lst_1', 'Hafermilch'],
+      ['lst_2', 'Brot'],
+    ]);
+    expect(items[0].id).toBe(OFFLINE_ITEM_PREFIX + milk.id);
+
+    updateQueued(milk.id, { quantity: '2' });
+    dropQueued(bread.id);
+    items = pendingListItems();
+    expect(items).toHaveLength(1);
+    expect(items[0].quantity).toBe('2');
+    expect(getOutbox()).toHaveLength(2); // the inbox entry stays
+  });
+});

frontend/src/lib/api.ts

@@ -52,6 +52,9 @@ import {
   clearOfflineData,
   enqueue,
   flushOutbox,
+  dropQueued,
+  updateQueued,
+  OFFLINE_ITEM_PREFIX,
 } from './offline';
 
 const TOKEN_STORAGE_KEY = 'mindsift_jwt_token';
@@ -961,13 +964,32 @@ export const api = {
   },
 
   async createListItem(listId: string, content: string, category = '', quantity = ''): Promise<ListItem> {
-    return request<ListItem>(`/api/v1/lists/${listId}/items`, {
-      method: 'POST',
-      body: JSON.stringify({ content, category, quantity }),
-    });
+    const path = `/api/v1/lists/${listId}/items`;
+    try {
+      return await request<ListItem>(path, { method: 'POST', body: JSON.stringify({ content, category, quantity }) });
+    } catch (err) {
+      if (!(err instanceof OfflineError)) throw err;
+      // Kept in the outbox and sent when the connection is back; until then a stand-in in the list
+      const entry = enqueue('POST', path, { content, category, quantity });
+      return {
+        id: OFFLINE_ITEM_PREFIX + entry.id,
+        listId,
+        content,
+        category,
+        quantity,
+        isCompleted: false,
+        sortOrder: 0,
+        createdAt: entry.createdAt,
+      } as ListItem;
+    }
   },
 
   async toggleListItem(listId: string, itemId: string, isCompleted?: boolean): Promise<ListItem> {
+    // Added offline and checked off before it was sent: nothing left to send
+    if (itemId.startsWith(OFFLINE_ITEM_PREFIX) && isCompleted) {
+      dropQueued(itemId.slice(OFFLINE_ITEM_PREFIX.length));
+      return { id: itemId, listId, isCompleted: true } as ListItem;
+    }
     try {
       return await request<ListItem>(`/api/v1/lists/${listId}/items/${itemId}`, {
         method: 'PATCH',
@@ -985,6 +1007,10 @@ export const api = {
     itemId: string,
     payload: { content?: string; category?: string; quantity?: string }
   ): Promise<ListItem> {
+    if (itemId.startsWith(OFFLINE_ITEM_PREFIX)) {
+      updateQueued(itemId.slice(OFFLINE_ITEM_PREFIX.length), payload);
+      return { id: itemId, listId, ...payload } as ListItem;
+    }
     return request<ListItem>(`/api/v1/lists/${listId}/items/${itemId}`, {
       method: 'PUT',
       body: JSON.stringify(payload),
@@ -992,6 +1018,10 @@ export const api = {
   },
 
   async deleteListItem(listId: string, itemId: string): Promise<void> {
+    if (itemId.startsWith(OFFLINE_ITEM_PREFIX)) {
+      dropQueued(itemId.slice(OFFLINE_ITEM_PREFIX.length));
+      return;
+    }
     await request(`/api/v1/lists/${listId}/items/${itemId}`, { method: 'DELETE' });
   },
 

frontend/src/lib/offline.ts

@@ -154,6 +154,43 @@ export function enqueue(method: OutboxEntry['method'], path: string, body: Recor
 
 export const outboxCount = () => getOutbox().length;
 
+/** Changes the body of a queued entry (e.g. the quantity of a list item added offline). */
+export function updateQueued(entryId: string, body: Record<string, unknown>): boolean {
+  const entries = getOutbox();
+  const entry = entries.find((e) => e.id === entryId);
+  if (!entry) return false;
+  entry.body = { ...entry.body, ...body };
+  saveOutbox(entries);
+  return true;
+}
+
+/** Removes a queued entry that is no longer wanted (e.g. a list item added and deleted while offline). */
+export function dropQueued(entryId: string): boolean {
+  const entries = getOutbox();
+  const rest = entries.filter((e) => e.id !== entryId);
+  if (rest.length === entries.length) return false;
+  saveOutbox(rest);
+  return true;
+}
+
+// List items added offline: a stand-in id until the server knows them, derived from the outbox entry
+export const OFFLINE_ITEM_PREFIX = 'itm_offline_';
+const LIST_ITEMS_PATH = /^\/api\/v1\/lists\/([^/]+)\/items$/;
+
+/** List items still waiting in the outbox, as stand-ins for the list view (also after a reload). */
+export function pendingListItems(): { listId: string; id: string; content: string; category: string; quantity: string; createdAt: string }[] {
+  return getOutbox()
+    .filter((e) => e.method === 'POST' && LIST_ITEMS_PATH.test(e.path))
+    .map((e) => ({
+      listId: (e.path.match(LIST_ITEMS_PATH) as RegExpMatchArray)[1],
+      id: OFFLINE_ITEM_PREFIX + e.id,
+      content: String(e.body.content || ''),
+      category: String(e.body.category || ''),
+      quantity: String(e.body.quantity || ''),
+      createdAt: e.createdAt,
+    }));
+}
+
 let flushing: Promise<number> | null = null;
 
 /**