From 786dd90e1ea0a79d78d5fa50db4663574a481645 Mon Sep 17 00:00:00 2001
From: Waleed Khalid <wak327@gmail.com>
Date: Fri, 11 Sep 2026 22:01:27 +0500
Subject: [PATCH] Add issue creation and editing

Closes #6.

Every property the web's new-issue modal offers, as tappable rows opening a
sheet rather than a column of selects -- a phone has no `<select>` worth having.
Only the title is required, so capturing a thought costs one field and a tap.

On the detail screen properties are written through as they are picked rather
than collected behind a Save button: each is a single-field PATCH, and a form
that must be submitted invites half-made edits to be lost when the screen is
dismissed. Title and description are the exception, because they are typed, so
they save on blur.

"Not sized" and "Unassigned" get their own rows rather than being expressed by
closing the sheet. The API distinguishes them from an absent edit, and the
board's point totals read differently for an unsized issue than a zero one.

Labels and projects can be created inline, as the web allows any member to do --
leaving for team settings to add a label mid-triage is worse on a phone than at
a desk.

The detail screen resolves its team from the issue rather than the active one,
since a link can arrive from anywhere.

Verified against the reference stack: the identifier is server-allocated as
TEAMKEY-n, every property round-trips, the estimate scale is exactly what the
picker offers (4 is refused), clearing back to null works, and a deleted issue
stops being listed.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/api/__tests__/live-issues.test.ts         | 155 +++++++
 src/app/_layout.tsx                           |   4 +
 src/app/issue/[id].tsx                        |   1 +
 src/app/new-issue.tsx                         |   1 +
 src/board/board-screen.tsx                    |  33 +-
 src/board/issue-list.tsx                      |   3 +
 .../__tests__/use-issue-properties.test.ts    |  31 ++
 src/issues/issue-detail-screen.tsx            | 386 ++++++++++++++++++
 src/issues/new-issue-screen.tsx               | 301 ++++++++++++++
 src/issues/property-picker.tsx                | 275 +++++++++++++
 src/issues/use-issue-properties.ts            | 125 ++++++
 src/ui/icon.tsx                               |  13 +-
 12 files changed, 1325 insertions(+), 3 deletions(-)
 create mode 100644 src/api/__tests__/live-issues.test.ts
 create mode 100644 src/app/issue/[id].tsx
 create mode 100644 src/app/new-issue.tsx
 create mode 100644 src/issues/__tests__/use-issue-properties.test.ts
 create mode 100644 src/issues/issue-detail-screen.tsx
 create mode 100644 src/issues/new-issue-screen.tsx
 create mode 100644 src/issues/property-picker.tsx
 create mode 100644 src/issues/use-issue-properties.ts

diff --git a/src/api/__tests__/live-issues.test.ts b/src/api/__tests__/live-issues.test.ts
new file mode 100644
index 0000000..52834ed
--- /dev/null
+++ b/src/api/__tests__/live-issues.test.ts
@@ -0,0 +1,155 @@
+/**
+ * @jest-environment node
+ */
+import { loginAuthLoginPost } from '@/api/generated/endpoints/auth/auth';
+import {
+  createIssueTeamsTeamIdIssuesPost,
+  deleteIssueIssuesIssueIdDelete,
+  getIssueIssuesIssueIdGet,
+  listIssuesTeamsTeamIdIssuesGet,
+  updateIssueIssuesIssueIdPatch,
+} from '@/api/generated/endpoints/issues/issues';
+import { createLabelTeamsTeamIdLabelsPost } from '@/api/generated/endpoints/labels/labels';
+import { createProjectTeamsTeamIdProjectsPost } from '@/api/generated/endpoints/projects/projects';
+import { listStatusesTeamsTeamIdStatusesGet } from '@/api/generated/endpoints/statuses/statuses';
+import { listMyTeamsTeamsGet } from '@/api/generated/endpoints/teams/teams';
+import type { StatusRead, TeamRead } from '@/api/generated/models';
+import { setInstanceUrl } from '@/api/instance';
+import { persistToken } from '@/auth/session';
+import { ESTIMATE_SCALE } from '@/issues/use-issue-properties';
+
+/**
+ * Creating and editing issues against a real instance.
+ *
+ * The acceptance criterion for #6 is that an issue created on mobile is
+ * indistinguishable from a web-created one, so these assert the identifier
+ * shape and that every property round-trips -- including the two that mean
+ * something by being absent.
+ *
+ *   SOFTTRACK_LIVE_URL=http://localhost:8000 npm test
+ */
+const LIVE_URL = process.env.SOFTTRACK_LIVE_URL;
+const describeLive = LIVE_URL ? describe : describe.skip;
+
+const RUN = Date.now().toString(36).slice(-5);
+
+describeLive('issues against a live instance', () => {
+  let team: TeamRead;
+  let statuses: StatusRead[];
+  const created: number[] = [];
+
+  beforeAll(async () => {
+    await setInstanceUrl(LIVE_URL!);
+    const token = await loginAuthLoginPost({
+      username: process.env.SOFTTRACK_LIVE_EMAIL ?? 'demo@softtrack.dev',
+      password: process.env.SOFTTRACK_LIVE_PASSWORD ?? 'password123',
+    });
+    await persistToken(token.access_token);
+    team = (await listMyTeamsTeamsGet())[0];
+    statuses = await listStatusesTeamsTeamIdStatusesGet(team.id);
+  });
+
+  afterAll(async () => {
+    // These are real rows; do not leave them behind.
+    for (const id of created) {
+      await deleteIssueIssuesIssueIdDelete(id).catch(() => undefined);
+    }
+  });
+
+  it('creates an issue that looks exactly like a web-created one', async () => {
+    const issue = await createIssueTeamsTeamIdIssuesPost(team.id, {
+      title: `Mobile create ${RUN}`,
+    });
+    created.push(issue.id);
+
+    // TEAMKEY-n, allocated by the server -- the client never invents one.
+    expect(issue.identifier).toBe(`${team.key}-${issue.number}`);
+    expect(issue.team_id).toBe(team.id);
+    expect(issue.creator).toHaveProperty('id');
+    // The defaults a title-only issue gets.
+    expect(issue.priority).toBe('no_priority');
+    expect(issue.estimate ?? null).toBeNull();
+    expect(issue.assignee ?? null).toBeNull();
+    // A status is assigned even though none was asked for.
+    expect(statuses.map((s) => s.id)).toContain(issue.status.id);
+  });
+
+  it('round-trips every property the form offers', async () => {
+    const label = await createLabelTeamsTeamIdLabelsPost(team.id, {
+      name: `mob-${RUN}`,
+    });
+    const project = await createProjectTeamsTeamIdProjectsPost(team.id, {
+      name: `Mobile ${RUN}`,
+    });
+    const status = statuses[1] ?? statuses[0];
+
+    const issue = await createIssueTeamsTeamIdIssuesPost(team.id, {
+      title: `Mobile full ${RUN}`,
+      description: '## Heading\n\n- [ ] a task',
+      status_id: status.id,
+      priority: 'high',
+      estimate: ESTIMATE_SCALE[3],
+      label_ids: [label.id],
+      project_id: project.id,
+    });
+    created.push(issue.id);
+
+    expect(issue.title).toBe(`Mobile full ${RUN}`);
+    expect(issue.description).toContain('## Heading');
+    expect(issue.status.id).toBe(status.id);
+    expect(issue.priority).toBe('high');
+    expect(issue.estimate).toBe(ESTIMATE_SCALE[3]);
+    expect(issue.project_id).toBe(project.id);
+    expect((issue.labels ?? []).map((l) => l.id)).toEqual([label.id]);
+
+    // And it reads back the same, which is what the detail screen renders.
+    const fetched = await getIssueIssuesIssueIdGet(issue.id);
+    expect(fetched.identifier).toBe(issue.identifier);
+    expect(fetched.estimate).toBe(ESTIMATE_SCALE[3]);
+  });
+
+  it('accepts the estimate scale the picker offers, and nothing else', async () => {
+    const issue = await createIssueTeamsTeamIdIssuesPost(team.id, {
+      title: `Mobile estimate ${RUN}`,
+    });
+    created.push(issue.id);
+
+    for (const points of ESTIMATE_SCALE) {
+      const updated = await updateIssueIssuesIssueIdPatch(issue.id, { estimate: points });
+      expect(updated.estimate).toBe(points);
+    }
+
+    // Off-scale values are refused, which is why the picker is a fixed list.
+    await expect(
+      updateIssueIssuesIssueIdPatch(issue.id, { estimate: 4 as never }),
+    ).rejects.toMatchObject({ response: { status: 422 } });
+  });
+
+  it('clears a property back to nothing', async () => {
+    // "Not sized" and "unassigned" are states, not the absence of an edit --
+    // the pickers offer them as rows and null is what expresses them.
+    const issue = await createIssueTeamsTeamIdIssuesPost(team.id, {
+      title: `Mobile clear ${RUN}`,
+      estimate: 5,
+    });
+    created.push(issue.id);
+    expect(issue.estimate).toBe(5);
+
+    const cleared = await updateIssueIssuesIssueIdPatch(issue.id, { estimate: null });
+    expect(cleared.estimate ?? null).toBeNull();
+  });
+
+  it('deletes an issue and stops listing it', async () => {
+    const issue = await createIssueTeamsTeamIdIssuesPost(team.id, {
+      title: `Mobile delete ${RUN}`,
+    });
+
+    await deleteIssueIssuesIssueIdDelete(issue.id);
+
+    await expect(getIssueIssuesIssueIdGet(issue.id)).rejects.toMatchObject({
+      response: { status: 404 },
+    });
+    const page = await listIssuesTeamsTeamIdIssuesGet(team.id, { limit: 200 });
+    expect(page.items.map((i) => i.id)).not.toContain(issue.id);
+  });
+});
diff --git a/src/app/_layout.tsx b/src/app/_layout.tsx
index ea2a634..118f657 100644
--- a/src/app/_layout.tsx
+++ b/src/app/_layout.tsx
@@ -59,6 +59,10 @@ function RootNavigator() {
           structurally impossible. */}
       <Stack.Protected guard={status !== 'signedOut'}>
         <Stack.Screen name="(app)" />
+        {/* Pushed over the tabs rather than being tab destinations: both are
+            things you enter from somewhere and come back from. */}
+        <Stack.Screen name="issue/[id]" />
+        <Stack.Screen name="new-issue" options={{ presentation: 'modal' }} />
       </Stack.Protected>
       <Stack.Protected guard={status === 'signedOut'}>
         <Stack.Screen name="(auth)" />
diff --git a/src/app/issue/[id].tsx b/src/app/issue/[id].tsx
new file mode 100644
index 0000000..9128aa0
--- /dev/null
+++ b/src/app/issue/[id].tsx
@@ -0,0 +1 @@
+export { IssueDetailScreen as default } from '@/issues/issue-detail-screen';
diff --git a/src/app/new-issue.tsx b/src/app/new-issue.tsx
new file mode 100644
index 0000000..f9c83b3
--- /dev/null
+++ b/src/app/new-issue.tsx
@@ -0,0 +1 @@
+export { NewIssueScreen as default } from '@/issues/new-issue-screen';
diff --git a/src/board/board-screen.tsx b/src/board/board-screen.tsx
index d21b2b2..2b4f7ec 100644
--- a/src/board/board-screen.tsx
+++ b/src/board/board-screen.tsx
@@ -15,6 +15,7 @@ import { useTeamData } from '@/board/use-team-data';
 import { NewTeamSheet } from '@/team/new-team-sheet';
 import { useTeams } from '@/team/team-context';
 import { TeamSwitcher } from '@/team/team-switcher';
+import { href } from '@/ui/href';
 import { Icon } from '@/ui/icon';
 import { useIsMultiPane } from '@/ui/layout';
 import { AppText, Button, Loading, TeamBadge } from '@/ui/primitives';
@@ -155,10 +156,14 @@ export function BoardScreen() {
           issues={issues}
           estimates={data.estimates}
           onMove={onMove}
-          onCardPress={setMoving}
+          onCardPress={(issue) => router.push(href(`/issue/${issue.id}`))}
         />
       ) : (
-        <IssueList issues={issues} onMovePress={setMoving} />
+        <IssueList
+          issues={issues}
+          onPress={(issue) => router.push(href(`/issue/${issue.id}`))}
+          onMovePress={setMoving}
+        />
       )}
 
       <FilterSheet
@@ -221,6 +226,30 @@ export function BoardScreen() {
         </View>
       </Sheet>
 
+      <Pressable
+        accessibilityRole="button"
+        accessibilityLabel="New issue"
+        onPress={() => router.push('/new-issue')}
+        style={{
+          position: 'absolute',
+          right: 20,
+          bottom: 24,
+          width: 56,
+          height: 56,
+          borderRadius: 28,
+          alignItems: 'center',
+          justifyContent: 'center',
+          backgroundColor: t.brand[600],
+          shadowColor: '#000',
+          shadowOpacity: 0.25,
+          shadowRadius: 12,
+          shadowOffset: { width: 0, height: 6 },
+          elevation: 6,
+        }}
+      >
+        <Icon name="plus" size={24} color="#ffffff" />
+      </Pressable>
+
       <TeamSwitcher
         visible={switching}
         onClose={() => setSwitching(false)}
diff --git a/src/board/issue-list.tsx b/src/board/issue-list.tsx
index 2c4568e..66bda84 100644
--- a/src/board/issue-list.tsx
+++ b/src/board/issue-list.tsx
@@ -14,9 +14,11 @@ import { useTokens } from '@/ui/theme';
  */
 export function IssueList({
   issues,
+  onPress,
   onMovePress,
 }: {
   issues: IssueRead[];
+  onPress: (issue: IssueRead) => void;
   onMovePress: (issue: IssueRead) => void;
 }) {
   const t = useTokens();
@@ -35,6 +37,7 @@ export function IssueList({
         <Pressable
           accessibilityRole="button"
           accessibilityLabel={`${item.identifier} ${item.title}`}
+          onPress={() => onPress(item)}
           onLongPress={() => onMovePress(item)}
           style={{
             flexDirection: 'row',
diff --git a/src/issues/__tests__/use-issue-properties.test.ts b/src/issues/__tests__/use-issue-properties.test.ts
new file mode 100644
index 0000000..4d2d7d6
--- /dev/null
+++ b/src/issues/__tests__/use-issue-properties.test.ts
@@ -0,0 +1,31 @@
+import { labelFor } from '@/issues/use-issue-properties';
+
+const OPTIONS = [
+  { value: 1, label: 'Todo', color: '#abc' },
+  { value: 2, label: 'Done', color: '#def' },
+];
+
+describe('labelFor', () => {
+  it('names the chosen value and carries its colour', () => {
+    expect(labelFor(OPTIONS, 1, 'None')).toEqual({
+      text: 'Todo',
+      color: '#abc',
+      muted: false,
+    });
+  });
+
+  it('shows the empty label when nothing is chosen', () => {
+    // "Unassigned" and "Not sized" are real states the API distinguishes, so
+    // they read as values rather than as a blank row.
+    expect(labelFor(OPTIONS, null, 'Unassigned')).toEqual({
+      text: 'Unassigned',
+      muted: true,
+    });
+  });
+
+  it('still renders a value whose row the team has deleted', () => {
+    // An issue can outlive the label or project it points at; the row has to
+    // draw something rather than crash or vanish.
+    expect(labelFor(OPTIONS, 99, 'None')).toEqual({ text: '99', muted: true });
+  });
+});
diff --git a/src/issues/issue-detail-screen.tsx b/src/issues/issue-detail-screen.tsx
new file mode 100644
index 0000000..7567228
--- /dev/null
+++ b/src/issues/issue-detail-screen.tsx
@@ -0,0 +1,386 @@
+import { useState } from 'react';
+import { Alert as RNAlert, Pressable, ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { router, useLocalSearchParams } from 'expo-router';
+import { useQueryClient } from '@tanstack/react-query';
+
+import {
+  deleteIssueIssuesIssueIdDelete,
+  updateIssueIssuesIssueIdPatch,
+  useGetIssueIssuesIssueIdGet,
+} from '@/api/generated/endpoints/issues/issues';
+import type { IssuePriority, IssueUpdate } from '@/api/generated/models';
+import { errorDetail } from '@/api/errors';
+import {
+  InlineCreate,
+  MultiPicker,
+  PropertyRow,
+  SinglePicker,
+} from '@/issues/property-picker';
+import { labelFor, useIssueProperties } from '@/issues/use-issue-properties';
+import { useTeams } from '@/team/team-context';
+import { Icon } from '@/ui/icon';
+import { Alert, AppText, Button, Card, Field, Loading } from '@/ui/primitives';
+import { useTokens } from '@/ui/theme';
+
+/**
+ * One issue, per `docs/design/mobile/144-issue-detail.svg`.
+ *
+ * Properties are written through as they are picked rather than collected
+ * behind a Save button: each is a single-field PATCH, and a form that has to be
+ * submitted invites half-made edits to be lost when the screen is dismissed.
+ * Title and description are the exception -- they are typed, so they save on
+ * blur.
+ */
+type Picker =
+  | 'status'
+  | 'priority'
+  | 'estimate'
+  | 'assignee'
+  | 'labels'
+  | 'project'
+  | 'cycle'
+  | null;
+
+export function IssueDetailScreen() {
+  const t = useTokens();
+  const queryClient = useQueryClient();
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const issueId = Number(id);
+  const { teams } = useTeams();
+
+  const issueQuery = useGetIssueIssuesIssueIdGet(issueId, {
+    query: { enabled: Number.isInteger(issueId) },
+  });
+  const issue = issueQuery.data;
+
+  // The issue names its own team, which is not necessarily the active one --
+  // a link can arrive from anywhere.
+  const team = teams.find((candidate) => candidate.id === issue?.team_id);
+  const props = useIssueProperties(team);
+
+  const [picker, setPicker] = useState<Picker>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [saving, setSaving] = useState(false);
+  const [title, setTitle] = useState<string | null>(null);
+  const [description, setDescription] = useState<string | null>(null);
+
+  async function patch(update: IssueUpdate) {
+    if (!issue) return;
+    setError(null);
+    setSaving(true);
+    try {
+      await updateIssueIssuesIssueIdPatch(issue.id, update);
+      await queryClient.invalidateQueries({ queryKey: [`/issues/${issue.id}`] });
+      // The board groups by status and totals points, so both have to re-read.
+      void queryClient.invalidateQueries({ queryKey: [`/teams/${issue.team_id}/issues`] });
+      void queryClient.invalidateQueries({ queryKey: [`/teams/${issue.team_id}/estimates`] });
+    } catch (err) {
+      setError(errorDetail(err, 'Could not save that change.'));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  function confirmDelete() {
+    if (!issue) return;
+    RNAlert.alert(
+      `Delete ${issue.identifier}?`,
+      'This also deletes its attachments. It cannot be undone.',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: async () => {
+            try {
+              await deleteIssueIssuesIssueIdDelete(issue.id);
+              await queryClient.invalidateQueries({
+                queryKey: [`/teams/${issue.team_id}/issues`],
+              });
+              router.back();
+            } catch (err) {
+              setError(errorDetail(err, 'Could not delete the issue.'));
+            }
+          },
+        },
+      ],
+    );
+  }
+
+  if (issueQuery.isPending) return <Loading />;
+
+  if (!issue) {
+    return (
+      <SafeAreaView style={{ flex: 1, backgroundColor: t.canvas }} edges={['top', 'bottom']}>
+        <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 10, padding: 24 }}>
+          <AppText variant="heading">Issue not found</AppText>
+          <AppText variant="muted" style={{ textAlign: 'center' }}>
+            It may have been deleted, or belong to a team you are not on.
+          </AppText>
+          <Button variant="ghost" onPress={() => router.back()}>
+            Go back
+          </Button>
+        </View>
+      </SafeAreaView>
+    );
+  }
+
+  const status = labelFor(props.statusOptions, issue.status.id, 'None');
+  const priorityMeta = labelFor(props.priorityOptions, issue.priority, 'No priority');
+  const points = labelFor(props.estimateOptions, issue.estimate ?? null, 'Not sized');
+  const assignee = labelFor(props.assigneeOptions, issue.assignee?.id ?? null, 'Unassigned');
+  const project = labelFor(props.projectOptions, issue.project_id ?? null, 'None');
+  const cycle = labelFor(props.cycleOptions, issue.cycle_id ?? null, 'None');
+  const labelIds = (issue.labels ?? []).map((label) => label.id);
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: t.canvas }} edges={['top', 'bottom']}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+          paddingHorizontal: 16,
+          paddingVertical: 12,
+        }}
+      >
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Back"
+          onPress={() => router.back()}
+        >
+          <AppText variant="label">Back</AppText>
+        </Pressable>
+        <AppText variant="identifier" style={{ flex: 1, textAlign: 'center' }}>
+          {issue.identifier}
+        </AppText>
+        {saving ? (
+          <AppText variant="hint">Saving…</AppText>
+        ) : (
+          <View style={{ width: 44 }} />
+        )}
+      </View>
+
+      <ScrollView contentContainerStyle={{ padding: 16, gap: 16 }} keyboardShouldPersistTaps="handled">
+        {error ? <Alert>{error}</Alert> : null}
+
+        {issue.blocked_by_count > 0 ? (
+          <View
+            style={{
+              flexDirection: 'row',
+              alignItems: 'center',
+              gap: 8,
+              backgroundColor: t.danger[50],
+              borderRadius: t.radius.control,
+              padding: 12,
+            }}
+          >
+            <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: t.danger[500] }} />
+            <AppText variant="body" style={{ color: t.danger[700] }}>
+              Blocked by {issue.blocked_by_count} issue
+              {issue.blocked_by_count === 1 ? '' : 's'}
+            </AppText>
+          </View>
+        ) : null}
+
+        <Card style={{ padding: 14, gap: 12 }}>
+          <Field
+            label="Title"
+            value={title ?? issue.title}
+            onChangeText={setTitle}
+            multiline
+            onBlur={() => {
+              if (title !== null && title.trim() && title.trim() !== issue.title) {
+                void patch({ title: title.trim() });
+              }
+              setTitle(null);
+            }}
+          />
+          <Field
+            label="Description"
+            value={description ?? issue.description ?? ''}
+            onChangeText={setDescription}
+            placeholder="Markdown supported"
+            multiline
+            style={{ minHeight: 100 }}
+            onBlur={() => {
+              if (description !== null && description !== (issue.description ?? '')) {
+                void patch({ description: description || null });
+              }
+              setDescription(null);
+            }}
+          />
+        </Card>
+
+        <Card style={{ paddingHorizontal: 14 }}>
+          <PropertyRow
+            label="Status"
+            value={status.text}
+            color={status.color}
+            onPress={() => setPicker('status')}
+          />
+          <PropertyRow
+            label="Priority"
+            value={priorityMeta.text}
+            color={priorityMeta.color}
+            onPress={() => setPicker('priority')}
+          />
+          <PropertyRow
+            label="Estimate"
+            value={points.text}
+            muted={points.muted}
+            onPress={() => setPicker('estimate')}
+          />
+          <PropertyRow
+            label="Assignee"
+            value={assignee.text}
+            color={assignee.color}
+            muted={assignee.muted}
+            onPress={() => setPicker('assignee')}
+          />
+          <PropertyRow
+            label="Labels"
+            value={
+              labelIds.length === 0
+                ? 'None'
+                : (issue.labels ?? []).map((label) => label.name).join(', ')
+            }
+            muted={labelIds.length === 0}
+            onPress={() => setPicker('labels')}
+          />
+          <PropertyRow
+            label="Project"
+            value={project.text}
+            muted={project.muted}
+            onPress={() => setPicker('project')}
+          />
+          <PropertyRow
+            label="Cycle"
+            value={cycle.text}
+            muted={cycle.muted}
+            onPress={() => setPicker('cycle')}
+          />
+        </Card>
+
+        <Card style={{ padding: 14, gap: 6 }}>
+          <AppText variant="hint">
+            Opened by {issue.creator.full_name}
+          </AppText>
+          {issue.child_count > 0 ? (
+            <AppText variant="hint">
+              {issue.completed_child_count} of {issue.child_count} sub-issues done
+            </AppText>
+          ) : null}
+        </Card>
+
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel={`Delete ${issue.identifier}`}
+          onPress={confirmDelete}
+          style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: 8,
+            paddingVertical: 14,
+            borderRadius: t.radius.control,
+            backgroundColor: t.danger[50],
+          }}
+        >
+          <Icon name="trash" size={16} color={t.danger[700]} />
+          <AppText variant="label" style={{ color: t.danger[700] }}>
+            Delete issue
+          </AppText>
+        </Pressable>
+      </ScrollView>
+
+      <SinglePicker
+        visible={picker === 'status'}
+        title="Status"
+        options={props.statusOptions}
+        selected={issue.status.id}
+        onSelect={(value) => value !== null && void patch({ status_id: value })}
+        onClose={() => setPicker(null)}
+      />
+      <SinglePicker
+        visible={picker === 'priority'}
+        title="Priority"
+        options={props.priorityOptions}
+        selected={issue.priority}
+        onSelect={(value) => void patch({ priority: (value ?? 'no_priority') as IssuePriority })}
+        onClose={() => setPicker(null)}
+      />
+      <SinglePicker
+        visible={picker === 'estimate'}
+        title="Estimate"
+        options={props.estimateOptions}
+        selected={issue.estimate ?? null}
+        emptyLabel="Not sized"
+        onSelect={(value) => void patch({ estimate: value as never })}
+        onClose={() => setPicker(null)}
+      />
+      <SinglePicker
+        visible={picker === 'assignee'}
+        title="Assignee"
+        options={props.assigneeOptions}
+        selected={issue.assignee?.id ?? null}
+        emptyLabel="Unassigned"
+        onSelect={(value) => void patch({ assignee_id: value })}
+        onClose={() => setPicker(null)}
+      />
+      <MultiPicker
+        visible={picker === 'labels'}
+        title="Labels"
+        options={props.labelOptions}
+        selected={labelIds}
+        onToggle={(labelId) =>
+          void patch({
+            label_ids: labelIds.includes(labelId)
+              ? labelIds.filter((x) => x !== labelId)
+              : [...labelIds, labelId],
+          })
+        }
+        onClose={() => setPicker(null)}
+        footer={
+          <InlineCreate
+            placeholder="bug"
+            busy={props.creating}
+            onCreate={async (name) => {
+              const newId = await props.createLabel(name);
+              if (newId !== null) void patch({ label_ids: [...labelIds, newId] });
+            }}
+          />
+        }
+      />
+      <SinglePicker
+        visible={picker === 'project'}
+        title="Project"
+        options={props.projectOptions}
+        selected={issue.project_id ?? null}
+        emptyLabel="None"
+        onSelect={(value) => void patch({ project_id: value })}
+        onClose={() => setPicker(null)}
+        footer={
+          <InlineCreate
+            placeholder="Platform"
+            busy={props.creating}
+            onCreate={async (name) => {
+              const newId = await props.createProject(name);
+              if (newId !== null) void patch({ project_id: newId });
+            }}
+          />
+        }
+      />
+      <SinglePicker
+        visible={picker === 'cycle'}
+        title="Cycle"
+        options={props.cycleOptions}
+        selected={issue.cycle_id ?? null}
+        emptyLabel="None"
+        onSelect={(value) => void patch({ cycle_id: value })}
+        onClose={() => setPicker(null)}
+      />
+    </SafeAreaView>
+  );
+}
diff --git a/src/issues/new-issue-screen.tsx b/src/issues/new-issue-screen.tsx
new file mode 100644
index 0000000..579efa7
--- /dev/null
+++ b/src/issues/new-issue-screen.tsx
@@ -0,0 +1,301 @@
+import { useState } from 'react';
+import { KeyboardAvoidingView, Platform, Pressable, ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { router } from 'expo-router';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { createIssueTeamsTeamIdIssuesPost } from '@/api/generated/endpoints/issues/issues';
+import type { IssuePriority } from '@/api/generated/models';
+import { errorDetail } from '@/api/errors';
+import {
+  InlineCreate,
+  MultiPicker,
+  PropertyRow,
+  SinglePicker,
+} from '@/issues/property-picker';
+import { labelFor, useIssueProperties } from '@/issues/use-issue-properties';
+import { useTeams } from '@/team/team-context';
+import { href } from '@/ui/href';
+import { Alert, AppText, Button, Card, Field } from '@/ui/primitives';
+import { useTokens } from '@/ui/theme';
+
+/**
+ * Create an issue, per `docs/design/mobile/143-new-issue.svg`.
+ *
+ * Every property the web's new-issue modal offers, as tappable rows rather than
+ * a column of `<select>`s. Only the title is required -- the rest default the
+ * way the API defaults them, so capturing a thought takes one field and a tap.
+ */
+type Picker =
+  | 'status'
+  | 'priority'
+  | 'estimate'
+  | 'assignee'
+  | 'labels'
+  | 'project'
+  | 'cycle'
+  | null;
+
+export function NewIssueScreen() {
+  const t = useTokens();
+  const queryClient = useQueryClient();
+  const { team } = useTeams();
+  const props = useIssueProperties(team);
+
+  const [title, setTitle] = useState('');
+  const [description, setDescription] = useState('');
+  const [statusId, setStatusId] = useState<number | null>(null);
+  const [priority, setPriority] = useState<IssuePriority>('no_priority');
+  const [estimate, setEstimate] = useState<number | null>(null);
+  const [assigneeId, setAssigneeId] = useState<number | null>(null);
+  const [labelIds, setLabelIds] = useState<number[]>([]);
+  const [projectId, setProjectId] = useState<number | null>(null);
+  const [cycleId, setCycleId] = useState<number | null>(null);
+
+  const [picker, setPicker] = useState<Picker>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [submitting, setSubmitting] = useState(false);
+
+  async function submit() {
+    if (!team) return;
+    setError(null);
+    setSubmitting(true);
+    try {
+      const issue = await createIssueTeamsTeamIdIssuesPost(team.id, {
+        title: title.trim(),
+        // An empty description is nothing, not an empty string to render.
+        description: description.trim() || undefined,
+        status_id: statusId ?? undefined,
+        priority,
+        estimate: estimate as never,
+        assignee_id: assigneeId ?? undefined,
+        label_ids: labelIds,
+        project_id: projectId ?? undefined,
+        cycle_id: cycleId ?? undefined,
+      });
+
+      await queryClient.invalidateQueries({ queryKey: [`/teams/${team.id}/issues`] });
+      void queryClient.invalidateQueries({ queryKey: [`/teams/${team.id}/estimates`] });
+      // Straight to what was just made, replacing this screen so Back returns
+      // to the board rather than to an empty form.
+      router.replace(href(`/issue/${issue.id}`));
+    } catch (err) {
+      setError(errorDetail(err, 'Could not create the issue.'));
+    } finally {
+      setSubmitting(false);
+    }
+  }
+
+  const status = labelFor(props.statusOptions, statusId, 'Team default');
+  const assignee = labelFor(props.assigneeOptions, assigneeId, 'Unassigned');
+  const project = labelFor(props.projectOptions, projectId, 'None');
+  const cycle = labelFor(props.cycleOptions, cycleId, 'None');
+  const points = labelFor(props.estimateOptions, estimate, 'Not sized');
+  const priorityMeta = labelFor(props.priorityOptions, priority, 'No priority');
+
+  return (
+    <SafeAreaView style={{ flex: 1, backgroundColor: t.canvas }} edges={['top', 'bottom']}>
+      <View
+        style={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+          paddingHorizontal: 16,
+          paddingVertical: 12,
+        }}
+      >
+        <Pressable
+          accessibilityRole="button"
+          accessibilityLabel="Cancel"
+          onPress={() => router.back()}
+        >
+          <AppText variant="label">Cancel</AppText>
+        </Pressable>
+        <AppText variant="heading" style={{ flex: 1, textAlign: 'center' }}>
+          New issue
+        </AppText>
+        {/* Balances the cancel button so the title sits centred. */}
+        <View style={{ width: 48 }} />
+      </View>
+
+      <KeyboardAvoidingView
+        style={{ flex: 1 }}
+        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+      >
+        <ScrollView
+          contentContainerStyle={{ padding: 16, gap: 16 }}
+          keyboardShouldPersistTaps="handled"
+        >
+          {error ? <Alert>{error}</Alert> : null}
+
+          <Card style={{ padding: 14, gap: 12 }}>
+            <Field
+              label="Title"
+              value={title}
+              onChangeText={setTitle}
+              placeholder="What needs doing?"
+              returnKeyType="next"
+            />
+            <Field
+              label="Description"
+              value={description}
+              onChangeText={setDescription}
+              placeholder="Markdown supported"
+              multiline
+              numberOfLines={5}
+              style={{ minHeight: 120 }}
+            />
+          </Card>
+
+          <Card style={{ paddingHorizontal: 14 }}>
+            <PropertyRow
+              label="Status"
+              value={status.text}
+              color={status.color}
+              muted={status.muted}
+              onPress={() => setPicker('status')}
+            />
+            <PropertyRow
+              label="Priority"
+              value={priorityMeta.text}
+              color={priorityMeta.color}
+              onPress={() => setPicker('priority')}
+            />
+            <PropertyRow
+              label="Estimate"
+              value={points.text}
+              muted={points.muted}
+              onPress={() => setPicker('estimate')}
+            />
+            <PropertyRow
+              label="Assignee"
+              value={assignee.text}
+              color={assignee.color}
+              muted={assignee.muted}
+              onPress={() => setPicker('assignee')}
+            />
+            <PropertyRow
+              label="Labels"
+              value={
+                labelIds.length === 0
+                  ? 'None'
+                  : labelIds
+                      .map(
+                        (id) =>
+                          props.labelOptions.find((o) => o.value === id)?.label ?? String(id),
+                      )
+                      .join(', ')
+              }
+              muted={labelIds.length === 0}
+              onPress={() => setPicker('labels')}
+            />
+            <PropertyRow
+              label="Project"
+              value={project.text}
+              muted={project.muted}
+              onPress={() => setPicker('project')}
+            />
+            <PropertyRow
+              label="Cycle"
+              value={cycle.text}
+              muted={cycle.muted}
+              onPress={() => setPicker('cycle')}
+            />
+          </Card>
+
+          <Button onPress={submit} loading={submitting} disabled={!title.trim() || !team}>
+            Create issue
+          </Button>
+        </ScrollView>
+      </KeyboardAvoidingView>
+
+      <SinglePicker
+        visible={picker === 'status'}
+        title="Status"
+        options={props.statusOptions}
+        selected={statusId}
+        emptyLabel="Team default"
+        onSelect={setStatusId}
+        onClose={() => setPicker(null)}
+      />
+      <SinglePicker
+        visible={picker === 'priority'}
+        title="Priority"
+        options={props.priorityOptions}
+        selected={priority}
+        onSelect={(value) => setPriority(value ?? 'no_priority')}
+        onClose={() => setPicker(null)}
+      />
+      <SinglePicker
+        visible={picker === 'estimate'}
+        title="Estimate"
+        options={props.estimateOptions}
+        selected={estimate}
+        // Not sized is distinct from an estimate of zero, which is why it is a
+        // row rather than the absence of one.
+        emptyLabel="Not sized"
+        onSelect={setEstimate}
+        onClose={() => setPicker(null)}
+      />
+      <SinglePicker
+        visible={picker === 'assignee'}
+        title="Assignee"
+        options={props.assigneeOptions}
+        selected={assigneeId}
+        emptyLabel="Unassigned"
+        onSelect={setAssigneeId}
+        onClose={() => setPicker(null)}
+      />
+      <MultiPicker
+        visible={picker === 'labels'}
+        title="Labels"
+        options={props.labelOptions}
+        selected={labelIds}
+        onToggle={(id) =>
+          setLabelIds((prev) =>
+            prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id],
+          )
+        }
+        onClose={() => setPicker(null)}
+        footer={
+          <InlineCreate
+            placeholder="bug"
+            busy={props.creating}
+            onCreate={async (name) => {
+              const id = await props.createLabel(name);
+              if (id !== null) setLabelIds((prev) => [...prev, id]);
+            }}
+          />
+        }
+      />
+      <SinglePicker
+        visible={picker === 'project'}
+        title="Project"
+        options={props.projectOptions}
+        selected={projectId}
+        emptyLabel="None"
+        onSelect={setProjectId}
+        onClose={() => setPicker(null)}
+        footer={
+          <InlineCreate
+            placeholder="Platform"
+            busy={props.creating}
+            onCreate={async (name) => {
+              const id = await props.createProject(name);
+              if (id !== null) setProjectId(id);
+            }}
+          />
+        }
+      />
+      <SinglePicker
+        visible={picker === 'cycle'}
+        title="Cycle"
+        options={props.cycleOptions}
+        selected={cycleId}
+        emptyLabel="None"
+        onSelect={setCycleId}
+        onClose={() => setPicker(null)}
+      />
+    </SafeAreaView>
+  );
+}
diff --git a/src/issues/property-picker.tsx b/src/issues/property-picker.tsx
new file mode 100644
index 0000000..28556f4
--- /dev/null
+++ b/src/issues/property-picker.tsx
@@ -0,0 +1,275 @@
+import { useState, type ReactNode } from 'react';
+import { Pressable, View } from 'react-native';
+
+import { Icon } from '@/ui/icon';
+import { AppText, Button, Field } from '@/ui/primitives';
+import { Sheet } from '@/ui/sheet';
+import { useTokens } from '@/ui/theme';
+
+/**
+ * The pickers every issue property is edited through.
+ *
+ * The web uses `<select>` elements, which a phone has no equivalent of worth
+ * having. A sheet of rows is the mobile idiom, and it is the same component for
+ * creating an issue and for editing one -- the difference is only whether the
+ * change is held locally or written straight through.
+ */
+export type PickerOption<T> = {
+  value: T;
+  label: string;
+  /** A dot before the label: status colours, label colours, priority. */
+  color?: string;
+  hint?: string;
+};
+
+/** A tappable row showing a property's current value, opening the sheet. */
+export function PropertyRow({
+  label,
+  value,
+  color,
+  onPress,
+  muted = false,
+}: {
+  label: string;
+  value: string;
+  color?: string;
+  onPress: () => void;
+  muted?: boolean;
+}) {
+  const t = useTokens();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`${label}: ${value}`}
+      onPress={onPress}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        paddingVertical: 12,
+      }}
+    >
+      <AppText variant="label" style={{ width: 92 }}>
+        {label}
+      </AppText>
+      {color ? (
+        <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: color }} />
+      ) : null}
+      <AppText
+        variant="body"
+        numberOfLines={1}
+        style={{ flex: 1, color: muted ? t.neutral[400] : t.neutral[900] }}
+      >
+        {value}
+      </AppText>
+      <Icon name="chevron-right" size={16} color={t.neutral[300]} />
+    </Pressable>
+  );
+}
+
+function OptionRow({
+  label,
+  color,
+  hint,
+  selected,
+  onPress,
+}: {
+  label: string;
+  color?: string;
+  hint?: string;
+  selected: boolean;
+  onPress: () => void;
+}) {
+  const t = useTokens();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={label}
+      accessibilityState={selected ? { selected: true } : {}}
+      onPress={onPress}
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 10,
+        paddingVertical: 12,
+        paddingHorizontal: 10,
+        borderRadius: t.radius.control,
+        backgroundColor: selected ? t.line.navActive : 'transparent',
+      }}
+    >
+      {color ? (
+        <View style={{ width: 10, height: 10, borderRadius: 5, backgroundColor: color }} />
+      ) : null}
+      <View style={{ flex: 1 }}>
+        <AppText variant="body" numberOfLines={1}>
+          {label}
+        </AppText>
+        {hint ? <AppText variant="hint">{hint}</AppText> : null}
+      </View>
+      {selected ? <Icon name="check" size={16} color={t.brand[600]} /> : null}
+    </Pressable>
+  );
+}
+
+/**
+ * Pick one value, or none.
+ *
+ * `null` is a real choice here rather than an absent one -- "no assignee" and
+ * "not sized yet" are meaningful states the API distinguishes, so they get their
+ * own row instead of being expressed by closing the sheet.
+ */
+export function SinglePicker<T extends string | number>({
+  visible,
+  title,
+  options,
+  selected,
+  emptyLabel,
+  onSelect,
+  onClose,
+  footer,
+}: {
+  visible: boolean;
+  title: string;
+  options: PickerOption<T>[];
+  selected: T | null;
+  /** Row for "none"; omitted when the property cannot be empty. */
+  emptyLabel?: string;
+  onSelect: (value: T | null) => void;
+  onClose: () => void;
+  footer?: ReactNode;
+}) {
+  return (
+    <Sheet visible={visible} onClose={onClose} title={title}>
+      <View style={{ gap: 2, paddingBottom: 12 }}>
+        {emptyLabel ? (
+          <OptionRow
+            label={emptyLabel}
+            selected={selected === null}
+            onPress={() => {
+              onSelect(null);
+              onClose();
+            }}
+          />
+        ) : null}
+        {options.map((option) => (
+          <OptionRow
+            key={String(option.value)}
+            label={option.label}
+            color={option.color}
+            hint={option.hint}
+            selected={selected === option.value}
+            onPress={() => {
+              onSelect(option.value);
+              onClose();
+            }}
+          />
+        ))}
+        {footer}
+      </View>
+    </Sheet>
+  );
+}
+
+/**
+ * Pick any number of values.
+ *
+ * Stays open as things are ticked, because labels are chosen in handfuls --
+ * closing after each one would mean reopening the sheet for every label.
+ */
+export function MultiPicker<T extends string | number>({
+  visible,
+  title,
+  options,
+  selected,
+  onToggle,
+  onClose,
+  footer,
+}: {
+  visible: boolean;
+  title: string;
+  options: PickerOption<T>[];
+  selected: T[];
+  onToggle: (value: T) => void;
+  onClose: () => void;
+  footer?: ReactNode;
+}) {
+  return (
+    <Sheet visible={visible} onClose={onClose} title={title}>
+      <View style={{ gap: 2, paddingBottom: 12 }}>
+        {options.map((option) => (
+          <OptionRow
+            key={String(option.value)}
+            label={option.label}
+            color={option.color}
+            selected={selected.includes(option.value)}
+            onPress={() => onToggle(option.value)}
+          />
+        ))}
+        {options.length === 0 ? (
+          <View style={{ paddingVertical: 16, alignItems: 'center' }}>
+            <AppText variant="muted">Nothing to choose from yet.</AppText>
+          </View>
+        ) : null}
+        {footer}
+      </View>
+    </Sheet>
+  );
+}
+
+/**
+ * The inline "create one while you are here" row.
+ *
+ * The web lets any member add a label or project from the issue form, and
+ * needing to leave for team settings to add a label mid-triage would be worse
+ * on a phone than it is on a desktop.
+ */
+export function InlineCreate({
+  placeholder,
+  busy,
+  onCreate,
+}: {
+  placeholder: string;
+  busy: boolean;
+  onCreate: (name: string) => void;
+}) {
+  const t = useTokens();
+  const [name, setName] = useState('');
+
+  return (
+    <View
+      style={{
+        gap: 8,
+        paddingTop: 12,
+        marginTop: 8,
+        borderTopWidth: 1,
+        borderTopColor: t.line.hairline,
+      }}
+    >
+      <Field
+        label="Create new"
+        value={name}
+        onChangeText={setName}
+        placeholder={placeholder}
+        autoCapitalize="none"
+        returnKeyType="done"
+        onSubmitEditing={() => {
+          if (name.trim()) {
+            onCreate(name.trim());
+            setName('');
+          }
+        }}
+      />
+      <Button
+        variant="ghost"
+        loading={busy}
+        disabled={!name.trim()}
+        onPress={() => {
+          onCreate(name.trim());
+          setName('');
+        }}
+      >
+        Create
+      </Button>
+    </View>
+  );
+}
diff --git a/src/issues/use-issue-properties.ts b/src/issues/use-issue-properties.ts
new file mode 100644
index 0000000..c97874e
--- /dev/null
+++ b/src/issues/use-issue-properties.ts
@@ -0,0 +1,125 @@
+import { useCallback, useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+
+import { createLabelTeamsTeamIdLabelsPost } from '@/api/generated/endpoints/labels/labels';
+import { createProjectTeamsTeamIdProjectsPost } from '@/api/generated/endpoints/projects/projects';
+import type { IssuePriority, TeamRead } from '@/api/generated/models';
+import { useTeamData } from '@/board/use-team-data';
+import { PRIORITY_LABEL, PRIORITY_ORDER, priorityColor } from '@/issues/issue-meta';
+import type { PickerOption } from '@/issues/property-picker';
+import { useTokens } from '@/ui/theme';
+
+/** The story-point scale, mirroring ESTIMATE_SCALE in the backend's issue model. */
+export const ESTIMATE_SCALE = [1, 2, 3, 5, 8] as const;
+
+/**
+ * The option lists every issue picker needs, plus inline creation for the two
+ * the web lets any member add from the issue form.
+ */
+export function useIssueProperties(team: TeamRead | undefined) {
+  const t = useTokens();
+  const queryClient = useQueryClient();
+  const data = useTeamData(team);
+  const [creating, setCreating] = useState(false);
+
+  const statusOptions: PickerOption<number>[] = data.statuses.map((status) => ({
+    value: status.id,
+    label: status.name,
+    color: status.color,
+  }));
+
+  const priorityOptions: PickerOption<IssuePriority>[] = PRIORITY_ORDER.map((priority) => ({
+    value: priority,
+    label: PRIORITY_LABEL[priority],
+    color: priorityColor(priority, t),
+  }));
+
+  const estimateOptions: PickerOption<number>[] = ESTIMATE_SCALE.map((points) => ({
+    value: points,
+    label: `${points} point${points === 1 ? '' : 's'}`,
+  }));
+
+  const assigneeOptions: PickerOption<number>[] = data.members.map((member) => ({
+    value: member.user.id,
+    label: member.user.full_name,
+    color: member.user.avatar_color,
+  }));
+
+  const labelOptions: PickerOption<number>[] = data.labels.map((label) => ({
+    value: label.id,
+    label: label.name,
+    color: label.color,
+  }));
+
+  const projectOptions: PickerOption<number>[] = data.projects.map((project) => ({
+    value: project.id,
+    label: project.name,
+  }));
+
+  const cycleOptions: PickerOption<number>[] = data.cycles.map((cycle) => ({
+    value: cycle.id,
+    label: cycle.display_name,
+    hint: cycle.state,
+  }));
+
+  const createLabel = useCallback(
+    async (name: string): Promise<number | null> => {
+      if (!team) return null;
+      setCreating(true);
+      try {
+        const label = await createLabelTeamsTeamIdLabelsPost(team.id, { name });
+        await queryClient.invalidateQueries({ queryKey: [`/teams/${team.id}/labels`] });
+        return label.id;
+      } catch {
+        return null;
+      } finally {
+        setCreating(false);
+      }
+    },
+    [team, queryClient],
+  );
+
+  const createProject = useCallback(
+    async (name: string): Promise<number | null> => {
+      if (!team) return null;
+      setCreating(true);
+      try {
+        const project = await createProjectTeamsTeamIdProjectsPost(team.id, { name });
+        await queryClient.invalidateQueries({ queryKey: [`/teams/${team.id}/projects`] });
+        return project.id;
+      } catch {
+        return null;
+      } finally {
+        setCreating(false);
+      }
+    },
+    [team, queryClient],
+  );
+
+  return {
+    ...data,
+    statusOptions,
+    priorityOptions,
+    estimateOptions,
+    assigneeOptions,
+    labelOptions,
+    projectOptions,
+    cycleOptions,
+    createLabel,
+    createProject,
+    creating,
+  };
+}
+
+/** Look a value's label up for a property row, falling back to a placeholder. */
+export function labelFor<T extends string | number>(
+  options: PickerOption<T>[],
+  value: T | null,
+  empty: string,
+): { text: string; color?: string; muted: boolean } {
+  if (value === null) return { text: empty, muted: true };
+  const match = options.find((option) => option.value === value);
+  // A property naming a row the team has since deleted still has to render.
+  if (!match) return { text: String(value), muted: true };
+  return { text: match.label, color: match.color, muted: false };
+}
diff --git a/src/ui/icon.tsx b/src/ui/icon.tsx
index e4b68ac..5faf38d 100644
--- a/src/ui/icon.tsx
+++ b/src/ui/icon.tsx
@@ -20,7 +20,9 @@ export type IconName =
   | 'sun'
   | 'moon'
   | 'check'
-  | 'logout';
+  | 'logout'
+  | 'trash'
+  | 'plus';
 
 export function Icon({
   name,
@@ -111,6 +113,15 @@ export function Icon({
 
       {name === 'check' ? <Path d="m5 12.5 4.5 4.5L19 7.5" {...stroke} /> : null}
 
+      {name === 'plus' ? <Path d="M12 5v14M5 12h14" {...stroke} /> : null}
+
+      {name === 'trash' ? (
+        <Path
+          d="M4 7h16M9 7V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2M6 7l1 12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1l1-12M10 11v5M14 11v5"
+          {...stroke}
+        />
+      ) : null}
+
       {name === 'logout' ? (
         <Path
           d="M10 17l5-5-5-5M15 12H3M13 4h6a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-6"