fix: chats for new users

client/src/app/(main)/search/page.tsx

@@ -3,18 +3,18 @@ import { ScrollArea } from '@/components/ui/scroll-area'
 import type { Metadata } from 'next'
 
 interface PageProps {
-	searchParams: {
-		q: string
-	}
+	searchParams: Promise<{ q: string }>
 }
 
-export const generateMetadata = ({ searchParams: { q } }: PageProps): Metadata => {
+export const generateMetadata = async ({ searchParams }: PageProps): Promise<Metadata> => {
+	const { q } = await searchParams
 	return {
 		title: `Search results for "${q}"`
 	}
 }
 
-const Page = ({ searchParams: { q } }: PageProps) => {
+const Page = async ({ searchParams }: PageProps) => {
+	const { q } = await searchParams
 	return (
 		<main className="container mx-auto flex min-h-[calc(100vh-125px)] w-full grow gap-5 p-5">
 			<Menubar className="hidden h-fit flex-none space-y-3 rounded-md bg-card px-3 py-5 shadow-sm sm:block lg:px-5 xl:w-80" />

client/src/components/chats/Chat.tsx

@@ -1,16 +1,29 @@
 'use client'
 
 import { Chat as StreamChat } from 'stream-chat-react'
-import { useInitializeChatClient } from '@/hooks'
+import { useInitializeChatClient, useSession } from '@/hooks'
 import { useTheme } from 'next-themes'
 import { Loader2 } from 'lucide-react'
 import { Sidebar, Channel } from '.'
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 
 const Chat = () => {
 	const chatClient = useInitializeChatClient()
 	const [sidebarOpen, setSidebarOpen] = useState(false)
 	const { resolvedTheme } = useTheme()
+	const { user } = useSession()
+
+	useEffect(() => {
+		if (chatClient) {
+			const checkChannels = async () => {
+				const filter = { type: 'messaging', members: { $in: [user?.id] } }
+				const channels = await chatClient.queryChannels(filter, {}, { limit: 1 })
+				setSidebarOpen(channels.length === 0)
+			}
+			checkChannels()
+		}
+	}, [chatClient])
+
 	if (!chatClient) {
 		return <Loader2 className="animate-spin" />
 	}

client/src/components/chats/Sidebar.tsx

@@ -1,10 +1,10 @@
 'use client'
 
 import { ChannelList, ChannelPreviewMessenger, ChannelPreviewUIComponentProps } from 'stream-chat-react'
-import { useCallback, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { MailPlus, X } from 'lucide-react'
 import { Button } from '../ui/button'
-import { useSession } from '@/hooks'
+import { useInitializeChatClient, useSession } from '@/hooks'
 import { NewChatDialog } from '.'
 import { cn } from '@/lib/utils'
 
@@ -54,12 +54,26 @@ interface MenuHeaderProps {
 
 const MenuHeader = ({ onClose }: MenuHeaderProps) => {
 	const [showNewChatDialog, setShowNewChatDialog] = useState(false)
+	const chatClient = useInitializeChatClient()
+	const { user } = useSession()
+	const [channels, setChannels] = useState(0)
+
+	useEffect(() => {
+		if (chatClient) {
+			const checkChannels = async () => {
+				const filter = { type: 'messaging', members: { $in: [user?.id] } }
+				const channels = await chatClient.queryChannels(filter, {}, { limit: 1 })
+				setChannels(channels.length)
+			}
+			checkChannels()
+		}
+	}, [chatClient])
 
 	return (
 		<>
 			<div className="flex items-center gap-3 bg-card p-2">
 				<div className="h-full md:hidden">
-					<Button size="icon" variant="ghost" onClick={onClose}>
+					<Button size="icon" variant="ghost" onClick={onClose} disabled={!channels}>
 						<X className="size-5" />
 					</Button>
 				</div>

client/src/components/posts/Post.tsx

@@ -159,6 +159,7 @@ const MediaPreview = ({ media }: MediaPreviewProps) => {
 					src={media.url}
 					alt="Post attachment"
 					className="object-cover"
+					width="100%"
 					sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
 					onError={handleMediaError}
 				/>

client/src/components/users/Button.tsx

@@ -61,7 +61,7 @@ const UserButton = ({ className }: UserButtonProps) => {
 						<span>Theme</span>
 					</DropdownMenuSubTrigger>
 					<DropdownMenuPortal>
-						<DropdownMenuSubContent >
+						<DropdownMenuSubContent>
 							<DropdownMenuItem onClick={() => setTheme('light')} className="cursor-pointer">
 								<Sun className="mr-2 size-4" />
 								<span>Light</span>
@@ -84,7 +84,8 @@ const UserButton = ({ className }: UserButtonProps) => {
 				</DropdownMenuSub>
 				<DropdownMenuSeparator />
 				<DropdownMenuItem className="cursor-pointer hover:bg-destructive" onClick={handleLogOut}>
-					<LogOutIcon className="size-ring-1 mr-2" /> <span>Logout</span>
+					<LogOutIcon className="size-ring-1 mr-2" size={16} />
+					<span>Logout</span>
 				</DropdownMenuItem>
 			</DropdownMenuContent>
 		</DropdownMenu>