feat: ✨ adding queries for meeting cards + styling page UI

[Windslash123]

Description

Matched meeting page UI to Figma design: added Action Required and Upcoming sections, reworked meeting cards, and added query functions for responder and scheduled meeting data.

Added mobile nav header for meetings page -- note: Notification icon om mobile currently doesn't open up anything, will be implemented in my next issue.

Recording/Screenshots

Meetings Page: Desktop

Before

After

Landing page with no meetings:

Unscheduled tab:

Scheduled tab:

Meetings Page: Mobile

Before

After

Test Plan

Issues

• Closes Meeting Page UI #418

[cubic-dev-ai]

3 issues found across 6 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/components/summary/meetings.tsx">

<violation number="1" location="src/components/summary/meetings.tsx:53">
P2: The meetings list lost explicit `createdAt` sorting, so card order is now non-deterministic.</violation>
</file>

<file name="src/components/ui/meeting-card.tsx">

<violation number="1" location="src/components/ui/meeting-card.tsx:77">
P2: This renders a clickable IconButton with no behavior, which creates a non-functional UI control. Use a non-interactive wrapper (or wire a real action) so users aren’t presented with a dead button.</violation>
</file>

<file name="src/lib/meeting-card/mapper.ts">

<violation number="1" location="src/lib/meeting-card/mapper.ts:29">
P2: Date formatting uses local timezone, which can shift stored calendar dates by one day for some users. Format these date-only meeting values in UTC to keep the intended day stable.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[Windslash123]

@cubic-dev-ai

[cubic-dev-ai]

@cubic-dev-ai

@Windslash123 I have started the AI code review. It will take a few minutes to complete.

[cubic-dev-ai]

3 issues found across 6 files

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/components/ui/meeting-card.tsx">

<violation number="1" location="src/components/ui/meeting-card.tsx:159">
P2: Location is hardcoded to "LOCATION", so cards cannot render the actual meeting location.</violation>
</file>

<file name="src/components/summary/meetings.tsx">

<violation number="1" location="src/components/summary/meetings.tsx:177">
P2: The main meetings (“All”) grid is hidden on mobile and replaced with a different "Action Required" section, so mobile no longer mirrors the desktop meetings presentation.

(Based on your team's feedback about keeping the “All” section visible on mobile and mirroring desktop layout.) [FEEDBACK_USED]</violation>
</file>

<file name="src/lib/meeting-card/mapper.ts">

<violation number="1" location="src/lib/meeting-card/mapper.ts:31">
P1: Date formatting is timezone-dependent and can display the wrong calendar day. Format meeting dates in UTC to keep stored meeting dates stable across user timezones.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/components/summary/meetings.tsx">

<violation number="1" location="src/components/summary/meetings.tsx:248">
P2: Add an accessible label to the icon-only mobile create button (`IconButton`) so it is announced correctly by screen readers.</violation>
</file>

_{Tip: Review your code locally with the cubic CLI to iterate faster.}

[ethancha0]

bros going to cat cafes and color me mine

[ethancha0]

question: is "action required" implemented? it's mentioned in the pr description, however missing from the pictures and smoke test

[ethancha0]

thought: there should be a better way to sort the meeting cards. for example, move action required meetings to the top, followed by scheduled meetings, then unscheduled

this can be resolved in a future issue however

[ethancha0]

issue: the label is action required, but the filter displays unscheduled meetings.

Action required meetings should be reserved for meetings where availability hasn't been added
Unscheduled meetings are just meetings that hasn't been scheduled, regardless of inputted availability

[Windslash123]

Oops, forgot to use the needsAvailability filter instead here -- updated it, should be working now!

[Windslash123]

[ethancha0]

Awesome job arshiadadeer!

                          ....
                  .: :..:::::'
               ..:.::''''  '''     .. . .
             .':: ::''  .. ..   .::'' '''
              ':::' .::.'::  .'..::::::.
           ..:.::::: '.. :.'.:'''
     ...:'''  '':'::':'   ''
    :^ ^  'o>   .:'''
    :..'        '.
     '''''::    ':             .........
          :     :.       ...::''' ' ' '''::.
        .::     ':::.:':'''''            :::':.
       .::'                             :::
       ::'                              ::. ...::.
      .::'                        .      '''.' . :.
      '::.                       ::... .  .'.''':::.
       ':.                   ....:::::':::::.    ':::..
       .:'         .:'.:.'::::::' '        ':::..  ':::::.
  ....:::::..     .:::::::'' '                 '':.    '':'
.':.:.:::::::'. ...:: ''

.'.'' .':'::'
.::' .''::