feat: integrate chat sharing functionality in header component

surfsense_web/components/layout/ui/header/Header.tsx

@@ -1,6 +1,11 @@
 "use client";
 
+import { useQuery } from "@tanstack/react-query";
+import { useParams, usePathname } from "next/navigation";
 import { NotificationButton } from "@/components/notifications/NotificationButton";
+import { ChatShareButton } from "@/components/new-chat/chat-share-button";
+import { getThreadFull } from "@/lib/chat/thread-persistence";
+import type { ChatVisibility } from "@/lib/chat/thread-persistence";
 
 interface HeaderProps {
 	breadcrumb?: React.ReactNode;
@@ -11,6 +16,29 @@ export function Header({
 	breadcrumb,
 	mobileMenuTrigger,
 }: HeaderProps) {
+	const params = useParams();
+	const pathname = usePathname();
+	
+	// Check if we're on a chat page
+	const isChatPage = pathname?.includes("/new-chat") ?? false;
+	
+	// Get chat_id from URL params
+	const chatId = params?.chat_id
+		? Number(Array.isArray(params.chat_id) ? params.chat_id[0] : params.chat_id)
+		: null;
+
+	// Fetch current thread if on chat page and chat_id exists
+	const { data: currentThread } = useQuery({
+		queryKey: ["thread", chatId],
+		queryFn: () => getThreadFull(chatId!),
+		enabled: isChatPage && chatId !== null && chatId > 0,
+	});
+
+	const handleVisibilityChange = (visibility: ChatVisibility) => {
+		// Visibility change is handled by ChatShareButton internally
+		// This callback can be used for additional side effects if needed
+	};
+
 	return (
 		<header className="sticky top-0 z-10 flex h-14 shrink-0 items-center gap-2 border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 px-4">
 			{/* Left side - Mobile menu trigger + Breadcrumb */}
@@ -23,6 +51,13 @@ export function Header({
 			<div className="flex items-center gap-2">
 				{/* Notifications */}
 				<NotificationButton />
+				{/* Share button - only show on chat pages when thread exists */}
+				{isChatPage && currentThread && (
+					<ChatShareButton
+						thread={currentThread}
+						onVisibilityChange={handleVisibilityChange}
+					/>
+				)}
 			</div>
 		</header>
 	);