feat: configurable first day of week for date pickers - #1626
Conversation
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
Summary by CodeRabbit
WalkthroughAdds a configurable first day of the week, resolves automatic values from locale data, and applies the result to shared and invite date pickers. ChangesWeek start preferences
Estimated code review effort: 3 (Moderate) | ~20 minutes Sequence Diagram(s)sequenceDiagram
participant LanguageSelector
participant useViewPreferences
participant resolveWeekStart
participant VueDatePicker
LanguageSelector->>useViewPreferences: Update firstDayOfWeek
VueDatePicker->>useViewPreferences: Read firstDayOfWeek
VueDatePicker->>resolveWeekStart: Resolve preference and locale
resolveWeekStart-->>VueDatePicker: Return week-start value
VueDatePicker-->>LanguageSelector: Render configured calendar
Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches✨ Simplify code
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. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@frontend/lib/datelib/weekStart.ts`:
- Around line 13-27: Update resolveWeekStart to return non-"auto" preferences
only when they are numeric values from 0 through 6; otherwise fall back to
Monday. Also validate the firstDay value obtained from Intl.Locale before
mapping Sunday (7) to 0, treating missing or out-of-range values as fallback
cases. In frontend/components/App/LanguageSelector.vue lines 38-43, apply the
same validation at the affected usage site as requested by the shared week-start
handling.
🪄 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: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 72fd62a8-5a49-4df1-ab38-737ba5643f87
📒 Files selected for processing (7)
frontend/components/App/LanguageSelector.vuefrontend/components/Collection/InviteCreateModal.vuefrontend/components/Form/DatePicker.vuefrontend/composables/use-preferences.tsfrontend/lib/datelib/weekStart.test.tsfrontend/lib/datelib/weekStart.tsfrontend/locales/en.json
| export function resolveWeekStart(pref: WeekStart, locale?: string | null): number { | ||
| if (pref !== "auto") { | ||
| return pref; | ||
| } | ||
| try { | ||
| const tag = locale || (typeof navigator !== "undefined" ? navigator.language : "en-US"); | ||
| const loc = new Intl.Locale(tag); | ||
| // getWeekInfo() is the current spec API; older engines (including current | ||
| // Node/V8) expose a `weekInfo` getter instead — support both. | ||
| const info = | ||
| (loc as unknown as { getWeekInfo?: () => { firstDay?: number } }).getWeekInfo?.() ?? | ||
| (loc as unknown as { weekInfo?: { firstDay?: number } }).weekInfo; | ||
| const firstDay = info?.firstDay; // 1 = Monday … 7 = Sunday (ISO-8601) | ||
| if (typeof firstDay === "number") { | ||
| return firstDay === 7 ? 0 : firstDay; // map ISO → VueDatePicker (0 = Sunday) |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== weekStart.ts outline ==\n'
ast-grep outline frontend/lib/datelib/weekStart.ts --view expanded || true
printf '\n== LanguageSelector.vue outline ==\n'
ast-grep outline frontend/components/App/LanguageSelector.vue --view expanded || true
printf '\n== Relevant snippets ==\n'
sed -n '1,220p' frontend/lib/datelib/weekStart.ts
printf '\n---\n'
sed -n '1,180p' frontend/components/App/LanguageSelector.vue
printf '\n== Search for WeekStart type and usage ==\n'
rg -n "type WeekStart|interface WeekStart|WeekStart\b|firstDayOfWeek" frontend -SRepository: sysadminsmedia/homebox
Length of output: 8950
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== composable outline ==\n'
ast-grep outline frontend/composables/use-preferences.ts --view expanded || true
printf '\n== composable snippet ==\n'
sed -n '1,220p' frontend/composables/use-preferences.ts
printf '\n== search for persisted preference schema/validation ==\n'
rg -n "firstDayOfWeek|useViewPreferences|defineStore|persist|schema|zod|superjson|localStorage|useStorage|WeekStart" frontend -SRepository: sysadminsmedia/homebox
Length of output: 24901
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n== useViewPreferences implementation tail ==\n'
sed -n '220,340p' frontend/composables/use-preferences.ts
printf '\n== any normalization helpers for preferences ==\n'
rg -n "normalize|saniti[sz]e|coerce|firstDayOfWeek.*auto|week-start|weekStart" frontend/composables frontend/lib frontend/components -SRepository: sysadminsmedia/homebox
Length of output: 3393
Clamp invalid week-start preferences before returning them.
resolveWeekStart currently returns any non-"auto" value as-is, so a malformed persisted setting can leak into week-start instead of falling back to Monday. Accept only explicit 0–6 values and treat out-of-range Intl.Locale.weekInfo.firstDay values the same way.
📍 Affects 2 files
frontend/lib/datelib/weekStart.ts#L13-L27(this comment)frontend/components/App/LanguageSelector.vue#L38-L43
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@frontend/lib/datelib/weekStart.ts` around lines 13 - 27, Update
resolveWeekStart to return non-"auto" preferences only when they are numeric
values from 0 through 6; otherwise fall back to Monday. Also validate the
firstDay value obtained from Intl.Locale before mapping Sunday (7) to 0,
treating missing or out-of-range values as fallback cases. In
frontend/components/App/LanguageSelector.vue lines 38-43, apply the same
validation at the affected usage site as requested by the shared week-start
handling.
Address CodeRabbit review: resolveWeekStart returned non-"auto" preferences as-is, so a malformed value from schemaless storage (settings blob / localStorage) could reach the picker. Validate 0-6 and guard the Intl firstDay range. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
What type of PR is this?
What this PR does / why we need it
Date pickers always start the week on Monday today — not by choice, but because
@vuepic/vue-datepickerdefaultsweek-startto1and we never set the prop. This adds a First day of week user preference (Auto / Sunday / Monday / Saturday) so users whose region starts on Sunday or Saturday can change it.firstDayOfWeekadded to the existing user-preferences sync (localStorage +PUT /users/self/settings) — no backend changes; the settings blob is schemaless.resolveWeekStart()(new, unit-tested pure helper) maps the preference to VueDatePicker'sweek-start;"auto"derives fromIntl.Localeweek info with a Monday fallback.VueDatePickerusages (item date picker + invite-expiry picker); select added beside the language settings.Special notes for your reviewer
Default is
"auto"(locale-derived), which changes the current default for existing users (e.g. en-US now shows Sunday). Happy to default to Monday and make it purely opt-in instead — let me know your preference.Testing
resolveWeekStart(explicit passthrough, locale auto-detection, invalid-tag fallback).