From 24154093743e3f75bc62547731b339d05d3a8006 Mon Sep 17 00:00:00 2001
From: Sylvain Duchesne <pro@sylvainduchesne.com>
Date: Mon, 26 Jan 2026 18:04:56 +0100
Subject: [PATCH] Update event

---
 features/support/world.ts         |   1 +
 src/screens/EventDetailScreen.tsx |   5 +-
 src/screens/UpdateEventScreen.tsx | 104 ++++++++++++++++++++++++++++++
 src/screens/index.ts              |   4 +-
 4 files changed, 112 insertions(+), 2 deletions(-)
 create mode 100644 src/screens/UpdateEventScreen.tsx

diff --git a/features/support/world.ts b/features/support/world.ts
index 1017926..775eb25 100644
--- a/features/support/world.ts
+++ b/features/support/world.ts
@@ -38,6 +38,7 @@ const screenFileMap: Record<string, string> = {
   'events': 'EventsScreen.tsx',
   'event-detail': 'EventDetailScreen.tsx',
   'create-event': 'CreateEventScreen.tsx',
+  'update-event': 'UpdateEventScreen.tsx',
   'invite': 'InviteScreen.tsx',
   'participants-list': 'ParticipantsListScreen.tsx',
   'meeting-points': 'MeetingPointsScreen.tsx',
diff --git a/src/screens/EventDetailScreen.tsx b/src/screens/EventDetailScreen.tsx
index d9e665d..ebc4527 100644
--- a/src/screens/EventDetailScreen.tsx
+++ b/src/screens/EventDetailScreen.tsx
@@ -5,6 +5,9 @@ import type { ScreenProps } from './index';
 export function EventDetailScreen({ navigate }: ScreenProps) {
   const [isJoined, setIsJoined] = useState(false);
 
+  // In a real app, this would come from comparing current user with event creator
+  const isOwner = true;
+
   const knownAttendees = [
     { initials: 'MD', name: 'Marie' },
     { initials: 'TM', name: 'Thomas' },
@@ -16,7 +19,7 @@ export function EventDetailScreen({ navigate }: ScreenProps) {
       <Header
         title="Événement"
         left={<span onClick={() => navigate('events')} style={{ cursor: 'pointer' }}>←</span>}
-        right={<span style={{ cursor: 'pointer' }}>⋯</span>}
+        right={isOwner && <span onClick={() => navigate('create-event')} style={{ cursor: 'pointer' }}>✎</span>}
       />
 
       {/* Content */}
diff --git a/src/screens/UpdateEventScreen.tsx b/src/screens/UpdateEventScreen.tsx
new file mode 100644
index 0000000..2da9fb3
--- /dev/null
+++ b/src/screens/UpdateEventScreen.tsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { Header, Text, Input, Button, Placeholder } from '../components/sketchy';
+import type { ScreenProps } from './index';
+
+export function UpdateEventScreen({ navigate }: ScreenProps) {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <Header
+        title="Modifier l'événement"
+        left={<span onClick={() => navigate('event-detail')} style={{ cursor: 'pointer' }}>✕</span>}
+      />
+
+      {/* Content */}
+      <div style={{ flex: 1, padding: 16, overflow: 'auto' }}>
+        {/* Cover image upload */}
+        <Placeholder
+          height={140}
+          label="Photo de couverture"
+          style={{ marginBottom: 20, cursor: 'pointer' }}
+        />
+
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <div>
+            <Text style={{ marginBottom: 6, fontSize: 14 }}>Nom de l'événement *</Text>
+            <Input defaultValue="Résidence Reconnexion" />
+          </div>
+
+          <div style={{ display: 'flex', gap: 12 }}>
+            <div style={{ flex: 1 }}>
+              <Text style={{ marginBottom: 6, fontSize: 14 }}>Date de début *</Text>
+              <Input type="date" defaultValue="2026-02-16" />
+            </div>
+            <div style={{ flex: 1 }}>
+              <Text style={{ marginBottom: 6, fontSize: 14 }}>Date de fin</Text>
+              <Input type="date" defaultValue="2026-02-20" />
+            </div>
+          </div>
+
+          <div style={{ display: 'flex', gap: 12 }}>
+            <div style={{ flex: 1 }}>
+              <Text style={{ marginBottom: 6, fontSize: 14 }}>Heure de début *</Text>
+              <Input type="time" defaultValue="09:00" />
+            </div>
+            <div style={{ flex: 1 }}>
+              <Text style={{ marginBottom: 6, fontSize: 14 }}>Heure de fin</Text>
+              <Input type="time" defaultValue="18:00" />
+            </div>
+          </div>
+
+          <div>
+            <Text style={{ marginBottom: 6, fontSize: 14 }}>Lieu *</Text>
+            <Input defaultValue="Le Revel, Rogues (30)" />
+          </div>
+
+          <div>
+            <Text style={{ marginBottom: 6, fontSize: 14 }}>Description</Text>
+            <textarea
+              className="sketchy-input"
+              defaultValue="Une semaine collaborative pour se rencontrer, co-créer et faire avancer le projet de Réseau Social Universel. Au programme : sessions plénières en intelligence collective, ateliers en forum ouvert, et randonnée au Cirque de Navacelles."
+              rows={4}
+              style={{ resize: 'none' }}
+            />
+          </div>
+
+          <div>
+            <Text style={{ marginBottom: 6, fontSize: 14 }}>Thématique *</Text>
+            <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
+              {[
+                { id: 'culture', label: 'Culture', emoji: '🎭' },
+                { id: 'sport', label: 'Sport', emoji: '⚽' },
+                { id: 'nature', label: 'Nature', emoji: '🌿' },
+                { id: 'social', label: 'Social', emoji: '👥' },
+                { id: 'food', label: 'Gastronomie', emoji: '🍽️' },
+                { id: 'music', label: 'Musique', emoji: '🎵' },
+                { id: 'tech', label: 'Tech', emoji: '💻' },
+                { id: 'other', label: 'Autre', emoji: '✨' },
+              ].map((theme) => (
+                <Button
+                  key={theme.id}
+                  variant={theme.id === 'social' ? 'primary' : 'default'}
+                  style={{ fontSize: 13 }}
+                >
+                  {theme.emoji} {theme.label}
+                </Button>
+              ))}
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div style={{ padding: 16, borderTop: '2px solid var(--sketch-black)' }}>
+        <Button
+          variant="primary"
+          style={{ width: '100%' }}
+          onClick={() => navigate('event-detail')}
+        >
+          Enregistrer les modifications
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/screens/index.ts b/src/screens/index.ts
index 8cc3916..258402b 100644
--- a/src/screens/index.ts
+++ b/src/screens/index.ts
@@ -7,6 +7,7 @@ import { UserProfileScreen } from './UserProfileScreen';
 import { EventsScreen } from './EventsScreen';
 import { EventDetailScreen } from './EventDetailScreen';
 import { CreateEventScreen } from './CreateEventScreen';
+import { UpdateEventScreen } from './UpdateEventScreen';
 import { InviteScreen } from './InviteScreen';
 import { ParticipantsListScreen } from './ParticipantsListScreen';
 import { MeetingPointsScreen } from './MeetingPointsScreen';
@@ -45,7 +46,8 @@ export const screenGroups: ScreenGroup[] = [
     screens: [
       { id: 'events', name: 'Découvrir', component: EventsScreen },
       { id: 'event-detail', name: 'Détail événement', component: EventDetailScreen },
-      { id: 'create-event', name: 'Créer événement', component: CreateEventScreen },
+      { id: 'create-event', name: 'Relayer événement', component: CreateEventScreen },
+      { id: 'update-event', name: 'Modifier événement', component: UpdateEventScreen },
       { id: 'invite', name: 'Inviter des amis', component: InviteScreen },
       { id: 'participants-list', name: 'Liste des participants', component: ParticipantsListScreen },
       { id: 'meeting-points', name: 'Points de rencontre', component: MeetingPointsScreen },