Blog
Feature
8 mars 202610 min

Comment construire un agenda collaboratif avec filtres

L'agenda de TAMSIV a commence comme un composant simple : une liste d'evenements, un calendrier, une vue jour. Et puis les groupes collaboratifs sont arrives. Soudain, un evenement n'etait plus personnel — il pouvait avoir des participants, des invitations, des statuts. Et avec 15 personnes dans un groupe actif, l'agenda est devenu illisible sans filtres.

J'ai du repenser l'ensemble : systeme de participants avec invitations et notifications, filtres avances pour naviguer dans le flux, evenements multi-jours, et un overlay prive pour voir ses engagements personnels dans le contexte du groupe. L'agenda est devenu le composant le plus complexe de TAMSIV — mais aussi le plus utile au quotidien.

Points cles a retenir :
- Un agenda collaboratif necessite un systeme de participants avec statuts (invite, accepte, refuse)
- Les filtres avances sont indispensables des que l'activite du groupe depasse 10 evenements/semaine
- Les evenements multi-jours demandent un calcul de spans avec gestion des fuseaux horaires
- L'overlay prive dans l'agenda de groupe preserve la confidentialite tout en evitant les conflits
- 5 vues de calendrier (jour, 3 jours, semaine, mois, liste) couvrent tous les cas d'usage

Pourquoi un agenda personnel ne suffit-il pas dans une app collaborative ?

Tant que TAMSIV etait une app strictement personnelle, l'agenda etait simple. Tu crees un evenement, tu le vois dans ton calendrier, point. Mais quand j'ai ajoute les groupes hierarchiques, tout a change.

Dans un groupe (famille, equipe, association), les evenements sont partages. Une reunion, un diner de famille, un match sportif — tout le monde doit le voir. Mais tout le monde ne veut pas voir tous les evenements. Le manager veut voir les reunions de son equipe, pas les sorties du groupe bowling. Le parent veut voir les activites des enfants, pas les meetings professionnels du conjoint.

C'est la que les filtres et le systeme de participants deviennent essentiels. Sans eux, l'agenda collaboratif est un brouhaha inutile.

Equipe de professionnels regardant un grand calendrier numerique avec des blocs d evenements colores et des avatars de participants
Un agenda partage sans filtres devient rapidement inutilisable dans un groupe actif.

Comment fonctionne le systeme de participants dans TAMSIV ?

Chaque evenement dans TAMSIV peut avoir des participants invites parmi les membres du groupe. L'architecture repose sur une table de liaison dans le schema collaborative :

-- Table simplifiee
calendar_event_participants (
  id UUID PRIMARY KEY,
  event_id UUID REFERENCES privat.calendar_events,
  user_id UUID REFERENCES auth.users,
  status TEXT CHECK (status IN ('invited', 'accepted', 'declined')),
  invited_at TIMESTAMPTZ,
  responded_at TIMESTAMPTZ
)

Le flow d'invitation est le suivant :

  1. Le createur ajoute des participants lors de la creation ou de l'edition de l'evenement. Il choisit parmi les membres du groupe via un picker.
  2. Notification push : Chaque participant invite recoit une notification FCM avec le titre de l'evenement, la date et un bouton pour accepter ou decliner.
  3. Reponse : Le participant accepte ou decline. Son statut est mis a jour en temps reel dans la base.
  4. Visibilite : L'evenement apparait dans l'agenda de tous les participants (invites, acceptes). Les declines ne le voient plus (sauf s'ils changent d'avis).

C'est un flow similaire a ce que tu trouves dans Google Calendar, mais adapte au contexte de groupes hierarchiques de TAMSIV. La difference principale : les participants sont limites aux membres du groupe, pas a n'importe quelle adresse email.

Quels filtres avances sont indispensables dans un agenda de groupe ?

La FilterBar de l'agenda propose trois modes de filtrage :

  • "Tous" : Affiche tous les evenements du groupe. Utile pour avoir une vue d'ensemble, mais vite bruyant dans un groupe actif.
  • "Mes creations" : N'affiche que les evenements que tu as crees. Utile pour verifier que tes propres evenements sont bien planifies.
  • "Participating" : N'affiche que les evenements ou tu es participant (invite ou accepte). C'est le mode le plus utilise — il repond a la question "A quoi dois-je etre present ?".

Ces filtres s'appliquent en temps reel, sans rechargement de page. Le ContentCacheService stocke les evenements en cache, et les filtres operent cote client sur les donnees cachees. Le resultat : un changement de filtre est instantane, meme avec des centaines d'evenements.

En plus des filtres par participation, la FilterBar propose les 3 contextes classiques de TAMSIV :

  • Prive : Tes evenements personnels uniquement
  • Partage : Evenements des groupes auxquels tu appartiens
  • Tout : Fusion des deux vues

Ces filtres sont coherents avec ceux du feed et des taches. L'utilisateur retrouve les memes paradigmes de navigation partout dans l'app.

Comment gerer les evenements multi-jours dans un composant calendrier ?

Un evenement "Conference lundi→mercredi" doit apparaitre sur 3 jours dans la vue calendrier. Ca parait trivial, mais l'implementation est pleine de pieges.

Le composant AgendaView calcule les spans — la duree en jours de chaque evenement. Pour chaque jour affiche, il determine quels evenements le couvrent et les positionne visuellement :

  • Vue jour : L'evenement multi-jours apparait comme un bandeau en haut, au-dessus des evenements horaires.
  • Vue semaine : L'evenement s'etend horizontalement sur les colonnes correspondant aux jours couverts.
  • Vue mois : Meme principe, avec un systeme de troncature si trop d'evenements se chevauchent.
  • Vue liste : L'evenement apparait une seule fois, avec ses dates de debut et fin.

Le piege principal : les fuseaux horaires aux frontieres de journee. Un evenement qui commence a 23h le lundi en UTC+1 et finit a 2h le mardi couvre-t-il 1 jour ou 2 ? La reponse depend du fuseau horaire de l'utilisateur. J'ai opte pour une logique simple : un evenement couvre un jour s'il a au moins une heure de presence dans ce jour, dans le fuseau local de l'utilisateur.

Ecran de telephone mobile affichant une application calendrier avec des evenements multi-jours et des boutons de filtre
Les evenements multi-jours s'etendent visuellement sur les jours concernes dans chaque vue.

Qu'est-ce que l'overlay prive et pourquoi est-il essentiel ?

Voici le scenario : tu es dans l'agenda de ton groupe professionnel. Tu veux planifier une reunion mardi a 14h. Mais mardi a 14h, tu as un rendez-vous medical personnel. Comment le savoir sans quitter l'agenda du groupe ?

C'est le role de l'overlay prive. Dans l'agenda de groupe, tes evenements personnels apparaissent en transparence, grises. Ils ne sont pas cliquables, pas de details visibles — juste un bloc pour signaler "tu as deja quelque chose ici".

Les regles de l'overlay :

  • Visible uniquement par toi : Les autres membres du groupe ne voient pas tes evenements prives.
  • Non interactif : Pas de clic, pas de details, pas de modification depuis la vue groupe.
  • Visuel discret : Opacite reduite (30%), couleur grise, pas de titre visible. Juste un indicateur de "slot occupe".
  • Desactivable : Un toggle dans les parametres permet de masquer l'overlay si tu n'en veux pas.

Cet overlay respecte la confidentialite tout en evitant les conflits d'horaire. C'est un pattern que j'ai repris de Google Calendar (qui montre "Busy" pour les evenements des autres), adapte au contexte d'un groupe ou la vie privee est importante.

Comment les 5 vues de calendrier couvrent-elles tous les cas d'usage ?

TAMSIV propose 5 vues de calendrier, chacune adaptee a un besoin different :

  1. Vue jour : Timeline heure par heure. Ideale pour planifier une journee chargee, voir les creneaux libres. Utilisee quand tu cherches "Quand est-ce que je suis libre aujourd'hui ?".
  2. Vue 3 jours : Compromis entre le detail du jour et la vision de la semaine. Mon prefere pour la planification a court terme. Tu vois aujourd'hui + les 2 prochains jours.
  3. Vue semaine : La vue classique business. 7 colonnes, chaque jour visible. Utile pour les equipes qui planifient a la semaine.
  4. Vue mois : Vue d'ensemble. Les evenements sont des pastilles colorees. Utile pour reperer les periodes chargees et les jours libres. Coherent avec la vision productivite de l'app.
  5. Vue liste : Liste chronologique simple. Pas de grille, pas de positionnement. Utile sur mobile quand la vue semaine est trop petite, ou pour exporter/partager.

Chaque vue conserve la date courante lors du changement de vue. Si tu es sur le mercredi 15 en vue jour et que tu passes en vue semaine, tu vois la semaine du 15. Le swipe horizontal permet de naviguer dans le temps (jour precedent/suivant, semaine precedente/suivante).

Vue partagee montrant un overlay de calendrier personnel en transparence par-dessus un calendrier d equipe
L'overlay prive montre tes engagements personnels en transparence dans l'agenda de groupe.

Comment l'agenda interagit-il avec le pipeline vocal de TAMSIV ?

L'un des points forts de TAMSIV, c'est la creation d'evenements par la voix. Tu dis "Ajoute une reunion avec Marc mardi prochain a 14h" et le dictaphone cree l'evenement. Le backend utilise le function tool create_calendar_event pour extraire la date, l'heure, le titre et les participants mentionnes.

Le systeme de PendingCreation s'applique aussi aux evenements : l'IA cree une preview, l'utilisateur peut editer les details (ajouter des participants, modifier l'heure) avant de valider. Ca evite les erreurs de transcription — "mardi" vs "mercredi" est une erreur STT classique.

Une fois l'evenement cree, le cache Realtime propage le changement : tous les participants voient l'evenement apparaitre dans leur agenda sans rafraichir. La notification push part en parallele. L'ensemble du flow — voix → IA → creation → notification → affichage — prend environ 3 secondes.

Quelles ont ete les difficultes techniques majeures ?

L'agenda est le composant le plus complexe de TAMSIV. Voici les principaux defis que j'ai rencontres :

  • Performance du rendu : La vue semaine avec 50+ evenements et l'overlay prive doit rester fluide. J'ai du utiliser React.memo agressivement et virtualiser les listes d'evenements dans la vue liste.
  • Gestion du scroll : Le swipe horizontal pour naviguer entre les jours/semaines entre en conflit avec le scroll vertical de la timeline. J'ai utilise un GestureDetector de react-native-gesture-handler avec des seuils de direction pour desambiguer.
  • Evenements empiles : Quand 3 evenements se chevauchent sur le meme creneau, il faut les disposer cote a cote dans la timeline. L'algorithme de layout des evenements empiles est non-trivial — c'est un probleme d'interval scheduling.
  • RLS Supabase : Les politiques Row Level Security pour les evenements de groupe sont complexes. Un evenement est visible si : tu l'as cree, OU tu es participant, OU tu es membre du groupe et l'evenement est public. Trois conditions OR dans une seule politique RLS.

Comment cette architecture s'etend-elle aux futurs besoins ?

L'architecture actuelle est concue pour evoluer. Voici les extensions prevues dans la roadmap :

  • Recurrence : Evenements recurrents (tous les lundis, le 1er de chaque mois). Le schema DB est pret, le frontend pas encore.
  • Sync calendrier externe : Import/export iCal pour synchroniser avec Google Calendar, Outlook, Apple Calendar.
  • Disponibilite partagee : Montrer les creneaux de disponibilite des membres du groupe pour faciliter la planification.
  • Rappels personnalises : Chaque participant peut configurer ses propres rappels (5 min avant, 1h avant, la veille).

FAQ

Peut-on inviter des participants en dehors du groupe ?

Actuellement non. Les participants sont limites aux membres du groupe dans lequel l'evenement est cree. C'est un choix delibere pour simplifier la gestion des permissions. L'invitation par email (comme Google Calendar) est prevue dans une version future.

Comment les notifications d'invitation fonctionnent-elles ?

Les invitations declenchent une notification push via Firebase Cloud Messaging. Le participant recoit le titre de l'evenement, la date/heure, et peut accepter ou decliner directement depuis la notification (action buttons FCM). La reponse est enregistree en temps reel dans Supabase.

L'overlay prive fonctionne-t-il dans toutes les vues ?

Oui, l'overlay prive est actif dans les 5 vues (jour, 3 jours, semaine, mois, liste). Dans la vue mois, les evenements prives apparaissent comme des points gris discrets. Dans les vues temporelles (jour, semaine), ils apparaissent comme des blocs transparents.

L'agenda de TAMSIV remplace-t-il Google Calendar ?

Non, il le complete. L'agenda TAMSIV est concu pour la gestion de taches et de projets collaboratifs, avec la voix comme mode d'interaction principal. Google Calendar reste plus adapte pour la gestion de calendrier pur (recurrences complexes, sync multi-devices). La synchronisation entre les deux est dans la roadmap.

Peut-on creer un evenement par la voix avec des participants ?

Oui. Tu peux dire "Reunion avec Marc et Sophie vendredi a 10h" et l'IA detectera les participants mentionnes, a condition qu'ils soient membres du groupe actif. Le systeme de PendingCreation te permet de verifier et ajuster les participants avant validation.