feat: personal/work area toggle

Global lens in the home header: every list, Today, Projects and Review show only the active area; new rows are born into it. Tasks and projects gain an area column (personal default); the task form's Area chip re-files across areas. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01SW5iVXkZ2JBHgyweMCRymY
2026-09-08 17:05:50 +10:00
parent 26922af997
commit abc380bb84
13 changed files with 295 additions and 30 deletions
--- a/app/src/app/_layout.tsx
+++ b/app/src/app/_layout.tsx
@@ -5,6 +5,7 @@ import { useEffect } from "react";
 import { AppState, Pressable } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
 import { getState, hydrate, subscribe, sync } from "../lib/store";
+import AreaToggle from "../components/AreaToggle";
 import Icon from "../components/Icon";
 import { ToastHost } from "../components/Toast";
 import { C, space } from "../lib/theme";
@@ -54,6 +55,11 @@ export default function RootLayout() {
          name="index"
          options={{
            title: "GTD",
+            // The personal/work switch sits where the title would be: it is
+            // the screen's identity, and it must be reachable from the top of
+            // every visit without scrolling.
+            headerTitle: () => <AreaToggle />,
+            headerTitleAlign: "center",
            headerRight: () => (
              <Link href="/settings" asChild>
                <Pressable
--- a/app/src/app/project/[id].tsx
+++ b/app/src/app/project/[id].tsx
@@ -30,7 +30,7 @@ export default function ProjectDetail() {
    if (!title) return;
    setDraft("");
    haptic.success();
-    createTask({ title, status: "next", project_id: id });
+    createTask({ title, status: "next", project_id: id, area: project.area ?? "personal" });
  };

  return (
--- a/app/src/app/task/[id].tsx
+++ b/app/src/app/task/[id].tsx
@@ -25,6 +25,7 @@ const toDraft = (t: Task): TaskDraft => ({
  estimate_min: t.estimate_min,
  repeat: t.repeat,
  priority: t.priority,
+  area: t.area ?? "personal",
 });

 export default function TaskDetail() {
--- a/app/src/components/AreaToggle.tsx
+++ b/app/src/components/AreaToggle.tsx
@@ -0,0 +1,64 @@
+// The personal / work switch that lives in the home header.
+//
+// A two-segment pill rather than a menu or a settings row: the whole point is
+// that flipping halves of your life is one tap and its state is always
+// visible. Work gets its own tone so a glance at the header tells you which
+// lens is on even before you read the label.
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { haptic } from "../lib/haptics";
+import { setArea } from "../lib/store";
+import { C, radius, type } from "../lib/theme";
+import { useStore } from "../lib/useStore";
+import { AREA_LABEL, AREAS, type Area } from "../lib/types";
+
+export const AREA_TONE: Record<Area, string> = { personal: C.accent, work: C.work };
+
+export default function AreaToggle() {
+  const { area } = useStore();
+  return (
+    <View style={s.track} accessibilityRole="tablist">
+      {AREAS.map((a) => {
+        const active = a === area;
+        return (
+          <Pressable
+            key={a}
+            accessibilityRole="tab"
+            accessibilityState={{ selected: active }}
+            hitSlop={6}
+            onPress={() => {
+              if (active) return;
+              haptic.select();
+              setArea(a);
+            }}
+            style={({ pressed }) => [
+              s.segment,
+              active && { backgroundColor: AREA_TONE[a] },
+              pressed && !active && s.segmentPressed,
+            ]}
+          >
+            <Text style={[s.label, active && s.labelActive]}>{AREA_LABEL[a]}</Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  track: {
+    flexDirection: "row",
+    padding: 3,
+    borderRadius: radius.pill,
+    backgroundColor: C.surface2,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: C.border,
+  },
+  segment: {
+    paddingVertical: 5,
+    paddingHorizontal: 16,
+    borderRadius: radius.pill,
+  },
+  segmentPressed: { backgroundColor: C.border },
+  label: { ...type.chip, color: C.textSecondary },
+  labelActive: { color: C.onAccent, fontWeight: "600" },
+});
--- a/app/src/components/Icon.tsx
+++ b/app/src/components/Icon.tsx
@@ -18,6 +18,7 @@ export type IconName =
  | "flag"
  | "repeat"
  | "tag"
+  | "area"
  | "plus"
  | "close"
  | "chevron";
@@ -281,6 +282,38 @@ export default function Icon({ name, size = 22, color = C.textSecondary, bg = C.
        </View>
      );

+    case "area":
+      // Briefcase: a body with a short handle on top.
+      return (
+        <View style={[box, s.center]}>
+          <View
+            style={{
+              position: "absolute",
+              top: size * 0.12,
+              width: size * 0.36,
+              height: size * 0.26,
+              borderWidth: w,
+              borderBottomWidth: 0,
+              borderColor: color,
+              borderTopLeftRadius: 3,
+              borderTopRightRadius: 3,
+            }}
+          />
+          <View
+            style={{
+              position: "absolute",
+              top: size * 0.32,
+              width: size * 0.84,
+              height: size * 0.56,
+              borderWidth: w,
+              borderColor: color,
+              borderRadius: 4,
+            }}
+          />
+          <View style={{ position: "absolute", top: size * 0.32 + size * 0.2, width: size * 0.84, height: w, backgroundColor: color }} />
+        </View>
+      );
+
    case "close":
      return (
        <View style={[box, s.center]}>
--- a/app/src/components/TaskForm.tsx
+++ b/app/src/components/TaskForm.tsx
@@ -15,15 +15,16 @@ import { friendlyDate } from "../lib/dates";
 import { haptic } from "../lib/haptics";
 import { formatEstimate, PRIORITY_COLOR, PRIORITY_LABEL } from "../lib/priority";
 import { REPEAT_LABEL, REPEATS } from "../lib/repeat";
-import { activeProjects, knownContexts } from "../lib/store";
+import { getState, knownContexts } from "../lib/store";
 import { C, radius, space, type } from "../lib/theme";
 import { useStore } from "../lib/useStore";
-import type { Task, TaskStatus } from "../lib/types";
+import { AREA_LABEL, AREAS, type Task, type TaskStatus } from "../lib/types";
+import { AREA_TONE } from "./AreaToggle";

 /** Everything a task screen edits. Priority is nullable while undecided. */
 export type TaskDraft = Pick<
  Task,
-  "title" | "notes" | "status" | "project_id" | "context" | "waiting_for" | "due_date" | "defer_date" | "estimate_min" | "repeat"
+  "title" | "notes" | "status" | "project_id" | "context" | "waiting_for" | "due_date" | "defer_date" | "estimate_min" | "repeat" | "area"
 > & { priority: Task["priority"] | null };

 export const BOX_LABEL: Record<string, string> = {
@@ -48,6 +49,8 @@ export const emptyDraft = (): TaskDraft => ({
  estimate_min: null,
  repeat: null,
  priority: null,
+  // Born into whichever lens is on — that's what "add" means in work mode.
+  area: getState().area,
 });

 export default function TaskForm({
@@ -71,7 +74,12 @@ export default function TaskForm({
  const store = useStore();
  // Keep a project that has since been archived visible, or editing an old task
  // would silently drop it.
-  const projects = activeProjects(store).filter((p) => p.status === "active" || p.id === d.project_id);
+  // Projects follow the draft's area, not the global lens, so re-filing a task
+  // to Work offers Work projects. An archived project stays visible while the
+  // task still points at it.
+  const projects = store.projects
+    .filter((p) => (p.status === "active" && (p.area ?? "personal") === d.area) || p.id === d.project_id)
+    .sort((a, b) => a.sort_order - b.sort_order || b.created_at.localeCompare(a.created_at));
  const contexts = knownContexts(store);
  const projectName = projects.find((p) => p.id === d.project_id)?.name ?? null;

@@ -185,6 +193,32 @@ export default function TaskForm({
    },
  ];

+  // Area reads as a placeholder while it matches the lens you're in — only a
+  // deliberate cross-filing (a work task captured from personal) earns colour.
+  attrs.push({
+    key: "area",
+    icon: "area",
+    placeholder: AREA_LABEL[store.area],
+    value: d.area === store.area ? null : AREA_LABEL[d.area],
+    tone: AREA_TONE[d.area],
+    panel: (
+      <View>
+        <Chips
+          options={AREAS}
+          labels={AREA_LABEL}
+          value={d.area}
+          onChange={(area) => {
+            if (area === d.area) return;
+            haptic.select();
+            // A project belongs to one area; drop it when the task moves.
+            onChange({ area, project_id: null });
+          }}
+        />
+        <Text style={s.panelEmpty}>Only shows up when that lens is on.</Text>
+      </View>
+    ),
+  });
+
  if (showDefer) {
    attrs.push({
      key: "defer",
--- a/app/src/lib/store.test.ts
+++ b/app/src/lib/store.test.ts
@@ -21,6 +21,7 @@ const store = await import("./store");
 beforeEach(async () => {
  storage.clear();
  await store.hydrate();
+  store.setArea("personal");
 });

 const find = (id: string) => store.getState().tasks.find((t) => t.id === id)!;
@@ -61,3 +62,66 @@ describe("completeTask", () => {
    expect(store.completeTask("nope")).toBeNull();
  });
 });
+
+describe("area lens", () => {
+  test("new rows are born into the active area and selectors filter by it", () => {
+    const home = store.createTask({ title: "home" });
+    store.setArea("work");
+    const office = store.createTask({ title: "office" });
+    const proj = store.createProject({ name: "Q4" });
+    expect(home.area).toBe("personal");
+    expect(office.area).toBe("work");
+    expect(proj.area).toBe("work");
+
+    // The store is module state shared across tests, so assert on membership
+    // and on every visible row's area rather than on exact lists.
+    const ids = (s: ReturnType<typeof store.getState>) => store.tasksByStatus(s, "next").map((t) => t.id);
+    let s = store.getState();
+    expect(ids(s)).toContain(office.id);
+    expect(ids(s)).not.toContain(home.id);
+    expect(store.tasksByStatus(s, "next").every((t) => t.area === "work")).toBe(true);
+    expect(store.activeProjects(s).map((p) => p.id)).toEqual([proj.id]);
+
+    store.setArea("personal");
+    s = store.getState();
+    expect(ids(s)).toContain(home.id);
+    expect(ids(s)).not.toContain(office.id);
+    expect(store.activeProjects(s).some((p) => p.id === proj.id)).toBe(false);
+  });
+
+  test("area persists across hydrate", async () => {
+    store.setArea("work");
+    expect(storage.get("area_v1")).toBe("work");
+  });
+
+  test("rows cached without an area count as personal", () => {
+    // Simulate a pre-migration cache row.
+    const legacy = store.createTask({ title: "old" });
+    delete (legacy as { area?: string }).area;
+    store.setArea("work");
+    expect(store.todayTasks(store.getState()).overdue).toEqual([]);
+    store.setArea("personal");
+    expect(store.tasksByStatus(store.getState(), "next").some((t) => t.id === legacy.id)).toBe(true);
+  });
+
+  test("today, review and contexts respect the lens", () => {
+    store.createTask({ title: "p", due_date: "2000-01-01", context: "@home" });
+    store.setArea("work");
+    store.createTask({ title: "w", due_date: "2000-01-01", context: "@office" });
+    const s = store.getState();
+    expect(store.todayTasks(s).overdue.every((t) => t.area === "work")).toBe(true);
+    expect(store.todayTasks(s).overdue.map((t) => t.title)).toContain("w");
+    expect(store.reviewBuckets(s).overdue.map((t) => t.title)).toContain("w");
+    expect(store.reviewBuckets(s).overdue.map((t) => t.title)).not.toContain("p");
+    expect(store.knownContexts(s)).toEqual(["@office"]);
+  });
+
+  test("completing a repeating work task spawns into work", () => {
+    store.setArea("work");
+    const t = store.createTask({ title: "standup", repeat: "daily", due_date: "2000-01-01" });
+    store.setArea("personal");
+    store.completeTask(t.id);
+    const spawned = store.getState().tasks.find((x) => x.title === "standup" && x.status === "next")!;
+    expect(spawned.area).toBe("work");
+  });
+});
--- a/app/src/lib/store.ts
+++ b/app/src/lib/store.ts
@@ -12,11 +12,17 @@ import { api } from "./api";
 import { getConfig } from "./config";
 import { daysFromToday, isDeferred, todayIso } from "./dates";
 import { nextOccurrence, shiftDays } from "./repeat";
-import type { Project, Task } from "./types";
+import type { Area, Project, Task } from "./types";

 export interface State {
  tasks: Task[];
  projects: Project[];
+  /**
+   * Which half of life is on screen. Every selector filters by it, so the
+   * toggle acts as a global lens: work mode shows no personal rows and vice
+   * versa. New tasks and projects are born into the active area.
+   */
+  area: Area;
  hydrated: boolean;
  syncing: boolean;
  pending: number;
@@ -31,10 +37,12 @@ type Op =

 const DATA_KEY = "store_v1";
 const QUEUE_KEY = "queue_v1";
+const AREA_KEY = "area_v1";

 let state: State = {
  tasks: [],
  projects: [],
+  area: "personal",
  hydrated: false,
  syncing: false,
  pending: 0,
@@ -68,13 +76,39 @@ function persistQueue() {

 export async function hydrate() {
  if (state.hydrated) return;
-  const [data, q] = await Promise.all([AsyncStorage.getItem(DATA_KEY), AsyncStorage.getItem(QUEUE_KEY)]);
+  const [data, q, area] = await Promise.all([
+    AsyncStorage.getItem(DATA_KEY),
+    AsyncStorage.getItem(QUEUE_KEY),
+    AsyncStorage.getItem(AREA_KEY),
+  ]);
  if (q) queue = JSON.parse(q);
  const parsed = data ? JSON.parse(data) : { tasks: [], projects: [] };
-  setState({ tasks: parsed.tasks, projects: parsed.projects, hydrated: true });
+  setState({
+    tasks: parsed.tasks,
+    projects: parsed.projects,
+    area: area === "work" ? "work" : "personal",
+    hydrated: true,
+  });
  void sync();
 }

+/** Flip the personal/work lens. Persists so the app reopens where you left it. */
+export function setArea(area: Area) {
+  if (area === state.area) return;
+  setState({ area });
+  void AsyncStorage.setItem(AREA_KEY, area);
+}
+
+// Rows cached before the area column existed have no `area`; they are
+// personal, matching the server's column default.
+function areaOf(row: { area?: Area }): Area {
+  return row.area ?? "personal";
+}
+
+function inArea<T extends { area?: Area }>(s: State, rows: T[]): T[] {
+  return rows.filter((r) => areaOf(r) === s.area);
+}
+
 // ---- mutations (instant; network happens later) ----

 function now() {
@@ -83,8 +117,8 @@ function now() {

 // Fields the API accepts — everything else (timestamps, completed_at) is local
 // bookkeeping until the server's authoritative row arrives via pull().
-const TASK_FIELDS = ["title", "notes", "status", "project_id", "context", "waiting_for", "due_date", "defer_date", "priority", "estimate_min", "repeat", "sort_order"] as const;
-const PROJECT_FIELDS = ["name", "status", "notes", "sort_order"] as const;
+const TASK_FIELDS = ["title", "notes", "status", "project_id", "context", "waiting_for", "due_date", "defer_date", "priority", "estimate_min", "repeat", "sort_order", "area"] as const;
+const PROJECT_FIELDS = ["name", "status", "notes", "sort_order", "area"] as const;

 function pickFields<T>(data: Partial<T>, fields: readonly (keyof T & string)[]): Partial<T> {
  const out: Partial<T> = {};
@@ -122,6 +156,7 @@ export function createTask(data: Partial<Task> & { title: string }): Task {
    estimate_min: data.estimate_min ?? null,
    repeat: data.repeat ?? null,
    completed_at: null,
+    area: data.area ?? state.area,
    // New tasks land at the top of their list.
    sort_order:
      data.sort_order ??
@@ -202,6 +237,7 @@ function spawnNextOccurrence(t: Task): Task {
    priority: t.priority,
    estimate_min: t.estimate_min,
    repeat: t.repeat,
+    area: areaOf(t),
  });
 }

@@ -216,6 +252,7 @@ export function createProject(data: Partial<Project> & { name: string }): Projec
    status: data.status ?? "active",
    notes: data.notes ?? "",
    sort_order: data.sort_order ?? 0,
+    area: data.area ?? state.area,
    created_at: now(),
    updated_at: now(),
  };
@@ -333,7 +370,7 @@ function byManualOrder(a: Task, b: Task): number {
 }

 export function tasksByStatus(s: State, status: Task["status"]): Task[] {
-  return s.tasks.filter((t) => t.status === status).sort(byManualOrder);
+  return inArea(s, s.tasks).filter((t) => t.status === status).sort(byManualOrder);
 }

 /**
@@ -362,7 +399,7 @@ export function reorderTask(id: string, status: Task["status"], index: number) {
 export function todayTasks(s: State): { overdue: Task[]; today: Task[] } {
  const now = new Date();
  const todayIso = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
-  const open = s.tasks.filter((t) => t.status !== "done" && t.status !== "trashed");
+  const open = inArea(s, s.tasks).filter((t) => t.status !== "done" && t.status !== "trashed");
  return {
    overdue: open.filter((t) => t.due_date && t.due_date < todayIso).sort(byPriorityDue),
    today: open
@@ -372,7 +409,7 @@ export function todayTasks(s: State): { overdue: Task[]; today: Task[] } {
 }

 export function activeProjects(s: State): Project[] {
-  return s.projects
+  return inArea(s, s.projects)
    .filter((p) => p.status !== "dropped")
    .sort((a, b) => a.sort_order - b.sort_order || b.created_at.localeCompare(a.created_at));
 }
@@ -384,7 +421,7 @@ export function openTaskCount(s: State, projectId: string): number {
 /** Distinct contexts on open tasks — suggestion chips beat retyping "@homr". */
 export function knownContexts(s: State): string[] {
  const set = new Set<string>();
-  for (const t of s.tasks) {
+  for (const t of inArea(s, s.tasks)) {
    if (t.context && t.status !== "done" && t.status !== "trashed") set.add(t.context);
  }
  return [...set].sort();
@@ -410,7 +447,7 @@ export interface ReviewBuckets {

 export function reviewBuckets(s: State): ReviewBuckets {
  const today = todayIso();
-  const open = s.tasks.filter((t) => t.status !== "done" && t.status !== "trashed");
+  const open = inArea(s, s.tasks).filter((t) => t.status !== "done" && t.status !== "trashed");
  const overdue = open.filter((t) => t.due_date && t.due_date < today).sort(byPriorityDue);
  const overdueIds = new Set(overdue.map((t) => t.id));
  const actionable = new Set(["next", "waiting"]);
--- a/app/src/lib/theme.ts
+++ b/app/src/lib/theme.ts
@@ -27,6 +27,8 @@ const light = {
  accent: "#2F6FED",
  /** Tinted accent wash for selected chips and active states. */
  accentSoft: "#E8F0FE",
+  /** Accent for the work lens — the one place the app changes colour. */
+  work: "#0F766E",
  done: "#2FA36B",
  danger: "#E5484D",
  warn: "#D98324",
@@ -45,6 +47,7 @@ const dark = {
  muted: "#7A7A85",
  accent: "#4C86F0",
  accentSoft: "#1B2740",
+  work: "#2DD4BF",
  done: "#3FBF84",
  danger: "#F0605F",
  warn: "#E0A93E",
--- a/app/src/lib/types.ts
+++ b/app/src/lib/types.ts
@@ -1,6 +1,11 @@
 export type TaskStatus = "inbox" | "next" | "waiting" | "scheduled" | "someday" | "done" | "trashed";
 export type ProjectStatus = "active" | "someday" | "completed" | "dropped";
 export type Repeat = "daily" | "weekdays" | "weekly" | "monthly" | "yearly";
+/** Personal vs work — the app-wide toggle shows one area at a time. */
+export type Area = "personal" | "work";
+
+export const AREAS: Area[] = ["personal", "work"];
+export const AREA_LABEL: Record<Area, string> = { personal: "Personal", work: "Work" };

 export interface Task {
  id: string;
@@ -17,6 +22,7 @@ export interface Task {
  repeat: Repeat | null;
  completed_at: string | null;
  sort_order: number;
+  area: Area;
  created_at: string;
  updated_at: string;
 }
@@ -27,6 +33,7 @@ export interface Project {
  status: ProjectStatus;
  notes: string;
  sort_order: number;
+  area: Area;
  created_at: string;
  updated_at: string;
  open_tasks?: number;