UI: restyle weekly review, project detail and settings

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-09-01 22:39:12 +10:00
parent b183c2849b
commit 31934c7c27
3 changed files with 147 additions and 78 deletions
--- a/app/src/app/project/[id].tsx
+++ b/app/src/app/project/[id].tsx
@@ -1,9 +1,11 @@
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
 import { useState } from "react";
 import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
-import { Button, Chips } from "../../components/ui";
+import Icon from "../../components/Icon";
+import { Button, Chips, Empty, Separator } from "../../components/ui";
+import { haptic } from "../../lib/haptics";
 import { createTask, dropProject, updateProject, updateTask } from "../../lib/store";
-import { C } from "../../lib/theme";
+import { C, radius, shadow, space, type } from "../../lib/theme";
 import { useStore } from "../../lib/useStore";
 import type { ProjectStatus } from "../../lib/types";

@@ -16,7 +18,7 @@ export default function ProjectDetail() {
  const [draft, setDraft] = useState("");

  const project = store.projects.find((p) => p.id === id);
-  if (!project) return <Text style={{ color: C.muted, margin: 16 }}>Project not found.</Text>;
+  if (!project) return <Empty>Project not found.</Empty>;

  const tasks = store.tasks
    .filter((t) => t.project_id === id && t.status !== "done" && t.status !== "trashed")
@@ -26,13 +28,14 @@ export default function ProjectDetail() {
    const title = draft.trim();
    if (!title) return;
    setDraft("");
+    haptic.success();
    createTask({ title, status: "next", project_id: id });
  };

  return (
    <View style={{ flex: 1, backgroundColor: C.bg }}>
      <Stack.Screen options={{ title: project.name }} />
-      <View style={{ padding: 16, paddingBottom: 0 }}>
+      <View style={{ paddingHorizontal: space.lg, paddingTop: space.md }}>
        <Chips
          label="Status"
          options={STATUSES}
@@ -53,22 +56,39 @@ export default function ProjectDetail() {
      <FlatList
        data={tasks}
        keyExtractor={(t) => t.id}
-        renderItem={({ item }) => (
-          <Pressable style={s.row} onPress={() => router.push(`/task/${item.id}`)}>
+        renderItem={({ item, index }) => (
+          <Pressable
+            style={({ pressed }) => [
+              s.row,
+              index === 0 && s.first,
+              index === tasks.length - 1 && s.last,
+              pressed && { backgroundColor: C.surface2 },
+            ]}
+            onPress={() => router.push(`/task/${item.id}`)}
+          >
            <Pressable
              style={s.checkbox}
              hitSlop={10}
-              onPress={() => updateTask(item.id, { status: "done" })}
+              onPress={() => {
+                haptic.success();
+                updateTask(item.id, { status: "done" });
+              }}
            />
            <View style={{ flex: 1 }}>
-              <Text style={s.title}>{item.title}</Text>
+              <Text style={s.title} numberOfLines={2}>
+                {item.title}
+              </Text>
              <Text style={s.meta}>{[item.status, item.context].filter(Boolean).join("  ·  ")}</Text>
            </View>
+            <Icon name="chevron" size={16} color={C.muted} />
          </Pressable>
        )}
-        ListEmptyComponent={<Text style={s.empty}>No open tasks in this project.</Text>}
+        ItemSeparatorComponent={() => <Separator inset={space.lg + 21 + space.md} />}
+        ListEmptyComponent={<Empty>No open tasks in this project.</Empty>}
+        contentContainerStyle={s.listContent}
+        showsVerticalScrollIndicator={false}
      />
-      <View style={{ padding: 16 }}>
+      <View style={{ paddingHorizontal: space.lg, paddingBottom: space.lg }}>
        <Button
          title="Drop project"
          danger
@@ -84,27 +104,33 @@ export default function ProjectDetail() {

 const s = StyleSheet.create({
  capture: {
-    margin: 12,
-    marginBottom: 4,
-    padding: 14,
-    borderRadius: 12,
+    marginHorizontal: space.lg,
+    marginBottom: space.lg,
+    paddingHorizontal: space.lg,
+    paddingVertical: space.md + 2,
+    borderRadius: radius.md,
    backgroundColor: C.surface,
    color: C.text,
    fontSize: 16,
-    borderWidth: 1,
+    borderWidth: StyleSheet.hairlineWidth,
    borderColor: C.border,
  },
+  listContent: { paddingHorizontal: space.lg, paddingBottom: space.lg },
  row: {
    flexDirection: "row",
    alignItems: "center",
-    gap: 12,
-    paddingVertical: 14,
-    paddingHorizontal: 16,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: C.border,
+    gap: space.md,
+    paddingVertical: space.md + 2,
+    paddingHorizontal: space.lg,
+    backgroundColor: C.surface,
  },
-  checkbox: { width: 22, height: 22, borderRadius: 11, borderWidth: 2, borderColor: C.muted },
-  title: { color: C.text, fontSize: 16 },
-  meta: { color: C.muted, fontSize: 13, marginTop: 2 },
-  empty: { color: C.muted, textAlign: "center", marginTop: 48 },
+  first: { borderTopLeftRadius: radius.lg, borderTopRightRadius: radius.lg },
+  last: {
+    borderBottomLeftRadius: radius.lg,
+    borderBottomRightRadius: radius.lg,
+    ...shadow.card,
+  },
+  checkbox: { width: 21, height: 21, borderRadius: 7, borderWidth: 1.5, borderColor: C.muted },
+  title: { ...type.row, color: C.text },
+  meta: { ...type.meta, color: C.muted, marginTop: 2 },
 });
--- a/app/src/app/review.tsx
+++ b/app/src/app/review.tsx
@@ -3,24 +3,34 @@
 // done on the checkbox, so nothing needs a trip through the edit modal.
 import { useRouter } from "expo-router";
 import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
-import { Button } from "../components/ui";
+import Icon from "../components/Icon";
+import { Button, Card, Empty, SectionHeader } from "../components/ui";
 import { friendlyDate } from "../lib/dates";
 import { haptic } from "../lib/haptics";
 import { PRIORITY_COLOR } from "../lib/priority";
 import { daysSince, markReviewed, useLastReview } from "../lib/review";
 import { reviewBuckets, trashTask, updateTask } from "../lib/store";
-import { C } from "../lib/theme";
+import { C, radius, space, type } from "../lib/theme";
 import { useStore } from "../lib/useStore";
 import type { Task } from "../lib/types";

-function ReviewRow({ task, showDefer }: { task: Task; showDefer?: boolean }) {
+function ReviewRow({
+  task,
+  showDefer,
+  last,
+}: {
+  task: Task;
+  showDefer?: boolean;
+  /** The card already draws the bottom edge — don't double it up. */
+  last?: boolean;
+}) {
  const router = useRouter();
  const act = (fn: () => void) => () => {
    haptic.select();
    fn();
  };
  return (
-    <View style={s.row}>
+    <View style={[s.row, last && s.rowLast]}>
      <Pressable
        style={s.check}
        hitSlop={8}
@@ -29,7 +39,7 @@ function ReviewRow({ task, showDefer }: { task: Task; showDefer?: boolean }) {
          updateTask(task.id, { status: "done" });
        })}
      >
-        <View style={[s.checkCircle, { borderColor: PRIORITY_COLOR[task.priority] }]} />
+        <View style={[s.checkbox, { borderColor: PRIORITY_COLOR[task.priority] }]} />
      </Pressable>
      <Pressable style={{ flex: 1 }} onPress={() => router.push(`/task/${task.id}`)}>
        <Text style={s.title} numberOfLines={2}>
@@ -46,17 +56,29 @@ function ReviewRow({ task, showDefer }: { task: Task; showDefer?: boolean }) {
        </Text>
      </Pressable>
      {task.status !== "next" && (
-        <Pressable style={s.action} hitSlop={6} onPress={act(() => updateTask(task.id, { status: "next" }))}>
-          <Text style={s.actionText}>▶️</Text>
+        <Pressable
+          style={({ pressed }) => [s.action, pressed && s.actionPressed]}
+          hitSlop={6}
+          onPress={act(() => updateTask(task.id, { status: "next" }))}
+        >
+          <Icon name="next" size={14} color={C.accent} />
        </Pressable>
      )}
      {task.status !== "someday" && (
-        <Pressable style={s.action} hitSlop={6} onPress={act(() => updateTask(task.id, { status: "someday" }))}>
-          <Text style={s.actionText}>💭</Text>
+        <Pressable
+          style={({ pressed }) => [s.action, pressed && s.actionPressed]}
+          hitSlop={6}
+          onPress={act(() => updateTask(task.id, { status: "someday" }))}
+        >
+          <Icon name="someday" size={14} color={C.textSecondary} bg={C.surface} />
        </Pressable>
      )}
-      <Pressable style={s.action} hitSlop={6} onPress={act(() => trashTask(task.id))}>
-        <Text style={s.actionText}>🗑️</Text>
+      <Pressable
+        style={({ pressed }) => [s.action, pressed && s.actionPressed]}
+        hitSlop={6}
+        onPress={act(() => trashTask(task.id))}
+      >
+        <Text style={s.dropText}>Drop</Text>
      </Pressable>
    </View>
  );
@@ -65,14 +87,16 @@ function ReviewRow({ task, showDefer }: { task: Task; showDefer?: boolean }) {
 function Section({ title, hint, tasks, showDefer }: { title: string; hint: string; tasks: Task[]; showDefer?: boolean }) {
  if (tasks.length === 0) return null;
  return (
-    <View style={{ marginBottom: 8 }}>
-      <Text style={s.sectionTitle}>
+    <View>
+      <SectionHeader>
        {title} ({tasks.length})
-      </Text>
+      </SectionHeader>
      <Text style={s.sectionHint}>{hint}</Text>
-      {tasks.map((t) => (
-        <ReviewRow key={t.id} task={t} showDefer={showDefer} />
-      ))}
+      <Card>
+        {tasks.map((t, i) => (
+          <ReviewRow key={t.id} task={t} showDefer={showDefer} last={i === tasks.length - 1} />
+        ))}
+      </Card>
    </View>
  );
 }
@@ -93,7 +117,7 @@ export default function Review() {
    !buckets.stuckProjects.length;

  return (
-    <ScrollView style={{ flex: 1, backgroundColor: C.bg }} contentContainerStyle={{ padding: 16, paddingBottom: 48 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: C.bg }} contentContainerStyle={s.content}>
      <Text style={s.lastReview}>
        {last ? (days === 0 ? "Last review: today" : `Last review: ${days}d ago`) : "First review — welcome."}
      </Text>
@@ -105,22 +129,32 @@ export default function Review() {
      <Section title="Deferred" hint="Hidden from lists — just so you know they're coming." tasks={buckets.deferred} showDefer />

      {buckets.stuckProjects.length > 0 && (
-        <View style={{ marginBottom: 8 }}>
-          <Text style={s.sectionTitle}>Stuck projects ({buckets.stuckProjects.length})</Text>
+        <View>
+          <SectionHeader>Stuck projects ({buckets.stuckProjects.length})</SectionHeader>
          <Text style={s.sectionHint}>Active, but no next action — decide the next step or park them.</Text>
-          {buckets.stuckProjects.map((p) => (
-            <Pressable key={p.id} style={s.row} onPress={() => router.push(`/project/${p.id}`)}>
-              <Text style={[s.title, { flex: 1 }]}>{p.name}</Text>
-              <Text style={s.meta}>open →</Text>
-            </Pressable>
-          ))}
+          <Card>
+            {buckets.stuckProjects.map((p, i) => (
+              <Pressable
+                key={p.id}
+                style={({ pressed }) => [
+                  s.row,
+                  i === buckets.stuckProjects.length - 1 && s.rowLast,
+                  pressed && { backgroundColor: C.surface2 },
+                ]}
+                onPress={() => router.push(`/project/${p.id}`)}
+              >
+                <Text style={[s.title, { flex: 1 }]}>{p.name}</Text>
+                <Icon name="chevron" size={16} color={C.muted} />
+              </Pressable>
+            ))}
+          </Card>
        </View>
      )}

-      {empty && <Text style={s.empty}>All clear. Nothing needs a decision.</Text>}
+      {empty && <Empty>All clear. Nothing needs a decision.</Empty>}

      <Button
-        title="✓ Mark review complete"
+        title="Mark review complete"
        onPress={async () => {
          haptic.success();
          await markReviewed();
@@ -142,30 +176,35 @@ export default function Review() {
 }

 const s = StyleSheet.create({
-  lastReview: { color: C.muted, fontSize: 13, marginBottom: 12 },
-  sectionTitle: {
-    color: C.text,
-    fontSize: 15,
-    fontWeight: "700",
-    paddingTop: 12,
-  },
-  sectionHint: { color: C.muted, fontSize: 13, marginBottom: 4 },
+  content: { padding: space.lg, paddingBottom: 48 },
+  lastReview: { ...type.meta, color: C.textSecondary, marginBottom: space.xs },
+  sectionHint: { ...type.meta, color: C.muted, paddingHorizontal: space.xs, marginBottom: space.sm },
  row: {
    flexDirection: "row",
    alignItems: "center",
-    gap: 10,
-    paddingVertical: 12,
+    gap: space.md,
+    paddingVertical: space.md,
+    paddingHorizontal: space.lg,
    borderBottomWidth: StyleSheet.hairlineWidth,
-    borderBottomColor: C.border,
+    borderBottomColor: C.separator,
+    backgroundColor: C.surface,
  },
+  rowLast: { borderBottomWidth: 0 },
  check: { paddingRight: 2 },
-  checkCircle: { width: 20, height: 20, borderRadius: 10, borderWidth: 2 },
-  title: { color: C.text, fontSize: 15 },
-  meta: { color: C.muted, fontSize: 12, marginTop: 2 },
-  action: { paddingHorizontal: 4 },
-  actionText: { fontSize: 17 },
-  empty: { color: C.muted, textAlign: "center", marginVertical: 32, fontSize: 15 },
-  archiveRow: { flexDirection: "row", justifyContent: "center", gap: 8, marginTop: 4 },
-  archiveLink: { color: C.muted, fontSize: 14, padding: 6 },
+  checkbox: { width: 21, height: 21, borderRadius: 7, borderWidth: 1.5 },
+  title: { ...type.body, color: C.text },
+  meta: { ...type.meta, fontSize: 12, color: C.muted, marginTop: 2 },
+  action: {
+    minWidth: 30,
+    height: 28,
+    paddingHorizontal: space.sm,
+    borderRadius: radius.sm,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  actionPressed: { backgroundColor: C.surface2 },
+  dropText: { ...type.meta, color: C.danger, fontWeight: "500" },
+  archiveRow: { flexDirection: "row", justifyContent: "center", gap: space.sm, marginTop: space.xs },
+  archiveLink: { ...type.meta, color: C.textSecondary, padding: space.sm },
  archiveDot: { color: C.muted, alignSelf: "center" },
 });
--- a/app/src/app/settings.tsx
+++ b/app/src/app/settings.tsx
@@ -1,12 +1,12 @@
 import * as Application from "expo-application";
 import { useRouter } from "expo-router";
 import { useEffect, useState } from "react";
-import { ScrollView, Text } from "react-native";
+import { ScrollView, StyleSheet, Text } from "react-native";
 import { Button, Field } from "../components/ui";
 import { api } from "../lib/api";
 import { DEFAULT_URL, getConfig, setConfig } from "../lib/config";
 import { sync } from "../lib/store";
-import { C } from "../lib/theme";
+import { C, space, type } from "../lib/theme";

 export default function Settings() {
  const router = useRouter();
@@ -33,7 +33,7 @@ export default function Settings() {
  };

  return (
-    <ScrollView style={{ flex: 1, backgroundColor: C.bg }} contentContainerStyle={{ padding: 16 }}>
+    <ScrollView style={{ flex: 1, backgroundColor: C.bg }} contentContainerStyle={s.content}>
      <Field label="Server" value={url} onChangeText={setUrl} autoCapitalize="none" autoCorrect={false} />
      <Field
        label="API token"
@@ -44,11 +44,15 @@ export default function Settings() {
        secureTextEntry
      />
      <Button title="Save & test" onPress={save} />
-      {status && <Text style={{ color: C.danger }}>{status}</Text>}
+      {status && <Text style={s.error}>{status}</Text>}
      {/* CI stamps versionName from the release tag — confirms which build Obtainium installed. */}
-      <Text style={{ color: C.muted, fontSize: 13, textAlign: "center", marginTop: 32 }}>
-        GTD v{Application.nativeApplicationVersion ?? "dev"}
-      </Text>
+      <Text style={s.version}>GTD v{Application.nativeApplicationVersion ?? "dev"}</Text>
    </ScrollView>
  );
 }
+
+const s = StyleSheet.create({
+  content: { padding: space.lg },
+  error: { ...type.meta, color: C.danger, marginTop: space.xs },
+  version: { ...type.meta, color: C.muted, textAlign: "center", marginTop: space.xxl },
+});