fix: mention notifications

akari-blue · Jan 5, 2025 · b21432a · b21432a
1 parent 059f6b8
commit b21432a
Showing 1 changed file with 11 additions and 6 deletions.
diff --git a/src/routes/notifications/components/MentionNotification.tsx b/src/routes/notifications/components/MentionNotification.tsx
@@ -1,16 +1,21 @@
+import { PostEmbed } from '@/components/PostEmbed';
 import { Avatar } from '@/components/ui/avatar';
+import { FormattedText } from '@/components/ui/FormattedText';
+import { Handle } from '@/components/ui/Handle';
 import { BSkyMentionNotification } from '@/lib/bluesky/types/BSkyNotification';
-import { useTranslation } from 'react-i18next';
 
 export function MentionNotification({ notification }: { notification: BSkyMentionNotification }) {
-  const { t } = useTranslation('notifications');
   return (
-    <div className="p-2">
-      <div className="flex flex-row gap-1 overflow-hidden max-h-16">
+    <div className="flex flex-row gap-2 p-2">
+      <div className="flex flex-shrink-0 w-12 justify-end aspect-square">
         <Avatar handle={notification.author.handle} avatar={notification.author.avatar} className="size-8" />
       </div>
-      <div>
-        {notification.author.displayName} {t('mentionedYou')}
+      <div className="flex-grow">
+        <div>
+          {notification.author.displayName} <Handle handle={notification.author.handle} />
+        </div>
+        <FormattedText text={notification.record.text} />
+        <PostEmbed embed={notification.record.embed} />
       </div>
     </div>
   );