feat(web): add progress bar with auto-cycling and scroll-into-view for showcase sections

[ComputelessComputer]

feat(web): add auto-cycling progress bar for showcase sections

Summary

Adds an auto-cycling progress bar component to showcase multiple elements across three sections on the marketing website:

• FloatingPanelSection in /product/ai-notetaking (mobile, tablet, desktop)
• MainFeaturesSection on the homepage (mobile carousel)
• DetailsSection on the homepage (mobile, tablet, desktop)

The progress bar auto-advances every 5 seconds with a visual fill animation. It pauses on hover (desktop) or touch (mobile) and resumes when interaction ends. Clicking a segment navigates directly to that item with scroll-into-view behavior.

Review & Testing Checklist for Human

• [ ] Visual verification: Test all three sections at mobile (<800px), tablet (800-1200px), and desktop (>1200px) viewport widths
• [ ] Auto-cycling: Verify items advance every 5 seconds and progress bar fills smoothly
• [ ] Pause/resume: Test hover pause on desktop, touch pause on mobile - ensure cycling resumes correctly
• [ ] Navigation: Click progress bar segments and verify correct item is shown with smooth scroll
• [ ] Scroll-into-view: On tablet/desktop views, verify the selected tab scrolls into view when auto-advancing

Recommended test plan:

1. Run pnpm -F web dev and navigate to both / and /product/ai-notetaking
2. Resize browser to test all three breakpoints
3. Let the carousels auto-cycle through all items
4. Interact with progress bars and verify pause/resume behavior

Notes

• The useAutoProgress hook and ProgressBar component are duplicated in both files - could be extracted to a shared location in a follow-up
• Uses setInterval at 50ms for smooth progress animation

Link to Devin run: https://app.devin.ai/sessions/71adb294caef488c9247fd16b9c1b8af Requested by: [email protected] (@ComputelessComputer)

[devin-ai-integration[bot]]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR that start with 'DevinAI' or '@devin'.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• [ ] Disable automatic comment and CI monitoring

[netlify[bot]]

✅ Deploy Preview for hyprnote-storybook ready!

Name	Link
🔨 Latest commit	ee72fd0a2124ac8ecca3f8078db883528beaac70
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote-storybook/deploys/692a5b3d302f5a000864034d
😎 Deploy Preview	https://deploy-preview-1983--hyprnote-storybook.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[coderabbitai[bot]]

📝 Walkthrough

Walkthrough

Added an auto-progress system (internal useAutoProgress hook + ProgressBar component) and replaced direct scroll callbacks with progress-driven APIs and pause/resume handlers across feature and detail carousels and floating panels.

Changes

Cohort / File(s)	Summary
Main View / Carousels apps/web/src/routes/_view/index.tsx	Introduced useAutoProgress usage and integrated ProgressBar. Replaced scrollToFeature/scrollToDetail callbacks with progress, onSelect, onPause, onResume props on MainFeaturesSection, DetailsSection, and their mobile/tablet/desktop subcomponents. Implemented hover/touch pause and resume behaviors and progress-driven auto-advance.
Product — Floating Panel (ai-notetaking) apps/web/src/routes/_view/product/ai-notetaking.tsx	Added useAutoProgress hook, ProgressBar component, and PROGRESS_DURATION constant. Refactored FloatingPanel variants (FloatingPanelMobile, FloatingPanelTablet, FloatingPanelDesktop) to accept progress, onSelect, onPause, onResume and centralized auto-advance/tab navigation via progress. Extended React imports (useCallback).
VS Route apps/web/src/routes/_view/vs/$slug.tsx	Added internal useAutoProgress implementation and wired two independent progress managers (features and details). Replaced direct scroll callbacks with progress-driven handlers (onSelect, onPause, onResume) and preserved existing UI structure.

Sequence Diagram

sequenceDiagram
    participant User
    participant View as Carousel / Panel View
    participant Hook as useAutoProgress
    participant ProgressBar
    participant Parent as Parent Component State

    Note over Hook: Tracks progress, pause/resume, auto-advance
    Hook->>Hook: start timer / increment progress
    Hook->>View: emit progress updates

    loop while active
        View->>ProgressBar: render progress for items
        User->>View: hover / touchstart
        View->>Hook: onPause()
        Hook->>Hook: pause timer
        User->>View: hover end / touchend
        View->>Hook: onResume()
        Hook->>Hook: resume timer
        Hook->>Hook: progress reaches 100%
        Hook->>Parent: onSelect(nextIndex)
        Parent->>View: update selected index
        Hook->>Hook: reset progress
    end

    alt user clicks progress bar
        User->>ProgressBar: click index
        ProgressBar->>Parent: onSelect(targetIndex)
        Parent->>View: update selected index
        Parent->>Hook: restart progress for new index
    end

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

• Review timer/interval management and cleanup in useAutoProgress implementations for memory leaks and double-timers.
• Verify pause/resume accuracy (preserving elapsed time) and edge cases when selected index changes rapidly.
• Ensure all component signature updates are consistent across mobile/tablet/desktop variants and callers.
• Validate ProgressBar click handling and accessibility/keyboard interactions if required.

Suggested reviewers

• yujonglee

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat(web): add progress bar with auto-cycling and scroll-into-view for showcase sections' clearly and specifically describes the main changes: adding a progress bar component with auto-cycling and scroll-into-view functionality across showcase sections.
Description check	✅ Passed	The description is well-related to the changeset, providing a clear summary of the new auto-cycling progress bar component, the sections where it's implemented, its behavior (auto-advance, pause/resume, navigation), and testing guidance.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment
• [ ] Commit unit tests in branch devin/1764382504-progress-bar-showcase

---

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

[netlify[bot]]

✅ Deploy Preview for hyprnote ready!

Name	Link
🔨 Latest commit	ee72fd0a2124ac8ecca3f8078db883528beaac70
🔍 Latest deploy log	https://app.netlify.com/projects/hyprnote/deploys/692a5b3d77f8c70008db5e32
😎 Deploy Preview	https://deploy-preview-1983--hyprnote.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

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

[argos-ci[bot]]

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build	Status	Details	Updated (UTC)
web (Inspect)	⚠️ Changes detected (Review)	2 changed	Nov 29, 2025, 2:35 AM