feat: Add progress, tooltip, and floating attachment components

[jhechtf]

Summary by CodeRabbit

• New Features
  • Popover functionality with configurable click and hover interaction modes
  • Progress timeline component displaying milestones with status-based pin indicators
  • Tooltip component with flexible placement across multiple positions
• Tests
  • Comprehensive story tests for Progress and Tooltip components

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bill-tracker-mono	Ready	Preview, Comment	Apr 5, 2026 8:00am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 90506cfc-094f-42e9-9def-03244c1aa5c9

📥 Commits

Reviewing files that changed from the base of the PR and between 7081aef and 657a181.

📒 Files selected for processing (6)

• apps/website/src/app.css
• apps/website/src/lib/attachments/floating.svelte.ts
• apps/website/src/lib/components/progress/progress.stories.svelte
• apps/website/src/lib/components/progress/progress.svelte
• apps/website/src/lib/components/tooltip/tooltip.stories.svelte
• apps/website/src/lib/components/tooltip/tooltip.svelte

---

Walkthrough

This PR introduces floating UI positioning utilities and interactive components: a reusable Popover class for element positioning, a Progress timeline component with date-based pin grouping and status tracking, and a Tooltip component with flexible placement options. Supporting CSS styling and Storybook stories document the new components.

Changes

Cohort / File(s)	Summary
Floating UI Infrastructure apps/website/src/app.css, apps/website/src/lib/attachments/floating.svelte.ts	Added CSS rule for floating elements and new Popover class managing reference/floating element positioning via @floating-ui/dom with configurable interaction mode (click/hover) and placement, including autoUpdate loop for dynamic position recalculation.
Progress Component apps/website/src/lib/components/progress/progress.svelte, apps/website/src/lib/components/progress/progress.stories.svelte	New horizontal timeline component rendering date-grouped pin markers with status-based styling (paid/pending/past-due), optional "today" indicator, and Storybook documentation with sample pin data.
Tooltip Component apps/website/src/lib/components/tooltip/tooltip.svelte, apps/website/src/lib/components/tooltip/tooltip.stories.svelte	New tooltip component using popover API with Floating UI positioning fallback, CSS anchor positioning support, configurable placement variants, and comprehensive Storybook stories with interactive trigger and visibility assertions.

Sequence Diagram

sequenceDiagram
    participant Ref as Reference Element
    participant Popover
    participant FloatingUI as `@floating-ui/dom`
    participant Floating as Floating Element
    
    Ref->>Popover: Attach reference (via reference())
    Floating->>Popover: Attach floating (via floating())
    Popover->>FloatingUI: Start autoUpdate loop
    activate FloatingUI
    Ref->>Popover: Trigger interaction (click/hover)
    Popover->>Popover: Toggle open state
    Popover->>FloatingUI: computePosition(ref, floating, middleware)
    FloatingUI-->>Popover: {x, y} coordinates
    Popover->>Floating: Apply style.left, style.top
    Floating-->>Ref: Visual feedback (positioned element)
    deactivate FloatingUI

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested labels

enhancement

Poem

🐰 Floating elements take their flight,
Popovers dance and tooltips ignite,
Progress pins march in timeline's stride,
With Floating UI as our trusted guide!
New components hop with delight! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/new-ui-components

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[jhechtf]

• fix: Payments page with history navigation, month filter, and progress bar #140
• feat: Add getLastDayOfMonth utility with tests #139
• feat: Add progress, tooltip, and floating attachment components #138 👈 (View in Graphite)
• feat: begin move to remote functions #133 : 4 other dependent PRs (#134 , #135 , #136 and 1 other)
• main

This stack of pull requests is managed by Graphite. Learn more about stacking.

[jhechtf]

Merge activity

• Apr 5, 7:58 AM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 5, 7:59 AM UTC: Graphite rebased this pull request as part of a merge.
• Apr 5, 8:00 AM UTC: @jhechtf merged this pull request with Graphite.