From b64356381d870fba01b104eb5cc927424d4a2318 Mon Sep 17 00:00:00 2001
From: Chneemann <andre-kempf@mailbox.org>
Date: Sat, 26 Sep 2026 20:03:05 +0200
Subject: [PATCH] refactor(settings): extract MEMBER_STATUS_OPTIONS into member
 constants

---
 components/settings/SettingsProfileCard.tsx | 10 ++--------
 lib/constants/member.styles.ts              | 22 +++++++++++----------
 2 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/components/settings/SettingsProfileCard.tsx b/components/settings/SettingsProfileCard.tsx
index acc64fb..3918463 100644
--- a/components/settings/SettingsProfileCard.tsx
+++ b/components/settings/SettingsProfileCard.tsx
@@ -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
diff --git a/lib/constants/member.styles.ts b/lib/constants/member.styles.ts
index a05c169..d7204fd 100644
--- a/lib/constants/member.styles.ts
+++ b/lib/constants/member.styles.ts
@@ -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" },
+];