Chneemann/waveform
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(settings): extract MEMBER_STATUS_OPTIONS into member constants
All checks were successful
Deploy Waveform to VPS / deploy (push) Successful in 1m14s
Details

Browse source
This commit is contained in:
Chneemann 2026-09-26 20:03:05 +02:00
parent 2bc0a508ea
commit b64356381d
No known key found for this signature in database
2 changed files with 14 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/settings/SettingsProfileCard.tsx
View file

@ -11,6 +11,7 @@ import { UserStatus } from "@/db/schema";
import {
MEMBER_STATUS_COLOR_CLASSES,
MEMBER_COLOR_OPTIONS,
MEMBER_STATUS_OPTIONS,
} from "@/lib/constants/member.styles";
import { UserRound, Palette, ChevronDown } from "lucide-react";
import { useUser } from "@/lib/context/UserContext";
@ -21,13 +22,6 @@ interface SettingsProfileCardProps {
defaultOpen?: boolean;
}
const STATUSES: { label: string; value: UserStatus }[] = [
{ label: "Online", value: "ONLINE" },
{ label: "Offline", value: "OFFLINE" },
{ label: "AFK", value: "AFK" },
{ label: "DND", value: "DND" },
];
/** Renders a collapsible card for managing user profile details, status, and theme color. */
export function SettingsProfileCard({
onUpdate,
@ -72,7 +66,7 @@ export function SettingsProfileCard({
<UserRound className="w-4 h-4 text-muted" /> Online Status
</h3>
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
{STATUSES.map((status) => {
{MEMBER_STATUS_OPTIONS.map((status) => {
const isSelected = currentUser.status === status.value;
return (
<button

22
lib/constants/member.styles.ts
View file

@ -1,12 +1,11 @@
/**
* @file lib/constants/member.styles.ts
* @description Tailwind CSS color mapping constants and status options for server members.
*/
import type { UserStatus } from "@/db/schema";
/**
* Shared Tailwind CSS class constants mapping available member background color keys to their respective CSS utility classes.
*/
/** Shared Tailwind CSS class constants mapping available member background color keys to their respective CSS utility classes. */
export const MEMBER_COLOR_CLASSES: Record<string, string> = {
"bg-indigo-500": "bg-indigo-500",
"bg-emerald-500": "bg-emerald-500",
@ -18,18 +17,21 @@ export const MEMBER_COLOR_CLASSES: Record<string, string> = {
"bg-cyan-500": "bg-cyan-500",
};
/**
* List of available color option class names for member icon selection.
* Dynamically generated from MEMBER_COLOR_OPTIONS to avoid duplicate maintenance.
*/
/** List of available color option class names for member icon selection. */
export const MEMBER_COLOR_OPTIONS = Object.keys(MEMBER_COLOR_CLASSES);
/**
* Mapping of user status keys to their respective Tailwind CSS indicator background colors.
*/
/** Mapping of user status keys to their respective Tailwind CSS indicator background colors. */
export const MEMBER_STATUS_COLOR_CLASSES: Record<UserStatus, string> = {
ONLINE: "bg-emerald-500",
OFFLINE: "bg-slate-500",
AFK: "bg-amber-500",
DND: "bg-rose-500",
};
/** Selectable options array for user status values and human-readable labels. */
export const MEMBER_STATUS_OPTIONS: { label: string; value: UserStatus }[] = [
{ label: "Online", value: "ONLINE" },
{ label: "Offline", value: "OFFLINE" },
{ label: "AFK", value: "AFK" },
{ label: "DND", value: "DND" },
];