feat: add custom days input to time window picker

[egeoztass]

Summary

• Adds a "Last X days" input to the time window dropdown (Feature request: Add a "Custom days" field #168)
• Users can type any number (1-365) and press Enter to filter by that many days
• Uses the existing custom range mechanism — no backend or constant changes needed
• Single file change: apps/start/src/components/time-window-picker.tsx

How it works

1. Open the time window dropdown
2. At the bottom, there's a "Last [X] days" input
3. Type a number (e.g., 14) and press Enter
4. The dashboard filters to the last 14 days with auto-detected interval

Implementation details

• Calculates startOfDay(today - X + 1) to endOfDay(today)
• Uses getDefaultIntervalByDates() to auto-select hour/day/month interval
• Input is isolated from dropdown keyboard shortcuts via stopPropagation
• Validated: 1-365 days range

Test plan

• Open time window dropdown, verify "Last X days" input appears
• Enter "14" and press Enter — dashboard shows last 14 days
• Enter "1" — equivalent to "Today"
• Enter "90" — shows last 90 days with appropriate interval
• Verify keyboard shortcuts (W, T, etc.) still work when input is not focused
• Verify typing in the input does not trigger preset shortcuts

Closes #168

🤖 Generated with Claude Code

Summary by CodeRabbit

• New Features
  • Added an inline "Last X days" quick-entry to the time window picker (1–365 days). Validates input, computes and applies start/end dates, selects the "custom" window, and clears the field after submission (Enter). Also prevents dropdown keyboard/click propagation while typing and adjusts the sampling interval automatically when applicable.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 2fd35b46-fbc0-4284-acbe-7b73cbed3382

📥 Commits

Reviewing files that changed from the base of the PR and between a7c7770 and 81db11a.

📒 Files selected for processing (1)

• apps/start/src/components/time-window-picker.tsx

---

📝 Walkthrough

Walkthrough

Adds an inline "Last X days" numeric control (1–365) to TimeWindowPicker that computes start/end timestamps, selects the custom window, updates onStartDateChange/onEndDateChange, optionally derives and applies an interval via getDefaultIntervalByDates, and clears the input after application.

Changes

Cohort / File(s)

Summary

Time Window Picker apps/start/src/components/time-window-picker.tsx

Added customDays state and handleCustomDays(days) which validates days (1–365), computes start (start-of-day for now-(days-1)) and end (end-of-day for now), calls onStartDateChange/onEndDateChange with formatted timestamps, switches selection to custom, applies a derived interval via getDefaultIntervalByDates through onIntervalChange if available, stops click/keydown propagation on the input, applies on Enter, and clears the input.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐇 I count the days with eager paws,
Enter — I stitch the timeline's laws,
From one to three-sixty-five I play,
Start at dawn, end night’s bright ray,
A hop, a click — your custom way.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ 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%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately and concisely describes the main change: adding a custom days input feature to the time window picker component.
Linked Issues check	✅ Passed	The implementation fully addresses issue #168 by adding a quick 'Last X days' input field that allows users to enter numeric values (1-365) to filter dashboards, matching the requested Mixpanel-like functionality.
Out of Scope Changes check	✅ Passed	All changes are scoped to the TimeWindowPicker component and directly support the custom days feature; no unrelated modifications or scope creep detected.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[CLAassistant]

All committers have signed the CLA.

[coderabbitai]

Actionable comments posted: 3

🤖 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/start/src/components/time-window-picker.tsx`:
- Around line 231-239: The onKeyDown handler for the custom days input (the
arrow function attached to onKeyDown) handles Enter but does not call
e.preventDefault(), which can cause form submission when this dropdown is inside
a form; update that handler to call e.preventDefault() before processing the
Enter key, then parse and validate customDays and call handleCustomDays(days)
and setCustomDays('') as before, while keeping e.stopPropagation() to preserve
existing behavior.
- Around line 53-54: The end and start date calculations call new Date() twice
which can drift across midnight; capture a single timestamp (e.g., const now =
new Date()) once in the TimeWindowPicker component and use it for both
endOfDay(now) and startOfDay(subDays(now, days - 1)) so the computed window is
consistent; update references to "end" and "start" (and any dependent variables)
to use that single now snapshot.
- Around line 224-243: The custom days numeric input (the Input component using
value={customDays}, onChange={setCustomDays} and onKeyDown that calls
handleCustomDays) lacks a programmatic label; add an accessible label by either
giving the input an aria-label like "Custom days" or adding an id to the input
and an associated <label htmlFor="..."> or aria-labelledby that references the
visible "days" text so screen readers announce the field correctly; update the
Input props to include the chosen aria-label or id and ensure any referenced
label element has the matching id.

🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: b4223dc6-f144-4323-80f4-3deed010f902

📥 Commits

Reviewing files that changed from the base of the PR and between 17c6a91 and bb4777c.

📒 Files selected for processing (1)

• apps/start/src/components/time-window-picker.tsx

[coderabbitai]

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/start/src/components/time-window-picker.tsx`:
- Around line 227-239: The onKeyDown handler for the customDays input currently
uses Number.parseInt(customDays, 10) which truncates exponential/decimal input;
update the parsing to use const days = Number(customDays) and then validate with
Number.isFinite(days) and Number.isInteger(days) (or allow decimals per UX)
before checking the 1–365 range, then call handleCustomDays(days) and reset via
setCustomDays(''); keep references to the same handlers (onKeyDown,
setCustomDays, handleCustomDays, customDays) when making the change.

🪄 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: defaults

Review profile: CHILL

Plan: Pro

Run ID: 9340cd07-8b6e-4593-9384-55f2a5cc30c0

📥 Commits

Reviewing files that changed from the base of the PR and between bb4777c and a7c7770.

📒 Files selected for processing (1)

• apps/start/src/components/time-window-picker.tsx