feat(04-04): add ListDetail with active/completed split + ItemRow + AddItemInput (LIST-02)

- listsClient.ts: add fetchListItems, addItem, patchListItem, deleteItem + ListItemsResponse type - ListDetail.tsx: replace placeholder with real implementation — useQuery(['list', listId]) with 30s polling fallback (D-12); active/completed split (D-05); optimistic mutations (D-07); delete-wins no-rollback (D-09); per-field check PATCH (D-08) - ItemRow.tsx: 44px touch target, checkbox (20px visual/44px touch, accent fill when checked), plain-text item text (T-04-06 XSS guard), GripVertical handle slot for Plan 05, hover Trash2 delete + swipe-left zone, transform 150ms ease-out animation slot (D-14) - AddItemInput.tsx: sticky bottom input + Add button, disabled when empty, Enter key support - ListDetail.test.tsx: 7 real tests replacing todo stubs — optimistic add/check/uncheck/delete, rollback on error, D-05 completed-sink split, D-09 delete-wins no-rollback - Playwright browser check: add milk → sinks to Completed on check → vanishes on delete PASS
2026-06-09 13:01:49 -04:00
parent 5e3151416c
commit 6da9c2ae7b
5 changed files with 934 additions and 27 deletions
@@ -0,0 +1,105 @@
+/**
+ * AddItemInput — sticky add-item text input at the bottom of ListDetail.
+ *
+ * Design contract (UI-SPEC §AddItemInput):
+ *   - Sticky at the bottom, above keyboard on mobile
+ *   - Horizontal flex: text input (flex:1) + "Add" button
+ *   - Input: --text-body-*, 44px min-height, placeholder "Add an item…"
+ *   - Button: "Add" label, --color-member-0 bg, white text, disabled when empty
+ *   - Submit: Enter key OR tap "Add" button
+ */
+
+import { useState, useRef } from 'react'
+
+interface AddItemInputProps {
+  onAdd: (text: string) => void
+  /** Whether the add mutation is pending (parent controls this for optimistic state) */
+  isPending?: boolean
+}
+
+export function AddItemInput({ onAdd, isPending = false }: AddItemInputProps) {
+  const [text, setText] = useState('')
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  function handleSubmit() {
+    const trimmed = text.trim()
+    if (!trimmed) return
+    onAdd(trimmed)
+    setText('')
+    inputRef.current?.focus()
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      handleSubmit()
+    }
+  }
+
+  return (
+    <div
+      style={{
+        position: 'sticky',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        display: 'flex',
+        gap: 'var(--space-2)',
+        padding: 'var(--space-3) var(--space-4)',
+        background: 'var(--color-surface)',
+        borderTop: '1px solid var(--color-border)',
+        // Push above keyboard on iOS and bottom tab bar
+        paddingBottom: 'calc(var(--space-3) + env(safe-area-inset-bottom, 0px))',
+        fontFamily: 'var(--font-family-base)',
+      }}
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        onKeyDown={handleKeyDown}
+        placeholder="Add an item…"
+        disabled={isPending}
+        style={{
+          flex: 1,
+          fontSize: 'var(--text-body-size, 15px)',
+          background: 'var(--color-surface)',
+          border: '1px solid var(--color-border)',
+          borderRadius: 'var(--space-1)',
+          padding: 'var(--space-2) var(--space-4)',
+          minHeight: '44px',
+          color: 'var(--color-text-primary)',
+          outline: 'none',
+          fontFamily: 'var(--font-family-base)',
+        }}
+        onFocus={(e) => {
+          e.currentTarget.style.borderColor = 'var(--color-focus-ring, #4A90D9)'
+        }}
+        onBlur={(e) => {
+          e.currentTarget.style.borderColor = 'var(--color-border)'
+        }}
+      />
+      <button
+        onClick={handleSubmit}
+        disabled={!text.trim() || isPending}
+        aria-label="Add item"
+        style={{
+          background: 'var(--color-member-0)',
+          color: '#fff',
+          border: 'none',
+          borderRadius: 'var(--space-1)',
+          padding: '0 var(--space-4)',
+          minHeight: '44px',
+          fontSize: 'var(--text-label-size, 13px)',
+          fontWeight: 600,
+          cursor: !text.trim() || isPending ? 'not-allowed' : 'pointer',
+          opacity: !text.trim() || isPending ? 0.5 : 1,
+          fontFamily: 'var(--font-family-base)',
+        }}
+      >
+        Add
+      </button>
+    </div>
+  )
+}