Bring daily check-ins forward with compact workspace layout
This commit is contained in:
@@ -166,6 +166,7 @@ function Dashboard({ user, onExpired }: { user: PublicUser; onExpired: () => voi
|
||||
const [revision, setRevision] = useState(0);
|
||||
const [attempt, setAttempt] = useState(0);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [habitView, setHabitView] = useState<"today" | "all">("today");
|
||||
const [adding, setAdding] = useState(false);
|
||||
const [sharing, setSharing] = useState(false);
|
||||
const [settings, setSettings] = useState(false);
|
||||
@@ -300,6 +301,8 @@ function Dashboard({ user, onExpired }: { user: PublicUser; onExpired: () => voi
|
||||
const refreshed = await habitRequest<TodayResponse>("/today");
|
||||
if (mounted.current) {
|
||||
setToday(refreshed);
|
||||
// Keep a habit reachable when an edit makes it unscheduled (including an empty routine).
|
||||
if (refreshed.habits.some(item => item.habitId === habit.habitId && !item.due)) setHabitView("all");
|
||||
setNeedsRefresh(false);
|
||||
setRevision((value) => value + 1);
|
||||
}
|
||||
@@ -337,6 +340,7 @@ function Dashboard({ user, onExpired }: { user: PublicUser; onExpired: () => voi
|
||||
return (
|
||||
<>
|
||||
<WelcomePanel
|
||||
compact
|
||||
name={user.displayName || user.username}
|
||||
avatarUrl={user.avatarUrl}
|
||||
date={today?.date}
|
||||
@@ -379,7 +383,6 @@ function Dashboard({ user, onExpired }: { user: PublicUser; onExpired: () => voi
|
||||
{today.habits.length > 0 && (
|
||||
<>
|
||||
<Button id="open-sharing" aria-haspopup="dialog" variant="secondary" disabled={busy || loading || needsRefresh || sharing} aria-expanded={sharing} aria-controls={sharing ? "share-progress" : undefined} onClick={() => setSharing(true)}>Share progress</Button>
|
||||
<ButtonLink href="#habits-title">View your habits ↓</ButtonLink>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
@@ -421,6 +424,7 @@ function Dashboard({ user, onExpired }: { user: PublicUser; onExpired: () => voi
|
||||
focusAddAfterRefresh.current = true;
|
||||
setAdding(false);
|
||||
setNotice(`${name} created.`);
|
||||
setHabitView("all");
|
||||
setAttempt((value) => value + 1);
|
||||
}}
|
||||
/>
|
||||
@@ -440,13 +444,18 @@ function Dashboard({ user, onExpired }: { user: PublicUser; onExpired: () => voi
|
||||
id="habits-title"
|
||||
title={
|
||||
<>
|
||||
One day <em>at a time.</em>
|
||||
Today, <em>at your pace.</em>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className="ds-habit-chart-grid">
|
||||
{today.habits.map((habit) => (
|
||||
<div className="ds-action-row ds-habit-filters" role="group" aria-label="Show habits">
|
||||
<Button variant={habitView === "today" ? "primary" : "text"} aria-pressed={habitView === "today"} onClick={() => setHabitView("today")}>Today · {today.due}</Button>
|
||||
<Button variant={habitView === "all" ? "primary" : "text"} aria-pressed={habitView === "all"} onClick={() => setHabitView("all")}>All habits · {today.habits.length}</Button>
|
||||
</div>
|
||||
{habitView === "today" && today.due === 0 && <p className="ds-supporting-copy">You’re all set for today. Choose All habits to view or edit your routines.</p>}
|
||||
<div className="ds-habit-chart-grid ds-habit-list">
|
||||
{today.habits.filter(habit => habitView === "all" || habit.due).map((habit) => (
|
||||
<SavedHabit
|
||||
key={habit.habitId}
|
||||
habit={habit}
|
||||
@@ -579,6 +588,7 @@ function SavedHabit({
|
||||
>
|
||||
{habit.method === "count" ? (
|
||||
<Counter
|
||||
key={date}
|
||||
label={habit.name ?? "habit count"}
|
||||
value={habit.value}
|
||||
target={habit.target ?? 0}
|
||||
|
||||
Reference in New Issue
Block a user