Animate the api request panel - #31
Conversation
WalkthroughReplaces the static API requests panel with a collapsible, animated panel driven by Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🧰 Additional context used📓 Path-based instructions (1)**/*.{ts,tsx}📄 CodeRabbit inference engine (AGENTS.md)
Files:
🧠 Learnings (1)📚 Learning: 2025-12-24T15:25:07.106ZApplied to files:
🧬 Code graph analysis (1)src/components/mode-toggle.tsx (1)
⏰ 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). (1)
🔇 Additional comments (1)
Comment |
🚀 Preview DeploymentStatus: ✅ Ready! Preview URL: Open Preview Commit: Built and deployed successfully |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/routes/_tutorial._db.projects.tsx (1)
38-38: Consider removing redundant overflow-hidden class.The
overflow-hiddenclass onSidebarProvidermay be redundant since the root<html>element also hasoverflow-hiddenapplied (insrc/routes/__root.tsxline 204). This could be simplified unless there's a specific reason for the duplication.🔎 Proposed simplification
- <SidebarProvider className="w-auto overflow-hidden" defaultOpen> + <SidebarProvider className="w-auto" defaultOpen>src/components/ApiRequestsPanel.tsx (1)
158-169: Add explicit default for isApiPanelOpen.When
userPreferencesis undefined (e.g., during initial load before the query completes),isApiPanelOpenwill beundefined, which JavaScript will coerce tofalsein the animation. While this works, it's better to be explicit about the default state for clarity and to avoid potential animation flicker.🔎 Proposed fix for explicit default
- const isApiPanelOpen = userPreferences?.networkPanel === "open"; + const isApiPanelOpen = userPreferences?.networkPanel === "open" ?? false;
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/components/ApiRequestsPanel.tsxsrc/routes/__root.tsxsrc/routes/_tutorial._db.projects.tsx
🧰 Additional context used
📓 Path-based instructions (1)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{ts,tsx}: Prefer functions over arrow functions for React components and everything else
Prefertypedeclarations overinterfacedeclarations
Files:
src/components/ApiRequestsPanel.tsxsrc/routes/__root.tsxsrc/routes/_tutorial._db.projects.tsx
🧠 Learnings (3)
📚 Learning: 2025-12-27T20:43:43.168Z
Learnt from: CR
Repo: fulopkovacs/trytanstackdb.com PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-27T20:43:43.168Z
Learning: Project uses TanStack Start framework with React, TanStack Router, shadcn/ui, and Tailwind CSS v4
Applied to files:
src/components/ApiRequestsPanel.tsxsrc/routes/_tutorial._db.projects.tsx
📚 Learning: 2025-12-24T15:25:07.106Z
Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.
Applied to files:
src/components/ApiRequestsPanel.tsxsrc/routes/__root.tsxsrc/routes/_tutorial._db.projects.tsx
📚 Learning: 2025-12-27T20:43:43.168Z
Learnt from: CR
Repo: fulopkovacs/trytanstackdb.com PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-27T20:43:43.168Z
Learning: The root route is located at `src/route/__root.tsx` in TanStack Start
Applied to files:
src/routes/_tutorial._db.projects.tsx
🧬 Code graph analysis (2)
src/components/ApiRequestsPanel.tsx (3)
src/collections/UserPreferences.ts (1)
userPreferencesCollection(12-19)src/utils/USER_PLACEHOLDER_CONSTANT.ts (1)
USER_PLACEHOLDER(7-12)src/components/ApiPanelToggle.tsx (4)
ApiPanelToggle(8-44)userPreferencesCollection(28-32)q(9-17)draft(29-32)
src/routes/_tutorial._db.projects.tsx (2)
src/components/AppSidebar.tsx (1)
AppSidebar(28-132)src/components/ApiRequestsPanel.tsx (1)
ApiRequestsPanel(147-230)
🔇 Additional comments (5)
src/routes/_tutorial._db.projects.tsx (1)
23-29: LGTM! Clean layout simplification.The refactored two-pane layout is much cleaner and easier to understand compared to the previous ResizablePanel-driven approach. The structure clearly separates the sidebar/outlet area from the API requests panel.
src/components/ApiRequestsPanel.tsx (3)
1-1: LGTM! Import additions support the new animation and state management.The new imports are all necessary for the collapsible, animated panel functionality:
eqfor filtering user preferences by IDmotionfor smooth animationsuserPreferencesCollectionfor reactive stateUSER_PLACEHOLDERfor identifying the user recordAlso applies to: 8-8, 14-14, 16-16
26-27: LGTM! Sensible animation constants.The panel width of 24rem and animation duration of 0.15s provide a good balance between visibility and smooth transitions.
172-229: Excellent animation implementation with staggered timing!The nested
motion.divstructure with coordinated delays creates a polished user experience:
- Opening: width expands first, then content fades in
- Closing: content fades out first, then width collapses
This prevents content from being visible in a compressed state during the transition. The use of
initial={false}also prevents animation on mount, which is the correct approach here.src/routes/__root.tsx (1)
204-204: No action needed —overflow-hiddenon the<html>element will not clip tooltips, modals, or popovers in this codebase. All shadcn/ui components (Popover, Dialog, Sheet, DropdownMenu, Tooltip) and the Sonner Toaster use Radix UI portals withfixedpositioning relative to the viewport, which are unaffected by overflow constraints on ancestor elements. Theoverflow-hiddenclass appropriately prevents document scrolling while allowing fixed-positioned portal elements to render normally.
1 participant
Kapture.2025-12-27.at.23.08.24.mp4
Summary by CodeRabbit
New Features
Style
Refactor
✏️ Tip: You can customize this high-level summary in your review settings.