Task #28: Let users pick a 12-hour (AM/PM) clock instead of 24-hour
Add a per-user 12/24-hour clock preference that complements the existing
clock-style preference and is honored by every clock variant on the home
screen.
Schema & API
- Added `clockHour12 boolean` (nullable) column to `users` table
(lib/db/src/schema/users.ts) and synced via direct `ALTER TABLE`
because `drizzle-kit push` was blocked by an unrelated interactive
rename prompt for the existing `app_opens` table.
- Extended OpenAPI `AuthUser` and `UserProfile` with `clockHour12`,
added `UpdateClockHour12Body` schema, and a new
`PATCH /auth/me/clock-hour12` endpoint. Regenerated zod + react-query
clients via `pnpm --filter @workspace/api-spec run codegen`.
- Implemented the new route handler in
`artifacts/api-server/src/routes/auth.ts`; `buildAuthUser` now
surfaces `clockHour12`.
Frontend
- `lib/i18n-format.ts` no longer hard-codes `hour12: false`; callers
may pass `hour12` in options. Default remains 24-hour to keep all
other timestamps unchanged (chat etc. left as-is — see follow-up).
- `components/clock.tsx` exports `resolveClockHour12` and threads a new
`hour12` prop through `Clock` and `AnalogClockWidget`. All five
variants (full/digital/digital-no-seconds/analog/minimal) plus the
large analog widget now honor the choice.
- `components/clock-style-picker.tsx` gained a 12-hour / 24-hour
segmented toggle that calls the new endpoint with optimistic cache
updates. The variant previews also reflect the active hour format.
- `pages/home.tsx` passes `user.clockHour12` to the header clock,
widget, and picker.
- Added `home.clockStyle.hourFormat.{label,h12,h24}` strings in EN and
AR. Arabic uses Latin digits and "ص/م" via Intl's localized
dayPeriod.
Verification
- `pnpm -w run typecheck` passes.
- E2E test: logged in, switched to 12-hour, verified AM/PM in header
and previews, reloaded to confirm persistence, switched back to
24-hour, reloaded again — all green.
Replit-Task-Id: 03ea8cbe-ace7-4d36-afc5-49ebc9706c67
This commit is contained in:
@@ -270,6 +270,31 @@ paths:
|
||||
schema:
|
||||
$ref: "#/components/schemas/ErrorResponse"
|
||||
|
||||
/auth/me/clock-hour12:
|
||||
patch:
|
||||
operationId: updateClockHour12
|
||||
tags: [auth]
|
||||
summary: Update preferred 12/24-hour clock format
|
||||
requestBody:
|
||||
required: true
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/UpdateClockHour12Body"
|
||||
responses:
|
||||
"200":
|
||||
description: Updated
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/AuthUser"
|
||||
"400":
|
||||
description: Validation error
|
||||
content:
|
||||
application/json:
|
||||
schema:
|
||||
$ref: "#/components/schemas/ErrorResponse"
|
||||
|
||||
# Apps
|
||||
/apps:
|
||||
get:
|
||||
@@ -1025,6 +1050,15 @@ components:
|
||||
required:
|
||||
- clockStyle
|
||||
|
||||
UpdateClockHour12Body:
|
||||
type: object
|
||||
properties:
|
||||
clockHour12:
|
||||
type: ["boolean", "null"]
|
||||
description: Whether to use 12-hour (AM/PM) clock format; null clears and uses the default (24-hour)
|
||||
required:
|
||||
- clockHour12
|
||||
|
||||
AuthUser:
|
||||
type: object
|
||||
properties:
|
||||
@@ -1044,6 +1078,8 @@ components:
|
||||
oneOf:
|
||||
- $ref: "#/components/schemas/ClockStyle"
|
||||
- type: "null"
|
||||
clockHour12:
|
||||
type: ["boolean", "null"]
|
||||
avatarUrl:
|
||||
type: ["string", "null"]
|
||||
isActive:
|
||||
@@ -1083,6 +1119,8 @@ components:
|
||||
oneOf:
|
||||
- $ref: "#/components/schemas/ClockStyle"
|
||||
- type: "null"
|
||||
clockHour12:
|
||||
type: ["boolean", "null"]
|
||||
avatarUrl:
|
||||
type: ["string", "null"]
|
||||
isActive:
|
||||
|
||||
Reference in New Issue
Block a user