feat(settings): add online status selection UI

components/settings/SettingsView.tsx

@@ -5,22 +5,48 @@
 
 "use client";
 
+import { useState } from "react";
 import { UserAvatar } from "@/components/ui/UserAvatar";
-import { User } from "@/db/schema";
+import { UserStatus, User } from "@/db/schema";
+import { MEMBER_STATUS_COLOR_CLASSES } from "@/lib/constants/member.styles";
+import { UserRound } from "lucide-react";
 
+/** Props for the SettingsView component. */
 interface SettingsViewProps {
   userId: string;
   currentUser: User;
 }
 
+/** Renders the user settings view for profile management and status selection. */
 export function SettingsView({ userId, currentUser }: SettingsViewProps) {
+  const [selectedStatus, setSelectedStatus] = useState<UserStatus>(
+    currentUser.status,
+  );
+
+  const statuses: { label: string; value: UserStatus }[] = [
+    { label: "Online", value: "ONLINE" },
+    { label: "Offline", value: "OFFLINE" },
+    { label: "AFK", value: "AFK" },
+    { label: "DND", value: "DND" },
+  ];
+
+  /** Updates local status state on user selection. */
+  const handleStatusChange = (newStatus: UserStatus) => {
+    setSelectedStatus(newStatus);
+  };
+
   if (!currentUser) return null;
 
+  const userWithUpdatedSettings = {
+    ...currentUser,
+    status: selectedStatus,
+  };
+
   return (
     <div className="flex flex-col h-full w-full bg-background text-white gap-6">
       {/* Header */}
       <div>
-        <h1 className="text-2xl font-bold text-white">Settings</h1>
+        <h1 className="text-2xl font-bold text-white">User Settings</h1>
         <p className="text-sm text-muted">
           Manage your profile, status, and account settings.
         </p>
@@ -29,7 +55,7 @@ export function SettingsView({ userId, currentUser }: SettingsViewProps) {
       {/* Profile Overview Card */}
       <div className="bg-surface border border-muted/20 rounded-xl p-6 space-y-6">
         <div className="flex items-center gap-4">
-          <UserAvatar user={currentUser} size="md" />
+          <UserAvatar user={userWithUpdatedSettings} size="md" />
           <div>
             <h2 className="text-lg font-bold text-white">
               {currentUser.username}
@@ -37,6 +63,37 @@ export function SettingsView({ userId, currentUser }: SettingsViewProps) {
             <p className="text-sm text-muted">{currentUser.email}</p>
           </div>
         </div>
+
+        {/* Status Selection */}
+        <div className="border-t border-muted/20 pt-6 space-y-4">
+          <h3 className="text-sm font-semibold text-white flex items-center gap-2">
+            <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) => {
+              const isSelected = selectedStatus === status.value;
+              const statusBgColor = MEMBER_STATUS_COLOR_CLASSES[status.value];
+
+              return (
+                <button
+                  key={status.value}
+                  type="button"
+                  onClick={() => handleStatusChange(status.value)}
+                  className={`flex items-center gap-2.5 p-3 rounded-lg border text-sm font-medium transition-all ${
+                    isSelected
+                      ? "border-accent bg-accent/10 text-white font-semibold"
+                      : "border-muted/20 hover:border-muted/40 text-muted hover:text-white cursor-pointer"
+                  }`}
+                >
+                  <span
+                    className={`w-2.5 h-2.5 rounded-full ${statusBgColor}`}
+                  />
+                  {status.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
       </div>
     </div>
   );

db/schema.ts

@@ -30,7 +30,7 @@ export const roleEnum = pgEnum("role", [
 export const userStatusEnum = pgEnum("user_status", [
   "ONLINE",
   "OFFLINE",
-  "IDLE",
+  "AFK",
   "DND",
 ]);
 

lib/constants/member.styles.ts

@@ -29,7 +29,7 @@ export const MEMBER_COLOR_OPTIONS = Object.keys(MEMBER_COLOR_CLASSES);
  */
 export const MEMBER_STATUS_COLOR_CLASSES: Record<UserStatus, string> = {
   ONLINE: "bg-emerald-500",
-  IDLE: "bg-amber-500",
-  DND: "bg-rose-500",
   OFFLINE: "bg-slate-500",
+  AFK: "bg-amber-500",
+  DND: "bg-rose-500",
 };