fix(calendar): vista lista sin recurrentes repetidos + secciones próximos/pasados

La vista de lista pedía el rango 2000-2100, así que el backend expandía cada cumpleaños anual ~75 veces (hasta 2099). Ahora: (1) el rango llega solo a +13 meses, suficiente para la próxima ocurrencia de cada serie; (2) AgendaView deduplica las series recurrentes a una sola entrada (su próxima ocurrencia); y (3) separa la agenda en 'Próximos' (>= hoy, ascendente) arriba y 'Pasados' (< hoy, descendente) debajo, estos atenuados (opacity 0.5) en gris claro. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-06-13 20:46:09 +02:00
parent f5d15a9f7b
commit 8cacc7dacf
1 changed files with 154 additions and 85 deletions
@@ -107,11 +107,13 @@ export function CalendarView() {
        to: c.add(1, "day").format("YYYY-MM-DD"),
      };
    }
-    // lista: TODOS los eventos del calendario (pasados y futuros). Rango muy
-    // amplio para que el backend expanda cualquier serie recurrente y no recorte.
+    // lista: histórico completo de eventos puntuales (desde 2000) + las series
+    // recurrentes expandidas solo hasta ~13 meses vista. Ese tope evita que un
+    // cumpleaños anual se expanda hasta 2099; AgendaView deduplica además cada
+    // serie a una sola entrada (su próxima ocurrencia).
    return {
      from: "2000-01-01",
-      to: "2100-01-01",
+      to: dayjs().add(13, "month").format("YYYY-MM-DD"),
    };
  }, [cursor, view]);

@@ -936,108 +938,175 @@ function AgendaView({
  onNew: () => void;
  onEvent: (ev: CalendarEvent) => void;
 }) {
-  // Orden ascendente por instante de inicio + agrupado por día (clave YYYY-MM-DD).
-  const groups = useMemo(() => {
-    const sorted = [...events].sort((a, b) => {
-      const sa = eventStart(a, tz);
-      const sb = eventStart(b, tz);
-      const va = sa ? sa.valueOf() : Number.POSITIVE_INFINITY;
-      const vb = sb ? sb.valueOf() : Number.POSITIVE_INFINITY;
-      return va - vb;
-    });
+  const startOfToday = useMemo(() => dayjs().tz(tz).startOf("day"), [tz]);
+  const todayKey = startOfToday.format("YYYY-MM-DD");
+
+  // 1) Deduplica las series recurrentes: una sola entrada por uid (su próxima
+  //    ocurrencia desde hoy; si todas son pasadas, la más reciente). Así un
+  //    cumpleaños anual aparece una vez, no una por año. Los puntuales se dejan.
+  const deduped = useMemo(() => {
+    const recurring = new Map<string, CalendarEvent[]>();
+    const singles: CalendarEvent[] = [];
+    for (const ev of events) {
+      if (ev.recurring && ev.uid) {
+        const l = recurring.get(ev.uid) ?? [];
+        l.push(ev);
+        recurring.set(ev.uid, l);
+      } else {
+        singles.push(ev);
+      }
+    }
+    const out = [...singles];
+    for (const occ of recurring.values()) {
+      const sorted = occ
+        .slice()
+        .sort(
+          (a, b) =>
+            (eventStart(a, tz)?.valueOf() ?? 0) -
+            (eventStart(b, tz)?.valueOf() ?? 0),
+        );
+      const next = sorted.find((e) => {
+        const s = eventStart(e, tz);
+        return s && !s.isBefore(startOfToday);
+      });
+      out.push(next ?? sorted[sorted.length - 1]);
+    }
+    return out;
+  }, [events, tz, startOfToday]);
+
+  // 2) Separa en próximos (>= hoy, ascendente) y pasados (< hoy, descendente),
+  //    cada uno agrupado por día.
+  const groupByDay = (list: CalendarEvent[]) => {
    const map = new Map<string, CalendarEvent[]>();
-    for (const ev of sorted) {
+    for (const ev of list) {
      const s = eventStart(ev, tz);
      if (!s) continue;
      const k = s.format("YYYY-MM-DD");
-      const list = map.get(k) ?? [];
-      list.push(ev);
-      map.set(k, list);
+      const arr = map.get(k) ?? [];
+      arr.push(ev);
+      map.set(k, arr);
    }
    return Array.from(map.entries());
-  }, [events, tz]);
+  };

-  const today = dayjs().tz(tz).format("YYYY-MM-DD");
+  const { upcomingGroups, pastGroups } = useMemo(() => {
+    const upcoming: CalendarEvent[] = [];
+    const past: CalendarEvent[] = [];
+    for (const ev of deduped) {
+      const s = eventStart(ev, tz);
+      if (s && s.isBefore(startOfToday)) past.push(ev);
+      else upcoming.push(ev);
+    }
+    upcoming.sort(
+      (a, b) =>
+        (eventStart(a, tz)?.valueOf() ?? Infinity) -
+        (eventStart(b, tz)?.valueOf() ?? Infinity),
+    );
+    past.sort(
+      (a, b) =>
+        (eventStart(b, tz)?.valueOf() ?? 0) -
+        (eventStart(a, tz)?.valueOf() ?? 0),
+    );
+    return { upcomingGroups: groupByDay(upcoming), pastGroups: groupByDay(past) };
+  }, [deduped, tz, startOfToday]);
+
+  const renderGroup = ([dayKey, list]: [string, CalendarEvent[]]) => {
+    const d = dayjs(dayKey);
+    const isToday = dayKey === todayKey;
+    return (
+      <Box key={dayKey}>
+        <Text
+          size="sm"
+          fw={600}
+          c={isToday ? "brand" : undefined}
+          mb={6}
+          style={{ textTransform: "capitalize" }}
+        >
+          {d.format("dddd")} · {d.format("DD/MM/YYYY")}
+        </Text>
+        <Stack gap={4}>
+          {list.map((ev, i) => {
+            const s = eventStart(ev, tz);
+            const e = eventEnd(ev, tz);
+            const timeLabel = ev.all_day
+              ? "Todo el día"
+              : `${s?.format("HH:mm") ?? "--:--"}${
+                  e ? ` – ${e.format("HH:mm")}` : ""
+                }`;
+            return (
+              <Group
+                key={(ev.uid ?? "") + i}
+                gap="sm"
+                wrap="nowrap"
+                onClick={() => onEvent(ev)}
+                style={{
+                  cursor: "pointer",
+                  borderRadius: 6,
+                  padding: "6px 8px",
+                  borderLeft: `3px solid ${eventColor(ev, calColor)}`,
+                  background: "var(--mantine-color-default-hover)",
+                }}
+              >
+                <Text size="xs" c="dimmed" style={{ width: 96, flexShrink: 0 }}>
+                  {timeLabel}
+                </Text>
+                <Group gap={4} wrap="nowrap" style={{ minWidth: 0 }}>
+                  {ev.recurring && (
+                    <IconRepeat size={13} style={{ flexShrink: 0 }} />
+                  )}
+                  <Text size="sm" truncate>
+                    {ev.summary || "(sin título)"}
+                  </Text>
+                </Group>
+              </Group>
+            );
+          })}
+        </Stack>
+      </Box>
+    );
+  };
+
+  const isEmpty = upcomingGroups.length === 0 && pastGroups.length === 0;

  return (
    <ScrollArea h="100%" type="auto">
      <Box p="md">
        <Group justify="space-between" mb="sm" wrap="nowrap">
-          <Text fw={600}>Todos los eventos</Text>
-          <Button
-            size="xs"
-            leftSection={<IconPlus size={14} />}
-            onClick={onNew}
-          >
+          <Text fw={600}>Agenda</Text>
+          <Button size="xs" leftSection={<IconPlus size={14} />} onClick={onNew}>
            Nuevo evento
          </Button>
        </Group>

-        {groups.length === 0 ? (
+        {isEmpty ? (
          <Text c="dimmed" size="sm">
            No hay eventos en este calendario.
          </Text>
        ) : (
-          <Stack gap="lg">
-            {groups.map(([dayKey, list]) => {
-              const d = dayjs(dayKey);
-              const isToday = dayKey === today;
-              return (
-                <Box key={dayKey}>
-                  <Text
-                    size="sm"
-                    fw={600}
-                    c={isToday ? "brand" : undefined}
-                    mb={6}
-                    style={{ textTransform: "capitalize" }}
-                  >
-                    {d.format("dddd")} · {d.format("DD/MM/YYYY")}
-                  </Text>
-                  <Stack gap={4}>
-                    {list.map((ev, i) => {
-                      const s = eventStart(ev, tz);
-                      const e = eventEnd(ev, tz);
-                      const timeLabel = ev.all_day
-                        ? "Todo el día"
-                        : `${s?.format("HH:mm") ?? "--:--"}${
-                            e ? ` – ${e.format("HH:mm")}` : ""
-                          }`;
-                      return (
-                        <Group
-                          key={(ev.uid ?? "") + i}
-                          gap="sm"
-                          wrap="nowrap"
-                          onClick={() => onEvent(ev)}
-                          style={{
-                            cursor: "pointer",
-                            borderRadius: 6,
-                            padding: "6px 8px",
-                            borderLeft: `3px solid ${eventColor(ev, calColor)}`,
-                            background: "var(--mantine-color-default-hover)",
-                          }}
-                        >
-                          <Text
-                            size="xs"
-                            c="dimmed"
-                            style={{ width: 96, flexShrink: 0 }}
-                          >
-                            {timeLabel}
-                          </Text>
-                          <Group gap={4} wrap="nowrap" style={{ minWidth: 0 }}>
-                            {ev.recurring && (
-                              <IconRepeat size={13} style={{ flexShrink: 0 }} />
-                            )}
-                            <Text size="sm" truncate>
-                              {ev.summary || "(sin título)"}
-                            </Text>
-                          </Group>
-                        </Group>
-                      );
-                    })}
-                  </Stack>
-                </Box>
-              );
-            })}
+          <Stack gap="xl">
+            {/* Próximos */}
+            <Box>
+              <Text size="xs" tt="uppercase" fw={700} c="dimmed" mb="sm">
+                Próximos
+              </Text>
+              {upcomingGroups.length === 0 ? (
+                <Text c="dimmed" size="sm">
+                  No hay eventos próximos.
+                </Text>
+              ) : (
+                <Stack gap="lg">{upcomingGroups.map(renderGroup)}</Stack>
+              )}
+            </Box>
+
+            {/* Pasados — atenuados en gris claro */}
+            {pastGroups.length > 0 && (
+              <Box style={{ opacity: 0.5 }}>
+                <Text size="xs" tt="uppercase" fw={700} c="dimmed" mb="sm">
+                  Pasados
+                </Text>
+                <Stack gap="lg">{pastGroups.map(renderGroup)}</Stack>
+              </Box>
+            )}
          </Stack>
        )}
      </Box>