refactor: implement tab navigation in BuyMorePage and enhance button styles in BuyPagesContent and BuyTokensContent

surfsense_web/app/dashboard/[search_space_id]/buy-more/page.tsx

@@ -4,8 +4,7 @@ import { motion } from "motion/react";
 import { useState } from "react";
 import { BuyPagesContent } from "@/components/settings/buy-pages-content";
 import { BuyTokensContent } from "@/components/settings/buy-tokens-content";
-import { Button } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 const TABS = [
 	{ id: "pages", label: "Pages" },
@@ -22,29 +21,34 @@ export default function BuyMorePage() {
 			initial={{ opacity: 0, y: 20 }}
 			animate={{ opacity: 1, y: 0 }}
 			transition={{ duration: 0.3 }}
-			className="w-full select-none space-y-6"
+			className="w-full select-none"
 		>
-			<div className="flex items-center justify-center rounded-lg border bg-muted/30 p-1">
-				{TABS.map((tab) => (
-					<Button
-						key={tab.id}
-						type="button"
-						variant="ghost"
-						size="sm"
-						onClick={() => setActiveTab(tab.id)}
-						className={cn(
-							"h-auto flex-1 px-3 py-1.5 text-sm",
-							activeTab === tab.id
-								? "bg-background text-foreground shadow-sm"
-								: "text-muted-foreground hover:text-accent-foreground"
-						)}
-					>
-						{tab.label}
-					</Button>
-				))}
-			</div>
+			<Tabs
+				value={activeTab}
+				onValueChange={(value) => {
+					setActiveTab(value as TabId);
+				}}
+				className="relative min-h-[37rem] w-full"
+			>
+				<TabsList className="absolute top-20 left-1/2 -translate-x-1/2 rounded-xl bg-accent p-1">
+					{TABS.map((tab) => (
+						<TabsTrigger
+							key={tab.id}
+							value={tab.id}
+							className="h-8 rounded-lg px-4 text-sm font-semibold text-accent-foreground transition-colors hover:bg-transparent hover:text-white data-[state=active]:bg-[#4a4a4a] data-[state=active]:text-white data-[state=active]:shadow-none"
+						>
+							{tab.label}
+						</TabsTrigger>
+					))}
+				</TabsList>
 
-			{activeTab === "pages" ? <BuyPagesContent /> : <BuyTokensContent />}
+				<TabsContent value="pages" className="mt-0 flex min-h-[37rem] items-center pt-14">
+					<BuyPagesContent />
+				</TabsContent>
+				<TabsContent value="tokens" className="mt-0 flex min-h-[37rem] items-center pt-14">
+					<BuyTokensContent />
+				</TabsContent>
+			</Tabs>
 		</motion.div>
 	);
 }

surfsense_web/app/dashboard/[search_space_id]/more-pages/page.tsx

@@ -1,17 +1,11 @@
 "use client";
 
-import { motion } from "motion/react";
 import { MorePagesContent } from "@/components/settings/more-pages-content";
 
 export default function MorePagesPage() {
 	return (
-		<motion.div
-			initial={{ opacity: 0, y: 20 }}
-			animate={{ opacity: 1, y: 0 }}
-			transition={{ duration: 0.3 }}
-			className="w-full select-none space-y-6"
-		>
+		<div className="w-full select-none space-y-6">
 			<MorePagesContent />
-		</motion.div>
+		</div>
 	);
 }

surfsense_web/components/assistant-ui/thread.tsx

@@ -23,6 +23,7 @@ import {
 	Wrench,
 	X,
 } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
 import Image from "next/image";
 import { useParams } from "next/navigation";
 import { type FC, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -271,59 +272,76 @@ const ConnectToolsBanner: FC<{
 		if (typeof window === "undefined") return false;
 		return localStorage.getItem(BANNER_DISMISSED_KEY) === "true";
 	});
+	const [dismissRequested, setDismissRequested] = useState(false);
 
 	const hasConnectors = (connectors?.length ?? 0) > 0;
 	const isVisible = !dismissed && !hasConnectors && isThreadEmpty;
+	const shouldShowTray = isVisible && !dismissRequested;
 
 	useEffect(() => {
 		onVisibleChange?.(isVisible);
 	}, [isVisible, onVisibleChange]);
 
-	if (!isVisible) return null;
-
 	const handleDismiss = (e: React.MouseEvent) => {
 		e.stopPropagation();
-		setDismissed(true);
-		localStorage.setItem(BANNER_DISMISSED_KEY, "true");
+		setDismissRequested(true);
 	};
 
 	return (
-		<div className="relative z-0 -mt-5 flex min-w-0 items-center gap-2 rounded-b-3xl border border-input bg-muted/40 px-4 pt-7 pb-3 shadow-sm shadow-black/5 dark:shadow-black/10">
-			<Button
-				type="button"
-				variant="ghost"
-				size="sm"
-				className="h-7 min-w-0 cursor-pointer justify-start gap-2 rounded-md px-0 text-[13px] font-normal text-muted-foreground select-none hover:bg-transparent hover:text-foreground"
-				onClick={() => setConnectorDialogOpen(true)}
-			>
-				<Unplug className="size-4 shrink-0" />
-				<span className="truncate">Connect your tools</span>
-			</Button>
-			<div className="min-w-0 flex-1" />
-			<AvatarGroup className="shrink-0">
-				{BANNER_CONNECTORS.map(({ type }, i) => (
-					<Avatar
-						key={type}
-						className="size-5"
-						style={{ zIndex: BANNER_CONNECTORS.length - i }}
+		<AnimatePresence
+			initial={false}
+			onExitComplete={() => {
+				if (!dismissRequested) return;
+				setDismissed(true);
+				localStorage.setItem(BANNER_DISMISSED_KEY, "true");
+			}}
+		>
+			{shouldShowTray ? (
+				<motion.div
+					key="connect-tools-tray"
+					initial={{ opacity: 0, y: -10 }}
+					animate={{ opacity: 1, y: 0 }}
+					exit={{ opacity: 0, y: -14 }}
+					transition={{ duration: 0.18, ease: "easeOut" }}
+					className="relative z-0 -mt-5 flex min-w-0 items-center gap-2 rounded-b-3xl border border-input bg-muted/40 px-4 pt-7 pb-3 shadow-sm shadow-black/5 dark:shadow-black/10"
+				>
+					<Button
+						type="button"
+						variant="ghost"
+						size="sm"
+						className="h-7 min-w-0 cursor-pointer justify-start gap-2 rounded-md px-0 text-[13px] font-normal text-muted-foreground select-none hover:bg-transparent hover:text-foreground"
+						onClick={() => setConnectorDialogOpen(true)}
 					>
-						<AvatarFallback className="bg-accent text-[10px]">
-							{getConnectorIcon(type, "size-3")}
-						</AvatarFallback>
-					</Avatar>
-				))}
-			</AvatarGroup>
-			<Button
-				type="button"
-				onClick={handleDismiss}
-				variant="ghost"
-				size="icon"
-				className="size-7 shrink-0 cursor-pointer rounded-md text-muted-foreground hover:bg-transparent hover:text-foreground"
-				aria-label="Dismiss"
-			>
-				<X className="size-3.5" />
-			</Button>
-		</div>
+						<Unplug className="size-4 shrink-0" />
+						<span className="truncate">Connect your tools</span>
+					</Button>
+					<div className="min-w-0 flex-1" />
+					<AvatarGroup className="shrink-0">
+						{BANNER_CONNECTORS.map(({ type }, i) => (
+							<Avatar
+								key={type}
+								className="size-5"
+								style={{ zIndex: BANNER_CONNECTORS.length - i }}
+							>
+								<AvatarFallback className="bg-accent text-[10px]">
+									{getConnectorIcon(type, "size-3")}
+								</AvatarFallback>
+							</Avatar>
+						))}
+					</AvatarGroup>
+					<Button
+						type="button"
+						onClick={handleDismiss}
+						variant="ghost"
+						size="icon"
+						className="size-7 shrink-0 cursor-pointer rounded-md text-muted-foreground hover:bg-transparent hover:text-foreground"
+						aria-label="Dismiss"
+					>
+						<X className="size-3.5" />
+					</Button>
+				</motion.div>
+			) : null}
+		</AnimatePresence>
 	);
 };
 

surfsense_web/components/settings/buy-pages-content.tsx

@@ -74,11 +74,11 @@ export function BuyPagesContent() {
 				<div className="flex items-center justify-center gap-3">
 					<Button
 						type="button"
-						variant="outline"
+						variant="ghost"
 						size="icon"
 						onClick={() => setQuantity((q) => Math.max(1, q - 1))}
 						disabled={quantity <= 1 || purchaseMutation.isPending}
-						className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
+						className="size-8 text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-white disabled:opacity-40"
 					>
 						<Minus className="h-3.5 w-3.5" />
 					</Button>
@@ -87,11 +87,11 @@ export function BuyPagesContent() {
 					</span>
 					<Button
 						type="button"
-						variant="outline"
+						variant="ghost"
 						size="icon"
 						onClick={() => setQuantity((q) => Math.min(100, q + 1))}
 						disabled={quantity >= 100 || purchaseMutation.isPending}
-						className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
+						className="size-8 text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-white disabled:opacity-40"
 					>
 						<Plus className="h-3.5 w-3.5" />
 					</Button>
@@ -107,10 +107,10 @@ export function BuyPagesContent() {
 							onClick={() => setQuantity(m)}
 							disabled={purchaseMutation.isPending}
 							className={cn(
-								"h-auto rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors hover:text-foreground disabled:opacity-60",
+								"h-auto rounded-md px-2.5 py-1 text-xs font-medium tabular-nums transition-colors disabled:opacity-60",
 								quantity === m
-									? "border-emerald-500 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400"
-									: "border-border hover:border-emerald-500/40 hover:bg-muted/40"
+									? "bg-accent text-accent-foreground"
+									: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
 							)}
 						>
 							{(m * PAGE_PACK_SIZE).toLocaleString()}
@@ -126,7 +126,7 @@ export function BuyPagesContent() {
 				</div>
 
 				<Button
-					className="w-full bg-emerald-600 text-white hover:bg-emerald-700"
+					className="w-full"
 					disabled={purchaseMutation.isPending || !hasValidSearchSpace}
 					onClick={handleBuyNow}
 				>

surfsense_web/components/settings/buy-tokens-content.tsx

@@ -96,7 +96,7 @@ export function BuyTokensContent() {
 						</span>
 						<span className="font-medium">{usagePercentage.toFixed(0)}%</span>
 					</div>
-					<Progress value={usagePercentage} className="h-1.5" />
+					<Progress value={usagePercentage} className="h-1.5 [&>div]:bg-purple-500" />
 					<p className="text-[11px] text-muted-foreground">
 						{formatUsd(remaining)} of credit remaining
 					</p>
@@ -107,11 +107,11 @@ export function BuyTokensContent() {
 				<div className="flex items-center justify-center gap-3">
 					<Button
 						type="button"
-						variant="outline"
+						variant="ghost"
 						size="icon"
 						onClick={() => setQuantity((q) => Math.max(1, q - 1))}
 						disabled={quantity <= 1 || purchaseMutation.isPending}
-						className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
+						className="size-8 text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-white disabled:opacity-40"
 					>
 						<Minus className="h-3.5 w-3.5" />
 					</Button>
@@ -120,11 +120,11 @@ export function BuyTokensContent() {
 					</span>
 					<Button
 						type="button"
-						variant="outline"
+						variant="ghost"
 						size="icon"
 						onClick={() => setQuantity((q) => Math.min(100, q + 1))}
 						disabled={quantity >= 100 || purchaseMutation.isPending}
-						className="size-8 shadow-none transition-colors hover:bg-muted disabled:opacity-40"
+						className="size-8 text-muted-foreground shadow-none transition-colors hover:bg-muted hover:text-white disabled:opacity-40"
 					>
 						<Plus className="h-3.5 w-3.5" />
 					</Button>
@@ -139,10 +139,10 @@ export function BuyTokensContent() {
 							onClick={() => setQuantity(m)}
 							disabled={purchaseMutation.isPending}
 							className={cn(
-								"h-auto rounded-md border px-2.5 py-1 text-xs font-medium tabular-nums transition-colors hover:text-foreground disabled:opacity-60",
+								"h-auto rounded-md px-2.5 py-1 text-xs font-medium tabular-nums transition-colors disabled:opacity-60",
 								quantity === m
-									? "border-purple-500 bg-purple-500/10 text-purple-600 dark:text-purple-400"
-									: "border-border hover:border-purple-500/40 hover:bg-muted/40"
+									? "bg-accent text-accent-foreground"
+									: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
 							)}
 						>
 							${m}
@@ -158,7 +158,7 @@ export function BuyTokensContent() {
 				</div>
 
 				<Button
-					className="w-full bg-purple-600 text-white hover:bg-purple-700"
+					className="w-full"
 					disabled={purchaseMutation.isPending}
 					onClick={() => purchaseMutation.mutate({ quantity, search_space_id: searchSpaceId })}
 				>

surfsense_web/components/settings/more-pages-content.tsx

@@ -76,15 +76,17 @@ export function MorePagesContent() {
 			<div className="space-y-2">
 				<h3 className="text-sm font-semibold">Earn Bonus Pages</h3>
 				{isLoading ? (
-					<Card>
-						<CardContent className="flex items-center gap-3 p-3">
-							<Skeleton className="h-8 w-8 rounded-full" />
-							<div className="flex-1 space-y-2">
-								<Skeleton className="h-4 w-3/4" />
-							</div>
-							<Skeleton className="h-8 w-16" />
-						</CardContent>
-					</Card>
+					<div className="space-y-1.5">
+						{["github", "reddit", "discord"].map((task) => (
+							<Card key={task} className="bg-transparent">
+								<CardContent className="flex items-center gap-3 p-3">
+									<Skeleton className="h-8 w-8 rounded-full bg-muted" />
+									<Skeleton className="h-4 flex-1 bg-muted" />
+									<Skeleton className="h-8 w-16 bg-muted" />
+								</CardContent>
+							</Card>
+						))}
+					</div>
 				) : (
 					<div className="space-y-1.5">
 						{data?.tasks.map((task) => (