fix: navbar icons

akari-blue · Jan 9, 2025 · 439af25 · 439af25
1 parent 8a344b0
commit 439af25
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 17 deletions.
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -94,20 +94,22 @@ const NotificationsLink = () => {
 };
 
 const ProfileLink = () => {
-  const { session } = useBlueskyStore();
   const { t } = useTranslation('profile');
+  const handle = useBlueskyStore((state) => state.session?.handle);
+  const { data: profile } = useProfile({ handle });
 
-  if (!session?.handle) return null;
+  if (!handle) return null;
 
   return (
     <Link
       to="/profile/$handle"
       params={{
-        handle: session?.handle,
+        handle,
       }}
       className="flex flex-row items-center gap-2 p-3 rounded-sm hover:no-underline hover:bg-gray-200 dark:hover:bg-gray-700"
     >
-      <UserIcon className="size-7 xl:size-6 active:scale-90" />
+      <UserIcon className="hidden sm:flex size-7 xl:size-6 active:scale-90" />
+      <Avatar handle={handle} avatar={profile?.avatar} hover={false} className="size-7 sm:hidden" />
       <span className="hidden xl:block">{t('profile')}</span>
     </Link>
   );
@@ -118,7 +120,7 @@ const SettingsLink = () => {
   return (
     <Link
       to="/settings"
-      className="flex flex-row items-center gap-2 p-3 rounded-sm hover:no-underline hover:bg-gray-200 dark:hover:bg-gray-700"
+      className="flex-row items-center gap-2 p-3 rounded-sm hover:no-underline hover:bg-gray-200 dark:hover:bg-gray-700 hidden md:flex"
     >
       <SettingsIcon className="size-7 xl:size-6 active:scale-90" />
       <span className="hidden xl:block">{t('settings')}</span>

diff --git a/src/components/PostCard.tsx b/src/components/PostCard.tsx
@@ -37,7 +37,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from './ui/dropdown-menu';
-import { useState } from 'react';
+import { memo, useState } from 'react';
 import { toast } from 'sonner';
 
 const contextToText = (context: string) => {
@@ -195,7 +195,7 @@ type PostCardProps = {
   parent?: boolean;
 };
 
-export function PostCard({ post, context, className, parent = false }: PostCardProps) {
+function PostCardInner({ post, context, className, parent = false }: PostCardProps) {
   const { t } = useTranslation(['app', 'post']);
   const like = useLike();
   const unlike = useUnlike();
@@ -382,3 +382,5 @@ export function PostCard({ post, context, className, parent = false }: PostCardP
     </div>
   );
 }
+
+export const PostCard = memo(PostCardInner);
diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx
@@ -1,6 +1,6 @@
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cn } from '@/lib/utils';
-import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import { forwardRef, ElementRef, ComponentPropsWithoutRef, memo } from 'react';
 import { Link } from './Link';
 import { HoverCard, HoverCardContent, HoverCardTrigger } from './hover-card';
 
@@ -37,7 +37,16 @@ const AvatarFallback = forwardRef<
   );
 });
 
-export const Avatar = ({
+function HoverCardInner({ handle }: { handle: string }) {
+  return (
+    <div className="p-2">
+      <div className="text-lg font-bold">{handle}</div>
+      <div className="text-sm text-gray-500">{'@' + handle}</div>
+    </div>
+  );
+}
+
+const AvatarInner = ({
   handle,
   avatar,
   labeler,
@@ -72,11 +81,4 @@ export const Avatar = ({
   );
 };
 
-function HoverCardInner({ handle }: { handle: string }) {
-  return (
-    <div className="p-2">
-      <div className="text-lg font-bold">{handle}</div>
-      <div className="text-sm text-gray-500">{'@' + handle}</div>
-    </div>
-  );
-}
+export const Avatar = memo(AvatarInner);