Make creating a person obvious; inline "create new" when linking relatives

- Family view gets a prominent "+ Add person" button that creates a person and
  opens their page to fill in details (previously you could only add a person
  via the empty-state form or by linking from another person).
- The person page's relationship picker (PersonCombobox) now offers
  "+ Create '<typed name>'" when the person doesn't exist yet: it creates them,
  links them in the chosen role (parent/child/partner/sibling), and jumps to
  their new page to edit — no more create-then-go-back-and-link.

Frontend only — no migration.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/components/person-combobox.tsx

@@ -16,12 +16,15 @@ export function PersonCombobox({
   people,
   value,
   onChange,
+  onCreate,
   placeholder = "Search for a person…",
   className,
 }: {
   people: Person[];
   value: string;
   onChange: (id: string) => void;
+  /** When set, the dropdown offers a "Create '<typed name>'" action. */
+  onCreate?: (name: string) => void;
   placeholder?: string;
   className?: string;
 }) {
@@ -77,7 +80,7 @@ export function PersonCombobox({
           if (value) onChange(""); // typing invalidates the prior pick
         }}
       />
-      {open && matches.length > 0 && (
+      {open && (matches.length > 0 || (onCreate && query.trim())) && (
         <ul className="absolute z-30 mt-1 max-h-64 w-72 overflow-auto rounded-lg border border-[var(--border)] bg-[var(--surface)] shadow-lg">
           {matches.map((p) => (
             <li key={p.id}>
@@ -96,6 +99,21 @@ export function PersonCombobox({
               </button>
             </li>
           ))}
+          {onCreate && query.trim() && (
+            <li className={matches.length > 0 ? "border-t border-[var(--border)]" : ""}>
+              <button
+                type="button"
+                onClick={() => {
+                  const name = query.trim();
+                  setOpen(false);
+                  onCreate(name);
+                }}
+                className="block w-full px-3 py-2 text-left text-sm text-bronze hover:bg-[var(--muted-bg,rgba(0,0,0,0.04))]"
+              >
+                + Create “{query.trim()}”
+              </button>
+            </li>
+          )}
         </ul>
       )}
     </div>