feat(artifacts): enhance ArtifactsLibrary UI and add artifacts page detection

- Introduced a new state for detecting the artifacts page in LayoutDataProvider.
- Simplified the EmptyState component in ArtifactsLibrary for a cleaner presentation.
- Improved header layout in ArtifactsLibrary for better responsiveness and visual clarity.

surfsense_web/components/layout/providers/LayoutDataProvider.tsx

@@ -698,6 +698,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 	const isSearchSpaceSettingsPage = pathname?.includes("/workspace-settings") === true;
 	const isTeamPage = pathname?.endsWith("/team") === true;
 	const isAutomationsPage = pathname?.includes("/automations") === true;
+	const isArtifactsPage = pathname?.endsWith("/artifacts") === true;
 	const isAllChatsPage = pathname?.endsWith("/chats") === true;
 	const handleViewAllChats = useCallback(() => {
 		setActiveSlideoutPanel(null);
@@ -713,6 +714,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 		isSearchSpaceSettingsPage ||
 		isTeamPage ||
 		isAutomationsPage ||
+		isArtifactsPage ||
 		isAllChatsPage;
 
 	return (
@@ -757,6 +759,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 					isSearchSpaceSettingsPage ||
 					isTeamPage ||
 					isAutomationsPage ||
+					isArtifactsPage ||
 					isAllChatsPage
 						? "items-start justify-center px-6 py-8 md:px-10 md:pb-10 md:pt-16"
 						: undefined
@@ -766,7 +769,7 @@ export function LayoutDataProvider({ searchSpaceId, children }: LayoutDataProvid
 						? "max-w-none select-none"
 						: isAllChatsPage
 							? "max-w-5xl"
-							: isUserSettingsPage || isSearchSpaceSettingsPage || isTeamPage
+							: isUserSettingsPage || isSearchSpaceSettingsPage || isTeamPage || isArtifactsPage
 								? "max-w-5xl"
 								: undefined
 				}

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

@@ -249,7 +249,7 @@ function AllChatsContent({ searchSpaceId, className }: AllChatsContentProps) {
 									variant="secondary"
 									className="h-7 gap-1.5 rounded-md px-2.5 text-xs font-medium"
 								>
-									<span className="text-muted-foreground">Filter by</span>
+									<span className="font-semibold text-muted-foreground">Filter by</span>
 									<span>{selectedFilterLabel}</span>
 									<ChevronDown className="h-3 w-3 text-muted-foreground" />
 								</Button>

surfsense_web/features/artifacts-library/ui/artifacts-library.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useSetAtom } from "jotai";
-import { Boxes, RefreshCw, TriangleAlert } from "lucide-react";
+import { RefreshCw, TriangleAlert } from "lucide-react";
 import { useMemo, useState } from "react";
 import { openReportPanelAtom } from "@/atoms/chat/report-panel.atom";
 import { MobileReportPanel } from "@/components/report-panel/report-panel";
@@ -46,16 +46,8 @@ function ErrorState({ onRetry }: { onRetry: () => void }) {
 
 function EmptyState() {
 	return (
-		<div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed py-20 text-center">
+		<div className="flex items-center justify-center py-20 text-center">
-			<span className="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
+			<p className="font-medium text-foreground">No artifacts yet</p>
-				<Boxes className="size-6" />
-			</span>
-			<div>
-				<p className="font-medium text-foreground">No artifacts yet</p>
-				<p className="mt-1 text-sm text-muted-foreground">
-					Reports, resumes, podcasts, presentations, and images you generate appear here.
-				</p>
-			</div>
 		</div>
 	);
 }
@@ -90,17 +82,14 @@ export function ArtifactsLibrary({ workspaceId }: { workspaceId: number }) {
 	};
 
 	return (
-		<div className="mx-auto w-full max-w-5xl px-6 py-8">
+		<div className="w-full space-y-6">
-			<header className="mb-6 flex items-center justify-between gap-4">
+			<header className="flex items-center justify-between gap-4 flex-wrap">
-				<div>
+				<div className="flex items-baseline gap-3">
-					<h1 className="text-xl font-semibold text-foreground">Artifacts</h1>
+					<h1 className="text-xl md:text-2xl font-semibold text-foreground">Artifacts</h1>
-					<p className="mt-1 text-sm text-muted-foreground">
+					{!loading && artifacts.length > 0 ? (
-						Every deliverable created across this search space.
+						<span className="text-sm text-muted-foreground">{artifacts.length} total</span>
-					</p>
+					) : null}
 				</div>
-				{!loading && artifacts.length > 0 ? (
-					<span className="shrink-0 text-sm text-muted-foreground">{artifacts.length} total</span>
-				) : null}
 			</header>
 
 			{loading ? (