From c73940e22af723a1a401c2db71769a76398e4d58 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sat, 21 Mar 2026 13:28:31 +0100
Subject: [PATCH] feat: add option to show week numbers in mini-calendar

---
 app/[locale]/calendar/page.tsx            |  3 +-
 components/calendar/mini-calendar.tsx     | 65 ++++++++++++++++-------
 components/settings/calendar-settings.tsx | 11 ++++
 locales/de/common.json                    |  4 +-
 locales/en/common.json                    |  4 +-
 locales/es/common.json                    |  4 +-
 locales/fr/common.json                    |  4 +-
 locales/it/common.json                    |  4 +-
 locales/ja/common.json                    |  4 +-
 locales/nl/common.json                    |  4 +-
 locales/pt/common.json                    |  4 +-
 stores/settings-store.ts                  |  3 ++
 12 files changed, 86 insertions(+), 28 deletions(-)

diff --git a/app/[locale]/calendar/page.tsx b/app/[locale]/calendar/page.tsx
index 671b7ffe..3ff546ed 100644
--- a/app/[locale]/calendar/page.tsx
+++ b/app/[locale]/calendar/page.tsx
@@ -63,7 +63,7 @@ export default function CalendarPage() {
     setSelectedDate, setViewMode, toggleCalendarVisibility, updateCalendar,
     refreshAllSubscriptions,
   } = useCalendarStore();
-  const { firstDayOfWeek, timeFormat } = useSettingsStore();
+  const { firstDayOfWeek, timeFormat, showWeekNumbers } = useSettingsStore();
   const { identities } = useIdentityStore();
   const normalizedViewMode = isCalendarViewMode(viewMode) ? viewMode : "month";
 
@@ -751,6 +751,7 @@ export default function CalendarPage() {
               onChangeMonth={handleMiniMonthChange}
               events={events}
               firstDayOfWeek={firstDayOfWeek}
+              showWeekNumbers={showWeekNumbers}
             />
             <CalendarSidebarPanel
               calendars={calendars}
diff --git a/components/calendar/mini-calendar.tsx b/components/calendar/mini-calendar.tsx
index 56e9be68..47578533 100644
--- a/components/calendar/mini-calendar.tsx
+++ b/components/calendar/mini-calendar.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, Fragment } from "react";
 import { useTranslations, useFormatter } from "next-intl";
 import { ChevronLeft, ChevronRight, ChevronDown } from "lucide-react";
 import {
   startOfMonth, endOfMonth, startOfWeek, endOfWeek,
   addMonths, subMonths, addYears, subYears, setMonth, setYear,
-  eachDayOfInterval, getMonth, getYear,
+  eachDayOfInterval, getMonth, getYear, getISOWeek, getWeek,
   isSameDay, isSameMonth, isToday, format,
 } from "date-fns";
 import { cn } from "@/lib/utils";
@@ -26,6 +26,7 @@ interface MiniCalendarProps {
   onChangeMonth: (date: Date) => void;
   events?: CalendarEvent[];
   firstDayOfWeek?: number;
+  showWeekNumbers?: boolean;
 }
 
 export function MiniCalendar({
@@ -35,6 +36,7 @@ export function MiniCalendar({
   onChangeMonth,
   events = [],
   firstDayOfWeek = 1,
+  showWeekNumbers = false,
 }: MiniCalendarProps) {
   const t = useTranslations("calendar");
   const intlFormatter = useFormatter();
@@ -61,6 +63,17 @@ export function MiniCalendar({
     ? ["sun", "mon", "tue", "wed", "thu", "fri", "sat"] as const
     : ["mon", "tue", "wed", "thu", "fri", "sat", "sun"] as const;
 
+  // Compute week numbers for each row (one per 7-day chunk)
+  const weekNumbers = useMemo(() => {
+    if (!showWeekNumbers) return [];
+    const nums: number[] = [];
+    for (let i = 0; i < days.length; i += 7) {
+      // Use the first day of each row to determine the week number
+      nums.push(weekStart === 1 ? getISOWeek(days[i]) : getWeek(days[i], { weekStartsOn: 0 }));
+    }
+    return nums;
+  }, [days, showWeekNumbers, weekStart]);
+
   const currentYear = getYear(displayMonth);
   const currentMonth = getMonth(displayMonth);
   const decadeStart = Math.floor(currentYear / 10) * 10;
@@ -135,35 +148,49 @@ export function MiniCalendar({
       </div>
 
       {pickerView === "days" && (
-        <div className="grid grid-cols-7 gap-0">
+        <div className={cn("grid gap-0", showWeekNumbers ? "grid-cols-[auto_repeat(7,1fr)]" : "grid-cols-7")}>
+          {showWeekNumbers && (
+            <div className="text-center text-[10px] font-medium text-muted-foreground py-1 w-5" />
+          )}
           {dayHeaders.map((d) => (
             <div key={d} className="text-center text-[10px] font-medium text-muted-foreground py-1">
               {t(`days.${d}`)}
             </div>
           ))}
-          {days.map((day) => {
+          {days.map((day, index) => {
             const inMonth = isSameMonth(day, displayMonth);
             const selected = isSameDay(day, selectedDate);
             const today = isToday(day);
             const hasEvent = eventDates.has(format(day, "yyyy-MM-dd"));
+            const isFirstDayOfRow = index % 7 === 0;
 
             return (
-              <button
-                key={day.toISOString()}
-                onClick={() => onSelectDate(day)}
-                className={cn(
-                  "relative flex items-center justify-center w-7 h-7 text-xs rounded-full transition-colors",
-                  !inMonth && "text-muted-foreground/40",
-                  inMonth && !selected && "hover:bg-muted",
-                  today && !selected && "font-bold text-primary",
-                  selected && "bg-primary text-primary-foreground"
+              <Fragment key={day.toISOString()}>
+                {showWeekNumbers && isFirstDayOfRow && (
+                  <div
+                    key={`wk-${index}`}
+                    className="flex items-center justify-center w-5 text-[9px] text-muted-foreground/60 font-medium"
+                  >
+                    {weekNumbers[index / 7]}
+                  </div>
                 )}
-              >
-                {format(day, "d")}
-                {hasEvent && !selected && (
-                  <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-primary" />
-                )}
-              </button>
+                <button
+                  key={`day-${day.toISOString()}`}
+                  onClick={() => onSelectDate(day)}
+                  className={cn(
+                    "relative flex items-center justify-center w-7 h-7 text-xs rounded-full transition-colors",
+                    !inMonth && "text-muted-foreground/40",
+                    inMonth && !selected && "hover:bg-muted",
+                    today && !selected && "font-bold text-primary",
+                    selected && "bg-primary text-primary-foreground"
+                  )}
+                >
+                  {format(day, "d")}
+                  {hasEvent && !selected && (
+                    <span className="absolute bottom-0.5 left-1/2 -translate-x-1/2 w-1 h-1 rounded-full bg-primary" />
+                  )}
+                </button>
+              </Fragment>
             );
           })}
         </div>
diff --git a/components/settings/calendar-settings.tsx b/components/settings/calendar-settings.tsx
index 6f858f4a..942a57a7 100644
--- a/components/settings/calendar-settings.tsx
+++ b/components/settings/calendar-settings.tsx
@@ -15,6 +15,7 @@ export function CalendarSettings() {
     timeFormat,
     firstDayOfWeek,
     showTimeInMonthView,
+    showWeekNumbers,
     calendarNotificationsEnabled,
     calendarNotificationSound,
     calendarInvitationParsingEnabled,
@@ -68,6 +69,16 @@ export function CalendarSettings() {
         />
       </SettingItem>
 
+      <SettingItem
+        label={t('show_week_numbers')}
+        description={t('show_week_numbers_desc')}
+      >
+        <ToggleSwitch
+          checked={showWeekNumbers}
+          onChange={(checked) => updateSetting('showWeekNumbers', checked)}
+        />
+      </SettingItem>
+
       <SettingItem
         label={t('notifications_enabled')}
         description={t('notifications_enabled_desc')}
diff --git a/locales/de/common.json b/locales/de/common.json
index f21b456a..e346d95d 100644
--- a/locales/de/common.json
+++ b/locales/de/common.json
@@ -1858,7 +1858,9 @@
       "invitation_parsing": "E-Mail-Einladungen verarbeiten",
       "invitation_parsing_desc": "Kalendereinladungen in E-Mail-Anhängen erkennen und Kalenderaktionen anzeigen",
       "show_time_in_month_view": "Zeit in Monatsansicht anzeigen",
-      "show_time_in_month_view_desc": "Ereigniszeiten in der Monatskalenderansicht anzeigen"
+      "show_time_in_month_view_desc": "Ereigniszeiten in der Monatskalenderansicht anzeigen",
+      "show_week_numbers": "Kalenderwochen anzeigen",
+      "show_week_numbers_desc": "Kalenderwochen im Minikalender anzeigen"
     },
     "days": {
       "monday": "Montag",
diff --git a/locales/en/common.json b/locales/en/common.json
index 19292fbe..3c1c3a78 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -1858,7 +1858,9 @@
       "invitation_parsing": "Parse email invitations",
       "invitation_parsing_desc": "Detect calendar invitations in email attachments and show calendar actions",
       "show_time_in_month_view": "Show time in month view",
-      "show_time_in_month_view_desc": "Display event times in the month calendar view"
+      "show_time_in_month_view_desc": "Display event times in the month calendar view",
+      "show_week_numbers": "Show week numbers",
+      "show_week_numbers_desc": "Display week numbers in the mini-calendar"
     },
     "days": {
       "monday": "Monday",
diff --git a/locales/es/common.json b/locales/es/common.json
index ea1d37c8..70186d5f 100644
--- a/locales/es/common.json
+++ b/locales/es/common.json
@@ -1858,7 +1858,9 @@
       "invitation_parsing": "Analizar invitaciones por correo",
       "invitation_parsing_desc": "Detectar invitaciones de calendario en archivos adjuntos del correo y mostrar acciones del calendario",
       "show_time_in_month_view": "Mostrar hora en vista mensual",
-      "show_time_in_month_view_desc": "Mostrar las horas de los eventos en la vista mensual del calendario"
+      "show_time_in_month_view_desc": "Mostrar las horas de los eventos en la vista mensual del calendario",
+      "show_week_numbers": "Mostrar números de semana",
+      "show_week_numbers_desc": "Mostrar los números de semana en el minicalendario"
     },
     "days": {
       "monday": "Lunes",
diff --git a/locales/fr/common.json b/locales/fr/common.json
index d532bfda..62c22f76 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -1858,7 +1858,9 @@
       "invitation_parsing": "Analyser les invitations par e-mail",
       "invitation_parsing_desc": "Détecter les invitations de calendrier dans les pièces jointes des e-mails et afficher les actions du calendrier",
       "show_time_in_month_view": "Afficher l'heure dans la vue mensuelle",
-      "show_time_in_month_view_desc": "Afficher les heures des événements dans la vue mensuelle du calendrier"
+      "show_time_in_month_view_desc": "Afficher les heures des événements dans la vue mensuelle du calendrier",
+      "show_week_numbers": "Afficher les numéros de semaine",
+      "show_week_numbers_desc": "Afficher les numéros de semaine dans le mini-calendrier"
     },
     "days": {
       "monday": "Lundi",
diff --git a/locales/it/common.json b/locales/it/common.json
index a4091720..677512b2 100644
--- a/locales/it/common.json
+++ b/locales/it/common.json
@@ -1858,7 +1858,9 @@
       "invitation_parsing": "Analizza gli inviti email",
       "invitation_parsing_desc": "Rileva gli inviti del calendario negli allegati email e mostra le azioni del calendario",
       "show_time_in_month_view": "Mostra orario nella vista mensile",
-      "show_time_in_month_view_desc": "Visualizza gli orari degli eventi nella vista mensile del calendario"
+      "show_time_in_month_view_desc": "Visualizza gli orari degli eventi nella vista mensile del calendario",
+      "show_week_numbers": "Mostra numeri di settimana",
+      "show_week_numbers_desc": "Mostra i numeri di settimana nel mini-calendario"
     },
     "days": {
       "monday": "Lunedì",
diff --git a/locales/ja/common.json b/locales/ja/common.json
index d9912d9b..7711294e 100644
--- a/locales/ja/common.json
+++ b/locales/ja/common.json
@@ -1858,7 +1858,9 @@
       "invitation_parsing": "メール招待を解析する",
       "invitation_parsing_desc": "メール添付のカレンダー招待を検出してカレンダー操作を表示する",
       "show_time_in_month_view": "月表示で時刻を表示",
-      "show_time_in_month_view_desc": "月カレンダー表示でイベントの時刻を表示する"
+      "show_time_in_month_view_desc": "月カレンダー表示でイベントの時刻を表示する",
+      "show_week_numbers": "週番号を表示",
+      "show_week_numbers_desc": "ミニカレンダーに週番号を表示する"
     },
     "days": {
       "monday": "月曜日",
diff --git a/locales/nl/common.json b/locales/nl/common.json
index c6bfadfd..73b0b0cd 100644
--- a/locales/nl/common.json
+++ b/locales/nl/common.json
@@ -1858,7 +1858,9 @@
       "invitation_parsing": "E-mailuitnodigingen verwerken",
       "invitation_parsing_desc": "Kalenderuitnodigingen in e-mailbijlagen detecteren en kalenderacties tonen",
       "show_time_in_month_view": "Tijd weergeven in maandweergave",
-      "show_time_in_month_view_desc": "Evenementtijden weergeven in de maandkalenderweergave"
+      "show_time_in_month_view_desc": "Evenementtijden weergeven in de maandkalenderweergave",
+      "show_week_numbers": "Weeknummers weergeven",
+      "show_week_numbers_desc": "Weeknummers weergeven in de minikalender"
     },
     "days": {
       "monday": "Maandag",
diff --git a/locales/pt/common.json b/locales/pt/common.json
index 4597f0d1..1a5b55a8 100644
--- a/locales/pt/common.json
+++ b/locales/pt/common.json
@@ -1858,7 +1858,9 @@
       "invitation_parsing": "Analisar convites por e-mail",
       "invitation_parsing_desc": "Detectar convites de calendário em anexos de e-mail e mostrar ações do calendário",
       "show_time_in_month_view": "Mostrar horário na visualização mensal",
-      "show_time_in_month_view_desc": "Exibir horários dos eventos na visualização mensal do calendário"
+      "show_time_in_month_view_desc": "Exibir horários dos eventos na visualização mensal do calendário",
+      "show_week_numbers": "Mostrar números da semana",
+      "show_week_numbers_desc": "Exibir números da semana no minicalendário"
     },
     "days": {
       "monday": "Segunda-feira",
diff --git a/stores/settings-store.ts b/stores/settings-store.ts
index eb8a3ec2..7b85f8d2 100644
--- a/stores/settings-store.ts
+++ b/stores/settings-store.ts
@@ -121,6 +121,7 @@ interface SettingsState {
 
   // Calendar
   showTimeInMonthView: boolean;
+  showWeekNumbers: boolean;
 
   // Calendar Notifications
   calendarNotificationsEnabled: boolean;
@@ -221,6 +222,7 @@ const DEFAULT_SETTINGS = {
 
   // Calendar
   showTimeInMonthView: false,
+  showWeekNumbers: false,
 
   // Calendar Notifications
   calendarNotificationsEnabled: true,
@@ -307,6 +309,7 @@ export const useSettingsStore = create<SettingsState>()(
           calendarNotificationSound: state.calendarNotificationSound,
           calendarInvitationParsingEnabled: state.calendarInvitationParsingEnabled,
           showTimeInMonthView: state.showTimeInMonthView,
+          showWeekNumbers: state.showWeekNumbers,
           toolbarPosition: state.toolbarPosition,
           senderFavicons: state.senderFavicons,
           folderIcons: state.folderIcons,