syntaxbullet/minabot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep habit history behind an accessible disclosure

Browse Source
This commit is contained in:
syntaxbullet
2026-09-05 07:50:41 +02:00
parent 892487eb4c
commit a2f5616b96
1 changed files with 24 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/components/HabitHistory.tsx
View File

@@ -1,5 +1,5 @@
import { Modal } from "./design-system/Modal"; import { Modal } from "./design-system/Modal";
import { Pencil } from "lucide-react"; import { ChevronDown, Pencil } from "lucide-react";
import { useEffect, useRef, useState, type ReactNode } from "react"; import { useEffect, useRef, useState, type ReactNode } from "react";
import type { CalendarResponse } from "../shared/calendar"; import type { CalendarResponse } from "../shared/calendar";
import { habitRequest, scheduleLabel, type TodayHabit } from "../lib/dashboard"; import { habitRequest, scheduleLabel, type TodayHabit } from "../lib/dashboard";
@@ -41,6 +41,7 @@ export function HabitHistory({
calendarOnly?: boolean; calendarOnly?: boolean;
}) { }) {
const [selectedDate, setSelectedDate] = useState<string>(); const [selectedDate, setSelectedDate] = useState<string>();
const [historyExpanded, setHistoryExpanded] = useState(false);
const [editingDay, setEditingDay] = useState(false); const [editingDay, setEditingDay] = useState(false);
const [savingDay, setSavingDay] = useState(false); const [savingDay, setSavingDay] = useState(false);
const [calendar, setCalendar] = useState<CalendarResponse | null>(null); const [calendar, setCalendar] = useState<CalendarResponse | null>(null);
@@ -164,7 +165,28 @@ export function HabitHistory({
target={habit.target ?? 0} target={habit.target ?? 0}
unit={habit.unit} unit={habit.unit}
color={calendar?.settings.mainColor ?? "#196127"} color={calendar?.settings.mainColor ?? "#196127"}
calendar={chart} calendar={
<div className="ds-habit-history">
<Button
variant="text"
className="ds-habit-history-toggle"
aria-expanded={historyExpanded}
aria-controls={`history-panel-${habit.habitId}`}
aria-label={`${historyExpanded ? "Hide" : "View"} history for ${habit.name ?? "habit"}`}
onClick={() => setHistoryExpanded((value) => !value)}
>
<ChevronDown size={16} aria-hidden="true" />
{historyExpanded ? "Hide history" : "View history"}
</Button>
<div
id={`history-panel-${habit.habitId}`}
className="ds-habit-history-panel"
hidden={!historyExpanded}
>
{historyExpanded && chart}
</div>
</div>
}
tasks={tasks} tasks={tasks}
tasksLabel="Tasks" tasksLabel="Tasks"
headingLevel={3} headingLevel={3}