fix: messages styling

Author: ImLunaHey

src/lib/bluesky/hooks/useConversation.ts

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { useBlueskyStore } from '../store';
 import { useAuth } from './useAuth';
+import { BSkyMessage } from '../types/BSkyMessage';
 
 export function useConversation({ convoId }: { convoId: string }) {
   const { agent, session } = useBlueskyStore();
@@ -19,7 +20,7 @@ export function useConversation({ convoId }: { convoId: string }) {
 
       return response?.data.messages
         .slice(0)
-        .sort((a, b) => new Date(a.sentAt as string).getTime() - new Date(b.sentAt as string).getTime());
+        .sort((a, b) => new Date(a.sentAt as string).getTime() - new Date(b.sentAt as string).getTime()) as BSkyMessage[];
     },
     enabled: !!agent && isAuthenticated,
   });

src/lib/bluesky/hooks/useConversations.ts

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { useBlueskyStore } from '../store';
 import { useAuth } from './useAuth';
+import { BSkyConvo } from '../types/BSkyConvo';
 
 export function useConversations() {
   const { agent, session } = useBlueskyStore();
@@ -16,7 +17,7 @@ export function useConversations() {
       // @ts-expect-error bsky_chat does in fact work
       const proxy = agent?.withProxy('bsky_chat', 'did:web:api.bsky.chat');
       const response = await proxy?.api.chat.bsky.convo.listConvos();
-      return response?.data.convos;
+      return response?.data.convos as BSkyConvo[];
     },
     enabled: !!agent && isAuthenticated,
   });

src/lib/bluesky/hooks/useNotifications.ts

@@ -3,12 +3,12 @@ import { useBlueskyStore } from '../store';
 import { BSkyNotification } from '../types/BSkyNotification';
 
 export function useNotifications() {
-  const { agent } = useBlueskyStore();
+  const { agent, isAuthenticated } = useBlueskyStore();
 
   return useQuery({
     queryKey: ['notifications'],
     queryFn: async () => {
-      if (!agent) throw new Error('Not authenticated');
+      if (!agent || !isAuthenticated) throw new Error('Not authenticated');
 
       const response = await agent.api.app.bsky.notification.listNotifications();
       return response.data.notifications as BSkyNotification[];

src/lib/bluesky/types/BSkyConvo.ts

@@ -0,0 +1,45 @@
+import { Static, Type } from '@sinclair/typebox';
+
+export const BSkyConvo = Type.Object({
+  id: Type.String(),
+  rev: Type.String(),
+  members: Type.Array(
+    Type.Object({
+      did: Type.String(),
+      handle: Type.String(),
+      displayName: Type.String(),
+      avatar: Type.String(),
+      associated: Type.Object({
+        lists: Type.Number(),
+        feedgens: Type.Number(),
+        starterPacks: Type.Number(),
+        labeler: Type.Boolean(),
+        chat: Type.Object({
+          allowIncoming: Type.String(),
+        }),
+      }),
+      viewer: Type.Object({
+        muted: Type.Boolean(),
+        blockedBy: Type.Boolean(),
+        following: Type.Optional(Type.String()),
+        followedBy: Type.Optional(Type.String()),
+      }),
+      labels: Type.Array(Type.Unknown()),
+    }),
+  ),
+  lastMessage: Type.Object({
+    $type: Type.Literal('chat.bsky.convo.defs#messageView'),
+    id: Type.String(),
+    rev: Type.String(),
+    sender: Type.Object({
+      did: Type.String(),
+    }),
+    text: Type.String(),
+    sentAt: Type.String(),
+  }),
+  unreadCount: Type.Number(),
+  opened: Type.Boolean(),
+  muted: Type.Boolean(),
+});
+
+export type BSkyConvo = Static<typeof BSkyConvo>;

src/lib/bluesky/types/BSkyMessage.ts

@@ -0,0 +1,13 @@
+import { Static, Type } from '@sinclair/typebox';
+
+export const BSkyMessage = Type.Object({
+  id: Type.String(),
+  rev: Type.String(),
+  sender: Type.Object({
+    did: Type.String(),
+  }),
+  text: Type.String(),
+  sentAt: Type.String(),
+});
+
+export type BSkyMessage = Static<typeof BSkyMessage>;

src/routes/__root.tsx

@@ -19,7 +19,6 @@ export const Route = createRootRoute({
     if (location.pathname.startsWith('/login')) {
       // if already authenticated, redirect to root
       const { isAuthenticated } = useBlueskyStore.getState();
-      console.info('isAuthenticated', isAuthenticated);
       if (isAuthenticated) {
         throw redirect({ to: '/' });
       }

src/routes/messages/$convoId.tsx

@@ -1,9 +1,8 @@
 import { createFileRoute } from '@tanstack/react-router';
 import { useConversation } from '../../lib/bluesky/hooks/useConversation';
 import { useTranslation } from 'react-i18next';
-import { Handle } from '../../components/ui/Handle';
-import { Debug } from '../../components/ui/Debug';
-import TimeAgo from 'react-timeago-i18n';
+import { cn } from '../../lib/utils';
+import { useBlueskyStore } from '../../lib/bluesky/store';
 
 export const Route = createFileRoute('/messages/$convoId')({
   component: RouteComponent,
@@ -12,17 +11,18 @@ export const Route = createFileRoute('/messages/$convoId')({
 function RouteComponent() {
   const { t } = useTranslation('app');
   const { convoId } = Route.useParams();
+  const session = useBlueskyStore((state) => state.session);
   const { data: messages, isLoading } = useConversation({ convoId });
 
   if (isLoading) return <div>{t('loading')}</div>;
 
   return (
     <div className="flex flex-col gap-2 overflow-y-auto h-full">
       {messages?.map((message) => (
-        <div key={message.id as string}>
-          <Handle handle={(message.sender as { did: string }).did} />: {message.text as string} -{' '}
-          <TimeAgo date={message.sentAt as string} />
-          <Debug value={message} />
+        <div className={cn('flex flex-col', message.sender.did === session?.did ? 'items-end' : 'items-start')}>
+          <div className="bg-neutral-800 p-2 w-fit" key={message.id as string}>
+            {message.text}
+          </div>
         </div>
       ))}
     </div>

src/routes/messages/index.tsx

@@ -5,38 +5,53 @@ import { Image } from '../../components/ui/Image';
 import { cn } from '../../lib/utils';
 import { useBlueskyStore } from '../../lib/bluesky/store';
 import { Link } from '../../components/ui/Link';
+import { Debug } from '../../components/ui/Debug';
+import { BSkyConvo } from '../../lib/bluesky/types/BSkyConvo';
+import TimeAgo from 'react-timeago-i18n';
+import { Handle } from '../../components/ui/Handle';
+
+function Conversation({ convo }: { convo: BSkyConvo }) {
+  const session = useBlueskyStore((state) => state.session);
+  const members = convo.members.filter((member) => member.did !== session?.did);
+
+  return (
+    <>
+      <Debug value={convo} />
+      <Link key={convo.id} to="/messages/$convoId" params={{ convoId: convo.id }}>
+        {members.map((member) => (
+          <div className="flex gap-2" key={member.did}>
+            <Image
+              type="avatar"
+              src={member.avatar}
+              classNames={{
+                image: cn(!member.associated?.labeler && 'rounded-full'),
+                wrapper: 'size-24 aspect-square',
+              }}
+            />
+            <div className="flex flex-col">
+              <div className="flex flex-row gap-2">
+                <Handle handle={member.handle ?? member.did} />
+                {' · '}
+                <TimeAgo date={convo.lastMessage.sentAt} />
+              </div>
+              <div>{convo.lastMessage.text}</div>
+            </div>
+          </div>
+        ))}
+      </Link>
+    </>
+  );
+}
 
 export const Route = createFileRoute('/messages/')({
   component: Messages,
 });
 
 function Messages() {
-  const { session } = useBlueskyStore();
   const { data, isLoading } = useConversations();
   const { t } = useTranslation('app');
 
   if (isLoading) return <div className="w-[550px] h-screen overflow-y-scroll">{t('loading')}</div>;
 
-  return (
-    <div className="flex flex-col gap-2 overflow-y-auto h-screen">
-      {data?.map((convo) => (
-        <Link key={convo.id} to="/messages/$convoId" params={{ convoId: convo.id }}>
-          {convo.members
-            .filter((member) => member.did !== session?.did)
-            .map((member) => (
-              <div className="flex gap-2" key={member.did}>
-                <Image
-                  type="avatar"
-                  src={member.avatar}
-                  classNames={{
-                    image: cn('size-24', member.associated?.labeler ? 'aspect-square' : 'rounded-full'),
-                  }}
-                />
-                <div>{convo.lastMessage?.text as string}</div>
-              </div>
-            ))}
-        </Link>
-      ))}
-    </div>
-  );
+  return <div className="flex flex-col gap-2">{data?.map((convo) => <Conversation key={convo.id} convo={convo} />)}</div>;
 }