feat: chat pagination

[coodos]

Description of change

Issue Number

Type of change

• Breaking (any change that would cause existing functionality to not work as expected)
• New (a change which implements a new feature)
• Update (a change which updates existing functionality)
• Fix (a change which fixes an issue)
• Docs (changes to the documentation)
• Chore (refactoring, build scripts or anything else that isn't user-facing)

How the change has been tested

Change checklist

• I have ensured that the CI Checks pass locally
• I have removed any unnecessary logic
• My code is well documented
• I have signed my commits
• My code follows the pattern of the application
• I have self reviewed my code

Summary by CodeRabbit

• New Features

  • Added pagination support for the chat list with Previous/Next navigation and page information display.
  • Added loading indicators while fetching chats.

• Improvements

  • Chat list now automatically sorts by most recent activity and message timestamps.
  • Improved chat interface layout and panel sizing for better organization.
  • Enhanced accessibility with better labels and ARIA attributes.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This pull request introduces message pagination with client-side loading, updates chat timestamps on message creation, refactors the backend chat query to use a single combined query with ordering by latest activity, reorganizes chat list UI layouts, and adds supporting Firestore indexes for efficient chat queries.

Changes

Cohort / File(s)	Summary
Database Configuration platforms/blabsy/firestore.indexes.json	Added new Firestore index for chats collectionGroup with participants (arrayConfig: CONTAINS) and updatedAt (order: DESCENDING) fields to support efficient chat queries.
Frontend Chat Layout Components platforms/blabsy/src/components/chat/chat-list.tsx, platforms/blabsy/src/components/chat/chat.tsx	Restructured chat list layout with cleaner gap handling and scrolling area; moved "New Chat" button to full-width wrapper. Left panel container changed from max-h-full to h-full with flex column layout.
Frontend Chat Context & Sorting platforms/blabsy/src/lib/context/chat-context.tsx	Added server-side sorting by updatedAt and client-side multi-criteria sorting by lastMessage timestamp (if available) or updatedAt, ensuring chats display in order of recent activity.
Backend Chat Service Refactoring platforms/pictique-api/src/services/ChatService.ts	Refactored getUserChats from two-step ID fetch to single query with joins and grouping; added explicit post-processing sorting by latest message timestamp; includes paginated results with total count and full relation loading.
Backend Message Service platforms/pictique-api/src/services/MessageService.ts	Added chatRepository field; on message creation, now updates related chat's updatedAt timestamp and persists the chat to reflect latest activity.
Frontend Pagination UI platforms/pictique/src/routes/(protected)/messages/+page.svelte	Implemented client-side pagination with loadMessages(page, append), pagination state management (currentPage, totalPages, hasMorePages), navigation controls (Previous/Next/GoTo), loading indicator, and page information display.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Frontend as Frontend<br/>(+page.svelte)
    participant Backend as Backend<br/>(ChatService)
    participant DB as Database

    User->>Frontend: Load messages (page 1)
    Frontend->>Backend: getUserChats(userId, page)
    Backend->>DB: Query chats with<br/>joins, grouping,<br/>ordering by latest msg
    DB-->>Backend: Return paginated<br/>chats + total count
    Backend->>Backend: Load full relations<br/>Sort by latest<br/>message timestamp
    Backend->>Backend: Augment with<br/>isRead flag per chat
    Backend-->>Frontend: Return chats +<br/>pagination metadata
    Frontend->>Frontend: Store pagination state<br/>(currentPage, totalPages)
    Frontend-->>User: Display chats +<br/>pagination controls

    User->>Frontend: Click Next page
    Frontend->>Backend: getUserChats(userId, page 2, append=true)
    Backend-->>Frontend: Return next batch
    Frontend->>Frontend: Append to messages
    Frontend-->>User: Update UI with<br/>combined chats

Loading

sequenceDiagram
    participant User
    participant Frontend as Frontend<br/>(MessageService)
    participant ChatSvc as ChatService
    participant DB as Database

    User->>Frontend: Send message
    Frontend->>Frontend: Create Message record
    Frontend->>DB: Save Message
    DB-->>Frontend: Message saved
    Frontend->>ChatSvc: Update chat.updatedAt
    ChatSvc->>DB: Fetch Chat by ID
    DB-->>ChatSvc: Chat record
    ChatSvc->>ChatSvc: Set updatedAt<br/>to current time
    ChatSvc->>DB: Save Chat
    DB-->>ChatSvc: Chat updated
    ChatSvc-->>Frontend: Complete
    Frontend-->>User: Message sent

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~30 minutes

The changes span multiple domains (database configuration, backend services, frontend components, and pagination UI) with varying complexity. The backend ChatService refactoring introduces a new query pattern with explicit sorting logic, while frontend changes include state management and pagination controls. Layout adjustments are straightforward, but the heterogeneous nature of changes across services and components requires careful review of integration points and data flow consistency.

Possibly related PRs

• feat: blabsy active chat indcator #320 — Both PRs modify chat-list.tsx layout and styling; this PR restructures layout/button placement while the retrieved PR adjusts selected/hover styling.
• fix: fixed blabsy chat overflow. #285 — Both PRs adjust chat.tsx container sizing (height and spacing classes) to address overflow and vertical stacking behavior.

Suggested reviewers

• sosweetham

Poem

🐰 Hops through chats, newest first,
Pagination quenches our sorting thirst,
Messages stamp the time they're sent,
Timestamps flow, and queries bent,
Layouts bloom, full-width and bright! ✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/pagination-pictique

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fafe04b and d1f3af2.

📒 Files selected for processing (7)

• platforms/blabsy/firestore.indexes.json (1 hunks)
• platforms/blabsy/src/components/chat/chat-list.tsx (2 hunks)
• platforms/blabsy/src/components/chat/chat.tsx (1 hunks)
• platforms/blabsy/src/lib/context/chat-context.tsx (1 hunks)
• platforms/pictique-api/src/services/ChatService.ts (2 hunks)
• platforms/pictique-api/src/services/MessageService.ts (2 hunks)
• platforms/pictique/src/routes/(protected)/messages/+page.svelte (12 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}