feat(ui): add reusable ActionButton component and integrate into modals

components/modals/CreateChannelModal.tsx

@@ -5,10 +5,11 @@
 
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import { X, Loader2 } from "lucide-react";
 import { useActiveServer } from "@/lib/context/ServerContext";
+import { ActionButton } from "../ui/ActionButton";
 
 /**
  * Properties for the CreateChannelModal component.
@@ -47,6 +48,9 @@ export function CreateChannelModal({
 
   if (!isOpen) return null;
 
+  const isValid = name.trim().length != 0;
+  const canSave = isValid && !isLoading;
+
   /**
    * Handles form submission to create a new channel via the API.
    *
@@ -137,22 +141,23 @@ export function CreateChannelModal({
           {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
 
           <div className="flex items-center justify-end gap-3 pt-4">
-            <button
+            <ActionButton
               type="button"
+              variant="secondary"
               onClick={onClose}
               disabled={isLoading}
-              className="px-4 py-2 text-sm font-medium text-muted hover:text-white transition-colors cursor-pointer"
             >
               Cancel
-            </button>
+            </ActionButton>
-            <button
+
+            <ActionButton
               type="submit"
-              disabled={isLoading || !name.trim()}
+              variant="primary"
-              className="px-5 py-2 bg-accent text-white font-medium text-sm rounded-xl hover:bg-accent/90 transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
+              isLoading={isLoading}
+              disabled={!canSave}
             >
-              {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
+              Save
-              Create
+            </ActionButton>
-            </button>
           </div>
         </form>
       </div>

components/modals/CreateServerModal.tsx

@@ -11,6 +11,7 @@ import {
   SERVER_COLOR_CLASSES,
   SERVER_COLOR_OPTIONS,
 } from "@/lib/constants/server.styles";
+import { ActionButton } from "../ui/ActionButton";
 
 /**
  * Properties for the CreateServerModal component.
@@ -38,6 +39,9 @@ export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
 
   if (!isOpen) return null;
 
+  const isValid = name.trim().length != 0;
+  const canSave = isValid && !isLoading;
+
   /**
    * Handles server creation form submission via API POST request.
    *
@@ -144,22 +148,23 @@ export function CreateServerModal({ isOpen, onClose }: CreateServerModalProps) {
           {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
 
           <div className="flex items-center justify-end gap-3 pt-4">
-            <button
+            <ActionButton
               type="button"
+              variant="secondary"
               onClick={onClose}
               disabled={isLoading}
-              className="px-4 py-2 text-sm font-medium text-muted hover:text-white transition-colors cursor-pointer"
             >
               Cancel
-            </button>
+            </ActionButton>
-            <button
+
+            <ActionButton
               type="submit"
-              disabled={isLoading || !name.trim()}
+              variant="primary"
-              className="px-5 py-2 bg-accent text-white font-medium text-sm rounded-xl hover:bg-accent/90 transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
+              isLoading={isLoading}
+              disabled={!canSave}
             >
-              {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
+              Save
-              Create
+            </ActionButton>
-            </button>
           </div>
         </form>
       </div>

components/modals/EditChannelModal.tsx

@@ -10,6 +10,7 @@ import { useRouter } from "next/navigation";
 import { X, Loader2, Trash2 } from "lucide-react";
 import { useActiveServer } from "@/lib/context/ServerContext";
 import type { Channel } from "@/db/schema";
+import { ActionButton } from "../ui/ActionButton";
 
 /**
  * Properties for the EditChannelModal component.
@@ -189,37 +190,35 @@ export function EditChannelModal({
           {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
 
           <div className="flex items-center justify-between pt-4">
-            <button
+            <ActionButton
               type="button"
+              variant="danger"
               onClick={handleDelete}
-              disabled={isLoading || isDeleting}
+              isLoading={isDeleting}
-              className="flex items-center gap-1.5 text-xs font-semibold text-red-400 hover:text-red-300 transition-colors cursor-pointer disabled:opacity-50"
+              disabled={isLoading}
+              icon={Trash2}
             >
-              {isDeleting ? (
+              Delete Server
-                <Loader2 className="w-4 h-4 animate-spin" />
+            </ActionButton>
-              ) : (
-                <Trash2 className="w-4 h-4" />
-              )}
-              Delete Channel
-            </button>
 
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
-              <button
+              <ActionButton
                 type="button"
+                variant="secondary"
                 onClick={onClose}
                 disabled={isLoading || isDeleting}
-                className="px-4 py-2 text-sm font-medium text-muted hover:text-white transition-colors cursor-pointer"
               >
                 Cancel
-              </button>
+              </ActionButton>
-              <button
+
+              <ActionButton
                 type="submit"
-                disabled={!canSave}
+                variant="primary"
-                className="px-5 py-2 bg-accent text-white font-medium text-sm rounded-xl hover:bg-accent/90 transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
+                isLoading={isLoading}
+                disabled={!canSave || isDeleting}
               >
-                {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
                 Save
-              </button>
+              </ActionButton>
             </div>
           </div>
         </form>

components/modals/EditServerModal.tsx

@@ -8,6 +8,7 @@
 import { useState, useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { X, Loader2, Trash2 } from "lucide-react";
+import { ActionButton } from "../ui/ActionButton";
 
 /**
  * Properties for the EditServerModal component.
@@ -168,37 +169,35 @@ export function EditServerModal({
           {error && <p className="text-xs text-red-400 mt-2">{error}</p>}
 
           <div className="flex items-center justify-between pt-4">
-            <button
+            <ActionButton
               type="button"
+              variant="danger"
               onClick={handleDelete}
-              disabled={isLoading || isDeleting}
+              isLoading={isDeleting}
-              className="flex items-center gap-1.5 text-xs font-semibold text-red-400 hover:text-red-300 transition-colors cursor-pointer disabled:opacity-50"
+              disabled={isLoading}
+              icon={Trash2}
             >
-              {isDeleting ? (
-                <Loader2 className="w-4 h-4 animate-spin" />
-              ) : (
-                <Trash2 className="w-4 h-4" />
-              )}
               Delete Server
-            </button>
+            </ActionButton>
 
-            <div className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
-              <button
+              <ActionButton
                 type="button"
+                variant="secondary"
                 onClick={onClose}
                 disabled={isLoading || isDeleting}
-                className="px-4 py-2 text-sm font-medium text-muted hover:text-white transition-colors cursor-pointer"
               >
                 Cancel
-              </button>
+              </ActionButton>
-              <button
+
+              <ActionButton
                 type="submit"
-                disabled={!canSave}
+                variant="primary"
-                className="px-5 py-2 bg-accent text-white font-medium text-sm rounded-xl hover:bg-accent/90 transition-all disabled:opacity-50 flex items-center gap-2 cursor-pointer"
+                isLoading={isLoading}
+                disabled={!canSave || isDeleting}
               >
-                {isLoading && <Loader2 className="w-4 h-4 animate-spin" />}
                 Save
-              </button>
+              </ActionButton>
             </div>
           </div>
         </form>

components/ui/ActionButton.tsx

@@ -0,0 +1,107 @@
+/**
+ * @file components/ui/ActionButton.tsx
+ * @description Flexible and reusable action button component supporting various variants, sizes, icons, and loading states.
+ */
+
+import { ButtonHTMLAttributes, ComponentType, ReactNode } from "react";
+import { Loader2, LucideProps } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+/**
+ * Available color and size type definitions for the ActionButton component.
+ *
+ * @type {ButtonVariant} ButtonStyle variants ("primary" | "secondary" | "danger").
+ * @type {ButtonSize} Sizing options ("sm" | "md" | "lg").
+ */
+type ButtonVariant = "primary" | "secondary" | "danger";
+type ButtonSize = "sm" | "md" | "lg";
+
+/**
+ * Properties for the ActionButton component.
+ *
+ * @interface ActionButtonProps
+ * @extends {ButtonHTMLAttributes<HTMLButtonElement>}
+ * @property {ButtonVariant} [variant="primary"] - The visual style variant of the button.
+ * @property {ButtonSize} [size="md"] - The size dimension of the button.
+ * @property {boolean} [isLoading=false] - Whether the button is in a loading state, displaying a spinner and disabling interactions.
+ * @property {ComponentType<LucideProps>} [icon] - Optional Lucide icon component to render alongside text or independently.
+ * @property {ReactNode} [children] - The content/text displayed inside the button.
+ */
+interface ActionButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  isLoading?: boolean;
+  icon?: ComponentType<LucideProps>;
+  children?: ReactNode;
+}
+
+const baseStyles =
+  "font-medium transition-all duration-200 flex items-center justify-center cursor-pointer select-none shrink-0 " +
+  "hover:-translate-y-0.5 active:translate-y-0 active:scale-[0.97] " +
+  "disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none disabled:transform-none " +
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+
+const variantStyles: Record<ButtonVariant, string> = {
+  primary:
+    "bg-accent hover:bg-accent/90 text-white shadow-md shadow-accent/20 border border-accent/20 hover:shadow-lg hover:shadow-accent/25",
+  secondary:
+    "bg-surface-hover hover:bg-surface/90 text-slate-200 hover:text-white border border-white/10 hover:border-white/25 shadow-sm hover:shadow-md",
+  danger:
+    "bg-rose-500/10 hover:bg-rose-500/20 text-rose-400 hover:text-rose-300 border border-rose-500/20 hover:border-rose-500/30 shadow-sm hover:shadow-rose-500/10",
+};
+
+const sizeStyles: Record<ButtonSize, string> = {
+  sm: "px-3 py-1.5 text-xs rounded-lg gap-1.5",
+  md: "px-4 py-2 text-sm rounded-xl gap-2",
+  lg: "px-5 py-2.5 text-base rounded-xl gap-2.5",
+};
+
+const iconSizes: Record<ButtonSize, string> = {
+  sm: "w-3.5 h-3.5",
+  md: "w-4 h-4",
+  lg: "w-5 h-5",
+};
+
+/**
+ * Renders a customizable action button with support for loading indicators, icons, and multiple size/variant styles.
+ *
+ * @param {ActionButtonProps} props - The component props.
+ * @param {ButtonVariant} [props.variant="primary"] - The visual style variant of the button.
+ * @param {ButtonSize} [props.size="md"] - The size dimension of the button.
+ * @param {boolean} [props.isLoading=false] - Whether the button is in a loading state.
+ * @param {ComponentType<LucideProps>} [props.icon] - Optional icon component to render.
+ * @param {ReactNode} [props.children] - The button content.
+ * @param {boolean} [props.disabled] - Whether the button is disabled.
+ * @param {string} [props.className] - Additional custom CSS classes.
+ * @returns {JSX.Element} The rendered action button component.
+ */
+export function ActionButton({
+  variant = "primary",
+  size = "md",
+  isLoading = false,
+  icon: Icon,
+  children,
+  disabled,
+  className,
+  ...props
+}: ActionButtonProps) {
+  return (
+    <button
+      {...props}
+      disabled={disabled || isLoading}
+      className={cn(
+        baseStyles,
+        variantStyles[variant],
+        sizeStyles[size],
+        className,
+      )}
+    >
+      {isLoading ? (
+        <Loader2 className={cn(iconSizes[size], "animate-spin shrink-0")} />
+      ) : (
+        Icon && <Icon className={cn(iconSizes[size], "shrink-0")} />
+      )}
+      {children && <span>{children}</span>}
+    </button>
+  );
+}