From d479b815d8cf1af8082cc77c729d0e26a9fdc21a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 23 Jul 2026 17:59:10 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9E=95=20Add=20Start=20of=20Week=20optio?=
 =?UTF-8?q?n=20again?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Options.vue                             | 13 ++------
 src/charts/MatrixChart.vue                  | 36 ++++++++++-----------
 src/composables/useActivityChartData.js     |  1 -
 src/composables/useOnedimChartData.js       | 26 ++++-----------
 src/composables/useStatsData.js             |  2 +-
 src/composables/useTwodimChartData.js       |  1 -
 src/definitions.js                          |  1 -
 src/options/StartOfWeekOption.vue           | 23 +++++++++++++
 src/sections/ActivitySection.vue            | 12 +++++--
 src/sections/TwodimSection.vue              | 12 +++++--
 src/utils.js                                | 18 ++++++-----
 test/composables/useOnedimChartData.spec.js | 13 ++++++--
 test/utils.spec.js                          | 34 +++++++++++++------
 13 files changed, 114 insertions(+), 78 deletions(-)
 create mode 100644 src/options/StartOfWeekOption.vue

diff --git a/src/Options.vue b/src/Options.vue
index 6ec2f7b..4f40fa0 100644
--- a/src/Options.vue
+++ b/src/Options.vue
@@ -25,17 +25,7 @@
 			<section>
 				<h2>{{ t('options.headings.stats') }}</h2>
 				<!-- option: startOfWeek -->
-				<!-- <div class="entry">
-				<label for="start">
-					{{ t("options.startOfWeek.label") }}
-					<span class="description">{{ t("options.startOfWeek.description") }}</span>
-				</label>
-				<div class="action">
-					<select v-model="options.startOfWeek" id="start">
-						<option v-for="(name, pos) in weekdayNames(locale)" :key="pos" :value="pos">{{ name }}</option>
-					</select>
-				</div>
-			</div> -->
+				<start-of-week-option />
 				<!-- option: addresses -->
 				<addresses-option />
 				<!-- option: account selection -->
@@ -103,6 +93,7 @@ import OrdinateOption from '@/options/OrdinateOption.vue';
 import TagColorsOption from '@/options/TagColorsOption.vue';
 import LiveCountUpOption from '@/options/LiveCountUpOption.vue';
 import AutoRefreshOption from '@/options/AutoRefreshOption.vue';
+import StartOfWeekOption from '@/options/StartOfWeekOption.vue';
 import AddressesOption from '@/options/AddressesOption.vue';
 import AccountsOption from '@/options/AccountsOption.vue';
 import SelfMessagesOption from '@/options/SelfMessagesOption.vue';
diff --git a/src/charts/MatrixChart.vue b/src/charts/MatrixChart.vue
index d9a592b..7b4a0be 100644
--- a/src/charts/MatrixChart.vue
+++ b/src/charts/MatrixChart.vue
@@ -11,7 +11,7 @@
 <script setup>
 import { computed, onMounted, watch } from 'vue';
 import { Chart, color } from '@/chart.config.js';
-import { isoDayOfWeek } from '@/utils.js';
+import { weekdayNames } from '@/utils.js';
 import { getDateFnsLocale } from '@/translations.js';
 import { useI18n } from 'vue-i18n';
 
@@ -28,15 +28,20 @@ const props = defineProps({
 	dimension: Object, // {cols, rows}
 	parseTime: Boolean, // if true, parse values as Date objects
 	datasets: Array, // [{data: [[date, value], [date, value], ...], label: ''}, ...]
+	weekdayLabels: Array, // 7 short weekday names, in the desired top-to-bottom row order
 });
 
+// Chart.js's category scale renders labels bottom-to-top on a vertical axis,
+// so the array needs reversing to make weekdayLabels[0] the top row
+const yAxisLabels = computed(() => [...(props.weekdayLabels || [])].reverse());
+
 const processedDatasets = computed(() => {
 	const data = props.datasets;
 	data.map((d) => {
 		d.data = d.data.map((e) => {
 			return {
 				x: props.parseTime ? e[0] : new Date(e[0]).getHours(),
-				y: isoDayOfWeek(new Date(e[0])),
+				y: weekdayNames(locale.value)[new Date(e[0]).getDay()],
 				d: props.parseTime
 					? new Date(e[0]).toLocaleDateString(locale.value, { year: 'numeric', month: 'long', day: 'numeric' })
 					: new Date(e[0]).toLocaleDateString(locale.value, { weekday: 'long', hour: 'numeric' }),
@@ -97,23 +102,9 @@ const draw = (localeObject) => {
 					border: {
 						display: false,
 					},
-					type: 'time',
-					adapters: {
-						date: {
-							locale: localeObject,
-						},
-					},
+					type: 'category',
+					labels: yAxisLabels.value,
 					offset: true,
-					time: {
-						unit: 'day',
-						round: 'day',
-						isoWeekday: true,
-						parser: 'i',
-						displayFormats: {
-							day: 'iiiiii',
-						},
-					},
-					reverse: true,
 					position: 'left',
 					ticks: {
 						maxRotation: 0,
@@ -184,6 +175,15 @@ watch(
 		}
 	}
 );
+
+// update weekday row order if the start-of-week option changes
+watch(
+	() => yAxisLabels.value,
+	(newValue) => {
+		chart.options.scales.y.labels = newValue;
+		chart.update();
+	}
+);
 </script>
 
 <style>
diff --git a/src/composables/useActivityChartData.js b/src/composables/useActivityChartData.js
index 85cd4ce..1ec3dab 100644
--- a/src/composables/useActivityChartData.js
+++ b/src/composables/useActivityChartData.js
@@ -27,7 +27,6 @@ export function useActivityChartData({ display, activityPrefs, t }) {
 			s.push([key, sentMap[key] || 0]);
 		}
 
-		// TODO: handle options.startOfWeek
 		return {
 			received: { label: t('stats.mailsReceived'), data: r },
 			sent: { label: t('stats.mailsSent'), data: s },
diff --git a/src/composables/useOnedimChartData.js b/src/composables/useOnedimChartData.js
index 229d0a9..13b29f2 100644
--- a/src/composables/useOnedimChartData.js
+++ b/src/composables/useOnedimChartData.js
@@ -1,7 +1,7 @@
 // chart-data shaping for the "onedim" section (daytime/weekday/month bar charts)
 import { computed } from 'vue';
 import { accentColors } from '@/definitions.js';
-import { monthNames, weekdayNames } from '@/utils.js';
+import { monthNames, rotateArray, weekdayNames } from '@/utils.js';
 
 export function useOnedimChartData({ display, comparison, accounts, options, t, locale }) {
 	// prepare data for daytime bar chart
@@ -45,15 +45,9 @@ export function useOnedimChartData({ display, comparison, accounts, options, t,
 
 	// prepare data for weekday bar chart
 	const weekdayChartData = computed(() => {
-		const r = Object.values(display.value.weekdayData.received);
-		const s = Object.values(display.value.weekdayData.sent);
-		let labels = [...weekdayNames(locale.value)];
-		// TODO: start week with user defined day of week
-		for (let d = 0; d < 1 /*options.startOfWeek*/; d++) {
-			r.push(r.shift());
-			s.push(s.shift());
-			labels.push(labels.shift());
-		}
+		const r = rotateArray(Object.values(display.value.weekdayData.received), options.startOfWeek);
+		const s = rotateArray(Object.values(display.value.weekdayData.sent), options.startOfWeek);
+		const labels = rotateArray(weekdayNames(locale.value), options.startOfWeek);
 		return {
 			datasets: [
 				{
@@ -73,18 +67,10 @@ export function useOnedimChartData({ display, comparison, accounts, options, t,
 	// prepare comparison data for weekday bar chart
 	const weekdayComparedChartData = computed(() => {
 		let datasets = [];
-		let labels = [...weekdayNames(locale.value)];
-		// TODO: labels: start week with user defined day of week
-		for (let d = 0; d < 1 /*options.startOfWeek*/; d++) {
-			labels.push(labels.shift());
-		}
+		const labels = rotateArray(weekdayNames(locale.value), options.startOfWeek);
 		// compute dataset for each account
 		accounts.value.forEach((a) => {
-			const data = Object.values(comparison.value.weekdayData[a.id]);
-			// TODO: data: start week with user defined day of week
-			for (let d = 0; d < 1 /*options.startOfWeek*/; d++) {
-				data.push(data.shift());
-			}
+			const data = rotateArray(Object.values(comparison.value.weekdayData[a.id]), options.startOfWeek);
 			// add dataset for this account
 			datasets.push({
 				label: `${t('popup.nMessages', 2)} - ${a.name}`,
diff --git a/src/composables/useStatsData.js b/src/composables/useStatsData.js
index 9905a27..9c86cd0 100644
--- a/src/composables/useStatsData.js
+++ b/src/composables/useStatsData.js
@@ -163,7 +163,7 @@ export function useStatsData() {
 			options.liveCountUp = result.options.liveCountUp ?? defaultOptions.liveCountUp;
 			options.autoRefresh = result.options.autoRefresh ?? defaultOptions.autoRefresh;
 			options.autoRefreshInterval = result.options.autoRefreshInterval ?? defaultOptions.autoRefreshInterval;
-			// options.startOfWeek = result.options.startOfWeek ?? defaultOptions.startOfWeek;
+			options.startOfWeek = result.options.startOfWeek ?? defaultOptions.startOfWeek;
 			options.addresses = result.options.addresses
 				? result.options.addresses
 						.toLowerCase()
diff --git a/src/composables/useTwodimChartData.js b/src/composables/useTwodimChartData.js
index c3b0c78..09f4e5e 100644
--- a/src/composables/useTwodimChartData.js
+++ b/src/composables/useTwodimChartData.js
@@ -29,7 +29,6 @@ export function useTwodimChartData({ display, t }) {
 			],
 			[]
 		);
-		// TODO: handle options.startOfWeek
 		return {
 			received: { label: t('stats.mailsReceived'), data: r },
 			sent: { label: t('stats.mailsSent'), data: s },
diff --git a/src/definitions.js b/src/definitions.js
index c57c4ad..248c60c 100644
--- a/src/definitions.js
+++ b/src/definitions.js
@@ -22,7 +22,6 @@ const defaultOptions = {
 	maxListCount: 20,
 	cache: true,
 	debug: false,
-	// startofWeek:
 };
 
 // tab navigation for stats page
diff --git a/src/options/StartOfWeekOption.vue b/src/options/StartOfWeekOption.vue
new file mode 100644
index 0000000..018b03b
--- /dev/null
+++ b/src/options/StartOfWeekOption.vue
@@ -0,0 +1,23 @@
+<template>
+	<div class="entry">
+		<label for="start">
+			{{ t('options.startOfWeek.label') }}
+			<span class="description">{{ t('options.startOfWeek.description') }}</span>
+		</label>
+		<div class="action">
+			<ts-select v-model="options.startOfWeek" id="start">
+				<option v-for="(name, pos) in weekdayNames(locale)" :key="pos" :value="pos">{{ name }}</option>
+			</ts-select>
+		</div>
+	</div>
+</template>
+
+<script setup>
+import { inject } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { weekdayNames } from '@/utils.js';
+
+const { options } = inject('engine');
+
+const { t, locale } = useI18n();
+</script>
diff --git a/src/sections/ActivitySection.vue b/src/sections/ActivitySection.vue
index e3fec9f..aba0c6a 100644
--- a/src/sections/ActivitySection.vue
+++ b/src/sections/ActivitySection.vue
@@ -54,6 +54,7 @@
 				:dimension="{ cols: 53, rows: 7 }"
 				:parseTime="true"
 				:datasets="[dateChartData.received]"
+				:weekday-labels="weekdayLabels"
 			/>
 			<!-- activity per day sent -->
 			<matrix-chart
@@ -64,27 +65,32 @@
 				:parseTime="true"
 				:dimension="{ cols: 53, rows: 7 }"
 				:datasets="[dateChartData.sent]"
+				:weekday-labels="weekdayLabels"
 			/>
 		</div>
 	</div>
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+import { ref, computed, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { tabsActivity } from '@/definitions.js';
+import { rotateArray, weekdayNames } from '@/utils.js';
 import { useActivityChartData } from '@/composables/useActivityChartData.js';
 import MatrixChart from '@/charts/MatrixChart.vue';
 import SectionTabHeader from '@/parts/SectionTabHeader.vue';
 
-const { display, preferences, minYear, maxYear, yearsList, nextYear, previousYear } = inject('engine');
+const { display, preferences, options, minYear, maxYear, yearsList, nextYear, previousYear } = inject('engine');
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 // tab navigation local to this section
 const tabActivity = ref(tabsActivity.days);
 
 const { dateChartData } = useActivityChartData({ display, activityPrefs: preferences.sections.activity, t });
+
+// weekday row order for the matrix charts, respecting the configured start of week
+const weekdayLabels = computed(() => rotateArray(weekdayNames(locale.value), options.startOfWeek));
 </script>
 
 <style scoped>
diff --git a/src/sections/TwodimSection.vue b/src/sections/TwodimSection.vue
index b2e0206..758099a 100644
--- a/src/sections/TwodimSection.vue
+++ b/src/sections/TwodimSection.vue
@@ -11,6 +11,7 @@
 				:dimension="{ cols: 24, rows: 7 }"
 				:parseTime="false"
 				:datasets="[weekdayPerHourChartData.received]"
+				:weekday-labels="weekdayLabels"
 			/>
 			<!-- emails per weekday per hour sent -->
 			<matrix-chart
@@ -21,25 +22,30 @@
 				:dimension="{ cols: 24, rows: 7 }"
 				:parseTime="false"
 				:datasets="[weekdayPerHourChartData.sent]"
+				:weekday-labels="weekdayLabels"
 			/>
 		</div>
 	</div>
 </template>
 
 <script setup>
-import { ref, inject } from 'vue';
+import { ref, computed, inject } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { tabsTwodim } from '@/definitions.js';
+import { rotateArray, weekdayNames } from '@/utils.js';
 import { useTwodimChartData } from '@/composables/useTwodimChartData.js';
 import MatrixChart from '@/charts/MatrixChart.vue';
 import SectionTabHeader from '@/parts/SectionTabHeader.vue';
 
-const { display } = inject('engine');
+const { display, options } = inject('engine');
 
-const { t } = useI18n();
+const { t, locale } = useI18n();
 
 // tab navigation local to this section (single-entry tab enum, kept for template consistency)
 const tabTwodim = ref(tabsTwodim.temporalDistribution);
 
 const { weekdayPerHourChartData } = useTwodimChartData({ display, t });
+
+// weekday row order for the matrix charts, respecting the configured start of week
+const weekdayLabels = computed(() => rotateArray(weekdayNames(locale.value), options.startOfWeek));
 </script>
diff --git a/src/utils.js b/src/utils.js
index 7c42557..b5a57cd 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -245,13 +245,6 @@ const localDateKey = (d) => {
 	return `${y}-${m}-${day}`;
 };
 
-// return day of week in iso format
-const isoDayOfWeek = (d) => {
-	let wd = d.getDay(); // 0..6, from sunday
-	wd = ((wd + 6) % 7) + 1; // 1..7 from monday
-	return String(wd);
-};
-
 const startOfToday = () => {
 	const d = new Date();
 	return new Date(d.getFullYear(), d.getMonth(), d.getDate(), 0, 0, 0, 0);
@@ -297,6 +290,15 @@ const weekdayNames = (locale = 'en') => {
 	return names;
 };
 
+// rotate array to the left by <n> positions, moving the first <n> elements to the end
+const rotateArray = (arr, n) => {
+	const rotated = [...arr];
+	for (let i = 0; i < n; i++) {
+		rotated.push(rotated.shift());
+	}
+	return rotated;
+};
+
 // format bytes and append unit
 const formatBytes = (bytes, decimals = 2) => {
 	if (bytes === 0) return '0 Bytes';
@@ -359,7 +361,6 @@ export {
 	formatBytes,
 	formatDate,
 	formatFolder,
-	isoDayOfWeek,
 	isSelfMessage,
 	localDateKey,
 	localStartOfWeek,
@@ -371,6 +372,7 @@ export {
 	pluralUkrainian,
 	quarterNumber,
 	queryMessages,
+	rotateArray,
 	setTheme,
 	sortAndLimitObject,
 	sortAndLimitObjectToArray,
diff --git a/test/composables/useOnedimChartData.spec.js b/test/composables/useOnedimChartData.spec.js
index d3a3222..900273c 100644
--- a/test/composables/useOnedimChartData.spec.js
+++ b/test/composables/useOnedimChartData.spec.js
@@ -16,7 +16,7 @@ describe('useOnedimChartData', () => {
 		});
 		const comparison = ref({ daytimeData: {}, weekdayData: {}, monthData: {} });
 		const accounts = ref([]);
-		const options = { accountColors: {} };
+		const options = { accountColors: {}, startOfWeek: 1 };
 		const locale = ref('en');
 		return { display, comparison, accounts, options, t: stubT, locale, ...overrides };
 	};
@@ -46,7 +46,7 @@ describe('useOnedimChartData', () => {
 		});
 	});
 
-	it('weekdayChartData rotates data/labels so the week starts on Monday', () => {
+	it('weekdayChartData rotates data/labels according to options.startOfWeek', () => {
 		const ctx = buildContext();
 		const { weekdayChartData } = useOnedimChartData(ctx);
 
@@ -54,6 +54,15 @@ describe('useOnedimChartData', () => {
 		expect(weekdayChartData.value.datasets[1].data).toEqual([2, 3, 4, 5, 6, 7, 1]); // received, rotated
 	});
 
+	it('weekdayChartData uses a different rotation when options.startOfWeek changes', () => {
+		const ctx = buildContext();
+		ctx.options.startOfWeek = 3;
+		const { weekdayChartData } = useOnedimChartData(ctx);
+
+		expect(weekdayChartData.value.labels).toEqual(['Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue']);
+		expect(weekdayChartData.value.datasets[1].data).toEqual([4, 5, 6, 7, 1, 2, 3]); // received, rotated
+	});
+
 	it('weekdayComparedChartData rotates each account dataset the same way', () => {
 		const ctx = buildContext();
 		ctx.accounts.value = [{ id: 'a', name: 'Account A' }];
diff --git a/test/utils.spec.js b/test/utils.spec.js
index bd1daa8..8de43f1 100644
--- a/test/utils.spec.js
+++ b/test/utils.spec.js
@@ -7,7 +7,6 @@ import {
 	formatBytes,
 	formatDate,
 	formatFolder,
-	isoDayOfWeek,
 	isSelfMessage,
 	localDateKey,
 	localStartOfWeek,
@@ -19,6 +18,7 @@ import {
 	pluralUkrainian,
 	quarterNumber,
 	queryMessages,
+	rotateArray,
 	setTheme,
 	sortAndLimitObject,
 	sortAndLimitObjectToArray,
@@ -295,14 +295,6 @@ describe('formatFolder', () => {
 	});
 });
 
-describe('isoDayOfWeek', () => {
-	it('maps Sunday to 7 and Monday to 1 (ISO 8601 numbering)', () => {
-		// Jan 1 2023 is a Sunday, Jan 2 2023 is a Monday
-		expect(isoDayOfWeek(new Date(2023, 0, 1))).toBe('7');
-		expect(isoDayOfWeek(new Date(2023, 0, 2))).toBe('1');
-	});
-});
-
 describe('localStartOfWeek', () => {
 	it('always resolves to the Sunday of the current week (getDay() 0)', () => {
 		// by construction (today's date minus today's weekday number), this can
@@ -329,6 +321,30 @@ describe('weekdayNames', () => {
 	});
 });
 
+describe('rotateArray', () => {
+	it('moves the first n elements to the end, preserving order', () => {
+		expect(rotateArray(['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], 1)).toEqual([
+			'Mon',
+			'Tue',
+			'Wed',
+			'Thu',
+			'Fri',
+			'Sat',
+			'Sun',
+		]);
+	});
+
+	it('returns the array unchanged when rotating by 0', () => {
+		expect(rotateArray([1, 2, 3], 0)).toEqual([1, 2, 3]);
+	});
+
+	it('does not mutate the input array', () => {
+		const input = [1, 2, 3];
+		rotateArray(input, 1);
+		expect(input).toEqual([1, 2, 3]);
+	});
+});
+
 describe('NumberedObject', () => {
 	it('creates a flat zero-initialized object when no second dimension is given', () => {
 		expect({ ...new NumberedObject(3) }).toEqual({ 0: 0, 1: 0, 2: 0 });

From 4a8320cb3da52395d6253596f5026d772af762d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Thu, 23 Jul 2026 18:06:44 +0200
Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=94=A8=20Fix=20labels=20and=20comment?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/charts/MatrixChart.vue        |  2 +-
 src/options/StartOfWeekOption.vue | 16 +++++++++++++---
 src/options/ThemeOption.vue       |  8 ++++----
 src/utils.js                      |  4 ++--
 4 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/charts/MatrixChart.vue b/src/charts/MatrixChart.vue
index 7b4a0be..11a88f8 100644
--- a/src/charts/MatrixChart.vue
+++ b/src/charts/MatrixChart.vue
@@ -28,7 +28,7 @@ const props = defineProps({
 	dimension: Object, // {cols, rows}
 	parseTime: Boolean, // if true, parse values as Date objects
 	datasets: Array, // [{data: [[date, value], [date, value], ...], label: ''}, ...]
-	weekdayLabels: Array, // 7 short weekday names, in the desired top-to-bottom row order
+	weekdayLabels: Array, // 7 short weekday names, in top-to-bottom row order
 });
 
 // Chart.js's category scale renders labels bottom-to-top on a vertical axis,
diff --git a/src/options/StartOfWeekOption.vue b/src/options/StartOfWeekOption.vue
index 018b03b..fae756a 100644
--- a/src/options/StartOfWeekOption.vue
+++ b/src/options/StartOfWeekOption.vue
@@ -4,9 +4,9 @@
 			{{ t('options.startOfWeek.label') }}
 			<span class="description">{{ t('options.startOfWeek.description') }}</span>
 		</label>
-		<div class="action">
-			<ts-select v-model="options.startOfWeek" id="start">
-				<option v-for="(name, pos) in weekdayNames(locale)" :key="pos" :value="pos">{{ name }}</option>
+		<div class="action action-row">
+			<ts-select class="action-select" v-model="options.startOfWeek" id="start">
+				<option v-for="(name, pos) in weekdayNames(locale, 'long')" :key="pos" :value="pos">{{ name }}</option>
 			</ts-select>
 		</div>
 	</div>
@@ -21,3 +21,13 @@ const { options } = inject('engine');
 
 const { t, locale } = useI18n();
 </script>
+
+<style scoped>
+.action-row {
+	display: flex;
+}
+
+.action-select {
+	flex-grow: 1;
+}
+</style>
diff --git a/src/options/ThemeOption.vue b/src/options/ThemeOption.vue
index 8e94a44..b2e1e88 100644
--- a/src/options/ThemeOption.vue
+++ b/src/options/ThemeOption.vue
@@ -4,8 +4,8 @@
 			{{ t('options.theme.label') }}
 			<span class="description">{{ t('options.theme.description') }}</span>
 		</label>
-		<div class="action theme-row">
-			<ts-select class="theme-select" v-model="options.theme" id="theme">
+		<div class="action action-row">
+			<ts-select class="action-select" v-model="options.theme" id="theme">
 				<option v-for="theme in ['system', 'light', 'dark']" :key="theme" :value="theme">
 					{{ t(`options.theme.${theme}`) }}
 				</option>
@@ -24,11 +24,11 @@ const { t } = useI18n();
 </script>
 
 <style scoped>
-.theme-row {
+.action-row {
 	display: flex;
 }
 
-.theme-select {
+.action-select {
 	flex-grow: 1;
 }
 </style>
diff --git a/src/utils.js b/src/utils.js
index b5a57cd..07394b4 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -281,11 +281,11 @@ const monthNames = (locale = 'en') => {
 };
 
 // array of localized, short day of week names
-const weekdayNames = (locale = 'en') => {
+const weekdayNames = (locale = 'en', weekdayFormat = 'short') => {
 	let names = [];
 	for (let wd = 1; wd <= 7; wd++) {
 		const d = new Date(1970, 1, wd); // choose a date to retrieve weekdays from, starting on a Sunday
-		names.push(d.toLocaleDateString(locale, { weekday: 'short' }));
+		names.push(d.toLocaleDateString(locale, { weekday: weekdayFormat }));
 	}
 	return names;
 };