feat: chat pagination

platforms/blabsy/firestore.indexes.json

@@ -83,6 +83,20 @@
  "order": "ASCENDING"
  }
  ]
+ },
+ {
+ "collectionGroup": "chats",
+ "queryScope": "COLLECTION",
+ "fields": [
+ {
+ "fieldPath": "participants",
+ "arrayConfig": "CONTAINS"
+ },
+ {
+ "fieldPath": "updatedAt",
+ "order": "DESCENDING"
+ }
+ ]
  }
  ],
  "fieldOverrides": [

platforms/blabsy/src/components/chat/chat-list.tsx

@@ -92,8 +92,8 @@ export function ChatList(): JSX.Element {
  }
 
  return (
- <div className='flex h-full flex-col gap-4'>
- <div className='flex h-full flex-col gap-2 overflow-y-auto p-4'>
+ <div className='flex h-full flex-col'>
+ <div className='flex-1 overflow-y-auto p-4 space-y-2'>
  {chats.map((chat) => {
  const otherParticipant = chat.participants.find(
  (p) => p !== user?.id
@@ -160,13 +160,15 @@ export function ChatList(): JSX.Element {
  );
  })}
  </div>
- <button
- type='button'
- onClick={() => setOpenCreateNewChatModal(true)}
- className='flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90 mx-4 mb-4'
- >
- New Chat
- </button>
+ <div className='flex-shrink-0 p-4'>
+ <button
+ type='button'
+ onClick={() => setOpenCreateNewChatModal(true)}
+ className='w-full flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90'
+ >
+ New Chat
+ </button>
+ </div>
  <AddMembers
  open={openCreateNewChatModal}
  onClose={() => setOpenCreateNewChatModal(false)}

platforms/blabsy/src/components/chat/chat.tsx

@@ -5,7 +5,7 @@ export function Chat(): JSX.Element {
  return (
  <main className='min-h-full w-full max-w-5xl pt-8'>
  <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
- <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+ <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
  <ChatList />
  </div>
  <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>

platforms/blabsy/src/lib/context/chat-context.tsx

@@ -94,14 +94,29 @@ export function ChatContextProvider({
 
  const chatsQuery = query(
  chatsCollection,
- where('participants', 'array-contains', user.id)
+ where('participants', 'array-contains', user.id),
+ orderBy('updatedAt', 'desc')
  );
 
  const unsubscribe = onSnapshot(
  chatsQuery,
  (snapshot) => {
  const chatsData = snapshot.docs.map((doc) => doc.data());
- setChats(chatsData);
+
+ // Sort chats by last message timestamp (most recent first)
+ const sortedChats = chatsData.sort((a, b) => {
+ // If both have lastMessage, sort by timestamp
+ if (a.lastMessage?.timestamp && b.lastMessage?.timestamp) {
+ return b.lastMessage.timestamp.toMillis() - a.lastMessage.timestamp.toMillis();
+ }
+ // If only one has lastMessage, prioritize it
+ if (a.lastMessage?.timestamp && !b.lastMessage?.timestamp) return -1;
+ if (!a.lastMessage?.timestamp && b.lastMessage?.timestamp) return 1;
+ // If neither has lastMessage, sort by updatedAt
+ return b.updatedAt.toMillis() - a.updatedAt.toMillis();
+ });
+
+ setChats(sortedChats);
  setLoading(false);
  },
  (error) => {

platforms/pictique-api/src/services/ChatService.ts

@@ -162,6 +162,11 @@ export class ChatService {
  });
 
  const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+
  console.log("Sent event", `chat:${chatId}`);
  this.eventEmitter.emit(`chat:${chatId}`, [savedMessage]);
 
@@ -280,33 +285,58 @@ export class ChatService {
  page: number;
  totalPages: number;
  }> {
- // First, get the chat IDs that the user is part of
- const [chatIds, total] = await this.chatRepository
+ // Get chats ordered by the most recent message timestamp
+ const queryBuilder = this.chatRepository
  .createQueryBuilder("chat")
- .select(["chat.id", "chat.updatedAt"])
+ .leftJoin("chat.messages", "message")
  .innerJoin("chat.participants", "participants")
  .where("participants.id = :userId", { userId })
- .orderBy("chat.updatedAt", "DESC")
+ .groupBy("chat.id")
+ .addGroupBy("chat.name")
+ .addGroupBy("chat.ename")
+ .addGroupBy("chat.createdAt")
+ .addGroupBy("chat.updatedAt")
+ .orderBy("MAX(message.createdAt)", "DESC")
+ .addOrderBy("chat.createdAt", "DESC"); // Fallback for chats without messages
+
+ // Get total count for pagination
+ const total = await queryBuilder.getCount();
+
+ // Apply pagination
+ const chats = await queryBuilder
  .skip((page - 1) * limit)
  .take(limit)
- .getManyAndCount();
+ .getMany();
 
- // Then, load the full chat data with all relations
- const chats = await this.chatRepository.find({
- where: { id: In(chatIds.map((chat) => chat.id)) },
+ // Load full chat data with all relations for the paginated results
+ const chatsWithRelations = await this.chatRepository.find({
+ where: { id: In(chats.map((chat) => chat.id)) },
  relations: [
  "participants",
  "messages",
  "messages.sender",
  "messages.readStatuses",
  "messages.readStatuses.user",
  ],
- order: { updatedAt: "DESC" },
+ });
+
+ // Sort the chats by latest message timestamp (since we loaded relations, we need to sort again)
+ const sortedChats = chatsWithRelations.sort((a, b) => {
+ const aLatestMessage = a.messages[a.messages.length - 1];
+ const bLatestMessage = b.messages[b.messages.length - 1];
+
+ if (!aLatestMessage && !bLatestMessage) {
+ return b.createdAt.getTime() - a.createdAt.getTime();
+ }
+ if (!aLatestMessage) return 1;
+ if (!bLatestMessage) return -1;
+
+ return bLatestMessage.createdAt.getTime() - aLatestMessage.createdAt.getTime();
  });
 
  // For each chat, get the latest message and its read status
  const chatsWithLatestMessage = await Promise.all(
-chats.map(async (chat) => {
+sortedChats.map(async (chat) => {
  const latestMessage = chat.messages[chat.messages.length - 1];
  if (!latestMessage) {
  return { ...chat, latestMessage: undefined };

platforms/pictique-api/src/services/MessageService.ts

@@ -1,8 +1,10 @@
 import { AppDataSource } from "../database/data-source";
 import { Message } from "../database/entities/Message";
+import { Chat } from "../database/entities/Chat";
 
 export class MessageService {
  public messageRepository = AppDataSource.getRepository(Message);
+ private chatRepository = AppDataSource.getRepository(Chat);
 
  async findById(id: string): Promise<Message | null> {
  return await this.messageRepository.findOneBy({ id });
@@ -17,7 +19,16 @@ export class MessageService {
  isArchived: false
  });
 
- return await this.messageRepository.save(message);
+ const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ const chat = await this.chatRepository.findOneBy({ id: chatId });
+ if (chat) {
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+ }
+
+ return savedMessage;
  }
 
  async createSystemMessage(chatId: string, text: string): Promise<Message> {

platforms/blabsy/firestore.indexes.json

@@ -83,6 +83,20 @@
  "order": "ASCENDING"
  }
  ]
+ },
+ {
+ "collectionGroup": "chats",
+ "queryScope": "COLLECTION",
+ "fields": [
+ {
+ "fieldPath": "participants",
+ "arrayConfig": "CONTAINS"
+ },
+ {
+ "fieldPath": "updatedAt",
+ "order": "DESCENDING"
+ }
+ ]
  }
  ],
  "fieldOverrides": [

platforms/blabsy/src/components/chat/chat-list.tsx

@@ -92,8 +92,8 @@ export function ChatList(): JSX.Element {
  }
 
  return (
- <div className='flex h-full flex-col gap-4'>
- <div className='flex h-full flex-col gap-2 overflow-y-auto p-4'>
+ <div className='flex h-full flex-col'>
+ <div className='flex-1 overflow-y-auto p-4 space-y-2'>
  {chats.map((chat) => {
  const otherParticipant = chat.participants.find(
  (p) => p !== user?.id
@@ -160,13 +160,15 @@ export function ChatList(): JSX.Element {
  );
  })}
  </div>
- <button
- type='button'
- onClick={() => setOpenCreateNewChatModal(true)}
- className='flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90 mx-4 mb-4'
- >
- New Chat
- </button>
+ <div className='flex-shrink-0 p-4'>
+ <button
+ type='button'
+ onClick={() => setOpenCreateNewChatModal(true)}
+ className='w-full flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90'
+ >
+ New Chat
+ </button>
+ </div>
  <AddMembers
  open={openCreateNewChatModal}
  onClose={() => setOpenCreateNewChatModal(false)}

platforms/blabsy/src/components/chat/chat.tsx

@@ -5,7 +5,7 @@ export function Chat(): JSX.Element {
  return (
  <main className='min-h-full w-full max-w-5xl pt-8'>
  <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
- <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+ <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
  <ChatList />
  </div>
  <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>

platforms/blabsy/src/lib/context/chat-context.tsx

@@ -94,14 +94,29 @@ export function ChatContextProvider({
 
  const chatsQuery = query(
  chatsCollection,
- where('participants', 'array-contains', user.id)
+ where('participants', 'array-contains', user.id),
+ orderBy('updatedAt', 'desc')
  );
 
  const unsubscribe = onSnapshot(
  chatsQuery,
  (snapshot) => {
  const chatsData = snapshot.docs.map((doc) => doc.data());
- setChats(chatsData);
+
+ // Sort chats by last message timestamp (most recent first)
+ const sortedChats = chatsData.sort((a, b) => {
+ // If both have lastMessage, sort by timestamp
+ if (a.lastMessage?.timestamp && b.lastMessage?.timestamp) {
+ return b.lastMessage.timestamp.toMillis() - a.lastMessage.timestamp.toMillis();
+ }
+ // If only one has lastMessage, prioritize it
+ if (a.lastMessage?.timestamp && !b.lastMessage?.timestamp) return -1;
+ if (!a.lastMessage?.timestamp && b.lastMessage?.timestamp) return 1;
+ // If neither has lastMessage, sort by updatedAt
+ return b.updatedAt.toMillis() - a.updatedAt.toMillis();
+ });
+
+ setChats(sortedChats);
  setLoading(false);
  },
  (error) => {

platforms/pictique-api/src/services/ChatService.ts

@@ -162,6 +162,11 @@ export class ChatService {
  });
 
  const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+
  console.log("Sent event", `chat:${chatId}`);
  this.eventEmitter.emit(`chat:${chatId}`, [savedMessage]);
 
@@ -280,33 +285,58 @@ export class ChatService {
  page: number;
  totalPages: number;
  }> {
- // First, get the chat IDs that the user is part of
- const [chatIds, total] = await this.chatRepository
+ // Get chats ordered by the most recent message timestamp
+ const queryBuilder = this.chatRepository
  .createQueryBuilder("chat")
- .select(["chat.id", "chat.updatedAt"])
+ .leftJoin("chat.messages", "message")
  .innerJoin("chat.participants", "participants")
  .where("participants.id = :userId", { userId })
- .orderBy("chat.updatedAt", "DESC")
+ .groupBy("chat.id")
+ .addGroupBy("chat.name")
+ .addGroupBy("chat.ename")
+ .addGroupBy("chat.createdAt")
+ .addGroupBy("chat.updatedAt")
+ .orderBy("MAX(message.createdAt)", "DESC")
+ .addOrderBy("chat.createdAt", "DESC"); // Fallback for chats without messages
+
+ // Get total count for pagination
+ const total = await queryBuilder.getCount();
+
+ // Apply pagination
+ const chats = await queryBuilder
  .skip((page - 1) * limit)
  .take(limit)
- .getManyAndCount();
+ .getMany();
 
- // Then, load the full chat data with all relations
- const chats = await this.chatRepository.find({
- where: { id: In(chatIds.map((chat) => chat.id)) },
+ // Load full chat data with all relations for the paginated results
+ const chatsWithRelations = await this.chatRepository.find({
+ where: { id: In(chats.map((chat) => chat.id)) },
  relations: [
  "participants",
  "messages",
  "messages.sender",
  "messages.readStatuses",
  "messages.readStatuses.user",
  ],
- order: { updatedAt: "DESC" },
+ });
+
+ // Sort the chats by latest message timestamp (since we loaded relations, we need to sort again)
+ const sortedChats = chatsWithRelations.sort((a, b) => {
+ const aLatestMessage = a.messages[a.messages.length - 1];
+ const bLatestMessage = b.messages[b.messages.length - 1];
+
+ if (!aLatestMessage && !bLatestMessage) {
+ return b.createdAt.getTime() - a.createdAt.getTime();
+ }
+ if (!aLatestMessage) return 1;
+ if (!bLatestMessage) return -1;
+
+ return bLatestMessage.createdAt.getTime() - aLatestMessage.createdAt.getTime();
  });
 
  // For each chat, get the latest message and its read status
  const chatsWithLatestMessage = await Promise.all(
-chats.map(async (chat) => {
+sortedChats.map(async (chat) => {
  const latestMessage = chat.messages[chat.messages.length - 1];
  if (!latestMessage) {
  return { ...chat, latestMessage: undefined };

platforms/pictique-api/src/services/MessageService.ts

@@ -1,8 +1,10 @@
 import { AppDataSource } from "../database/data-source";
 import { Message } from "../database/entities/Message";
+import { Chat } from "../database/entities/Chat";
 
 export class MessageService {
  public messageRepository = AppDataSource.getRepository(Message);
+ private chatRepository = AppDataSource.getRepository(Chat);
 
  async findById(id: string): Promise<Message | null> {
  return await this.messageRepository.findOneBy({ id });
@@ -17,7 +19,16 @@ export class MessageService {
  isArchived: false
  });
 
- return await this.messageRepository.save(message);
+ const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ const chat = await this.chatRepository.findOneBy({ id: chatId });
+ if (chat) {
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+ }
+
+ return savedMessage;
  }
 
  async createSystemMessage(chatId: string, text: string): Promise<Message> {

platforms/blabsy/firestore.indexes.json

@@ -83,6 +83,20 @@
  "order": "ASCENDING"
  }
  ]
+ },
+ {
+ "collectionGroup": "chats",
+ "queryScope": "COLLECTION",
+ "fields": [
+ {
+ "fieldPath": "participants",
+ "arrayConfig": "CONTAINS"
+ },
+ {
+ "fieldPath": "updatedAt",
+ "order": "DESCENDING"
+ }
+ ]
  }
  ],
  "fieldOverrides": [

platforms/blabsy/src/components/chat/chat-list.tsx

@@ -92,8 +92,8 @@ export function ChatList(): JSX.Element {
  }
 
  return (
- <div className='flex h-full flex-col gap-4'>
- <div className='flex h-full flex-col gap-2 overflow-y-auto p-4'>
+ <div className='flex h-full flex-col'>
+ <div className='flex-1 overflow-y-auto p-4 space-y-2'>
  {chats.map((chat) => {
  const otherParticipant = chat.participants.find(
  (p) => p !== user?.id
@@ -160,13 +160,15 @@ export function ChatList(): JSX.Element {
  );
  })}
  </div>
- <button
- type='button'
- onClick={() => setOpenCreateNewChatModal(true)}
- className='flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90 mx-4 mb-4'
- >
- New Chat
- </button>
+ <div className='flex-shrink-0 p-4'>
+ <button
+ type='button'
+ onClick={() => setOpenCreateNewChatModal(true)}
+ className='w-full flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90'
+ >
+ New Chat
+ </button>
+ </div>
  <AddMembers
  open={openCreateNewChatModal}
  onClose={() => setOpenCreateNewChatModal(false)}

platforms/blabsy/src/components/chat/chat.tsx

@@ -5,7 +5,7 @@ export function Chat(): JSX.Element {
  return (
  <main className='min-h-full w-full max-w-5xl pt-8'>
  <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
- <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+ <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
  <ChatList />
  </div>
  <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>

platforms/blabsy/src/lib/context/chat-context.tsx

@@ -94,14 +94,29 @@ export function ChatContextProvider({
 
  const chatsQuery = query(
  chatsCollection,
- where('participants', 'array-contains', user.id)
+ where('participants', 'array-contains', user.id),
+ orderBy('updatedAt', 'desc')
  );
 
  const unsubscribe = onSnapshot(
  chatsQuery,
  (snapshot) => {
  const chatsData = snapshot.docs.map((doc) => doc.data());
- setChats(chatsData);
+
+ // Sort chats by last message timestamp (most recent first)
+ const sortedChats = chatsData.sort((a, b) => {
+ // If both have lastMessage, sort by timestamp
+ if (a.lastMessage?.timestamp && b.lastMessage?.timestamp) {
+ return b.lastMessage.timestamp.toMillis() - a.lastMessage.timestamp.toMillis();
+ }
+ // If only one has lastMessage, prioritize it
+ if (a.lastMessage?.timestamp && !b.lastMessage?.timestamp) return -1;
+ if (!a.lastMessage?.timestamp && b.lastMessage?.timestamp) return 1;
+ // If neither has lastMessage, sort by updatedAt
+ return b.updatedAt.toMillis() - a.updatedAt.toMillis();
+ });
+
+ setChats(sortedChats);
  setLoading(false);
  },
  (error) => {

platforms/pictique-api/src/services/ChatService.ts

@@ -162,6 +162,11 @@ export class ChatService {
  });
 
  const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+
  console.log("Sent event", `chat:${chatId}`);
  this.eventEmitter.emit(`chat:${chatId}`, [savedMessage]);
 
@@ -280,33 +285,58 @@ export class ChatService {
  page: number;
  totalPages: number;
  }> {
- // First, get the chat IDs that the user is part of
- const [chatIds, total] = await this.chatRepository
+ // Get chats ordered by the most recent message timestamp
+ const queryBuilder = this.chatRepository
  .createQueryBuilder("chat")
- .select(["chat.id", "chat.updatedAt"])
+ .leftJoin("chat.messages", "message")
  .innerJoin("chat.participants", "participants")
  .where("participants.id = :userId", { userId })
- .orderBy("chat.updatedAt", "DESC")
+ .groupBy("chat.id")
+ .addGroupBy("chat.name")
+ .addGroupBy("chat.ename")
+ .addGroupBy("chat.createdAt")
+ .addGroupBy("chat.updatedAt")
+ .orderBy("MAX(message.createdAt)", "DESC")
+ .addOrderBy("chat.createdAt", "DESC"); // Fallback for chats without messages
+
+ // Get total count for pagination
+ const total = await queryBuilder.getCount();
+
+ // Apply pagination
+ const chats = await queryBuilder
  .skip((page - 1) * limit)
  .take(limit)
- .getManyAndCount();
+ .getMany();
 
- // Then, load the full chat data with all relations
- const chats = await this.chatRepository.find({
- where: { id: In(chatIds.map((chat) => chat.id)) },
+ // Load full chat data with all relations for the paginated results
+ const chatsWithRelations = await this.chatRepository.find({
+ where: { id: In(chats.map((chat) => chat.id)) },
  relations: [
  "participants",
  "messages",
  "messages.sender",
  "messages.readStatuses",
  "messages.readStatuses.user",
  ],
- order: { updatedAt: "DESC" },
+ });
+
+ // Sort the chats by latest message timestamp (since we loaded relations, we need to sort again)
+ const sortedChats = chatsWithRelations.sort((a, b) => {
+ const aLatestMessage = a.messages[a.messages.length - 1];
+ const bLatestMessage = b.messages[b.messages.length - 1];
+
+ if (!aLatestMessage && !bLatestMessage) {
+ return b.createdAt.getTime() - a.createdAt.getTime();
+ }
+ if (!aLatestMessage) return 1;
+ if (!bLatestMessage) return -1;
+
+ return bLatestMessage.createdAt.getTime() - aLatestMessage.createdAt.getTime();
  });
 
  // For each chat, get the latest message and its read status
  const chatsWithLatestMessage = await Promise.all(
-chats.map(async (chat) => {
+sortedChats.map(async (chat) => {
  const latestMessage = chat.messages[chat.messages.length - 1];
  if (!latestMessage) {
  return { ...chat, latestMessage: undefined };

platforms/pictique-api/src/services/MessageService.ts

@@ -1,8 +1,10 @@
 import { AppDataSource } from "../database/data-source";
 import { Message } from "../database/entities/Message";
+import { Chat } from "../database/entities/Chat";
 
 export class MessageService {
  public messageRepository = AppDataSource.getRepository(Message);
+ private chatRepository = AppDataSource.getRepository(Chat);
 
  async findById(id: string): Promise<Message | null> {
  return await this.messageRepository.findOneBy({ id });
@@ -17,7 +19,16 @@ export class MessageService {
  isArchived: false
  });
 
- return await this.messageRepository.save(message);
+ const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ const chat = await this.chatRepository.findOneBy({ id: chatId });
+ if (chat) {
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+ }
+
+ return savedMessage;
  }
 
  async createSystemMessage(chatId: string, text: string): Promise<Message> {

platforms/blabsy/firestore.indexes.json

@@ -83,6 +83,20 @@
  "order": "ASCENDING"
  }
  ]
+ },
+ {
+ "collectionGroup": "chats",
+ "queryScope": "COLLECTION",
+ "fields": [
+ {
+ "fieldPath": "participants",
+ "arrayConfig": "CONTAINS"
+ },
+ {
+ "fieldPath": "updatedAt",
+ "order": "DESCENDING"
+ }
+ ]
  }
  ],
  "fieldOverrides": [

platforms/blabsy/src/components/chat/chat-list.tsx

@@ -92,8 +92,8 @@ export function ChatList(): JSX.Element {
  }
 
  return (
- <div className='flex h-full flex-col gap-4'>
- <div className='flex h-full flex-col gap-2 overflow-y-auto p-4'>
+ <div className='flex h-full flex-col'>
+ <div className='flex-1 overflow-y-auto p-4 space-y-2'>
  {chats.map((chat) => {
  const otherParticipant = chat.participants.find(
  (p) => p !== user?.id
@@ -160,13 +160,15 @@ export function ChatList(): JSX.Element {
  );
  })}
  </div>
- <button
- type='button'
- onClick={() => setOpenCreateNewChatModal(true)}
- className='flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90 mx-4 mb-4'
- >
- New Chat
- </button>
+ <div className='flex-shrink-0 p-4'>
+ <button
+ type='button'
+ onClick={() => setOpenCreateNewChatModal(true)}
+ className='w-full flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90'
+ >
+ New Chat
+ </button>
+ </div>
  <AddMembers
  open={openCreateNewChatModal}
  onClose={() => setOpenCreateNewChatModal(false)}

platforms/blabsy/src/components/chat/chat.tsx

@@ -5,7 +5,7 @@ export function Chat(): JSX.Element {
  return (
  <main className='min-h-full w-full max-w-5xl pt-8'>
  <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
- <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+ <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
  <ChatList />
  </div>
  <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>

platforms/blabsy/src/lib/context/chat-context.tsx

@@ -94,14 +94,29 @@ export function ChatContextProvider({
 
  const chatsQuery = query(
  chatsCollection,
- where('participants', 'array-contains', user.id)
+ where('participants', 'array-contains', user.id),
+ orderBy('updatedAt', 'desc')
  );
 
  const unsubscribe = onSnapshot(
  chatsQuery,
  (snapshot) => {
  const chatsData = snapshot.docs.map((doc) => doc.data());
- setChats(chatsData);
+
+ // Sort chats by last message timestamp (most recent first)
+ const sortedChats = chatsData.sort((a, b) => {
+ // If both have lastMessage, sort by timestamp
+ if (a.lastMessage?.timestamp && b.lastMessage?.timestamp) {
+ return b.lastMessage.timestamp.toMillis() - a.lastMessage.timestamp.toMillis();
+ }
+ // If only one has lastMessage, prioritize it
+ if (a.lastMessage?.timestamp && !b.lastMessage?.timestamp) return -1;
+ if (!a.lastMessage?.timestamp && b.lastMessage?.timestamp) return 1;
+ // If neither has lastMessage, sort by updatedAt
+ return b.updatedAt.toMillis() - a.updatedAt.toMillis();
+ });
+
+ setChats(sortedChats);
  setLoading(false);
  },
  (error) => {

platforms/pictique-api/src/services/ChatService.ts

@@ -162,6 +162,11 @@ export class ChatService {
  });
 
  const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+
  console.log("Sent event", `chat:${chatId}`);
  this.eventEmitter.emit(`chat:${chatId}`, [savedMessage]);
 
@@ -280,33 +285,58 @@ export class ChatService {
  page: number;
  totalPages: number;
  }> {
- // First, get the chat IDs that the user is part of
- const [chatIds, total] = await this.chatRepository
+ // Get chats ordered by the most recent message timestamp
+ const queryBuilder = this.chatRepository
  .createQueryBuilder("chat")
- .select(["chat.id", "chat.updatedAt"])
+ .leftJoin("chat.messages", "message")
  .innerJoin("chat.participants", "participants")
  .where("participants.id = :userId", { userId })
- .orderBy("chat.updatedAt", "DESC")
+ .groupBy("chat.id")
+ .addGroupBy("chat.name")
+ .addGroupBy("chat.ename")
+ .addGroupBy("chat.createdAt")
+ .addGroupBy("chat.updatedAt")
+ .orderBy("MAX(message.createdAt)", "DESC")
+ .addOrderBy("chat.createdAt", "DESC"); // Fallback for chats without messages
+
+ // Get total count for pagination
+ const total = await queryBuilder.getCount();
+
+ // Apply pagination
+ const chats = await queryBuilder
  .skip((page - 1) * limit)
  .take(limit)
- .getManyAndCount();
+ .getMany();
 
- // Then, load the full chat data with all relations
- const chats = await this.chatRepository.find({
- where: { id: In(chatIds.map((chat) => chat.id)) },
+ // Load full chat data with all relations for the paginated results
+ const chatsWithRelations = await this.chatRepository.find({
+ where: { id: In(chats.map((chat) => chat.id)) },
  relations: [
  "participants",
  "messages",
  "messages.sender",
  "messages.readStatuses",
  "messages.readStatuses.user",
  ],
- order: { updatedAt: "DESC" },
+ });
+
+ // Sort the chats by latest message timestamp (since we loaded relations, we need to sort again)
+ const sortedChats = chatsWithRelations.sort((a, b) => {
+ const aLatestMessage = a.messages[a.messages.length - 1];
+ const bLatestMessage = b.messages[b.messages.length - 1];
+
+ if (!aLatestMessage && !bLatestMessage) {
+ return b.createdAt.getTime() - a.createdAt.getTime();
+ }
+ if (!aLatestMessage) return 1;
+ if (!bLatestMessage) return -1;
+
+ return bLatestMessage.createdAt.getTime() - aLatestMessage.createdAt.getTime();
  });
 
  // For each chat, get the latest message and its read status
  const chatsWithLatestMessage = await Promise.all(
-chats.map(async (chat) => {
+sortedChats.map(async (chat) => {
  const latestMessage = chat.messages[chat.messages.length - 1];
  if (!latestMessage) {
  return { ...chat, latestMessage: undefined };

platforms/pictique-api/src/services/MessageService.ts

@@ -1,8 +1,10 @@
 import { AppDataSource } from "../database/data-source";
 import { Message } from "../database/entities/Message";
+import { Chat } from "../database/entities/Chat";
 
 export class MessageService {
  public messageRepository = AppDataSource.getRepository(Message);
+ private chatRepository = AppDataSource.getRepository(Chat);
 
  async findById(id: string): Promise<Message | null> {
  return await this.messageRepository.findOneBy({ id });
@@ -17,7 +19,16 @@ export class MessageService {
  isArchived: false
  });
 
- return await this.messageRepository.save(message);
+ const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ const chat = await this.chatRepository.findOneBy({ id: chatId });
+ if (chat) {
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+ }
+
+ return savedMessage;
  }
 
  async createSystemMessage(chatId: string, text: string): Promise<Message> {

platforms/blabsy/firestore.indexes.json

@@ -83,6 +83,20 @@
  "order": "ASCENDING"
  }
  ]
+ },
+ {
+ "collectionGroup": "chats",
+ "queryScope": "COLLECTION",
+ "fields": [
+ {
+ "fieldPath": "participants",
+ "arrayConfig": "CONTAINS"
+ },
+ {
+ "fieldPath": "updatedAt",
+ "order": "DESCENDING"
+ }
+ ]
  }
  ],
  "fieldOverrides": [

platforms/blabsy/src/components/chat/chat-list.tsx

@@ -92,8 +92,8 @@ export function ChatList(): JSX.Element {
  }
 
  return (
- <div className='flex h-full flex-col gap-4'>
- <div className='flex h-full flex-col gap-2 overflow-y-auto p-4'>
+ <div className='flex h-full flex-col'>
+ <div className='flex-1 overflow-y-auto p-4 space-y-2'>
  {chats.map((chat) => {
  const otherParticipant = chat.participants.find(
  (p) => p !== user?.id
@@ -160,13 +160,15 @@ export function ChatList(): JSX.Element {
  );
  })}
  </div>
- <button
- type='button'
- onClick={() => setOpenCreateNewChatModal(true)}
- className='flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90 mx-4 mb-4'
- >
- New Chat
- </button>
+ <div className='flex-shrink-0 p-4'>
+ <button
+ type='button'
+ onClick={() => setOpenCreateNewChatModal(true)}
+ className='w-full flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90'
+ >
+ New Chat
+ </button>
+ </div>
  <AddMembers
  open={openCreateNewChatModal}
  onClose={() => setOpenCreateNewChatModal(false)}

platforms/blabsy/src/components/chat/chat.tsx

@@ -5,7 +5,7 @@ export function Chat(): JSX.Element {
  return (
  <main className='min-h-full w-full max-w-5xl pt-8'>
  <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
- <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+ <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
  <ChatList />
  </div>
  <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>

platforms/blabsy/src/lib/context/chat-context.tsx

@@ -94,14 +94,29 @@ export function ChatContextProvider({
 
  const chatsQuery = query(
  chatsCollection,
- where('participants', 'array-contains', user.id)
+ where('participants', 'array-contains', user.id),
+ orderBy('updatedAt', 'desc')
  );
 
  const unsubscribe = onSnapshot(
  chatsQuery,
  (snapshot) => {
  const chatsData = snapshot.docs.map((doc) => doc.data());
- setChats(chatsData);
+
+ // Sort chats by last message timestamp (most recent first)
+ const sortedChats = chatsData.sort((a, b) => {
+ // If both have lastMessage, sort by timestamp
+ if (a.lastMessage?.timestamp && b.lastMessage?.timestamp) {
+ return b.lastMessage.timestamp.toMillis() - a.lastMessage.timestamp.toMillis();
+ }
+ // If only one has lastMessage, prioritize it
+ if (a.lastMessage?.timestamp && !b.lastMessage?.timestamp) return -1;
+ if (!a.lastMessage?.timestamp && b.lastMessage?.timestamp) return 1;
+ // If neither has lastMessage, sort by updatedAt
+ return b.updatedAt.toMillis() - a.updatedAt.toMillis();
+ });
+
+ setChats(sortedChats);
  setLoading(false);
  },
  (error) => {

platforms/pictique-api/src/services/ChatService.ts

@@ -162,6 +162,11 @@ export class ChatService {
  });
 
  const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+
  console.log("Sent event", `chat:${chatId}`);
  this.eventEmitter.emit(`chat:${chatId}`, [savedMessage]);
 
@@ -280,33 +285,58 @@ export class ChatService {
  page: number;
  totalPages: number;
  }> {
- // First, get the chat IDs that the user is part of
- const [chatIds, total] = await this.chatRepository
+ // Get chats ordered by the most recent message timestamp
+ const queryBuilder = this.chatRepository
  .createQueryBuilder("chat")
- .select(["chat.id", "chat.updatedAt"])
+ .leftJoin("chat.messages", "message")
  .innerJoin("chat.participants", "participants")
  .where("participants.id = :userId", { userId })
- .orderBy("chat.updatedAt", "DESC")
+ .groupBy("chat.id")
+ .addGroupBy("chat.name")
+ .addGroupBy("chat.ename")
+ .addGroupBy("chat.createdAt")
+ .addGroupBy("chat.updatedAt")
+ .orderBy("MAX(message.createdAt)", "DESC")
+ .addOrderBy("chat.createdAt", "DESC"); // Fallback for chats without messages
+
+ // Get total count for pagination
+ const total = await queryBuilder.getCount();
+
+ // Apply pagination
+ const chats = await queryBuilder
  .skip((page - 1) * limit)
  .take(limit)
- .getManyAndCount();
+ .getMany();
 
- // Then, load the full chat data with all relations
- const chats = await this.chatRepository.find({
- where: { id: In(chatIds.map((chat) => chat.id)) },
+ // Load full chat data with all relations for the paginated results
+ const chatsWithRelations = await this.chatRepository.find({
+ where: { id: In(chats.map((chat) => chat.id)) },
  relations: [
  "participants",
  "messages",
  "messages.sender",
  "messages.readStatuses",
  "messages.readStatuses.user",
  ],
- order: { updatedAt: "DESC" },
+ });
+
+ // Sort the chats by latest message timestamp (since we loaded relations, we need to sort again)
+ const sortedChats = chatsWithRelations.sort((a, b) => {
+ const aLatestMessage = a.messages[a.messages.length - 1];
+ const bLatestMessage = b.messages[b.messages.length - 1];
+
+ if (!aLatestMessage && !bLatestMessage) {
+ return b.createdAt.getTime() - a.createdAt.getTime();
+ }
+ if (!aLatestMessage) return 1;
+ if (!bLatestMessage) return -1;
+
+ return bLatestMessage.createdAt.getTime() - aLatestMessage.createdAt.getTime();
  });
 
  // For each chat, get the latest message and its read status
  const chatsWithLatestMessage = await Promise.all(
-chats.map(async (chat) => {
+sortedChats.map(async (chat) => {
  const latestMessage = chat.messages[chat.messages.length - 1];
  if (!latestMessage) {
  return { ...chat, latestMessage: undefined };

platforms/pictique-api/src/services/MessageService.ts

@@ -1,8 +1,10 @@
 import { AppDataSource } from "../database/data-source";
 import { Message } from "../database/entities/Message";
+import { Chat } from "../database/entities/Chat";
 
 export class MessageService {
  public messageRepository = AppDataSource.getRepository(Message);
+ private chatRepository = AppDataSource.getRepository(Chat);
 
  async findById(id: string): Promise<Message | null> {
  return await this.messageRepository.findOneBy({ id });
@@ -17,7 +19,16 @@ export class MessageService {
  isArchived: false
  });
 
- return await this.messageRepository.save(message);
+ const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ const chat = await this.chatRepository.findOneBy({ id: chatId });
+ if (chat) {
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+ }
+
+ return savedMessage;
  }
 
  async createSystemMessage(chatId: string, text: string): Promise<Message> {

platforms/blabsy/firestore.indexes.json

@@ -83,6 +83,20 @@
  "order": "ASCENDING"
  }
  ]
+ },
+ {
+ "collectionGroup": "chats",
+ "queryScope": "COLLECTION",
+ "fields": [
+ {
+ "fieldPath": "participants",
+ "arrayConfig": "CONTAINS"
+ },
+ {
+ "fieldPath": "updatedAt",
+ "order": "DESCENDING"
+ }
+ ]
  }
  ],
  "fieldOverrides": [

platforms/blabsy/src/components/chat/chat-list.tsx

@@ -92,8 +92,8 @@ export function ChatList(): JSX.Element {
  }
 
  return (
- <div className='flex h-full flex-col gap-4'>
- <div className='flex h-full flex-col gap-2 overflow-y-auto p-4'>
+ <div className='flex h-full flex-col'>
+ <div className='flex-1 overflow-y-auto p-4 space-y-2'>
  {chats.map((chat) => {
  const otherParticipant = chat.participants.find(
  (p) => p !== user?.id
@@ -160,13 +160,15 @@ export function ChatList(): JSX.Element {
  );
  })}
  </div>
- <button
- type='button'
- onClick={() => setOpenCreateNewChatModal(true)}
- className='flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90 mx-4 mb-4'
- >
- New Chat
- </button>
+ <div className='flex-shrink-0 p-4'>
+ <button
+ type='button'
+ onClick={() => setOpenCreateNewChatModal(true)}
+ className='w-full flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90'
+ >
+ New Chat
+ </button>
+ </div>
  <AddMembers
  open={openCreateNewChatModal}
  onClose={() => setOpenCreateNewChatModal(false)}

platforms/blabsy/src/components/chat/chat.tsx

@@ -5,7 +5,7 @@ export function Chat(): JSX.Element {
  return (
  <main className='min-h-full w-full max-w-5xl pt-8'>
  <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
- <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+ <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
  <ChatList />
  </div>
  <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>

platforms/blabsy/src/lib/context/chat-context.tsx

@@ -94,14 +94,29 @@ export function ChatContextProvider({
 
  const chatsQuery = query(
  chatsCollection,
- where('participants', 'array-contains', user.id)
+ where('participants', 'array-contains', user.id),
+ orderBy('updatedAt', 'desc')
  );
 
  const unsubscribe = onSnapshot(
  chatsQuery,
  (snapshot) => {
  const chatsData = snapshot.docs.map((doc) => doc.data());
- setChats(chatsData);
+
+ // Sort chats by last message timestamp (most recent first)
+ const sortedChats = chatsData.sort((a, b) => {
+ // If both have lastMessage, sort by timestamp
+ if (a.lastMessage?.timestamp && b.lastMessage?.timestamp) {
+ return b.lastMessage.timestamp.toMillis() - a.lastMessage.timestamp.toMillis();
+ }
+ // If only one has lastMessage, prioritize it
+ if (a.lastMessage?.timestamp && !b.lastMessage?.timestamp) return -1;
+ if (!a.lastMessage?.timestamp && b.lastMessage?.timestamp) return 1;
+ // If neither has lastMessage, sort by updatedAt
+ return b.updatedAt.toMillis() - a.updatedAt.toMillis();
+ });
+
+ setChats(sortedChats);
  setLoading(false);
  },
  (error) => {

platforms/pictique-api/src/services/ChatService.ts

@@ -162,6 +162,11 @@ export class ChatService {
  });
 
  const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+
  console.log("Sent event", `chat:${chatId}`);
  this.eventEmitter.emit(`chat:${chatId}`, [savedMessage]);
 
@@ -280,33 +285,58 @@ export class ChatService {
  page: number;
  totalPages: number;
  }> {
- // First, get the chat IDs that the user is part of
- const [chatIds, total] = await this.chatRepository
+ // Get chats ordered by the most recent message timestamp
+ const queryBuilder = this.chatRepository
  .createQueryBuilder("chat")
- .select(["chat.id", "chat.updatedAt"])
+ .leftJoin("chat.messages", "message")
  .innerJoin("chat.participants", "participants")
  .where("participants.id = :userId", { userId })
- .orderBy("chat.updatedAt", "DESC")
+ .groupBy("chat.id")
+ .addGroupBy("chat.name")
+ .addGroupBy("chat.ename")
+ .addGroupBy("chat.createdAt")
+ .addGroupBy("chat.updatedAt")
+ .orderBy("MAX(message.createdAt)", "DESC")
+ .addOrderBy("chat.createdAt", "DESC"); // Fallback for chats without messages
+
+ // Get total count for pagination
+ const total = await queryBuilder.getCount();
+
+ // Apply pagination
+ const chats = await queryBuilder
  .skip((page - 1) * limit)
  .take(limit)
- .getManyAndCount();
+ .getMany();
 
- // Then, load the full chat data with all relations
- const chats = await this.chatRepository.find({
- where: { id: In(chatIds.map((chat) => chat.id)) },
+ // Load full chat data with all relations for the paginated results
+ const chatsWithRelations = await this.chatRepository.find({
+ where: { id: In(chats.map((chat) => chat.id)) },
  relations: [
  "participants",
  "messages",
  "messages.sender",
  "messages.readStatuses",
  "messages.readStatuses.user",
  ],
- order: { updatedAt: "DESC" },
+ });
+
+ // Sort the chats by latest message timestamp (since we loaded relations, we need to sort again)
+ const sortedChats = chatsWithRelations.sort((a, b) => {
+ const aLatestMessage = a.messages[a.messages.length - 1];
+ const bLatestMessage = b.messages[b.messages.length - 1];
+
+ if (!aLatestMessage && !bLatestMessage) {
+ return b.createdAt.getTime() - a.createdAt.getTime();
+ }
+ if (!aLatestMessage) return 1;
+ if (!bLatestMessage) return -1;
+
+ return bLatestMessage.createdAt.getTime() - aLatestMessage.createdAt.getTime();
  });
 
  // For each chat, get the latest message and its read status
  const chatsWithLatestMessage = await Promise.all(
-chats.map(async (chat) => {
+sortedChats.map(async (chat) => {
  const latestMessage = chat.messages[chat.messages.length - 1];
  if (!latestMessage) {
  return { ...chat, latestMessage: undefined };

platforms/pictique-api/src/services/MessageService.ts

@@ -1,8 +1,10 @@
 import { AppDataSource } from "../database/data-source";
 import { Message } from "../database/entities/Message";
+import { Chat } from "../database/entities/Chat";
 
 export class MessageService {
  public messageRepository = AppDataSource.getRepository(Message);
+ private chatRepository = AppDataSource.getRepository(Chat);
 
  async findById(id: string): Promise<Message | null> {
  return await this.messageRepository.findOneBy({ id });
@@ -17,7 +19,16 @@ export class MessageService {
  isArchived: false
  });
 
- return await this.messageRepository.save(message);
+ const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ const chat = await this.chatRepository.findOneBy({ id: chatId });
+ if (chat) {
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+ }
+
+ return savedMessage;
  }
 
  async createSystemMessage(chatId: string, text: string): Promise<Message> {

platforms/blabsy/firestore.indexes.json

@@ -83,6 +83,20 @@
  "order": "ASCENDING"
  }
  ]
+ },
+ {
+ "collectionGroup": "chats",
+ "queryScope": "COLLECTION",
+ "fields": [
+ {
+ "fieldPath": "participants",
+ "arrayConfig": "CONTAINS"
+ },
+ {
+ "fieldPath": "updatedAt",
+ "order": "DESCENDING"
+ }
+ ]
  }
  ],
  "fieldOverrides": [

platforms/blabsy/src/components/chat/chat-list.tsx

@@ -92,8 +92,8 @@ export function ChatList(): JSX.Element {
  }
 
  return (
- <div className='flex h-full flex-col gap-4'>
- <div className='flex h-full flex-col gap-2 overflow-y-auto p-4'>
+ <div className='flex h-full flex-col'>
+ <div className='flex-1 overflow-y-auto p-4 space-y-2'>
  {chats.map((chat) => {
  const otherParticipant = chat.participants.find(
  (p) => p !== user?.id
@@ -160,13 +160,15 @@ export function ChatList(): JSX.Element {
  );
  })}
  </div>
- <button
- type='button'
- onClick={() => setOpenCreateNewChatModal(true)}
- className='flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90 mx-4 mb-4'
- >
- New Chat
- </button>
+ <div className='flex-shrink-0 p-4'>
+ <button
+ type='button'
+ onClick={() => setOpenCreateNewChatModal(true)}
+ className='w-full flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90'
+ >
+ New Chat
+ </button>
+ </div>
  <AddMembers
  open={openCreateNewChatModal}
  onClose={() => setOpenCreateNewChatModal(false)}

platforms/blabsy/src/components/chat/chat.tsx

@@ -5,7 +5,7 @@ export function Chat(): JSX.Element {
  return (
  <main className='min-h-full w-full max-w-5xl pt-8'>
  <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
- <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+ <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
  <ChatList />
  </div>
  <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>

platforms/blabsy/src/lib/context/chat-context.tsx

@@ -94,14 +94,29 @@ export function ChatContextProvider({
 
  const chatsQuery = query(
  chatsCollection,
- where('participants', 'array-contains', user.id)
+ where('participants', 'array-contains', user.id),
+ orderBy('updatedAt', 'desc')
  );
 
  const unsubscribe = onSnapshot(
  chatsQuery,
  (snapshot) => {
  const chatsData = snapshot.docs.map((doc) => doc.data());
- setChats(chatsData);
+
+ // Sort chats by last message timestamp (most recent first)
+ const sortedChats = chatsData.sort((a, b) => {
+ // If both have lastMessage, sort by timestamp
+ if (a.lastMessage?.timestamp && b.lastMessage?.timestamp) {
+ return b.lastMessage.timestamp.toMillis() - a.lastMessage.timestamp.toMillis();
+ }
+ // If only one has lastMessage, prioritize it
+ if (a.lastMessage?.timestamp && !b.lastMessage?.timestamp) return -1;
+ if (!a.lastMessage?.timestamp && b.lastMessage?.timestamp) return 1;
+ // If neither has lastMessage, sort by updatedAt
+ return b.updatedAt.toMillis() - a.updatedAt.toMillis();
+ });
+
+ setChats(sortedChats);
  setLoading(false);
  },
  (error) => {

platforms/pictique-api/src/services/ChatService.ts

@@ -162,6 +162,11 @@ export class ChatService {
  });
 
  const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+
  console.log("Sent event", `chat:${chatId}`);
  this.eventEmitter.emit(`chat:${chatId}`, [savedMessage]);
 
@@ -280,33 +285,58 @@ export class ChatService {
  page: number;
  totalPages: number;
  }> {
- // First, get the chat IDs that the user is part of
- const [chatIds, total] = await this.chatRepository
+ // Get chats ordered by the most recent message timestamp
+ const queryBuilder = this.chatRepository
  .createQueryBuilder("chat")
- .select(["chat.id", "chat.updatedAt"])
+ .leftJoin("chat.messages", "message")
  .innerJoin("chat.participants", "participants")
  .where("participants.id = :userId", { userId })
- .orderBy("chat.updatedAt", "DESC")
+ .groupBy("chat.id")
+ .addGroupBy("chat.name")
+ .addGroupBy("chat.ename")
+ .addGroupBy("chat.createdAt")
+ .addGroupBy("chat.updatedAt")
+ .orderBy("MAX(message.createdAt)", "DESC")
+ .addOrderBy("chat.createdAt", "DESC"); // Fallback for chats without messages
+
+ // Get total count for pagination
+ const total = await queryBuilder.getCount();
+
+ // Apply pagination
+ const chats = await queryBuilder
  .skip((page - 1) * limit)
  .take(limit)
- .getManyAndCount();
+ .getMany();
 
- // Then, load the full chat data with all relations
- const chats = await this.chatRepository.find({
- where: { id: In(chatIds.map((chat) => chat.id)) },
+ // Load full chat data with all relations for the paginated results
+ const chatsWithRelations = await this.chatRepository.find({
+ where: { id: In(chats.map((chat) => chat.id)) },
  relations: [
  "participants",
  "messages",
  "messages.sender",
  "messages.readStatuses",
  "messages.readStatuses.user",
  ],
- order: { updatedAt: "DESC" },
+ });
+
+ // Sort the chats by latest message timestamp (since we loaded relations, we need to sort again)
+ const sortedChats = chatsWithRelations.sort((a, b) => {
+ const aLatestMessage = a.messages[a.messages.length - 1];
+ const bLatestMessage = b.messages[b.messages.length - 1];
+
+ if (!aLatestMessage && !bLatestMessage) {
+ return b.createdAt.getTime() - a.createdAt.getTime();
+ }
+ if (!aLatestMessage) return 1;
+ if (!bLatestMessage) return -1;
+
+ return bLatestMessage.createdAt.getTime() - aLatestMessage.createdAt.getTime();
  });
 
  // For each chat, get the latest message and its read status
  const chatsWithLatestMessage = await Promise.all(
-chats.map(async (chat) => {
+sortedChats.map(async (chat) => {
  const latestMessage = chat.messages[chat.messages.length - 1];
  if (!latestMessage) {
  return { ...chat, latestMessage: undefined };

platforms/pictique-api/src/services/MessageService.ts

@@ -1,8 +1,10 @@
 import { AppDataSource } from "../database/data-source";
 import { Message } from "../database/entities/Message";
+import { Chat } from "../database/entities/Chat";
 
 export class MessageService {
  public messageRepository = AppDataSource.getRepository(Message);
+ private chatRepository = AppDataSource.getRepository(Chat);
 
  async findById(id: string): Promise<Message | null> {
  return await this.messageRepository.findOneBy({ id });
@@ -17,7 +19,16 @@ export class MessageService {
  isArchived: false
  });
 
- return await this.messageRepository.save(message);
+ const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ const chat = await this.chatRepository.findOneBy({ id: chatId });
+ if (chat) {
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+ }
+
+ return savedMessage;
  }
 
  async createSystemMessage(chatId: string, text: string): Promise<Message> {

platforms/blabsy/firestore.indexes.json

@@ -83,6 +83,20 @@
  "order": "ASCENDING"
  }
  ]
+ },
+ {
+ "collectionGroup": "chats",
+ "queryScope": "COLLECTION",
+ "fields": [
+ {
+ "fieldPath": "participants",
+ "arrayConfig": "CONTAINS"
+ },
+ {
+ "fieldPath": "updatedAt",
+ "order": "DESCENDING"
+ }
+ ]
  }
  ],
  "fieldOverrides": [

platforms/blabsy/src/components/chat/chat-list.tsx

@@ -92,8 +92,8 @@ export function ChatList(): JSX.Element {
  }
 
  return (
- <div className='flex h-full flex-col gap-4'>
- <div className='flex h-full flex-col gap-2 overflow-y-auto p-4'>
+ <div className='flex h-full flex-col'>
+ <div className='flex-1 overflow-y-auto p-4 space-y-2'>
  {chats.map((chat) => {
  const otherParticipant = chat.participants.find(
  (p) => p !== user?.id
@@ -160,13 +160,15 @@ export function ChatList(): JSX.Element {
  );
  })}
  </div>
- <button
- type='button'
- onClick={() => setOpenCreateNewChatModal(true)}
- className='flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90 mx-4 mb-4'
- >
- New Chat
- </button>
+ <div className='flex-shrink-0 p-4'>
+ <button
+ type='button'
+ onClick={() => setOpenCreateNewChatModal(true)}
+ className='w-full flex items-center justify-center gap-3 bg-main-accent rounded-lg p-3 transition-colors hover:brightness-90'
+ >
+ New Chat
+ </button>
+ </div>
  <AddMembers
  open={openCreateNewChatModal}
  onClose={() => setOpenCreateNewChatModal(false)}

platforms/blabsy/src/components/chat/chat.tsx

@@ -5,7 +5,7 @@ export function Chat(): JSX.Element {
  return (
  <main className='min-h-full w-full max-w-5xl pt-8'>
  <div className='grid h-[calc(100vh-4rem)] grid-cols-1 gap-4 md:grid-cols-[350px_1fr]'>
- <div className='max-h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>
+ <div className='h-full rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black flex flex-col'>
  <ChatList />
  </div>
  <div className='h-[calc(100vh-4rem)] rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black'>

platforms/blabsy/src/lib/context/chat-context.tsx

@@ -94,14 +94,29 @@ export function ChatContextProvider({
 
  const chatsQuery = query(
  chatsCollection,
- where('participants', 'array-contains', user.id)
+ where('participants', 'array-contains', user.id),
+ orderBy('updatedAt', 'desc')
  );
 
  const unsubscribe = onSnapshot(
  chatsQuery,
  (snapshot) => {
  const chatsData = snapshot.docs.map((doc) => doc.data());
- setChats(chatsData);
+
+ // Sort chats by last message timestamp (most recent first)
+ const sortedChats = chatsData.sort((a, b) => {
+ // If both have lastMessage, sort by timestamp
+ if (a.lastMessage?.timestamp && b.lastMessage?.timestamp) {
+ return b.lastMessage.timestamp.toMillis() - a.lastMessage.timestamp.toMillis();
+ }
+ // If only one has lastMessage, prioritize it
+ if (a.lastMessage?.timestamp && !b.lastMessage?.timestamp) return -1;
+ if (!a.lastMessage?.timestamp && b.lastMessage?.timestamp) return 1;
+ // If neither has lastMessage, sort by updatedAt
+ return b.updatedAt.toMillis() - a.updatedAt.toMillis();
+ });
+
+ setChats(sortedChats);
  setLoading(false);
  },
  (error) => {

platforms/pictique-api/src/services/ChatService.ts

@@ -162,6 +162,11 @@ export class ChatService {
  });
 
  const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+
  console.log("Sent event", `chat:${chatId}`);
  this.eventEmitter.emit(`chat:${chatId}`, [savedMessage]);
 
@@ -280,33 +285,58 @@ export class ChatService {
  page: number;
  totalPages: number;
  }> {
- // First, get the chat IDs that the user is part of
- const [chatIds, total] = await this.chatRepository
+ // Get chats ordered by the most recent message timestamp
+ const queryBuilder = this.chatRepository
  .createQueryBuilder("chat")
- .select(["chat.id", "chat.updatedAt"])
+ .leftJoin("chat.messages", "message")
  .innerJoin("chat.participants", "participants")
  .where("participants.id = :userId", { userId })
- .orderBy("chat.updatedAt", "DESC")
+ .groupBy("chat.id")
+ .addGroupBy("chat.name")
+ .addGroupBy("chat.ename")
+ .addGroupBy("chat.createdAt")
+ .addGroupBy("chat.updatedAt")
+ .orderBy("MAX(message.createdAt)", "DESC")
+ .addOrderBy("chat.createdAt", "DESC"); // Fallback for chats without messages
+
+ // Get total count for pagination
+ const total = await queryBuilder.getCount();
+
+ // Apply pagination
+ const chats = await queryBuilder
  .skip((page - 1) * limit)
  .take(limit)
- .getManyAndCount();
+ .getMany();
 
- // Then, load the full chat data with all relations
- const chats = await this.chatRepository.find({
- where: { id: In(chatIds.map((chat) => chat.id)) },
+ // Load full chat data with all relations for the paginated results
+ const chatsWithRelations = await this.chatRepository.find({
+ where: { id: In(chats.map((chat) => chat.id)) },
  relations: [
  "participants",
  "messages",
  "messages.sender",
  "messages.readStatuses",
  "messages.readStatuses.user",
  ],
- order: { updatedAt: "DESC" },
+ });
+
+ // Sort the chats by latest message timestamp (since we loaded relations, we need to sort again)
+ const sortedChats = chatsWithRelations.sort((a, b) => {
+ const aLatestMessage = a.messages[a.messages.length - 1];
+ const bLatestMessage = b.messages[b.messages.length - 1];
+
+ if (!aLatestMessage && !bLatestMessage) {
+ return b.createdAt.getTime() - a.createdAt.getTime();
+ }
+ if (!aLatestMessage) return 1;
+ if (!bLatestMessage) return -1;
+
+ return bLatestMessage.createdAt.getTime() - aLatestMessage.createdAt.getTime();
  });
 
  // For each chat, get the latest message and its read status
  const chatsWithLatestMessage = await Promise.all(
-chats.map(async (chat) => {
+sortedChats.map(async (chat) => {
  const latestMessage = chat.messages[chat.messages.length - 1];
  if (!latestMessage) {
  return { ...chat, latestMessage: undefined };

platforms/pictique-api/src/services/MessageService.ts

@@ -1,8 +1,10 @@
 import { AppDataSource } from "../database/data-source";
 import { Message } from "../database/entities/Message";
+import { Chat } from "../database/entities/Chat";
 
 export class MessageService {
  public messageRepository = AppDataSource.getRepository(Message);
+ private chatRepository = AppDataSource.getRepository(Chat);
 
  async findById(id: string): Promise<Message | null> {
  return await this.messageRepository.findOneBy({ id });
@@ -17,7 +19,16 @@ export class MessageService {
  isArchived: false
  });
 
- return await this.messageRepository.save(message);
+ const savedMessage = await this.messageRepository.save(message);
+
+ // Update the chat's updatedAt timestamp to reflect the latest message
+ const chat = await this.chatRepository.findOneBy({ id: chatId });
+ if (chat) {
+ chat.updatedAt = new Date();
+ await this.chatRepository.save(chat);
+ }
+
+ return savedMessage;
  }
 
  async createSystemMessage(chatId: string, text: string): Promise<Message> {