Require the household's name for a Regular added from a link (PR #97 review R4-F1)

A pasted link may carry a personal token anywhere in its path, so no part
of it can safely name a dinner: the slug heuristic always let some plain
words through. POST /api/v1/dinners now takes {name} or {name, recipe_url};
a link without a name is 400 invalid_dinner, and nameFromURL is gone. The
link is still kept only for grounding and for the recipe-link duplicate
rule. Name-created Regulars, grounding, and the rename rules are unchanged.

On the Regulars screen, pasting a link shows a "Dinner name" field, and
Add stays disabled until it is filled. The optimistic row shows that name,
never the link.

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

web/src/dinners/api.ts

@@ -33,8 +33,10 @@ export type Regular = {
   pending?: true
 }
 
-// NewRegular is a POST /api/v1/dinners body: a name or a recipe link.
-export type NewRegular = { name: string } | { recipe_url: string }
+// NewRegular is a POST /api/v1/dinners body: the household's name for the
+// dinner, with the recipe link to ground it in when one was pasted. A
+// dinner is never named from its link, which may carry private details.
+export type NewRegular = { name: string; recipe_url?: string }
 
 // RegularPatch is a PATCH /api/v1/dinners/{id} body; every field is optional.
 export type RegularPatch = Partial<{ name: string; method: Method; minutes_total: number; difficulty: Difficulty }>
@@ -195,10 +197,9 @@ function settle(queryClient: QueryClient) {
 
 let pendingIds = 0
 
-// useAddRegular adds a Regular by name or recipe link (POST
-// /api/v1/dinners). It shows in the list at once — a link under the link
-// itself until the server names it — and is taken out again if the server
-// refuses it.
+// useAddRegular adds a Regular by name, with or without a recipe link (POST
+// /api/v1/dinners). It shows in the list at once under its name and is
+// taken out again if the server refuses it.
 export function useAddRegular() {
   const { apiFetch } = useApi()
   const queryClient = useQueryClient()
@@ -210,7 +211,7 @@ export function useAddRegular() {
       const id = `pending-${++pendingIds}`
       const optimistic: CachedRegular = {
         id,
-        name: 'name' in add ? add.name : add.recipe_url,
+        name: add.name,
         method: null,
         minutes_total: null,
         difficulty: null,

web/src/settings/RegularsSettingsPage.module.css

@@ -43,6 +43,13 @@
   font-weight: 700;
 }
 
+/* The add form: the add row, then the name field a pasted link needs. */
+.addForm {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
 /* The add field: the input fills the row beside the grape + button. */
 .add {
   display: flex;

web/src/settings/RegularsSettingsPage.test.tsx

@@ -192,21 +192,33 @@ describe('RegularsSettingsPage', () => {
     expect(screen.getByRole('heading', { level: 2, name: 'On rotation · 2' })).toBeInTheDocument()
   })
 
-  it('adds a Regular from a pasted recipe link', async () => {
-    const link = 'https://example.com/recipes/12345/beef-stew/'
+  it('adds a Regular from a pasted recipe link under the name the household gives it', async () => {
+    const link = 'https://example.com/recipes/stew-key-abcdefghijklmno'
     const server = stubServer([], {
-      'POST /api/v1/dinners': () => {
-        const created = dinnerBody('d9', 'Beef stew', { grounding_status: 'pending' })
+      'POST /api/v1/dinners': (body) => {
+        const created = dinnerBody('d9', (body as { name: string }).name, { grounding_status: 'pending' })
         server.regulars = [created]
         return jsonResponse(201, { ...created, grounding_job_id: 'job-1' })
       },
     })
     await renderPage()
 
-    add(link)
-    expect(await screen.findByText('Beef stew')).toBeInTheDocument()
-    expect(sent(server.fetchMock)).toEqual([{ request: 'POST /api/v1/dinners', body: { recipe_url: link } }])
-    expect(within(row('Beef stew')).getByText('Finding recipe…')).toBeInTheDocument()
+    fireEvent.change(addField(), { target: { value: ` ${link} ` } })
+    // A link alone cannot be added: it never names a dinner.
+    expect(screen.getByRole('button', { name: 'Add Regular' })).toBeDisabled()
+    const name = screen.getByRole('textbox', { name: 'Dinner name' })
+    expect(name).toHaveAccessibleDescription(/never names a dinner/)
+    fireEvent.change(name, { target: { value: ' Sunday stew ' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Add Regular' }))
+
+    expect(addField()).toHaveValue('')
+    expect(screen.queryByRole('textbox', { name: 'Dinner name' })).not.toBeInTheDocument()
+    expect(await screen.findByText('Sunday stew')).toBeInTheDocument()
+    expect(sent(server.fetchMock)).toEqual([
+      { request: 'POST /api/v1/dinners', body: { name: 'Sunday stew', recipe_url: link } },
+    ])
+    expect(within(row('Sunday stew')).getByText('Finding recipe…')).toBeInTheDocument()
+    expect(document.body).not.toHaveTextContent(/example\.com|abcdefghijklmno|key/i)
   })
 
   it('takes back an add the server refuses and says why', async () => {

web/src/settings/RegularsSettingsPage.tsx

@@ -49,12 +49,14 @@ export const methodLabels: Record<Method, string> = {
 
 const difficultyLabels: Record<Difficulty, string> = { easy: 'Easy', medium: 'Medium', hard: 'Hard' }
 
-// A pasted link is added as a recipe link; anything else is a dinner name.
+// A pasted link is added as a recipe link under a name the household gives;
+// anything else is a dinner name.
 const LINK = /^https?:\/\//i
 
 // Settings · Regular dinners: the household's Regulars, each with its photo,
 // method and minutes, favorite heart and whether its recipe was found. The
-// field at the top adds one by name or pasted recipe link; tapping one
+// field at the top adds one by name, or by pasted recipe link with a name
+// the household gives it; tapping one
 // edits or removes it, or fixes its recipe when none was found.
 export function RegularsSettingsPage() {
   const navigate = useNavigate()
@@ -85,19 +87,24 @@ function RegularsManager() {
   const favorite = useToggleFavorite()
   const { refusals, track } = useRefusals()
   const [draft, setDraft] = useState('')
+  const [linkName, setLinkName] = useState('')
   const [open, setOpen] = useState<Open>(null)
   const headingId = useId()
+  const linkHintId = useId()
+  const isLink = LINK.test(draft.trim())
+  const ready = draft.trim() !== '' && (!isLink || linkName.trim() !== '')
   const list = regulars.data ?? []
   // A Regular removed meanwhile closes its sheet.
   const opened = open && list.find((regular) => regular.id === open.id && !regular.pending)
 
   function onSubmit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault()
+    if (!ready) return
     const text = draft.trim()
-    if (text === '') return
-    const body: NewRegular = LINK.test(text) ? { recipe_url: text } : { name: text }
-    track(`add:${text.toLowerCase()}`, `add ${text}`, add.mutateAsync(body))
+    const body: NewRegular = isLink ? { name: linkName.trim(), recipe_url: text } : { name: text }
+    track(`add:${body.name.toLowerCase()}`, `add ${body.name}`, add.mutateAsync(body))
     setDraft('')
+    setLinkName('')
   }
 
   function onRemove(regular: Regular) {
@@ -111,20 +118,38 @@ function RegularsManager() {
 
   return (
     <>
-      <form className={styles.add} onSubmit={onSubmit}>
-        <TextInput
-          label="Add a Regular"
-          labelHidden
-          className={styles.addInput}
-          placeholder="Dinner name or recipe link"
-          autoComplete="off"
-          enterKeyHint="done"
-          value={draft}
-          onChange={(event) => setDraft(event.target.value)}
-        />
-        <IconButton type="submit" label="Add Regular" tone="accent" disabled={draft.trim() === ''}>
-          <Icon icon={Plus} size="nav" />
-        </IconButton>
+      <form className={styles.addForm} onSubmit={onSubmit}>
+        <div className={styles.add}>
+          <TextInput
+            label="Add a Regular"
+            labelHidden
+            className={styles.addInput}
+            placeholder="Dinner name or recipe link"
+            autoComplete="off"
+            enterKeyHint="done"
+            value={draft}
+            onChange={(event) => setDraft(event.target.value)}
+          />
+          <IconButton type="submit" label="Add Regular" tone="accent" disabled={!ready}>
+            <Icon icon={Plus} size="nav" />
+          </IconButton>
+        </div>
+        {isLink && (
+          <>
+            <TextInput
+              label="Dinner name"
+              placeholder="What do you call this dinner?"
+              autoComplete="off"
+              enterKeyHint="done"
+              aria-describedby={linkHintId}
+              value={linkName}
+              onChange={(event) => setLinkName(event.target.value)}
+            />
+            <p id={linkHintId} className={styles.hint}>
+              Name it yourself: a link can carry private details, so it never names a dinner.
+            </p>
+          </>
+        )}
       </form>
       {refusals.map((refusal) => (
         <p key={refusal.key} role="alert" className={styles.problem}>