Refactor timeline sidebar

[yujonglee]

No description provided.

[coderabbitai]

📝 Walkthrough

Walkthrough

Removes Windows from two CI matrices. Refactors FolderChain to accept sessionId and always render, deriving folder/title from store. Replaces the old sidebar timeline module with a new bucketed TimelineView and supporting hooks/components (anchor handling, item rendering, and realtime indicator).

Changes

Cohort / File(s)	Summary
CI workflows .github/workflows/desktop_ci.yaml, .github/workflows/desktop2_ci.yaml	Drop Windows from the matrix include; macOS remains. No step logic changes.
Sessions header: FolderChain API/use apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx, apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx	FolderChain now takes sessionId, derives folder_id/title from store, always renders. Added internal helpers and folder-chain computation; updated consumer to pass sessionId unconditionally.
Timeline refactor (remove old) apps/desktop2/src/components/main/sidebar/timeline.tsx	Remove legacy TimelineView and related internal helpers/components.
Timeline refactor (new module) apps/desktop2/src/components/main/sidebar/timeline/* (anchor.ts, index.tsx, item.tsx, realtime.tsx)	Add new TimelineView with bucketed rendering, Today anchor/auto-scroll via useAnchor, item component with tab/session interactions, and realtime current-time indicator and hook.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant Header as Outer Header
  participant Store as Sessions Store
  participant FC as FolderChain

  User->>Header: Open session view
  Header->>FC: Render FolderChain(sessionId)
  FC->>Store: Lookup session by sessionId
  alt folderId exists
    FC->>FC: Build reversed folder list
    FC-->>Header: Render folder trail + title
  else no folderId
    FC-->>Header: Render root placeholder + title
  end

Loading

sequenceDiagram
  autonumber
  actor User
  participant TL as TimelineView
  participant Data as useTimelineData
  participant Anchor as useAnchor (Today)
  participant Item as TimelineItemComponent
  participant Tabs as Tabs Store
  participant UI as Persisted UI Store
  participant RT as useCurrentTime/CurrentTimeIndicator

  User->>TL: Open sidebar
  TL->>Data: Build buckets (events/sessions)
  TL->>Anchor: Init (isAnchorActive/autoScroll)
  Anchor-->>TL: {containerRef, visibility, scrollToAnchor}
  TL->>RT: Start time updates
  RT-->>TL: Current time ticks
  TL->>TL: Render buckets (incl. TodayBucket)
  User->>TL: Click "Scroll to Today"
  TL->>Anchor: scrollToAnchor()
  User->>Item: Click timeline item
  Item->>Tabs: Open existing/new session tab

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Possibly related PRs

• proper left-sidebar timeline rendering for new bundle #1568 — Modifies left-sidebar timeline with a bucketed TimelineView and utilities, aligning with this refactor.
• New bundle: left sidebar 3 tabs #1542 — Integrates/enhances TimelineView in the left sidebar, overlapping the timeline module changes here.
• Refactor main area #1548 — Refactors components under main/sidebar/timeline, touching the same paths and symbols updated in this PR.

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The pull request currently lacks any description, leaving reviewers without context or summary of the changes introduced. As a result, there is nothing relating to the actual changeset provided in the description field.	Please add a descriptive summary of the changes, objectives, and rationale for the timeline sidebar refactor to help reviewers understand the scope and intent of this PR.
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 (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title succinctly captures the primary change in this PR, which replaces and refactors the timeline sidebar implementation by removing the old TimelineView and introducing new timeline components and hooks. It directly reflects the main focus of the changeset in clear, concise language. Consequently, it provides enough context for teammates scanning the history to understand the core update.

✨ 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 refactor-timeline

---

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.}

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f228987 and 722ae83.

📒 Files selected for processing (9)

• .github/workflows/desktop2_ci.yaml (0 hunks)
• .github/workflows/desktop_ci.yaml (0 hunks)
• apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx (2 hunks)
• apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx (1 hunks)
• apps/desktop2/src/components/main/sidebar/timeline.tsx (0 hunks)
• apps/desktop2/src/components/main/sidebar/timeline/anchor.ts (1 hunks)
• apps/desktop2/src/components/main/sidebar/timeline/index.tsx (1 hunks)
• apps/desktop2/src/components/main/sidebar/timeline/item.tsx (1 hunks)
• apps/desktop2/src/components/main/sidebar/timeline/realtime.tsx (1 hunks)

💤 Files with no reviewable changes (3)

• .github/workflows/desktop2_ci.yaml
• .github/workflows/desktop_ci.yaml
• apps/desktop2/src/components/main/sidebar/timeline.tsx

🧰 Additional context used

📓 Path-based instructions (2)

apps/desktop2/**/*.{tsx,jsx}

📄 CodeRabbit inference engine (apps/desktop2/.cursor/rules/style.mdc)

apps/desktop2/**/*.{tsx,jsx}: When there are many Tailwind classNames with conditional logic, use the cn utility imported as import { cn } from "@hypr/ui/lib/utils"
Always pass an array to cn when composing Tailwind classNames
Split cn array entries by logical grouping when composing Tailwind classNames

Files:

• apps/desktop2/src/components/main/sidebar/timeline/realtime.tsx
• apps/desktop2/src/components/main/sidebar/timeline/item.tsx
• apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx
• apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx
• apps/desktop2/src/components/main/sidebar/timeline/index.tsx

**/*.{js,ts,tsx,rs}

⚙️ CodeRabbit configuration file

**/*.{js,ts,tsx,rs}: 1. Do not add any error handling. Keep the existing one.
2. No unused imports, variables, or functions.
3. For comments, keep it minimal. It should be about "Why", not "What".

Files:

• apps/desktop2/src/components/main/sidebar/timeline/realtime.tsx
• apps/desktop2/src/components/main/sidebar/timeline/item.tsx
• apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx
• apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx
• apps/desktop2/src/components/main/sidebar/timeline/index.tsx
• apps/desktop2/src/components/main/sidebar/timeline/anchor.ts

🧬 Code graph analysis (3)

apps/desktop2/src/components/main/sidebar/timeline/item.tsx (4)

apps/desktop2/src/utils/timeline.ts (2)

• TimelineItem (24-26)
• TimelinePrecision (28-28)

apps/desktop2/src/store/zustand/tabs.ts (1)

• useTabs (99-271)

apps/desktop2/src/components/interactive-button.tsx (1)

• InteractiveButton (13-55)

packages/ui/src/lib/utils.ts (1)

• cn (4-6)

apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx (1)

apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx (1)

• FolderChain (6-17)

apps/desktop2/src/components/main/sidebar/timeline/index.tsx (6)

apps/desktop2/src/components/main/sidebar/timeline/anchor.ts (1)

• useAnchor (3-75)

packages/ui/src/lib/utils.ts (1)

• cn (4-6)

apps/desktop2/src/components/main/sidebar/timeline/item.tsx (1)

• TimelineItemComponent (12-139)

packages/ui/src/components/ui/button.tsx (1)

• Button (37-89)

apps/desktop2/src/utils/timeline.ts (4)

• TimelineItem (24-26)
• TimelinePrecision (28-28)
• TimelineBucket (30-34)
• buildTimelineBuckets (112-198)

apps/desktop2/src/components/main/sidebar/timeline/realtime.tsx (2)

• useCurrentTime (9-21)
• CurrentTimeIndicator (3-7)

⏰ 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)

• GitHub Check: ci (macos, macos-14)