Skip to content

Truncate settlements list to latest five with expandable cutoff preview#8

Merged
ClementLSW merged 1 commit into
mainfrom
copilot/add-recent-transactions-toggle
Jun 5, 2026
Merged

Truncate settlements list to latest five with expandable cutoff preview#8
ClementLSW merged 1 commit into
mainfrom
copilot/add-recent-transactions-toggle

Conversation

Copilot AI commented Jun 5, 2026

Copy link
Copy Markdown
Contributor

Long settlement histories were fully rendered, making the transaction records section noisy and hard to scan. This change keeps the latest five records visible by default and moves older entries behind an explicit cutoff affordance with a partial sixth-row preview.

  • UI behavior: default recency window

    • Split groupSettlements into recentSettlements (first 5) and olderSettlements (remaining).
    • Always render the recent five first; keep older records hidden until user expands.
  • Cutoff affordance for hidden history

    • Added a centered arrow control with horizontal lines on both sides to mark the truncation boundary.
    • Toggle label reflects state and hidden-count context (Show N older settlements / Hide older settlements).
  • Sixth-record visual preview

    • When collapsed, render the first hidden record in a clipped container with a bottom gradient overlay.
    • Produces a “partially shown + fade to transparency” effect to signal more content below without full expansion.
const recentSettlements = groupSettlements.slice(0, 5)
const olderSettlements = groupSettlements.slice(5)
const previewSettlement = olderSettlements[0]

{!showOlderSettlements && previewSettlement && (
  <div className="relative h-12 overflow-hidden mt-2 rounded-2xl">
    {/* preview row */}
    <div className="pointer-events-none absolute inset-0 bg-gradient-to-b from-transparent via-white/70 to-white" />
  </div>
)}

@netlify

netlify Bot commented Jun 5, 2026

Copy link
Copy Markdown

Deploy Preview for omoneypmoney ready!

Name Link
🔨 Latest commit 8d69dd9
🔍 Latest deploy log https://app.netlify.com/projects/omoneypmoney/deploys/6a2295e8eddd7c0008605c65
😎 Deploy Preview https://deploy-preview-8--omoneypmoney.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@ClementLSW ClementLSW marked this pull request as ready for review June 5, 2026 09:25
Copilot AI review requested due to automatic review settings June 5, 2026 09:25
@ClementLSW ClementLSW merged commit ca0ccfc into main Jun 5, 2026
5 checks passed

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR improves the readability of the Group Detail “Settlements” section by showing only the 5 most recent settlements by default, while providing an explicit control to reveal older history plus a clipped preview of the next (6th) settlement when collapsed.

Changes:

  • Split settlements into recentSettlements (latest 5) and olderSettlements (the remainder), rendering recents by default.
  • Add an expandable cutoff control (“Show N older settlements” / “Hide…”) to toggle rendering of older settlements.
  • Add a collapsed-state preview row for the first hidden settlement with a gradient fade to indicate additional content.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread src/pages/GroupDetail.jsx
const [receiptUrls, setReceiptUrls] = useState({}) // expenseId → signed URL
const [memberAction, setMemberAction] = useState(null) // { type: 'remove'|'promote'|'demote', member }
const [showSettlements, setShowSettlements] = useState(false)
const [showOlderSettlements, setShowOlderSettlements] = useState(false)
Comment thread src/pages/GroupDetail.jsx
Comment on lines +651 to +656
<button
onClick={() => setShowOlderSettlements(v => !v)}
className="w-full"
aria-expanded={showOlderSettlements}
aria-controls="older-settlements"
>
Comment thread src/pages/GroupDetail.jsx
Comment on lines +664 to +666
<p className="text-xs font-display font-semibold text-osps-gray uppercase tracking-wider">
{showOlderSettlements ? 'Hide older settlements' : `Show ${olderSettlements.length} older settlements`}
</p>
Copilot AI added a commit that referenced this pull request Jun 5, 2026
…sactions-toggle"

This reverts commit ca0ccfc, reversing
changes made to 2d40cab.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants