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

Give each habit completion type a distinct layout

Browse Source
This commit is contained in:
syntaxbullet
2026-09-05 08:11:00 +02:00
parent 2f67b775bf
commit 63e1573dae
2 changed files with 52 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/design-system/HabitChart.tsx
View File

@@ -3,7 +3,7 @@ import { ChevronDown, ListChecks } from "lucide-react";
import { CalendarHeatmap } from "./CalendarHeatmap";
import { demoCalendar } from "./calendar-model";
/** Open chart section: intentionally no card surface or enclosing border. */
/** Completion controls define each goal surface; history stays a separate full-width disclosure. */
export function HabitChart({
name,
method,
@@ -47,22 +47,27 @@ export function HabitChart({
const Heading = `h${headingLevel}` as const;
if (trackingMethod) return (
<section className={`ds-habit-chart ds-goal ds-goal--${trackingMethod}`} id={id} aria-labelledby={headingId} style={{ "--habit-color": color } as CSSProperties}>
<header className="ds-goal-heading">
<div className="ds-goal-title">
{trackingMethod === "manual" && children}
<Heading id={headingId} className="type-title">
{trackingMethod === "manual" ? <label htmlFor={checkInId}>{name}</label> : name}
</Heading>
<div className="ds-goal-body">
<div className="ds-goal-overview">
<header className="ds-goal-heading">
<div className="ds-goal-title">
{trackingMethod === "manual" && children}
<Heading id={headingId} className="type-title">
{trackingMethod === "manual" ? <label htmlFor={checkInId}>{name}</label> : name}
</Heading>
</div>
{headingActions}
</header>
{(!due || schedule !== "Every day") && <p className="ds-goal-schedule">{due ? schedule : `Not scheduled today · ${schedule}`}</p>}
{trackingMethod === "tasks" && due && target > 0 && <div className="ds-goal-task-progress">
<progress aria-label={`${name} tasks completed`} value={Math.max(0, Math.min(value, target))} max={target} />
<span role="status">{value} / {target}</span>
</div>}
</div>
{headingActions}
</header>
{(!due || schedule !== "Every day") && <p className="ds-goal-schedule">{due ? schedule : `Not scheduled today · ${schedule}`}</p>}
{editor}
{trackingMethod === "count" && <div className="ds-goal-count">{children}<span className="ds-goal-unit">{unit}</span></div>}
{trackingMethod === "tasks" && <div className="ds-goal-tasks">
{due && target > 0 && <p className="ds-goal-task-progress" role="status">{value} / {target} completed</p>}
{tasks}
</div>}
{trackingMethod === "count" && <div className="ds-goal-count">{children}<span className="ds-goal-unit">{unit}</span></div>}
{editor}
{trackingMethod === "tasks" && <div className="ds-goal-tasks">{tasks}</div>}
</div>
{calendar}
</section>
);