User-selectable weekday start (Sunday/Monday) for review calendar (#12491)

web/src/components/filter/ReviewFilterGroup.tsx

@@ -521,7 +521,7 @@ function CalendarFilterButton({
   return (
     <Popover>
       <PopoverTrigger asChild>{trigger}</PopoverTrigger>
-      <PopoverContent>{content}</PopoverContent>
+      <PopoverContent className="w-auto">{content}</PopoverContent>
     </Popover>
   );
 }

web/src/components/overlay/ReviewActivityCalendar.tsx

@@ -5,6 +5,9 @@ import { FaCircle } from "react-icons/fa";
 import { getUTCOffset } from "@/utils/dateUtil";
 import { type DayContentProps } from "react-day-picker";
 import { LAST_24_HOURS_KEY } from "@/types/filter";
+import { usePersistence } from "@/hooks/use-persistence";
+
+type WeekStartsOnType = 0 | 1 | 2 | 3 | 4 | 5 | 6;
 
 type ReviewActivityCalendarProps = {
   reviewSummary?: ReviewSummary;
@@ -16,6 +19,8 @@ export default function ReviewActivityCalendar({
   selectedDay,
   onSelect,
 }: ReviewActivityCalendarProps) {
+  const [weekStartsOn] = usePersistence("weekStartsOn", 0);
+
   const disabledDates = useMemo(() => {
     const tomorrow = new Date();
     tomorrow.setHours(tomorrow.getHours() + 24, -1, 0, 0);
@@ -72,6 +77,7 @@ export default function ReviewActivityCalendar({
         DayContent: ReviewActivityDay,
       }}
       defaultMonth={selectedDay ?? new Date()}
+      weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType}
     />
   );
 }
@@ -109,6 +115,8 @@ export function TimezoneAwareCalendar({
   selectedDay,
   onSelect,
 }: TimezoneAwareCalendarProps) {
+  const [weekStartsOn] = usePersistence("weekStartsOn", 0);
+
   const timezoneOffset = useMemo(
     () =>
       timezone ? Math.round(getUTCOffset(new Date(), timezone)) : undefined,
@@ -162,6 +170,7 @@ export function TimezoneAwareCalendar({
       selected={selectedDay}
       onSelect={onSelect}
       defaultMonth={selectedDay ?? new Date()}
+      weekStartsOn={(weekStartsOn ?? 0) as WeekStartsOnType}
     />
   );
 }

web/src/views/settings/GeneralSettingsView.tsx

@@ -20,6 +20,7 @@ import {
 } from "../../components/ui/select";
 
 const PLAYBACK_RATE_DEFAULT = isSafari ? [0.5, 1, 2] : [0.5, 1, 2, 4, 8, 16];
+const WEEK_STARTS_ON = ["Sunday", "Monday"];
 
 export default function GeneralSettingsView() {
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -53,6 +54,7 @@ export default function GeneralSettingsView() {
 
   const [autoLive, setAutoLive] = usePersistence("autoLiveView", true);
   const [playbackRate, setPlaybackRate] = usePersistence("playbackRate", 1);
+  const [weekStartsOn, setWeekStartsOn] = usePersistence("weekStartsOn", 0);
 
   return (
     <>
@@ -142,6 +144,41 @@ export default function GeneralSettingsView() {
               </SelectContent>
             </Select>
             <Separator className="my-2 flex bg-secondary" />
+
+            <Heading as="h4" className="my-2">
+              Calendar
+            </Heading>
+
+            <div className="mt-2 space-y-6">
+              <div className="space-y-0.5">
+                <div className="text-md">First Weekday</div>
+                <div className="my-2 text-sm text-muted-foreground">
+                  <p>The day that the weeks of the review calendar begin on.</p>
+                </div>
+              </div>
+            </div>
+            <Select
+              value={weekStartsOn?.toString()}
+              onValueChange={(value) => setWeekStartsOn(parseInt(value))}
+            >
+              <SelectTrigger className="w-32">
+                {WEEK_STARTS_ON[weekStartsOn ?? 0]}
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  {WEEK_STARTS_ON.map((day, index) => (
+                    <SelectItem
+                      key={index}
+                      className="cursor-pointer"
+                      value={index.toString()}
+                    >
+                      {day}
+                    </SelectItem>
+                  ))}
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <Separator className="my-2 flex bg-secondary" />
           </div>
         </div>
       </div>