123 lines
4.5 KiB
Markdown
123 lines
4.5 KiB
Markdown
# Missing Frontend Features — Gaps vs SPEC.md
|
|
|
|
This file lists things the spec explicitly requires that are **not yet implemented** in the frontend. It does **not** duplicate items already in `frontend_improvements.md` (code quality, performance, testing).
|
|
|
|
---
|
|
|
|
## 1. StatusBanner — Awake State Missing Elapsed Time
|
|
|
|
**Severity: Medium**
|
|
|
|
**Spec requirement:**
|
|
> "No active session: 'Baby is awake 👶' with elapsed time since last sleep ended (if known)."
|
|
|
|
**What is currently implemented** (`src/components/tracker/StatusBanner.tsx:40-50`):
|
|
The awake state renders only "Baby is awake" with the 👶 emoji. There is no elapsed time displayed.
|
|
|
|
**What is missing:**
|
|
A line below "Baby is awake" that shows how long ago the last sleep session ended (e.g. "2h 15m ago"), updating every second. Should only appear "if known" — i.e. when a previous session with an `end_time` exists.
|
|
|
|
**How to fix:**
|
|
|
|
1. In `StatusBanner.tsx`, add a second `useQuery` call using `fetchSessions` from `src/api/client.ts`. Pass `{ limit: 1 }` to get only the most recent session. Example:
|
|
```ts
|
|
import { fetchSessions } from '../../api/client';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
|
|
const { data: sessionsData } = useQuery({
|
|
queryKey: ['sessions', 'last'],
|
|
queryFn: () => fetchSessions(), // already exists in api/client.ts
|
|
enabled: !activeSession, // only fetch when no active session
|
|
});
|
|
const lastEndTime = sessionsData?.sessions?.[0]?.end_time ?? null;
|
|
```
|
|
|
|
2. Add a second elapsed-time state and `useEffect` that runs only when `activeSession` is null and `lastEndTime` is set — mirrors the existing sleeping elapsed-time effect at lines 9-22:
|
|
```ts
|
|
const [awakeElapsed, setAwakeElapsed] = useState<string>('');
|
|
useEffect(() => {
|
|
if (activeSession || !lastEndTime) { setAwakeElapsed(''); return; }
|
|
const update = () => setAwakeElapsed(formatElapsedTime(lastEndTime));
|
|
update();
|
|
const id = setInterval(update, 1000);
|
|
return () => clearInterval(id);
|
|
}, [activeSession, lastEndTime]);
|
|
```
|
|
`formatElapsedTime` is already imported from `../../utils/time`.
|
|
|
|
3. In the awake JSX (currently lines 40-50), add the elapsed time below the "Baby is awake" text:
|
|
```tsx
|
|
{awakeElapsed && (
|
|
<p className="text-sm text-blue-700 font-mono">({awakeElapsed} ago)</p>
|
|
)}
|
|
```
|
|
|
|
---
|
|
|
|
## 2. TimeAdjuster — Does Not Reset to "Now" on Session State Change
|
|
|
|
**Severity: Medium**
|
|
|
|
**Spec requirement:**
|
|
> "Resets to 'now' each time the state changes (start → stop or stop → start), but the user can freely edit before confirming."
|
|
|
|
**What is currently implemented** (`src/components/tracker/TrackerPage.tsx:13`):
|
|
```ts
|
|
const [time, setTime] = useState<string>(getLocalTime());
|
|
```
|
|
`time` is set once when the component mounts and never reset. After the user starts or stops a session, the datetime field keeps whatever value it had before.
|
|
|
|
**What is missing:**
|
|
An automatic reset of the datetime input to the current local time whenever the active session state flips (null → session, or session → null).
|
|
|
|
**How to fix:**
|
|
|
|
In `TrackerPage.tsx`, import `useSleepSession` and add a `useEffect` that watches `activeSession?.id`. When it changes the time resets to "now":
|
|
|
|
```ts
|
|
import { useSleepSession } from '../../hooks/useSleepSession';
|
|
|
|
const TrackerPage: React.FC = () => {
|
|
const getLocalTime = () => { /* existing implementation */ };
|
|
const [time, setTime] = useState<string>(getLocalTime());
|
|
|
|
// ADD THIS:
|
|
const { activeSession } = useSleepSession();
|
|
useEffect(() => {
|
|
setTime(getLocalTime());
|
|
}, [activeSession?.id]); // fires whenever session starts or ends
|
|
|
|
// ... rest unchanged
|
|
```
|
|
|
|
Note: `useSleepSession` is already used inside `SleepButton.tsx` (a sibling), so there is no extra network cost — TanStack Query deduplicates the request. `getLocalTime` is already defined in `TrackerPage.tsx:7-11`.
|
|
|
|
---
|
|
|
|
## 3. SleepButton — "Stop Sleep" Should Be Amber, Not Rose
|
|
|
|
**Severity: Low**
|
|
|
|
**Spec requirement:**
|
|
> "Large button labeled 'Stop Sleep' in a warm amber."
|
|
|
|
**What is currently implemented** (`src/components/tracker/SleepButton.tsx:31`):
|
|
```ts
|
|
'bg-rose-500 text-white hover:bg-rose-600 shadow-rose-200'
|
|
```
|
|
The button is red/rose, not amber.
|
|
|
|
**How to fix:**
|
|
|
|
In `SleepButton.tsx` at the ternary starting on line 28, change the three rose classes to amber:
|
|
|
|
```ts
|
|
// Before:
|
|
'bg-rose-500 text-white hover:bg-rose-600 shadow-rose-200'
|
|
|
|
// After:
|
|
'bg-amber-500 text-white hover:bg-amber-600 shadow-amber-200'
|
|
```
|
|
|
|
That is the only change needed in this file.
|