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:
riyadhafraa
2026-04-21 07:16:50 +00:00
parent 8d90771409
commit bfdfffd8b5
13 changed files with 318 additions and 8 deletions
+38
View File
@@ -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: