From 2a020629c5cd26431c2c81ab2d6d04a75b3b8432 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Mon, 6 Jul 2026 14:05:53 +0530
Subject: [PATCH] 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.
---
 .../layout/providers/LayoutDataProvider.tsx   |  5 ++-
 .../layout/ui/sidebar/AllChatsSidebar.tsx     |  2 +-
 .../ui/artifacts-library.tsx                  | 31 ++++++-------------
 3 files changed, 15 insertions(+), 23 deletions(-)

diff --git a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx b/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
index 4f52f9899..d517213cc 100644
--- a/surfsense_web/components/layout/providers/LayoutDataProvider.tsx
+++ b/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
 				}
diff --git a/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx b/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
index e8f2e6254..52b2dd765 100644
--- a/surfsense_web/components/layout/ui/sidebar/AllChatsSidebar.tsx
+++ b/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>
diff --git a/surfsense_web/features/artifacts-library/ui/artifacts-library.tsx b/surfsense_web/features/artifacts-library/ui/artifacts-library.tsx
index 2e264c8f5..3c2d3f368 100644
--- a/surfsense_web/features/artifacts-library/ui/artifacts-library.tsx
+++ b/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">
-			<span className="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
-				<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 className="flex items-center justify-center py-20 text-center">
+			<p className="font-medium text-foreground">No artifacts yet</p>
 		</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">
-			<header className="mb-6 flex items-center justify-between gap-4">
-				<div>
-					<h1 className="text-xl font-semibold text-foreground">Artifacts</h1>
-					<p className="mt-1 text-sm text-muted-foreground">
-						Every deliverable created across this search space.
-					</p>
+		<div className="w-full space-y-6">
+			<header className="flex items-center justify-between gap-4 flex-wrap">
+				<div className="flex items-baseline gap-3">
+					<h1 className="text-xl md:text-2xl font-semibold text-foreground">Artifacts</h1>
+					{!loading && artifacts.length > 0 ? (
+						<span className="text-sm text-muted-foreground">{artifacts.length} total</span>
+					) : null}
 				</div>
-				{!loading && artifacts.length > 0 ? (
-					<span className="shrink-0 text-sm text-muted-foreground">{artifacts.length} total</span>
-				) : null}
 			</header>
 
 			{loading ? (