refactor hooks, bump frontend dependencies and add conversation link#237
refactor hooks, bump frontend dependencies and add conversation link#237
Conversation
…ncies and add conversation link
WalkthroughThis change refactors and reorganizes frontend hooks and components, moving several participant, announcement, and authentication hooks into more domain-specific directories. It deletes resource-related hooks and resource overview/analysis routes, updates import paths throughout, and adjusts some database schema metadata. Dependency versions are bumped, and a new pnpm workspace config is added. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant AuthHook as useAuthenticated
participant Directus
participant LogoutMutation
User->>AuthHook: Mounts component
AuthHook->>Directus: directus.refresh()
alt Refresh succeeds
Directus-->>AuthHook: Success
AuthHook-->>User: Set isAuthenticated = true
else Refresh fails
Directus-->>AuthHook: Error
AuthHook->>LogoutMutation: logout({ redirect, reason })
LogoutMutation-->>User: Redirect/log out
end
sequenceDiagram
participant User
participant AnnouncementDrawerHook as useAnnouncementDrawer
participant SessionStorage
User->>AnnouncementDrawerHook: Mounts component
AnnouncementDrawerHook->>SessionStorage: Set isOpen = false (on mount)
User->>AnnouncementDrawerHook: open/close/toggle
AnnouncementDrawerHook->>SessionStorage: Update isOpen
sequenceDiagram
participant Component
participant ParticipantHooks
participant API
participant Directus
Component->>ParticipantHooks: useParticipantProjectById(projectId)
ParticipantHooks->>API: getParticipantProjectById(projectId)
API->>Directus: Fetch project data
Directus-->>API: Return data
API-->>ParticipantHooks: Data
ParticipantHooks-->>Component: Data
Component->>ParticipantHooks: useConversationChunksQuery(projectId, conversationId)
ParticipantHooks->>API: getParticipantConversationChunks(projectId, conversationId)
API->>Directus: Fetch chunks
Directus-->>API: Return chunks
API-->>ParticipantHooks: Chunks
ParticipantHooks-->>Component: Chunks
Estimated code review effort3 (~45 minutes) Suggested labels
Suggested reviewers
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Bug: Single Chunk Conversations Lack Summary Display
The summary section is no longer displayed for conversations with a single chunk due to an unintentional change in the display condition from conversationChunksQuery.data?.length > 0 to conversationChunksQuery.data?.length > 1.
echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx#L59-L60
Was this report helpful? Give feedback by reacting with 👍 or 👎
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (3)
echo/frontend/src/Router.tsx (1)
170-190: Add legacy redirect for deleted “resource” routesWe’ve confirmed there are no lingering imports or router entries for
ProjectResourceOverviewRoute/ProjectResourceAnalysisRoute, but to avoid 404s on any old bookmarks, please insert a lightweight redirect stub inecho/frontend/src/Router.tsx.• Location: within the
childrenarray under<ProjectOverviewLayout />routes
• Diff to apply:// … existing children + // legacy redirects – remove after 2025-12-31 + { + path: "resource/*", + element: <Navigate to="../library" replace />, + }, // … remaining routesLGTM – this ensures smooth UX and prevents support tickets.
echo/frontend/src/components/quote/Quote.tsx (1)
152-154: Broken type-cast:conversation_idisn’t aConversationobject
conversation_idis an ID string, yet it’s cast toConversationand dereferenced for.participant_name, which will beundefinedat runtime. Users will always see the fallback text.- {((data.segment as ConversationSegment).conversation_id as Conversation) - .participant_name ?? "View Conversation"} + {/* TODO: fetch conversation meta or keep generic label */} + {"View Conversation"}Either fetch the conversation to show the participant name or drop the cast.
echo/frontend/src/routes/participant/ParticipantPostConversation.tsx (1)
40-42:isCheckingEmailnever flips – dead-stateThe flag is referenced in several disabled/loading props but never updated, so the UI can’t reflect email-checking progress.
Suggested quick fix:
- const [isCheckingEmail, setIsCheckingEmail] = useState(false); + const [isCheckingEmail, setIsCheckingEmail] = useState(false); + + // inside validate/add flow, toggle while performing async check + const checkEmail = async (address: string) => { + setIsCheckingEmail(true); + // …actual validation logic… + setIsCheckingEmail(false); + };Alternatively, remove the prop wiring if no async check is intended.
Also applies to: 170-192
♻️ Duplicate comments (1)
echo/frontend/src/components/announcement/Announcements.tsx (1)
24-26: Same deep-path concern as aboveDuplicated note: a barrel re-export keeps call-sites stable and trims relative noise in import lines.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
⛔ Files ignored due to path filters (1)
echo/frontend/pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (34)
echo/directus/sync/snapshot/fields/conversation_link/source_conversation_id.json(1 hunks)echo/directus/sync/snapshot/fields/conversation_link/target_conversation_id.json(1 hunks)echo/directus/sync/snapshot/relations/conversation_link/source_conversation_id.json(1 hunks)echo/frontend/package.json(3 hunks)echo/frontend/pnpm-workspace.yaml(1 hunks)echo/frontend/src/Router.tsx(1 hunks)echo/frontend/src/components/announcement/AnnouncementIcon.tsx(1 hunks)echo/frontend/src/components/announcement/Announcements.tsx(1 hunks)echo/frontend/src/components/announcement/TopAnnouncementBar.tsx(1 hunks)echo/frontend/src/components/announcement/hooks/index.ts(2 hunks)echo/frontend/src/components/announcement/hooks/useProcessedAnnouncements.ts(1 hunks)echo/frontend/src/components/auth/hooks/index.ts(2 hunks)echo/frontend/src/components/common/Protected.tsx(1 hunks)echo/frontend/src/components/layout/AuthLayout.tsx(1 hunks)echo/frontend/src/components/layout/Header.tsx(1 hunks)echo/frontend/src/components/layout/ProjectLayout.tsx(1 hunks)echo/frontend/src/components/participant/ParticipantBody.tsx(2 hunks)echo/frontend/src/components/participant/hooks/index.ts(2 hunks)echo/frontend/src/components/quote/Quote.tsx(1 hunks)echo/frontend/src/components/resource/hooks/index.ts(0 hunks)echo/frontend/src/components/view/View.tsx(1 hunks)echo/frontend/src/hooks/useAnnouncementDrawer.tsx(0 hunks)echo/frontend/src/hooks/useAuthenticated.tsx(0 hunks)echo/frontend/src/lib/api.ts(1 hunks)echo/frontend/src/lib/directus.ts(1 hunks)echo/frontend/src/lib/participantQuery.ts(0 hunks)echo/frontend/src/routes/participant/ParticipantConversation.tsx(2 hunks)echo/frontend/src/routes/participant/ParticipantPostConversation.tsx(1 hunks)echo/frontend/src/routes/participant/ParticipantStart.tsx(1 hunks)echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx(7 hunks)echo/frontend/src/routes/project/library/ProjectLibraryAspect.tsx(1 hunks)echo/frontend/src/routes/project/library/ProjectLibraryView.tsx(1 hunks)echo/frontend/src/routes/project/resource/ProjectResourceAnalysis.tsx(0 hunks)echo/frontend/src/routes/project/resource/ProjectResourceOverview.tsx(0 hunks)
🧠 Learnings (16)
📓 Common learnings
Learnt from: ussaama
PR: Dembrane/echo#224
File: echo/frontend/src/components/report/CreateReportForm.tsx:97-155
Timestamp: 2025-07-17T15:57:51.295Z
Learning: In echo/frontend/src/components/report/CreateReportForm.tsx, the conversation status section should only be displayed when there are pending conversations (conversationCounts.pending !== 0). When all conversations are processed, no status information should be shown to keep the UI minimal and clean.
echo/frontend/src/components/announcement/Announcements.tsx (2)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
echo/frontend/src/components/auth/hooks/index.ts (2)
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
echo/directus/sync/snapshot/fields/conversation_link/source_conversation_id.json (1)
Learnt from: spashii
PR: #142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with id properties (e.g., conversation_id: { id: conversationId } as Conversation) rather than direct ID values, even though this appears redundant.
echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx (1)
Learnt from: ussaama
PR: #224
File: echo/frontend/src/components/report/CreateReportForm.tsx:97-155
Timestamp: 2025-07-17T15:57:51.295Z
Learning: In echo/frontend/src/components/report/CreateReportForm.tsx, the conversation status section should only be displayed when there are pending conversations (conversationCounts.pending !== 0). When all conversations are processed, no status information should be shown to keep the UI minimal and clean.
echo/directus/sync/snapshot/fields/conversation_link/target_conversation_id.json (1)
Learnt from: spashii
PR: #142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with id properties (e.g., conversation_id: { id: conversationId } as Conversation) rather than direct ID values, even though this appears redundant.
echo/frontend/src/lib/api.ts (3)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/hooks/index.ts:23-36
Timestamp: 2025-07-03T13:34:59.482Z
Learning: In the echo frontend codebase, using @ts-ignore for Directus SDK filter type issues is acceptable and preferred over extending types or using workarounds. This applies specifically to date comparisons and other filter operations where the SDK types may not be perfectly aligned.
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:10-15
Timestamp: 2025-06-16T11:48:51.114Z
Learning: In echo/frontend project, ussaama prefers to defer import refactoring (like grouping config imports under a namespace) until the import list grows significantly, following a pragmatic approach to technical debt management.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
echo/directus/sync/snapshot/relations/conversation_link/source_conversation_id.json (1)
Learnt from: spashii
PR: #142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with id properties (e.g., conversation_id: { id: conversationId } as Conversation) rather than direct ID values, even though this appears redundant.
echo/frontend/src/components/announcement/hooks/useProcessedAnnouncements.ts (2)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
echo/frontend/src/components/announcement/TopAnnouncementBar.tsx (3)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
echo/frontend/src/components/announcement/AnnouncementIcon.tsx (2)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
echo/frontend/src/lib/directus.ts (1)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
echo/frontend/pnpm-workspace.yaml (1)
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:10-15
Timestamp: 2025-06-16T11:48:51.114Z
Learning: In echo/frontend project, ussaama prefers to defer import refactoring (like grouping config imports under a namespace) until the import list grows significantly, following a pragmatic approach to technical debt management.
echo/frontend/src/components/announcement/hooks/index.ts (4)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
Learnt from: ussaama
PR: #90
File: echo/frontend/src/routes/participant/ParticipantPostConversation.tsx:86-99
Timestamp: 2025-03-31T10:39:20.458Z
Learning: In React components with debounced functions using setTimeout, two types of cleanup are recommended: 1) Clearing timeouts between function calls and 2) Using useEffect cleanup function to clear timeouts when the component unmounts.
echo/frontend/src/components/participant/ParticipantBody.tsx (1)
Learnt from: ussaama
PR: #224
File: echo/frontend/src/components/report/CreateReportForm.tsx:97-155
Timestamp: 2025-07-17T15:57:51.295Z
Learning: In echo/frontend/src/components/report/CreateReportForm.tsx, the conversation status section should only be displayed when there are pending conversations (conversationCounts.pending !== 0). When all conversations are processed, no status information should be shown to keep the UI minimal and clean.
echo/frontend/src/components/participant/hooks/index.ts (2)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: spashii
PR: #142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with id properties (e.g., conversation_id: { id: conversationId } as Conversation) rather than direct ID values, even though this appears redundant.
🧬 Code Graph Analysis (1)
echo/frontend/src/components/participant/hooks/index.ts (2)
echo/frontend/src/lib/api.ts (4)
getParticipantProjectById(34-38)getParticipantTutorialCardsBySlug(46-83)getParticipantConversationById(40-44)getParticipantConversationChunks(85-92)echo/frontend/src/lib/directus.ts (1)
directus(6-14)
💤 Files with no reviewable changes (6)
- echo/frontend/src/components/resource/hooks/index.ts
- echo/frontend/src/routes/project/resource/ProjectResourceAnalysis.tsx
- echo/frontend/src/hooks/useAnnouncementDrawer.tsx
- echo/frontend/src/hooks/useAuthenticated.tsx
- echo/frontend/src/lib/participantQuery.ts
- echo/frontend/src/routes/project/resource/ProjectResourceOverview.tsx
🧰 Additional context used
🧠 Learnings (16)
📓 Common learnings
Learnt from: ussaama
PR: Dembrane/echo#224
File: echo/frontend/src/components/report/CreateReportForm.tsx:97-155
Timestamp: 2025-07-17T15:57:51.295Z
Learning: In echo/frontend/src/components/report/CreateReportForm.tsx, the conversation status section should only be displayed when there are pending conversations (conversationCounts.pending !== 0). When all conversations are processed, no status information should be shown to keep the UI minimal and clean.
echo/frontend/src/components/announcement/Announcements.tsx (2)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
echo/frontend/src/components/auth/hooks/index.ts (2)
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
echo/directus/sync/snapshot/fields/conversation_link/source_conversation_id.json (1)
Learnt from: spashii
PR: #142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with id properties (e.g., conversation_id: { id: conversationId } as Conversation) rather than direct ID values, even though this appears redundant.
echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx (1)
Learnt from: ussaama
PR: #224
File: echo/frontend/src/components/report/CreateReportForm.tsx:97-155
Timestamp: 2025-07-17T15:57:51.295Z
Learning: In echo/frontend/src/components/report/CreateReportForm.tsx, the conversation status section should only be displayed when there are pending conversations (conversationCounts.pending !== 0). When all conversations are processed, no status information should be shown to keep the UI minimal and clean.
echo/directus/sync/snapshot/fields/conversation_link/target_conversation_id.json (1)
Learnt from: spashii
PR: #142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with id properties (e.g., conversation_id: { id: conversationId } as Conversation) rather than direct ID values, even though this appears redundant.
echo/frontend/src/lib/api.ts (3)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/hooks/index.ts:23-36
Timestamp: 2025-07-03T13:34:59.482Z
Learning: In the echo frontend codebase, using @ts-ignore for Directus SDK filter type issues is acceptable and preferred over extending types or using workarounds. This applies specifically to date comparisons and other filter operations where the SDK types may not be perfectly aligned.
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:10-15
Timestamp: 2025-06-16T11:48:51.114Z
Learning: In echo/frontend project, ussaama prefers to defer import refactoring (like grouping config imports under a namespace) until the import list grows significantly, following a pragmatic approach to technical debt management.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
echo/directus/sync/snapshot/relations/conversation_link/source_conversation_id.json (1)
Learnt from: spashii
PR: #142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with id properties (e.g., conversation_id: { id: conversationId } as Conversation) rather than direct ID values, even though this appears redundant.
echo/frontend/src/components/announcement/hooks/useProcessedAnnouncements.ts (2)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
echo/frontend/src/components/announcement/TopAnnouncementBar.tsx (3)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
echo/frontend/src/components/announcement/AnnouncementIcon.tsx (2)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
echo/frontend/src/lib/directus.ts (1)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
echo/frontend/pnpm-workspace.yaml (1)
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:10-15
Timestamp: 2025-06-16T11:48:51.114Z
Learning: In echo/frontend project, ussaama prefers to defer import refactoring (like grouping config imports under a namespace) until the import list grows significantly, following a pragmatic approach to technical debt management.
echo/frontend/src/components/announcement/hooks/index.ts (4)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: ussaama
PR: #202
File: echo/frontend/src/hooks/useProcessedAnnouncements.ts:17-18
Timestamp: 2025-07-03T13:30:40.981Z
Learning: In the echo frontend codebase, Directus types like Announcement are globally available and do not require explicit imports. The types are resolved through the Directus type system configuration in files like echo/frontend/src/lib/typesDirectus.d.ts and echo/frontend/src/lib/typesDirectusContent.ts.
Learnt from: ussaama
PR: #185
File: echo/frontend/src/App.tsx:25-36
Timestamp: 2025-06-16T11:51:33.799Z
Learning: In echo/frontend/src/App.tsx, user ussaama prefers explicit code over terse/inline code for React useEffect cleanup functions, choosing clarity and future maintainability over brevity when assigning cleanup functions to variables before returning them.
Learnt from: ussaama
PR: #90
File: echo/frontend/src/routes/participant/ParticipantPostConversation.tsx:86-99
Timestamp: 2025-03-31T10:39:20.458Z
Learning: In React components with debounced functions using setTimeout, two types of cleanup are recommended: 1) Clearing timeouts between function calls and 2) Using useEffect cleanup function to clear timeouts when the component unmounts.
echo/frontend/src/components/participant/ParticipantBody.tsx (1)
Learnt from: ussaama
PR: #224
File: echo/frontend/src/components/report/CreateReportForm.tsx:97-155
Timestamp: 2025-07-17T15:57:51.295Z
Learning: In echo/frontend/src/components/report/CreateReportForm.tsx, the conversation status section should only be displayed when there are pending conversations (conversationCounts.pending !== 0). When all conversations are processed, no status information should be shown to keep the UI minimal and clean.
echo/frontend/src/components/participant/hooks/index.ts (2)
Learnt from: ussaama
PR: #202
File: echo/frontend/src/components/announcement/AnnouncementIcon.tsx:19-19
Timestamp: 2025-07-03T15:47:56.584Z
Learning: In the echo frontend codebase, type assertions like as Announcement are necessary when using data returned from Directus SDK hooks like useLatestAnnouncement() because the SDK returns generic types that TypeScript cannot automatically infer as the specific Directus collection types, even though the types are globally available.
Learnt from: spashii
PR: #142
File: echo/frontend/src/lib/query.ts:730-740
Timestamp: 2025-05-13T15:18:29.107Z
Learning: When working with Directus API in this codebase, foreign key relationships must be specified using nested objects with id properties (e.g., conversation_id: { id: conversationId } as Conversation) rather than direct ID values, even though this appears redundant.
🧬 Code Graph Analysis (1)
echo/frontend/src/components/participant/hooks/index.ts (2)
echo/frontend/src/lib/api.ts (4)
getParticipantProjectById(34-38)getParticipantTutorialCardsBySlug(46-83)getParticipantConversationById(40-44)getParticipantConversationChunks(85-92)echo/frontend/src/lib/directus.ts (1)
directus(6-14)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Cursor Bugbot
- GitHub Check: ci-check-server
🔇 Additional comments (30)
echo/directus/sync/snapshot/fields/conversation_link/target_conversation_id.json (1)
41-41: Index looks good – sanity-check the migrationFlipping
is_indexedtotruewill generate a new B-tree on the FK column. All good, just make sure:
- The actual migration exists (or the Directus diff is committed) so prod doesn’t miss the index.
- No duplicate manual index with a different name already lives on the table – Postgres will error.
Ping DB-ops if the table is huge; creating the index concurrently avoids write locks.echo/directus/sync/snapshot/relations/conversation_link/source_conversation_id.json (1)
23-23:ON DELETE SET NULL– confirm downstream code tolerates nullsThe FK now nullifies on delete. 👍 Double-check any queries that assumed
source_conversation_idis non-null (JOINs, NOT NULL filters, unique constraints). Integration tests for cascade scenarios wouldn’t hurt.echo/directus/sync/snapshot/fields/conversation_link/source_conversation_id.json (1)
39-39: Field made nullable – aligns with FK change, LGTM
is_nullable: truesyncs with the newSET NULLbehavior. Ensure the UI form validators no longer hard-fail when the value is empty.echo/frontend/src/components/layout/ProjectLayout.tsx (1)
5-5: LGTM! Clean import refactor.Solid move relocating the
useSidebarhook to the layout-specific directory. This organizational restructuring is chef's kiss - much better than the generic hooks dumping ground.echo/frontend/src/lib/api.ts (1)
1-1: LGTM! Excellent technical debt documentation.Love seeing the explicit FIXME calling out the monolithic API structure. This sets up the next phase of the refactoring beautifully - breaking this beast into component-specific API modules is the logical next step after the hooks reorganization.
echo/frontend/src/lib/directus.ts (1)
23-24: LGTM! Sharp observation on error handling standardization.These TODO comments are spot-on. The
getDirectusErrorStringfunction being underutilized is a code smell that deserves attention. Standardizing error handling across the app would be a massive win for consistency and maintainability.echo/frontend/src/components/auth/hooks/index.ts (1)
186-217: LGTM! Clean authentication hook architecture.Excellent work moving this hook into the auth component directory. The state management is solid, error handling is proper, and the API design is intuitive. This is exactly the kind of domain-specific organization that makes codebases maintainable at scale.
echo/frontend/src/components/layout/AuthLayout.tsx (1)
7-7: LGTM! Import path perfectly aligned with the refactor.Clean update to match the
useAuthenticatedhook's new home in the auth component directory. This import consistency across the refactor is exactly what you want to see in a well-executed organizational restructure.echo/frontend/src/components/common/Protected.tsx (1)
1-1: useAuthenticated signature unchanged
I’ve confirmed inecho/frontend/src/components/auth/hooks/index.tsthatexport const useAuthenticated = (doRedirect = false) => { … }The first positional boolean still controls redirection (defaulting to false), so
useAuthenticated(true)behaves exactly as before. LGTM.echo/frontend/src/routes/project/library/ProjectLibraryView.tsx (1)
19-19: LGTM – import path realigned
Hook relocation looks clean; no further action.echo/frontend/src/components/quote/Quote.tsx (1)
5-5: LGTM – import path updated
No functional impact.echo/frontend/src/routes/project/library/ProjectLibraryAspect.tsx (1)
17-17: LGTM – import fixed
Everything else stays intact.echo/frontend/src/routes/participant/ParticipantPostConversation.tsx (1)
6-6: LGTM – hook path updated
No regression spotted.echo/frontend/src/routes/participant/ParticipantStart.tsx (1)
5-5: LGTM! Clean refactoring moving hooks closer to their domain.Solid move from generic lib to component-specific hooks directory. This is the way.
echo/frontend/src/components/view/View.tsx (1)
17-17: LGTM! Moving hooks closer to home.Beautiful refactoring - from distant relatives to local neighbors. Much better co-location.
echo/frontend/src/components/announcement/hooks/useProcessedAnnouncements.ts (1)
16-16: LGTM! Good call on the FIXME - over-engineering spotted.Solid observation, fellow 100x-er. Memoizing a .find() is indeed overkill. Simple functions > unnecessary hooks when you don't need React lifecycle magic.
echo/frontend/src/components/layout/Header.tsx (1)
21-21: LGTM! Auth hooks where they belong.Perfect consistency with the refactoring pattern. Auth hooks living with auth components - this is the way of the 100x engineer.
echo/frontend/src/components/announcement/TopAnnouncementBar.tsx (1)
13-13: LGTM! Announcement hooks consolidated like a boss.Clean refactoring pattern maintained - all announcement-related hooks now living together in their proper domain. This is how we scale codebases properly.
Also applies to: 16-16
echo/frontend/src/routes/participant/ParticipantConversation.tsx (1)
4-5: Verify TS path aliases pick up the new participant hook locationThe new
@/components/participant/hooksalias must exist in:
tsconfig.pathsvite.config / webpack alias- Jest / vitest config
If any of these forgot to follow the refactor, CI will cry.
Also applies to: 41-42, 55-55
echo/frontend/src/components/participant/ParticipantBody.tsx (1)
7-8: 👍 Import rewiring looks goodNothing else changed; compile-time semantics remain identical.
Also applies to: 21-22, 25-26
echo/frontend/pnpm-workspace.yaml (1)
1-2: ConfirmonlyBuiltDependenciesis intentional
onlyBuiltDependenciesis still experimental. Double-check that:
- the root
package.jsonuses"packageManager": "pnpm@x.y.z";- CI uses the same pnpm version;
- all other build-time deps you expect (e.g.
esbuild) don’t get tree-shaken unexpectedly.Simple local
pnpm i && pnpm buildsmoke should suffice.echo/frontend/src/components/announcement/hooks/index.ts (1)
483-507: LGTM! Clean hook implementation with proper state management.The
useAnnouncementDrawerhook is well-architected with session storage persistence and consistent initialization. The relocation to the component-specific hooks directory follows good modularity practices.echo/frontend/package.json (1)
18-111: All clear – secure dependency bump, ready to roll 🚀File: echo/frontend/package.json (Lines 18–111)
- Audited @ai-sdk/react@1.2.12, @tanstack/react-query@5.83.0, @mantine/core@7.17.8, @lingui/core@5.3.3 against GitHub NPM security advisories
- ✅ No vulnerabilities affecting these exact versions
LGTM.
echo/frontend/src/routes/project/conversation/ProjectConversationOverview.tsx (3)
57-57: Nice spacing bump for better visual hierarchy.Gap increase from 3rem to 4rem gives the layout more breathing room.
60-60: Smart condition change - multiple chunks make more sense.Switching from
> 0to> 1is logical since you need multiple chunks to warrant showing this section.
129-130: Cleaner conditional divider logic.More precise condition for when to show the divider - only when there's actual content or conversation is finished.
echo/frontend/src/components/participant/hooks/index.ts (4)
282-287: Clean participant project hook.Simple and effective - proper query key pattern and direct API call.
289-296: Smart tutorial card hook with select optimization.Good use of
selectto return first item or null, plus the enabled condition prevents unnecessary queries.
298-309: Solid chunk combining utility.Clean function that merges user chunks by concatenating transcripts while preserving metadata from the first chunk.
327-337: Good real-time conversation hook.The 60-second refetch interval keeps conversation data fresh without being too aggressive. Proper enabled conditions prevent unnecessary API calls.
| import { useAnnouncementDrawer } from "@/components/announcement/hooks"; | ||
| import { getTranslatedContent } from "@/components/announcement/hooks/useProcessedAnnouncements"; |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Imports look solid – consider re-exporting to avoid deep paths
Alias switch LGTM, but importing a nested file (hooks/useProcessedAnnouncements) leaks the folder structure and tight-couples the caller. A barrel file (announcement/hooks/index.ts) re-exporting getTranslatedContent would keep consumers oblivious to layout churn.
🤖 Prompt for AI Agents
In echo/frontend/src/components/announcement/AnnouncementIcon.tsx around lines 5
to 6, the import of getTranslatedContent directly from a nested file leaks
folder structure and creates tight coupling. To fix this, create or update a
barrel file at announcement/hooks/index.ts to re-export getTranslatedContent,
then import it from the barrel file instead. This will abstract the internal
folder layout and reduce coupling for consumers.
| useEffect(() => { | ||
| setLoading(true); | ||
| checkAuth() | ||
| .catch((_e) => {}) | ||
| .finally(() => { | ||
| setLoading(false); | ||
| }); | ||
| }, []); |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Solid hook implementation, but watch those dependencies.
The authentication logic is clean and follows React best practices. However, that empty dependency array is sus - you're referencing logoutMutation, location, searchParams, and doRedirect inside the effect but not including them in deps. This could lead to stale closures.
Consider adding the dependencies or using useCallback for checkAuth:
+ const checkAuth = useCallback(async () => {
try {
await directus.refresh();
setIsAuthenticated(true);
} catch (e) {
setIsAuthenticated(false);
await logoutMutation.mutateAsync({
next: location.pathname,
reason: searchParams.get("reason") ?? "",
doRedirect,
});
}
+ }, [logoutMutation, location.pathname, searchParams, doRedirect]);
useEffect(() => {
setLoading(true);
checkAuth()
.catch((_e) => {})
.finally(() => {
setLoading(false);
});
+ }, [checkAuth]);Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In echo/frontend/src/components/auth/hooks/index.ts around lines 207 to 214, the
useEffect hook references variables like logoutMutation, location, searchParams,
and doRedirect but does not include them in the dependency array, risking stale
closures. To fix this, either add all these referenced variables to the
dependency array or memoize the checkAuth function using useCallback with the
appropriate dependencies, then include the memoized function in the effect's
dependency array to ensure it updates correctly.
…237) finalize refactor for query.ts, refactor hooks, bump frontend dependencies and add conversation link
2 participants
Summary by CodeRabbit
New Features
Bug Fixes
Refactor
Chores