Todoist-style: priorities P1-P4, estimates, FAB add form, Today view, natural quick add, drag-and-drop with haptics

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

app/src/components/PriorityChips.tsx

@@ -0,0 +1,56 @@
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import { haptic } from "../lib/haptics";
+import { PRIORITIES, PRIORITY_COLOR, PRIORITY_LABEL } from "../lib/priority";
+import { C } from "../lib/theme";
+import type { Task } from "../lib/types";
+
+export default function PriorityChips({
+  value,
+  onChange,
+}: {
+  value: Task["priority"];
+  onChange: (p: Task["priority"]) => void;
+}) {
+  return (
+    <View style={{ marginBottom: 14 }}>
+      <Text style={s.label}>Priority</Text>
+      <View style={s.rowWrap}>
+        {PRIORITIES.map((p) => {
+          const active = value === p;
+          const color = PRIORITY_COLOR[p];
+          return (
+            <Pressable
+              key={p}
+              style={[s.chip, active && { borderColor: color, backgroundColor: `${color}22` }]}
+              onPress={() => {
+                haptic.select();
+                onChange(p);
+              }}
+            >
+              <View style={[s.flag, { backgroundColor: color }]} />
+              <Text style={[s.text, active && { color: C.text }]}>{PRIORITY_LABEL[p]}</Text>
+            </Pressable>
+          );
+        })}
+      </View>
+    </View>
+  );
+}
+
+const s = StyleSheet.create({
+  label: { color: C.muted, fontSize: 13, marginBottom: 6, textTransform: "uppercase", letterSpacing: 0.5 },
+  rowWrap: { flexDirection: "row", flexWrap: "wrap", gap: 8 },
+  chip: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 7,
+    paddingVertical: 8,
+    paddingHorizontal: 13,
+    borderRadius: 20,
+    backgroundColor: C.surface,
+    borderWidth: 1,
+    borderColor: C.border,
+  },
+  flag: { width: 10, height: 10, borderRadius: 5 },
+  text: { color: C.muted, fontSize: 14 },
+});