riyadhafraa
284cb751ed
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
69 lines
3.1 KiB
Markdown
69 lines
3.1 KiB
Markdown
# 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`
|