Allow editing elements (#18)

* Allow editing an element's name, completed, and description

Element details was read-only. Add an Edit button that opens a form for
the three most-commonly-changed fields. The updateElement mutation is a
full replace (name/description/uri/completed/icon are non-null), so the
edit screen round-trips the untouched fields (uri, icon, location,
schedule, labels, trips) to avoid clearing them on save. The detail
query was expanded with the fields needed to reconstruct that input.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

* Make element icon and URL editable

Round out the edit form with the remaining identity fields. The URL is
validated against an http(s) pattern so a malformed value can't be saved.
The icon uses an emoji picker rather than free text: the system keyboard's
emoji panel can't be opened programmatically, and a single tap-to-replace
picker guarantees the field is always exactly one emoji, which is what the
icon is meant to be.

Adds rn-emoji-keyboard (pure JS, no native deps).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Author: dfalling

bun.lock

@@ -23,7 +23,8 @@
     "react-native": "0.85.3",
     "react-native-encrypted-storage": "^4.0.3",
     "react-native-safe-area-context": "^5.5.2",
-    "react-native-screens": "^4.25.2"
+    "react-native-screens": "^4.25.2",
+    "rn-emoji-keyboard": "^1.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

package.json

@@ -5,12 +5,17 @@ query ElementDetail($id: String!) {
     icon
     description
     completed
+    uri
     labels
+    trips {
+      id
+    }
     location {
       id
       address
       latitude
       longitude
+      placeId
     }
     photos {
       id
@@ -25,6 +30,8 @@ query ElementDetail($id: String!) {
       endDate
       startTime
       endTime
+      startTz
+      endTz
     }
   }
 }

src/graphql/__generated__/types.ts

@@ -0,0 +1,37 @@
+mutation UpdateElement($input: ElementInput!) {
+  updateElement(input: $input) {
+    id
+    name
+    icon
+    description
+    completed
+    uri
+    labels
+    trips {
+      id
+    }
+    location {
+      id
+      address
+      latitude
+      longitude
+      placeId
+    }
+    photos {
+      id
+      thumbnail
+      regular
+      description
+    }
+    schedule {
+      id
+      allDay
+      startDate
+      endDate
+      startTime
+      endTime
+      startTz
+      endTz
+    }
+  }
+}

src/graphql/queries/elementDetail.graphql

@@ -29,6 +29,7 @@ export function ElementDetailScreen({route, navigation}: Props) {
         element={data?.element ?? null}
         loading={loading}
         onClose={() => navigation.goBack()}
+        onEdit={() => navigation.navigate('ElementEdit', {elementId})}
       />
     </View>
   );
@@ -38,10 +39,12 @@ function ModalContents({
   element,
   loading,
   onClose,
+  onEdit,
 }: {
   element: ElementDetail | null;
   loading: boolean;
   onClose: () => void;
+  onEdit: () => void;
 }) {
   const safeAreaInsets = useSafeAreaInsets();
 
@@ -59,6 +62,16 @@ function ModalContents({
         <Text style={styles.headerTitle} numberOfLines={1}>
           {element?.name ?? (loading ? 'Loading…' : ' ')}
         </Text>
+        {element ? (
+          <Pressable
+            accessibilityRole="button"
+            accessibilityLabel="Edit element"
+            hitSlop={10}
+            onPress={onEdit}
+            style={styles.editButton}>
+            <Text style={styles.editButtonText}>Edit</Text>
+          </Pressable>
+        ) : null}
       </View>
 
       {element ? (
@@ -199,6 +212,15 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     color: '#111',
   },
+  editButton: {
+    marginLeft: 12,
+    paddingHorizontal: 4,
+  },
+  editButtonText: {
+    fontSize: 16,
+    color: '#0a7ea4',
+    fontWeight: '600',
+  },
   scrollContent: {
     padding: 16,
   },