hotfix notification view

src/components/HandleSearch.tsx

@@ -1,29 +1,23 @@
 "use client";
 
 import { useSearchProfiles } from "@lens-protocol/react-web";
-import { ChevronLeft } from "lucide-react";
-import Link from "next/link";
-import { Button } from "~/components/ui/button";
+import { LoadingSpinner } from "./LoadingIcon";
 import { lensProfileToUser } from "./user/User";
 
-export function HandleSearch({ query }: { query: string }) {
+export function HandleSearch({ query, maxResults = 10 }: { query: string; maxResults?: number }) {
   const { data: profiles, loading, error } = useSearchProfiles({ query });
 
+  if (!query) return null;
   if (error && query) throw new Error(error.message);
 
-  const users = profiles?.map(lensProfileToUser);
+  const users = profiles?.slice(0, maxResults).map(lensProfileToUser);
   const list = users.map((user) => user.name);
 
+  if (loading) return <LoadingSpinner />;
+
   return (
     <>
-      <div className="h-16 flex flex-row gap-2 items-center justify-center sticky top-0 z-10 border-b backdrop-blur-md">
-        <Link href={"/"}>
-          <Button variant="outline" size="sm">
-            <ChevronLeft size={15} />
-          </Button>
-        </Link>
-      </div>
-      {query && list}
+      <div className="flex flex-col gap-2 items-center justify-center">{list}</div>
     </>
   );
 }

src/components/notifications/NotificationView.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
   AtSignIcon,
   CirclePlusIcon,
@@ -54,7 +56,7 @@ export const NotificationView = ({ item }: { item: Notification }) => {
     return <span key={`${profile.id + item.id + item.type}comma`}>, {userLink}</span>;
   });
 
-  const content = "content" in item.actedOn.metadata ? item?.actedOn?.metadata?.content : "";
+  const content = item?.actedOn?.metadata && "content" in item.actedOn.metadata ? item?.actedOn?.metadata?.content : "";
 
   return (
     <Card>