rafraa/TX

Files

T

riyadhafraa 284cb751ed Add per-user clock style preference for the home status bar.

Original task #20: Let each user pick their own home-screen clock
style (analog/digital/minimal/etc.), persisted on the user record
and restored on login / other devices. Default = "full".

Changes:
- DB: added `clock_style varchar(30)` (nullable) to `users`
  (lib/db/src/schema/users.ts) and applied via direct ALTER TABLE
  (drizzle-kit push had unrelated interactive prompts about
  app_opens / user_sessions which were not safe to answer).
- OpenAPI: added `ClockStyle` enum (full/digital/digital-no-seconds
  /analog/minimal), `UpdateClockStyleBody`, exposed `clockStyle`
  on AuthUser and UserProfile, and added PATCH /auth/me/clock-style.
  Regenerated typed client and zod schemas.
- API: `buildAuthUser` and `buildUserProfile` include `clockStyle`;
  new authenticated endpoint updates the current user's style and
  returns the refreshed AuthUser.
- Frontend: new `Clock` component (artifacts/teaboy-os/src/
  components/clock.tsx) with five variants sharing a single `useNow`
  tick hook, plus an SVG analog clock; honors existing
  Latin-digit/locale formatting helpers. New `ClockStylePicker`
  (popover) shown in the status bar with a live preview for each
  option and optimistic update through the AuthUser query cache.
- home.tsx replaces the hard-coded clock block with `<Clock>` driven
  by `user.clockStyle`; trigger button placed next to the language
  toggle.
- i18n: added `home.clockStyle.label` and per-style option labels
  to en.json and ar.json.

Verified via e2e: register → default "full" rendered → switch to
analog → reload → analog persists → switch to minimal → time-only
renders. RTL layout + Latin digits both correct after language
toggle.

Replit-Task-Id: 475a7439-b357-400d-805f-5f2fda20ed24

2026-04-20 16:40:49 +00:00

3.1 KiB

Raw Blame History

TeaBoy OS

Overview

TeaBoy OS — a bilingual (Arabic/English, RTL/LTR) full-stack internal web platform styled as an OS-like interface with glassmorphism aesthetics. Built as a pnpm monorepo.

Architecture

/
├── artifacts/
│   ├── api-server/       Express 5 backend (port 8080)
│   └── teaboy-os/        React + Vite frontend (path: /, port dynamic)
├── lib/
│   ├── db/               Drizzle ORM + PostgreSQL schema
│   ├── api-spec/         OpenAPI spec + Orval codegen
│   ├── api-client-react/ Generated React Query hooks (from Orval)
│   └── api-zod/          Generated Zod schemas (from Orval)
└── scripts/              Seed script (pnpm run seed)

Stack

Monorepo: pnpm workspaces
Node.js: 24, TypeScript 5.9
Backend: Express 5, express-session + connect-pg-simple (PostgreSQL sessions), bcryptjs, Socket.IO
Database: PostgreSQL + Drizzle ORM, Zod validation
API codegen: Orval (OpenAPI → React Query hooks + Zod schemas)
Frontend: React + Vite, Tailwind CSS v4, wouter (routing), i18next (i18n), react-i18next
Real-time: Socket.IO (path: /api/socket.io)
Build: esbuild (API), Vite (frontend)

Features

Arabic default with full RTL layout; English toggle persisted in localStorage + user profile
Glassmorphism OS UI: animated gradient background, frosted glass panels
OS Home Screen: live clock status bar (per-user clock style: full / digital / digital-no-seconds / analog / minimal, picker in status bar), app grid, bottom dock
خدماتي (My Services): service card grid with availability status
Internal Chat: real-time messages via Socket.IO, conversation list
Notifications: unread tracking, mark-all-read
Admin Panel: CRUD for apps, services, users (admin role required)
Session-based Auth: RBAC with roles (admin/user)

Key Commands

pnpm run typecheck — full typecheck across all packages
pnpm run build — build all packages
pnpm --filter @workspace/api-spec run codegen — regenerate API hooks from OpenAPI spec
pnpm --filter @workspace/db run push — push DB schema changes (dev)
pnpm --filter @workspace/scripts run seed — seed demo data

Demo Accounts

Admin: admin / admin123 (admin + user roles)
User: ahmed / user123 (user role)

Database Tables

users, roles, permissions, user_roles, role_permissions, apps, app_permissions, service_categories, services, conversations, conversation_participants, messages, message_reads, notifications, user_sessions

Important Notes

Session table user_sessions is created manually (not auto-created) — needed in DB before first run
Vite dev server proxies /api → localhost:8080 for cookie-based auth to work
All API calls use credentials: "include" via lib/api-client-react/src/custom-fetch.ts
Socket.IO server path: /api/socket.io
Frontend connects to Socket.IO via same-origin proxy (no separate URL needed)
i18n locale files: artifacts/teaboy-os/src/locales/ar.json and en.json

3.1 KiB Raw Blame History