From 21c6744a79251413e7784fcdf4ad351a5a1dc8e4 Mon Sep 17 00:00:00 2001
From: Marco Schmidlin <mb@triarc-labs.com>
Date: Thu, 19 Mar 2026 11:36:46 +0100
Subject: [PATCH 1/2] feat: improve timeline datepickers

- support start of week
- add next/previous day buttons
---
 src/components/InputTimeInterval.vue | 38 +++++++++++++++++++++++++---
 src/components/QueryOptions.vue      | 15 +++++++++--
 2 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue
index 77daf8bf..9a963fe7 100644
--- a/src/components/InputTimeInterval.vue
+++ b/src/components/InputTimeInterval.vue
@@ -45,11 +45,15 @@ div
             option(:value="24*60*60") 24h
       tr(v-if="mode == 'range'")
         th.pr-2 Range:
-        td
-          input(type="date", v-model="start", :max="end || undefined")
-          input(type="date", v-model="end", :min="start || undefined", placeholder="(optional)")
+        td.d-flex.align-items-center
+          b-button(variant="outline-dark", size="sm", @click="shiftDays(-1)")
+            icon(name="arrow-left")
+          b-form-datepicker(v-model="start", size="sm", :start-weekday="firstDayOfWeek" :max="end || undefined")
+          b-form-datepicker(v-model="end", size="sm", :start-weekday="firstDayOfWeek", :min="start || undefined", placeholder="(optional)")
+          b-button(variant="outline-dark", size="sm", @click="shiftDays(1)")
+            icon(name="arrow-right")
           button(
-            class="btn btn-outline-dark btn-sm",
+            class="btn btn-outline-dark btn-sm ml-1",
             type="button",
             :disabled="invalidDaterange || emptyDaterange || daterangeTooLong",
             @click="applyRange"
@@ -70,11 +74,20 @@ div
     background-color: #aaa;
   }
 }
+
+.b-form-datepicker {
+  min-width: 300px;
+}
 </style>
 
 <script lang="ts">
 import moment from 'moment';
 import 'vue-awesome/icons/sync';
+import 'vue-awesome/icons/arrow-left';
+import 'vue-awesome/icons/arrow-right';
+import { mapState } from 'pinia';
+import { useSettingsStore } from '~/stores/settings';
+
 export default {
   name: 'input-timeinterval',
   props: {
@@ -113,6 +126,7 @@ export default {
     };
   },
   computed: {
+    ...mapState(useSettingsStore, ['startOfWeek']),
     value: {
       get() {
         if (this.mode == 'range' && this.start) {
@@ -138,6 +152,14 @@ export default {
       if (!this.end) return false;
       return moment(this.start).add(this.maxDuration, 'seconds').isBefore(moment(this.end));
     },
+    firstDayOfWeek() {
+      const mapping = {
+        Sunday: 0,
+        Monday: 1,
+        Saturday: 6,
+      };
+      return mapping[this.startOfWeek] !== undefined ? mapping[this.startOfWeek] : 1;
+    },
   },
   mounted() {
     this.duration = this.defaultDuration;
@@ -179,6 +201,14 @@ export default {
       this.mode = 'last_duration';
       this.valueChanged();
     },
+    shiftDays(n) {
+      if (!this.start) return;
+      this.start = moment(this.start).add(n, 'days').format('YYYY-MM-DD');
+      if (this.end) {
+        this.end = moment(this.end).add(n, 'days').format('YYYY-MM-DD');
+      }
+      this.applyRange();
+    },
   },
 };
 </script>
diff --git a/src/components/QueryOptions.vue b/src/components/QueryOptions.vue
index 008d3b69..fcab9f1a 100644
--- a/src/components/QueryOptions.vue
+++ b/src/components/QueryOptions.vue
@@ -5,9 +5,9 @@ div
       option(v-for="hostname in hostnameChoices")
         | {{hostname}}
   b-form-group(label="Start" label-cols=2)
-    b-form-datepicker(v-model="queryOptionsData.start")
+    b-form-datepicker(v-model="queryOptionsData.start", :start-weekday="firstDayOfWeek")
   b-form-group(label="Stop" label-cols=2)
-    b-form-datepicker(v-model="queryOptionsData.stop")
+    b-form-datepicker(v-model="queryOptionsData.stop", :start-weekday="firstDayOfWeek")
   b-form-group(label="Toggles" label-cols=2)
     b-form-checkbox(type="checkbox" v-model="queryOptionsData.filter_afk" label="Filter AFK" description="")
       label Exclude time away from computer
@@ -16,7 +16,9 @@ div
 <script lang="ts">
 import Vue from 'vue';
 import moment from 'moment';
+import { mapState } from 'pinia';
 import { useBucketsStore } from '~/stores/buckets';
+import { useSettingsStore } from '~/stores/settings';
 
 export default Vue.extend({
   name: 'QueryOptions',
@@ -39,9 +41,18 @@ export default Vue.extend({
   },
 
   computed: {
+    ...mapState(useSettingsStore, ['startOfWeek']),
     hostnameChoices() {
       return this.bucketsStore.hosts;
     },
+    firstDayOfWeek() {
+      const mapping = {
+        Sunday: 0,
+        Monday: 1,
+        Saturday: 6,
+      };
+      return mapping[this.startOfWeek] !== undefined ? mapping[this.startOfWeek] : 1;
+    },
   },
 
   watch: {

From d1bfe814b485d1bdbb48d343595a9c191ece2b8e Mon Sep 17 00:00:00 2001
From: Marco Schmidlin <mb@triarc-labs.com>
Date: Thu, 19 Mar 2026 12:48:04 +0100
Subject: [PATCH 2/2] feat: improve timeline datepickers

- support start of week
- add next/previous day buttons
---
 src/components/InputTimeInterval.vue | 8 ++------
 src/components/QueryOptions.vue      | 8 ++------
 src/util/time.ts                     | 9 +++++++++
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/src/components/InputTimeInterval.vue b/src/components/InputTimeInterval.vue
index 9a963fe7..4eb6084c 100644
--- a/src/components/InputTimeInterval.vue
+++ b/src/components/InputTimeInterval.vue
@@ -87,6 +87,7 @@ import 'vue-awesome/icons/arrow-left';
 import 'vue-awesome/icons/arrow-right';
 import { mapState } from 'pinia';
 import { useSettingsStore } from '~/stores/settings';
+import { get_first_day_of_week } from '~/util/time';
 
 export default {
   name: 'input-timeinterval',
@@ -153,12 +154,7 @@ export default {
       return moment(this.start).add(this.maxDuration, 'seconds').isBefore(moment(this.end));
     },
     firstDayOfWeek() {
-      const mapping = {
-        Sunday: 0,
-        Monday: 1,
-        Saturday: 6,
-      };
-      return mapping[this.startOfWeek] !== undefined ? mapping[this.startOfWeek] : 1;
+      return get_first_day_of_week(this.startOfWeek);
     },
   },
   mounted() {
diff --git a/src/components/QueryOptions.vue b/src/components/QueryOptions.vue
index fcab9f1a..3c04cd6e 100644
--- a/src/components/QueryOptions.vue
+++ b/src/components/QueryOptions.vue
@@ -19,6 +19,7 @@ import moment from 'moment';
 import { mapState } from 'pinia';
 import { useBucketsStore } from '~/stores/buckets';
 import { useSettingsStore } from '~/stores/settings';
+import { get_first_day_of_week } from '~/util/time';
 
 export default Vue.extend({
   name: 'QueryOptions',
@@ -46,12 +47,7 @@ export default Vue.extend({
       return this.bucketsStore.hosts;
     },
     firstDayOfWeek() {
-      const mapping = {
-        Sunday: 0,
-        Monday: 1,
-        Saturday: 6,
-      };
-      return mapping[this.startOfWeek] !== undefined ? mapping[this.startOfWeek] : 1;
+      return get_first_day_of_week(this.startOfWeek);
     },
   },
 
diff --git a/src/util/time.ts b/src/util/time.ts
index befbc2aa..55f27e48 100644
--- a/src/util/time.ts
+++ b/src/util/time.ts
@@ -94,3 +94,12 @@ export function get_today_with_offset(offset?: string): string {
   const offset_dur = get_offset_duration(offset);
   return moment().subtract(offset_dur).startOf('day').format('YYYY-MM-DD');
 }
+
+export function get_first_day_of_week(startOfWeek: string): number {
+  const mapping: Record<string, number> = {
+    Sunday: 0,
+    Monday: 1,
+    Saturday: 6,
+  };
+  return mapping[startOfWeek] !== undefined ? mapping[startOfWeek] : 1;
+}