From f14efa18b3f75a42bad87b48f62dad5d63fa029d Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Sun, 8 Mar 2026 20:34:12 +0530
Subject: [PATCH] refactor: enhance ApiKeyContent and MobileSidebar components
 with improved styling and event handling for better user experience

---
 .../components/ApiKeyContent.tsx              | 109 ++++++++++++------
 .../layout/ui/sidebar/MobileSidebar.tsx       |  27 ++++-
 2 files changed, 96 insertions(+), 40 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx
index c45eca45c..a48b29bc7 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/user-settings/components/ApiKeyContent.tsx
@@ -1,16 +1,30 @@
 "use client";
 
-import { Check, Copy, Shield } from "lucide-react";
+import { Check, Copy, Info } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
+import { useCallback, useRef, useState } from "react";
 import { useTranslations } from "next-intl";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
 import { useApiKey } from "@/hooks/use-api-key";
+import { copyToClipboard as copyToClipboardUtil } from "@/lib/utils";
 
 export function ApiKeyContent() {
 	const t = useTranslations("userSettings");
 	const { apiKey, isLoading, copied, copyToClipboard } = useApiKey();
+	const [copiedUsage, setCopiedUsage] = useState(false);
+	const usageCopyTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null);
+
+	const copyUsageToClipboard = useCallback(async () => {
+		const text = `Authorization: Bearer ${apiKey || "YOUR_API_KEY"}`;
+		const success = await copyToClipboardUtil(text);
+		if (success) {
+			setCopiedUsage(true);
+			if (usageCopyTimeoutRef.current) clearTimeout(usageCopyTimeoutRef.current);
+			usageCopyTimeoutRef.current = setTimeout(() => setCopiedUsage(false), 2000);
+		}
+	}, [apiKey]);
 
 	return (
 		<AnimatePresence mode="wait">
@@ -22,49 +36,70 @@ export function ApiKeyContent() {
 				transition={{ duration: 0.35, ease: [0.4, 0, 0.2, 1] }}
 				className="space-y-6"
 			>
-				<Alert>
-					<Shield className="h-4 w-4" />
-					<AlertTitle>{t("api_key_warning_title")}</AlertTitle>
-					<AlertDescription>{t("api_key_warning_description")}</AlertDescription>
-				</Alert>
+		<Alert className="border-border/60 bg-muted/30 text-muted-foreground">
+			<Info className="h-4 w-4 text-muted-foreground" />
+			<AlertTitle className="text-muted-foreground">{t("api_key_warning_title")}</AlertTitle>
+			<AlertDescription className="text-muted-foreground/60">{t("api_key_warning_description")}</AlertDescription>
+		</Alert>
 
-				<div className="rounded-lg border bg-card p-6">
-					<h3 className="mb-4 font-medium">{t("your_api_key")}</h3>
-					{isLoading ? (
-						<div className="h-12 w-full animate-pulse rounded-md bg-muted" />
-					) : apiKey ? (
-						<div className="flex items-center gap-2">
-							<div className="flex-1 overflow-x-auto rounded-md bg-muted p-3 font-mono text-sm">
+			<div className="rounded-lg border border-border/60 bg-card p-6">
+				<h3 className="mb-4 text-sm font-semibold tracking-tight">{t("your_api_key")}</h3>
+				{isLoading ? (
+					<div className="h-12 w-full animate-pulse rounded-md border border-border/60 bg-muted/30" />
+				) : apiKey ? (
+					<div className="flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-2.5 py-1.5">
+						<div className="min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+							<p className="font-mono text-[10px] text-muted-foreground whitespace-nowrap select-all cursor-text">
 								{apiKey}
-							</div>
-							<TooltipProvider>
-								<Tooltip>
-									<TooltipTrigger asChild>
-										<Button
-											variant="outline"
-											size="icon"
-											onClick={copyToClipboard}
-											className="shrink-0"
-										>
-											{copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
-										</Button>
-									</TooltipTrigger>
-									<TooltipContent>{copied ? t("copied") : t("copy")}</TooltipContent>
-								</Tooltip>
-							</TooltipProvider>
+							</p>
 						</div>
-					) : (
-						<p className="text-center text-muted-foreground">{t("no_api_key")}</p>
-					)}
-				</div>
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger asChild>
+									<Button
+										variant="ghost"
+										size="icon"
+										onClick={copyToClipboard}
+										className="h-6 w-6 shrink-0 text-muted-foreground hover:text-foreground"
+									>
+										{copied ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent>{copied ? t("copied") : t("copy")}</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					</div>
+				) : (
+					<p className="text-center text-muted-foreground/60">{t("no_api_key")}</p>
+				)}
+			</div>
 
-				<div className="rounded-lg border bg-card p-6">
-					<h3 className="mb-2 font-medium">{t("usage_title")}</h3>
-					<p className="mb-4 text-sm text-muted-foreground">{t("usage_description")}</p>
-					<pre className="overflow-x-auto rounded-md bg-muted p-3 text-sm">
+			<div className="rounded-lg border border-border/60 bg-card p-6">
+				<h3 className="mb-2 text-sm font-semibold tracking-tight">{t("usage_title")}</h3>
+				<p className="mb-4 text-[11px] text-muted-foreground/60">{t("usage_description")}</p>
+			<div className="flex items-center gap-2 rounded-md border border-border/60 bg-muted/30 px-2.5 py-1.5">
+				<div className="min-w-0 flex-1 overflow-x-auto scrollbar-hide">
+					<pre className="font-mono text-[10px] text-muted-foreground whitespace-nowrap select-all cursor-text">
 						<code>Authorization: Bearer {apiKey || "YOUR_API_KEY"}</code>
 					</pre>
 				</div>
+				<TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={copyUsageToClipboard}
+								className="h-6 w-6 shrink-0 text-muted-foreground hover:text-foreground"
+							>
+								{copiedUsage ? <Check className="h-3 w-3 text-green-500" /> : <Copy className="h-3 w-3" />}
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>{copiedUsage ? t("copied") : t("copy")}</TooltipContent>
+					</Tooltip>
+				</TooltipProvider>
+			</div>
+			</div>
 			</motion.div>
 		</AnimatePresence>
 	);
diff --git a/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx
index f5909ef85..18dafd5d8 100644
--- a/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/MobileSidebar.tsx
@@ -166,9 +166,30 @@ export function MobileSidebar({
 								: undefined
 						}
 						user={user}
-						onSettings={onSettings}
-						onManageMembers={onManageMembers}
-						onUserSettings={onUserSettings}
+						onSettings={
+							onSettings
+								? () => {
+										onOpenChange(false);
+										onSettings();
+									}
+								: undefined
+						}
+						onManageMembers={
+							onManageMembers
+								? () => {
+										onOpenChange(false);
+										onManageMembers();
+									}
+								: undefined
+						}
+						onUserSettings={
+							onUserSettings
+								? () => {
+										onOpenChange(false);
+										onUserSettings();
+									}
+								: undefined
+						}
 						onLogout={onLogout}
 						pageUsage={pageUsage}
 						theme={theme}