Collapse/expand for the queue sections#178
Open
theMackabu wants to merge 12 commits intostylessh:mainfrom
Open
Collapse/expand for the queue sections#178theMackabu wants to merge 12 commits intostylessh:mainfrom
theMackabu wants to merge 12 commits intostylessh:mainfrom
Conversation
Contributor
📝 WalkthroughWalkthroughPersist side-panel and per-group collapse state to localStorage via new hooks; add shared StickyGroupHeader/StickyGroupContent (sticky detection, toggle, animations); deduplicate issue/pull counts with a new utility; remove staggered skeleton animations; minor styling and pnpm/miniflare patch. Changes
Sequence Diagram(s)sequenceDiagram
participant User as "User"
participant Header as "StickyGroupHeader"
participant Hook as "useCollapsedGroups"
participant Storage as "localStorage\n(useLocalStorageState)"
participant Content as "StickyGroupContent / Page"
rect rgba(235,245,255,0.5)
User->>Header: Click collapse toggle
end
rect rgba(220,255,235,0.5)
Header->>Hook: setGroupCollapsed(groupId, newState)
Hook->>Storage: write JSON for storageKey
Storage-->>Hook: confirm write
Hook-->>Header: update collapsedGroups
end
rect rgba(255,245,235,0.5)
Hook->>Content: collapsedGroups change -> re-render
Content-->>User: show/hide items with animation
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/dashboard/src/routes/_protected/pulls.tsx (1)
316-405: Consider extractingStickyGroupHeaderto a shared component.The
StickyGroupHeaderimplementation inpulls.tsxandissues.tsxis nearly identical. Extracting it to a shared component would reduce duplication and ensure consistent behavior across both pages.This can be deferred to a follow-up PR if preferred.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/routes/_protected/pulls.tsx` around lines 316 - 405, Duplicate StickyGroupHeader exists in pulls.tsx and issues.tsx; extract it into a shared component to remove duplication. Create a new component (e.g., StickyGroupHeader) in a shared UI/components location, preserve the same props/signature (sectionRef, scrollContainerRef, stickyTop, icon, title, count, isEmpty, isCollapsed, onCollapsedChange) and the internal logic (headerRef, useEffect with updateStickyState, className handling and button JSX), export it, then replace the local implementations in both pulls.tsx and issues.tsx with imports that use the shared StickyGroupHeader so behavior and styling remain identical. Ensure prop types and Icon component type match the original to avoid type errors.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/dashboard/src/routes/_protected/pulls.tsx`:
- Around line 316-405: Duplicate StickyGroupHeader exists in pulls.tsx and
issues.tsx; extract it into a shared component to remove duplication. Create a
new component (e.g., StickyGroupHeader) in a shared UI/components location,
preserve the same props/signature (sectionRef, scrollContainerRef, stickyTop,
icon, title, count, isEmpty, isCollapsed, onCollapsedChange) and the internal
logic (headerRef, useEffect with updateStickyState, className handling and
button JSX), export it, then replace the local implementations in both pulls.tsx
and issues.tsx with imports that use the shared StickyGroupHeader so behavior
and styling remain identical. Ensure prop types and Icon component type match
the original to avoid type errors.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 7009cc60-a824-4512-a11f-39b46287d533
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
apps/dashboard/src/components/layouts/dashboard-side-panel.tsxapps/dashboard/src/components/navigation/command-palette.tsxapps/dashboard/src/lib/collapsible-groups-storage.tsapps/dashboard/src/routes/_protected/issues.tsxapps/dashboard/src/routes/_protected/pulls.tsxpackage.jsonpatches/[email protected]
Owner
|
@theMackabu this is nice! i'm just not a big fan on animating lists display, bc anim gets weirder as the list gets longer. |
Author
oh let me either remove or fix that, didn't consider long lists |
Author
|
@stylessh reworked the animation for long groups, let me know if I should remove the animation fully or if this is good Screen.Recording.2026-04-23.at.4.04.56.PM.mov |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/dashboard/src/components/shared/sticky-group-header.tsx`:
- Around line 73-83: The button currently hardcodes the top offset via the class
"-top-8" which ignores the computed stickyTop, causing desync when callers
supply a different offset; remove the hardcoded "-top-8" from the className on
the button (the element using headerRef and isStickyActive) and apply the
computed stickyTop as an inline style (e.g., top: stickyTop) so the sticky
positioning follows the stickyTop value used by the sticky state logic.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 37372dff-8f19-4fec-ab55-ceefae56c13b
📒 Files selected for processing (5)
apps/dashboard/src/components/layouts/dashboard-layout.tsxapps/dashboard/src/components/shared/sticky-group-header.tsxapps/dashboard/src/lib/count-unique.tsapps/dashboard/src/routes/_protected/issues.tsxapps/dashboard/src/routes/_protected/pulls.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/dashboard/src/lib/count-unique.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/routes/_protected/issues.tsx
Contributor
There was a problem hiding this comment.
🧹 Nitpick comments (1)
apps/dashboard/src/routes/_protected/pulls.tsx (1)
109-141: Keep the group props stable so thememo(...)wrappers can actually help.Line 109 rebuilds
groupson every render, and Lines 167 and 184 create fresh callbacks for every item. SincePullMetricCardandPullGroupare memoized, toggling one section still ends up rerendering every section and row. That will be most noticeable in the long-list case this PR is trying to smooth out.Also applies to: 161-189, 209-254, 256-308
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@apps/dashboard/src/routes/_protected/pulls.tsx` around lines 109 - 141, The groups array and item callbacks are being recreated every render which defeats memoization for PullMetricCard and PullGroup; wrap the groups construction (the const groups = [...] that uses applyFilters and countUniqueById) in useMemo keyed on the inputs (data.reviewRequested, data.assigned, data.authored, data.mentioned, data.involved and filterState) so the same groups object identity is preserved across renders, and wrap any callbacks passed into PullGroup/PullMetricCard (the per-item handlers created around applyFilters usage and item actions referenced in the diff) in useCallback with appropriate dependency arrays so they remain stable; ensure countUniqueById is called against the memoized groups result so totalPulls is stable too.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@apps/dashboard/src/routes/_protected/pulls.tsx`:
- Around line 109-141: The groups array and item callbacks are being recreated
every render which defeats memoization for PullMetricCard and PullGroup; wrap
the groups construction (the const groups = [...] that uses applyFilters and
countUniqueById) in useMemo keyed on the inputs (data.reviewRequested,
data.assigned, data.authored, data.mentioned, data.involved and filterState) so
the same groups object identity is preserved across renders, and wrap any
callbacks passed into PullGroup/PullMetricCard (the per-item handlers created
around applyFilters usage and item actions referenced in the diff) in
useCallback with appropriate dependency arrays so they remain stable; ensure
countUniqueById is called against the memoized groups result so totalPulls is
stable too.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 7b97063c-b8ef-41d0-8284-e91820b40971
📒 Files selected for processing (3)
apps/dashboard/src/components/shared/sticky-group-header.tsxapps/dashboard/src/routes/_protected/issues.tsxapps/dashboard/src/routes/_protected/pulls.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/dashboard/src/components/shared/sticky-group-header.tsx
- apps/dashboard/src/routes/_protected/issues.tsx
Owner
|
let's remove the animation for now, sorry! |
Author
|
animation removed |
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/dashboard/src/components/details/detail-page.tsx`:
- Around line 86-92: DetailPageSkeletonLayout's API changed: it no longer
accepts mainItemCount nor exports StaggerItem; update consuming modules that
import StaggerItem and pass mainItemCount to instead pass the value as
sidebarSectionCount to DetailPageSkeletonLayout and remove any StaggerItem
usage/wrapping. Specifically, drop the StaggerItem import/JSX and directly
render the children previously wrapped by <StaggerItem>, and replace occurrences
like mainItemCount={N} on DetailPageSkeletonLayout with sidebarSectionCount={N};
update any references to the removed StaggerItem symbol accordingly so
type-checking/build succeed.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro Plus
Run ID: 41d6b8c2-bff2-4cb7-a53a-23da9a63a6dd
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (4)
apps/dashboard/src/components/compare/compare-page.tsxapps/dashboard/src/components/details/detail-page.tsxapps/dashboard/src/components/issues/detail/issue-detail-page.tsxapps/dashboard/src/components/pulls/detail/pull-detail-page.tsx
Comment on lines
86
to
92
| export function DetailPageSkeletonLayout({ | ||
| children, | ||
| mainItemCount, | ||
| sidebarSectionCount = 3, | ||
| }: { | ||
| children: React.ReactNode; | ||
| mainItemCount: number; | ||
| children: ReactNode; | ||
| sidebarSectionCount?: number; | ||
| }) { |
Contributor
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find stale imports/usages of removed detail-page skeleton API.
rg -n --type=tsx -C2 'from "#/components/details/detail-page"'
rg -n --type=tsx -C2 '\bStaggerItem\b'
rg -n --type=tsx -C2 '<DetailPageSkeletonLayout[^>]*mainItemCount='Repository: stylessh/diffkit
Length of output: 144
🏁 Script executed:
#!/bin/bash
# Search for imports from detail-page (use extension pattern instead of file type)
echo "=== Searching for imports from detail-page ==="
rg 'from.*detail-page' --include='*.tsx' --include='*.ts' -n
echo ""
echo "=== Searching for StaggerItem usage ==="
rg '\bStaggerItem\b' --include='*.tsx' --include='*.ts' -n
echo ""
echo "=== Searching for mainItemCount usage ==="
rg '\bmainItemCount\b' --include='*.tsx' --include='*.ts' -n
echo ""
echo "=== Checking detail-page.tsx exports ==="
cat apps/dashboard/src/components/details/detail-page.tsx | head -100Repository: stylessh/diffkit
Length of output: 4094
🏁 Script executed:
#!/bin/bash
# Get full detail-page.tsx file
echo "=== Full detail-page.tsx ==="
wc -l apps/dashboard/src/components/details/detail-page.tsx
# Read the full file
cat apps/dashboard/src/components/details/detail-page.tsx
echo ""
echo "=== workflow-job-page.tsx imports (first 50 lines) ==="
head -50 apps/dashboard/src/components/workflows/workflow-job-page.tsx
echo ""
echo "=== workflow-run-page.tsx imports (first 50 lines) ==="
head -50 apps/dashboard/src/components/workflows/workflow-run-page.tsx
# Search using simpler grep patterns
echo ""
echo "=== StaggerItem mentions in tsx/ts files ==="
find apps/dashboard/src -type f \( -name "*.tsx" -o -name "*.ts" \) -exec grep -l "StaggerItem" {} \;
echo ""
echo "=== mainItemCount mentions in tsx/ts files ==="
find apps/dashboard/src -type f \( -name "*.tsx" -o -name "*.ts" \) -exec grep -l "mainItemCount" {} \;Repository: stylessh/diffkit
Length of output: 6903
🏁 Script executed:
#!/bin/bash
# Check StaggerItem and mainItemCount usage in workflow-job-page.tsx
echo "=== workflow-job-page.tsx: lines 234-260 ==="
sed -n '234,260p' apps/dashboard/src/components/workflows/workflow-job-page.tsx
echo ""
echo "=== workflow-job-page.tsx: StaggerItem usage ==="
grep -n "StaggerItem\|mainItemCount" apps/dashboard/src/components/workflows/workflow-job-page.tsx | head -20
echo ""
echo "=== workflow-run-page.tsx: lines 166-200 ==="
sed -n '166,200p' apps/dashboard/src/components/workflows/workflow-run-page.tsx
echo ""
echo "=== workflow-run-page.tsx: StaggerItem usage ==="
grep -n "StaggerItem\|mainItemCount" apps/dashboard/src/components/workflows/workflow-run-page.tsx | head -20Repository: stylessh/diffkit
Length of output: 2251
Breaking API change requires fixes in consuming modules.
DetailPageSkeletonLayout no longer accepts mainItemCount parameter and no longer exports StaggerItem. However, both are still imported and used in:
workflow-job-page.tsx(line 20 importsStaggerItem; line 236 passesmainItemCount={2}; lines 237–253 render<StaggerItem>components)workflow-run-page.tsx(line 12 importsStaggerItem; line 168 passesmainItemCount={3}; lines 169–190 render<StaggerItem>components)
These imports and usages will fail type-check and build until both files are updated to use the new sidebarSectionCount prop instead and remove StaggerItem wrapping.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/dashboard/src/components/details/detail-page.tsx` around lines 86 - 92,
DetailPageSkeletonLayout's API changed: it no longer accepts mainItemCount nor
exports StaggerItem; update consuming modules that import StaggerItem and pass
mainItemCount to instead pass the value as sidebarSectionCount to
DetailPageSkeletonLayout and remove any StaggerItem usage/wrapping.
Specifically, drop the StaggerItem import/JSX and directly render the children
previously wrapped by <StaggerItem>, and replace occurrences like
mainItemCount={N} on DetailPageSkeletonLayout with sidebarSectionCount={N};
update any references to the removed StaggerItem symbol accordingly so
type-checking/build succeed.
Owner
|
sorry! i made some changes conflicting with this, can you fix that? i will approved pr for now |
stylessh
approved these changes
Apr 26, 2026
Owner
|
type checks are failing |
Author
|
github prs seem to finally be working for me again LOL |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
changes
Screen.Recording.2026-04-23.at.3.39.59.PM.mov
Summary by CodeRabbit
New Features
Style