Polish dashboard hierarchy and unify daily controls
This commit is contained in:
@@ -369,26 +369,28 @@ function Dashboard({ user, onExpired }: { user: PublicUser; onExpired: () => voi
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="ds-action-row ds-primary-actions">
|
||||
<Button
|
||||
id="add-habit"
|
||||
aria-haspopup="dialog"
|
||||
disabled={adding || busy || loading || needsRefresh}
|
||||
onClick={() => setAdding(true)}
|
||||
aria-expanded={adding}
|
||||
aria-controls={adding ? "new-habit" : undefined}
|
||||
>
|
||||
Add a habit +
|
||||
</Button>
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="ds-action-row ds-utility-row">
|
||||
<Button variant="text" disabled={busy} aria-haspopup="dialog" aria-expanded={archive} aria-controls={archive ? "archived-habits" : undefined} onClick={() => setArchive(!archive)}><Archive size={16} aria-hidden="true" />Archived habits</Button>
|
||||
<Button variant="text" disabled={busy} aria-haspopup="dialog" aria-expanded={settings} aria-controls={settings ? "account-settings" : undefined} onClick={() => setSettings(!settings)}><Settings2 size={16} aria-hidden="true" />Settings</Button>
|
||||
<div className="ds-workspace-actions">
|
||||
<div className="ds-action-row ds-primary-actions">
|
||||
<Button
|
||||
id="add-habit"
|
||||
aria-haspopup="dialog"
|
||||
disabled={adding || busy || loading || needsRefresh}
|
||||
onClick={() => setAdding(true)}
|
||||
aria-expanded={adding}
|
||||
aria-controls={adding ? "new-habit" : undefined}
|
||||
>
|
||||
Add a habit +
|
||||
</Button>
|
||||
{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>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="ds-action-row ds-utility-row">
|
||||
<Button variant="text" disabled={busy} aria-haspopup="dialog" aria-expanded={archive} aria-controls={archive ? "archived-habits" : undefined} onClick={() => setArchive(!archive)}><Archive size={16} aria-hidden="true" />Archived habits</Button>
|
||||
<Button variant="text" disabled={busy} aria-haspopup="dialog" aria-expanded={settings} aria-controls={settings ? "account-settings" : undefined} onClick={() => setSettings(!settings)}><Settings2 size={16} aria-hidden="true" />Settings</Button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
@@ -429,12 +431,12 @@ function Dashboard({ user, onExpired }: { user: PublicUser; onExpired: () => voi
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<p className="ds-form-feedback" role="status">
|
||||
<p className="ds-form-feedback ds-save-notice" role="status">
|
||||
{notice}
|
||||
</p>
|
||||
{today.habits.length > 0 && (
|
||||
<section
|
||||
className="ds-section"
|
||||
className="ds-section ds-habits-section"
|
||||
aria-labelledby="habits-title"
|
||||
aria-busy={busy || loading}
|
||||
>
|
||||
@@ -448,11 +450,11 @@ function Dashboard({ user, onExpired }: { user: PublicUser; onExpired: () => voi
|
||||
</>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<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>
|
||||
</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) => (
|
||||
|
||||
Reference in New Issue
Block a user