feat: move More Pages to dialog

- Introduced `MorePagesDialog` and `MorePagesContent` components to manage and display tasks for earning additional pages.
- Integrated dialog state management using `morePagesDialogAtom`.
- Updated `LayoutDataProvider` to include the new dialog and handle task completion logic.
- Enhanced `PageUsageDisplay` to trigger the More Pages dialog, improving user interaction for page management.

surfsense_web/components/layout/ui/sidebar/PageUsageDisplay.tsx

@@ -1,8 +1,8 @@
 "use client";
 
+import { useSetAtom } from "jotai";
 import { Zap } from "lucide-react";
-import Link from "next/link";
-import { useParams } from "next/navigation";
+import { morePagesDialogAtom } from "@/atoms/settings/settings-dialog.atoms";
 import { Badge } from "@/components/ui/badge";
 import { Progress } from "@/components/ui/progress";
 
@@ -12,8 +12,7 @@ interface PageUsageDisplayProps {
 }
 
 export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProps) {
-	const params = useParams();
-	const searchSpaceId = params.search_space_id;
+	const setMorePagesOpen = useSetAtom(morePagesDialogAtom);
 	const usagePercentage = (pagesUsed / pagesLimit) * 100;
 
 	return (
@@ -26,9 +25,10 @@ export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProp
 					<span className="font-medium">{usagePercentage.toFixed(0)}%</span>
 				</div>
 				<Progress value={usagePercentage} className="h-1.5" />
-				<Link
-					href={`/dashboard/${searchSpaceId}/more-pages`}
-					className="group flex items-center justify-between rounded-md px-1.5 py-1 -mx-1.5 transition-colors hover:bg-accent"
+				<button
+					type="button"
+					onClick={() => setMorePagesOpen(true)}
+					className="group flex w-full items-center justify-between rounded-md px-1.5 py-1 -mx-1.5 transition-colors hover:bg-accent"
 				>
 					<span className="flex items-center gap-1.5 text-xs text-muted-foreground group-hover:text-accent-foreground">
 						<Zap className="h-3 w-3 shrink-0" />
@@ -37,7 +37,7 @@ export function PageUsageDisplay({ pagesUsed, pagesLimit }: PageUsageDisplayProp
 					<Badge className="h-4 rounded px-1 text-[10px] font-semibold leading-none bg-emerald-600 text-white border-transparent hover:bg-emerald-600">
 						FREE
 					</Badge>
-				</Link>
+				</button>
 			</div>
 		</div>
 	);