All files / src/components/lists ScheduleNav.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
/**
 * ScheduleNav — vertical sidebar navigation for the Schedules page.
 *
 * @module
 */
 
import { useCallback, useRef, type JSX, type KeyboardEvent } from "react";
import { Circle } from "lucide-react";
import { ICON_XS } from "../../utils/iconSize.js";
import { useMatch } from "react-router";
import type { PersonaData, ScheduleData } from "../../hooks/types.js";
import { scheduleUrl, NEW_SCHEDULE_URL, useAppNavigate } from "../../utils/navigation.js";
import { formatCountdown } from "../../utils/time.js";
import styles from "./ScheduleNav.module.scss";
 
/** Props for the ScheduleNav component. */
export interface ScheduleNavProps {
  /** List of all schedules to display in the nav. */
  schedules: ScheduleData[];
  /** All personas — used to resolve persona names for trailing badges. */
  personas: PersonaData[];
}
 
/** Vertical nav rail listing schedules with enabled/disabled status dots. */
export function ScheduleNav({ schedules, personas }: ScheduleNavProps): JSX.Element {
  const navigate = useAppNavigate();
  const tabListRef = useRef<HTMLElement>(null);
 
  const detailMatch = useMatch("/schedules/:scheduleId");
  const rawId = detailMatch?.params.scheduleId;
  const activeId = rawId === "new" ? undefined : rawId;
 
  const personaMap = new Map(personas.map((p) => [p.id, p]));
 
  const handleClick = useCallback(
    (scheduleId: string) => {
      navigate(scheduleUrl(scheduleId));
    },
    [navigate],
  );
 
  const handleKeyDown = useCallback(
    (e: KeyboardEvent<HTMLElement>) => {
      const buttons = tabListRef.current?.querySelectorAll<HTMLButtonElement>('[role="tab"]');
      if (!buttons || buttons.length === 0) {
        return;
      }
      const focusedIndex = Array.from(buttons).findIndex((b) => b === document.activeElement);
      const currentIndex =
        focusedIndex >= 0 ? focusedIndex : schedules.findIndex((s) => s.id === activeId);
      let nextIndex = currentIndex;
 
      if (e.key === "ArrowDown" || e.key === "j" || e.key === "J") {
        e.preventDefault();
        nextIndex = (currentIndex + 1) % buttons.length;
      } else if (e.key === "ArrowUp" || e.key === "k" || e.key === "K") {
        e.preventDefault();
        nextIndex = (currentIndex - 1 + buttons.length) % buttons.length;
      } else if (e.key === "Home") {
        e.preventDefault();
        nextIndex = 0;
      } else if (e.key === "End") {
        e.preventDefault();
        nextIndex = buttons.length - 1;
      } else {
        return;
      }
 
      if (nextIndex < schedules.length) {
        navigate(scheduleUrl(schedules[nextIndex].id));
      }
      buttons[nextIndex].focus();
    },
    [activeId, schedules, navigate],
  );
 
  const focusableId = activeId ?? (schedules.length > 0 ? schedules[0].id : undefined);
 
  return (
    <div className={styles.nav} data-testid="schedule-nav">
      <nav
        ref={tabListRef}
        role="tablist"
        aria-orientation="vertical"
        aria-label="Schedules"
        onKeyDown={handleKeyDown}
      >
        {schedules.map((schedule) => {
          const isActive = schedule.id === activeId;
          const isFocusable = schedule.id === focusableId;
          const statusColor = schedule.enabled ? "var(--accent-green)" : "var(--text-tertiary)";
          const persona = personaMap.get(schedule.personaId);
          const trailingText =
            schedule.enabled && schedule.nextRunAt
              ? formatCountdown(schedule.nextRunAt)
              : persona?.name;
          return (
            <button
              key={schedule.id}
              role="tab"
              type="button"
              aria-selected={isActive}
              tabIndex={isFocusable ? 0 : -1}
              className={`${styles.tab} ${isActive ? styles.tabActive : ""}`}
              onClick={() => handleClick(schedule.id)}
              data-testid="schedule-nav-item"
            >
              <span className={styles.statusDot} style={{ color: statusColor }} aria-hidden="true">
                <Circle size={ICON_XS} fill="currentColor" />
              </span>
              <span className={styles.tabLabel} title={schedule.title}>
                {schedule.title}
              </span>
              {trailingText && (
                <span className={styles.trailingBadge} title={trailingText}>
                  {trailingText}
                </span>
              )}
            </button>
          );
        })}
      </nav>
 
      <button
        type="button"
        className={styles.addButton}
        onClick={() => navigate(NEW_SCHEDULE_URL)}
        title="New schedule"
        data-testid="schedule-nav-add"
      >
        + New Schedule
      </button>
 
      {schedules.length === 0 && <div className={styles.empty}>No schedules yet.</div>}
    </div>
  );
}