feat(friends): persistent pending-invite surface (#47 B1) - #59
Conversation
…oast Invite envelopes are valid 5 minutes, but the only accept affordance was a default-duration sonner toast; a recipient tabbed away missed it and the invite was unrecoverable on their side while the host saw 'Invite sent'. - pendingInvitesStore (features/friends, alertsUiStore precedent) holds each ValidInvite keyed by sender+session (re-sends replace, F6 retry path) until expiry/dismiss/accept - PendingInvites(View) renders calm rows on the main view with a countdown, Accept (funnels through the same topic-gated accept path as the toast) and Dismiss - runGuestJoin re-checks expires_at at accept time — a stale row can't join a dead session — and removes the entry once a join proceeds; refusing while in a session keeps the row for after leaving Fixes #47 item B1. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
📝 WalkthroughWalkthroughAdds Zustand-backed pending invite persistence, a main-view invite list with expiry handling, inbox integration, accept-time validation, localized UI copy, Storybook stories, and store unit tests. ChangesPending invite flow
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant InboxBoot
participant PendingInvitesStore
participant PendingInvites
participant Home
InboxBoot->>PendingInvitesStore: Store validated invite
PendingInvitesStore-->>PendingInvites: Expose pending entries
PendingInvites->>Home: Forward accepted invite
Home->>PendingInvitesStore: Remove pending entry
Home->>Home: Recheck expiry and join session
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
✨ Simplify code
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/features/friends/PendingInvites.tsx`:
- Around line 108-132: Refresh the countdown timestamp immediately when pending
invites first appear. Update the useEffect in PendingInvites to call
setNow(Date.now()) before starting the interval, while preserving the existing
periodic refresh and cleanup behavior.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1de57728-adf8-497b-9b64-5393142c3f09
📒 Files selected for processing (8)
src/features/friends/InboxBoot.tsxsrc/features/friends/PendingInvites.tsxsrc/features/friends/index.tssrc/features/friends/pendingInvitesStore.tssrc/routes/Home.tsxsrc/stories/PendingInvites.stories.tsxsrc/strings.tstests/unit/pending-invites-store.test.ts
📜 Review details
⏰ Context from checks skipped due to timeout. (3)
- GitHub Check: CodeRabbit / Review
- GitHub Check: Rust (Windows)
- GitHub Check: Frontend
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{ts,tsx,rs}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,rs}: Add comments only when the reason is non-obvious; identifiers should carry meaning and code should read top-to-bottom.
Maintain scope discipline: do not refactor adjacent code during feature work or add abstractions for hypothetical future needs.
Files:
tests/unit/pending-invites-store.test.tssrc/features/friends/InboxBoot.tsxsrc/features/friends/index.tssrc/strings.tssrc/routes/Home.tsxsrc/features/friends/PendingInvites.tsxsrc/features/friends/pendingInvitesStore.tssrc/stories/PendingInvites.stories.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use TypeScript strict mode and ensure frontend code passes the TypeScript build and type checks.
Files:
tests/unit/pending-invites-store.test.tssrc/features/friends/InboxBoot.tsxsrc/features/friends/index.tssrc/strings.tssrc/routes/Home.tsxsrc/features/friends/PendingInvites.tsxsrc/features/friends/pendingInvitesStore.tssrc/stories/PendingInvites.stories.tsx
**/*.test.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Write Vitest tests for applicable unit and integration behavior; component tests are not currently supported without an explicit test-harness scope expansion.
Files:
tests/unit/pending-invites-store.test.ts
**/*
📄 CodeRabbit inference engine (CLAUDE.md)
**/*: Before committing or opening a PR, run the required build, lint, test, design-token, strings, contrast, accessibility, formatting, and relevant Rust quality gates.
Use one focused change per commit with a Conventional Commit subject such asfeat:,fix:,chore:,docs:, orci:; PRs should squash-merge.
Files:
tests/unit/pending-invites-store.test.tssrc/features/friends/InboxBoot.tsxsrc/features/friends/index.tssrc/strings.tssrc/routes/Home.tsxsrc/features/friends/PendingInvites.tsxsrc/features/friends/pendingInvitesStore.tssrc/stories/PendingInvites.stories.tsx
src/**/*.{ts,tsx,css}
📄 CodeRabbit inference engine (CLAUDE.md)
src/**/*.{ts,tsx,css}: Use design tokens instead of hard-coded visual values in frontend TypeScript, TSX, and CSS files.
Meet WCAG AA requirements for every text/background pairing in both themes; do not convey information by color alone.
Respect reduced-motion preferences through the global kill switch; new motion sites must be gated by default.
Files:
src/features/friends/InboxBoot.tsxsrc/features/friends/index.tssrc/strings.tssrc/routes/Home.tsxsrc/features/friends/PendingInvites.tsxsrc/features/friends/pendingInvitesStore.tssrc/stories/PendingInvites.stories.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
src/**/*.{ts,tsx}: Keep JSX text andaria-labelliterals consistent with the voice defined inDESIGN-SYSTEM.md §14, and prefer centralized strings.
Treat peer wire formats and identity derivation as cross-version contracts; coordinate changes so older peers and existing stored data remain compatible.
Do not add telemetry; the application must remain local-only.
Files:
src/features/friends/InboxBoot.tsxsrc/features/friends/index.tssrc/strings.tssrc/routes/Home.tsxsrc/features/friends/PendingInvites.tsxsrc/features/friends/pendingInvitesStore.tssrc/stories/PendingInvites.stories.tsx
src/**/*.{ts,tsx,rs}
📄 CodeRabbit inference engine (CLAUDE.md)
Never instruct users to paste a model file or BIP39 mnemonic into an AI service or chat.
Files:
src/features/friends/InboxBoot.tsxsrc/features/friends/index.tssrc/strings.tssrc/routes/Home.tsxsrc/features/friends/PendingInvites.tsxsrc/features/friends/pendingInvitesStore.tssrc/stories/PendingInvites.stories.tsx
src/strings.ts
📄 CodeRabbit inference engine (CLAUDE.md)
Keep toast and notification copy in
src/strings.ts; prefer this module for user-facing strings.
Files:
src/strings.ts
src/**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
src/**/*.stories.{ts,tsx}: Provide Storybook coverage for every primitive and feature component.
Ensure every Storybook story passes the axe-core accessibility gate.
Files:
src/stories/PendingInvites.stories.tsx
🔇 Additional comments (8)
src/features/friends/pendingInvitesStore.ts (1)
36-58: LGTM!tests/unit/pending-invites-store.test.ts (1)
1-66: LGTM!src/features/friends/index.ts (1)
23-33: LGTM!src/strings.ts (1)
428-437: LGTM!src/stories/PendingInvites.stories.tsx (1)
1-59: LGTM!src/features/friends/InboxBoot.tsx (1)
201-203: LGTM!src/routes/Home.tsx (2)
140-165: LGTM!
385-388: LGTM!
| export function PendingInvites({ onAccept }: PendingInvitesProps) { | ||
| const pending = usePendingInvitesStore((s) => s.pending) | ||
| const [now, setNow] = useState(() => Date.now()) | ||
|
|
||
| // Refresh the countdown + drop expired rows on a slow tick, only while | ||
| // anything is pending. Acceptance-time expiry is separately re-checked in | ||
| // Home's runGuestJoin, so a stale row can never join a dead session. | ||
| useEffect(() => { | ||
| if (pending.length === 0) return | ||
| const id = setInterval(() => { | ||
| setNow(Date.now()) | ||
| usePendingInvitesStore.getState().prune() | ||
| }, 10_000) | ||
| return () => clearInterval(id) | ||
| }, [pending.length]) | ||
|
|
||
| return ( | ||
| <PendingInvitesView | ||
| entries={pending} | ||
| now={now} | ||
| onAccept={(entry) => onAccept(entry.invite)} | ||
| onDismiss={(entry) => usePendingInvitesStore.getState().remove(entry.key)} | ||
| /> | ||
| ) | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Stale now causes incorrect countdown on first invite arrival.
now is initialized once via useState(() => Date.now()) and only updated by the 10-second interval — which doesn't start until pending.length > 0. If the component has been mounted on the main view for minutes without invites, the first invite's countdown will be based on the stale initial now, showing a much higher "Expires in N min" than reality for up to 10 seconds until the first interval tick fires.
The actual expiry behavior is unaffected (prune and runGuestJoin both use Date.now()), so this is display-only.
Fix: refresh `now` when the interval starts
useEffect(() => {
if (pending.length === 0) return
+ setNow(Date.now())
const id = setInterval(() => {
setNow(Date.now())
usePendingInvitesStore.getState().prune()
}, 10_000)
return () => clearInterval(id)
}, [pending.length])📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export function PendingInvites({ onAccept }: PendingInvitesProps) { | |
| const pending = usePendingInvitesStore((s) => s.pending) | |
| const [now, setNow] = useState(() => Date.now()) | |
| // Refresh the countdown + drop expired rows on a slow tick, only while | |
| // anything is pending. Acceptance-time expiry is separately re-checked in | |
| // Home's runGuestJoin, so a stale row can never join a dead session. | |
| useEffect(() => { | |
| if (pending.length === 0) return | |
| const id = setInterval(() => { | |
| setNow(Date.now()) | |
| usePendingInvitesStore.getState().prune() | |
| }, 10_000) | |
| return () => clearInterval(id) | |
| }, [pending.length]) | |
| return ( | |
| <PendingInvitesView | |
| entries={pending} | |
| now={now} | |
| onAccept={(entry) => onAccept(entry.invite)} | |
| onDismiss={(entry) => usePendingInvitesStore.getState().remove(entry.key)} | |
| /> | |
| ) | |
| } | |
| export function PendingInvites({ onAccept }: PendingInvitesProps) { | |
| const pending = usePendingInvitesStore((s) => s.pending) | |
| const [now, setNow] = useState(() => Date.now()) | |
| // Refresh the countdown + drop expired rows on a slow tick, only while | |
| // anything is pending. Acceptance-time expiry is separately re-checked in | |
| // Home's runGuestJoin, so a stale row can never join a dead session. | |
| useEffect(() => { | |
| if (pending.length === 0) return | |
| setNow(Date.now()) | |
| const id = setInterval(() => { | |
| setNow(Date.now()) | |
| usePendingInvitesStore.getState().prune() | |
| }, 10_000) | |
| return () => clearInterval(id) | |
| }, [pending.length]) | |
| return ( | |
| <PendingInvitesView | |
| entries={pending} | |
| now={now} | |
| onAccept={(entry) => onAccept(entry.invite)} | |
| onDismiss={(entry) => usePendingInvitesStore.getState().remove(entry.key)} | |
| /> | |
| ) | |
| } |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/features/friends/PendingInvites.tsx` around lines 108 - 132, Refresh the
countdown timestamp immediately when pending invites first appear. Update the
useEffect in PendingInvites to call setNow(Date.now()) before starting the
interval, while preserving the existing periodic refresh and cleanup behavior.
What
Invite envelopes are valid 5 minutes (
INVITE_TTL_MS), but the only accept affordance was a default-duration sonner toast (InboxBoot); the OS notification has no click action and no pending-invite state existed anywhere. A recipient tabbed away missed the toast; the invite was unrecoverable on their side while the host saw "Invite sent".Fix
pendingInvitesStore(features/friends, following thealertsUiStoreprecedent for feature-scoped stores): holds eachValidInvitekeyed bysender:session_topic— an F6 retry re-send replaces rather than stacks — until expiry, dismissal, or acceptance.PendingInvites/PendingInvitesView: rows on the main view (icon, "${name} invites you to study", "Expires in N min", Dismiss / Accept). Slow 10s tick refreshes the countdown and prunes expired rows; renders nothing when empty.runGuestJoin(it previously joined without re-validating): expired → calm error + row removal; valid → row removed and the join proceeds. Refusal while already in a session keeps the row for after leaving; canceling the AI topic gate keeps it too.handleInviteAcceptedpath.Addresses item B1 of #47.
Tests / gates
pending-invites-store.test.ts: hold/replace/coexist/prune/remove.🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Tests