refactor: memoize functional components in NotificationAccountAvatar, NotificationAccountName, HiddenPost, Comment, Accounts, New, Bookmarks, Groups, and Settings for improved performance

apps/web/src/components/Notification/Account.tsx

···
 import getAccount from "@hey/helpers/getAccount";
 import getAvatar from "@hey/helpers/getAvatar";
 import type { AccountFragment } from "@hey/indexer";
+import { memo } from "react";
 import AccountLink from "@/components/Shared/Account/AccountLink";
 import AccountPreview from "@/components/Shared/Account/AccountPreview";
 import { Image } from "@/components/Shared/UI";
···
   account: AccountFragment;
 }
 
-export const NotificationAccountAvatar = ({
-  account
-}: NotificationAccountProps) => {
-  return (
-    <AccountPreview
-      address={account.address}
-      username={account.username?.localName}
-    >
-      <AccountLink
-        account={account}
-        className="rounded-full outline-offset-2"
-        onClick={stopEventPropagation}
+export const NotificationAccountAvatar = memo(
+  ({ account }: NotificationAccountProps) => {
+    return (
+      <AccountPreview
+        address={account.address}
+        username={account.username?.localName}
       >
-        <Image
-          alt={account.address}
-          className="size-7 rounded-full border border-gray-200 bg-gray-200 sm:size-8 dark:border-gray-700"
-          height={32}
-          src={getAvatar(account)}
-          width={32}
-        />
-      </AccountLink>
-    </AccountPreview>
-  );
-};
+        <AccountLink
+          account={account}
+          className="rounded-full outline-offset-2"
+          onClick={stopEventPropagation}
+        >
+          <Image
+            alt={account.address}
+            className="size-7 rounded-full border border-gray-200 bg-gray-200 sm:size-8 dark:border-gray-700"
+            height={32}
+            src={getAvatar(account)}
+            width={32}
+          />
+        </AccountLink>
+      </AccountPreview>
+    );
+  }
+);
 
-export const NotificationAccountName = ({
-  account
-}: NotificationAccountProps) => {
-  return (
-    <AccountPreview
-      address={account.address}
-      username={account.username?.localName}
-    >
-      <AccountLink
-        account={account}
-        className="inline-flex items-center gap-1 font-bold outline-hidden hover:underline focus:underline"
-        onClick={stopEventPropagation}
+export const NotificationAccountName = memo(
+  ({ account }: NotificationAccountProps) => {
+    return (
+      <AccountPreview
+        address={account.address}
+        username={account.username?.localName}
       >
-        <span>{getAccount(account).name}</span>
-        {account.hasSubscribed && (
-          <CheckBadgeIcon className="size-4 text-brand-500" />
-        )}
-      </AccountLink>
-    </AccountPreview>
-  );
-};
+        <AccountLink
+          account={account}
+          className="inline-flex items-center gap-1 font-bold outline-hidden hover:underline focus:underline"
+          onClick={stopEventPropagation}
+        >
+          <span>{getAccount(account).name}</span>
+          {account.hasSubscribed && (
+            <CheckBadgeIcon className="size-4 text-brand-500" />
+          )}
+        </AccountLink>
+      </AccountPreview>
+    );
+  }
+);

apps/web/src/components/Post/Actions/Comment.tsx

···
 import { ChatBubbleLeftIcon } from "@heroicons/react/24/outline";
 import type { PostFragment } from "@hey/indexer";
 import { AnimateNumber } from "motion-plus-react";
+import { memo } from "react";
 import { useNavigate } from "react-router";
 import { Tooltip } from "@/components/Shared/UI";
 import humanize from "@/helpers/humanize";
···
   );
 };
 
-export default Comment;
+export default memo(Comment);

apps/web/src/components/Post/HiddenPost.tsx

···
+import { memo } from "react";
 import { Card } from "@/components/Shared/UI";
 
 interface HiddenPostProps {
···
   );
 };
 
-export default HiddenPost;
+export default memo(HiddenPost);

apps/web/src/components/Shared/Account/Accounts.tsx

···
 import type { AccountFragment } from "@hey/indexer";
 import type { ReactNode } from "react";
+import { memo } from "react";
 import FallbackAccountName from "@/components/Shared/FallbackAccountName";
 
 interface AccountsProps {
···
   return null;
 };
 
-export default Accounts;
+export default memo(Accounts);

apps/web/src/components/Shared/Badges/New.tsx

···
 import { SparklesIcon } from "@heroicons/react/24/solid";
+import { memo } from "react";
 import { Badge } from "@/components/Shared/UI";
 
 const New = () => {
···
   );
 };
 
-export default New;
+export default memo(New);

apps/web/src/components/Shared/Navbar/NavItems/Bookmarks.tsx

···
 import { BookmarkIcon } from "@heroicons/react/24/outline";
+import { memo } from "react";
 import cn from "@/helpers/cn";
 
 interface BookmarksProps {
···
   );
 };
 
-export default Bookmarks;
+export default memo(Bookmarks);

apps/web/src/components/Shared/Navbar/NavItems/Groups.tsx

···
 import { UserGroupIcon } from "@heroicons/react/24/outline";
+import { memo } from "react";
 import cn from "@/helpers/cn";
 
 interface GroupsProps {
···
   );
 };
 
-export default Groups;
+export default memo(Groups);

apps/web/src/components/Shared/Navbar/NavItems/Settings.tsx

···
 import { Cog6ToothIcon } from "@heroicons/react/24/outline";
+import { memo } from "react";
 import cn from "@/helpers/cn";
 
 interface SettingsProps {
···
   );
 };
 
-export default Settings;
+export default memo(Settings);