gorkem-bwl
944ee74a1d
Adds four fully-designed visual themes for the public status page (refined | modern | bold | editorial) with a light/dark mode selector, admin preview in a mock browser frame, and a shared theme provider that keeps the component tree unified while letting each theme own its visual identity. ## Selectable themes - Refined — clean, flat cards, soft shadows, colored status dot. - Modern — flat surfaces with a pulsing status dot and staggered fade-in cards. - Bold — conic-gradient logo, 34px hero title with a check disc, subtle dual-radial glow on dark mode, accent-green hover border. - Editorial — serif headings, narrow newspaper column, 'Service Report' eyebrow + title, flat rectangular badges and dateline. ## Architecture - Single `StatusPageThemeProvider` hosts CSS custom-property tokens per theme and resolves light/dark based on admin-forced mode, falling back to `prefers-color-scheme` with a matchMedia listener. - Each theme owns only its `*StatusPage.tsx` + scoped CSS file. The heatmap, histogram, and infrastructure renderers are shared across all four themes (parameterized by a `classPrefix`) to avoid the 12-file duplication the initial draft had. - Renderer lookup table in `Status/index.tsx` replaces a 4-way ternary chain; unknown themes fall through to the legacy renderer. - `resolveOverallStatus`, `statusBadgeKey`, `monoFirstChar`, and `monitorBadgeTone` are extracted to `themes/shared/overallStatus.tsx`. ## Admin UX - `ThemePicker` uses the project's `RadioWithDescription` and `Select` components — one radio card per theme plus an Auto/ Light-only/Dark-only mode dropdown. - `BrowserFrame` wraps the preview in the admin panel with a mock chrome (traffic lights + URL bar) that adopts the status page's theme tokens. Edge-to-edge fill with no gray bleed. - Public route renders the theme directly on the viewport with the document body painted to the theme background, reverted on unmount. ## Performance & polish - Histogram's derived stats (padded array, max, avg, peak) are memoized on `checks`; `max` is reused for `peak` instead of computing twice. - Editorial's dateline is wrapped in `useMemo` so the 10s poll doesn't rerender "April 23, 2026" as a changing string. - Provider's `setSystemMode` reconciliation uses the updater form to avoid an extra render when the value is unchanged. - `monoFirstChar` no longer uses a non-null assertion. ## Form plumbing - `useStatusPageForm` defaults include `theme` + `themeMode`. - `Validation/statusPage.ts` accepts both as optional zod enums. - `Pages/StatusPage/Create/index.tsx` appends both to FormData on create and update. ## CLAUDE.md - Dev port note: local client runs on 10001 (5173 is used by a different local project); server `CLIENT_HOST` is set to match.
41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import { z } from "zod";
|
|
import { STATUS_PAGE_THEMES, STATUS_PAGE_THEME_MODES } from "@/Types/StatusPage";
|
|
|
|
export const statusPageSchema = z.object({
|
|
companyName: z
|
|
.string()
|
|
.min(1, "Company name is required")
|
|
.max(100, "Company name must be at most 100 characters"),
|
|
url: z
|
|
.string()
|
|
.min(1, "URL is required")
|
|
.max(50, "URL must be at most 50 characters")
|
|
.regex(
|
|
/^[a-z0-9-]+$/,
|
|
"URL can only contain lowercase letters, numbers, and hyphens"
|
|
),
|
|
timezone: z.string().optional(),
|
|
type: z
|
|
.array(z.enum(["uptime", "infrastructure"]))
|
|
.min(1, "At least one type is required"),
|
|
color: z.string().min(1, "Color is required"),
|
|
monitors: z.array(z.string()).min(1, "At least one monitor is required"),
|
|
isPublished: z.boolean(),
|
|
showCharts: z.boolean(),
|
|
showUptimePercentage: z.boolean(),
|
|
showAdminLoginLink: z.boolean(),
|
|
showInfrastructure: z.boolean(),
|
|
customCSS: z.string().optional(),
|
|
theme: z.enum(STATUS_PAGE_THEMES).optional(),
|
|
themeMode: z.enum(STATUS_PAGE_THEME_MODES).optional(),
|
|
logo: z
|
|
.object({
|
|
data: z.string(),
|
|
contentType: z.string(),
|
|
})
|
|
.nullable()
|
|
.optional(),
|
|
});
|
|
|
|
export type StatusPageFormData = z.infer<typeof statusPageSchema>;
|