[UI v2] feat: Scaffolds UX components for Settings page (#16899)

ui-v2/src/components/settings/color-mode-select.tsx

@@ -0,0 +1,54 @@
+import {
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { useLocalStorage } from "@/hooks/use-local-storage";
+import { capitalize } from "@/utils";
+
+// TODO: Add colors in select content
+const COLOR_MODES = [
+	"default",
+	"achromatopsia",
+	"deuteranopia",
+	"deuteranomaly",
+	"protaponia",
+	"protanomaly",
+	"tritanomaly",
+	"tritanopia",
+] as const;
+type ColorMode = (typeof COLOR_MODES)[number];
+
+export const ColorModeSelect = () => {
+	const [selectedColorMode, setSelectedColorMode] = useLocalStorage<ColorMode>(
+		"prefect-color-mode",
+		"default",
+	);
+	return (
+		<div className="flex flex-col gap-1">
+			<label htmlFor="color-mode-select">Color Mode</label>
+			<Select
+				value={selectedColorMode}
+				onValueChange={(colorMode: ColorMode) =>
+					setSelectedColorMode(colorMode)
+				}
+			>
+				<SelectTrigger className="w-96" id="color-mode-select">
+					<SelectValue placeholder="Select a color mode" />
+				</SelectTrigger>
+				<SelectContent>
+					<SelectGroup>
+						{COLOR_MODES.map((colorMode) => (
+							<SelectItem key={colorMode} value={colorMode}>
+								{capitalize(colorMode)}
+							</SelectItem>
+						))}
+					</SelectGroup>
+				</SelectContent>
+			</Select>
+		</div>
+	);
+};

ui-v2/src/components/settings/heading.tsx

@@ -0,0 +1,27 @@
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbList,
+} from "@/components/ui/breadcrumb";
+
+type HeadingProps = {
+	version: string;
+};
+
+export const Heading = ({ version }: HeadingProps) => {
+	return (
+		<div className="flex justify-between items-center">
+			<Breadcrumb>
+				<BreadcrumbList>
+					<BreadcrumbItem className="text-xl font-semibold">
+						Settings
+					</BreadcrumbItem>
+				</BreadcrumbList>
+			</Breadcrumb>
+			<div className="flex flex-col gap-1">
+				<div className="text-xs text-muted-foreground">Version</div>
+				<div className="text-xs">{version}</div>
+			</div>
+		</div>
+	);
+};

ui-v2/src/components/settings/server-settings.tsx

@@ -0,0 +1,14 @@
+type ServerSettingsProps = {
+	settings: Record<string, unknown>;
+};
+
+export const ServerSettings = ({ settings }: ServerSettingsProps) => {
+	return (
+		<div className="flex flex-col gap-1">
+			<label htmlFor="server-settings">Server Settings</label>
+			<div id="server-settings" className="p-2 bg-slate-100 rounded-sm">
+				TODO: {JSON.stringify(settings)}
+			</div>
+		</div>
+	);
+};

ui-v2/src/components/settings/settings-page.tsx

@@ -0,0 +1,22 @@
+import { buildGetSettingsQuery, buildGetVersionQuery } from "@/api/admin";
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+import { ColorModeSelect } from "./color-mode-select";
+import { Heading } from "./heading";
+import { ServerSettings } from "./server-settings";
+import { ThemeSwitch } from "./theme-switch";
+
+export const SettingsPage = () => {
+	const { data: settingsData } = useSuspenseQuery(buildGetSettingsQuery());
+	const { data: versionData } = useSuspenseQuery(buildGetVersionQuery());
+
+	return (
+		<div className="flex flex-col gap-4">
+			<Heading version={versionData} />
+			<ThemeSwitch />
+			<ColorModeSelect />
+			{/** nb: open API needs to update schema */}
+			<ServerSettings settings={settingsData as Record<string, unknown>} />
+		</div>
+	);
+};

ui-v2/src/components/settings/theme-switch.tsx

@@ -0,0 +1,17 @@
+import { Icon } from "@/components/ui/icons";
+import { Switch } from "@/components/ui/switch";
+
+// TODO: Switch for dark mode provider
+
+export const ThemeSwitch = () => {
+	return (
+		<div className="flex flex-col gap-1">
+			<label htmlFor="theme-switch">Theme</label>
+			<div className="flex gap-2 items-center">
+				<Icon id="Sun" className="h-4 w-4" />
+				<Switch />
+				<Icon id="Moon" className="h-7 w-4" />
+			</div>
+		</div>
+	);
+};

ui-v2/src/components/ui/icons/constants.ts

@@ -17,6 +17,7 @@ import {
 	Cpu,
 	ExternalLink,
 	Loader2,
+	Moon,
 	MoreHorizontal,
 	MoreVertical,
 	PanelLeft,
@@ -26,6 +27,7 @@ import {
 	Rocket,
 	Search,
 	ServerCrash,
+	Sun,
 	Trash2,
 	Variable,
 	Workflow,
@@ -51,6 +53,7 @@ export const ICONS = {
 	Cpu,
 	ExternalLink,
 	Loader2,
+	Moon,
 	MoreHorizontal,
 	MoreVertical,
 	PanelLeft,
@@ -60,6 +63,7 @@ export const ICONS = {
 	Rocket,
 	Search,
 	ServerCrash,
+	Sun,
 	Trash2,
 	Variable,
 	Workflow,

ui-v2/src/routes/settings.tsx

@@ -1,16 +1,13 @@
 import { buildGetSettingsQuery, buildGetVersionQuery } from "@/api/admin";
+import { SettingsPage } from "@/components/settings/settings-page";
 import { createFileRoute } from "@tanstack/react-router";
 
 export const Route = createFileRoute("/settings")({
-	component: RouteComponent,
+	component: SettingsPage,
 	loader: ({ context }) =>
 		Promise.all([
 			context.queryClient.ensureQueryData(buildGetSettingsQuery()),
 			context.queryClient.ensureQueryData(buildGetVersionQuery()),
 		]),
 	wrapInSuspense: true,
 });
-
-function RouteComponent() {
-	return "🚧🚧 Pardon our dust! 🚧🚧";
-}