marcus/gtd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 17 Wiki Activity

UI: restyle weekly review, project detail and settings

Browse Source 
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude
2026-09-01 22:39:12 +10:00
parent b183c2849b
commit 31934c7c27
3 changed files with 147 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
app/src/app/project/[id].tsx
View File

@@ -1,9 +1,11 @@
import { Stack, useLocalSearchParams, useRouter } from "expo-router"; import { Stack, useLocalSearchParams, useRouter } from "expo-router";
import { useState } from "react"; import { useState } from "react";
import { FlatList, Pressable, StyleSheet, Text, TextInput, View } from "react-native"; 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 { 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 { useStore } from "../../lib/useStore";
import type { ProjectStatus } from "../../lib/types"; import type { ProjectStatus } from "../../lib/types";
@@ -16,7 +18,7 @@ export default function ProjectDetail() {
const [draft, setDraft] = useState(""); const [draft, setDraft] = useState("");
const project = store.projects.find((p) => p.id === id); 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 const tasks = store.tasks
.filter((t) => t.project_id === id && t.status !== "done" && t.status !== "trashed") .filter((t) => t.project_id === id && t.status !== "done" && t.status !== "trashed")
@@ -26,13 +28,14 @@ export default function ProjectDetail() {
const title = draft.trim(); const title = draft.trim();
if (!title) return; if (!title) return;
setDraft(""); setDraft("");
haptic.success();
createTask({ title, status: "next", project_id: id }); createTask({ title, status: "next", project_id: id });
}; };
return ( return (
<View style={{ flex: 1, backgroundColor: C.bg }}> <View style={{ flex: 1, backgroundColor: C.bg }}>
<Stack.Screen options={{ title: project.name }} /> <Stack.Screen options={{ title: project.name }} />
<View style={{ padding: 16, paddingBottom: 0 }}> <View style={{ paddingHorizontal: space.lg, paddingTop: space.md }}>
<Chips <Chips
label="Status" label="Status"
options={STATUSES} options={STATUSES}
@@ -53,22 +56,39 @@ export default function ProjectDetail() {
<FlatList <FlatList
data={tasks} data={tasks}
keyExtractor={(t) => t.id} keyExtractor={(t) => t.id}
renderItem={({ item }) => ( renderItem={({ item, index }) => (
<Pressable style={s.row} onPress={() => router.push(`/task/${item.id}`)}> <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 <Pressable
style={s.checkbox} style={s.checkbox}
hitSlop={10} hitSlop={10}
onPress={() => updateTask(item.id, { status: "done" })} onPress={() => {
haptic.success();
updateTask(item.id, { status: "done" });
}}
/> />
<View style={{ flex: 1 }}> <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> <Text style={s.meta}>{[item.status, item.context].filter(Boolean).join(" · ")}</Text>
</View> </View>
<Icon name="chevron" size={16} color={C.muted} />
</Pressable> </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 <Button
title="Drop project" title="Drop project"
danger danger
@@ -84,27 +104,33 @@ export default function ProjectDetail() {
const s = StyleSheet.create({ const s = StyleSheet.create({
capture: { capture: {
margin: 12, marginHorizontal: space.lg,
marginBottom: 4, marginBottom: space.lg,
padding: 14, paddingHorizontal: space.lg,
borderRadius: 12, paddingVertical: space.md + 2,
borderRadius: radius.md,
backgroundColor: C.surface, backgroundColor: C.surface,
color: C.text, color: C.text,
fontSize: 16, fontSize: 16,
borderWidth: 1, borderWidth: StyleSheet.hairlineWidth,
borderColor: C.border, borderColor: C.border,
}, },
listContent: { paddingHorizontal: space.lg, paddingBottom: space.lg },
row: { row: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
gap: 12, gap: space.md,
paddingVertical: 14, paddingVertical: space.md + 2,
paddingHorizontal: 16, paddingHorizontal: space.lg,
borderBottomWidth: StyleSheet.hairlineWidth, backgroundColor: C.surface,
borderBottomColor: C.border,
}, },
checkbox: { width: 22, height: 22, borderRadius: 11, borderWidth: 2, borderColor: C.muted }, first: { borderTopLeftRadius: radius.lg, borderTopRightRadius: radius.lg },
title: { color: C.text, fontSize: 16 }, last: {
meta: { color: C.muted, fontSize: 13, marginTop: 2 }, borderBottomLeftRadius: radius.lg,
empty: { color: C.muted, textAlign: "center", marginTop: 48 }, 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 },
}); });

133
app/src/app/review.tsx
View File

@@ -3,24 +3,34 @@
// done on the checkbox, so nothing needs a trip through the edit modal. // done on the checkbox, so nothing needs a trip through the edit modal.
import { useRouter } from "expo-router"; import { useRouter } from "expo-router";
import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native"; 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 { friendlyDate } from "../lib/dates";
import { haptic } from "../lib/haptics"; import { haptic } from "../lib/haptics";
import { PRIORITY_COLOR } from "../lib/priority"; import { PRIORITY_COLOR } from "../lib/priority";
import { daysSince, markReviewed, useLastReview } from "../lib/review"; import { daysSince, markReviewed, useLastReview } from "../lib/review";
import { reviewBuckets, trashTask, updateTask } from "../lib/store"; 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 { useStore } from "../lib/useStore";
import type { Task } from "../lib/types"; 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 router = useRouter();
const act = (fn: () => void) => () => { const act = (fn: () => void) => () => {
haptic.select(); haptic.select();
fn(); fn();
}; };
return ( return (
<View style={s.row}> <View style={[s.row, last && s.rowLast]}>
<Pressable <Pressable
style={s.check} style={s.check}
hitSlop={8} hitSlop={8}
@@ -29,7 +39,7 @@ function ReviewRow({ task, showDefer }: { task: Task; showDefer?: boolean }) {
updateTask(task.id, { status: "done" }); 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>
<Pressable style={{ flex: 1 }} onPress={() => router.push(`/task/${task.id}`)}> <Pressable style={{ flex: 1 }} onPress={() => router.push(`/task/${task.id}`)}>
<Text style={s.title} numberOfLines={2}> <Text style={s.title} numberOfLines={2}>
@@ -46,17 +56,29 @@ function ReviewRow({ task, showDefer }: { task: Task; showDefer?: boolean }) {
</Text> </Text>
</Pressable> </Pressable>
{task.status !== "next" && ( {task.status !== "next" && (
<Pressable style={s.action} hitSlop={6} onPress={act(() => updateTask(task.id, { status: "next" }))}> <Pressable
<Text style={s.actionText}>▶️</Text> 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> </Pressable>
)} )}
{task.status !== "someday" && ( {task.status !== "someday" && (
<Pressable style={s.action} hitSlop={6} onPress={act(() => updateTask(task.id, { status: "someday" }))}> <Pressable
<Text style={s.actionText}>💭</Text> 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>
)} )}
<Pressable style={s.action} hitSlop={6} onPress={act(() => trashTask(task.id))}> <Pressable
<Text style={s.actionText}>🗑️</Text> style={({ pressed }) => [s.action, pressed && s.actionPressed]}
hitSlop={6}
onPress={act(() => trashTask(task.id))}
>
<Text style={s.dropText}>Drop</Text>
</Pressable> </Pressable>
</View> </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 }) { function Section({ title, hint, tasks, showDefer }: { title: string; hint: string; tasks: Task[]; showDefer?: boolean }) {
if (tasks.length === 0) return null; if (tasks.length === 0) return null;
return ( return (
<View style={{ marginBottom: 8 }}> <View>
<Text style={s.sectionTitle}> <SectionHeader>
{title} ({tasks.length}) {title} ({tasks.length})
</Text> </SectionHeader>
<Text style={s.sectionHint}>{hint}</Text> <Text style={s.sectionHint}>{hint}</Text>
{tasks.map((t) => ( <Card>
<ReviewRow key={t.id} task={t} showDefer={showDefer} /> {tasks.map((t, i) => (
))} <ReviewRow key={t.id} task={t} showDefer={showDefer} last={i === tasks.length - 1} />
))}
</Card>
</View> </View>
); );
} }
@@ -93,7 +117,7 @@ export default function Review() {
!buckets.stuckProjects.length; !buckets.stuckProjects.length;
return ( 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}> <Text style={s.lastReview}>
{last ? (days === 0 ? "Last review: today" : `Last review: ${days}d ago`) : "First review — welcome."} {last ? (days === 0 ? "Last review: today" : `Last review: ${days}d ago`) : "First review — welcome."}
</Text> </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 /> <Section title="Deferred" hint="Hidden from lists — just so you know they're coming." tasks={buckets.deferred} showDefer />
{buckets.stuckProjects.length > 0 && ( {buckets.stuckProjects.length > 0 && (
<View style={{ marginBottom: 8 }}> <View>
<Text style={s.sectionTitle}>Stuck projects ({buckets.stuckProjects.length})</Text> <SectionHeader>Stuck projects ({buckets.stuckProjects.length})</SectionHeader>
<Text style={s.sectionHint}>Active, but no next action — decide the next step or park them.</Text> <Text style={s.sectionHint}>Active, but no next action — decide the next step or park them.</Text>
{buckets.stuckProjects.map((p) => ( <Card>
<Pressable key={p.id} style={s.row} onPress={() => router.push(`/project/${p.id}`)}> {buckets.stuckProjects.map((p, i) => (
<Text style={[s.title, { flex: 1 }]}>{p.name}</Text> <Pressable
<Text style={s.meta}>open →</Text> key={p.id}
</Pressable> 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> </View>
)} )}
{empty && <Text style={s.empty}>All clear. Nothing needs a decision.</Text>} {empty && <Empty>All clear. Nothing needs a decision.</Empty>}
<Button <Button
title="✓ Mark review complete" title="Mark review complete"
onPress={async () => { onPress={async () => {
haptic.success(); haptic.success();
await markReviewed(); await markReviewed();
@@ -142,30 +176,35 @@ export default function Review() {
} }
const s = StyleSheet.create({ const s = StyleSheet.create({
lastReview: { color: C.muted, fontSize: 13, marginBottom: 12 }, content: { padding: space.lg, paddingBottom: 48 },
sectionTitle: { lastReview: { ...type.meta, color: C.textSecondary, marginBottom: space.xs },
color: C.text, sectionHint: { ...type.meta, color: C.muted, paddingHorizontal: space.xs, marginBottom: space.sm },
fontSize: 15,
fontWeight: "700",
paddingTop: 12,
},
sectionHint: { color: C.muted, fontSize: 13, marginBottom: 4 },
row: { row: {
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
gap: 10, gap: space.md,
paddingVertical: 12, paddingVertical: space.md,
paddingHorizontal: space.lg,
borderBottomWidth: StyleSheet.hairlineWidth, borderBottomWidth: StyleSheet.hairlineWidth,
borderBottomColor: C.border, borderBottomColor: C.separator,
backgroundColor: C.surface,
}, },
rowLast: { borderBottomWidth: 0 },
check: { paddingRight: 2 }, check: { paddingRight: 2 },
checkCircle: { width: 20, height: 20, borderRadius: 10, borderWidth: 2 }, checkbox: { width: 21, height: 21, borderRadius: 7, borderWidth: 1.5 },
title: { color: C.text, fontSize: 15 }, title: { ...type.body, color: C.text },
meta: { color: C.muted, fontSize: 12, marginTop: 2 }, meta: { ...type.meta, fontSize: 12, color: C.muted, marginTop: 2 },
action: { paddingHorizontal: 4 }, action: {
actionText: { fontSize: 17 }, minWidth: 30,
empty: { color: C.muted, textAlign: "center", marginVertical: 32, fontSize: 15 }, height: 28,
archiveRow: { flexDirection: "row", justifyContent: "center", gap: 8, marginTop: 4 }, paddingHorizontal: space.sm,
archiveLink: { color: C.muted, fontSize: 14, padding: 6 }, 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" }, archiveDot: { color: C.muted, alignSelf: "center" },
}); });

18
app/src/app/settings.tsx
View File

@@ -1,12 +1,12 @@
import * as Application from "expo-application"; import * as Application from "expo-application";
import { useRouter } from "expo-router"; import { useRouter } from "expo-router";
import { useEffect, useState } from "react"; 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 { Button, Field } from "../components/ui";
import { api } from "../lib/api"; import { api } from "../lib/api";
import { DEFAULT_URL, getConfig, setConfig } from "../lib/config"; import { DEFAULT_URL, getConfig, setConfig } from "../lib/config";
import { sync } from "../lib/store"; import { sync } from "../lib/store";
import { C } from "../lib/theme"; import { C, space, type } from "../lib/theme";
export default function Settings() { export default function Settings() {
const router = useRouter(); const router = useRouter();
@@ -33,7 +33,7 @@ export default function Settings() {
}; };
return ( 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="Server" value={url} onChangeText={setUrl} autoCapitalize="none" autoCorrect={false} />
<Field <Field
label="API token" label="API token"
@@ -44,11 +44,15 @@ export default function Settings() {
secureTextEntry secureTextEntry
/> />
<Button title="Save & test" onPress={save} /> <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. */} {/* CI stamps versionName from the release tag — confirms which build Obtainium installed. */}
<Text style={{ color: C.muted, fontSize: 13, textAlign: "center", marginTop: 32 }}> <Text style={s.version}>GTD v{Application.nativeApplicationVersion ?? "dev"}</Text>
GTD v{Application.nativeApplicationVersion ?? "dev"}
</Text>
</ScrollView> </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 },
});